Diplomado en Diseño Web

Introducción a Diseño Web
TEMARIO:

1. Qué es una interfase?

a. La primera impresión es muy importante
b. La importancia de dar la cara (comunicación computadora usuario)
c. Imágen lógica: mapa de navegación

2. Qué es el diseño web?
a. Qué es un página web?
b. Puede existir una página web sin diseño gráfico?
c Tipos de sites portal pagina corporativa


3. Didáctica de navegación

a. Como lograr esa comunicación efectiva, métodos: pocos clics, reducir al minimo el uso de botones, tamaño de monitor, etc.
b. Conocer las reglas para romperlas

4. Tecnologías que utiliza el diseño web
a. HTML e imagenes básicas (jpg, gif, gif animado)
b. Lenguajes de programación incrustados
c. Recursos multimedia: "plug-ins"

5. Uso adecuado de los recursos multimedia
a. Que és Flash y en que casos es adecuado utilizarlo
b. Quick time, real player, Active X, etc. Para que sirven

6. Obtener un buen diseño, aprovechando las limitaciones
a. Que limitaciones podemos encontrar y como resolverlas con creatividad?
b. Funcionalidad vs. Impacto visual
c. Discusion y conclusiones

7. Actualización (1hrs)
a. Sitios Autoadministrables, la tendencia actual

b. Otras soluciones para problemas de actualizacion: xml, actualización "manual"

8. Incorporación de bases de datos y proyectos de alto nivel
a. Que és una base de datos y como funciona en el desplegado del contenido de una pagina web?
b. Que es My SQL, php y asp y por qué elegir entre estas 2 últimas opciones.
c. Qué es ajax, laszlo, flex y las nuevas tendencias en desarrollo de contenido web

FIREWORKS

TEMAS:

1. Introducción
a. Conociendo la interfaz
b. Personalizando el espacio de trabajo
c. La importancia de la barra de propiedades
d. Herramientas de selección
e. Herramientas de mapas de bits
f. Herramientas de vectores
g. Poligonos pre-establecidos y organización de elementos
h. Herramienta de pluma

2. Visualización
a. Uso del espacio de trabajo
b. Visualización en el navegador
c. Qué es la optimización de imagenes?
d. Como optimizar
e. Formatos web y cual utilizar según el caso
f. Vistas de 2 y 4 ventanas de comparación
g. Comparaciones peso-calidad, cambio de especificaciones
h. Procesamiento por lotes


3. Herramientas avanzadas de dibujo y edición de imagen
a. Librería de estilos

b. Librería de formas

c. Capas e Historial
d. Cuadros de animación
e. Creación de gifs animados
f. Librerías de elementos pre-establecidos
g. Filtros para edición de mapas de bits
h. Comandos creativos
i. Herramientas de combinación de trazo

4. Tutorial: Creación de un sitio web básico

a. Haciendo la barra de navegación

b. Creando el cuerpo de la página
c. Duplicando la página maestra para la creación de subcategorías
d. Animación del logotipo
e. Programación de botones usando behaviours
f. Menú emergente
g. Slices



5. Métodos para el reciclaje de elementos y funciones
a. Símbolo botón

b. Símbolo animación
c. Comandos para procesamiento por lotes

d. Creación de "slide shows"
e. Creación de páginas maestras
f. Agregar vínculos (ligas) y etiquetas de precarga de imagenes (alts)



6. Tutorial: Creación de un prototipo para un web site de venta de ropa
a. Selección y optimización de imágenes

b. Diseño de la barra de navegación
c. Diseño y animación del logo

d. Creación de las categorías y sub categorías con la herrameinta "pages"
e. Programacion de los botones y menus emergentes
f. Revisiones y comentarios finales


7. Exportacion a dreamweaver y flash

a. Exportacion automatizada


b. Exportacion con la herramienta "exportar"

c. Copiar y pegar a Dreamwever

d. Edición desde Dreamweaver
e. Copiar y pegar a Flash
f. Revisiones y comentarios finales


8. Práctica

a. Exportación y optimización de imagenes


b. Importación a dreamweaver y flash

FLASH

TEMAS:

1. Introducción
a. Conociendo la interfaz
b. Personalizando el espacio de trabajo
c. La importancia de la barra de propiedades
d. Herramientas de selección
e. Herramientas de mapas de bits
f. Herramientas de vectores
g. Poligonos pre-establecidos y organización de elementos
h. Herramienta de pluma

2. Línea de tiempo
a. Que és la línea de tiempo?
b. Fotogramas, como que son y para que sirven
c. Como insertar los diferentes tipos de fotogramas
d. Los 3 metodos de animación en flash
e. Animación cuadro por cuadro
f. Animación por interpolación: forma
g. Animación por interpolación: movimiento
h. Edición de las animaciones


3. Capas
a. Creación y administracion de las capas en la línea de tiempo
b. Propiedades de capa: máscara
c. Propiedades de capa: guía de movimiento
d. Bloquear, desbloquear y modos de visual
g. Filtros para edición de mapas de bits
i. Herramientas de combinación de trazado


4. Funciones avanzadas de dibujo
a. Grupos, ventajas y desventajas
b. Dibujo en modo "break apart" o como grupos
c. Papel Cebolla
d. Color
f. Efectos especiales



5. Símbolos
a. Qué es un símbolo y su importancia
b. Tipos de símbolos: gráfico, botón y movie clip
c. Concepto de "anidación" de símbolos
d. Creación de un boton y la edición de sus diferentes estados
e. Creación de un movie clip
f. Anidación de un movie clip en un botón
g. Anidación de un botón en un movie clip
h. Publicar el documento.


6. Tutorial: Creación de un personaje animado
a. Conceptualizar la animación
b. Principios básicos de la animacion 2-d
c. Creación de cada parte "reciclable" del personaje
d. Orquestación de la animación

7. Manejo de texto, tips and tricks
a. Inserción de texto y opciones para la mejor lejibilidad
b. Software adicional a flash para facilitar la animación de textos
c. Fuentes de pixeles especiales para flash
d. Campos de texto estáticos, dinamicos y de entrada

8. Action Script
a. Panel de Acciones
b. Qué es el lenguaje action script?
c. Modo experto y modo con asistente
d. Acciones de fotograma
e. Acciones de botón
f. Acciones de movie clip

9. Tutorial: Creación de una presentación
a. Planeación de la presentación en 4 pantallas
b. Creación e importación de los elementos a la biblioteca
c. Creación y programación de los elementos de navegación
d. Pruebas y correcciones

10. Audio y Video
a. Que opciones de manejo de clips de video nos ofrece flash?
b. Importando un clip de video
c. Edición del video desde el módulo de importación
d. Inserción y manejo del video en la línea de tiempo
e. Formatos de audio aceptados por flash
d. Importando un clip de audio
f. Manejo de audio, sincronía y loops

DREAMWEAVER

TEMAS:

1. Introducción

a. Pantalla de Bienvenida, eleccion del tipo de documento a desarrollar

b. Conociendo la Interfaz
c. La importancia de la barra de propiedades
d. Barra principal de herramientas
e. Barra de propiedades
f. Formas de visualizacion: diseño, código y mixta
g. Qué es HTML?
h. Ejercicio de HTML en el note pad


2. Conociendo los elementos basicos

a. Tablas
b. Capas
c. Herramienta de insertar imagen
d. Herramienta de insertar elementos multimedia


3. Tutorial: Armar un home page
a. Formar la table base

b. Insertar logotipo

c. Insertar botones
d. insertar imagen principal del "body"
e. Insertar cuerpo de texto y aplicar estilos
f. Revisión del código y correcciones.


4. Dar de alta un sitio

a. Declarar la carpeta local del sitio

b. Que son los datos remotos y como darlos de alta?
c. Qué es un servidor de prueba?

d. Demás elementos de la configuración del sitio


5. Hipervínculos
a. Hipertexto

b. Ligar imagenes
c. Anclas
d. Desplegado de contenido en diferentes ventanas
e. Pop-up window


6. Tutorial: Creación de un sitio web de 4 categorias de una sola pantalla
a. Dar de alta el sitio

b. Creación del "index"
c. Incorporación de imágenes y textos (estilos CSS)

d. Duplicación para crear las sub-categorías
e. Ligar todo el site
f. Pruebas en el navegador


7. Corrección del código HTML

a. A partir del tutorial anterior, corregir en vista "codigo"


b. Distinguir los tipos de codigo por el color

c. Corregir código con la función "find"

d. Limpieza automática del código
e. Eliminar elementos sobrantes
f. Revisiones y comentarios finales


8. Funciones avanzadas

a. Líneas de tiempo


b. Behaviours

c. Cambiar de una página a otra después de un tiempo

d. Framesets
e. Creación de formas y jump menú
f. Conexión FTP, (up-loading)