Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

En 20 minutos ... Responsive Design

3,996 views

Published on

¿Qué es Responsive Design? Ventajas y empleo de Responsive Design. Bootstrap. Foundation. RichFaces Bootstrap

Published in: Technology
  • Hola
    Les comparto un muy buen video tutorial gratuito de Responsive Design:
    http://responsivedesigndesdecero.com/

    Espero les sirva!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

En 20 minutos ... Responsive Design

  1. 1. Responsive Design Jesús María Méndez Pérez Grupo de Apoyo a la Teleenseñanza (GAT) 20/03/2013
  2. 2. • Introducción• Definición Responsive Design• Características• Patrones de diseño• Diferentes frameworks – Foundation – Bootstrap – Bootstrap Richfaces• Herramientas
  3. 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. 4. • Gran cantidad de dispositivos y resoluciones. Imagen de http://www.dotcominfoway.comSolución: Responsive Design
  5. 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. 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. 7. Core Responsive Design1. A flexible, grid-based layout,2. Flexible images and media, and3. Media queries, a module from the CSS3 specification.
  8. 8. Core Responsive Design1. 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/
  9. 9. Core Responsive Design3. 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. 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. 11. Frameworks• Principales – Foundation – Bootstrap – Hay varios más pero son menos conocidos y con menos comunidad detrás.
  12. 12. Foundationhttp://foundation.zurb.com/
  13. 13. Bootstraphttp://twitter.github.com/bootstrap/index.html
  14. 14. BootstrapDefault grid system Fluid grid system Ancho de las columnas en porcentaje en vez de px
  15. 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. 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. 17. Herramientas• Plugins jQuery – FitText – Footable – Adaptative Images – Galería Imágenes Responsive
  18. 18. GRACIAS

×