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.
Introducción 
Comprensivo al Drupal 
Front-end 
James Wilson
@jwilson3 
jwilson3.postach.io
• Templates. 
• HTML.tpl.php 
• Page.tpl.php 
• Hooks. 
• Themes. 
• Tips 
• clear cache 
• clear registry
Levanta la mano.
Drupal 8: Twig (.twig.html) 
HTML5 por defecto
Drupal 7: PHP Template (.tpl.php) 
XHTML por defecto
D8 D7
Conceptos
Conceptos 
“Don't hack core”
Conceptos 
“Don't hack core” 
“Don’t hack contrib”
Conceptos 
“Don't hack core” 
“Don’t hack contrib” 
Aplica a themes también.
Conceptos 
• Utilizar "Base themes” (temas de base). 
• Crear “Child themes” (sub-temas) para heredar 
funcionalidad, esti...
• Usa precaución con actualizaciones, que puedan 
romper tu sitio. 
• Revisar linea-por-linea los cambios (ejem. con GIT) ...
CSS
Herencia de hojas de estilo 
• el sistema 
• system.base.css 
• system.menus.css 
• system.messages.css 
• system.theme.cs...
mytheme.info
Aggregation
template.php
Override 
En vez de editar system.theme.css: 
cópielo a tu tema, agrégalo al *.info 
y editar. 
:)
Override 
Para editar un template que proviene del core o un 
módulo de contrib, cópielo a tu tema y editar.
Preprocess
Buscar un tema base 
• Popularidad ¿Cuántas instalaciones hay? 
• Estructura de los archivos ¿es ordenado? 
• ¿Grid system...
Buscar un tema base 
• http://drupal.org/project/themes 
• Twitter Bootstrap - Responsive 
• Omega 3 - Adaptive (960gs) 
•...
Herramientas
Editor 
Sublime Text :) o VIM
Control de versiones / diff 
git & GitHub, FileMerge, SourceTree
Design Test 
https://drupal.org/project/design
Preguntas
http://chapterthree.com/ 
blog/design-drupal-template- 
approach
Gracias! 
@jwilson3
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
Upcoming SlideShare
Loading in …5
×

Introducción comprensivo al theming para Drupal 7 Front-end

989 views

Published on

Una breve introducción a las estructuras, conceptos, teorias y buenas practicas que utilizamos para el Front End.

Published in: Technology
  • Be the first to comment

Introducción comprensivo al theming para Drupal 7 Front-end

  1. 1. Introducción Comprensivo al Drupal Front-end James Wilson
  2. 2. @jwilson3 jwilson3.postach.io
  3. 3. • Templates. • HTML.tpl.php • Page.tpl.php • Hooks. • Themes. • Tips • clear cache • clear registry
  4. 4. Levanta la mano.
  5. 5. Drupal 8: Twig (.twig.html) HTML5 por defecto
  6. 6. Drupal 7: PHP Template (.tpl.php) XHTML por defecto
  7. 7. D8 D7
  8. 8. Conceptos
  9. 9. Conceptos “Don't hack core”
  10. 10. Conceptos “Don't hack core” “Don’t hack contrib”
  11. 11. Conceptos “Don't hack core” “Don’t hack contrib” Aplica a themes también.
  12. 12. Conceptos • Utilizar "Base themes” (temas de base). • Crear “Child themes” (sub-temas) para heredar funcionalidad, estilos, etc.
  13. 13. • Usa precaución con actualizaciones, que puedan romper tu sitio. • Revisar linea-por-linea los cambios (ejem. con GIT) y las páginas que podrían estar afectadas.
  14. 14. CSS
  15. 15. Herencia de hojas de estilo • el sistema • system.base.css • system.menus.css • system.messages.css • system.theme.css • los módulos (core y contrib) • el tema ancestral (si se puede tener multiples!) • el tema de base. • el tema propio. • Herencia funciona, siempre y cuando los archivos no tengan el *mismo* nombre.
  16. 16. mytheme.info
  17. 17. Aggregation
  18. 18. template.php
  19. 19. Override En vez de editar system.theme.css: cópielo a tu tema, agrégalo al *.info y editar. :)
  20. 20. Override Para editar un template que proviene del core o un módulo de contrib, cópielo a tu tema y editar.
  21. 21. Preprocess
  22. 22. Buscar un tema base • Popularidad ¿Cuántas instalaciones hay? • Estructura de los archivos ¿es ordenado? • ¿Grid system / regions / layouts? • ¿Fijo / fluido / responsive / adaptive? • ¿SASS o solo CSS? • Calidad de CSS (SMACSS, BEM, CSS3) • Minimalistic o relleno con estilos vacíos. • La parte visual: ¿fácil de manipular? • Estructura DOM.
  23. 23. Buscar un tema base • http://drupal.org/project/themes • Twitter Bootstrap - Responsive • Omega 3 - Adaptive (960gs) • Omega 4 - Responsive (SASS) • Zen 5 - Responsive (SASS)
  24. 24. Herramientas
  25. 25. Editor Sublime Text :) o VIM
  26. 26. Control de versiones / diff git & GitHub, FileMerge, SourceTree
  27. 27. Design Test https://drupal.org/project/design
  28. 28. Preguntas
  29. 29. http://chapterthree.com/ blog/design-drupal-template- approach
  30. 30. Gracias! @jwilson3

×