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 ● www.complusot.es ● twitter.com/complusoft
Pertenezco a: OSIberia ● www.osiberia.es ● 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
MasterClass Desarrollo Plantillas Joomla!
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.
MasterClass Desarrollo Plantillas Joomla!
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.
MasterClass Desarrollo Plantillas Joomla!
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.
MasterClass Desarrollo Plantillas Joomla!
QUÉ ES UNA PLANTILLA
QUÉ ES UNA PLANTILLA
MasterClass 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
MasterClass Desarrollo Plantillas Joomla!
FRAMEWORKS DE DESARROLLO
FRAMEWORKS DE DESARROLLO
MasterClass 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/
MasterClass Desarrollo Plantillas Joomla!
ESTRUCTURA BÁSICA DE ARCHIVOS
ESTRUCTURA BÁSICA DE ARCHIVOS
MasterClass Desarrollo Plantillas Joomla!
ESTRUCTURA BĂ SICA DE ARCHIVOS
MasterClass 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. MasterClass Desarrollo Plantillas Joomla!
TEMPLATEDETAILS.XML
TEMPLATEDETAILS.XML
MasterClass 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
MasterClass 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. MasterClass 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>
MasterClass Desarrollo Plantillas Joomla!
TEMPLATEDETAILS.XML → POSICIONES ●
Qué y cuántas posiciones tendremos en la plantilla.
MasterClass 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
MasterClass Desarrollo Plantillas Joomla!
TEMPLATEDETAILS.XML
MasterClass Desarrollo Plantillas Joomla!
API JOOMLA!
API JOOMLA! - JDOC
MasterClass 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.
MasterClass 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.
MasterClass Desarrollo Plantillas Joomla!
TEMPLATE OVERRIDES
TEMPLATE OVERRIDES
MasterClass 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.
MasterClass 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.
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass 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.
MasterClass 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.
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass 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)
MasterClass Desarrollo Plantillas Joomla!
EJEMPLO: INDEX.PHP + CSS + PARAMS
MasterClass Desarrollo Plantillas Joomla!
DIFERENCIAS ENTRE VERSIONES
DIFERENCIAS ENTRE VERSIONES
MasterClass 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 (boostrap).
●
Actualización plantilla accesible Beez3.
MasterClass Desarrollo Plantillas Joomla!
DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ●
A partir de Joomla! 1.7:
MasterClass Desarrollo Plantillas Joomla!
DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ●
Parámetros en Joomla! 1.5:
MasterClass Desarrollo Plantillas Joomla!
DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ●
Campos de configuración a partir de Joomla! 1.7:
MasterClass 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();
MasterClass Desarrollo Plantillas Joomla!
FIN DE LA MASTERCLASS
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 MASTERCLASS
MasterClass Desarrollo Plantillas Joomla!
PUBLICIDAD
Libro Joomla! 1.6 – Guía de referencia en español
●
●
Guía de referencia en español
●
Minitutoriales
Introducción Novedades en Joomla! 1.6 Enlaces de interés Joomla! Acceso al panel de control Sitio Usuarios Menús Contenido Componentes Extensiones Ayuda
Instalar XAMPP Instalar Joomla! 1.6 Gestionar permisos Crear un artículo Crear un contacto Integrar noticias Añadir un módulo submenú Habilitar la vista de módulos Añadir accesskey Integrar DNI electrónico Enlaces de interés
http://www.bubok.es/libros/200879/Joomla-16--Guia-de-referencia-y-minitutoriales MasterClass Desarrollo Plantillas Joomla!
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!