![Page 1: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/1.jpg)
Presentado por: Héctor Alonso Méndez Orantes …… Jonatán Ulises Martínez Quintanilla
![Page 2: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/2.jpg)
Agenda Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona
–Flexible Grid –Flexible Multimedia –Media Queries
![Page 3: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/3.jpg)
![Page 4: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/4.jpg)
El Responsive Web Design permite crear sitios Web que se adaptan al ancho del
dispositivo en que se este navegando, lo que permite tener un unico diseño para PC,
mobile y tabletas.
Responsive Web Design
![Page 5: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/5.jpg)
Mobile Site Website
Smartphones Tablets Desktop, Laptops y Netbooks
![Page 6: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/6.jpg)
![Page 7: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/7.jpg)
![Page 8: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/8.jpg)
![Page 9: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/9.jpg)
En los últimos años
EL Internet Mobile se a ido
incrementando
![Page 10: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/10.jpg)
Estructura del sitio Optimizacion de recursos Ahorro de tiempo y dinero Mayor control grafico Los diseños son sencillos de mantener Mejora el posicionamiento de tu sitio
en buscadores Compactibilidad con Navegadores
![Page 11: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/11.jpg)
Optimización del codigo y contenido
¿Contenido “centrado en el usuario”?
![Page 12: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/12.jpg)
![Page 13: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/13.jpg)
Responsive Web
Design
Flexible Grids (Retículas Flexibles)
Flexible Multimedia (Elementos Multimedia Flexible)
Media Queries
![Page 14: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/14.jpg)
![Page 15: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/15.jpg)
Flexible Type Flexible Containers Ejemplo
![Page 16: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/16.jpg)
Flexible Type
El enfoque mas comun para tipo de estilo de hoy es utilizar pixeles. Pero para utilizar Responsive Web Design vamos a utilizar Ems.
𝑻𝑻𝑻𝑻𝑻𝑻𝑪𝑪𝑪𝑻𝑻𝑪𝑻
= 𝑹𝑻𝑹𝑹𝑹𝑻𝑻𝑹𝑪 𝑻𝑪 %
![Page 17: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/17.jpg)
Flexible Containers
![Page 18: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/18.jpg)
Flexible Containers
![Page 19: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/19.jpg)
![Page 20: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/20.jpg)
Estructura HTML
![Page 21: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/21.jpg)
Estructura en CSS
![Page 22: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/22.jpg)
Nueva estructura en CSS
![Page 23: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/23.jpg)
Ejemplo
![Page 24: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/24.jpg)
![Page 25: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/25.jpg)
![Page 26: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/26.jpg)
![Page 27: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/27.jpg)
![Page 28: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/28.jpg)
![Page 29: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/29.jpg)
![Page 30: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/30.jpg)
![Page 31: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/31.jpg)
Flexible Image
img { border: 0; width: 100%; display: block; max-width: 100%; }
![Page 32: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/32.jpg)
Flexible Video
![Page 33: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/33.jpg)
<div class="flex-video"> <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe> </div> <div class="flex-video widescreen"> <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe> </div> <div class="flex-video widescreen vimeo"> <iframe src="http://player.vimeo.com/video/21762736?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div>
![Page 34: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/34.jpg)
![Page 35: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/35.jpg)
Media Types
![Page 36: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/36.jpg)
Media Queries
![Page 37: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/37.jpg)
Media Queries
![Page 38: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/38.jpg)
![Page 39: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/39.jpg)
![Page 40: Presentado por: Héctor Alonso Méndez Orantes …… Que es Responsive Web Design Porque es necesario implementar un RWD Ventajas y Desventajas Como Funciona –Flexible Grid –Flexible](https://reader031.vdocuments.co/reader031/viewer/2022030802/5b0bd3917f8b9a0c4b8e84b3/html5/thumbnails/40.jpg)