SlideShare una empresa de Scribd logo
1 de 24
Creando una plantilla 
de forma fácil
Tito Alvarez 
• 14 años de experiencia en programación PHP 
• 8 años de experiencia en Joomla! 
• Backender / Frontender / Plantillas comerciales / 
Integrador / SysAdmin / Limpieza y otras cosas 
• Experiencia en banca, pre-venta de software, 
programador principal en Joomlashack 
• Actualmente Programador Senior en redCOMPONENT
Agenda 
• Conceptos generales de plantillas 
• Proceso normal de creación de una plantilla 
• Frameworks para plantillas 
• Crear la plantilla con Wright 
• Preguntas y respuestas
¿Qué es una plantilla Joomla? 
• Conjunto de archivos 
PHP, CSS e imágenes 
• Permite cambiar 
completamente la 
visualización del sitio 
web 
• Plantillas comerciales y 
gratis
Photo Credit: https://www.flickr.com/photos/49503019876@N01/7314722180/ 
responsive 
compatibilidad con dispositivos
Archivos necesarios 
• index.php 
• templateDetails.xml 
• less 
• css 
• images 
• javascript
Wireframes Diseño Análisis 
Pruebas 
HTML + CSS + 
PHP 
proceso de creación 
de una plantilla
Photo Credit: https://www.flickr.com/photos/33472412@N00/5098835256/ 
Wireframes 
mapa general de la página
1. Crear el archivo index.php 
con la visualización HTML básica y las 
llamadas a componentes y módulos
2. Crear los archivos 
CSS/LESS 
imágenes y otros recursos
3. Crear el archivo templateDetails.xml 
información básica de la plantilla
Photo Credit 
4. Instalar la plantilla 
creando un archivo zip e instalando, o 
usando la función descubrir
5. Seleccionar la plantilla 
en el manejador de plantillas de Joomla!
Frameworks para plantillas 
• Incluyen una plantilla 
base para poder crear 
una nueva 
• Incorporan funciones 
comunes Joomla! que 
acortan el camino 
• Permiten fácil 
personalización y crear 
funciones avanzadas
Frameworks populares 
• T3, de Joomlart 
t3-framework.org 
• Gantry, de RocketTheme 
www.gantry-framework.com 
• Warp, de Yootheme 
www.yootheme.com/themes/warp-framework 
• Wright, de Joomlashack 
wright.joomlashack.com
Creando nuestra plantilla 
con Wright
Photo Credit 
1. Descargar Wright 
wright.joomlashack.com
2. Instalar Wright 
desde el instalador de Joomla
3. Ir al gestor de plantillas 
y listar las plantillas únicas
Photo Credit 
4. Entrar a la plantilla 
y activar la compilación less
Photo Credit 
4. Editar los archivos 
de la plantilla Wright
Photo Credit 
5. Editar el archivo variables-generic.less 
para los cambios más globales de la plantilla
Photo Credit 
6. Agregar reglas adicionales de estilo 
template.less
Gracias!

Más contenido relacionado

La actualidad más candente

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Creación De Una Red De Blogs No Penalizados
Creación De Una Red De Blogs No PenalizadosCreación De Una Red De Blogs No Penalizados
Creación De Una Red De Blogs No PenalizadosSemrush
 
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]Asociación Webmasters Cantabria
 
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]Asociación Webmasters Cantabria
 
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...Asociación Webmasters Cantabria
 
Cómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseñoCómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseñoJuan Hernando García
 
VI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temasVI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temasJuan Hernando García
 
Wpo para wordpress josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress   josé antonio esteve sáez - meetup wp murciaWpo para wordpress   josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress josé antonio esteve sáez - meetup wp murciaJose Antonio Esteve Saez
 
Modifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseModifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseJuan Hernando García
 

La actualidad más candente (15)

Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Creación De Una Red De Blogs No Penalizados
Creación De Una Red De Blogs No PenalizadosCreación De Una Red De Blogs No Penalizados
Creación De Una Red De Blogs No Penalizados
 
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
Aplicar SEO a un desarrollo WordPress [Stephen De Winter - @estudiodos]
 
[Run Reloaded] Integrando Silverlight 3 con Sharepoint 2010 (Fabián Imaz + M...
[Run Reloaded]  Integrando Silverlight 3 con Sharepoint 2010 (Fabián Imaz + M...[Run Reloaded]  Integrando Silverlight 3 con Sharepoint 2010 (Fabián Imaz + M...
[Run Reloaded] Integrando Silverlight 3 con Sharepoint 2010 (Fabián Imaz + M...
 
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
Mejora el rendimiento de tu WordPress [Javier Casares - @JavierCasares]
 
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
 
Iniciación al Desarrollo de Módulos Joomla
Iniciación al Desarrollo de Módulos JoomlaIniciación al Desarrollo de Módulos Joomla
Iniciación al Desarrollo de Módulos Joomla
 
Cómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseñoCómo crear un theme en 2017 desde un diseño
Cómo crear un theme en 2017 desde un diseño
 
Protostar como framework
Protostar como frameworkProtostar como framework
Protostar como framework
 
VI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temasVI Meetup WordPress Pontevedra - Creación y modificación de temas
VI Meetup WordPress Pontevedra - Creación y modificación de temas
 
Wpo para wordpress josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress   josé antonio esteve sáez - meetup wp murciaWpo para wordpress   josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress josé antonio esteve sáez - meetup wp murcia
 
Meetup WordPress Lugo
Meetup WordPress LugoMeetup WordPress Lugo
Meetup WordPress Lugo
 
Bootstrap 3.
Bootstrap 3.Bootstrap 3.
Bootstrap 3.
 
Congreso web
Congreso webCongreso web
Congreso web
 
Modifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP OurenseModifica y crea temas de WordPress - Meetup WP Ourense
Modifica y crea temas de WordPress - Meetup WP Ourense
 

Destacado

redCORE: an abstracted development layer for Joomla! - JWC14
redCORE: an abstracted development layer for Joomla! - JWC14redCORE: an abstracted development layer for Joomla! - JWC14
redCORE: an abstracted development layer for Joomla! - JWC14Tito Alvarez
 
Estrategias de Comunicación Digital
Estrategias de Comunicación DigitalEstrategias de Comunicación Digital
Estrategias de Comunicación DigitalTito Alvarez
 
Crossmedia ist Alltag
Crossmedia ist AlltagCrossmedia ist Alltag
Crossmedia ist AlltagC H
 
Hamburg Marathon - Die Crossmedia-Strategie
Hamburg Marathon - Die Crossmedia-StrategieHamburg Marathon - Die Crossmedia-Strategie
Hamburg Marathon - Die Crossmedia-StrategieC H
 
Media Port 2012, Session 3: Die digitale Nachrichten-Kooperative
Media Port 2012, Session 3: Die digitale Nachrichten-KooperativeMedia Port 2012, Session 3: Die digitale Nachrichten-Kooperative
Media Port 2012, Session 3: Die digitale Nachrichten-KooperativeWAN-IFRA
 
Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...
Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...
Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...Börsenverein des Deutschen Buchhandels
 
Gruppeoppgave bildebokmattematikk
Gruppeoppgave bildebokmattematikkGruppeoppgave bildebokmattematikk
Gruppeoppgave bildebokmattematikkMrOle
 
Tag der Legenden - Crossmedia Konzept
Tag der Legenden - Crossmedia KonzeptTag der Legenden - Crossmedia Konzept
Tag der Legenden - Crossmedia KonzeptC H
 
TALLER N. 10- MODELO EN CAPAS ISO
TALLER N. 10- MODELO EN CAPAS  ISOTALLER N. 10- MODELO EN CAPAS  ISO
TALLER N. 10- MODELO EN CAPAS ISOmario23
 
Modelos De La ComunicacióN En Internet
Modelos De La ComunicacióN En InternetModelos De La ComunicacióN En Internet
Modelos De La ComunicacióN En Internetlettizya
 

Destacado (16)

redCORE: an abstracted development layer for Joomla! - JWC14
redCORE: an abstracted development layer for Joomla! - JWC14redCORE: an abstracted development layer for Joomla! - JWC14
redCORE: an abstracted development layer for Joomla! - JWC14
 
Estrategias de Comunicación Digital
Estrategias de Comunicación DigitalEstrategias de Comunicación Digital
Estrategias de Comunicación Digital
 
Biología
BiologíaBiología
Biología
 
Crossmedia ist Alltag
Crossmedia ist AlltagCrossmedia ist Alltag
Crossmedia ist Alltag
 
SoSe 2013 | Basisinformationstechnologie II - 05_Algorithmen der Bildverarbei...
SoSe 2013 | Basisinformationstechnologie II - 05_Algorithmen der Bildverarbei...SoSe 2013 | Basisinformationstechnologie II - 05_Algorithmen der Bildverarbei...
SoSe 2013 | Basisinformationstechnologie II - 05_Algorithmen der Bildverarbei...
 
Hamburg Marathon - Die Crossmedia-Strategie
Hamburg Marathon - Die Crossmedia-StrategieHamburg Marathon - Die Crossmedia-Strategie
Hamburg Marathon - Die Crossmedia-Strategie
 
Media Port 2012, Session 3: Die digitale Nachrichten-Kooperative
Media Port 2012, Session 3: Die digitale Nachrichten-KooperativeMedia Port 2012, Session 3: Die digitale Nachrichten-Kooperative
Media Port 2012, Session 3: Die digitale Nachrichten-Kooperative
 
Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...
Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...
Jan Hoffmann: Was verkaufen wir in Zukunft? Kein Bock auf Seife, Schokolade u...
 
Gruppeoppgave bildebokmattematikk
Gruppeoppgave bildebokmattematikkGruppeoppgave bildebokmattematikk
Gruppeoppgave bildebokmattematikk
 
Cientifica tecnologica
Cientifica tecnologicaCientifica tecnologica
Cientifica tecnologica
 
Tag der Legenden - Crossmedia Konzept
Tag der Legenden - Crossmedia KonzeptTag der Legenden - Crossmedia Konzept
Tag der Legenden - Crossmedia Konzept
 
Leioa
LeioaLeioa
Leioa
 
Experimentos
ExperimentosExperimentos
Experimentos
 
TALLER N. 10- MODELO EN CAPAS ISO
TALLER N. 10- MODELO EN CAPAS  ISOTALLER N. 10- MODELO EN CAPAS  ISO
TALLER N. 10- MODELO EN CAPAS ISO
 
Modelos De La ComunicacióN En Internet
Modelos De La ComunicacióN En InternetModelos De La ComunicacióN En Internet
Modelos De La ComunicacióN En Internet
 
Matemáticas
MatemáticasMatemáticas
Matemáticas
 

Similar a Creando una plantilla Joomla! de forma fácil

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.0Juan Gallardo Ortiz
 
Optimizando Sitios Web
Optimizando Sitios WebOptimizando Sitios Web
Optimizando Sitios WebGrupo Mediabox
 
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.1Julio Camarero
 
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 themesAntonio Torres
 
Silex para aplicaciones web MVC
Silex para aplicaciones web MVCSilex para aplicaciones web MVC
Silex para aplicaciones web MVCAsier Marqués
 
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endIntroducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endJames Wilson
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!SergioIglesiasNET
 
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...SergioIglesiasNET
 
Ejemplos reales TPW
Ejemplos reales TPWEjemplos reales TPW
Ejemplos reales TPWYesenia_1226
 
Manual plantillas joomla_15
Manual plantillas joomla_15Manual plantillas joomla_15
Manual plantillas joomla_15Dideco
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!SergioIglesiasNET
 

Similar a Creando una plantilla Joomla! de forma fácil (20)

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
 
Curso joomla-3
Curso joomla-3Curso joomla-3
Curso joomla-3
 
Optimizando Sitios Web
Optimizando Sitios WebOptimizando Sitios Web
Optimizando Sitios Web
 
Mejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios webMejores practicas para acelerar sitios web
Mejores practicas para acelerar sitios web
 
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
 
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
 
Plantillas web
Plantillas webPlantillas web
Plantillas web
 
Silex para aplicaciones web MVC
Silex para aplicaciones web MVCSilex para aplicaciones web MVC
Silex para aplicaciones web MVC
 
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endIntroducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
 
HTML5
HTML5HTML5
HTML5
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!
 
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...
 
Ejemplos reales TPW
Ejemplos reales TPWEjemplos reales TPW
Ejemplos reales TPW
 
CMS-JOOMLA
CMS-JOOMLACMS-JOOMLA
CMS-JOOMLA
 
Jefferson - Diseño Web II - Presentación Curso
Jefferson - Diseño Web II - Presentación CursoJefferson - Diseño Web II - Presentación Curso
Jefferson - Diseño Web II - Presentación Curso
 
Legislacion 2
Legislacion 2Legislacion 2
Legislacion 2
 
Manual plantillas joomla_15
Manual plantillas joomla_15Manual plantillas joomla_15
Manual plantillas joomla_15
 
Joomla
JoomlaJoomla
Joomla
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!
 
Html5
Html5Html5
Html5
 

Último

Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionarmando_cardenas
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Opentix
 
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOSelenaCoronadoHuaman
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfmasogeis
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3AlexysCaytanoMelndez1
 
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...ITeC Instituto Tecnología Construcción
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTEREMMAFLORESCARMONA
 

Último (7)

Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacion
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200
 
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdf
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
 
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTER
 

Creando una plantilla Joomla! de forma fácil