IOE Business School - UNADE

Técnico en diseño web responsive

IOE Business School - UNADE
Este curso no está actualmente activo en nuestra Web
  • Imparte:
  • Modalidad:
    Distancia
  • Precio:
    Información no disponible
  • Comienzo:
    Información no disponible
  • Lugar:
    Se imparte a Distancia
  • Duración:
    200 Horas

Dirigido

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.

Objetivos

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.

Programa

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 cua

Cursos relacionados que SÍ están activos

Publicidad

Ver otros cursos de...