PROGRAMA DE DISEÑO WEB

Transcripción

1 Objetivo PROGRAMA DE DISEÑO WEB 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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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?

11 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

12 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?

13 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