Responsive design
-
Upload
andres-londono -
Category
Technology
-
view
227 -
download
3
Transcript of Responsive design
![Page 2: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/2.jpg)
Agenda
CaracteriticasConcepto
Demo herramientas Preguntas
![Page 3: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/3.jpg)
Un sitio web es sensible solo si es capaz de adaptarse a la pantalla del cliente y con la finalidad de alcanzar una correcta funcionalidad de las interfaces, buscando lograr uniformidad y estandarización al momento en que desplegamos nuestro contenido en distintos dispositivos y presentaciones.
Responsive Design HTML5
![Page 4: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/4.jpg)
¿Porqué implementar Responsive Design?
![Page 5: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/5.jpg)
Adapta el zoom de la pantalla automaticamente al ancho de la web para que entre por completo en la anchura de la pantalla del dispositivo.
1. Meta Tags
<meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1" />
![Page 6: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/6.jpg)
2. Diseño FluidoUtilizar porcentajes para definir los anchos de las columnas o contenedoresen lugar de píxeles.
img, video, object {max-width:100%;}
![Page 7: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/7.jpg)
3. Media QueryPermiten consultas al CSS personalizado basandose en el ancho mínimo y máximo de un navegador (min-max width).
/*Para ventanas inferiores a los 480px*/@media screen and (max-width: 480px) {}
![Page 8: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/8.jpg)
Y lo mejor... Vámos al código :D
![Page 9: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/9.jpg)
Herramientas y Conclusiones
http://responsivedesign.cloudapp.net/https://github.com/andreslon/ResponsiveDesignAvanet
Sitios de Intereshttp://mediaqueri.es/http://dfcb.github.com/Responsivator/http://www.w3.org/
FrameworksBootstrap,Kube...
![Page 10: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/10.jpg)
Preguntas, Inquitudes o Recomendaciones.
![Page 11: Responsive design](https://reader034.fdocuments.mx/reader034/viewer/2022051616/5561eea2d8b42ab1068b55f7/html5/thumbnails/11.jpg)
El evento continúa...