Launch withLaunch with
confidenceconfidence
DiseñoDiseño
ResponsivoResponsivo¿Qué hay de nuevo?¿Qué hay de nuevo?
Twitter:...
RobMontero- AchieveInternet
Rob is un ingeniero
senior para Achieve
Internet.
Más de 10 años de
experiencia
haciendo desar...
Agenda
• ¿Qué es el
RWD?
• Ejemplos
• ¿A mano o
theme?
• ¿Lo necesito?
• Relevancia
• Los buzzwords
• Nuevos juguetes
• ¿Q...
¿Qué¿Qué
eses
RWD?RWD?
DiseñoWebResponsivo
RWD es el
concepto de
desarrollar un
sitio web de
una manera
que permite
que el diseño
se ajuste de
ac...
¿Quéesel RWD?
¿Quéesel RWD?
http://mattkersley.com/responsive/?
http://sony.com
¿Quéesel¿Quéesel
RWD?RWD?
Si tienes una laptop,
tablet o smart phone
puedes ver de lo que
hablo dirigiéndote a
estas direc...
SimonCollison
FoodSense
CleanAirCommuteChallenge
FlexSlider
¿Quéesel RWD?
Más ejemplos
•http://foodsense.is
•http://earthhour.fr
•http://w3conf.org
•http://mediaqueri.es
•http://four...
Lagranpregunta
¿Construyo el tema (theme)
HTML + CSS + JS
a mano
- O -
-uso un tema contrib?
Thebigquestion
¡OK!¡OK!
¡Entienden el¡Entienden el
punto!punto!
Para más ejemplos:Para más ejemplos:
http://designmodo.com/http://designm...
¿Quién necesita el
RWD?
Necesitas RWD
si:
•Estás empezando de cero
•Quieres cortar costos
•Quieres que funcione aún si
lan...
¿Por qué es relevante?
•1.8 billiones de conexiones a
internet en el mundo hoy.
•6.8 billiones de gente en el mundo
hoy.
•...
¿Por qué es relevante?
Se trata
de la
gente, no
de los
¿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 us...
¿Por qué es relevante?
El
futuro
¿Por qué es relevante?
Es muy
conven
iente
¿Por qué es relevante?
RWD nos permite ajustar el diseño y
mostrar solo la información relevante
primero:
•Horario de oper...
¿Por qué es relevante?
Ya en tu escritorio puedes ver todo lo no
esencial sobre este restaurante.
•Fotos exquisitas.
•Te h...
• Evita el keyhole browsing.
• No deberías necesitar una
lupa para navegar deste tu
teléfono
¿Por qué es relevante?
Hola Media Queries y
CSS3
In its essence a media
query consists of a
media type and an
expression to check
for certain con...
CSS3 & Media Queries
La ausencia de soporte
para @media queries es
de hecho el primer
@media query.
CSS3 & Media Queries
En tu CSS:
@media screen and (min-width:
480px) {
.content { float: left; }
.social_icons { display: ...
CSS3 & Media Queries
O en los encabezados de
tu sitio:
<link rel="stylesheet" href="this.css"
media="(min-width:
960px)">
CSS3&MediaQueries
Al restringir las reglas de CSS al
tamaño de la pantalla donde se
despliega podemos ajustar a la
medida ...
Breakpointsmáscomunes
¿CómodiseñamosparaRWD?
Simple:
Usa el Mobile First Approach y
favorece el Progressive
Enhancement en lugar del
tradicional...
MobileFirstApproach
MobileFirstApproach
Graceful Degradation
• Se enfoca en la construcción de la página web
para los buscadores más avanzados /
capaces.
• Se esp...
ProgressiveEnhancement
• Se enfoca en el contenido. ( no los
navegadores )
• Piensa del contenido hacia afuera. ( M&M maní...
ProgressiveEnhancement
Progressive Enhancement consiste de los
siguientes fundamentos:
•El contenido básico y su funcional...
Progressive
Enhancement
Beneficios:
•Accesibilidad: Las páginas con PE
son más accesibles por su naturaleza.
•SEO: Ya que ...
Juguetes nuevos para
tu cajón
http://lab.maltewassermann.com/viewport-
resizer/
Juguetes nuevos para
tu cajón
http://respondr.webhoard.net/
Juguetes nuevos para
tu cajón
http://designmodo.com/responsive-test/
Media Query DebuggerMedia Query Debugger
http://johanbrook.com/design/chttp://johanbrook.com/design/c
ss/debugging-css-med...
peroy… ¿quéhaydenuevo?
RWD ha estado
alrededor por un
buen tiempo, pero no
ha pasado de moda.
peroy… ¿quéhaydenuevo?
Éstos son algunos de los
desarrollos nuevos
favoritos en Diseño Web
Responsivo
peroy… ¿quéhaydenuevo?
Zen & Zenstrap
Bootstrap
Zurb-Foundation
Boilerplate
Omega
peroy… ¿quéhaydenuevo?
La etiqueta <picture> y
por lo tanto el módulo
Picture.
Vs: adaptive-image, ais cs_adaptive_image,
...
peroy… ¿quéhaydenuevo?
FlexSlider
Como views_slideshow pero
responsivo y con capacidad de
responder al taco.
Y soporta el ...
peroy… ¿quéhaydenuevo?
• fit_text
• fitvids
• responsive_embeds
• backstretch *
Parallevar
1. HTML5 Boilerplate (http://h5bp.com)
2. Design Sketch Sheets
(http://jeremypalford.com/arch-
journal/responsi...
Parallevar
6. 320 and up
(http://stuffandnonsense.co.uk/projects/3
20andup)
7. Gridless
(http://thatcoolguy.github.com/gri...
Tarea
• http://www.w3.org/TR/css3-mediaqueries.
• https://developer.mozilla.org/en/CSS/Media_q
ueries
• https://github.com...
Créditos
•Mi primera clase de RWD
fue en un taller impartido por
Four Kitchens
•Revisen sus programas de
entrenamiento.
•h...
Rob Montero
• dgo.to/@rmontero
• @rmonteroo
• /in/rmontero
Email: rob@achieve.la
¿Preguntas o Comentarios?
¡Los esperamos!
launch withlaunch with
confidenceconfidence
¡GRACIAS!
Demo Time!
We will be demoing a couple of
examples, one will be plain HTML5 +
CSS using h5bp and the other will be
similar...
Próxima SlideShare
Cargando en…5
×

Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

451 visualizaciones

Publicado el

Aprende sobre las últimas tendencias en diseño responsivo usando Drupal. Diseña tu sitio web en minutos usando uno de los temas recomendados.

Publicado en: Ingeniería
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?

  1. 1. Launch withLaunch with confidenceconfidence DiseñoDiseño ResponsivoResponsivo¿Qué hay de nuevo?¿Qué hay de nuevo? Twitter: @rmonterooTwitter: @rmonteroo #DrupalCampMX #RWD#DrupalCampMX #RWD
  2. 2. RobMontero- AchieveInternet 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.
  3. 3. 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
  4. 4. ¿Qué¿Qué eses RWD?RWD?
  5. 5. DiseñoWebResponsivo 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
  6. 6. ¿Quéesel RWD?
  7. 7. ¿Quéesel RWD?
  8. 8. http://mattkersley.com/responsive/? http://sony.com
  9. 9. ¿Quéesel¿Quéesel 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}
  10. 10. SimonCollison
  11. 11. FoodSense
  12. 12. CleanAirCommuteChallenge
  13. 13. FlexSlider
  14. 14. ¿Quéesel RWD? Más ejemplos •http://foodsense.is •http://earthhour.fr •http://w3conf.org •http://mediaqueri.es •http://fourkitchens.com •http://achieveinternet.com
  15. 15. Lagranpregunta ¿Construyo el tema (theme) HTML + CSS + JS a mano - O - -uso un tema contrib?
  16. 16. Thebigquestion
  17. 17. ¡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
  18. 18. ¿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
  19. 19. ¿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 )
  20. 20. ¿Por qué es relevante? Se trata de la gente, no de los
  21. 21. ¿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
  22. 22. ¿Por qué es relevante? El futuro
  23. 23. ¿Por qué es relevante? Es muy conven iente
  24. 24. ¿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.
  25. 25. ¿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…
  26. 26. • Evita el keyhole browsing. • No deberías necesitar una lupa para navegar deste tu teléfono ¿Por qué es relevante?
  27. 27. 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.
  28. 28. CSS3 & Media Queries La ausencia de soporte para @media queries es de hecho el primer @media query.
  29. 29. CSS3 & Media Queries En tu CSS: @media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // y así consecutivamente... }
  30. 30. CSS3 & Media Queries O en los encabezados de tu sitio: <link rel="stylesheet" href="this.css" media="(min-width: 960px)">
  31. 31. CSS3&MediaQueries 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.
  32. 32. Breakpointsmáscomunes
  33. 33. ¿CómodiseñamosparaRWD? Simple: Usa el Mobile First Approach y favorece el Progressive Enhancement en lugar del tradicional Graceful Degradation
  34. 34. MobileFirstApproach
  35. 35. MobileFirstApproach
  36. 36. 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 )
  37. 37. ProgressiveEnhancement • 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
  38. 38. ProgressiveEnhancement 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.
  39. 39. 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
  40. 40. Juguetes nuevos para tu cajón http://lab.maltewassermann.com/viewport- resizer/
  41. 41. Juguetes nuevos para tu cajón http://respondr.webhoard.net/
  42. 42. Juguetes nuevos para tu cajón http://designmodo.com/responsive-test/
  43. 43. Media Query DebuggerMedia Query Debugger http://johanbrook.com/design/chttp://johanbrook.com/design/c ss/debugging-css-media-ss/debugging-css-media- queriesqueries
  44. 44. peroy… ¿quéhaydenuevo? RWD ha estado alrededor por un buen tiempo, pero no ha pasado de moda.
  45. 45. peroy… ¿quéhaydenuevo? Éstos son algunos de los desarrollos nuevos favoritos en Diseño Web Responsivo
  46. 46. peroy… ¿quéhaydenuevo? Zen & Zenstrap Bootstrap Zurb-Foundation Boilerplate Omega
  47. 47. peroy… ¿quéhaydenuevo? La etiqueta <picture> y por lo tanto el módulo Picture. Vs: adaptive-image, ais cs_adaptive_image, responsive_images and resp_img, rwdimages
  48. 48. peroy… ¿quéhaydenuevo? FlexSlider Como views_slideshow pero responsivo y con capacidad de responder al taco. Y soporta el módulo picture, además
  49. 49. peroy… ¿quéhaydenuevo? • fit_text • fitvids • responsive_embeds • backstretch *
  50. 50. Parallevar 1. HTML5 Boilerplate (http://h5bp.com) 2. Design Sketch Sheets (http://jeremypalford.com/arch- journal/responsive-web-design-sketch- sheets) 3. GoldenGridSystem.com 4. Foldy960 (http://github.com/davatron5000/Foldy960) 5. FitText (http://fittextjs.com/)
  51. 51. Parallevar 6. 320 and up (http://stuffandnonsense.co.uk/projects/3 20andup) 7. Gridless (http://thatcoolguy.github.com/gridless- boilerplate) 8. Skeleton (http://www.getskeleton.com/) 9. ResizeMyBrowser.com 10.Responsive Design Testing (http://mattkersley.com/responsive)
  52. 52. Tarea • http://www.w3.org/TR/css3-mediaqueries. • https://developer.mozilla.org/en/CSS/Media_q ueries • 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
  53. 53. Créditos •Mi primera clase de RWD fue en un taller impartido por Four Kitchens •Revisen sus programas de entrenamiento. •http://fourkitchens.com
  54. 54. Rob Montero • dgo.to/@rmontero • @rmonteroo • /in/rmontero Email: rob@achieve.la ¿Preguntas o Comentarios?
  55. 55. ¡Los esperamos!
  56. 56. launch withlaunch with confidenceconfidence ¡GRACIAS!
  57. 57. 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

×