Temario
Presentación:
Con el diplomado de Diseño Web aprende el desarrollo web front-end, conoce estándares y maqueta sitios versátiles de forma profesional. Realiza ejercicios reales con las exigencias web de los nuevos entornos digitales.
CONTENIDO:
Introducción al diseño web
Planificar el sitio web
* Audiencia destino
* Recopilar todo el material
* Organigrama
Información de manera adecuada
* Accesibilidad - Navegabilidad
* Usabilidad
* Interactividad
Diseño limpio
* Espacio y equilibrio
* Color
* Tipo de letra
* Textura o gráficos de fondo
Posicionamiento organico
* Estándares por el W3C
* Semántica
Páginas
* Estaticas
* Dinamicas (web 2.0)
Uso de imágenes
* jpg
* png
* gif
Photoshop dirigido a web
Esquema de distribución
* Grid 960
Posicionamiento
* Reglas
* Guías
* Cuadricula
Capas
* (crear, duplicar, borrar)
* Opciones de bloqueo
* Agrupar
Estilos de capa
* Sombra
* Resplandor
* Relieve
* Color, degradado y textura
* Trazo
Máscaras
* Máscara de capa
* Máscara rápida
Colores
* Libreria (swatches)
* Modo RGB
* Selección y aplicación de colores
Formas vectoriales
* (rectanfulo, rectangulo redondeado, elipse, polígono, formas personalizadas)
* Transformación
* (escalar, rotar, sesgar, distorsionar, perspectiva, deformar)
Texto
* Alineación
* Familia de fuentes
* Tamaño
* Interlineado
* Desplazamiento vertical
* Sangria (indentado)
* Numeración y viñetas
* Negritas
* Cursiva
* Subrayado
* Tachado)
Estados de un botón
* link, hover, active, visited
Brochas
* Creacion de brochas
* Ajustes de brochas
* Exportación a web
Boletin electronico (Newsletter)
Qué es una newsletter
Diseño
* Cabecera
* Contenedor principal
* Pie
Maquetación de la newsletter
* HTML y CSS
* Herramienta sector (slice tool)
* Recorte y exportación de imágenes
* Envio de prueba
Qué es HTML
Estructura general.
* La estructura básica de una página en HTML
* Encabezado del documento (head)
* Cuerpo del documento (body)
Formato del documento
* Encabezados
* Secciones
* Tablas
* Listas
* Marco flotante (iframe)
Links
* pagina o documento
* email
* ancla
Etiquetas de texto
* Parrafos
* Negritas e Italicas
* Citar
* Abreviatura
* Acrónimo
* Dirección
* Definición
* Codigo
* Subíndice y Superíndice
* Caracteres especiales
Imagenes
* imagen
* Zonas seleccionables
Spry object
* Menus
* Paneles con pestañasç,
* Acordeón
Formulario comunicado con PHP
* Campo de Texto
* Objeto Casilla
* Objeto Radio
* Menú desplegable
* Botones
Multimedia
* Audio
* Video
Plantillas
* Creacion de plantillas
* Region Editable
* Aplicar plantilla a pagina
CSS
Que es CSS
Posicion de estilos
* externos, internos y especificos
Selectores
* Universal
* Etiquetas
* Clase
* Id
* Combinación de selectores
* Seudo-selectores y seudo-clases
Medidas
* relativas (em, %)
* absolutas (px)
Colores
* Hexadecimal y RGB
Background
* (color, imagen, repetir, posición, fijación)
Modelo de caja
* margin
* padding
* border
Dimensiones
* Width y Height
Estados de un botón
* link
* hover
* active
* visited
Posicionamiento
* display
* position
», Absolute
», Relative
», Fixed
* clear
* visibility
* overflow
* z-indez
* float
Texto
* Tamaño
* Familia
* Estilo
* Peso (font-weight)
* Sangria
* Decoración
* Espaciado de letra y palabra
* Altura de la línea
