INTRODUCCIÓN AL DISEÑO WEB

TEMARIO

Unidad 1: Introducción

• Fundamentos de la web• Terminología: Hosting y Dominio• Teoría de imágenes y extensiones• Como cobrar una web• Como hacer una cotización y tips• Como crear una solución para el cliente y no un problema• Usabilidad, accesibilidad, indexación y concepto de Interfaz

Unidad 2: Adobe Bridge

• Uso de la interfaz de Adobe Bridge• Manejo de Metadatos• Organización y administración de archivos• Previsualización• Armado de hoja de contactos PDF• Creación de galerías de imágenes

Unidad 3: Adobe Fireworks

• Uso de la interfaz de Adobe Fireworks• Vistas (Original, vista previa, 2 vistas, 4 vistas)
Panel optimizar – configuración• Fundamentos de imágenes raster - profundidad de bits, algoritmos de compresión, explicación de las extensiones JPG, GIF y PNG y uso adecuado de cada una• Herramientas de dibujo básicas• Operaciones entre trazados• Opciones de relleno• Degradados, texturas, motivos• Configuración de contornos• Uso de Capas, alineamiento, distribución, grupos• Uso básico de filtros: efectos, sombra y biseles• Máscaras de capa• Diseño y exportación de un banner• Creación de un Mockup para un sitio web• Home y una página de contenido• Uso del panel páginas• Tareas fotográficas• Herramientas: Desenfoque, sello, enfoque y manchas• Ajustes: brillo-contraste, tono, saturación, niveles, curvas, color sólido• Selecciones: varita mágica, lazo, lazo poligonal, rectángulo y ovalo• Creación de una composición fotográfica• Otros filtros: Desenfoque, efectos automáticos de photoshop, sombras y creación de apariencias personalizadas como estilos• Recorte de diseños web, uso de la herramienta división• Construcción y configuración de cortes HTML• Exportación de cortes con el panel optimizar• Uso de zonas activas• Diferencias entre zonas activas y divisiones• Base para entender botones: Javascript, Flash y CSS• Construcción de un botón tipo Javascript• Diseño de una barra de navegación• Uso del panel estilos y las bibliotecas para la creación de botones• Intercambios de imagen (Swap Image)• Diseño de una barra de navegación con intercambios de imagen• Gifs Animados: símbolo animado y animaciones cuadro a cuadro

Unidad 4: HTML Y CSS

• Concepto de sitio• Introducción y definición de HTML y CSS• SEO (conceptos básicos para optimización de contenido en motores de búsqueda)• Importancia del HTML en la web moderna• Sintaxis: Etiquetas empty-container, elementos atributos y valores• Estructura básica HTML, head, title, meta, body• Etiquetas de texto básicas: jerarquía de títulos, párrafo, semántica para letra cursiva, negrita y bloques• Regla horizontal y saltos de línea• Colores de fondo en HTML• Sistema de color hexadecimal• Vínculos con imágenes• Vínculos (a imágenes, .pdf, .zip, urls externos, páginas internas, correos y anclas con nombre).• Navegación con varias páginas internas• Etiqueta para imágenes y atributos de accesibilidad y bordes• Etiquetas para listas• Etiquetas para tablas• Ejercicios con tablas• Div• Ejercicios con Div´s• Etiquetas para formularios• Ejercicio con formularios• CSS, sintaxis• Tipos de CSS (inline, incrustados y vinculados)• Tipos de Selectores (etiqueta, clase, id y pseudo-class)• Propiedades: Definición de las propiedades más usadas (Texto, párrafo, color, márgenes, rellenos, vínculos, fondos, bordes, etc).• Divs y maquetados con CSS• Ejercicio con CSS vinculados

Unidad 5: Adobe Dreamweaver

• Uso de la Interfaz• Vistas código, dividir, diseño y en vivo• Configuración de navegadores
• Ventajas del uso del código HTML en Dreamweaver• Uso del panel estilos CSS para crear estilos inline, incrustados y vinculados• Ejercicio con el panel estilos CSS para crear estilos vinculados con clases, ID´s y pseudo-clases• Ejercicio creando un sitio web• Definición de un sitio en el panel nuevo sitio• Creación de un documento HTML• Uso de la librería normalize.css• Configuración de estilos CSS vinculados para todo el sitio (estilos para el maquetado en Divs, textos, fondos y diagramación)• Maquetación con Divs• Colocación de un logo creado en Fireworks• Colocación de un banner animado de Flash• Construcción y exportación de un menú emergente desde Fireworks e importación en Dreamweaver• Construcción de una barra de navegación con listas• Colocación y colocación de un widget de twitter• Diagramación de texto con imágenes• Creación de otras páginas y vinculación• Concepto de IFRAME• Creación de galería de imágenes dentro del diseño• Configuración de video (desde YouTube, configuración de un Flv desde Adobe Flash y desde Adobe Media Encoder y posterior inserción de un video personalizado en Dreamweaver)• Creación de un formulario de contacto básico• Configuración de un PHP para envío de datos a un correo• Barras de desplazamiento en una página (términos y condiciones de uso) barras de desplazamiento usando overflow de CSS• Cliente FTP: Instalación de Filezilla, configuración FTP desde Dreamweaver• Publicación del sitio