Responsive

UNIVERSIDAD DE ALCALÁ
Escuela Politécnica Superior

Grado en Ingeniería Informática

Trabajo de Fin de Grado

Responsive Web Design: Interfaces Web
Adaptables al dispositivo empleando HTML5 y
CSS3
Adrián Alonso Vega

Responsive Web Design: Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3

UNIVERSIDAD DE ALCALÁ
Escuela Politécnica Superior

Trabajo de Fin deGrado

Responsive Web Design: Interfaces Web
Adaptables al dispositivo empleando HTML5 y
CSS3
Autor: Adrián Alonso Vega
Director/es: Antonio Moratilla Ocaña

TRIBUNAL:
Presidente: ……………………………
Vocal 1º: ………………………………
Vocal 2º: ………………………………

CALIFICACIÓN: ...........................................
FECHA: ...........................................

1

Responsive Web Design:Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3

2

Responsive Web Design: Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3

Agradecimientos
A mis padres, por haberme dado la mejor educación y lecciones de la vida.
A mi hermano, por ser un camino a seguir.
A Lorena, por apoyarme en todas las decisiones de mi vida.
A mis compañeros, por haber compartido tantosbuenos momentos.
A todo aquél que haya aportado un pedacito suyo en mí.
A los amigos de verdad.

3

Responsive Web Design: Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3

Tabla de contenido
1. Introducción .............................................................................. 9
2. Objetivos................................................................................. 11
3. Estado del arte ........................................................................ 12
4. Desarrollo del estudio ............................................................ 14
4.1 Definición de “Responsive Web Design” ............................................................... 14
4.2 Estadísticas que avalan el crecimiento del dispositivomóvil.................................. 15
4.3 Importancia del usuario móvil para empresas tecnológicas .................................... 18
4.3.1 El crecimiento del usuario móvil en Facebook ................................................ 18
4.3.2 Recomendaciones de Google sobre RWD ....................................................... 18
4.4 Comparación entre aplicaciones móviles y aplicaciones nativas............................ 19
4.5 Conceptos y técnicas que aporta Responsive Web Design ..................................... 21
4.5.1 El concepto del “Mobile First”......................................................................... 21
4.5.2 Layouts empleados en el diseño web ............................................................... 22
4.5.2.1

Tipos de Layouts................................................................................... 22

4.5.2.2

Layout Fluido ........................................................................................ 23

4.5.2.3

Layout Elástico ...................................................................................... 24

4.5.2.4

Layouts Híbridos................................................................................... 25

4.5.3 El problema del modelo de caja ....................................................................... 25
4.5.4 Los Mediaqueries y CSS3 ................................................................................ 29
4.5.5 Concepto de Viewport ...................................................................................... 31
4.5.6 El empleode medidas relativas ........................................................................ 33
4.5.7 Imágenes flexibles ............................................................................................ 34
4.5.8 Fuentes flexibles ............................................................................................... 36
4.5.9 Técnicas para mostrar y ocultar contenido...