Diseño de Páginas Web

Contenido
Lenguaje HTML
Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y se hace hincapié en las diferencias entre los navegadores a la hora de interpretar el mismo código HTML.

La primera página web
Se introducen las etiquetas HTML fundamentales, como html, head, body, etc. Además, se comprueba que el código HTML no es más que texto, por lo que puede ser creado con un sencillo editor de textos, como el Bloc de notas de Windows.

Formato de texto
Describe las características del texto de una página web, estudiando su formato, tanto de carácter como de párrafo. Así se estudian conceptos como los realces negrita, subrayado, cursiva y la distribución de párrafos y títulos o su alineación y cómo se representan en el código HTML.

Incorporar imágenes
Estudia las etiquetas HTML necesarias para incorporar imágenes en una página web, describiendo los formatos gráficos indicados para este propósito. También se introduce el concepto de animación sencilla utilizando el formato GIF animado.

Hipervínculos
Introduce el concepto de hipervínculo, fundamental para poder "navegar" entre páginas web y cómo podemos representarlo en el código HTML.

Listas
Se aprende a añadir listas numeradas y sin numerar en las páginas web a través del código HTML.

Insertar tablas
Introduce los conocimientos necesarios para poder incorporar tablas en las páginas web a través del código HTML, comprobando cómo podemos modificar fácilmente su aspecto.

Temas avanzados sobre tablas
Introduce conceptos avanzados en el trabajo con tablas en páginas web. Se indica cómo establecer las dimensiones de la tabla, su número de columnas, etc. y cómo afecta estos detalles al cargar la tabla en la página web. Todo esto desde el punto de vista de la introducción del código HTML.

Dividir la página en frames
Describe cómo dividir la página web en frames o marcos a través del código HTML, de forma que sea posible mostar en pantalla más de una página web al mismo tiempo.

Más sobre los frames
Introduce conceptos avanzados en el trabajo con frames o marcos en que podemos dividir las páginas web, indicando cómo hacerlo en el lenguaje HTML

Dreamweaver
Introducción al programa de diseño de páginas web y gestión de sitios Adobe Dreamweaver. Se presenta el mundo del diseño de páginas web y se describen los principales elementos del entorno de trabajo de Dreamweaver, explicando la forma de trabajar con sus paneles y herramientas, guardardando distintas configuraciones en espacios de trabajo. También se indica cómo mostrar los documentos o páginas en distintos navegadores y la utilización del sistema de ayuda.

Crear sitios web
Presenta los pasos a seguir para crear y configurar un sitio web en el programa Dreamweaver. Explica las diferencias entre el sitio local y sitio remoto, cómo organizarlos para albergar el contenido creado y las distintas formas de ver los archivos en el sitio local.

Configurar páginas web
Se estudia cómo crear y configurar nuevas páginas web en Dreamweaver, además de la forma de elegir colores en este programa, incluir imágenes de fondo o utilizar imágenes de rastreo.

Utilidades de edición
Se describen algunas funciones útiles en el trabajo diario con Dreamweaver, como pueden ser el trabajo con las distintas ventanas que podemos tener abiertas en el mismo, el modo de deshacer los cambios realizados en una página y la utilización de reglas, guías y cuadrícula como ayuda para la organización de los objetos.

Formato de texto (I)
Se indica cómo introducir texto y aplicarle formato para establecer la fuente, tamaño, color, alineación, sangría, etc., en forma de etiquetas HTML o creando y aplicando reglas y estilos CSS. También se muestra cómo guardar estilos CSS en forma de hojas de estilos externas y adjuntarlas a otros documentos.

Formato de texto (II)
Describe la forma de crear listas (numeradas, no numeradas o de definición) y de realizar la revisión de la ortografía. También se muestra la inclusión de otros objetos en las páginas, como reglas horizontales, comentarios o la fecha de la última modificación de la página.

Trabajo con vínculos
Explica cómo insertar hipervínculos en las páginas web: vínculos a un lugar determinado de una página (a través de un anclaje con nombre), vínculos a otras páginas (del mismo sitio o a cualquier página de Internet) y vínculos en un menú de salto. Se indican las diferencias entre rutas absolutas y relativas, así como la administración y modificación de hipervínculos. Por último, se describe el uso de comportamientos en las páginas, para ejecutar comandos en respuesta a determinados sucesos o eventos.

Insertar imágenes
Se describe el modo de incorporar imágenes en las páginas web. Se presentan los formatos gráficos que se pueden utilizar en una página web y sus diferencias, así como la creación de imágenes de sustitución, mapas de imagen y barras de navegación.

Etiquetas Div y tablas
Explica la forma de distribuir o colocar los contenidos en las páginas web mediante la utilización de etiquetas Div PA o elementos PA dispuestos en capas, utilizando tablas o por medio de etiquetas Div o contenedores. Se describe cómo establecer su formato e incluir el contenido.

División en marcos
Introduce el concepto de marco (también llamado frame), como una forma de dividir la página web en varias secciones y mostrar contenido distinto en cada una de ellas. Se explica el modo de trabajar con los marcos en Dreamweaver, así como la asignación de contenido y la creación de hipervínculos que trabajen con los marcos.

Trabajar con plantillas
Explica qué son y cómo crear y utilizar plantillas para, a partir de ellas, crear páginas web. Se muestra cómo organizar los contenidos en zonas bloqueadas y regiones editables de una plantilla.

Formularios
Describe lo que son, cómo se crean y cómo se configuran los formularios para que el visitante del sitio web envíe información al servidor web. Se explica el trabajo con los distintos campos que se pueden crear, viendo para qué se usa cada uno y sus propiedades.

Elementos multimedia
Presenta elementos multimedia dinámicos que podemos insertar en las páginas web: animaciones de Flash y vídeos de Flash entre otros. También se describen varias posibilidades de trabajo conjunto entre Dreamweaver y Fireworks, como la creación de un álbum de fotos web o la inserción de HTML procedente de Fireworks en una página web diseñada con Dreamweaver.

Otros efectos
Se describen varios elementos dinámicos que se pueden incluir en las páginas diseñadas con Dreamweaver: applets de Java, sonido, marquesinas, efectos Spry y Widgets Spry. También se explican distintas posibilidades en cuanto al trabajo en el código de las páginas con esta aplicación.

Publicar el sitio web
Explica los pasos a seguir para preparar el sitio web creado en Dreamweaver y finalmente publicarlo en el servidor web, es decir, ponerlo a disposición de los usuarios, de forma que éstos puedan ver las páginas web en sus navegadores.

Flash
Se presenta el mundo de la animación en las páginas web y cómo se ha convertido el formato de Flash en el más utilizado. Se introduce el entorno de trabajo de la aplicación Adobe Flash, la utilización del sistema de ayuda y cómo reproducir animaciones de este tipo con el reproductor independiente Flash Player.

Creación de la película
Explica cómo crear una película en el programa Adobe Flash, así como el uso de plantillas para la creación de nuevos documentos. Las películas son el proyecto de animación en el que se trabajará en Flash y que después se exportará para insertarlo en las páginas web. También se describen las distintas formas de visualizar el escenario y mostrar la vista previa de las películas, introduciendo los conceptos de escena y biblioteca.

Dibujo de objetos
Se estudian las técnicas de incorporar contenido en las películas del programa Adobe Flash, centrándose en el dibujo de objetos con las distintas herramientas de que dispone la aplicación.

Modos de dibujo y atributos de trazos
Describe los distintos modos de dibujo existentes en el programa Adobe Flash, que influyen en cómo se combinarán los dibujos creados. Se explica el concepto de trazo de un objeto y cómo puede editarse para conseguir el aspecto deseado. Finalmente se describe la manera de deshacer las acciones realizadas y la manera de borrar elementos de los dibujos.

El color y los rellenos
Explica el concepto de relleno de un objeto dibujado en el programa Adobe Flash y cómo crear colores personalizados a partir de su definición en un determinado modelo de color. También se describe cómo utilizar degradados o imágenes de mapa de bits para el relleno de los objetos.

Remodelación de líneas
Estudia las técnicas de remodelado de líneas en los dibujos del programa Adobe Flash: cómo modificar las líneas existentes, suavizarlas, enderezarlas, optimizar curvas, etc.

Trabajar con objetos
Presenta técnicas básicas para trabajar con los dibujos de una película del programa Adobe Flash: cómo seleccionarlos, agruparlos, copiarlos, cortarlos y pegarlos, y la manera de modificar su apilamiento y alineación.

Aplicar transformaciones
Estudia las técnicas para transformar los objetos creados en el programa Adobe Flash: escalar, rotar, inclinar, reflejar, distorsionar, etc. También se explica el proceso de trazar un mapa de bits, es decir, convertir una imagen en objetos vectoriales.

Texto en las películas
Explica cómo introducir texto en las películas de la aplicación Adobe Flash, viendo las distintas posibilidades existentes en cuanto al formato de carácter y de párrafo. También se describe el proceso de la corrección ortográfica y cómo convertir un objeto de texto en un objeto vectorial, pudiendo editarlo con las herramientas adecuadas para estos objetos.

Símbolos, instancias y capas
Introduce los conceptos de símbolo e instancia en el programa Adobe Flash, que sirven para gestionar varios objetos repetidos en una animación y conseguir reducir el tamaño del archivo de la película exportada. También explica cómo distribuir los objetos en capas y la forma de trabajar con estos elementos.

Animación (I)
Explica cómo utilizar la línea de tiempo para organizar el contenido de una película del programa Adobe Flash, describiendo el método fotograma a fotograma para crear animaciones y la utilización del papel cebolla como herramienta auxiliar.

Animación (II)
Describe el método de la interpolación de movimiento para crear animaciones en el programa Adobe Flash, viendo cómo modificar la posición, tamaño, transparencia y otras propiedades en una animación. También se estudia cómo modificar las curvas de dichas propiedades y la aplicación de filtros a objetos.

Animación (III)
Estudia otros métodos de interpolación para crear animaciones en el programa Adobe Flash, aparte de la interpolación de movimiento: las interpolaciones clásicas y las interpolaciones de forma. También se explica la aplicación de configuraciones predefinidas de movimiento y de modos de mezcla.

Animación (IV)
Estudia posibilidades avanzadas en la creación de animaciones con el programa Adobe Flash, como la animación por cinemática inversa (IK) y los efectos tridimensionales. Finalmente se describen las herramientas de dibujo decorativas.

Películas interactivas
Introduce las técnicas básicas de la aplicación Adobe Flash que permiten crear animaciones donde el usuario puede intervenir y modificar el curso de la animación. Se describe la manera de crear código ActionScript para dirigir la reproducción de la animación.

El lenguaje ActionScript
Introduce el lenguaje ActionScript, que es el lenguaje de programación que proporciona Adobe Flash para crear elementos interactivos en las películas: sintaxis básica, variables, tipos de datos y estructuras de control.

Funciones y formularios
Estudia la creación y utilización de funciones en el lenguaje ActionScript que proporciona Adobe Flash para organizar de una manera más eficiente el código de una película. También se describe la creación y el uso de formularios para permitir que el usuario proporcione información y la asignación de comportamientos.

Programación orientada a objetos
Introduce el concepto de programación orientada a objetos en el lenguaje ActionScript de Adobe Flash. Se describen algunas de las clases proporcionadas por el lenguaje, así como lo que son las propiedades y métodos.

Clips de película
Se estudia la utilización de los clips de película en el programa Adobe Flash para crear interacción con el usuario, a través de código ActionScript. Por ejemplo, utilizar cursores personalizados, utilizar el movimiento del ratón para desplazar un clip, etc.

Sonido y vídeo
Se explica la manera de incluir sonidos y vídeos en una película de Adobe Flash, viendo la manera de crear vídeos en el formato Flash Video (f4v o flv), preparados para su inclusión en la animación.

Proyectos, publicación y exportación
Explica el proceso que se sigue tras finalizar el diseño de una película de Adobe Flash para publicarla en un formato adecuado y poderla incluir en las páginas web, además de la manera de exportarla a otros formatos para otras finalidades. También se describe el trabajo con proyectos.