Técnico en Diseño Web Responsive

Grupo IOE

Cursos

A distancia / Online.

200 horas.

Todo el año

770 €/curso

  • El día 21 de Abril toda web que no esté adaptada a teléfonos móviles desaparece de las búsquedas de Google. El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.
  • El objetivo del diseño web responsive  es crear sitios web que se adaptan automáticamente a cualquier resolución para obtener así una visualización óptima, independientemente del tipo de pantalla, ya sea de ordenador, tableta o smartphone.

    En este libro, empezaremos con un recordatorio sobre los métodos de diseño "clásico" y sus limitaciones antes de presentar la técnica del diseño basado en el uso de tablas y CSS3. A continuación, veremos cómo utilizar las cuadrículas de diseño, las cuadrículas fijas y fluidas.

    El diseño web responsive se basa, fundamentalmente, en las media queries CSS3: aprenderemos a dominar esta técnica gracias a numerosos ejemplos. Pasaremos después a los diferentes aspectos del  diseño responsive: las cuadrículas, las imágenes y la tipografía.



    Para optimizar el trabajo, aprenderemos a utilizar algunos  frameworks CSS, con los que podremos utilizar toda una serie de componentes HTML5/CSS3 para diseñar de forma eficaz sitios responsive. También veremos la utilidad de las librerías JavaScript para gestionar los problemas de compatibilidad con los navegadores.
  • Requisitos

    Cualquier persona interesada en el diseño de productos digitales, con una mentalidad abierta ante los nuevos cambios que se están produciendo, y con ganas de asumir retos.
  • Capítulo 1: Introducción A. El diseño web actual B. Diseño web responsive C. Planteamientos de diseño D. Pasar a otra cosa E. Objetivos del libro F. Herramientas del maquetador 1. Objetivos 2. Mozilla Firefox 3. Google Chrome 4. Apple Safari 5. Microsoft Internet Explorer G. Descargar ejemplos Capítulo 2: Soluciones para la compatibilidad A. Disparidad entre navegadores B. Mejorar la compatibilidad C. Visualización inicial de los navegadores 1. El problema 2. El reset universal 3. El reset de Eric Meyer 4. El reset de HTML5 Doctor D. Normalize.css 1. El proyecto 2. Descargar Normalize.css 3. Instalar Normalize.css E. El HTML5 y html5shiv.js 1. Objetivo 2. Archivo de ejemplo 3. Librería html5shiv.js F. Media queries y respond.js 1. Objetivo 2. Archivo de ejemplo 3. La librería respond.js G. Las alternativas y Modernizr.js 1. Objetivo 2. Descargar Modernizr 3. Crear una página de ejemplo 4. Instale y enlace el script Modernizr 5. La activación de Modernizr 6. Utilizar las clases de Modernizr 7. Utilizar Modernizr con JavaScript H. Las reglas @supports 1. Objetivo 2. Utilizar las reglas @supports 3. Operadores Capítulo 3: El diseño clásico A. Diseñadores y maquetadores B. Modelos de cajas C. Los márgenes de los elementos D. Visualización de los elementos E. Visualización en flujo normal F. Posicionamiento absoluto G. Posicionamiento fijo H. Posicionamiento relativo I. Utilizar el diseño en posición relativa y absoluta J. 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 A. Objetivo B. La propiedad display C. Diseño simple con una tabla D. Ancho en pantalla de la tabla E. Elementos anónimos F. Otros elementos para las tablas 1. Párrafos en las celdas 2. Listas en tablas G. Diseño de las filas H. Establecer el ancho de las celdas 1. Anchos fijos 2. Anchos en porcentaje I. Diseño con una tabla más estructurada J. 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 K. Alineación vertical L. Conclusión Capítulo 5: Cuadrículas de diseño A. Objetivo B. Estructura de las cuadrículas para la web C. Cuadrículas fijas D. 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 E. 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 F. 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 A. Objetivo B. Orígenes C. Uso de media queries D. Sintaxis de las media queries E. Características a prueba F. Dónde ubicar las media queries G. Tamaño de las pantallas de los móviles H. El concepto viewport I. Un ejemplo muy sencillo 1. Esquema 2. Código HTML y CSS J. 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 K. Ejemplos de sitios con media queries Capítulo 7: El diseño responsive A. El diseño responsive B. Cuadrículas responsive C. 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 D. 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 E. Uso de imágenes F. 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 G. 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 H. 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 I. Script responsive-images.js 1. Utilizar JavaScript 2. Descarga la demo 3. Código de la página 4. Utilizar la página J. Propuestas para el futuro 1. Grupos de trabajo: RICG y W3C 2. Grupos de trabajo: Apple y W3C K. 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 L. 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 A. Utilizar los frameworks de CSS B. Frameworks de CSS C. 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 D. 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 E. 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 A. Objetivos B. 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 C. 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 D. Otros módulos del W3C 1. Recorrido 2. Cuadrículas 3. Plantilla de página 4. Distribución 5. Regiones  
  • Convocatorias

    Inicio: Todo el año
 

¿Te interesa el curso?
Pide que te informen sobre Técnico en Diseño Web Responsive

Al pulsar el botón "Infórmate" he leído y acepto el Aviso legal de Avanza en tu carrera.

Validando datos

También podemos ofrecerte otras alternativas similares a este curso
Ir arriba