TERCER AÑO DE BACHILLERATO
UNIDAD II: PRESENCIA EN INTERNET
AÑO 2009 - 2010
Tema 3 _ 1: HTML y lenguajes script
Objetivo: Utilizar HTML o lenguajes scripts para mejorar la funcionalidad o presentación del Blog o sitio web.
HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
Códigos HTML básicos : define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecerapodemos encontrar:
Un ejemplo de código HTML con coloreado de sintaxis
· : define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana
· : para vincular el sitio a hojas de estilo o iconos Por ejemplo:
· : para colocar el estilo interno de la página, ya sea usando CSS, JavaScript u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta
: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpopodemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
· : encabezados o títulos del documento con diferente relevancia.,
,
,
,
,
· · · · · · · · · · · · TEMA 3: FOTOGRAMAS Y LINEA DE TIEMPO Objetivo: Aplicar opciones de la línea de Tiempo y fotogramas para crear secuencias animadas. La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes. 1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos) 2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película. Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.0 en la imagen) y el Tiempo de película transcurrido (0.0s en la imagen). A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro, en el orden que establece la misma Línea de tiempo. Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué tipos de fotogramas hay y cuáles son sus rasgos. Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifíco, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la película. Se identifican por tener un punto negro en el centro y cuando esté vacío se le diferencia por una línea negra vertical. Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habría 3 Keyframes. Uno para cada posición distinta de la pelota. Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de clor gris. El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misión es prolongar la duración de un fotograma clave o keyframe. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película y Flash no los tendrá en cuenta al publicar la película. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos. Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas vacíos. No debemos confundirlos con los fotogramas contenedor, pues estos últimos vienen delimitados por líneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrará una imagen en blanco. (no dará por terminada la animación). De modo que si queremos que un objeto aparezca en el fotograma 1 y después otra vez en el fotograma 10. Los fotogramas del 2 al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y volverá a aparecer. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel "Frame". Si la duración del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una acción asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la película. En la imagen, la acción existente en el fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y sí las tiene el 5. Fotogramas Animados: Pueden ser de 2 tipos: 1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final. Para representar esta animación aparece una flecha entre estos Keyframes. Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representará el movimiento entre ambas posiciones en la película final) y del 6 al 11. Otro movimiento. 2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del final. Para representar esta animación aparece una flecha entre estos Keyframes. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendría la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta. En esta última imagen aparecen casi todos los tipos de fotogramas, ¿los reconoces? Una Capa se puede definir como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de Tiempo (con infinitos fotogramas). Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una capa independiente llamada "Sonidos", por ejemplo). Las ventajas y desventajas de usar capas se verá en el Tema 8. El Área de trabajo consta de numerosas partes, veámoslas: Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de busqueda rellenando los campos de Título y Descripción. Dimensiones: Determinan el tamaño de la película. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px. Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película. Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. Unidades de Regla: Unidad que se empleará para medir las cantidades. Transformar en predeterminado: Este botón, propio de la nueva versión de Flash, permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee. TAREAS / DEBERES / PRÁCTICAS Nota:Las tareas en clase y los deberes son a mano en el cuaderno de computación. Práctica: En Flash, Realizar un dibujo utilizando colores distintos y herramientas varias, darle una pequeña animación. Deber en casa: En el cuaderno de Informática: 1. Realice un gráfico Organigrama, mapa conceptual, mentefacto o mapa mental donde se resuma los tipos de fotogramas y su utilidad. 2. Realzar un informe con captura de pantallas explicando el ejercicio que realizó en clase. UNIDAD II: PRESENCIA EN INTERNET AÑO 2009 - 2010 Tema2: Hosting y Dominios Objetivo: Reconocer el uso de servicios de Hosting y asignación de Dominios en Internet. *********** En este segmento incursionaremos en la forma de crear y publicar nuestros propios sitios Web en Internet, Para lo cual debemos comprender cosas como: Además utilizaremos el servicio que nos brinda el sitio www.20m.com para realizar las respectivas prácticas. Resuelva la tarea de investigación para poder aclarar las ideas antes mencionadas. Tareas: En el cuaderno de computación Resolver los siguientes puntos: UNIDAD II: PRESENCIA EN INTERNET AÑO 2009 - 2010 Tema2: Blogs Objetivo: Utilizar Sitios Web que ofrecen espacios de publicación en Blogs mediante las herramientas de Internet para crear artículos y publicarlos en Definición: Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. El término blog proviene de las palabras web y log ('log' en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bitácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en Internet en línea. Habitualmente, en cada artículo de un blog, los lectores pueden escribir sus comentarios y el autor darles respuesta, de forma que es posible establecer un diálogo. No obstante es necesario precisar que ésta es una opción que depende de la decisión que tome al respecto el autor del blog, pues las herramientas permiten diseñar blogs en los cuales no todos los internautas -o incluso ninguno- puedan participar. El uso o tema de cada blog es particular, los hay de tipo personal, periodístico, empresarial o corporativo, tecnológico, educativo (edublogs), políticos, etc. (Extraído de www.wikipedia.org) Uno de las páginas más utilizadas para blogs es www.blogger.com , la cual pertenece a la empresa Google, y será la que utilizaremos. Simplemente habrá que seguir los tres sencillos pasos que nos muestra la página y nuestro blog estará listo. Tu blog debe tener un nombre que lo identifique y una dirección, en blogger, si haz puesto a tu blog por ejemplo la dirección o nombre "miprimerblog" podrán acceder a el con el siguiente URL: "http://miprimerblog.blogspot.com". Cabe resaltar que debemos tener presente que dos nombres de usuario o nombres de blogs no pueden ser iguales. Si ya tienes una cuenta en Google, por ejemplo una cuenta de gmail, o si ya haz creado anteriormente tu cuenta en Blogger, solo deberás ingresar tu nombre de usuario y contraseña en la parte superior y podrás acceder a tus blogs o crear nuevos blogs. Debemos resaltar lo siguiente: Un usuario puede tener varios blogs, un blog debe tener un nombre – un tema y una URL, y cada blog va a contener varias publicaciones de manera cronológica que se les va a conocer como entradas del blog. Para terminar podemos decir que un blog pone a disposición del usuario una página totalmente en blanco donde podemos ir llenándola con la información que nosotros queramos, así como imágenes y videos, además podemos anexarle a nuestro blog utilidades como encuestas o envio de mensajes y comentarios. Tarea: TEMA 2: HERRAMIENTAS DE EDICION Objetivo: Reconocer las herramientas para el dibujo y su utilización dentro de Flash para crear los gráficos que posteriormente serán parte de la animación. La Barra de Herramientas. Herramientas Básicas. La Barra de Herramientas. Herramientas Avanzadas. Herramienta Lazo: TAREAS / DEBERES / PRÁCTICAS Nota:Las tareas en clase y los deberes son a mano en el cuaderno de computación. Práctica: En Flash, Realizar un dibujo utilizando colores distintos y herramientas varias, darle una pequeña animación. : define una tabla
: fila de una tabla : celda de datos de una tabla : Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: Wikipedia se representa como Wikipedia): imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: 
: Etiquetas para listas.: texto en negrita (Etiqueta descartada. Se recomienda usar la etiqueta ): texto en cursiva: texto subrayado
Contenido de una celda</td></tr></table>
2do Bach U2 Tema 3 2009





Fot. Etiquetado. 
Fot. con Acciones 
Fot. de Anim de Mov. 
Fot. de Anim de Forma. 
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicará un tema completo. Aún así, veamos a grandes rasgos qué son las capas. 
La parte más importante es el Escenario, sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento: 
lunes, 20 de julio de 2009
2009 - 3ero - Trim2 - Tema 3: Hosting (WebHosting)
martes, 14 de julio de 2009
2009 - 3ero - Trim2 - Tema 2: Blogs
![]()
2009 - 2do - Trim 2 - Tema 2: Herramientas de edición

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:
Herramienta Flecha:
. Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic), los bordes (con doble clic), zonas a nuestra elección... Además, su uso adecuado puede ahorrarnos tiempo en el trabajo.
Herramienta Línea:
Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.
Herramienta Texto:
Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el tema siguiente.
Herramienta Óvalo:
La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla.
Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear Óvalo
Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Dar color a un Óvalo
Herramienta Rectángulo:
Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.
Herramienta Lápiz:
Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
Herramienta Brocha:
Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.
Herramienta Cubo de Pintura:
Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no está delimitada por un borde. El color que aplicará esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
Herramienta Borrador:
Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de eliminar todo aquello que "dibuje".
Su función es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la selección a mano).
Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imágenes:
. Esto, es la Herramienta "Varita Mágica", tan popular en otros programas de dibujo. Permite hacer selecciones según los colores de los objetos. El tercer dibujo que aparece es este:
permite hacer selecciones poligonales.
Herramienta Pluma:
Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las más potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vértices de los polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de práctica se acaba dominando.
Herramienta Subseleccionador:
Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vértices que componen los objetos creados con dicha herramienta.
Herramienta Bote de Tinta:
Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.)
Herramienta Cuentagotas:
Su misión es "Capturar" colores para que posteriormente podamos utilizarlos.
