2. 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
3. Soy Sergio Iglesias
Front & Backend Developer / Consultor Joomla!
Puedes seguirme en @sergiois
y en www.sergioiglesias.net/blog
HOLA!!
sergioiglesias.net
4. 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
5. 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
6. 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
10. 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
11. 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
13. 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
19. API JDOC
Código proporcionado por el Framework de Joomla!
para mostrar el contenido de las extensiones.
sergioiglesias.net
20. 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
21. PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
<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
22. PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
<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
23. PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
$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
24. Ejemplo de Template
Ejemplo completo de un template a partir de todos los
ficheros que lo forman.
sergioiglesias.net
44. 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
47. 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
48. 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)