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.
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)
· 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
· 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
· 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