masterclass desarrollo plantillas joomla!
Post on 12-Mar-2016
232 Views
Preview:
DESCRIPTION
TRANSCRIPT
Joomla!MasterClass Desarrollo 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
Joomla!MasterClass Desarrollo de Plantillas
(1.5, 1.6, 1.7, 2.5, 3.0)
Í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 + PHPXHTML + 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 PLANTILLAQUÉ 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 DESARROLLOFRAMEWORKS 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 ARCHIVOSESTRUCTURA 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.XMLTEMPLATEDETAILS.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! - JDOCAPI 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 OVERRIDESTEMPLATE 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 + PARAMSEJEMPLO: 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 VERSIONESDIFERENCIAS 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ó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!
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
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!
top related