Curso de Maquetación Web: HTML 5 y CSS

Transcripción

1 Curso de Maquetación Web: HTML 5 y CSS Aprende a maquetar 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 DIV y domina el manejo de los estándares para diagramar sitios de ultima generación. Duración: 18 hs Nivel del Curso 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. Capacitación adquirida por el alumno al finalizar este modulo Maquetar un sitio sin usar tablas. 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. Crear documentos livianos e indexables por Google. Para quien está orientado el curso Personas que quieran desempeñarse en el campo del diseño web y la programación web, pudiendo maquetar sitios web de forma ágil y con gran calidad. Recursos adicionales entregados Este curso incluye el acceso a un plataforma online donde encontrarás el material de lectura del curso, los laboratorios del mismo, practicas resueltas otra información de interes como: documentos adicionales, descargas, videos relacionados, etc. Tendrás disponible la ejercitación y podrás realizar exámenes de autoevaluación luego de cada clase. Te permitirá también estar conectado con tu docente y compañeros del curso.

2 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 requiere contar con fuertes conocimientos de HTML, o haber realizado el curso HTML: Fundamentos de una página web. También es recomendable tener conocimientos de Dreamweaver o haber realizado el curso Dreamweaver. Plan de Estudio UNIDAD 1 Â 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)

3 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) 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 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 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 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 El pseudo-elemento :first-line El pseudo-elemento :first-letter Los pseudo-elementos :before

4 Los pseudo-elementos :after 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 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 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 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

5 TP 16 Barra de navegación vertical con links LABORATORIO 05 TP 17 Manejo de clases 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