SlideShare a Scribd company logo
1 of 38
Download to read offline
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, estilos, etc.
• 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.
CSS
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.
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 / 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.
Buscar un tema base 
• http://drupal.org/project/themes 
• Twitter Bootstrap - Responsive 
• Omega 3 - Adaptive (960gs) 
• Omega 4 - Responsive (SASS) 
• Zen 5 - Responsive (SASS)
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

More Related Content

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

Similar to Introducción comprensivo al theming para Drupal 7 Front-end (20)

Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1
 
Liferay themestraining lr6.2-es_v1.0
Liferay themestraining lr6.2-es_v1.0Liferay themestraining lr6.2-es_v1.0
Liferay themestraining lr6.2-es_v1.0
 
Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Sitio web (bootstrap 3)
Sitio web (bootstrap 3)
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
 
Sitio web (bootstrap4)
Sitio web (bootstrap4)Sitio web (bootstrap4)
Sitio web (bootstrap4)
 
Base de datos de WordPress ¿para qué? ¿cómo?
Base de datos de WordPress ¿para qué? ¿cómo?Base de datos de WordPress ¿para qué? ¿cómo?
Base de datos de WordPress ¿para qué? ¿cómo?
 
Internet Navegadores
Internet NavegadoresInternet Navegadores
Internet Navegadores
 
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demasdiseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demas
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Protostar como framework
Protostar como frameworkProtostar como framework
Protostar como framework
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
III Meetup WordPress Almería | Framework themes
III Meetup WordPress Almería | Framework themesIII Meetup WordPress Almería | Framework themes
III Meetup WordPress Almería | Framework themes
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Bootstrap 3.
Bootstrap 3.Bootstrap 3.
Bootstrap 3.
 
ABC theming en Drupal7
ABC theming en Drupal7ABC theming en Drupal7
ABC theming en Drupal7
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML5resumen.ppt
HTML5resumen.pptHTML5resumen.ppt
HTML5resumen.ppt
 

Recently uploaded

Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)JuanStevenTrujilloCh
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfKarinaCambero3
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificialcynserafini89
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armadob7fwtwtfxf
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1ivanapaterninar
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
Análisis de Artefactos Tecnologicos (3) (1).pdf
Análisis de Artefactos Tecnologicos  (3) (1).pdfAnálisis de Artefactos Tecnologicos  (3) (1).pdf
Análisis de Artefactos Tecnologicos (3) (1).pdfsharitcalderon04
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersIván López Martín
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDAVIDROBERTOGALLEGOS
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointValerioIvanDePazLoja
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúCEFERINO DELGADO FLORES
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar24roberto21
 

Recently uploaded (20)

Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdf
 
Presentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia ArtificialPresentación sobre la Inteligencia Artificial
Presentación sobre la Inteligencia Artificial
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armado
 
El camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVPEl camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVP
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1Guía de Registro slideshare paso a paso 1
Guía de Registro slideshare paso a paso 1
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
Análisis de Artefactos Tecnologicos (3) (1).pdf
Análisis de Artefactos Tecnologicos  (3) (1).pdfAnálisis de Artefactos Tecnologicos  (3) (1).pdf
Análisis de Artefactos Tecnologicos (3) (1).pdf
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 Testcontainers
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptx
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power Point
 
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del PerúRed Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
Red Dorsal Nacional de Fibra Óptica y Redes Regionales del Perú
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar
 

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