Maquetación Web: HTML 5 y CSS

Transcripción

1 Maquetación Web: HTML 5 y CSS Programa de Estudio

2 Maquetación Web: HTML 5 y CSS Aprende amaquetar sitios Web de forma ágil y profesional sin usar tablas.separa el diseño visual del contenido y optimiza al máximo los estilos de las páginas Web. Modela páginas con la utilización de etiquetas DIVy domina el manejo de los estándares para diagramar sitios de última generación. Contenido del curso En este curso comprenderás aprenderás a maquetar sitios usando las principales etiquetas de HTML 5 y las propiedades de CSS 2.1, trabajando con buenas prácticas tal como hoy en día lo exige el mercado profesional. Maquetarás sitios Web completos utilizando no sólo etiquetas div, sino también las nuevas etiquetas que se incorporan al estándar de HTML 5 y 5.1; podrás separar el diseño del contenido para así lograr sitios ágiles y accesibles para todo tipo de usuarios. Podrás dejar atrás el uso de tablas como elemento de diagramación, y diseñar sitios Web que se ajusten a las demandas actuales del mercado. El objetivo al finalizar el curso es que el alumno cuente con las herramientas necesarias que le permita el armado de sitios respetando estándares estrictos, mejorar la velocidad de descarga y el posicionamiento en buscadores. Para quien está orientado el curso Personas que quieran desempeñarse en el campo del diseño web y la programación web,

3 pudiendo maquetar sitios web de forma ágil y con gran calidad. Salida Laboral Al finalizar el curso, el alumno se convertirá en un Maquetador Web Junior pudiendo desempeñar tareas de forma free-lance o en empresas dedicadas al diseño de sitios Web. Requisitos Se requieren conocimientos sólidos de HTML o haber realizado el curso HTML5: Fundamentos de una Página Web. Es recomendable contar con conocimientos básicos de Dreamweaver o haber realizado el curso Dreamweaver. Modalidad de cursado Puedes tomar este curso en modalidad presencial o modalidad a distancia

4 En este curso aprenderás a Maquetar un sitio sin usar tablas. Conocer las nuevas etiquetas semánticas de HTML 5, (nav, article, section, etc). Dominar los selectores de CSS. Separar el diseño del contenido. Crear estructuras de dos a tres columnas. Modificar la posición de los elementos mediante código CSS. Crear barras de navegación usando listas. Desarrollar documentos livianos e indexables por Google.

5 Plan de Estudios

6 1. Unidad 1: selectores de etiquetas Web 2.0 Qué es la web 2.0? Ejemplos de web 2.0 Tecnologías de la web 2.0 Introducción al lenguaje HTML Qué es HTML? Estructura básica de un documento HTML XHTML Qué es el XHTML? Migrando de HTML a XHTML CSS Qué es el CSS? Cuáles 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)

7 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) 2. Unidad 2 - 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

8 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 3. Unidad 3 - 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 4. Unidad 4 - 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

9 El pseudo-elemento :first-line El pseudo-elemento :first-letter Los pseudo-elementos :before Los pseudo-elementos :after 5. Unidad 5 - 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 6. Unidad 6 - 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

10 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 7. Laboratorios Laboratorio 01 Tp 01 - migración de HTML a xhtml Tp 02 - etiquetas y herencia Laboratorio 02 Tp 03 - estructura de una columna con tablas Tp 04 - estructura de una columna con divs y CSS Tp 04 estructura de dos columna con divs y CSS Tp 05 estructura de tres columna con divs y CSS Tp 06 inserción y ubicación de contenidos Laboratorio 03 Tp 07 diagramación básica con position:relative Tp 08 diagramación básica con position:absolute Tp 09 diagramación avanzada con position:relative y absolute Tp 10 diagramación centrada Laboratorio 04 Tp 11 barra de navegación horizontal Tp 12 barra de navegación horizontal con imágenes Tp 13 barra de navegación vertical Tp 14 barra de navegación horizontal con links Tp 15 barra de navegación horizontal con imágenes con links Tp 16 barra de navegación vertical con links Laboratorio 05 Tp 17 manejo de clases

11 Tp 18 manejo de contenido fijo Tp 19 manejo de contenido variable Laboratorio 06 Tp 20 opacidad Tp 21 manejo de hacks Tp 22 proyecto integrador

12 Lavalle 648 Piso 8, Microcentro, CABA EducaciónIT. Copyright