Your SlideShare is downloading. ×
0
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Introducción al  desarrollo de  plantillas para  Joomla!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción al desarrollo de plantillas para Joomla!

6,688

Published on

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

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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,688
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
493
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Introducción al desarrollo de plantillas para Joomla! Oriol Boix www.oriolboix.com
    • 2. Conocimientos previos HTML Estructura la información CSS Define el diseño PHP Trabaja con el servidor Oriol Boix www.oriolboix.com
    • 3. Conocimientos previos HTML Estructura la información CSS Define el diseño PHP Trabaja con el servidor Oriol Boix www.oriolboix.com
    • 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. 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. 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. 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. Instalar y configurar una plantilla Oriol Boix www.oriolboix.com
    • 9. Estructura básica de archivos y carpetas Oriol Boix www.oriolboix.com
    • 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. 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. 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. 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. 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. 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. Creación de una plantilla carpeta con el nombre del template Oriol Boix www.oriolboix.com
    • 17. Creación de una plantilla templateDetails.xml Se divide en 4 partes: Datos Archivos Posiciones Parámetros Oriol Boix www.oriolboix.com
    • 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. 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. 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. Creación de una plantilla index.php Lo primero que debemos crear es la estructura html. Oriol Boix www.oriolboix.com
    • 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. 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. 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. 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. 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. 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. 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. Creación de una plantilla template.css Clases utilizadas para contenido Oriol Boix www.oriolboix.com
    • 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. 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. 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. 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. Para saber más Documentación oficial del proyecto http://docs.joomla.org/Template_reference_material Oriol Boix www.oriolboix.com
    • 35. Para saber más Documentación oficial del proyecto http://docs.joomla.org/Template_reference_material Oriol Boix www.oriolboix.com
    • 36. ¿Alguna pregunta? Oriol Boix hola@oriolboix.com www.oriolboix.com twitter.com/sopadepixels ¡Gracias! Oriol Boix www.oriolboix.com

    ×