En 20 minutos ... Responsive Design
0 recomendaciones4,145 vistas
El documento aborda el diseño responsivo, su definición, características y ventajas, destacando la importancia de adaptarse a diferentes dispositivos y resoluciones. Se describen los elementos clave del diseño responsivo, como layouts flexibles, imágenes adaptativas y consultas de medios. Además, menciona frameworks populares como Bootstrap y Foundation, junto con herramientas útiles para implementar y probar este tipo de diseño.
En 20 minutos ... Responsive Design
- 1. Responsive Design Jesús María Méndez Pérez Grupo de Apoyo a la Teleenseñanza (GAT) 20/03/2013
- 2. • Introducción • Definición Responsive Design • Características • Patrones de diseño • Diferentes frameworks – Foundation – Bootstrap – Bootstrap Richfaces • Herramientas
- 3. Introducción • El teléfono móvil iguala ya al portátil en el acceso a internet Imagen de http://www.dotcominfoway.com
- 4. • Gran cantidad de dispositivos y resoluciones. Imagen de http://www.dotcominfoway.com Solución: Responsive Design
- 5. Definición Responsive Design • Un diseño que se adapta a la resolución del navegador o dispositivo con la que se visita el sitio web creando un diseño que responda a las necesidades del usuario. http://stuffandnonsense.co.uk/
- 6. Ventajas • Una misma URL, un único contenido, HTML5 y CSS3. • Las ventajas son evidentes: – Se consigue un ahorro en costes, no teniendo que hacer desarrollos paralelos para cada dispositivo. – Ahorro en tiempo, ya que solo hay que realizar las actualizaciones de contenido una única vez para todos los entornos. – Mejora el SEO. Google incluso recomienda este tipo de prácticas y las valora muy positivamente. – Mejor rendimiento. – Mayor soporte de navegadores.
- 7. Core Responsive Design 1. A flexible, grid-based layout, 2. Flexible images and media, and 3. Media queries, a module from the CSS3 specification.
- 8. Core Responsive Design 1. A flexible, grid-based layout 2. Flexible images and media - ¿Recortar imágenes? Crop foreground Crop background - ¿Sustituir una imagen por otra? http://stuffandnonsense.co.uk/projects/320andup/ - ¿Redimensionar imágenes? Nuestras imágenes se adapten al tamaño del contenedor. img { img, embed, object, video { max-width: 100%; max-width: 100% } } http://filamentgroup.com/examples/responsive-images/
- 9. Core Responsive Design 3. Media queries, a module from the CSS3 specification <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- scalable=0" /> NO /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... } Ipod retina @media only screen and (-webkit-min-device-pixel-ratio: 2) { …} Retina Images
- 10. Patrones de diseño • http://bradfrostweb.com/blog/web/responsive-nav-patterns/ – Top Nav or “Do Nothing” Approach – The Footer Anchor – The Select Menu – The Toggle – The Left Nav Flyout – The Footer Only – The “Hide and Cry”
- 11. Frameworks • Principales – Foundation – Bootstrap – Hay varios más pero son menos conocidos y con menos comunidad detrás.
- 14. Bootstrap Default grid system Fluid grid system Ancho de las columnas en porcentaje en vez de px
- 15. Bootstrap Richfaces • FUNDEWEB 1.x RichFaces 3.x http://livedemo.exadel.com/richfaces-demo/ PrimeFaces 1.x, IceFaces ? • FUNDEWEB 2.x RichFaces 4.x http://livedemo.exadel.com/richfaces4-demo http://showcase.richfaces.org/ PrimeFaces 3.x http://www.primefaces.org/showcase/ui/home.jsf IceFaces 3.x http://icefaces-showcase.icesoft.org/showcase.jsf RichFaces Bootstrap https://bootstrap-richfaces.rhcloud.com/
- 16. Herramientas • Testear Responsive Design – Responsive PX – The responsinator – Screenfly – Responsive Web Design Testing Tool – Adobe Shadow – Firefox (Web developer) y Chrome (Window Resizer) • Responsive Design Sketchbook – Cuaderno de bocetos de diseño Responsive
- 17. Herramientas • Plugins jQuery – FitText – Footable – Adaptative Images – Galería Imágenes Responsive
- 18. GRACIAS