INFORMATICA EN EL COMIL3: 2009-07-26

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 cabecera podemos encontrar:

Un ejemplo de código HTML con coloreado de sintaxis

· </code>: 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 ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><link></code>: para vincular el sitio a <a href="http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada" title="Hojas de estilo en cascada">hojas de estilo</a> o iconos Por ejemplo:<code><link rel="stylesheet" href="/style.css" type="text/css"></code> ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><style></code>: para colocar el estilo interno de la página, ya sea usando <a href="http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada" title="Hojas de estilo en cascada">CSS</a>, <a href="http://es.wikipedia.org/wiki/JavaScript" title="JavaScript">JavaScript</a> u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <code><link></code> <ul type="disc"> <li class="MsoNormal" style=""><code><body></code>: 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 <a href="http://es.wikipedia.org/wiki/HTML_%28colores%29" title="HTML (colores)">color</a> de fondo y márgenes. Dentro del cuerpo <code><body></code> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:</li> </ul> ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><h1>, <h2>, <h3>, <h4>, <h5>, <h6></code>: encabezados o títulos del documento con diferente relevancia. ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><table></code>: define una tabla ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><tr></code>: fila de una tabla ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><td></code>: celda de datos de una tabla ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><a></code>: <a href="http://es.wikipedia.org/wiki/Hiperv%C3%ADnculo" title="Hipervínculo">Hipervínculo</a> o enlace, dentro o fuera del <a href="http://es.wikipedia.org/wiki/Sitio_web" title="Sitio web">sitio web</a>. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <code><a href="http://www.wikipedia.org">Wikipedia</a></code> se representa como <a href="http://www.wikipedia.org/" title="http://www.wikipedia.org">Wikipedia</a>) ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><div></code>: área de la página ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><img></code>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <code><img src="./imagenes/mifoto.jpg" /></code> ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><li><ol><ul></code>: Etiquetas para listas. ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code></code>: texto en negrita (Etiqueta descartada. Se recomienda usar la etiqueta <code></code>) ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code></code>: texto en cursiva ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code></code>: texto subrayado <ul type="disc"> <li class="MsoNormal" style="">La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") tal como se muestra en los siguientes ejemplos:</li> </ul> ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><table><tr><td>Contenido de una celda</td></tr></table></code> ·<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> <code><script>Código de un <a href="http://es.wikipedia.org/wiki/Script" title="Script">script</a> integrado en la página</script></code> ---------- <a name="Nociones_b.C3.A1sicas_de_HTML"></a><o:p> </o:p> (Extraido de : <a href="http://es.wikipedia.org/wiki/HTML" target="_blank">http://es.wikipedia.org/wiki/HTML</a> ) <o:p> </o:p> Realmente el código html está en formato del texto más simple, de tal manera que podemos crear una página web sin necesidad de un editor especial, solamente utilizando un editor de texto normal como el bloc de notas, <o:p> </o:p> Vamos a realizar el siguiente ejercicio:<o:p></o:p> <o:p> </o:p> 1)<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> Ingresa al bloc de notas de Windows.<o:p></o:p> 2)<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> En el bloc de notas digita el siguiente código html:<o:p></o:p> <img src="http://central/Tercero/Unidad2/U2TEMA3_1%20Html_archivos/image011.jpg" shapes="Imagen_x0020_3" width="781" border="0" height="577" /><o:p></o:p> Nota: Se debe ser extremadamente exacto con la forma de escribir o no resultará.<o:p></o:p> 3)<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> Guárdelo en el escritorio con el nombre mipagina.html<o:p></o:p> <img src="http://central/Tercero/Unidad2/U2TEMA3_1%20Html_archivos/image013.jpg" shapes="Imagen_x0020_6" width="564" border="0" height="179" /><o:p></o:p> Nota: al cambiar la extensión de .txt a .html hacemos que la computadora lo identifique como página web.<o:p></o:p> <o:p> </o:p> 4)<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> Abra el archivo creado con un avegador como el Mozilla Fire Fox o Google Chrome.<o:p></o:p> <img src="http://central/Tercero/Unidad2/U2TEMA3_1%20Html_archivos/image015.jpg" shapes="Imagen_x0020_7" width="596" border="0" height="483" /><o:p></o:p> <o:p> </o:p> LENGUAJES SCRIPT.<o:p></o:p> <o:p> </o:p> Los lenguajes Script o lenguajes de programación interpretados son lenguajes de programación (Permiten escribir comandos que harán funcionar a la computadora de una forma específica) que se pueden incluir en el código HTML para dar alguna funcionalidad especial a tu página.<o:p></o:p> <o:p> </o:p> Por ejemplo: puedes realizar una búsqueda en Google con el texto “Trucos HTML” y entre otras cosas saldrán códigos en Java o Vbs que permitirán agregar detalles interesantes a tu codificación, la mayoría de las veces lo único que tienes que hacer es copiar y pegar el código en tu HTML. Si decides aprender a fondo estos lenguajes podrías llegar a crear tus propios trucos.<o:p></o:p> <o:p> </o:p> Por ejemplo puedes agregar el siguiente truco:<o:p></o:p> <o:p> </o:p> <img src="http://central/Tercero/Unidad2/U2TEMA3_1%20Html_archivos/image017.jpg" shapes="Imagen_x0020_10" width="911" border="0" height="526" /><o:p></o:p> <o:p> </o:p> Puedes consultar otros trucos en el siguiente vínculo: <a href="http://www.usuarios.sion.com/pauluk/trucospchtml.htm" target="_blank">http://www.usuarios.sion.com/pauluk/trucospchtml.htm</a> <o:p> </o:p> Tareas: <ol start="1" type="1"> <li class="MsoNormal" style="color: windowtext;">Agregar a su blog y a su página Web personal algún truco html.<o:p></o:p></li> </ol> <o:p> </o:p> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> Publicado por <meta content='https://www.blogger.com/profile/02566578067127996884' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/02566578067127996884' rel='author' title='author profile'> Luis Edgar Sánchez </a> en <meta content='http://informaticacomil3.blogspot.com/2009/07/3ero-u2-tema31-html-2009.html' itemprop='url'/> <a class='timestamp-link' href='http://informaticacomil3.blogspot.com/2009/07/3ero-u2-tema31-html-2009.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-07-27T13:24:00-05:00'>13:24</abbr></a> <a class='comment-link' href='https://www.blogger.com/comment.g?blogID=2562592607431390212&postID=6694719697722382276' onclick=''> No hay comentarios: </a> <a href='https://www.blogger.com/post-edit.g?blogID=2562592607431390212&postID=6694719697722382276&from=pencil' title='Editar entrada'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> Etiquetas: <a href='http://informaticacomil3.blogspot.com/search/label/comil' rel='tag'>comil</a>, <a href='http://informaticacomil3.blogspot.com/search/label/comil3' rel='tag'>comil3</a>, <a href='http://informaticacomil3.blogspot.com/search/label/html' rel='tag'>html</a>, <a href='http://informaticacomil3.blogspot.com/search/label/informatica' rel='tag'>informatica</a>, <a href='http://informaticacomil3.blogspot.com/search/label/tercero' rel='tag'>tercero</a> </div> <div class='post-footer-line post-footer-line-3'> </div> </div> </div> </div> <div class='inline-ad'> <script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class='post-outer'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image001.jpg' itemprop='image_url'/> <meta content='2562592607431390212' itemprop='blogId'/> <meta content='941135534164350794' itemprop='postId'/> <a name='941135534164350794'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://informaticacomil3.blogspot.com/2009/07/tema-3-fotogramas-y-linea-de-tiempo.html'>2do Bach U2 Tema 3 2009</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-941135534164350794' itemprop='description articleBody'> <tr style=""><td style="padding: 1.5pt; width: 554.25pt;" width="739"></td></tr><tr style=""><td style="padding: 1.5pt; width: 554.25pt;" width="739">TEMA 3: FOTOGRAMAS Y LINEA DE TIEMPO <o:p></o:p> </td> </tr> <tr style="height: 57.75pt;"> <td style="padding: 1.5pt; height: 57.75pt;"> Objetivo: Aplicar opciones de la línea de Tiempo y fotogramas para crear secuencias animadas.<o:p></o:p> </td> </tr> <tr style=""> <td style="padding: 1.5pt; background: rgb(255, 255, 204) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" valign="top" background="http://central/Segundo/Unidad1/image004.jpg"> <ul type="disc"> <li class="MsoNormal" style="color: rgb(38, 53, 74); line-height: 16.5pt;">Referencias:<o:p></o:p></li> <ul type="circle"> <li class="MsoNormal" style="color: rgb(38, 53, 74); line-height: 16.5pt;"><a href="http://central/Segundo/Unidad2/tutorial-de-flash-mx.doc" target="_blank">Manual de Flash mx</a><o:p></o:p></li> <li class="MsoNormal" style="color: rgb(38, 53, 74); line-height: 16.5pt;"><a href="http://www.aulaclic.es/flash8/index.htm">Curso en Línea de Flash 8</a><o:p></o:p></li> </ul> </ul> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 88%;" width="88%"> <a name="linea_t"></a>La Línea de Tiempo<o:p></o:p> </td> <td style="padding: 0.75pt; width: 12%;" width="12%"> <o:p></o:p> </td> </tr> </tbody></table> <o:p> </o:p> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style="height: 161.25pt;"> <td style="padding: 0.75pt; width: 56%; height: 161.25pt;" width="56%"> La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes. <o:p></o:p> 1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos)<o:p></o:p> 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. <o:p></o:p> 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).<o:p></o:p> </td> <td style="padding: 0.75pt; width: 44%; height: 161.25pt;" width="44%"> <img border="0" height="109" shapes="Imagen_x0020_65" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image001.jpg" width="390" /><o:p></o:p> </td> </tr> <tr style="height: 36.75pt;"> <td colspan="2" style="padding: 0.75pt; height: 36.75pt;"> 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.<o:p></o:p> <a name="a1"></a>FOTOGRAMAS:<o:p></o:p> <o:p> </o:p> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style=""> <td colspan="2" style="padding: 0.75pt;"> 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.<o:p></o:p> <o:p></o:p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; width: 17%;" width="17%"> <img border="0" height="96" shapes="Imagen_x0020_68" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image002.jpg" width="132" /><o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%;" width="83%"> 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.<o:p></o:p> 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.<o:p></o:p> </td> </tr> <tr style=""> <td colspan="2" style="padding: 0.75pt;"> Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de clor gris.<o:p></o:p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; width: 17%;" width="17%"> <img border="0" height="97" shapes="Imagen_x0020_71" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image004.jpg" width="133" /><o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%;" width="83%"> El último fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris.<o:p></o:p> 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.<o:p></o:p> </td> </tr> <tr style=""> <td colspan="2" style="padding: 0.75pt;"> 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.<o:p></o:p> </td> </tr> <tr style="height: 19.5pt;"> <td colspan="2" style="padding: 0.75pt; height: 19.5pt;"> Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco.<o:p></o:p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; width: 17%;" width="17%"> <img border="0" height="95" shapes="Imagen_x0020_74" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image006.jpg" width="129" /><o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%;" width="83%"> 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. <o:p></o:p> 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. <o:p></o:p> </td> </tr> <tr style="height: 51pt;"> <td style="padding: 0.75pt; width: 17%; height: 51pt;" width="17%"> <img border="0" height="56" shapes="Imagen_x0020_77" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image008.jpg" width="99" /> Fot. Etiquetado.<o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%; height: 51pt;" width="83%"> 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.<o:p></o:p> </td> </tr> <tr style="height: 51pt;"> <td style="padding: 0.75pt; width: 17%; height: 51pt;" width="17%"> <img border="0" height="54" shapes="Imagen_x0020_80" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image010.jpg" width="78" /> Fot. con Acciones<o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%; height: 51pt;" width="83%"> 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.<o:p></o:p> </td> </tr> <tr style="height: 14.25pt;"> <td colspan="2" style="padding: 0.75pt; height: 14.25pt;"> Fotogramas Animados: Pueden ser de 2 tipos:<o:p></o:p> 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.<o:p></o:p> </td> </tr> <tr style="height: 53.25pt;"> <td style="padding: 0.75pt; width: 17%; height: 53.25pt;" width="17%"> <img border="0" height="93" shapes="Imagen_x0020_83" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image012.jpg" width="131" /> Fot. de Anim de Mov.<o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%; height: 53.25pt;" width="83%"> 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.<o:p></o:p> </td> </tr> <tr style="height: 33.75pt;"> <td colspan="2" style="padding: 0.75pt; height: 33.75pt;"> 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.<o:p></o:p> </td> </tr> <tr style="height: 53.25pt;"> <td style="padding: 0.75pt; width: 17%; height: 53.25pt;" width="17%"> <img border="0" height="95" shapes="Imagen_x0020_86" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image029.jpg" width="130" /> Fot. de Anim de Forma.<o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%; height: 53.25pt;" width="83%"> 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.<o:p></o:p> <o:p></o:p> </td> </tr> <tr style="height: 53.25pt;"> <td style="padding: 0.75pt; width: 17%; height: 53.25pt;" width="17%"> <img border="0" height="65" shapes="Imagen_x0020_89" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image031.jpg" width="152" /><o:p></o:p> </td> <td style="padding: 0.75pt; width: 83%; height: 53.25pt;" width="83%"> En esta última imagen aparecen casi todos los tipos de fotogramas, ¿los reconoces?<o:p></o:p> </td> </tr> </tbody></table> <o:p></o:p> </td> </tr> </tbody></table> <o:p> </o:p> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 88%;" width="88%"> <a name="capas"></a>Las Capas<o:p></o:p> </td> <td style="padding: 0.75pt; width: 12%;" width="12%"> <o:p></o:p> </td> </tr> </tbody></table> <o:p> </o:p> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style="height: 140.25pt;"> <td style="padding: 0.75pt; width: 81%; height: 140.25pt;" width="81%"> <img alt="http://www.aulaclic.es/flash8/comunes/orangeball.gif" border="0" height="14" shapes="Imagen_x0020_46" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image032.gif" width="14" />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.<o:p></o:p> 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). <o:p></o:p> 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.<o:p></o:p> </td> <td style="padding: 0.75pt; width: 19%; height: 140.25pt;" width="19%"> <img border="0" height="112" shapes="Imagen_x0020_92" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image034.jpg" width="179" /><o:p></o:p> </td> </tr> </tbody></table> <o:p> </o:p> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 71%;" width="71%"> <a name="area"></a>El Área de Trabajo<o:p></o:p> </td> <td style="padding: 0.75pt; width: 29%;" width="29%"></td> </tr> </tbody></table> <o:p> </o:p> <table class="MsoNormalTable" style="width: 100%;" width="100%" border="0" cellpadding="0"> <tbody><tr style="height: 185.25pt;"> <td style="padding: 0.75pt; width: 65%; height: 185.25pt;" width="65%"> El Área de trabajo consta de numerosas partes, veámoslas:<o:p></o:p> <img alt="http://www.aulaclic.es/flash8/comunes/orangeball.gif" border="0" height="14" shapes="Imagen_x0020_48" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image035.gif" width="13" />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:<o:p></o:p> 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.<o:p></o:p> 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.<o:p></o:p> 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) <o:p></o:p> Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.<o:p></o:p> </td> <td style="padding: 0.75pt; width: 35%; height: 185.25pt;" width="35%"> <img border="0" height="334" shapes="Imagen_x0020_95" src="http://central/Segundo/Unidad2/U2Tema3fOTOGRAMSlINEAtIEMPO_archivos/image037.jpg" width="395" /><o:p></o:p> </td> </tr> <tr style="height: 84.75pt;"> <td colspan="2" style="padding: 0.75pt; height: 84.75pt;"> Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. <o:p></o:p> Unidades de Regla: Unidad que se empleará para medir las cantidades.<o:p></o:p> 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. <o:p></o:p> </td> </tr> </tbody></table> <o:p></o:p> <o:p></o:p> </td> </tr> <tr style=""> <td style="padding: 1.5pt; background: rgb(255, 153, 51) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" valign="top"> TAREAS / DEBERES / PRÁCTICAS Nota:Las tareas en clase y los deberes son a mano en el cuaderno de computación. <o:p></o:p> </td> </tr> <tr style=""> <td style="padding: 1.5pt; background: rgb(255, 255, 204) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" valign="top" background="http://central/Segundo/Unidad2/image004.jpg"> <o:p></o:p> Práctica:<o:p></o:p> En Flash, Realizar un dibujo utilizando colores distintos y herramientas varias, darle una pequeña animación. <o:p></o:p> <o:p> </o:p> Deber en casa:<o:p></o:p> En el cuaderno de Informática:<o:p></o:p> 1.<span style="Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;font-family:";font-size:7pt;"> Realice un gráfico Organigrama, mapa conceptual, mentefacto o mapa mental donde se resuma los tipos de fotogramas y su utilidad.<o:p></o:p> 2.<span style="Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;font-family:";font-size:7pt;"> Realzar un informe con captura de pantallas explicando el ejercicio que realizó en clase.<o:p></o:p> </td></tr> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> Publicado por <meta content='https://www.blogger.com/profile/02566578067127996884' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/02566578067127996884' rel='author' title='author profile'> Luis Edgar Sánchez </a> en <meta content='http://informaticacomil3.blogspot.com/2009/07/tema-3-fotogramas-y-linea-de-tiempo.html' itemprop='url'/> <a class='timestamp-link' href='http://informaticacomil3.blogspot.com/2009/07/tema-3-fotogramas-y-linea-de-tiempo.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-07-27T12:49:00-05:00'>12:49</abbr></a> <a class='comment-link' href='https://www.blogger.com/comment.g?blogID=2562592607431390212&postID=941135534164350794' onclick=''> No hay comentarios: </a> <a href='https://www.blogger.com/post-edit.g?blogID=2562592607431390212&postID=941135534164350794&from=pencil' title='Editar entrada'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> Etiquetas: <a href='http://informaticacomil3.blogspot.com/search/label/comil' rel='tag'>comil</a>, <a href='http://informaticacomil3.blogspot.com/search/label/comil3' rel='tag'>comil3</a>, <a href='http://informaticacomil3.blogspot.com/search/label/fotogramas' rel='tag'>fotogramas</a>, <a href='http://informaticacomil3.blogspot.com/search/label/intformatica' rel='tag'>intformatica</a>, <a href='http://informaticacomil3.blogspot.com/search/label/luis' rel='tag'>luis</a>, <a href='http://informaticacomil3.blogspot.com/search/label/profeluis' rel='tag'>profeluis</a>, <a href='http://informaticacomil3.blogspot.com/search/label/tiempo' rel='tag'>tiempo</a> </div> <div class='post-footer-line post-footer-line-3'> </div> </div> </div> </div> </div></div> </div> <div class='blog-pager' id='blog-pager'> <a class='blog-pager-newer-link' href='http://informaticacomil3.blogspot.com/' id='Blog1_blog-pager-newer-link' title='Entradas más recientes'>Entradas más recientes</a> <a class='blog-pager-older-link' href='http://informaticacomil3.blogspot.com/search?updated-max=2009-07-27T12:49:00-05:00&max-results=2' id='Blog1_blog-pager-older-link' title='Entradas antiguas'>Entradas antiguas</a> <a class='home-link' href='http://informaticacomil3.blogspot.com/'>Inicio</a> </div> <div class='clear'></div> <div class='blog-feeds'> <div class='feed-links'> Suscribirse a: <a class='feed-link' href='http://informaticacomil3.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Entradas (Atom)</a> </div> </div> </div></div> </div> <div id='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget AdSense' data-version='1' id='AdSense1'> <div class='widget-content'> <script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div class='clear'></div> </div> </div></div> </div> <div id='footer-wrapper'> <div class='footer section' id='footer'><div class='widget Profile' data-version='1' id='Profile1'> <h2>Datos personales</h2> <div class='widget-content'> <a href='https://www.blogger.com/profile/02566578067127996884'><img alt='Mi foto' class='profile-img' height='80' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5rKvBpQoTK-4ud9x-2RY-6LZWjdfKkrkgMgLJyyUBQHvkQOqL3OkKdzV5YUSJNMwOJwkpCCG6syi1PPf5Ysben76Fi2WbC-PXqPLrDlOtJvMWTVuR1vSfZvOl4ZrXw/s151-r/n1778932076_2049.jpg' width='80'/></a> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='https://www.blogger.com/profile/02566578067127996884' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> Luis Edgar Sánchez </a> </dt> <dd class='profile-data'>Machala, El Oro, Ecuador</dd> <dd class='profile-textblock'>Informático, docente, filósofo maniatado, artista en pausa.</dd> </dl> <a class='profile-link' href='https://www.blogger.com/profile/02566578067127996884' rel='author'>Ver todo mi perfil</a> <div class='clear'></div> </div> </div></div> </div> </div> </div></div></div></div> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1807328581-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY7G-KfqRk5JabawmThqLxeN0JnapQ:1714192953653';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2562592607431390212','//informaticacomil3.blogspot.com/2009_07_26_archive.html','2562592607431390212'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2562592607431390212', 'title': 'INFORMATICA EN EL COMIL3', 'url': 'http://informaticacomil3.blogspot.com/2009_07_26_archive.html', 'canonicalUrl': 'http://informaticacomil3.blogspot.com/2009_07_26_archive.html', 'homepageUrl': 'http://informaticacomil3.blogspot.com/', 'searchUrl': 'http://informaticacomil3.blogspot.com/search', 'canonicalHomepageUrl': 'http://informaticacomil3.blogspot.com/', 'blogspotFaviconUrl': 'http://informaticacomil3.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'es', 'localeUnderscoreDelimited': 'es', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22INFORMATICA EN EL COMIL3 - Atom\x22 href\x3d\x22http://informaticacomil3.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22INFORMATICA EN EL COMIL3 - RSS\x22 href\x3d\x22http://informaticacomil3.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22INFORMATICA EN EL COMIL3 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2562592607431390212/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-7343746323414040', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/16e657cb9c57b8a2', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Obtener enlace', 'key': 'link', 'shareMessage': 'Obtener enlace', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartir en Facebook', 'target': 'facebook'}, {'name': 'Escribe un blog', 'key': 'blogThis', 'shareMessage': 'Escribe un blog', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Compartir en Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartir en Pinterest', 'target': 'pinterest'}, {'name': 'Correo electr\xf3nico', 'key': 'email', 'shareMessage': 'Correo electr\xf3nico', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27es\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Leer m\xe1s', 'pageType': 'archive', 'pageName': '2009-07-26', 'pageTitle': 'INFORMATICA EN EL COMIL3: 2009-07-26'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'El enlace se ha copiado en el Portapapeles.', 'ok': 'Aceptar', 'postLink': 'Enlace de la entrada'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'INFORMATICA EN EL COMIL3', 'description': 'Clases de Inform\xe1tica para bachillerato en el Colegio Militar \x22H\xe9roes del 41\x22 Machala - Ecuador', 'url': 'http://informaticacomil3.blogspot.com/2009_07_26_archive.html', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2009, 'month': 7, 'day': 26, 'rangeMessage': 'Mostrando entradas de julio 26, 2009'}}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'main', document.getElementById('BlogSearch1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'main', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Cargando\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'main', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2336605088-lbx__es.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'sidebar', document.getElementById('AdSense1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'footer', document.getElementById('Profile1'), {}, 'displayModeFull')); </script> </body> </html>

INFORMATICA EN EL COMIL3

Buscar Tema

Archivo del blog

lunes, 27 de julio de 2009

3ero U2 Tema3_1 Html 2009

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.