PDF de programación - Responsive Web Design: Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3

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 de Grado

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 tantos buenos 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 dispositivo mó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 empleo de 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 ....................................................... 37

4.5.10 Rendimiento Web ............................................................................................. 38

4.5.11 Compatibilidades entre navegadores ................................................................ 40

4.5.11.1 Concepto de Cross Browser .................................................................. 40

4.6 Ventajas e Inconvenientes del empleo de Responsive Web Design ....................... 48

4.6.1 Ventajas ............................................................................................................ 48

4.6.2 Desventajas....................................................................................................... 49



4

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

4.7 Técnicas de Implementación ................................................................................... 50

4.7.1 Mostly Fluid (Mayormente fluido) .................................................................. 50

4.7.1.1

Ejemplo de Implementación.................................................................. 52

4.7.2 Column Drop (Caída de columnas) .................................................................. 57

4.7.2.1

Ejemplo de Implementación.................................................................. 60

4.7.3 Layout Shifter (Cambio de layout)................................................................... 63

4.7.4 Tiny Tweaks (Cambios Minúsculos) ............................................................... 65

4.7.5 Off Canvas (Fuera del Lienzo) ......................................................................... 66

4.8 Herramientas para probar diseños Responsive Web Design ................................... 69

4.9 Empleo de Frameworks para RWD ......................................................................... 72

4.9.1 Concepto de un framework front-end .............................................................. 72

4.9.2 Ventajas y desventajas de emplear un framework front-end ........................... 72

4.9.3 Framework a estudiar: Bootstrap ..................................................................... 73

4.9.3.1

Introducción a Bootstrap ....................................................................... 74

4.9.3.2

Estructura del framework ...................................................................... 75

4.9.3.3

Herramientas que aporta Bootstrap ....................................................... 76

4.9.3.4

Incluir Bootstrap en nuestra aplicación web ......................................... 77

4.9.3.5

Sistema de columnas de Bootstrap ........................................................ 77

4.9.3.6

Ejemplo de un Diseño Responsive empleando Bootstrap ..................... 81

4.9.3.7

El futuro de Bootstrap ........................................................................... 86

4.9.4 Otros Frameworks Front-end ........................................................................... 87

Skeleton 87

Foundation 4 ............................................................................................................ 87

4.9.5 Conclusiones .................................................................................................... 88

4.10 Caso de Éxito ........................................................................................................... 89

5. Conclusiones y trabajo futuro ................................................ 91

6. Presupuesto ............................................................................ 93

Costes de Recursos Humanos ..................................................................................... 93

Costes Materiales ........................................................................................................ 94

Presupuesto Final ........................................................................................................ 94

Referencias ...................................................................................................................... 95

Bibliografía Complementaria.......................................................................................... 96

Anexo A. Diseño de una interfaz Responsive Web Design ............................................ 97



5

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

Índice de ilustraciones

Ilustración 1- Ilustración de IAB Spain (2012), “IV Estudio IAB Spain sobre Mobile
Marketing” ........................................................................................................................ 9
Ilustración 2 Usuario Movil vs Usuario de Escritorio - Morgan Stanley ....................... 15
Ilustración 3 Millones de unidades vendidas en los últimos años .................................. 16
Ilustración 4 Mobile First................................................................................................ 21
Ilustración 5 Layout de Ancho Fijo (Fuente: http://coding.smashingmagazine.com/) ... 23
Ilustración 6 Layout Fluido (Fuente: http://coding.smashingmagazine.com/) ............... 24
Ilustración 7 The Box Model (Fuente: http://hisakoevans.com/web-tutorial/div.html) . 25
Ilustración 8 Resultado con cada modelo de caja ........................................................... 27
Ilustración 9 Modelo de Caja con Border-Box ............................................................... 28
Ilustración 10 Modelo de Caja con Content-Box ........................................................... 28
Ilustración 11 Mediaqueries (http://blog.bitmarketing.es/por-que-usar-responsive-web-
design/) ............................