USD |
+591 68223703 | consultas@cegos.com.bo |
Maquetación Web: HTML 5 y CSS
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.
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.
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)
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. 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
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. 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
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. 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
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
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
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.
Una vez finalizado satisfactoriamente el curso, el Instituto CEGOS emite un CERTIFICADO DE APROBACIÓN, el cual contiene:
- Datos personales del alumno
- Plan de estudios
- Horas lectivas invertidas
- Nota final
- Rúbrica de autoridades competentes
Depósito bancario:
- Entidad bancaria: Banco Union
- Nombre: CEGOS
- Nro. De cuenta: 10000019540257
- Entidad bancaria: Banco Bisa
- Nombre: CEGOS
- Nro. De cuenta: 6022104011
- Entidad bancaria: Banco Nacional de Bolivia
- Nombre: CEGOS
- Nro. De cuenta: 1502380148
PayPal:
- Correo: cobrosonline@cegos.com.bo
- Nombre: CEGOS
Posterior al pago envíe el comprobante al correo consultas@cegos.com.bo con los siguientes datos: (Nombre completo, C.I., E-Mail, Nro. de celular, Nombre y número para facturación).
BENEFICIOS
- Un computador por persona
- Material de apoyo digital
- Docente certificado
- Certificación emitida por CEGOS
- Garantía de aprendizaje
Modalidad de Cursado
Modalidad Presencial
- Grupos reducidos y prácticos.
- Un computador por persona.
- Material de apoyo digital.
- Acceso a Wifi de alta velocidad.
- Certificación emitida por CEGOS.
- Refrigerio.
Modalidad Online - En vivo
- Grupos reducidos y prácticos
- Clase en tiempo real por video conferencia.
- Consultas en vivo.
- Grabación de las clases ejecutadas.
- Certificación emitida por CEGOS.
- Asistencia administrativa personalizada todos los días.
