DISEÑO Y ANIMACIÓN WEB

DURACIÓN DEL CURSO: 126 horas. Requiere de una dedicación de 6 horas semanal de estudio.

CERTIFICACIÓN QUE SE ENTREGA AL FINALIZAR EL CURSO: Diploma de Diseño y Animación Web

REQUISITOS DE INGRESO: mayor de 14 años y conocimientos básicos de operación de PC

FINANCIACIÓN: Es directa con el Instituto, no se firman conformes ni contratos, las cuotas son consecutivas.
En todos los cursos están incluidos en el precio: escolaridad, diplomas y derecho de examen.
 
EVALUACIONES: Se rinden los parciales y examen final, en la tutoría siguiente al finalizar la materia en forma On-Line, los mismos se aprueban con un 80%, este porcentaje influye sobre el promedio final de la siguiente forma:
A) si el promedio de los parciales es de 80% o más, el alumno aprueba el curso o carrera con dicho puntaje.
B) si el promedio de los parciales está por debajo del 80%, el alumno debe realizar un examen final.
La aprobación final del curso dependerá además, que tenga un 80% de ingreso a las tutorías del mismo


OBJETIVOS:
Orientado a quién vaya a desempeñar tareas con los programas de diseño web, para el desarrollo de una página web.

El Diseñador Web es:
Un técnico capaz de diseñar y animar un sitio Web de modo profesional. El diseño y animación Web ha sido implementado como herramienta de difusión y publicidad de productos o actividad por parte del sector empresarial, comercial y particular.

Diseño Web aplicado
El diseño de páginas Web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computadora, en papel, en un teléfono móvil, etc..

Estos documentos o páginas Web pueden ser creadas en:
- Creando archivos de texto en Html.
- Utilizando un programa de creación de páginas, ej: Adobe Dreamweaver, entre otros.
- Utilizando lenguajes de programación para generar la página web, ej: Php, entre otros.

Para el diseño de páginas web debemos tener en cuenta dos etapas:
Primera etapa: en esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un prediseño sobre el papel, esto nos ayudará a formar una idea clara del diseño a realizar.

Segunda etapa: una vez que se tiene este prediseño, se pasa a 'escribir' la página Web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto Html. El Htmal consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de texto (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender Html es relativamente fácil, así que es sencillo crear páginas Web de este modo. Esta era la única manera de generarlas hasta que aparecieron algunos editores visuales de HTML, como Microsoft ProntPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender Html (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.

TEMARIO A DESARROLLAR:

Módulo I: Introducción
- Que es lo que hay que tener en cuenta a la hora de realizar un sitio.
- A quién está dirigida. Estructura.
- Navegadores. Resolución.
- Diferentes software que nos posibilitan diseñar y publicar las páginas.
- Descripción de los innumerables paquetes de software que existen para el diseño y programación de sitios Web.
- Comparación entre los diferentes software, sus características y las funcionalidad de cada uno de ellos.

Módulo II: Lenguaje Html
HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones cientíticas) en Internet. Lo que se ve al visualizar una página en Internet, es la interpretación que hace el navegador del código HTML. Para ver el código HTML de una página sólo se tiene que hacer click en la opción "Ver" de la barra de menús y elegir "Código fuente" (en Internet Explorer). Si se quiere crear sitios Web, no hay otra solución que aprender HTML. Incluso si se usa un programa como Dreamweaver, por ejemplo, para la creación de sitios Web, tener conocimientos básicos de HTML hace más más fácil y sitios web mucho mejores. HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual".

- Elementos básicos de Html.
- Sintaxis del lenguaje.
- Estructura de un documento Html.
- Etiquetas básicas.
- Atributos.
- Propiedad y valores.
- Formato de documentos Html.
- Párrafos. Alineación.
- Inserción de imágenes.
- Enlaces y vínculos.
- Diseño de tablas, marcos.
- Hojas de estilo.
- Propiedades y valores.
- Definición y tipos de estilos.
- Concepto de eventos.
- Cambio de propiedades.
- Formularios, elementos.
- Atributos y controles.
- Validación de campos de un formulario.

Módulo III: Adobe Dreamweaver
Dreamweaver es la herramienta de diseño de páginas Web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar:

Hojas de estilo y capas. Javascript para crear efectos e interactividades. Inserción de archivos multimedia.
- Descripción de la interfase.
- Ventana de documento.
- Panel de activos.
- Barra de estado.
- Paleta de objetos: (objetos caracteres - objetos comunes - objetos para formularios - objetos para marcos - objetos head - objetos invisibles - objetos especiale).
- El lanzador (inspector de propiedades: (paleta historia - paleta de referencias).
- Ventana documento: (ventana sitio - crear y guardar páginas).
- Texto con el inspector de propiedades: (estilos de párrafos - fuentes - tamaños relativos - color - alineación - sangrías - listas aplicar estilos Html - reglas horizontales - espacios indivisibles y saltos de línea - revisión de ortografía).
- Insertar: (añadir - mover y copiar imágenes - bordes - alineación - espaciado - uso de sustitutos de imágenes - imagen de fondo).
- Creación de tablas: (alineación elementos - colores - bordes e imágenes de fondo - alto y ancho - extensión de las celdas - cambios en las tablas - dibujar tablas y celdas manualmente - formatos preestablecidos - datos tabulares - ordenar datos de tablas).
- Vincular las páginas: (insertar una URL - puntos de fijación con nombres - vínculos mailo - mapas de imagen - insertar texto Flash - insertar botón Flash - verificador de vínculos)
- Inspector de marcos: (guardar marcos y conjuntos de marcos - selección y división de marcos - propiedades).
- Creación de formularios: (añadir objetos de formularios - campo de texto - propiedades de los campos de texto - inserción de botones casilla de activación y botones de radio - listas y menús - campos de archivos)
- Campos de imagen - campos ocultos - menús de salto).
- Inserción de capas: (trabajo con capas - alineación de capas - inspector línea de tiempo).
- Creación de elementos de biblioteca: (añadir elementos - modificar elementos - búsqueda y reemplazo).
- Creación de hojas de estilo.
- Inspector de comportamiento.
- Creación y modificación de mapa de sitio: (vinculo en el mapa del sitio-).

Módulo IV: Adobe Flash
Probablemente, uno de los avances más importantes en materia de diseño en el Web ha sido la aparición de la tecnología desarrollada por Macromedia, ahora Adobe, denominada Flash. Adobe Flash es la tecnología más comúnmente utilizada en el Web que permite la creación de animaciones vectoriales. El interés en el uso de gráficos vectoriales es que éstos permiten llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el navegador.

Existen dos tipos de gráficos:
Los gráficos vectoriales, en los cuales una imagen es representada a partir de líneas (o vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo de gráficos no depende del zoom o del tipo de resolución con el cual se esté mirando el gráfico. Por mucho que nos acerquemos, el gráfico no se pixeliza, ya que el ordenador traza automáticamente las líneas para ese nivel de acercamiento. Las imágenes en mapa de bits. Este tipo de gráficos se asemejan a una especie de cuadrícula en la cual cada uno de los cuadrados (píxeles) muestra un color determinado. La información de estos gráficos es guardada individualmente para cada píxel y es definida por las coordenadas y color de dicho píxel. Este tipo de gráficos son dependientes de la variación del tamaño y resolución, pudiendo perder calidad al modificar sucesivamente sus dimensiones.

Así, Adobe Flash se sirve de las posibilidades que ofrece el trabajar con gráficos vectoriales, fácilmente redimensionables y alterables por medio de funciones, así que de un almacenamiento inteligente de las imágenes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tamaño de los archivos que contienen las animaciones. Esta optimización del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animación al mismo tiempo que ésta se muestra en el navegador (técnica denominada streaming), permite aportar elementos visuales que dan vida a una web sin que para ello el tiempo de carga de la página se prolongue hasta límites insoportables por el visitante.

Además de este aspecto meramente estético, Adobe Flash introduce en su entorno la posibilidad de interaccionar con el usuario. Para ello, Adobe Flash invoca un lenguaje de programación llamado Action Script. Orientado a objetos, este lenguaje tiene claras influencias del Javascript y permite, entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas partes de una animación en función de eventos producidos por el usuario, saltar a otras páginas, etc. De este modo, Adobe Flash pone a nuestra disposición una tecnología pensada para aportar vistosidad a nuestra Web al mismo tiempo que nos permite interaccionar con nuestro visitante. Por supuesto, no se trata de la única alternativa de diseño vectorial aplicada al Web pero, sin duda, se trata de la más popular y más completa de ellas.

- Caja de herramientas: (línea de tiempo - ventana documento.
- Características de una película: (guardar una película - propiedades de una película).
- Herramientas de dibujo: (optimizar una figura - borde y relleno - unión de figuras - convertir trazos en rellenos - expandir relleno suavizar los bordes.
- Cambiar el color: (paleta de colores - paneles de trazo y relleno - degradados - botes de pintura - transformar rellenos cuentagotas).
- Agrupar y desagrupar: (organizar objetos - desplazar un objeto - duplicar y eliminar un objeto - transformar objetos - escalar - reflejar - rotar e inclinar - modificar eje de objeto - alinear).
- Bloques de texto: (apariencia de texto - tipos de bloques de texto - propiedades de bloque de texto dinámico y de entrada). - Crear un símbolo: (creación de botones -crear una instancia -panel de efectos).
- Línea de tiempo: (las capas - los fotogramas - animación fotograma a fotograma - papel cebolla - panel fotograma animación por interpolación de movimiento - creación de una capa guía - animación por interpolación de forma).
- Formatos de imagen: (modificar mapas de bits - transformar imágenes en gráficos vectoriales - inspector línea de tiempo).
- Formatos de sonidos: (panel sonido - sincronización del sonido - sonido en un botón - búsqueda y reemplazo).
- Panel acciones: (insertar acciones en un script - script de fotograma - script de objeto, acciones de uso común).
- Opciones de publicación: (opciones Flash - opciones HTML).

Módulo V: Adobe Fireworks
Acelere el diseño y el desarrollo de Web con el software Adobe Fireworks, la herramienta ideal para crear y optimizar imágenes para la Web, así como para diseñar prototipos y aplicaciones Web rápidamente. Fireworks ofrece la flexibilidad para editar imágenes de mapas de bits y vectores, una biblioteca común de activos prediseñados y una rápida integración con Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver y Adobe Flash Professional. Visualice diseños rápidamente en Fireworks, o aproveche otros activos de Illustrator, Photoshop y Flash.

Edición de mapas de bits y vectores: Cree y edite imágenes de mapas de bits y vectores e importe y edite archivos Photoshop e Illustrator originales.
Optimización de imágenes: Optimice gráficos para prácticamente cualquier entorno de presentación con vista previa, vista previa gamma multiplataforma, compresión JPEG selectiva y una amplia gama de controles de exportación.
Integración eficaz de Photoshop e Illustrator: Importe archivos Photoshop (PSD) al tiempo que conserva las capas jerárquicas, los efectos de capa y los modos de fusión. Guarde archivos Fireworks (PNG) de nuevo en el formato Photoshop (PSD). Importe archivos de Illustrator (AI) al tiempo que conserva la integridad de los gráficos, incluida la información sobre la capa, el grupo y el color.
Diseño rápido de prototipos: Diseños interactivos de prototipos para web y aplicaciones de Internet sofisticadas. Exporte prototipos de sitios Web a Adobe Dreamweaver y prototipos de RIA a Adobe Flex.

Compatibilidad con varias páginas screenshot: Utilice el nuevo panel Páginas para crear varias páginas en un único documento (archivo PNG) y comparta capas en varias páginas. Cada página puede contener sus propios cortes, capas, marcos, animaciones y ajustes de lienzo, lo que facilita la simulación del flujo de los sitios Web en un prototipo.

Organización jerárquica de las capas: Organice y gestione sus prototipos con una nueva estructura jerárquica de capas, similar a la de Adobe Photoshop, que le permite organizar fácilmente capas y páginas Web.

Efectos de filtro screenshot: Aplique efectos de luz y de sombras, estilos y modos de fusión, incluidos siete nuevos modos de fusión de Photoshop, para añadir profundidad y carácter al texto y a los símbolos.

Biblioteca común: Dé rienda suelta al diseño de prototipos con una biblioteca común de símbolos gráficos, símbolos de texto y animaciones que se usan con frecuencia en aplicaciones, formularios, interfaces y sitios Web.

Escala inteligente: Aplique escalas de forma inteligente a botones y símbolos gráficos (en vectores o mapas de bits) con escalas de nueve cortes. Combine la aplicación de escalas de nueve cortes con la biblioteca de formas automáticas para acelerar el diseño del prototipo de la aplicación y el sitio Web.

Integración optimizada de Dreamweaver y Flash: Copie un objeto creado en Fireworks y péguelo directamente en Dreamweaver. Cree menús emergentes que puedan almacenarse como y HTML. Exporte archivos Fireworks (PNG) directamente a Flash al tiempo que conserva los vectores, los mapas de bits, las animaciones y los botones multiestado y, a continuación, edite los archivos mediante Flash.

- La ventana documento. (opciones de color - opciones de visualización - inspectores y paneles).
- Crear lienzos: (modificar un lienzo)
- Comparación con Photoshop: (diferencias - crear capas, renombrarlas).
- Diferentes herramientas: (modificar las propiedades de relleno - modificar las propiedades de trazo - añadir texturas).
- Líneas curvas.
- Formas cerradas: (puntos bezier - modificar los trazados).
- Formato de texto: (unir texto a trazado).
- Utilizar diferentes tipos de efectos.
- Crear mapas de imagen: (utilizar zonas interactivas - vincular, texto alternativo - animaciones gif).
- Utilización de la biblioteca.
- Creación de botones mediante los comportamientos: (mensajes en la parte inferior del navegador - menús desplegables).
- Diferentes formatos en los que se puede exportar e importar: (divisiones de imagen - optimización de imagen para exportar - previsualización de lo exportado.
- Introducción: (cómo planificar el sito - cómo guardar las páginas para no tener problemas a la hora de publicar).

Módulo VI: Publicación
- Como conseguir un servidor.
- Publicación desde: frontpage - dreamweaver - wstp
- Colocar en nuestra página un contador de visitas que nos indique:
- desde qué país entraron
- con qué sistema operativo
- con qué navegador, a qué hora
- Como crear un redireccionamiento para que nuestra dirección no sea tan larga
- Palabras claves
- Subir el sitio a los buscadores

Evaluación y defensa del proyecto final
Durante el transcurso del curso, el alumno irá desarrollando el proyecto final, demostrando sus conocimientos, mediante un fuerte componente lógico y creativo.

Solicitar información    

Volver al inicio