Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducción al
desarrollo de
plantillas para
Joomla!




 Oriol Boix
 www.oriolboix.com
Conocimientos
previos


HTML                 Estructura la información
CSS                  Define el diseño
PHP          ...
Conocimientos
previos


HTML                 Estructura la información
CSS                  Define el diseño
PHP          ...
Qué es una plantilla
Joomla! es un CMS gratuito de código abierto, y sirve
para realizar páginas web

CMS (Sistema de Gest...
Qué es una plantilla
La plantilla es la base de la aplicación de entrega de
contenidos

Una plantilla Joomla! consta de di...
Instalar y configurar una plantilla

Hay plantillas gratuitas y plantillas de pago


Plantillas gratuitas:

http://ayudajo...
Instalar y configurar una plantilla


Hay plantillas gratuitas y plantillas de pago

Plantillas gratuitas:

http://ayudajo...
Instalar y configurar una plantilla




 Oriol Boix
 www.oriolboix.com
Estructura básica de
archivos y carpetas




 Oriol Boix
 www.oriolboix.com
Estructura básica
de archivos
index.html
Añade seguridad a las carpetas.
Es un archivo vacío


index.php
Contiene el html ...
Estructura básica
de archivos
params.ini
Guarda los parámetros personalizables desde el administrador.

templateDetails.xm...
Estructura básica
de archivos
params.ini
Guarda los parámetros personalizables desde el administrador.

templateDetails.xm...
Estructura básica
de archivos

css
Carpeta que contiene los archivos css.

template.css
Archivo principal donde está el có...
Estructura básica
de archivos

css
Carpeta que contiene los archivos css.

template.css
Archivo principal donde está el có...
Estructura básica
de archivos

html
Esta carpeta contiene plantillas personalizadas para distintos módulos
y componentes.
...
Creación
de una plantilla

carpeta con el nombre del template




  Oriol Boix
  www.oriolboix.com
Creación
de una plantilla
templateDetails.xml


Se divide en 4 partes:


Datos
Archivos
Posiciones
Parámetros



  Oriol B...
Creación
de una plantilla
templateDetails.xml


Datos
nombre / versión / autor / email /
página web / año / licencia / des...
Creación
de una plantilla
templateDetails.xml


Archivos

Listado de todos los archivos utilizados en el theme.
Si creamos...
Creación
de una plantilla
templateDetails.xml


Posiciones

Definimos las posiciones para módulos que necesitaremos en el ...
Creación
de una plantilla
index.php
Lo primero que debemos crear es la estructura html.




  Oriol Boix
  www.oriolboix.c...
Creación
de una plantilla
index.php
Utilizamos la API para plantillas de Joomla! para hacer las distintas
llamadas.

<jdoc...
Creación
de una plantilla
index.php

$this->template
<?php echo $this->template ?>

Obtenemos la ruta del template.
Lo usa...
Creación
de una plantilla
index.php

$mainframe->getCfg('sitename')
<?php echo $mainframe->getCfg('sitename');?>

Esta lla...
Creación
de una plantilla
index.php

<jdoc:include type="modules" name="posición"
style="estilo" />

Esta llamada nos devu...
Creación
de una plantilla
index.php
<jdoc:include type="modules" name="posición"
style="estilo" />
Las variables de estilo...
Creación
de una plantilla
index.php

<jdoc:include type="component" />

Cargamos el contenido principal del sitio.
Los com...
Creación
de una plantilla
index.php

<?php include_once('includes/footer.php'); ?>

Carga el archivo con el footer por def...
Creación
de una plantilla
template.css
Clases utilizadas
para contenido




  Oriol Boix
  www.oriolboix.com
Creación
de una plantilla
template.css
Clases pertenecientes
a módulos

Los estilos de los módulos
pueden variar según
el ...
Creación
de una plantilla
template.css
Otras clases css
button
Es una clase asociada a elementos del tipo botón.
inputbox
...
Creación
de una plantilla
template_thumbnail.png

Es la previsualización del theme para el administrador.

No está estable...
Para esta presentación se ha utilizado el manual de plantillas “Desarrollando
templates para Joomla! 1.5” desarrollado por...
Para saber más

Documentación oficial del proyecto

http://docs.joomla.org/Template_reference_material




  Oriol Boix
  ...
Para saber más

Documentación oficial del proyecto

http://docs.joomla.org/Template_reference_material




  Oriol Boix
  ...
¿Alguna pregunta?

  Oriol Boix
  hola@oriolboix.com

  www.oriolboix.com
  twitter.com/sopadepixels



                  ...
Upcoming SlideShare
Loading in …5
×

Introducción al desarrollo de plantillas para Joomla!

7,189 views

Published on

Taller de Introducción al desarrollo de plantillas para Joomla! impartido en el Joomla!Day 2009 en la ciudad de Barcelona.

Published in: Business, Technology

Introducción al desarrollo de plantillas para Joomla!

  1. 1. Introducción al desarrollo de plantillas para Joomla! Oriol Boix www.oriolboix.com
  2. 2. Conocimientos previos HTML Estructura la información CSS Define el diseño PHP Trabaja con el servidor Oriol Boix www.oriolboix.com
  3. 3. Conocimientos previos HTML Estructura la información CSS Define el diseño PHP Trabaja con el servidor Oriol Boix www.oriolboix.com
  4. 4. Qué es una plantilla Joomla! es un CMS gratuito de código abierto, y sirve para realizar páginas web CMS (Sistema de Gestión de Contenidos): Software que ayuda en la organización y presentación de contenidos en un sitio web. Consta de dos aplicaciones: - Una aplicación de gestión de contenidos. - Una aplicación de entrega de contenidos. Oriol Boix www.oriolboix.com
  5. 5. Qué es una plantilla La plantilla es la base de la aplicación de entrega de contenidos Una plantilla Joomla! consta de diferentes archivos que controlan la estructura y el diseño de la página que estemos realizando y de sus contenidos. La plantilla Joomla! no controla el contenido propiamente. Oriol Boix www.oriolboix.com
  6. 6. Instalar y configurar una plantilla Hay plantillas gratuitas y plantillas de pago Plantillas gratuitas: http://ayudajoomla.com/diseno/12-general/60-plantillas- gratuitas-para-joomla.html Oriol Boix www.oriolboix.com
  7. 7. Instalar y configurar una plantilla Hay plantillas gratuitas y plantillas de pago Plantillas gratuitas: http://ayudajoomla.com/diseno/12-general/60-plantillas- gratuitas-para-joomla.html Oriol Boix www.oriolboix.com
  8. 8. Instalar y configurar una plantilla Oriol Boix www.oriolboix.com
  9. 9. Estructura básica de archivos y carpetas Oriol Boix www.oriolboix.com
  10. 10. Estructura básica de archivos index.html Añade seguridad a las carpetas. Es un archivo vacío index.php Contiene el html que define la estructura. Tiene la mayor parte de llamadas php a la API de joomla. Es imprescindible. Oriol Boix www.oriolboix.com
  11. 11. Estructura básica de archivos params.ini Guarda los parámetros personalizables desde el administrador. templateDetails.xml Contiene información sobre la plantilla necesaria para la correcta instalación de la misma (nombre, autor, archivos ...) Define los parámetros personalizables desde el administrador. template_thumbnail.png Imagen en miniatura de la plantilla. Oriol Boix www.oriolboix.com
  12. 12. Estructura básica de archivos params.ini Guarda los parámetros personalizables desde el administrador. templateDetails.xml Contiene información sobre la plantilla necesaria para la correcta instalación de la misma (nombre, autor, archivos ...) Define los parámetros personalizables desde el administrador. template_thumbnail.png Imagen en miniatura de la plantilla. Oriol Boix www.oriolboix.com
  13. 13. Estructura básica de archivos css Carpeta que contiene los archivos css. template.css Archivo principal donde está el código de estilo (css) del template. images Carpeta con imágenes llamadas desde el theme. Oriol Boix www.oriolboix.com
  14. 14. Estructura básica de archivos css Carpeta que contiene los archivos css. template.css Archivo principal donde está el código de estilo (css) del template. images Carpeta con imágenes llamadas desde el theme. Oriol Boix www.oriolboix.com
  15. 15. Estructura básica de archivos html Esta carpeta contiene plantillas personalizadas para distintos módulos y componentes. Si no la creamos, Joomla! utilizará la plantilla por defecto del módulo o componente. Oriol Boix www.oriolboix.com
  16. 16. Creación de una plantilla carpeta con el nombre del template Oriol Boix www.oriolboix.com
  17. 17. Creación de una plantilla templateDetails.xml Se divide en 4 partes: Datos Archivos Posiciones Parámetros Oriol Boix www.oriolboix.com
  18. 18. Creación de una plantilla templateDetails.xml Datos nombre / versión / autor / email / página web / año / licencia / descripción Oriol Boix www.oriolboix.com
  19. 19. Creación de una plantilla templateDetails.xml Archivos Listado de todos los archivos utilizados en el theme. Si creamos la plantilla directamente en servidor no es necesario. Si queremos instalarla desde zip o distribuïrla sí. Oriol Boix www.oriolboix.com
  20. 20. Creación de una plantilla templateDetails.xml Posiciones Definimos las posiciones para módulos que necesitaremos en el site. Oriol Boix www.oriolboix.com
  21. 21. Creación de una plantilla index.php Lo primero que debemos crear es la estructura html. Oriol Boix www.oriolboix.com
  22. 22. Creación de una plantilla index.php Utilizamos la API para plantillas de Joomla! para hacer las distintas llamadas. <jdoc:include type="head" /> Carga los datos por defecto para el head: title, metatags, feed, y framework javascript Oriol Boix www.oriolboix.com
  23. 23. Creación de una plantilla index.php $this->template <?php echo $this->template ?> Obtenemos la ruta del template. Lo usamos para la carga de cualquier archivo del theme. Cargamos el archivo css. Oriol Boix www.oriolboix.com
  24. 24. Creación de una plantilla index.php $mainframe->getCfg('sitename') <?php echo $mainframe->getCfg('sitename');?> Esta llamada nos devuelve el título del sitio a mostrar en el site Oriol Boix www.oriolboix.com
  25. 25. Creación de una plantilla index.php <jdoc:include type="modules" name="posición" style="estilo" /> Esta llamada nos devuelve los módulos de una posición con el estilo que especifiquemos. Oriol Boix www.oriolboix.com
  26. 26. Creación de una plantilla index.php <jdoc:include type="modules" name="posición" style="estilo" /> Las variables de estilo son: table: carga el contenido del módulo en una tabla vertical horz: carga el contenido del módulo en una tabla horizontal xhtml: carga el contenido del módulo en divs rounded: carga el contenido del módulo en divs anidados raw: carga el contenido sin contenedores ni título. Oriol Boix www.oriolboix.com
  27. 27. Creación de una plantilla index.php <jdoc:include type="component" /> Cargamos el contenido principal del sitio. Los componentes de joomla. Habrá un solo componente por cada página de nuestro site. Oriol Boix www.oriolboix.com
  28. 28. Creación de una plantilla index.php <?php include_once('includes/footer.php'); ?> Carga el archivo con el footer por defecto de joomla. Oriol Boix www.oriolboix.com
  29. 29. Creación de una plantilla template.css Clases utilizadas para contenido Oriol Boix www.oriolboix.com
  30. 30. Creación de una plantilla template.css Clases pertenecientes a módulos Los estilos de los módulos pueden variar según el estilo con los que los mostremos o como hayan sido creados. Oriol Boix www.oriolboix.com
  31. 31. Creación de una plantilla template.css Otras clases css button Es una clase asociada a elementos del tipo botón. inputbox Suele estar asociada a elementos text-input. pagenav Clase asociada a la paginación de artículos. modifydate Clase asociada a la fecha de modificación de un artículo. sectiontableentry1 / sectiontableentry2 Suele estar asociada cuando se muestran datos en tablas. Oriol Boix www.oriolboix.com
  32. 32. Creación de una plantilla template_thumbnail.png Es la previsualización del theme para el administrador. No está establecido el tamaño estándar de la imagen, pero por lo general es de 200px de ancho y 150px de alto. Oriol Boix www.oriolboix.com
  33. 33. Para esta presentación se ha utilizado el manual de plantillas “Desarrollando templates para Joomla! 1.5” desarrollado por comunidadjoomla.org http://joomlacode.org/gf/download/frsrelease/8611/31800/ manual_plantillas_joomla_15.pdf El diseño está basado en White as Milk http://azeemazeez.com/misc/ whiteasmilk/ , template para Wordpress, creado por Azeem Azeez http://www.azeemazeez.com/blogs/ white-as-milk/ Esta presentación se distribuye bajo la licencia Creative Commons Atribución- No Comercial 2.5 exceptuando los logotipos de Joomla!Day y Oriol Boix Oriol Boix www.oriolboix.com
  34. 34. Para saber más Documentación oficial del proyecto http://docs.joomla.org/Template_reference_material Oriol Boix www.oriolboix.com
  35. 35. Para saber más Documentación oficial del proyecto http://docs.joomla.org/Template_reference_material Oriol Boix www.oriolboix.com
  36. 36. ¿Alguna pregunta? Oriol Boix hola@oriolboix.com www.oriolboix.com twitter.com/sopadepixels ¡Gracias! Oriol Boix www.oriolboix.com

×