Desarrollo plantillas Joomla

DESARROLLO DE PLANTILLAS JOOMLA!
Sergio Iglesias

DESARROLLO
PLANTILLAS
JOOMLA!
El JoomlaDay™ Sevilla es un evento
sobre el CMS Joomla!®
Expertos en Joomla! de primera fila
impartirán charlas.
El programa del evento pretende
cubrir buena parte de los distintos
aspectos que implica la creación de
sitios web con Joomla!
Es un evento comunitario, creado
por la comunidad y para la
comunidad.
joomladaysevilla.es
by @sergiois

Soy Sergio Iglesias
Front & Backend Developer / Consultor Joomla!
Puedes seguirme en @sergiois
y en www.sergioiglesias.net/blog
HOLA!!
sergioiglesias.net

TRABAJO EN...
Complusoft
Responsable de
Proyectos Web
Joomla!
Formador
complusoft.es
SergioIglesiasNET
Blog sobre Joomla! y
Marketing Online
Artesanal
Cursos Online
sergioiglesias.net
ManagementFront
Extensión Joomla! para
gestión de artículos
desde Front
Plantilla Dashboard
managementfront.com
sergioiglesias.net

INTRODUCCIÓN
Estructura de archivos de
una plantilla
templateDetails.xml
API - JDoc
Ejemplo de template
DE QUÉ VAMOS A HABLAR EN ESTA CHARLA
TIPS DESARROLLO
Colección de snippets o
trozos de código
interesantes para el
desarrollo de un template
personalizado con
ejemplos prácticos.
sergioiglesias.net

HERRAMIENTAS
Extensiones Firefox
Responsive Web Desing
Velocidad de carga
CheatSheets
DE QUÉ VAMOS A HABLAR EN ESTA CHARLA
REGALO: CURSO GRATIS
Información sobre cómo
realizar un curso online
sobre desarrollo de
plantillas Joomla!
completamente GRATIS.
sergioiglesias.net

1.
INTRODUCCIÓN
AL DESARROLLO
Conceptos
básicos para el
desarrollo

Estructura template
Archivos y directorios que forman la estructura de un
template para Joomla!
sergioiglesias.net

EXPLICACIÓN DE LOS FICHEROS DE UN TEMPLATE
index.html
Añade seguridad a las carpetas.
Es un fichero vacío..
index.php
Contiene el HTML que define la
estructura de la plantilla y las
llamadas PHP a la API de
Joomla! (punto de entrada al
template).
template_thumbnail.png
Imagen en miniatura de la
plantilla para poder ver desde el
panel de administración el
diseño que tiene.
templateDetails.xml
Contiene información necesaria
para la correcta instalación de
la plantilla. Define los campos
de configuración.
html
Contiene vistas personalizadas
de extensiones para adaptarlas
al diseño del template (técnica
de template overrides).
sergioiglesias.net

EXPLICACIÓN DE LOS FICHEROS DE UN TEMPLATE
nombre_directorio
Para organizar estilos,
imágenes y funcionalidad:
▸ css
▸ js
▸ images
error.php
Fichero para controlar los
errores:
▸ 404 (página no
encontrada)
component.php
Para mostrar solo el contenido
de un componente (en
ventanas modales por ejemplo).
html/modules.php
Para crear nuevos estilos de
módulo o sobre-escribir los ya
existentes.
html/pagination.php
Para modificar la forma en que
se muestra y funciona la
paginación en Joomla!.
sergioiglesias.net

templateDetails.xml
Fichero imprescindible para la instalación del resto de
ficheros y los campos de configuración del template.
sergioiglesias.net

SECCIONES EN LAS QUE ESTÁ DIVIDIDO
▸ Datos
▸ Archivos
▸ Posiciones
▸ Idiomas
▸ Parámetros / Campos
Los campos de configuración de esta última sección se
almacenan en el fichero params.ini
sergioiglesias.net

templateDetails.xml > Datos
sergioiglesias.net

templateDetails.xml > Archivos
sergioiglesias.net

templateDetails.xml > Posiciones
sergioiglesias.net

templateDetails.xml > Idiomas
sergioiglesias.net

templateDetails.xml > Campos de configuración
sergioiglesias.net

API JDOC
Código proporcionado por el Framework de Joomla!
para mostrar el contenido de las extensiones.
sergioiglesias.net

PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
<jdoc:include type=”head”/>
▸ Va dentro de la cabecera HTML (<head>).
▸ Muestra el title, metatags, feed y js.
$this->template
▸ Obtenemos el nombre de la carpeta que contiene nuestra
plantilla.
▸ Uso: para cargar css, favicon, js y cualquier otro archivo.
$app = JFactory::getApplication();
$app->getCfg('sitename');
▸ Obtenemos el nombre del sitio.
sergioiglesias.net

<jdoc:inclue type=”modules” name=”posicion”
style=”estilo”/>
▸ Indica la carga de un módulo de una manera específica:
▹ name: posiciones definidas en el fichero
templateDetails.xml
▹ style: table (tabla vertical = columna), horz (tabla
horizontal = fila), xhtml (divs), rounde (divs
anidados), raw (sin contenedor).
▹ También se pueden crear estilos propios.
sergioiglesias.net

<jdoc:include type=”component”/>
▸ Cargamos el contenido principal del sitio (contenido de
componentes).
if($this->countModules('nombre_posicion')){}
▸ Condicional para saber si hay algún módulo en una
posición determinada.
$this->baseurl
▸ Contiene la dirección base de nuestro sitio.
sergioiglesias.net

$this->params->get(‘nombre_campo’);
▸ Muestra el valor del campo de configuración (de
templateDetails.xml)
$doc = JFactory::getDocument();
▸ Para cargar estilos, javascript y otras etiquetas.
▸ $doc->addStyleSheet($url); más info
▸ $doc->addStyleDeclaration($css); más info
▸ $doc->addScript($url); más info
▸ $doc->addScriptDeclaration($js); más info
▸ $doc->setTitle(‘Título página’); más info
▸ $doc->setGenerator(‘Información’); más info
▸ $doc->addMetaTag(‘etiqueta’, ’descripción’); más info
▸ $doc->addCustomTag(‘<meta>’); más info
sergioiglesias.net

Ejemplo de Template
Ejemplo completo de un template a partir de todos los
ficheros que lo forman.
sergioiglesias.net

2.
TIPS
TEMPLATES
Códigos de
interés para el
desarrollo de
plantillas

códigos: snippets
Trozos de código de interés que facilitan el desarrollo
de plantillas Joomla!
sergioiglesias.net

estilos de plantilla
Diferentes configuraciones de plantilla que podemos
asociar a uno o varios ítem de menú.
sergioiglesias.net

posiciones de plantilla
Crear un nueva posición en una plantilla Joomla! para
poder mostrar el contenido de un módulo.
sergioiglesias.net

estilos de módulos
Diferentes formas de tratar y mostrar el contenido de
un módulo.
sergioiglesias.net

clases en módulos
Modificar visualización a través de una clase, la cual
tiene que estar definida en la hoja de estilos.
sergioiglesias.net

personalizar error404
Mostrar el contenido de un ítem de menú como error
404 (artículo o cualquier componente).
sergioiglesias.net

template override
Cambiar la forma de mostrar el contenido nativo de
una determinada extensión..
sergioiglesias.net

presentaciones alternativas
Otra forma de mostrar el contenido de una extensión
de una forma diferente a la nativa.
sergioiglesias.net

3.
HERRAMIENTAS
DE AYUDA
Herramientas
que nos ayudan
en el desarrollo
de plantillas

extensiones firefox
Extensiones que nos ayudan en el desarrollo si
usamos este navegador.
sergioiglesias.net

EXTENSIONES FIREFOX
▸ Firebug:
https://addons.mozilla.org/es/firefox/addon/firebug/
▸ HTML Validator: https://addons.mozilla.org/es/firefox/addon/html-
validator/
▸ Web Developer:
https://addons.mozilla.org/es/firefox/addon/web-developer/
▸ User Agent Switcher:
https://addons.mozilla.org/es/firefox/addon/user-agent-switcher
sergioiglesias.net

responsive web design
Herramientas online muy útiles para visualizar
nuestras plantillas en diferentes resoluciones.
sergioiglesias.net

RESPONSIVE WEB DESIGN
▸ ScreenFly by QuirkTools:
http://quirktools.com/screenfly/
▸ Responsive Design Testing: http://mattkersley.
com/responsive/
▸ ScreenQueries:
http://screenqueri.es/
▸ Responsinator:
http://www.responsinator.com
sergioiglesias.net

velocidad de carga
Herramientas online para analizar el tiempo de carga
de una página web y poder optimizarla.
sergioiglesias.net

VELOCIDAD DE CARGA
▸ Pingdom:
http://tools.pingdom.com/fpt/
▸ GTmetrix:
http://gtmetrix.com/
▸ PageSpeed Insights: https://developers.google.
com/speed/pagespeed/insights
▸ Web Page Analyzer: http://www.websiteoptimization.
com/services/analyze/
sergioiglesias.net

cheatsheets
Chuletas en un PDF para que tengas las principales
características de plantillas Joomla!
sergioiglesias.net

CHEATSHEETS
▸ Para plantillas Joomla! 1.5: www.younic.de/wp-
content/uploads/Joomla15_Basic_Template_Cheatshee
t.pdf
▸ Para plantillas Joomla! 2.5: www.avadesigner.
com/dl/cheat-sheet/Joomla-Sheet-Cheat-Templates-2.5.
pdf
▸ Para plantillas Joomla! 3.x: www.joomlack.fr/en/joomla-
documentations-tutorials/joomla-3-x-templates-
cheatsheet
sergioiglesias.net

4.
REGALO
CURSO GRATIS
Curso Online
Desarrollo de
Plantillas
Joomla!

CURSO ONLINE DESARROLLO PLANTILLAS JOOMLA!
Curso online con el que aprenderás a desarrollar tu propia
plantilla Joomla! de forma personalizada:
▸ Más de 3 horas de vídeo.
▸ Presentaciones para seguir los vídeos.
▸ ZIP con plantilla demo.
▸ Enlaces a manuales e información de interés.
▸ Certificado de participación.
sergioiglesias.net

LOS PASOS A
SEGUIR
REGÍSTRATE EN MI NEWSLETTER
RECIBE TUS CLAVES DE ACCESO
MÁS INFORMACIÓN

MANAGEMENTFRONT - 25% de DESCUENTO
www.managementfront.com
Extensión y plantilla de tipo Dashboard para gestionar
artículos desde el Front:
▸ Gestión artículos desde el Front.
▸ Plantilla responsive de tipo Dashboard..
▸ ACL nativo de Joomla!.
▸ Descuento en todos los planes.
▸ El cupón solo dura hasta el Viernes 2 de Octubre 2015.
sergioiglesias.net

LOS PASOS A
SEGUIR
ENTRA EN LA WEB Y REGÍSTRATE
www.managementfront.com
INTRODUCE EL CUPÓN
JD15SEV
Y TENDRÁS EL 25% DE DESCUENTO
(en cualquier plan)

GRACIAS!
alguna pregunta?
Puedes encontrarme en @sergiois &
info@sergioiglesias.net
sergioiglesias.net

Desarrollo plantillas Joomla

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à Desarrollo plantillas Joomla

Similaire à Desarrollo plantillas Joomla (20)

Plus de SergioIglesiasNET

Plus de SergioIglesiasNET (6)

Dernier

Dernier (6)

Desarrollo plantillas Joomla