Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | seccion-de-metodologias-normalizacion-y-calidad-del-software |
View: | 2,706 times |
Download: | 4 times |
Responsive Design
Jesús María Méndez PérezGrupo de Apoyo a la Teleenseñanza (GAT)20/03/2013
• Introducción• Definición Responsive Design• Características • Patrones de diseño• Diferentes frameworks– Foundation– Bootstrap– Bootstrap Richfaces
• Herramientas
Introducción
• El teléfono móvil iguala ya al portátil en el acceso a internet
Imagen de http://www.dotcominfoway.com
• Solución: Responsive Design
• Gran cantidad de dispositivos y resoluciones.
Imagen de http://www.dotcominfoway.com
Solución: Responsive Design
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/
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.
Core Responsive Design
1. A flexible, grid-based layout,2. Flexible images and media, and3. Media queries, a module from the
CSS3 specification.
Core Responsive Design
1. A flexible, grid-based layout2. Flexible images and media- ¿Recortar imágenes?Crop foregroundCrop 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/
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
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”
Frameworks
• Principales– Foundation– Bootstrap– Hay varios más pero son menos
conocidos y con menos comunidad detrás.
Bootstrap
http://twitter.github.com/bootstrap/index.html
Personalizarlo dependiendo de lo que necesites.
Bootstrap
Default grid system Fluid grid systemAncho de las columnas en porcentaje en vez de px
Bootstrap Richfaces
• FUNDEWEB 1.xRichFaces 3.x
http://livedemo.exadel.com/richfaces-demo/
PrimeFaces 1.x, IceFaces ?
• FUNDEWEB 2.x
RichFaces 4.xhttp://livedemo.exadel.com/richfaces4-demohttp://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 Bootstraphttps://bootstrap-richfaces.rhcloud.com/
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
Herramientas
• Plugins jQuery– FitText– Footable– Adaptative Images– Galería Imágenes Responsive
GRACIAS