En esta edición de #JoomlaIO vamos a ver el desarrollo de plantillas para Joomla! en sus diferentes versiones: desde la versión 1.5 hasta la versión 3.0
A través de una presentación iremos viendo los siguientes puntos:
- Qué es una plantilla
- Estructura básica de archivos
- templateDetails.xml
- API de Joomla!
- Templates Overrides
- Ejemplo: index.php + css + params
- Diferencias entre las versiones
- Frameworks de desarrollo
- Herramientas de ayuda
Una vez finalizado este hangout tendremos las nociones básicas para comenzar a desarrollar nuestra plantilla para Joomla!
2. #JoomlaIO
Desarrollo de Plantillas
(1.5, 1.6, 1.7, 2.5, 3.0)
Sergio Iglesias Sánchez
www.sergioiglesias.net | twitter.com/sergiois
Trabajo en: Complusoft Pertenezco a: OSIberia
● www.complusot.es ● www.osiberia.es
● twitter.com/complusoft ● twitter.com/osiberia
3. ÍNDICE DEL CONTENIDO
● Qué es una plantilla
● Estructura básica de archivos
● templateDetails.xml
● API Joomla!
● Templates Overrides
● Ejemplo: index.php + css + params
● Diferencias entre versiones
● Frameworks de desarrollo
● Herramientas de ayuda
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
4. QUÉ ES UNA PLANTILLA
QUÉ ES UNA PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
5. QUÉ ES UNA PLANTILLA
● Es la base de la aplicación de entrega de contenidos.
● Formada por diferentes archivos que controlan la estructura y el
diseño de la página y de sus contenidos.
● Ventajas:
● Proporciona una separación entre la estructura, el contenido y el estilo.
● HTML/XHML/HTML5 → estructura
● DB (MySQL, SQL Server...) → contenido
● CSS → estilo
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
6. ESTRUCTURA BÁSICA DE ARCHIVOS
ESTRUCTURA BÁSICA DE ARCHIVOS
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
7. ESTRUCTURA BÁSICA DE ARCHIVOS
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
8. ESTRUCTURA BÁSICA DE ARCHIVOS
● 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).
● params.ini: guarda los parámetros personalizables desde el admin.
● template_thumbnail.png: imagen miniatura de la plantilla.
● template_preview: a partir de 1.7. Imagen un poco más grande.
● css: carpeta con los archivos .css que necesita la plantilla.
● template.css: archivo principal con los estilos.
● images: carpeta con las imágenes utilizadas en la plantilla (y css).
● html: contiene vistas personalizadas de extensiones (técnica de
template overrides).
● templateDetails.xml: contiene información necesaria para la correcta
instalación de la plantilla. Define los parámetros personalizables.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
10. TEMPLATEDETAILS.XML
● Imprescindible para que la plantilla sea reconocida por el admin.
● Se utiliza como instalador de la plantilla.
● Todo lo que no esté definido en él, no se instala.
● Datos divididos en 4 partes:
● Datos.
● Archivos.
● Posiciones.
● Parámetros.
● Los datos de los parámetros podrán ser utilizados desde el back para
cambiar la visualización.
● Relacionado con el fichero params.ini
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
11. TEMPLATEDETAILS.XML → DATOS
● Datos específicos de la plantilla: versión, autor, email, página web,
año, licencia y descripción.
● Para Joomla! 1.7 en adelante hay cambios.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
12. TEMPLATEDETAILS.XML → ARCHIVOS
● Especificación de los archivos utilizados en la plantilla.
● Recuerda: lo que no se declare aquí, no se instala.
● Para incluir una carpeta completa, utilizar:
<folder>nombre_carpeta</folder>
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
13. TEMPLATEDETAILS.XML → POSICIONES
● Qué y cuántas posiciones tendremos en la plantilla.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
14. TEMPLATEDETAILS.XML → PARÁMETROS
● Parámetros: para ser manejados desde el back. Hace que una
plantilla sea más versátil.
● Apartado ligado con el fichero params.ini
● Para Joomla! 1.7 en adelante hay cambios
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
16. API JOOMLA!
API JOOMLA! - JDOC
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
17. API JOOMLA! - JDOC
● <jdoc:include type=”head”/>
● Va dentro de la cabecera HTML (<head>).
● Muestra el title, metatags, feed y js (MooTools).
● $this->template
● Obtenemos el nombre de la carpeta que contiene nuestra plantilla.
● Uso: para cargar css, favicon, js y cualquier otro archivo.
● $mainframe->getCfg('sitename')
● Obtenemos el nombre del sitio.
● <jdoc:inclue type=”modules” name=”posicion” style=”estilo”/>
● Indica la carga de un módulo de una manera específica:
● name: posiciones cargadas 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.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
18. API JOOMLA! - JDOC
● <jdoc:include type=”component”/>
● Cargamos el contenido principal del sitio (contenido de componentes):
artículos, secciones, categorías, calendarios...
● 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.
● $this->language
● Contiene el idioma en el que se encuentra nuestro sitio.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
20. TEMPLATE OVERRIDES
● Técnica para redefinir la presentación por pantalla de un
componente o módulo de Joomla!
● Se trata de una “clonación” de la vista de la extensión.
● Se incluye a partir de la versión 1.5.
● Ventajas:
● Personalizar el portal sin preocuparse de las actualizaciones de las
extensiones.
● Validación de estándares propuestos por la W3C.
● Conseguir un nivel adecuado de accesibilidad (algunas extensiones, incluso
las nativas, no cumplen con la accesibilidad).
● Importante: la extensión debe cumplir con MVC.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
21. TEMPLATE OVERRIDES → USO
● Crear una carpeta llamada html dentro de nuestra plantilla:
● templates/plantilla/html/
● Dentro de esta carpeta crear las carpetas con los nombres de las
extensiones (componentes y/o módulos) que queramos “redefinir” o
“clonar”.
● Copiar en ellas el contenido de la carpeta tmpl (vistas) y realizar en
esos ficheros las modificaciones/adaptaciones necesarias.
● Joomla!, al generar la página web, mira a ver si existe una carpeta
html en la plantilla y si hay una “clonación” de la extensión que va a
mostrar. En caso afirmativo, muestra ésta en lugar de la original.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
26. EJEMPLO: INDEX.PHP + CSS + PARAMS
● Insertar estilos para la maquetación de la plantilla.
● Conocer algunas clases que Joomla! carga por defecto:
● componentheading: muestra el título del componente.
● contentheading: muestra el título de los artículos.
● buttonheading: muestra iconos PDF, imprimir y enviar a un amigo.
● small: utilizado en varios elementos (como autor del artículo).
● createdate: muestra la fecha de creación del artíuclo.
● readon: utilizada en el enlace de “leer más...” de los artículos.
● article_separator: utilizada por etiqueta <span> para separar artículos.
● moduletable(+ sufijo):carga los div (y sufijo cargado desde back) de los
módulos.
● active: para ítem de menú activo.
● parent: cuando hay sub-ítems, para el elemento padre.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
27. EJEMPLO: INDEX.PHP + CSS + PARAMS
● Otras clases:
● button: asociada a elementos de tipo botón.
● inputbox: asociada a elementos text-input.
● pagenav: asociada a paginación de artículos.
● modifydate: asociada a fecha de modificación del artículo.
● sectiontableentry1/sectiontableentry2: asociada a datos en tablas.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
33. EJEMPLO: INDEX.PHP + CSS + PARAMS
● Íntimamente ligada al fichero templateDetails.xml:
● Sus parámetros se ponen en este fichero.
● Declaración:
● nombre_parametro_1=valor_1
nombre_parametro_2=valor_2
nombre_parametro_3=valor_3
● Llamada desde PHP
● <?php echo $this->params->get('nombre_parametro'); ?>
● Los estilos asociados se añaden en los ficheros .css (template.css)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
35. DIFERENCIAS ENTRE VERSIONES
DIFERENCIAS ENTRE VERSIONES
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
36. DIFERENCIA ENTRE VERSIONES
● Novedades a partir de Joomla! 1.7:
● Salida de contenidos sin tablas: todos los archivos de salida están escritos
en xHTML 1.0 Strict.
● templateDetails.xml (estilos de plantilla): creación de variaciones en la
plantilla para una o varias páginas que pueden ser asignadas de forma
específica.
●
Novedades a partir de Joomla! 3.0:
● Incorporación de Twitter Bootstrap (framework CSS).
● Nuevas plantillas front y back adaptadas a móviles (bootstrap).
● Actualización plantilla accesible Beez3.
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
37. DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML
● A partir de Joomla! 1.7:
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
38. DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML
● Parámetros en Joomla! 1.5:
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
39. DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML
● Campos de configuración a partir de Joomla! 1.7:
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
40. DIFERENCIA ENTRE VERSIONES → INDEX.PHP
● En Joomla! 1.5, La variable mainframe se definía así:
● $global mainframe;
● A partir de Joomla! 1.7, se define así:
● $mainframe = Jfactory::getApplication();
● Posibles usos:
● $app->getCfg('sitename') → muestra nombre del portal web
● $params = $app->getParams(); → coge los parámetros de la página (ítem de menú)
● $pageclass = $params->get('pageclass_sfx'); → sufijo de la página (ítem de menú)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
41. DIFERENCIA ENTRE VERSIONES → CARGA DE CSS Y JS
● Para cargar estilos y javascript:
● $app = Jfactory::getApplication();
● $tpath = $this->baseurl.'/templates/'.$this-
>template;
● $tsystem = $this->baseurl.'/templates/system';
● $doc->addScript($tpath.'/js/archivo.js');
● $doc->addStyleSheet($tsystem.'/css/system.css');
● $doc->addStyleSheet($tpath.'/css/estilo.css');
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
42. FRAMEWORKS DE DESARROLLO
FRAMEWORKS DE DESARROLLO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
43. FRAMEWORKS DE DESARROLLO
● Estructura de software compuesta de componentes
personalizables e intercambiables para el desarrollo de una
aplicación.
● Ventajas:
● Acelerar el proceso de desarrollo.
● Reutilizar código ya existente.
● Promover buenas prácticas de desarrollo (uso de patrones).
● Frameworks de plantillas en Joomla!:
● Gantry: http://www.gantry-framework.org/
● Warp: http://www.yootheme.com/warp/
● ZenGrid: http://www.joomlabamboo.com/joomla-templates/zen-grid-framework
● T3: http://www.joomlart.com/joomla/t3-framework-and-ja-purity-templates
● YJSG: http://yjsimplegrid.com/
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
44. HERRAMIENTAS DE AYUDA
HERRAMIENTAS DE AYUDA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
45. HERRAMIENTAS DE AYUDA → EXTENSIONES PARA FIREFOX
● Firebug: https://addons.mozilla.org/es/firefox/addon/firebug/
● HeadingsMaps:
https://addons.mozilla.org/es/firefox/addon/headingsmap/
● HTML Validator:
https://addons.mozilla.org/es/firefox/addon/html-validator/
● QuickJava: https://addons.mozilla.org/es/firefox/addon/quickjava/
● Web Developer:
https://addons.mozilla.org/es/firefox/addon/web-developer/
● User Agent Switcher:
https://addons.mozilla.org/es/firefox/addon/user-agent-switcher
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
46. HERRAMIENTAS DE AYUDA → RESPONSIVE WEB DESIGN
● ScreenFly by QuirkTools: http://quirktools.com/screenfly/
● Responsive Design Testing: http://mattkersley.com/responsive/
● HTML Validator:
https://addons.mozilla.org/es/firefox/addon/html-validator/
● ScreenQueries: http://screenqueri.es/
● Resizer: http://lab.maltewassermann.com/viewport-resizer/
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
47. HERRAMIENTAS DE AYUDA → VELOCIDAD DE CARGA
● Pingdom: http://tools.pingdom.com/fpt/
● PageSpeed Insights:
https://developers.google.com/speed/pagespeed/insights
● Web Page Analyzer:
http://www.websiteoptimization.com/services/analyze/
● GTmetrix: http://gtmetrix.com/
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
48. HERRAMIENTAS DE AYUDA → CHEATSEETS
● Para plantillas Joomla! 1.5:
http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf
●
Para plantillas Joomla! 2.5:
http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf
●
Para plantillas Joomla! 3.0:
www.joomlack.fr/en/joomla-documentations-tutorials/joomla-3-x-templates-cheatsheet
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!
49. FIN DE LA PRESENTACIÓN
Gracias por vuestra atención. Tenéis más información en:
atención
www.sergioiglesias.net y www.twitter.com/sergiois
FIN DE LA PRESENTACIÓN
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!