MasterClass Desarrollo Plantillas Joomla!

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

description

MasterClass en Desarrollo de Plantillas Joomla! - Sesión Demostradora - Bilib - Albacete

Transcript of MasterClass Desarrollo Plantillas Joomla!

Page 1: MasterClass Desarrollo Plantillas Joomla!

Joomla!MasterClass Desarrollo de Plantillas

(1.5, 1.6, 1.7, 2.5, 3.0)

Page 2: MasterClass Desarrollo Plantillas Joomla!

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

Joomla!MasterClass Desarrollo de Plantillas

(1.5, 1.6, 1.7, 2.5, 3.0)

Page 3: MasterClass Desarrollo Plantillas Joomla!

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

Page 4: MasterClass Desarrollo Plantillas Joomla!

XHTML + CSS + PHP

XHTML + CSS + PHPXHTML + CSS + PHP

MasterClass Desarrollo Plantillas Joomla!

Page 5: 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!

Page 6: 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!

Page 7: 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!

Page 8: MasterClass Desarrollo Plantillas Joomla!

QUÉ ES UNA PLANTILLA

QUÉ ES UNA PLANTILLAQUÉ ES UNA PLANTILLA

MasterClass Desarrollo Plantillas Joomla!

Page 9: 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!

Page 10: MasterClass Desarrollo Plantillas Joomla!

FRAMEWORKS DE DESARROLLO

FRAMEWORKS DE DESARROLLOFRAMEWORKS DE DESARROLLO

MasterClass Desarrollo Plantillas Joomla!

Page 11: 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!

Page 12: MasterClass Desarrollo Plantillas Joomla!

ESTRUCTURA BÁSICA DE ARCHIVOS

ESTRUCTURA BÁSICA DE ARCHIVOSESTRUCTURA BÁSICA DE ARCHIVOS

MasterClass Desarrollo Plantillas Joomla!

Page 13: MasterClass Desarrollo Plantillas Joomla!

ESTRUCTURA BÁSICA DE ARCHIVOS

MasterClass Desarrollo Plantillas Joomla!

Page 14: 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!

Page 15: MasterClass Desarrollo Plantillas Joomla!

TEMPLATEDETAILS.XML

TEMPLATEDETAILS.XMLTEMPLATEDETAILS.XML

MasterClass Desarrollo Plantillas Joomla!

Page 16: 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!

Page 17: 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!

Page 18: 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!

Page 19: MasterClass Desarrollo Plantillas Joomla!

TEMPLATEDETAILS.XML → POSICIONES

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

MasterClass Desarrollo Plantillas Joomla!

Page 20: 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!

Page 21: MasterClass Desarrollo Plantillas Joomla!

TEMPLATEDETAILS.XML

MasterClass Desarrollo Plantillas Joomla!

Page 22: MasterClass Desarrollo Plantillas Joomla!

API JOOMLA!

API JOOMLA! - JDOCAPI JOOMLA! - JDOC

MasterClass Desarrollo Plantillas Joomla!

Page 23: 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!

Page 24: 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!

Page 25: MasterClass Desarrollo Plantillas Joomla!

TEMPLATE OVERRIDES

TEMPLATE OVERRIDESTEMPLATE OVERRIDES

MasterClass Desarrollo Plantillas Joomla!

Page 26: 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!

Page 27: 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!

Page 28: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

EJEMPLO: INDEX.PHP + CSS + PARAMSEJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 29: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 30: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 31: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 32: 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!

Page 33: 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!

Page 34: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 35: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 36: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 37: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 38: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 39: 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!

Page 40: MasterClass Desarrollo Plantillas Joomla!

EJEMPLO: INDEX.PHP + CSS + PARAMS

MasterClass Desarrollo Plantillas Joomla!

Page 41: MasterClass Desarrollo Plantillas Joomla!

DIFERENCIAS ENTRE VERSIONES

DIFERENCIAS ENTRE VERSIONESDIFERENCIAS ENTRE VERSIONES

MasterClass Desarrollo Plantillas Joomla!

Page 42: 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!

Page 43: MasterClass Desarrollo Plantillas Joomla!

DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML

● A partir de Joomla! 1.7:

MasterClass Desarrollo Plantillas Joomla!

Page 44: MasterClass Desarrollo Plantillas Joomla!

DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML

● Parámetros en Joomla! 1.5:

MasterClass Desarrollo Plantillas Joomla!

Page 45: MasterClass Desarrollo Plantillas Joomla!

DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML

● Campos de configuración a partir de Joomla! 1.7:

MasterClass Desarrollo Plantillas Joomla!

Page 46: 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!

Page 47: MasterClass Desarrollo Plantillas Joomla!

FIN DE LA MASTERCLASS

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 MASTERCLASSFIN DE LA MASTERCLASS

MasterClass Desarrollo Plantillas Joomla!

Page 48: MasterClass Desarrollo Plantillas Joomla!

PUBLICIDAD

MasterClass Desarrollo Plantillas Joomla!

● Libro Joomla! 1.6 – Guía de referencia en españolLibro 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

Page 49: 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!