Diseño Web Responsive con HTML5 y CSS3


Curso de HTML5 y CSS3

Diseño Web Responsive con HTML5 y CSS3


Objetivo:
El curso tiene como objetivo abordar de forma concreta y práctica el diseño Web Responsive para lograr sitios que se adapten a las distintas resoluciones de pantalla y los distintos tipos de dispositivos móviles.

A quién va dirigido:
Este curso está dirigido a diseñadores, programadores y todo tipo de personas que deseen maquetar sitios Web de manera profesional usando las últimas tecnologías disponibles en el mercado con el fin de lograr sitios que se adapten a las características de los distintos dispositivos.

Perfil del participante:
Manejo intermedio de equipo de computo e internet.

Beneficios:
Al finalizar el curso el participante podrá identificar los problemas de compatibilidad de los navegadores con las últimas versiones de los lenguajes básicos, como son el HTML5 y el CSS3. Podrá diferenciar las técnicas de diseño "clásicas" comprendiendo mejor sus limitaciones y utilizará técnicas de diseño con tablas y cuadrículas, hará uso de las Media Queries en el diseño web responsive y las técnicas de uso com imágenes, tipografía, tablas, frameworks CSS responsive, entre otros.

Duración del curso: 24 horas

Capítulo 1: Introducción

  • El diseño web actual
  • Diseño web responsive
  • Herramientas del maquetador

Capítulo 2: Soluciones para la compatibilidad

  • Disparidad entre navegadores
  • Mejorar la compatibilidad
  • Visualización inicial de los navegadores
  • Normalize.css
  • El HTML5 y html5shiv.js
  • Media queries y respond.js
  • Las alternativas y Modernizr.js
  • Las reglas @supports

Capítulo 3: El diseño clásico

  • Diseñadores y maquetadores
  • Modelos de cajas
  • Los márgenes de los elementos
  • Visualización de los elementos
  • Visualización en flujo normal
  • Posicionamiento absoluto
  • Posicionamiento fijo
  • Posicionamiento relativo
  • Utilizar el diseño en posición relativa y absoluta
  • Visualización de cajas flotantes
    1. Posicionamiento flotante
    2. Colocar las cajas al lado
    3. Prohibir la flotación
    4. Ejemplo con cuatro cajas
    5. Diseño simplista
    6. Conclusión sobre diseñar con elementos flotantes

Capítulo 4: Diseñar con tablas

  • La propiedad display
  • Diseño simple con una tabla
  • Ancho en pantalla de la tabla
  • Elementos anónimos
  • Otros elementos para las tablas
    1. Párrafos en las celdas
    2. Listas en tablas
  • Diseño de las filas
  • Establecer el ancho de las celdas
    1. Anchos fijos
    2. Anchos en porcentaje
  • Diseño con una tabla más estructurada
  • Otras propiedades de diseño
    1. Propiedad table-layout
    2. Propiedad border-collapse
    3. Propiedad border-spacing
    4. Propiedad empty-cells
    5. Propiedad caption-side
  • Alineación vertical

Capítulo 5: Cuadrículas de diseño

  • Estructura de las cuadrículas para la web
  • Cuadrículas fijas
  • La cuadrícula fija 960gs
    1. Cuadrícula
    2. Archivos CSS
    3. Página de ejemplo
    4. Enlaces a las hojas de estilo
    5. Estilos personales
    6. Contenedor del diseño
    7. Bloques en 12 columnas
    8. Bloques en las columnas de la cuadrícula
    9. Prohibir los bloques flotantes adyacentes
    10. Bloques con desplazamiento
    11. Bloques centrados
    12. Código completo de la página
  • Cuadrícula fija notjustagrid
    1. El framework
    2. Cuadrícula
    3. Página de ejemplo
    4. Archivos CSS
    5. Enlaces a las hojas de estilo
    6. Estilos personales
    7. Contenedor del diseño
    8. Sistema de clases
    9. Bloque para todo el ancho
    10. Tres bloques en un tercio de la cuadrícula
    11. Dos bloques en 3/5 y 2/5 de la cuadrícula
    12. Un solo bloque en 2/3 de la cuadrícula
    13. Código completo de la página
  • Cuadrícula fluida Gridiculous
    1. Cuadrículas fluidas
    2. Cuadrícula Gridiculous
    3. Página de ejemplo
    4. Descargar la cuadrícula
    5. Instalar la cuadrícula
    6. Estilos personales
    7. Contenedor
    8. Filas
    9. Tres bloques con la misma anchura
    10. Dos bloques con anchos distintos
    11. Bloque desplazado
    12. Visualización de la cuadrícula fluida

Capítulo 6: Media Queries

  • Objetivo
  • Orígenes
  • Uso de media queries
  • Sintaxis de las media queries
  • Características a prueba
  • Dónde ubicar las media queries
  • Tamaño de las pantallas de los móviles
  • El concepto viewport
  • Un ejemplo muy sencillo
    1. Esquema
    2. Código HTML y CSS
  • Cuadrícula responsive
    1. Cuadrícula
    2. Descargar e instalar la cuadrícula
    3. Crear una página sencilla de 12 columnas
    4. Vínculo a los estilos y a los scripts
    5. Estructura del diseño
    6. Reglas CSS

Capítulo 7: El diseño responsive

  • Introducción
  • Cuadrículas responsive
  • Cuadrícula responsive Simple Grid
    1. Utilizar Simple Grid
    2. Descargar e instalar Simple Grid
    3. Filas
    4. Esquema
    5. Primera fila
    6. Segunda fila
    7. Tercera fila
    8. Utilizar la cuadrícula fluida y responsive
    9. Código completo
  • Cuadrícula responsive Columnal
    1. Utilizar Columnal
    2. Descargar e instalar Columnal
    3. Esquema
    4. Contenedor y filas
    5. Primera fila
    6. Segunda fila
    7. La tercera fila y el desplazamiento
    8. La cuarta fila y bloques anidados
    9. Utilizar la cuadrícula fluida y responsive
    10. Código completo del diseño
    11. Imágenes responsives
    12. Código completo para el diseño con una imagen responsive
  • Uso de imágenes
  • Imágenes fluidas
    1. Objetivo
    2. Diseño fijo
    3. Diseño fluido
    4. Ancho fluido de otros elementos
    5. Anchos de imágenes fluidas
    6. Abrir y cambiar el tamaño de la página
    7. Código completo de la página
  • Script Response.js
    1. Utilizar JavaScript
    2. Descargar el JavaScript
    3. Enlaces a los JavaScript
    4. Preparar imágenes
    5. Código de la página
    6. Funcionamiento del script
    7. Optimizar las leyendas
    8. Código completo de la página
  • Script picturefill.js
    1. Utilizar JavaScript
    2. Descargar el JavaScript
    3. Enlaces a los JavaScript
    4. Preparar imágenes
    5. Código de la página
    6. Visualización de la imagen responsive
    7. Código para las pantallas de alta definición (Retina)
    8. Código completo de la página
  • Script responsive-images.js
    1. Utilizar JavaScript
    2. Descarga la demo
    3. Código de la página
    4. Utilizar la página
  • Propuestas para el futuro
    1. Grupos de trabajo: RICG y W3C
    2. Grupos de trabajo: Apple y W3C
  • Tipografía responsive
    1. Objetivo
    2. Unidades utilizadas
    3. Unidad em y cascada
    4. Unidad rem y la cascada
    5. Tipografía responsive y unidad rem
    6. Tipografía responsive y fuentes
    7. Unidades relacionadas con el viewport
  • Tablas responsives
    1. Objetivo
    2. Zurb
    3. La solución de Geoff Yuen
    4. La solución de Chris Coyier
    5. Otras soluciones

Capítulo 8: Frameworks de CSS

  • Introducción
  • Frameworks de CSS
  • UIkit
    1. Utilizar UIkit
    2. Descargar el framework
    3. Descargar jQuery
    4. Instalar el framework
    5. Crear una cuadrícula fluida
    6. Utilizar la cuadrícula fluida
    7. Utilizar la cuadrícula responsive de UIkit
    8. Crear una barra de navegación
    9. Crear una tabla con formato
  • Kube
    1. Utilizar Kube
    2. Descargar el framework
    3. Instalar el framework
    4. Crear una cuadrícula fluida y responsive
    5. Utilizar la cuadrícula fluida y responsive
    6. Insertar un formulario
    7. Insertar botones
  • Pure
    1. Utilizar Pure
    2. Descargar el framework
    3. Enlazar el framework
    4. Utilizar la cuadrícula fluida responsive
    5. Insertar una tabla
    6. Insertar una barra de menú con un menú desplegable

Capítulo 9: El futuro del diseño

  • Objetivos
  • Multicolumna
    1. Preceptos de uso
    2. Configuración de columnas
    3. Configuración de las calles
    4. Configuración de saltos de columna
    5. Distribución en varias columnas
    6. Un generador de multicolumnas
    7. Columnas y diseño responsive
  • Cajas flexibles
    1. Ubicación de los elementos de diseño
    2. Módulo de las cajas flexibles
    3. Cajas flexibles
    4. Orientación y dirección de las cajas
    5. Desbordamiento de las cajas
    6. Orientación de las cajas
    7. Alineación horizontal de las cajas
    8. Alineación vertical de las cajas
    9. Excepciones en la alineación vertical
    10. Excepciones en la alineación horizontal
    11. Propiedades de la flexibilidad
    12. Propiedad flex-grow
    13. Propiedades flex-shrink y flex-basis
    14. Constructores en línea
    15. Ejemplo de diseño flexible
  • Otros módulos del W3C
    1. Recorrido
    2. Cuadrículas
    3. Plantilla de página
    4. Distribución
    5. Regiones

Tu inversion al adquirir este curso incluye:

    • clases en video
    • Descarga de recursos software
    • Material para descarga
    • Evaluaciones en línea
    • Acceso ilimitado por 24 meses

¿Tienes dudas? Visita nuestra sección de preguntas frecuentes


Curso de Diseño Web Responsive con HTML5 y CSS3

Próximamente
¿Quieres saber más sobre nuestra modalidad en linea?

Mayores informes

Curso de Diseño Web Responsive con HTML5 y CSS3

Apertura bajo demanda
Solicita más información acerca de este curso

Mayores informes

¿Eres una empresa?
Podemos ir hasta tus instalaciones

Solicita una cotización

¿Eres una empresa?
Podemos ir hasta tus instalaciones

Solicita una cotización


¿Tienes preguntas o quieres saber más sobre nuestros cursos?

Todos los campos con (*) son requeridos