MasterClass Desarrollo Plantillas Joomla!

Joomla!
MasterClass Desarrollo de Plantillas
(1.5, 1.6, 1.7, 2.5, 3.0)

Joomla!
MasterClass 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

ÍNDICE DEL CONTENIDO

● XHTML + CSS + PHP
● Qué es una plantilla
● Frameworks de desarrollo
● Estructura básica de archivos
● templateDetails.xml
● API Joomla!
● Templates Overrides
● Ejemplo: index.php + css + params
● Diferencias entre versiones
MasterClass Desarrollo Plantillas Joomla!

XHTML + CSS + PHP

XHTML + CSS + PHP


XHTML + CSS + PHP → XHTML

● Define la estructura de la información.
● Extensible Hypertext Markup Language (lenguaje extensible de
marcado de hipertexto).
● El lenguaje HTML no cumple al 100% las reglas del estándar XML.
Para poder aprovechar las ventajas del XML, se hizo necesaria una
evolución. del HTML hacia el xHTML, que no es más que una
redefinición del lenguaje haciendo más estrictas algunas de sus
formulaciones básicas (para que sea totalmente compatible con XML).
● Entre las reglas que forman parte del xHTML, pero no del HTML,
podemos citar la obligación de cerrar todas las etiquetas y el uso
exclusivo de minúsculas para las palabras del lenguaje (etiquetas).
● Es un estándar del W3C.


XHTML + CSS + PHP → CSS

● Define el diseño.
● Cascading Style Sheets (hojas de estilo en cascada).
● Tres formas de aplicar:
● CSS externa → recomendada.
● CSS interna.
● CSS en línea.
● Ventajas:
● Separa el diseño del contenido.
● Mejora el mantenimiento.
● HTML más claro de entender (e indexable).
● Distinto diseño para dispositivo: impresora, PDA...
● Es un estándar del W3C.


XHTML + CSS + PHP → PHP

● Lenguaje de programación del lado del servidor.
● Pre-Procesador de Hipertexto:
● Lenguaje de programación interpretado.
● Acceso a base de datos (MySQL).
● Ventajas:
● Desarrollo de páginas web dinámicas.
● Lenguaje multiplataforma.
● Cuidado con las versiones de PHP (5, 6).
● Aplicaciones creadas con PHP:
● Joomla!
● SugarCRM.
● FaceBook.
● Tuenti.


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


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/


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.


TEMPLATEDETAILS.XML

TEMPLATEDETAILS.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! - 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 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




● 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 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 (boostrap).
● 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();


FIN DE LA MASTERCLASS

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 MASTERCLASS


PUBLICIDAD

●
Libro Joomla! 1.6 – Guía de referencia en español
● Guía de referencia en español
● Minitutoriales

Introducción Instalar XAMPP
Novedades en Joomla! Instalar Joomla! 1.6
1.6 Gestionar permisos
Enlaces de interés Crear un artículo
Joomla! Crear un contacto
Acceso al panel de Integrar noticias
control Añadir un módulo
Sitio submenú
Usuarios Habilitar la vista de
Menús módulos
Contenido Añadir accesskey
Componentes Integrar DNI electrónico
Extensiones Enlaces de interés
Ayuda

http://www.bubok.es/libros/200879/Joomla-16--Guia-de-referencia-y-minitutoriales


PUBLICIDAD

● www.sergioiglesias.net/blog
● www.twitter.com/sergiois

● www.complusoft.es/blog
● www.twitter.com/complusoft

● www.osiberia.es
● www.twitter.com/osiberia


MasterClass Desarrollo Plantillas Joomla!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to MasterClass Desarrollo Plantillas Joomla!

Similar to MasterClass Desarrollo Plantillas Joomla! (20)

More from SergioIglesiasNET

More from SergioIglesiasNET (6)

MasterClass Desarrollo Plantillas Joomla!