#JoomlaIO - Desarrollo de Plantillas para Joomla!

#JoomlaIODesarrollo de Plantillas(1.5, 1.6, 1.7, 2.5, 3.0)

Sergio Iglesias SánchezSergio Iglesias Sánchezwww.sergioiglesias.net | twitter.com/sergiois

Trabajo en: Complusoft● www.complusot.es● twitter.com/complusoft

Pertenezco a: OSIberia● www.osiberia.es ● twitter.com/osiberia

#JoomlaIODesarrollo de Plantillas(1.5, 1.6, 1.7, 2.5, 3.0)

http://www.sergioiglesias.net/

http://www.complusot.es/

http://www.osiberia.es/

Í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!


QUÉ ES UNA PLANTILLA

QUÉ ES UNA PLANTILLAQUÉ ES UNA PLANTILLA



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



ESTRUCTURA BÁSICA DE ARCHIVOS

ESTRUCTURA BÁSICA DE ARCHIVOSESTRUCTURA 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.



TEMPLATEDETAILS.XML

TEMPLATEDETAILS.XMLTEMPLATEDETAILS.XML



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



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.



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>



TEMPLATEDETAILS.XML → POSICIONES

● Qué y cuántas posiciones tendremos en la plantilla.



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



TEMPLATEDETAILS.XML



API JOOMLA!

API JOOMLA! - JDOCAPI JOOMLA! - JDOC



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.



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.



TEMPLATE OVERRIDES

TEMPLATE OVERRIDESTEMPLATE OVERRIDES



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.



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.



EJEMPLO: INDEX.PHP + CSS + PARAMS

EJEMPLO: INDEX.PHP + CSS + PARAMSEJEMPLO: 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.




● 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.




● Í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)



DIFERENCIAS ENTRE VERSIONES

DIFERENCIAS ENTRE VERSIONESDIFERENCIAS ENTRE VERSIONES



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.



DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML

● A partir de Joomla! 1.7:




● Parámetros en Joomla! 1.5:




● Campos de configuración a partir de Joomla! 1.7:



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ú)→



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');



FRAMEWORKS DE DESARROLLO

FRAMEWORKS DE DESARROLLOFRAMEWORKS DE DESARROLLO



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/


http://www.gantry-framework.org/

http://www.yootheme.com/warp/

http://www.joomlabamboo.com/joomla-templates/zen-grid-framework

http://www.joomlart.com/joomla/t3-framework-and-ja-purity-templates

http://yjsimplegrid.com/


HERRAMIENTAS DE AYUDA

HERRAMIENTAS DE AYUDAHERRAMIENTAS DE AYUDA



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


https://addons.mozilla.org/es/firefox/addon/firebug/

https://addons.mozilla.org/es/firefox/addon/headingsmap/


https://addons.mozilla.org/es/firefox/addon/quickjava/

https://addons.mozilla.org/es/firefox/addon/web-developer/

https://addons.mozilla.org/es/firefox/addon/user-agent-switcher


HERRAMIENTAS DE AYUDA → RESPONSIVE WEB DESIGN

● ScreenFly by QuirkTools: http://quirktools.com/screenfly/

● Responsive Design Testing: http://mattkersley.com/responsive/

● HTML Validator:


● ScreenQueries: http://screenqueri.es/

● Resizer: http://lab.maltewassermann.com/viewport-resizer/


http://quirktools.com/screenfly/

http://mattkersley.com/responsive/


http://screenqueri.es/

http://lab.maltewassermann.com/viewport-resizer/


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/


http://tools.pingdom.com/fpt/

https://developers.google.com/speed/pagespeed/insights

http://www.websiteoptimization.com/services/analyze/

http://gtmetrix.com/


HERRAMIENTAS DE AYUDA → CHEATSEETS

● Para plantillas Joomla! 1.5:

http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf




www.joomlack.fr/en/joomla-documentations-tutorials/joomla-3-x-templates-cheatsheet




http://www.joomlack.fr/en/joomla-documentations-tutorials/joomla-3-x-templates-cheatsheet


FIN DE LA PRESENTACIÓN

Gracias por vuestra atenciónGracias por vuestra atención. Tenéis más información en:www.sergioiglesias.net y www.twitter.com/sergiois

FIN DE LA PRESENTACIÓNFIN DE LA PRESENTACIÓN




#JoomlaIO - Desarrollo de Plantillas para Joomla!

Business

Transcript of #JoomlaIO - Desarrollo de Plantillas para Joomla!