#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)
Í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
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 ARCHIVOSESTRUCTURA 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.XMLTEMPLATEDETAILS.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! - JDOCAPI 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 OVERRIDESTEMPLATE 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 + PARAMSEJEMPLO: 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 VERSIONESDIFERENCIAS 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 DESARROLLOFRAMEWORKS 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 AYUDAHERRAMIENTAS 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ó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
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
Top Related