PROGRAMA DE DISEÑO WEB Objetivo El objetivo de esta

PROGRAMA DE DISEÑO WEB
Objetivo
El objetivo de esta capacitación es que el alumno adquiera los conocimientos necesarios para poder
Diseñar y Maquetar una Página Web optimizando al máximo la escritura de código HTML
Contenidos temáticos
EL LENGUAJE HTML
QUE ES EL HTML
Historia del HTML
Especificación oficial
Formato de archivo
Nomenclatura de archivos y directorios
CARACTERÍSTICAS BÁSICAS
ETIQUETAS
Estructura básica de un documento HTML
Etiqueta html:
Etiqueta head:
Etiqueta Title:
Etiqueta body:
COMENTARIOS
Atributos
Atributos de la etiqueta body
Text
Bgcolor
Background
Link
Vlink
Alink
Márgenes
Etiqueta font y sus atributos
Face
Size
Color
Atributo style
COLORES
Sistema Hexadecimal
Valores de color
Nombres de color
CODIFICACIÓN DE CARACTERES
ETIQUETAS DE CONTENIDO
Etiquetas de manejo de textos
Párrafos
Encabezados
Marcado básico de texto
Marcado avanzado de texto
Marcado genérico de texto
Espacios en blanco y nuevas líneas
Nuevas líneas
Espacios en blanco
Texto preformateado
Reglas horizontales (hr)
LISTAS
Listas desordenadas
Listas Ordenadas
Listas de definición
VINCULOS
VÍNCULOS
URL
Vínculos relativos y absolutos
Vinculo de correo electrónico
UTILIZACIÓN DE IMÁGENES
Imágenes
Mapas de imagen
TABLAS
Tablas simples
FORMULARIOS
CONCEPTO DE FORMULARIO
Formulario simple
Elementos de Formulario
Campo de texto
Cuadro de contraseña
Checkbox
Radiobutton
Botón de envío de formulario
Botón de reseteo del formulario
Ficheros adjuntos
Campos ocultos
Botón de imagen
Botón
FORMULARIOS AVANZADOS
Fieldset
Menú desplegable y cajas de texto
IFRAMES
QUE SON LOS IFRAMES
Atributos de la etiqueta iframe
FRAMES
CONCEPTO DE FRAME
Definición
Definición de los frames
Definición de cada una de las frames
TARGET: Atributo para indicar la frame de destino
META INFORMACIÓN
META INFORMACIÓN
Metadatos
DOCTYPE
DREAMWEAVER
INTERFASE, EL LANZADOR
Control del sitio WEB
Definición de un sitio de Dreamweaver
LAS BARRAS, LAS PALETAS Y SU DISPOSICIÓN
Barras de Trabajo
Paneles e Inspectores
EL TEXTO
CARACTERÍSTICAS DEL TEXTO
Formato
Fuente
Tamaño
Color
Estilo
Alinear
Lista
Sangría
LISTAS
EL PANEL CSS
Hojas de estilo
Creación de un Estilo CSS
Modificación de un Estilo CSS
LOS HIPERVÍNCULOS
LOS HIPERVÍNCULOS
TIPOS DE ENLACES
Referencias
Puntos de fijación
CREACIÓN DE HIPERVÍNCULOS
DESTINO DE LOS HIPERVÍNCULOS
IMÁGENES
CÓMO INSERTAR UNA IMAGEN
PROPIEDADES DE UNA IMAGEN
Características
Cambiar el Tamaño de una Imagen
Imagen de sustitución: Rollover
Botones Flash
TRABAJO CON TABLAS
CÓMO INSERTAR UNA TABLA
CÓMO RELLENAR LAS TABLAS
SELECCIONAR ELEMENTOS DE UNA TABLA
FORMATO DE LA TABLA
VARIACIÓN EN EL TAMAÑO DE LA TABLA Y LAS CELDAS
AÑADIR Y ELIMINAR FILAS Y COLUMNAS
ANIDAR, DIVIDIR Y COMBINAR CELDAS
MODOS DE TABLA
MARCOS
FUNCIONES PARA INTERACTUAR CON MARCOS
Creación de Marcos
Selección de Marcos
Guardar Marcos
Configuración de Marcos
COMPORTAMIENTOS
Contenidos del marco
Insertar un Comportamiento
COMPORTAMIENTOS AVANZADOS
Mensajes Emergentes
Texto de Barra de Estado
TRABAJO CON FORMULARIOS
FORMULARIOS
Insertar Formularios
Elementos del Formulario
Creación del Formulario
Validación de Formularios
PUBLICACIÓN DE ARCHIVOS EN UN SERVIDOR WEB
PUBLICACIÓN
Descripción
SELECTORES DE ETIQUETAS
WEB 2.0
Que es la web 2.0?
Ejemplos de Web 2.0
Tecnologías de la web 2.0
INTRODUCCIÓN AL LENGUAJE HTML
Que es HTML?
Estructura básica de un documento HTML
XHTML
QUE ES EL XHTML?
Migrando de HTML a XHTML
CSS
Que es el CSS
Cuales son los beneficios de trabajar con CSS
Versiones de CSS
TRABAJANDO CON CSS
Declaración de reglas de estilo
Hoja de estilo externa
Hoja de estilo embebida en el encabezado del documento
Estilos en línea
Creación de una hoja de estilo
Vinculación de una hoja de estilo
Diferencia entre vinculación e importación de una hoja de estilo
Reglas de estilo
Sintaxis de las reglas de estilo
Selectores
Formato de comentario
Estructura y Herencia
Selectores de grupo
Atributos tipográficos
Font Family (Familia de fuente)
Font Style (Estilo de fuente)
Font Variant (Variante de fuente )
Font Weight (Peso de fuente)
Font Size (Tamaño de fuente)
Font (Fuente) // declaración en una sola línea
Atributos de color
Color(color de texto)
Text-decoration (decoración de texto)
Text-align (alineación de texto)
Text-tranform (transformación de texto)
Text-indent (sangría de texto )
Atributos de fondo
Background-color (color de fondo)
Background-image (imagen de fondo)
Background-position (posición de fondo)
Background-attachmen (anclaje de fondo)
Background Repeat (Repetir fondo)
Background (Fondo) (declaración de una sola línea)
DIAGRAMACIÓN BÁSICA
ETIQUETA DIV
PORQUE REEMPLAZAR LAS TABLAS POR ETIQUETAS DIV
SELECTORES DE ID
ATRIBUTOS DE TAMAÑO
Width (ancho)
height (alto)
DIAGRAMACIÓN DE UNA COLUMNA
DIAGRAMACIÓN DE UNA COLUMNA DE DOS Y TRES COLUMNAS POR FLOTACIÓN
UTILIZACIÓN DEL ATRIBUTO FLOAT
Utilización del atributo Clear
Anidamiento de divs
Modelo de caja
ATRIBUTOS DE LA CAJA
Margin (margen)
Borde (Border)
Relleno (Padding)
ESCRITURA RESUMIDA (DECLARACIÓN DE UNA SOLA LÍNEA)
Declaración una línea para el padding
Declaración una línea para el margin
Declaración una línea para el borde
Diagramación centrada
Centrado de un div dentro de otro
Centrado de un div en el naveador
DIAGRAMACIÓN AVANZADA
DIAGRAMACIÓN AVANZADA CON POSICIÓN
Atributos de posición
Position Static (estático)
Position Relative (relativo)
Position Absolute (absoluto)
Position Fixed
Atributo de Z-index
DIAGRAMACIÓN CENTRADA
Selector universal
BARRAS DE NAVEGACIÓN
LISTAS
Listas Ordenadas
Listas desordenadas
Atributos para las listas
List-style-type
List-style-image
List-style-position
CREACIÓN DE BARRAS DE NAVEGACIÓN
SELECTORES DESCENDENTES
Pseudo clases
Pseudoclases
La pseudo-clase a:link
La pseudo-clase a:visited
La pseudo-clase a:hover
La pseudo-clase a:active
La pseudo-clase a:focus
PSEUDO ELEMENTOS
El pseudo-elemento :first-line
El pseudo-elemento :first-letter
Los pseudo-elementos :before
Los pseudo-elementos :after
CLASES Y ESTILOS EN LÍNEA
SELECTORES DE CLASE
Creación de selectores de clase
Aplicación de clases
SELECTORES DE CONTEXTO
Orden de cascada
Jerarquías y especificidad
Estilos en línea
DIAGRAMACIÓN DE INTERFAZ DE ALTURA Y ANCHO VARIABLE VARIABLE
Atributo de overflow
Ancho mínimo
Ancho máximo
Alto mínimo
Alto máximo
INTEGRACIÓN
HACKS
El hack del guión bajo
El hack del guión bajo
El uso de !important
ASIGNACIÓN DE HOJAS DE ESTILO POR NAVEGADOR MEDIANTE IF
Comentario condicional para IE
CSS 3.0
Que es CSS 3.0
Compatibilidad con los navegadores
OPACIDAD
Opacidad en Firefox, Opera, Chrome...
Opacidad en Internet Explorer
Bordes Redondeados
Propiedad border-radius
Declaración de la propiedad border-radius para safari y firefox
Sobra de texto
Propiedad text-shadow
Valores posibles para la propiedad text-shadow
Sobra de caja
Propiedad box-shadow
Valores posibles para la propiedad box-shadow
Declaración de la propiedad border-radius para safari y firefox
Trabajo practico integrador del curso
FLASH
INTRODUCCIÓN A ADOBE FLASH
Que es Adobe Flash?
Que podemos hacer con Adobe Flash?
INTERFAZ DE ADOBE FLASH
Pantalla de Inicio de Adobe 1
Barras y paletas de herramientas
DOCUMENTO DE FLASH
Creación de un nuevo documento
Dimensiones del documento
Color de fondo del documento
UTILIZACIÓN DE REGLAS, GUÍAS Y LA CUADRÍCULA.
Reglas
Guías
Cuadrícula
INTERFAZ DE TRABAJO
MANEJO DE CAPAS
Que son las capas
Creación de capas
Eliminación de capas
Creación de carpetas
Bloqueo de capas
Ocultar capas
Visualizar contornos de capas
CREACIÓN DE OBJETOS
¿Qué es un objeto vectorial?
Que es un objeto de forma
Edición de objetos de forma
UTILIZACIÓN DE HERRAMIENTAS DE DIBUJO NATURAL.
Edición de curvas y aristas
ANIMACIÓN DE FORMA
VELOCIDAD DE LA PELÍCULA
Como modificar la velocidad de la película
INTERPOLACIÓN
¿Qué es la interpolación?
Tipos de interpolación
INTERPOLACIÓN DE FORMA
Como crear una interpolación de forma
Aceleración de la interpolación de forma
Desaceleración de la interpolación de forma
CONSEJOS DE FORMA
¿Qué son los consejos de forma?
Como insertar consejos de forma
CREACIÓN Y ANIMACIÓN DE SÍMBOLOS
SÍMBOLOS
Que es un símbolo?
¿Qué beneficios tiene trabajar con símbolos?
Tipos de símbolos
SÍMBOLO GRAFICO
¿Qué es un símbolo grafico?
Creación de un símbolo grafico
Convertir un objeto en símbolo.
Creación de símbolos desde cero.
BIBLIOTECA
¿Qué es la biblioteca?
¿Cómo ver la biblioteca de un documento?
¿Cómo importar una biblioteca externa?
INSTANCIAS
¿Qué es una instancia de un símbolo?
Edición de las propiedades de una instancia
PUNTOS DE REGISTRO
Que es el punto de registro de un símbolo
Edición del punto de registro
INTERPOLACIÓN DE MOVIMIENTO
¿Qué es la interpolación de movimiento
¿Qué podemos hacer con la interpolación de movimiento?
Interpolación de movimiento con más de un símbolo
¿Cómo crear una interpolación de movimiento?
SÍMBOLO GRAFICO ANIMADO
¿Qué es un símbolo grafico animado?
¿Cuándo usar símbolos gráficos animados?
GUÍA DE MOVIMIENTO
¿Qué es una guía de movimiento?
¿Cómo agregar una guía de movimiento?
¿Cómo crear una animación con guía de movimiento?
MASCARAS
¿Qué es una mascara?
¿Cómo crear una mascara?:
Mascaras animadas
CLIP DE PELÍCULA
¿Qué es un clip de película?
¿Cuándo utilizamos clip de película?
MANEJO DE IMÁGENES
IMPORTACIÓN DE IMÁGENES
Formatos soportados
Importar a escenario
Importar a biblioteca
Formatos recomendados
Edición de imágenes
CONVERSIÓN DE MAPAS DE BITS EN GRÁFICOS VECTORIALES.
Umbral
Área Mínima
Ajuste a curvas
MANEJO DE TEXTO
UTILIZACIÓN DE TEXTO
Introducción de texto en Flash
Utilización de fuentes
CUESTIONES SOBRE EL TEXTO ESPECIFICAS DE FLASH:
Escala modificable frente a escala fija:
Suavizado
Utilización de texto en mapas de bits
Texto de entrada (introducción de texto):
Texto dinámico:
ACCIONES BÁSICAS (ACTIONSCRIPT)
SÍMBOLO BOTÓN
¿Qué es un símbolo botón?
Línea de tiempo del símbolo botón
Botón Transparente
INTRODUCCIÓN AL ACTION SCRIPT
¿Qué es el Action Script?
¿Dónde utilizamos las funciones?
Introducción de funciones
SINTAXIS
Como es la sintaxis en Action Script
Errores de sintaxis
Sintaxis de la funciones en la línea de tiempo:
Sintaxis de las funciones botones:
FUNCIONES
¿Qué son las funciones?
Stop
Play
getURL - Ir a una URL
GotoandPlay
GotoandStop
loadMovie - Carga de archivos externos
Carga de archivos por NIVEL
Carga de archivos en DESTINO
nextframe / prevframe
MANEJO DE SONIDO
UTILIZACIÓN DE SONIDO
Incorporación de sonido
Importación de archivos de audio
Formatos de archivos de audio admitidos
SINCRONIZACIÓN DEL AUDIO
¿Qué es la sincronización del audio?
Tipos de sincronización
Sincronización de eventos
Sincronización de flujo
Edición de sonido en Flash
PUBLICACIÓN PARA SONIDO
Como se configura la publicación del sonido
Formato de salida
MANEJO DE VIDEO
UTILIZACIÓN DEL VIDEO
Incorporación de video
IMPORTACIÓN DE VIDEO
¿Cómo importo un video?
Modalidades de importación
Como objeto en la línea de tiempo
Parámetros del componente de video
UTILIZACIÓN DE COMPONENTES BÁSICOS
COMPONENTES
¿Qué es un componente?
¿Cómo agrego un componente?
¿Cómo editar un componente?
COMPONENTES
ScrollBar
ProgressBar
PUBLICACIÓN Y EXPORTACIÓN
CONSIDERACIONES PREVIAS A LA PUBLICACIÓN.
¿Qué es la publicación?
Elementos que influyen en el peso de la pelicula
FORMATOS DE EXPORTACIÓN
Formato SWF
HTML - Publicación de Flash en la Web
Funcionamiento de Flash con HTML
Combinación de Flash y HTML