JoomlaIO - Hangout sobre Desarollo de Plantillas Joomla! - @sergiois

#JoomlaIO Desarrollo de Plantillas (1.5, 1.6, 1.7, 2.5, 3.0)

#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 ● www.complusot.es ● twitter.com/complusoft

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

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

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

ESTRUCTURA BÁSICA DE ARCHIVOS

ESTRUCTURA BÁSICA DE ARCHIVOS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

ESTRUCTURA BĂ SICA DE ARCHIVOS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

TEMPLATEDETAILS.XML

TEMPLATEDETAILS.XML

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

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!

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!

TEMPLATEDETAILS.XML → POSICIONES ●

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

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

TEMPLATEDETAILS.XML

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

API JOOMLA!

API JOOMLA! - JDOC

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

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!

TEMPLATE OVERRIDES

TEMPLATE OVERRIDES

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

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!

EJEMPLO: INDEX.PHP + CSS + PARAMS

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

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!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

EJEMPLO: INDEX.PHP + CSS + PARAMS

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

DIFERENCIAS ENTRE VERSIONES

DIFERENCIAS ENTRE VERSIONES

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ●

A partir de Joomla! 1.7:

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ●

Parámetros en Joomla! 1.5:

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

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!

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!

FRAMEWORKS DE DESARROLLO

FRAMEWORKS DE DESARROLLO

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

HERRAMIENTAS DE AYUDA

HERRAMIENTAS DE AYUDA

Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #JoomlaIO :: Desarrollo Plantillas Joomla!

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!

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!

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!

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!

FIN DE LA PRESENTACIÓN

Gracias por vuestra atención. atención Tenéis más información en: 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!