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.

2

Share

Download to read offline

Responsive en Drupal

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • myowndevil

    Jul. 25, 2015
  • gemalm

    May. 20, 2015

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.

Views

Total views

1,597

On Slideshare

0

From embeds

0

Number of embeds

760

Actions

Downloads

6

Shares

0

Comments

0

Likes

2

×