diseño responsivo en drupal: ¿qué hay de nuevo?
TRANSCRIPT
![Page 1: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/1.jpg)
Launch with Launch with confidenceconfidenceDiseño Diseño ResponsivoResponsivo¿Qué hay de nuevo?¿Qué hay de nuevo?
Twitter: @rmonterooTwitter: @rmonteroo#DrupalCampMX #RWD#DrupalCampMX #RWD
![Page 2: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/2.jpg)
Rob Montero - Achieve Internet
Rob is un ingeniero senior para Achieve Internet.
Más de 10 años de experiencia haciendo desarrollo web y 4+ haciendo Drupal exclusivamente.
Achieve Internet es una empresa líder en el desarrollo avanzado de plataformas web y móvil.
Construímos arquitectura sólida y lo hacemos bien para que puedas lanzar con confianza.Trabajamos para sitios de alta demanda, plataformas y ambientes estrictos.
![Page 3: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/3.jpg)
Agenda
• ¿Qué es el RWD?• Ejemplos
• ¿A mano o theme?
• ¿Lo necesito?• Relevancia• Los buzzwords• Nuevos juguetes
• ¿Qué hay de nuevo?• Themes• <picture>• FlexSlider• Bgstretch
• Para llevar• Preguntas
![Page 4: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/4.jpg)
¿Qué ¿Qué es es
RWD?RWD?
![Page 5: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/5.jpg)
Diseño Web Responsivo
RWD es el concepto de desarrollar un sitio web de una manera que permite que el diseño se ajuste de acuerdo con la resolución de pantalla del usuario (view port) usando media queries.
![Page 6: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/6.jpg)
¿Qué es el RWD?
![Page 7: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/7.jpg)
¿Qué es el RWD?
![Page 8: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/8.jpg)
http://mattkersley.com/responsive/?http://sony.com
![Page 9: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/9.jpg)
¿Qué es el ¿Qué es el RWD?RWD?
Si tienes una laptop, tablet o smart phone puedes ver de lo que hablo dirigiéndote a estas direcciones:
•http://achv.in/rwdrob•http://mattkersley.com/responsive/?{website_url}
![Page 10: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/10.jpg)
Simon Collison
![Page 11: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/11.jpg)
Food Sense
![Page 12: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/12.jpg)
Clean Air Commute Challenge
![Page 13: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/13.jpg)
FlexSlider
![Page 14: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/14.jpg)
¿Qué es el RWD?
Más ejemplos
•http://foodsense.is•http://earthhour.fr•http://w3conf.org•http://mediaqueri.es•http://fourkitchens.com•http://achieveinternet.com
![Page 15: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/15.jpg)
La gran pregunta
¿Construyo el tema (theme)
HTML + CSS + JSa mano
- O - -uso un tema contrib?
![Page 16: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/16.jpg)
The big question
![Page 17: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/17.jpg)
¡OK!¡OK!¡Entienden el ¡Entienden el
punto!punto!
Para más ejemplos:Para más ejemplos:http://designmodo.com/http://designmodo.com/
responsive-design-examplesresponsive-design-examples
![Page 18: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/18.jpg)
¿Quién necesita el RWD?
Necesitas RWD si:
•Estás empezando de cero•Quieres cortar costos•Quieres que funcione aún si lanzan nuevos dispositivos
![Page 19: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/19.jpg)
¿Por qué es relevante?
•1.8 billiones de conexiones a
internet en el mundo hoy.
•6.8 billiones de gente en el mundo
hoy.
•3.4 billiones de gente con dispositivos
móviles en el mundo hoy. ( por ahí de la ½ de la población mundial )
![Page 20: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/20.jpg)
¿Por qué es relevante?
Se trata de la gente, no de los aparatos
![Page 21: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/21.jpg)
¿Por qué es relevante?
•1.3 billiones de usuarios
móviles en el mundo hoy.
( Incluye WAP y “la web común” )
•1/3 de los usuarios de internet acceden únicamente por via móvil
![Page 22: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/22.jpg)
¿Por qué es relevante?
El futuro
es ahora
![Page 23: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/23.jpg)
¿Por qué es relevante?
Es muyconveniente
![Page 24: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/24.jpg)
¿Por qué es relevante?
RWD nos permite ajustar el diseño y mostrar solo la información relevante primero:
•Horario de operación•Teléfono•Dirección con enlace a tu app de nav.•Un link para ver el menú.
Lo demás puede esperar / ahorra bandwidth.
![Page 25: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/25.jpg)
¿Por qué es relevante?
Ya en tu escritorio puedes ver todo lo no esencial sobre este restaurante.
•Fotos exquisitas.•Te hacen la boca agua•Todo eso tan importante que la agencia de mercadeo recomendó.•El perfil del chef y sus premios, etc…
![Page 26: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/26.jpg)
• Evita el keyhole browsing.
• No deberías necesitar una lupa para navegar deste tu teléfono
¿Por qué es relevante?
![Page 27: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/27.jpg)
Hola Media Queries y CSS3
In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width.
![Page 28: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/28.jpg)
CSS3 & Media Queries
La ausencia de soporte para @media queries es de hecho el primer @media query.
![Page 29: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/29.jpg)
CSS3 & Media Queries
En tu CSS:@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // y así consecutivamente...}
![Page 30: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/30.jpg)
CSS3 & Media Queries
O en los encabezados de tu sitio:
<link rel="stylesheet" href="this.css" media="(min-width: 960px)">
![Page 31: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/31.jpg)
CSS3 & Media Queries
Al restringir las reglas de CSS al tamaño de la pantalla donde se despliega podemos ajustar a la medida la presentación de la misma únicamente para dicho tamaño.
![Page 32: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/32.jpg)
Breakpoints más comunes
![Page 33: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/33.jpg)
¿Cómo diseñamos para RWD?
Simple:Usa el Mobile First Approach y favorece el Progressive Enhancement en lugar del tradicional Graceful Degradation
![Page 34: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/34.jpg)
Mobile First Approach
![Page 35: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/35.jpg)
Mobile First Approach
![Page 36: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/36.jpg)
Graceful Degradation
• Se enfoca en la construcción de la página web para los buscadores más avanzados / capaces.
• Se espera que los navegadores más antiguos tengan una mala experiencia, pero pasable.
• Se pueden hacer ajustes para browsers particulares ( no son lo principal )
![Page 37: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/37.jpg)
Progressive Enhancement
• Se enfoca en el contenido. ( no los navegadores )
• Piensa del contenido hacia afuera. ( M&M maní )
–Cacahuate: Contenido, con (x)html rico y semántico
–Cubierto de una rica y cremosa capa de CSS
– JS es la coraza dura dulce
![Page 38: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/38.jpg)
Progressive Enhancement
Progressive Enhancement consiste de los siguientes fundamentos:
•El contenido básico y su funcionalidad debe ser accesibleen todos los navegadores.
•El markup semántico y liviano contiene todo el contenido.
•Diagramación avanzada CSS externo.
•Funcionalidad avanzada JavaScript externo.
•Repetar las preferencias de navegación del usuario final.
![Page 39: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/39.jpg)
Progressive Enhancement
Beneficios:•Accesibilidad: Las páginas con PE son más accesibles por su naturaleza.
•SEO: Ya que el contenido básico siempre está accesible.
•Desempeño: Responsive = Rápido
![Page 40: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/40.jpg)
Juguetes nuevos para tu cajón
http://lab.maltewassermann.com/viewport-resizer/
![Page 41: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/41.jpg)
Juguetes nuevos para tu cajón
http://respondr.webhoard.net/
![Page 42: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/42.jpg)
Juguetes nuevos para tu cajón
http://designmodo.com/responsive-test/
![Page 43: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/43.jpg)
Media Query Debugger Media Query Debugger
http://johanbrook.com/design/chttp://johanbrook.com/design/css/debugging-css-media-ss/debugging-css-media-queriesqueries
![Page 44: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/44.jpg)
pero y… ¿qué hay de nuevo?
RWD ha estado alrededor por un
buen tiempo, pero no ha pasado de moda.
![Page 45: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/45.jpg)
pero y… ¿qué hay de nuevo?
Éstos son algunos de los desarrollos nuevos
favoritos en Diseño Web Responsivo
![Page 46: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/46.jpg)
pero y… ¿qué hay de nuevo?
Zen & ZenstrapBootstrap
Zurb-FoundationBoilerplate
Omega
![Page 47: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/47.jpg)
pero y… ¿qué hay de nuevo?
La etiqueta <picture> y por lo tanto el módulo
Picture.
Vs: adaptive-image, ais cs_adaptive_image, responsive_images and resp_img, rwdimages
![Page 48: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/48.jpg)
pero y… ¿qué hay de nuevo?
FlexSlider
Como views_slideshow pero responsivo y con capacidad de
responder al taco.Y soporta el módulo picture, además
![Page 49: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/49.jpg)
pero y… ¿qué hay de nuevo?
• fit_text• fitvids• responsive_embeds• backstretch *
![Page 50: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/50.jpg)
Para llevar
1. HTML5 Boilerplate (http://h5bp.com)2. Design Sketch Sheets
(http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets)
3. GoldenGridSystem.com4. Foldy960
(http://github.com/davatron5000/Foldy960)5. FitText (http://fittextjs.com/)
![Page 51: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/51.jpg)
Para llevar6. 320 and up
(http://stuffandnonsense.co.uk/projects/320andup)
7. Gridless (http://thatcoolguy.github.com/gridless-boilerplate)
8. Skeleton (http://www.getskeleton.com/)9. ResizeMyBrowser.com10.Responsive Design Testing
(http://mattkersley.com/responsive)
![Page 52: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/52.jpg)
Tarea
• http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/Media_queries
• https://github.com/fourkitchens/train-rwd(via @FourKitchens’ @rupl)
• http://www.leveltendesign.com/blog/mark-carver/responsive-drupal-theming-done-right-way-least-now-anyway
![Page 53: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/53.jpg)
Créditos
•Mi primera clase de RWD fue en un taller impartido por Four Kitchens
•Revisen sus programas de entrenamiento.
•http://fourkitchens.com
![Page 54: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/54.jpg)
Rob Montero
• dgo.to/@rmontero
• @rmonteroo
• /in/rmontero
Email: [email protected]
¿Preguntas o Comentarios?
![Page 55: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/55.jpg)
¡Los esperamos!
![Page 56: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/56.jpg)
launch with launch with confidenceconfidence
¡GRACIAS!
![Page 57: Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?](https://reader034.vdocuments.site/reader034/viewer/2022052413/55a065391a28ab3f728b471d/html5/thumbnails/57.jpg)
Demo Time!
We will be demoing a couple of examples, one will be plain HTML5 + CSS using h5bp and the other will be similar but using Drupal.
If you want to play with this at home, feel free to download the resources at:
https://github.com/fourkitchens/train-rwd