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.
DESARROLLO DE PLANTILLAS JOOMLA!
Sergio Iglesias
DESARROLLO
PLANTILLAS
JOOMLA!
El JoomlaDay™ Sevilla es un evento
sobre el CMS Joomla!®
Expertos en Joomla! de primera fila...
Soy Sergio Iglesias
Front & Backend Developer / Consultor Joomla!
Puedes seguirme en @sergiois
y en www.sergioiglesias.net...
TRABAJO EN...
Complusoft
Responsable de
Proyectos Web
Joomla!
Formador
complusoft.es
SergioIglesiasNET
Blog sobre Joomla! ...
INTRODUCCIÓN
Estructura de archivos de
una plantilla
templateDetails.xml
API - JDoc
Ejemplo de template
DE QUÉ VAMOS A HAB...
HERRAMIENTAS
Extensiones Firefox
Responsive Web Desing
Velocidad de carga
CheatSheets
DE QUÉ VAMOS A HABLAR EN ESTA CHARLA...
1.
INTRODUCCIÓN
AL DESARROLLO
Conceptos
básicos para el
desarrollo
Estructura template
Archivos y directorios que forman la estructura de un
template para Joomla!
sergioiglesias.net
sergioiglesias.net
EXPLICACIÓN DE LOS FICHEROS DE UN TEMPLATE
index.html
Añade seguridad a las carpetas.
Es un fichero vacío..
index.php
Cont...
EXPLICACIÓN DE LOS FICHEROS DE UN TEMPLATE
nombre_directorio
Para organizar estilos,
imágenes y funcionalidad:
▸ css
▸ js
...
templateDetails.xml
Fichero imprescindible para la instalación del resto de
ficheros y los campos de configuración del tem...
SECCIONES EN LAS QUE ESTÁ DIVIDIDO
▸ Datos
▸ Archivos
▸ Posiciones
▸ Idiomas
▸ Parámetros / Campos
Los campos de configura...
templateDetails.xml > Datos
sergioiglesias.net
templateDetails.xml > Archivos
sergioiglesias.net
templateDetails.xml > Posiciones
sergioiglesias.net
templateDetails.xml > Idiomas
sergioiglesias.net
templateDetails.xml > Campos de configuración
sergioiglesias.net
API JDOC
Código proporcionado por el Framework de Joomla!
para mostrar el contenido de las extensiones.
sergioiglesias.net
PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
<jdoc:include type=”head”/>
▸ Va dentro de la cabecera HTML (<head>).
▸ Muestra ...
PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
<jdoc:inclue type=”modules” name=”posicion”
style=”estilo”/>
▸ Indica la carga d...
PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
<jdoc:include type=”component”/>
▸ Cargamos el contenido principal del sitio (co...
PRINCIPALES LLAMADAS DE LA API DE JOOMLA!
$this->params->get(‘nombre_campo’);
▸ Muestra el valor del campo de configuració...
Ejemplo de Template
Ejemplo completo de un template a partir de todos los
ficheros que lo forman.
sergioiglesias.net
2.
TIPS
TEMPLATES
Códigos de
interés para el
desarrollo de
plantillas
códigos: snippets
Trozos de código de interés que facilitan el desarrollo
de plantillas Joomla!
sergioiglesias.net
estilos de plantilla
Diferentes configuraciones de plantilla que podemos
asociar a uno o varios ítem de menú.
sergioiglesi...
posiciones de plantilla
Crear un nueva posición en una plantilla Joomla! para
poder mostrar el contenido de un módulo.
ser...
estilos de módulos
Diferentes formas de tratar y mostrar el contenido de
un módulo.
sergioiglesias.net
clases en módulos
Modificar visualización a través de una clase, la cual
tiene que estar definida en la hoja de estilos.
s...
personalizar error404
Mostrar el contenido de un ítem de menú como error
404 (artículo o cualquier componente).
sergioigle...
template override
Cambiar la forma de mostrar el contenido nativo de
una determinada extensión..
sergioiglesias.net
presentaciones alternativas
Otra forma de mostrar el contenido de una extensión
de una forma diferente a la nativa.
sergio...
3.
HERRAMIENTAS
DE AYUDA
Herramientas
que nos ayudan
en el desarrollo
de plantillas
extensiones firefox
Extensiones que nos ayudan en el desarrollo si
usamos este navegador.
sergioiglesias.net
EXTENSIONES FIREFOX
▸ Firebug:
https://addons.mozilla.org/es/firefox/addon/firebug/
▸ HTML Validator: https://addons.mozil...
responsive web design
Herramientas online muy útiles para visualizar
nuestras plantillas en diferentes resoluciones.
sergi...
RESPONSIVE WEB DESIGN
▸ ScreenFly by QuirkTools:
http://quirktools.com/screenfly/
▸ Responsive Design Testing: http://matt...
velocidad de carga
Herramientas online para analizar el tiempo de carga
de una página web y poder optimizarla.
sergioigles...
VELOCIDAD DE CARGA
▸ Pingdom:
http://tools.pingdom.com/fpt/
▸ GTmetrix:
http://gtmetrix.com/
▸ PageSpeed Insights: https:/...
cheatsheets
Chuletas en un PDF para que tengas las principales
características de plantillas Joomla!
sergioiglesias.net
CHEATSHEETS
▸ Para plantillas Joomla! 1.5: www.younic.de/wp-
content/uploads/Joomla15_Basic_Template_Cheatshee
t.pdf
▸ Par...
4.
REGALO
CURSO GRATIS
Curso Online
Desarrollo de
Plantillas
Joomla!
CURSO ONLINE DESARROLLO PLANTILLAS JOOMLA!
Curso online con el que aprenderás a desarrollar tu propia
plantilla Joomla! de...
LOS PASOS A
SEGUIR
REGÍSTRATE EN MI NEWSLETTER
RECIBE TUS CLAVES DE ACCESO
MÁS INFORMACIÓN
5.
EXTRA:
CUPÓN
DESCUENTO
MANAGEMENTFRONT - 25% de DESCUENTO
www.managementfront.com
Extensión y plantilla de tipo Dashboard para gestionar
artículo...
LOS PASOS A
SEGUIR
ENTRA EN LA WEB Y REGÍSTRATE
www.managementfront.com
INTRODUCE EL CUPÓN
JD15SEV
Y TENDRÁS EL 25% DE DES...
GRACIAS!
alguna pregunta?
Puedes encontrarme en @sergiois &
info@sergioiglesias.net
sergioiglesias.net
Upcoming SlideShare
Loading in …5
×

JoomlaDay Sevilla 2015 - Desarrollo de plantillas Joomla!

1,495 views

Published on

Presentación del Joomla!Day Sevilla 2015 que pude impartir en este evento.

  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Pues a través de cualquiera de las cuentas de Twitter de los ponentes del Joomla!Day Sevilla que seguramente se publique y en la web oficial del evento: www.joomladaysevilla.es ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Sergio Iglesias Deseando verlas, por dónde me puedo enterar cuando se suban? Gracias
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @José Luis Íñigo Blasco Gracias por tus comentarios. La verdad que el evento estuvo genial. La organización se lo curró a tope. En breves sacarán los vídeos ya que se grabó todo el evento. Así que podrás verlo en diferido. Salu2!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hubiese pagado ayer por estar allí, pero tenía desde mucho antes de salir este día, un evento marcado en el calendario. Para la próxima intentare ponerle prioridad. Espero que todo saliese muy bien. Me estudiaré la presentación. Gracias a todos los joomleros que participaron, hicieron ponencia e hicieron que cada día seamos "Más" en todos los sentidos. Un saludo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JoomlaDay Sevilla 2015 - Desarrollo de plantillas Joomla!

  1. 1. DESARROLLO DE PLANTILLAS JOOMLA! Sergio Iglesias
  2. 2. DESARROLLO PLANTILLAS JOOMLA! El JoomlaDay™ Sevilla es un evento sobre el CMS Joomla!® Expertos en Joomla! de primera fila impartirán charlas. El programa del evento pretende cubrir buena parte de los distintos aspectos que implica la creación de sitios web con Joomla! Es un evento comunitario, creado por la comunidad y para la comunidad. joomladaysevilla.es by @sergiois
  3. 3. Soy Sergio Iglesias Front & Backend Developer / Consultor Joomla! Puedes seguirme en @sergiois y en www.sergioiglesias.net/blog HOLA!! sergioiglesias.net
  4. 4. TRABAJO EN... Complusoft Responsable de Proyectos Web Joomla! Formador complusoft.es SergioIglesiasNET Blog sobre Joomla! y Marketing Online Artesanal Cursos Online sergioiglesias.net ManagementFront Extensión Joomla! para gestión de artículos desde Front Plantilla Dashboard managementfront.com sergioiglesias.net
  5. 5. INTRODUCCIÓN Estructura de archivos de una plantilla templateDetails.xml API - JDoc Ejemplo de template DE QUÉ VAMOS A HABLAR EN ESTA CHARLA TIPS DESARROLLO Colección de snippets o trozos de código interesantes para el desarrollo de un template personalizado con ejemplos prácticos. sergioiglesias.net
  6. 6. HERRAMIENTAS Extensiones Firefox Responsive Web Desing Velocidad de carga CheatSheets DE QUÉ VAMOS A HABLAR EN ESTA CHARLA REGALO: CURSO GRATIS Información sobre cómo realizar un curso online sobre desarrollo de plantillas Joomla! completamente GRATIS. sergioiglesias.net
  7. 7. 1. INTRODUCCIÓN AL DESARROLLO Conceptos básicos para el desarrollo
  8. 8. Estructura template Archivos y directorios que forman la estructura de un template para Joomla! sergioiglesias.net
  9. 9. sergioiglesias.net
  10. 10. EXPLICACIÓN DE LOS FICHEROS DE UN TEMPLATE 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). template_thumbnail.png Imagen en miniatura de la plantilla para poder ver desde el panel de administración el diseño que tiene. templateDetails.xml Contiene información necesaria para la correcta instalación de la plantilla. Define los campos de configuración. html Contiene vistas personalizadas de extensiones para adaptarlas al diseño del template (técnica de template overrides). sergioiglesias.net
  11. 11. EXPLICACIÓN DE LOS FICHEROS DE UN TEMPLATE nombre_directorio Para organizar estilos, imágenes y funcionalidad: ▸ css ▸ js ▸ images error.php Fichero para controlar los errores: ▸ 404 (página no encontrada) component.php Para mostrar solo el contenido de un componente (en ventanas modales por ejemplo). html/modules.php Para crear nuevos estilos de módulo o sobre-escribir los ya existentes. html/pagination.php Para modificar la forma en que se muestra y funciona la paginación en Joomla!. sergioiglesias.net
  12. 12. templateDetails.xml Fichero imprescindible para la instalación del resto de ficheros y los campos de configuración del template. sergioiglesias.net
  13. 13. SECCIONES EN LAS QUE ESTÁ DIVIDIDO ▸ Datos ▸ Archivos ▸ Posiciones ▸ Idiomas ▸ Parámetros / Campos Los campos de configuración de esta última sección se almacenan en el fichero params.ini sergioiglesias.net
  14. 14. templateDetails.xml > Datos sergioiglesias.net
  15. 15. templateDetails.xml > Archivos sergioiglesias.net
  16. 16. templateDetails.xml > Posiciones sergioiglesias.net
  17. 17. templateDetails.xml > Idiomas sergioiglesias.net
  18. 18. templateDetails.xml > Campos de configuración sergioiglesias.net
  19. 19. API JDOC Código proporcionado por el Framework de Joomla! para mostrar el contenido de las extensiones. sergioiglesias.net
  20. 20. PRINCIPALES LLAMADAS DE LA API DE JOOMLA! <jdoc:include type=”head”/> ▸ Va dentro de la cabecera HTML (<head>). ▸ Muestra el title, metatags, feed y js. $this->template ▸ Obtenemos el nombre de la carpeta que contiene nuestra plantilla. ▸ Uso: para cargar css, favicon, js y cualquier otro archivo. $app = JFactory::getApplication(); $app->getCfg('sitename'); ▸ Obtenemos el nombre del sitio. sergioiglesias.net
  21. 21. PRINCIPALES LLAMADAS DE LA API DE JOOMLA! <jdoc:inclue type=”modules” name=”posicion” style=”estilo”/> ▸ Indica la carga de un módulo de una manera específica: ▹ name: posiciones definidas 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. sergioiglesias.net
  22. 22. PRINCIPALES LLAMADAS DE LA API DE JOOMLA! <jdoc:include type=”component”/> ▸ Cargamos el contenido principal del sitio (contenido de componentes). 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. sergioiglesias.net
  23. 23. PRINCIPALES LLAMADAS DE LA API DE JOOMLA! $this->params->get(‘nombre_campo’); ▸ Muestra el valor del campo de configuración (de templateDetails.xml) $doc = JFactory::getDocument(); ▸ Para cargar estilos, javascript y otras etiquetas. ▸ $doc->addStyleSheet($url); más info ▸ $doc->addStyleDeclaration($css); más info ▸ $doc->addScript($url); más info ▸ $doc->addScriptDeclaration($js); más info ▸ $doc->setTitle(‘Título página’); más info ▸ $doc->setGenerator(‘Información’); más info ▸ $doc->addMetaTag(‘etiqueta’, ’descripción’); más info ▸ $doc->addCustomTag(‘<meta>’); más info sergioiglesias.net
  24. 24. Ejemplo de Template Ejemplo completo de un template a partir de todos los ficheros que lo forman. sergioiglesias.net
  25. 25. 2. TIPS TEMPLATES Códigos de interés para el desarrollo de plantillas
  26. 26. códigos: snippets Trozos de código de interés que facilitan el desarrollo de plantillas Joomla! sergioiglesias.net
  27. 27. estilos de plantilla Diferentes configuraciones de plantilla que podemos asociar a uno o varios ítem de menú. sergioiglesias.net
  28. 28. posiciones de plantilla Crear un nueva posición en una plantilla Joomla! para poder mostrar el contenido de un módulo. sergioiglesias.net
  29. 29. estilos de módulos Diferentes formas de tratar y mostrar el contenido de un módulo. sergioiglesias.net
  30. 30. clases en módulos Modificar visualización a través de una clase, la cual tiene que estar definida en la hoja de estilos. sergioiglesias.net
  31. 31. personalizar error404 Mostrar el contenido de un ítem de menú como error 404 (artículo o cualquier componente). sergioiglesias.net
  32. 32. template override Cambiar la forma de mostrar el contenido nativo de una determinada extensión.. sergioiglesias.net
  33. 33. presentaciones alternativas Otra forma de mostrar el contenido de una extensión de una forma diferente a la nativa. sergioiglesias.net
  34. 34. 3. HERRAMIENTAS DE AYUDA Herramientas que nos ayudan en el desarrollo de plantillas
  35. 35. extensiones firefox Extensiones que nos ayudan en el desarrollo si usamos este navegador. sergioiglesias.net
  36. 36. EXTENSIONES FIREFOX ▸ Firebug: https://addons.mozilla.org/es/firefox/addon/firebug/ ▸ HTML Validator: https://addons.mozilla.org/es/firefox/addon/html- validator/ ▸ Web Developer: https://addons.mozilla.org/es/firefox/addon/web-developer/ ▸ User Agent Switcher: https://addons.mozilla.org/es/firefox/addon/user-agent-switcher sergioiglesias.net
  37. 37. responsive web design Herramientas online muy útiles para visualizar nuestras plantillas en diferentes resoluciones. sergioiglesias.net
  38. 38. RESPONSIVE WEB DESIGN ▸ ScreenFly by QuirkTools: http://quirktools.com/screenfly/ ▸ Responsive Design Testing: http://mattkersley. com/responsive/ ▸ ScreenQueries: http://screenqueri.es/ ▸ Responsinator: http://www.responsinator.com sergioiglesias.net
  39. 39. velocidad de carga Herramientas online para analizar el tiempo de carga de una página web y poder optimizarla. sergioiglesias.net
  40. 40. VELOCIDAD DE CARGA ▸ Pingdom: http://tools.pingdom.com/fpt/ ▸ GTmetrix: http://gtmetrix.com/ ▸ PageSpeed Insights: https://developers.google. com/speed/pagespeed/insights ▸ Web Page Analyzer: http://www.websiteoptimization. com/services/analyze/ sergioiglesias.net
  41. 41. cheatsheets Chuletas en un PDF para que tengas las principales características de plantillas Joomla! sergioiglesias.net
  42. 42. CHEATSHEETS ▸ Para plantillas Joomla! 1.5: www.younic.de/wp- content/uploads/Joomla15_Basic_Template_Cheatshee t.pdf ▸ Para plantillas Joomla! 2.5: www.avadesigner. com/dl/cheat-sheet/Joomla-Sheet-Cheat-Templates-2.5. pdf ▸ Para plantillas Joomla! 3.x: www.joomlack.fr/en/joomla- documentations-tutorials/joomla-3-x-templates- cheatsheet sergioiglesias.net
  43. 43. 4. REGALO CURSO GRATIS Curso Online Desarrollo de Plantillas Joomla!
  44. 44. CURSO ONLINE DESARROLLO PLANTILLAS JOOMLA! Curso online con el que aprenderás a desarrollar tu propia plantilla Joomla! de forma personalizada: ▸ Más de 3 horas de vídeo. ▸ Presentaciones para seguir los vídeos. ▸ ZIP con plantilla demo. ▸ Enlaces a manuales e información de interés. ▸ Certificado de participación. sergioiglesias.net
  45. 45. LOS PASOS A SEGUIR REGÍSTRATE EN MI NEWSLETTER RECIBE TUS CLAVES DE ACCESO MÁS INFORMACIÓN
  46. 46. 5. EXTRA: CUPÓN DESCUENTO
  47. 47. MANAGEMENTFRONT - 25% de DESCUENTO www.managementfront.com Extensión y plantilla de tipo Dashboard para gestionar artículos desde el Front: ▸ Gestión artículos desde el Front. ▸ Plantilla responsive de tipo Dashboard.. ▸ ACL nativo de Joomla!. ▸ Descuento en todos los planes. ▸ El cupón solo dura hasta el Viernes 2 de Octubre 2015. sergioiglesias.net
  48. 48. LOS PASOS A SEGUIR ENTRA EN LA WEB Y REGÍSTRATE www.managementfront.com INTRODUCE EL CUPÓN JD15SEV Y TENDRÁS EL 25% DE DESCUENTO (en cualquier plan)
  49. 49. GRACIAS! alguna pregunta? Puedes encontrarme en @sergiois & info@sergioiglesias.net sergioiglesias.net

×