INFORMATICA EN EL COMIL3: 2009

jueves, 20 de agosto de 2009

IIBACH U2 Tema 4: Símbolos

TEMA 4: Símbolos

Objetivo: Crear símbolos para usarlos como los elementos básicos para crear animaciones

Referencias:

Manual de Flash mx
Curso en Línea de Flash 8

Qué son los símbolos

Los Símbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash 8.

Estos objetos al ser transformados en símbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma o en otra película.

Cómo crear un símbolo

La acción de crear un nuevo símbolo es una de las más usadas en Flash ya que es uno de los primeros pasos para crear una animación, como veremos más adelante.

El procedimiento es el siguiente:

Seleccionamos el objeto que queramos convertir en símbolo. Abrimos el panel de Propiedades del Símbolo, accediendo al menú Insertar → Nuevo Símbolo o simplemente pulsando Ctrl + F8 o F8.

Una vez hecho esto nos aparecerá una ventana como la mostrada en la imagen. Introducimos el nombre del símbolo que vamos a crear.

Esto al principio y mientras tengamos poco símbolos no será muy importante, pero más adelante nos servirá para hacer referencia al objeto.

Sólo nos queda seleccionar el tipo de símbolo o comportamiento en que queremos convertir nuestro objeto. Podemos elegir entre Clip de Película, Botón y Gráfico.

Bastará con pulsar Aceptar para tener nuestro símbolo creado.

A continuación se presenta en la siguiente animación cómo insertar un símbolo tipo botón que ya se encuentra prediseñado en las bibliotecas comunes que se citan más abajo en este texto.

Click derecho en este enlace para guardar la animación en un medio de almacenamiento.

Las Bibliotecas

En Flash 8 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las películas que hemos creado. Todas ellas las tenemos a nuestra disposición para utilizar los símbolos que contienen.

Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a la Barra de Menús, Ventana → Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de símbolos: botones, clips o gráficos.

Para acceder a la líbrería de símbolos de la película que estamos creando de nuevo vamos a la Barra de Menús, Ventana → Biblioteca. En esta biblioteca aparecerán todos los símbolos que hemos creado hasta el momento.

Podemos comprobar como el nuevo símbolo que hemos creado en el ejercicio anterior (Ejercicio Crear Símbolo) se ha añadido a nuestra biblioteca accediendo a ella como acabamos de indicar.

Los símbolos contenidos en las bibliotecas están identificados por su nombre y por un icono que representa el tipo de símbolo que representan:

Clip Botón Gráfico

Para utilizar un símbolo de una biblioteca basta con pulsar en el nombre de dicho símbolo y arrastrarlo a cualquier lugar del área de trabajo.

Diferencia entre símbolo e instancia

Como hemos comentado anteriormente, cuando creamos un símbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una película, éste se convierte en una instancia.

Aunque parece que sean lo mismo, la importancia de esta distinción es que cuando utilicemos un símbolo que hayamos creado previamente en una película, al modificarlo se modificará la instancia, mientras que el objeto seguirá intacto, tal y como era en el momento de su creación, de manera que podremos volverlo a utilizar en otro momento.

A la derecha tenéis un ejemplo de una biblioteca, en este caso una biblioteca estándar de Flash. Cada elemento de la biblioteca es un símbolo. .

TAREAS / DEBERES / PRÁCTICAS Nota:Las tareas en clase y los deberes son a mano en el cuaderno de computación.

Práctica:

Crear una animación con símbolos de tipo clip de película que a su vez tengan animaciones internas.

Deber:

· Hacer un informe de prácticas con capturas de pantalla de lo realizado en el aula.

IIIBACH U2 Tema4

Tema4: Diseño de sitios Web con DreamWeaver.

Objetivo: Utilizar Macromedia Dream Weaver para crear sitios web que luego subiremos a un .

Qué es Dreamweaver 8

Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Si no conoces las características básicas de HTML puedes verlas aquí.

Novedades de Dreamweaver 8

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior, Dreamweaver MX 2004.

Integración de RSS: con Dreamweaver 8 podrás integrar entradas RSS provinientes de otras páginas con sólo introducir la fuente y arrastrar y colocar los campos. De esta forma podrás introducir datos en forato XML fácil y cómodamente.

Mejoras CSS: esta última versión ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrás acceder a la configuración de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrícula editable desde donde podrás modificar sus propiedades. Además, Dreamweaver 8, añade una nueva barra de herramientas que proporciona la reprodución inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).

Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C.

Transferencia de archivos: Ahora con Dreamweaver 8 podrás seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronización ha mejorado notablemente siendo posible una mejor gestión de cambios, además de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban.

Interfaz mejorada: Los usuarios con problemas visuales podrán acceder auna opción de Aumento de la pantaña en vista de diseño para analizar o trabajar con difícles anidamientos de tablas. Además de la inclusión de información visual gracias a las guías que permitirán la medición píxel a píxel de todos los elementos.

Nueva barra de herramientas: Se ha añadido una barra de herramientas a Dreamweaver 8, podrás encontrarla en la parte lateral izquierda del modo de Código, esta barra hace mucho más accesible el código al permitirnos la navegación por etiquetas y su contracción. Una de las nuevas novedades es la posibilidad de añadir comentarios con un sólo clic.

Compatibilidad: Comentaremos, además, la compatibilidad añadida en esta versión con PHP5, Coldfusion MX 7 y Video Flash.

Editar páginas web

bloc_notas Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedía Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com

En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imágen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

Recursos:

Curso en linea de DreamWeaver

Ejercicio Paso a paso: Crear sitio Web y un documento (Clic aquí para bajar los archivos que se necesitan para los ejercicios)

Manual Completo de Dreamweaver 2004

Manual para crear Un sitio y páginas web en Dream Weaver 8.0

EJERCICIO:

Utilizando como apoyo el "Manual para crear un sitio y páginas web con Dreamweaver":

1) Crear un Sitio llamado "ejercicio" en la computadora local (sin conexion remota ni de LAN a servidores).

2) Crear una Página de Inicio o principal(Home page) en ese sitio a partir de una muestra.

3) Crear una página normal (HTML) con tablas, colores e imágenes, que esté vinculada a la principal.

DEBER:

Repetir en casa la práctica anterior y en el cuaderno de computación realizar un informe explicandola con captura de pantallas(Debe constar su nombre como parte del diseño y evidenciarlo en las capturas de pantalla).

EJERCICIO 2:

1) Crear Un sitio de DreamWever llamado ejercicio2 sin ningún tipo de coexión a servidor y guradarlo en la carpeta C:\ejercicio2.
2) Dentro del sitio creado crear una página a partir de un html en blanco básico similar a la del siguiente vínculo --> Pagina Ejercicio.
- La página utiliza lo siguiente: Tablas, Gráficos, Botones flash y animación flash.
- Haga click en este vínculo para bjarce un archivo con algunas animaciones flash, la utilizada en el ejercicio se llama "inicio" .

lunes, 27 de julio de 2009

3ero U2 Tema3_1 Html 2009

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='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="//www.google.com/js/bg/tty_OrL5QYfKemQRIlHGQG9kTttTJdYWl-vmWjncNec.js"></script><script type="text/javascript" src="/b/csi.js?h=tty_OrL5QYfKemQRIlHGQG9kTttTJdYWl-vmWjncNec" defer="true"></script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/848617736-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY7CqKgC8qzuSfcZjZbJSqtvzqmfnA:1713895027219';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2562592607431390212','//informaticacomil3.blogspot.com/2009/','2562592607431390212'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2562592607431390212', 'title': 'INFORMATICA EN EL COMIL3', 'url': 'http://informaticacomil3.blogspot.com/2009/', 'canonicalUrl': 'http://informaticacomil3.blogspot.com/2009/', '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/32178a08698b1e6b', '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', 'pageTitle': 'INFORMATICA EN EL COMIL3: 2009'}}, {'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/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2009, 'rangeMessage': 'Mostrando entradas de 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/1346379794-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

jueves, 20 de agosto de 2009

IIBACH U2 Tema 4: Símbolos

IIIBACH U2 Tema4

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.