Slides from a brief introduction to the responsive and adaptative designs in Web development, University of Extremadura, April of 2013.

1. Ingeniería web
Diseño responsivo y adaptativo
Ingeniería del Software
Grado en Ingeniería de Sonido e Imagen en Telecomunicación
BRUNO PÉREZ GOZÁLEZ
ALBERTO SERNA MARTÍN

2. 2
Contenidos
• ¿Por qué es necesario?
▫ ¿Qué es la web?
▫ ¿Cuál es el problema?
▫ One web.
• ¿Qué los diferencia?
• Ejemplos.
B. PÉREZ Y A. SERNA

3. 3
¿Por qué es necesario?
• Pregunta clave: ¿Qué es la web?
La web es…
B. PÉREZ Y A. SERNA

4. 4
¿Por qué es necesario?
• Pregunta clave: ¿Qué es la web?
La web será…
B. PÉREZ Y A. SERNA

5. 5
¿Por qué es necesario?
•
B. PÉREZ Y A. SERNA

6. 6
¿Por qué es necesario?
•
B. PÉREZ Y A. SERNA

7. 7
¿Por qué es necesario?
•
B. PÉREZ Y A. SERNA

8. 8
¿Qué los diferencia?
• Diseño responsivo.
▫ Configuraciones predefinidas.
▫ Límites previstos.
▫ <meta name="viewport" content="width=devicewidth, initial-scale=1.0" />
• Diseño Adaptativo.
▫ Se adapta continuamente según la resolución o
tamaño de la ventana.
B. PÉREZ Y A. SERNA

9. 9
Diseño responsivo y adaptativo
Ejemplos
B. PÉREZ Y A. SERNA

10. 10
Referencias
• Curso Online iDESWEB: «Introducción al Desarrollo
Web».
▫ Sergio Luján Mora, Universidad de Alicante.
▫ www.idesweb.es
• W3C: World Wide Web Consorctium.
▫ Tim Berners-Lee, Massachusetts Institute of
Technology.
▫ www.w3c.org
B. PÉREZ Y A. SERNA