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