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.

Responsive en Drupal

1,488 views

Published on

Slides de la drupaleada de febrero en Origami, sobre responsive web design en Drupal.

Por Alberto Rojas de Manatí
Twitter:
@estudiomanati
@betovarg

www.estudiomanati.com

San José, Costa Rica.

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive en Drupal

  1. 1. Responsive en Drupal Drupaleada Origami Febrero 18
  2. 2. Alberto Rojas Co-fundador Manatí @betovarg @estudiomanati beto@estudiomanati.com www.estudiomanati.com
  3. 3. 15 D R U P A L C A M P C R 29 al 31 de julio Universidad de Costa Rica
  4. 4. Web Agency
  5. 5. Somos un montón de drupal nerds San José, Costa Rica
  6. 6. #manateam
  7. 7. Primero las máximas
  8. 8. • Menos es más. • Móvil primero. • Usuarios primero. • Contenido primero. • Piensen en rendimiento (interpretación + peso).
  9. 9. Stack de temas
  10. 10. Core Theme Subtheme
  11. 11. Discusión eterna: 
 ¿cuál es el mejor tema base?
  12. 12. • ¿Me sirve un tema base?
 • ¿Comprendo el stack?
 • ¿Voy a utilizar las características del tema base?
  13. 13. Componentes responsive en Drupal
  14. 14. Slideshows
  15. 15. No hagan Slideshows.
 http://shouldiuseacarousel.com/
  16. 16. Si no tienen otra opción… Flexslider
  17. 17. Layouts sin código: Display Suite
  18. 18. DS no es solo layouts: • Elimina divitis • Permite agregar elementos de html5 a fields • Permite agregar classes a fields • Diversos view modes por contenido
  19. 19. drupal.org/project/ds
  20. 20. Configuración de campos
  21. 21. Selección de layouts
  22. 22. Si no se quiere un módulo: • Cada field tiene un template:
 field-name-[field_name].tpl Por ejemplo: • Nombre del field: field_description • Template: field-name-field-description.tpl Documentación: • https://api.drupal.org/api/drupal/modules!field! theme!field.tpl.php/7
  23. 23. Views
  24. 24. Views permite modificar la salida del markup: • Views permite limpiar el markup de salida de campos. • Permite agregar clases personalizadas a envoltorios. • Facilita el uso con live preview en edición.
  25. 25. drupal.org/project/views
  26. 26. Selección de elemento de html
  27. 27. Class personalizados
  28. 28. Class para envoltorios y estilos
  29. 29. Responsive Images
  30. 30. Existen una gran cantidad de soluciones: • Picture • Client Side Adaptive Images • Borealis
  31. 31. Nuestro combo: • Client Side Adaptive Images • Retina Images • Image style quality • Imagefield focus
  32. 32. http://www.incae.edu/es/programas-maestria/mba.html
  33. 33. Retinafy: • Imágenes a 2X de lo requerido. • Compresión al 85%.
  34. 34. Normal 20 kb Retinafied 14 kb Retinafy first!
  35. 35. Otros módulos recomendados: • Fitvids, responsive video embed • Block class, class personalizado para bloques • Context, robusto sistema de posicionamiento de bloques
  36. 36. CSS
  37. 37. Recomendación Arquitectura de CSS: https://latinamerica2015.drupal.org/session/un-mejor-css- planeando-hoy-para-no-sufrir-en-el-futuro
  38. 38. • Todo nuestro CSS debe estar en un solo lugar: nuestro tema.
 • SASS! Si no sabés sass, no estás en nada: • compass • breakpoint • singularity
 • SMACSS
 Managing Complex Projects with Design Components - Drupalcon Austin 2014
 http://es.slideshare.net/JohnAlbin/managing-design
  39. 39. H4ck Tiem FOAD
  40. 40. El modo elegante
  41. 41. Hasta la vista baby!
  42. 42. Javascript: organized.
  43. 43. Javascript
  44. 44. Enquire
  45. 45. Modernizr, yepnope
  46. 46. INTERNET EXPLORER
  47. 47. • Conditional Stylesheets
 https://www.drupal.org/project/ conditional_styles • Feature detection,Yepnope.js • PIECSS 
 :S
  48. 48. Desacoplado drupal + angular
  49. 49. http://www.mercadoilegal.com
  50. 50. • Lectura recomendada
 
 DrupalCon Amsterdam: Headless roundup
 http://fourword.fourkitchens.com/article/drupalcon- amsterdam-headless-roundup
  51. 51. Consejos
  52. 52. • Usar SVGs. 
 Fallbacks CSS multiple backgrounds: http://callmenick.com/ 2014/04/02/svg-fallback-with-png/
 • Comprimir CSS y JS.
 Advanced CSS/JS Aggregation https://www.drupal.org/project/ advagg • No todo tiene que ser un módulo. • Performance first! • KISS
  53. 53. KISS
  54. 54. ¡Gracias! @betovarg @estudiomanati beto@estudiomanati.com www.estudiomanati.com

×