SlideShare una empresa de Scribd logo

Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias

Taller de desarrollo de plantillas para Joomla! 1.5 y 1.7 impartido por Sergio Iglesias en el Joomla!Day 2011 España celebrado en Zaragoza

1 de 43
Descargar para leer sin conexión
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias
Sergio Iglesias Sánchez




                              9 y 10 /
                          Noviembre /
                               2011 /
Plantillas Joomla!

   Desarrollo de plantillas
     Joomla! 1.5 y 1.7




                                  9 y 10 /
                              Noviembre /
                                   2011 /
Desarrollo de Plantillas Joomla! 1.5

  - XHTML + CSS + PHP
  - Qué es una plantilla
  - Frameworks de desarrollo
  - Estructura básica de archivos
  - templateDetails.xml
  - API Joomla!
  - Templates Overrides
  - Ejemplo plantilla
      · index.php + template.css + params.ini
  - Novedades y diferencias en Joomla! 1.7
  - Curiosidades

 Plantillas Joomla!
 Curso “Nombre del Curso”. Ciudad.
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 el W3C.


 Plantillas Joomla!
 Curso “Nombre del Curso”. Ciudad.

Recomendados

#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!SergioIglesiasNET
 
JoomlaDay Sevilla 2015 - Desarrollo de plantillas Joomla!
JoomlaDay Sevilla 2015 - Desarrollo de plantillas Joomla!JoomlaDay Sevilla 2015 - Desarrollo de plantillas Joomla!
JoomlaDay Sevilla 2015 - Desarrollo de plantillas Joomla!SergioIglesiasNET
 
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...
Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio ...SergioIglesiasNET
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!SergioIglesiasNET
 
Joomla! en 10 minutos - JoomlaDay Sevilla 2015
Joomla! en 10 minutos  - JoomlaDay Sevilla 2015Joomla! en 10 minutos  - JoomlaDay Sevilla 2015
Joomla! en 10 minutos - JoomlaDay Sevilla 2015Carlos M. Cámara
 
Guia word press
Guia word pressGuia word press
Guia word pressivan1587
 
J!D Barcelona 2009 - Taller Plantillas Avanzado
J!D Barcelona 2009 - Taller Plantillas AvanzadoJ!D Barcelona 2009 - Taller Plantillas Avanzado
J!D Barcelona 2009 - Taller Plantillas AvanzadoSergioIglesiasNET
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRvalgreens
 

Más contenido relacionado

La actualidad más candente

Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Hernan Beati
 
Twig y otros "themas" en Drupal 8
Twig y otros "themas" en Drupal 8Twig y otros "themas" en Drupal 8
Twig y otros "themas" en Drupal 8Pakman Lh
 
Primeros pasos Symfony PHPVigo
Primeros pasos Symfony PHPVigoPrimeros pasos Symfony PHPVigo
Primeros pasos Symfony PHPVigoPHP Vigo
 
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates WorkshopJoomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshopjoomlaprojects
 
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...JaenFrankcezco
 
Desarrollo rápido de páginas web con Joomla!
Desarrollo rápido de páginas web con Joomla!Desarrollo rápido de páginas web con Joomla!
Desarrollo rápido de páginas web con Joomla!Remigio Salvador Sánchez
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYJuan Eladio Sánchez Rosas
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyFRONTDAYS
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5Cycle-IT
 
Wordcamp España Online - Menos plugins y más optimización SEO
Wordcamp España Online - Menos plugins y más optimización SEOWordcamp España Online - Menos plugins y más optimización SEO
Wordcamp España Online - Menos plugins y más optimización SEODavid Ayala Gil
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5ADWE Team
 
Html5 telefonica-curso
Html5 telefonica-cursoHtml5 telefonica-curso
Html5 telefonica-cursoJuan Quemada
 
Pablo Arias: Joomla como herramienta para el desarrollo web
Pablo Arias: Joomla como herramienta para el desarrollo webPablo Arias: Joomla como herramienta para el desarrollo web
Pablo Arias: Joomla como herramienta para el desarrollo webPHP Vigo
 
Drupal creación módulos, bloques, formularios y alters
Drupal  creación módulos, bloques, formularios y altersDrupal  creación módulos, bloques, formularios y alters
Drupal creación módulos, bloques, formularios y altersSergio Carracedo Martinez
 

La actualidad más candente (19)

HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Twig y otros "themas" en Drupal 8
Twig y otros "themas" en Drupal 8Twig y otros "themas" en Drupal 8
Twig y otros "themas" en Drupal 8
 
Primeros pasos Symfony PHPVigo
Primeros pasos Symfony PHPVigoPrimeros pasos Symfony PHPVigo
Primeros pasos Symfony PHPVigo
 
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates WorkshopJoomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
 
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
 
Desarrollo rápido de páginas web con Joomla!
Desarrollo rápido de páginas web con Joomla!Desarrollo rápido de páginas web con Joomla!
Desarrollo rápido de páginas web con Joomla!
 
HTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas SemanticasHTML5 Nuevas Etiquetas Semanticas
HTML5 Nuevas Etiquetas Semanticas
 
HTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOYHTML5 y los desafíos del desarrollo web de HOY
HTML5 y los desafíos del desarrollo web de HOY
 
NUEVO!!! EN HTML 5
NUEVO!!! EN HTML 5NUEVO!!! EN HTML 5
NUEVO!!! EN HTML 5
 
HTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoyHTML5 y CSS3: como sacarles partido hoy
HTML5 y CSS3: como sacarles partido hoy
 
Html5
Html5Html5
Html5
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Wordcamp España Online - Menos plugins y más optimización SEO
Wordcamp España Online - Menos plugins y más optimización SEOWordcamp España Online - Menos plugins y más optimización SEO
Wordcamp España Online - Menos plugins y más optimización SEO
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
 
Html5 telefonica-curso
Html5 telefonica-cursoHtml5 telefonica-curso
Html5 telefonica-curso
 
Pablo Arias: Joomla como herramienta para el desarrollo web
Pablo Arias: Joomla como herramienta para el desarrollo webPablo Arias: Joomla como herramienta para el desarrollo web
Pablo Arias: Joomla como herramienta para el desarrollo web
 
Curso html5-v1
Curso html5-v1Curso html5-v1
Curso html5-v1
 
Drupal creación módulos, bloques, formularios y alters
Drupal  creación módulos, bloques, formularios y altersDrupal  creación módulos, bloques, formularios y alters
Drupal creación módulos, bloques, formularios y alters
 

Similar a Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias

Manual plantillas joomla_15
Manual plantillas joomla_15Manual plantillas joomla_15
Manual plantillas joomla_15Dideco
 
Drupal conceptos básicos y su alcance en proyectos
Drupal conceptos básicos y su alcance en proyectosDrupal conceptos básicos y su alcance en proyectos
Drupal conceptos básicos y su alcance en proyectosWalter Herrera
 
Desarrollar un módulo para joomla
Desarrollar un módulo para joomlaDesarrollar un módulo para joomla
Desarrollar un módulo para joomlaivanGorL
 
Creando módulos en Drupal 7
Creando módulos en Drupal 7Creando módulos en Drupal 7
Creando módulos en Drupal 7Edgar Dueñas
 
Zenphp - Presentación de Septiembre en la Etsiit - Programador PHP
Zenphp - Presentación de Septiembre en la Etsiit - Programador PHPZenphp - Presentación de Septiembre en la Etsiit - Programador PHP
Zenphp - Presentación de Septiembre en la Etsiit - Programador PHPJuan Belón Pérez
 
Manual Plantillas Joomla 15
Manual Plantillas Joomla 15Manual Plantillas Joomla 15
Manual Plantillas Joomla 15BarCamp Quito
 
Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5
Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5
Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5SergioIglesiasNET
 
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroPresentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroCLEFormación
 
Joomla Curso Noviembre
Joomla Curso NoviembreJoomla Curso Noviembre
Joomla Curso Noviembrejomyto
 
Joomla Curso Noviembre
Joomla Curso NoviembreJoomla Curso Noviembre
Joomla Curso NoviembreÁngel Puente
 
Joomla! Curso Noviembre
Joomla! Curso NoviembreJoomla! Curso Noviembre
Joomla! Curso NoviembreÁngel Puente
 

Similar a Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias (20)

html5
html5html5
html5
 
Legislacion 2
Legislacion 2Legislacion 2
Legislacion 2
 
Manual plantillas joomla_15
Manual plantillas joomla_15Manual plantillas joomla_15
Manual plantillas joomla_15
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Drupal conceptos básicos y su alcance en proyectos
Drupal conceptos básicos y su alcance en proyectosDrupal conceptos básicos y su alcance en proyectos
Drupal conceptos básicos y su alcance en proyectos
 
CMS - Joomla
CMS - JoomlaCMS - Joomla
CMS - Joomla
 
Manual del desarrollador
Manual del desarrolladorManual del desarrollador
Manual del desarrollador
 
Desarrollar un módulo para joomla
Desarrollar un módulo para joomlaDesarrollar un módulo para joomla
Desarrollar un módulo para joomla
 
Creando módulos en Drupal 7
Creando módulos en Drupal 7Creando módulos en Drupal 7
Creando módulos en Drupal 7
 
Zenphp - Presentación de Septiembre en la Etsiit - Programador PHP
Zenphp - Presentación de Septiembre en la Etsiit - Programador PHPZenphp - Presentación de Septiembre en la Etsiit - Programador PHP
Zenphp - Presentación de Septiembre en la Etsiit - Programador PHP
 
Exposicion Mambo
Exposicion  MamboExposicion  Mambo
Exposicion Mambo
 
Manual Plantillas Joomla 15
Manual Plantillas Joomla 15Manual Plantillas Joomla 15
Manual Plantillas Joomla 15
 
Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5
Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5
Joomla!Day Valencia 2010 Taller Desarrollo de Plantillas para Joomla! 1.5
 
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroPresentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
 
Joomla Curso Noviembre
Joomla Curso NoviembreJoomla Curso Noviembre
Joomla Curso Noviembre
 
Joomla Curso Noviembre
Joomla Curso NoviembreJoomla Curso Noviembre
Joomla Curso Noviembre
 
Joomla! Curso Noviembre
Joomla! Curso NoviembreJoomla! Curso Noviembre
Joomla! Curso Noviembre
 
Manual plantillas joomla_15 f
Manual plantillas joomla_15 fManual plantillas joomla_15 f
Manual plantillas joomla_15 f
 
Frameworks de templates y xml
Frameworks de templates y xmlFrameworks de templates y xml
Frameworks de templates y xml
 
2_4_Los_metadatos_El_elemento_head.pdf
2_4_Los_metadatos_El_elemento_head.pdf2_4_Los_metadatos_El_elemento_head.pdf
2_4_Los_metadatos_El_elemento_head.pdf
 

Último

DOCUMENTO |1-sobre ficha de postulacionm
DOCUMENTO |1-sobre ficha de postulacionmDOCUMENTO |1-sobre ficha de postulacionm
DOCUMENTO |1-sobre ficha de postulacionmdavidcamposyupanqui
 
entro1-Sobre ficha de postulaciónpresalon
entro1-Sobre ficha de postulaciónpresalonentro1-Sobre ficha de postulaciónpresalon
entro1-Sobre ficha de postulaciónpresalonsalonapre
 
ducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docx
ducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docxducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docx
ducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docxshakirpieraraujocubi
 
Política Evaluación Proveedores Okticket
Política Evaluación Proveedores OkticketPolítica Evaluación Proveedores Okticket
Política Evaluación Proveedores OkticketRubén Llames
 
las guerras carlistas Ana y Paloma .
las guerras carlistas Ana y Paloma     .las guerras carlistas Ana y Paloma     .
las guerras carlistas Ana y Paloma .anagc806
 
Política Integrada de Gestión de Okticket
Política Integrada de Gestión de OkticketPolítica Integrada de Gestión de Okticket
Política Integrada de Gestión de OkticketRubén Llames
 
Poka Yoke o Baka Yoke Universidad de Sonora Ing Semiconductores
Poka Yoke o Baka Yoke Universidad de Sonora Ing SemiconductoresPoka Yoke o Baka Yoke Universidad de Sonora Ing Semiconductores
Poka Yoke o Baka Yoke Universidad de Sonora Ing SemiconductoresSalvatoreSagnelliSal
 
Programa de Actividades Team Building y Experiencias para Empresas
Programa de Actividades Team Building y Experiencias para EmpresasPrograma de Actividades Team Building y Experiencias para Empresas
Programa de Actividades Team Building y Experiencias para EmpresasRubén
 
RECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdf
RECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdfRECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdf
RECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdfprinverperueirl
 
CIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsx
CIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsxCIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsx
CIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsxCORPORACIONJURIDICA
 
CIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsx
CIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsxCIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsx
CIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsxCORPORACIONJURIDICA
 
Documento 1 - Sobre ficha de postulación
Documento 1 - Sobre ficha de postulaciónDocumento 1 - Sobre ficha de postulación
Documento 1 - Sobre ficha de postulaciónutilisare2023
 
SIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docx
SIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docxSIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docx
SIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docxjhonatanguisabalo
 
Temas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfg
Temas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfgTemas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfg
Temas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfgVictorCarreteroMoren
 

Último (14)

DOCUMENTO |1-sobre ficha de postulacionm
DOCUMENTO |1-sobre ficha de postulacionmDOCUMENTO |1-sobre ficha de postulacionm
DOCUMENTO |1-sobre ficha de postulacionm
 
entro1-Sobre ficha de postulaciónpresalon
entro1-Sobre ficha de postulaciónpresalonentro1-Sobre ficha de postulaciónpresalon
entro1-Sobre ficha de postulaciónpresalon
 
ducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docx
ducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docxducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docx
ducumento 1 sobre los sIGNOS DE PUNTUACIÓN ALUMNO .docx
 
Política Evaluación Proveedores Okticket
Política Evaluación Proveedores OkticketPolítica Evaluación Proveedores Okticket
Política Evaluación Proveedores Okticket
 
las guerras carlistas Ana y Paloma .
las guerras carlistas Ana y Paloma     .las guerras carlistas Ana y Paloma     .
las guerras carlistas Ana y Paloma .
 
Política Integrada de Gestión de Okticket
Política Integrada de Gestión de OkticketPolítica Integrada de Gestión de Okticket
Política Integrada de Gestión de Okticket
 
Poka Yoke o Baka Yoke Universidad de Sonora Ing Semiconductores
Poka Yoke o Baka Yoke Universidad de Sonora Ing SemiconductoresPoka Yoke o Baka Yoke Universidad de Sonora Ing Semiconductores
Poka Yoke o Baka Yoke Universidad de Sonora Ing Semiconductores
 
Programa de Actividades Team Building y Experiencias para Empresas
Programa de Actividades Team Building y Experiencias para EmpresasPrograma de Actividades Team Building y Experiencias para Empresas
Programa de Actividades Team Building y Experiencias para Empresas
 
RECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdf
RECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdfRECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdf
RECURSOS ESPECIFICOS A ACTIVIDADES DE RSE A LO LARGO DEL AÑO.pdf
 
CIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsx
CIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsxCIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsx
CIRCULAR INFORMATIVA FIESTAS LABORALES 2024.ppsx
 
CIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsx
CIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsxCIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsx
CIRCULAR INFORMATIVA AYUDAS ELX EMPLEA 2024.ppsx
 
Documento 1 - Sobre ficha de postulación
Documento 1 - Sobre ficha de postulaciónDocumento 1 - Sobre ficha de postulación
Documento 1 - Sobre ficha de postulación
 
SIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docx
SIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docxSIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docx
SIGNOS DE PUNTUACIÓN ALUMNO PARA EL.docx
 
Temas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfg
Temas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfgTemas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfg
Temas 4-5 ilustrados .pptx ghvfhfgdffgfgfgfg
 

Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias

  • 3. Sergio Iglesias Sánchez 9 y 10 / Noviembre / 2011 /
  • 4. Plantillas Joomla! Desarrollo de plantillas Joomla! 1.5 y 1.7 9 y 10 / Noviembre / 2011 /
  • 5. Desarrollo de Plantillas Joomla! 1.5 - XHTML + CSS + PHP - Qué es una plantilla - Frameworks de desarrollo - Estructura básica de archivos - templateDetails.xml - API Joomla! - Templates Overrides - Ejemplo plantilla · index.php + template.css + params.ini - Novedades y diferencias en Joomla! 1.7 - Curiosidades Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 6. 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 el W3C. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 7. 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 el W3C. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 8. xHTML + CSS + PHP PHP Lenguaje de programación del lado de servidor. Pre-procesador Hipertexto (lenguaje de programación interpretado). Acceso a base de datos (MySQL). Ventajas: Desarrollo de páginas web dinámicas. Lenguaje multiplataforma. Cuidado con versiones PHP 5 y PHP 6. Aplicaciones creadas con PHP: Joomla! SugarCRM FaceBook Tuenti Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 9. 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 sepración entre la estructura (forma), contenido y estilo. HTML/xHTML/HTML5 → estructura DB → contenido CSS → estilo Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 10. Frameworks de desarrollo Qué es Estructura de software compuesta de componentes personalizables e intercambiables para el desarrollo de una aplicación. Ventajas: Acelerar 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/blog/template-news/introducing-zen-grid-framework-2 T3: http://wiki.joomlart.com/wiki/JA_Template_Framework/Overview YJSG: http://yjsimplegrid.com/ Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 11. Estructura básica de archivos Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 12. 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 de la plantilla y las llamadas PHP a la API de Joomla! (punto de entrada a la plantilla). params.ini: guarda los parámetros personalizables desde el administrador. template_thumbnail.png: imagen en miniatura de la plantilla. template_preview.png: sólo para Joomla! 1.7 css: carpeta con archivos CSS (hojas de estilo). template.css: archivo principal con el código de estilo de la plantilla. images: carpeta con las imágenes utilizadas en la plantilla. html: contiene vistas personalizadas para distintos componentes y módulos (técnica template overrides). templateDetails.xml: contiene información necesaria para la correcta instalación de la plantilla. Define los parámetros personalizables. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 13. templateDetails.xml Imprescindible para que la plantilla sea reconocida por el administrador. 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. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 14. templateDetails.xml • Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción. • Cambios en Joomla! 1.7 Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 15. templateDetails.xml • Especificación de los archivos utilizados en el diseño. • Para incluir una carpeta entera utilizar: <folder>nombre_carpeta</folder> Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 16. templateDetails.xml • Qué y cuántas posiciones tendremos en nuestro sitio (para mostrar contenido en la plantilla. Curso “Nombre del Curso”. Ciudad.
  • 17. templateDetails.xml • Parámetros: para ser manejados desde el back. Hace que una plantilla sea más versátil. • Este apartado está íntimamente ligado al archivo params.ini • Cambios en Joomla! 1.7 Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 18. templateDetails.xml Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 19. API Joomla! – Directivas 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 y cualquier otro archivo. $mainframe→getCfg('sitename') Obtenemos el nombre del sitio. <jdoc:include type=”modules” name=”posicion” style=”estilo”/> Indica la carga de un módulo en particular y de una manera específica (parámetros name y style). 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). Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 20. API Joomla! – Directivas JDoc <jdoc:include type=”component”/> Cargamos contenido principal del sitio: artículos, secciones, categorías, 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 $this->language Contiene el idioma en el que se encuentra nuestro sitio (es-ES, en- GB...). Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 21. Templates Overrides Técnica para redefinir la presentación por pantalla de un componente o módulo de Joomla! “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 actualizaciones de extensiones. Validación de estándares propuestos por el W3C. Conseguir un nivel adecuado de accesibilidad (algunas extensiones, inclusos las propias, no cumplen accesibilidad). Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 22. Templates Overrides USO Crear una carpeta llamada html dentro de nuestra plantilla templates/plantilla/html/ Dentro de esta carpeta meter las carpetas de los componentes y/o módulos que queramos redefinir o “clonar”. Copiar el contenido de la carpeta tmpl (vistas) y realizar en ellos las modificaciones/adaptaciones necesarias. Joomla!, al generar la página web, mira si hay en la plantilla una redefinición o “clon”. Si la encuentra, la utiliza. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 23. Ejemplo plantilla – index.php Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 24. Ejemplo plantilla – index.php Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 25. Ejemplo plantilla – index.php Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 26. Ejemplo plantilla – template.css Insertar estilos para la maquetación de la plantilla. Conocer clases que Joomla! carga por defecto: componentheading: muestra título del componente. contentheading: muestra título de los artículos. buttonheading: muestra iconos PDF, imptimir y enviar amigo. small: utilizado en varios elementos (como autor de artículo). createdate: muestra fecha creación artículo. readon: utilizada por el link de “leer más...”. article_separator: utilizada por etiqueta <span> que separa artículos entre sí. moduletable(+ sufijo): carga los div (y sufijo que se da desde back). h3: títulos de los módulos que se cargan con esta etiqueta. active: para item del menú activo. item: cada elemento del menú (+ su ID). parent: cuando hay sub-items (para elemento padre). Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 27. Ejemplo plantilla – template.css Otras clases: button: asociada a elementos tipo botón. inputbox: asociada a elementos text-input. pagenav: asociada a paginación de artículos. moditydate: asociada a fecha de modificación de artículos. sectiontableentre1/sectiointableentry2: asociada a datos en tablas. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 28. Ejemplo plantilla – template.css Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 29. Ejemplo plantilla – template.css Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 30. Ejemplo plantilla – template.css Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 31. Ejemplo plantilla – template.css Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 32. Ejemplo plantilla – template.css Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 33. Ejemplo plantilla – params.ini Íntimamente ligada a templateDetails.xml Sus parámetros se ponen en este fichero Declaración: nombre_del_parametro_1=valor_1 nombre_del_parametro_2=valor_2 nombre_del_parametro_3=valor_3 Llamada desde PHP: <?php echo $this->params->get('nombre_del_parametro'); ?> Añadir estilos asociados en template.css Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 34. Ejemplo plantilla – params.ini Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 35. Novedades y diferencias en Joomla! 1.7 Algunas novedades Salida de contenido sin tablas: todos los archivos de salida están escritos en XHTML 1.0 Strict. Template styles (estilos de plantilla): creación de variaciones en la plantilla para una o varias páginas que pueden ser asignadas de forma específica. Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 36. Novedades y diferencias en Joomla! 1.7 templateDetails.xml Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 37. Novedades y diferencias en Joomla! 1.7 templateDetails.xml (en Joomla! 1.5) Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 38. Novedades y diferencias en Joomla! 1.7 templateDetails.xml (en Joomla! 1.7) Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 39. Novedades y diferencias en Joomla! 1.7 index.php En Joomla! 1.5 definíamos la variable mainframe así: global $mainframe; En Joomla! 1.6 y 1.7: $mainframe = JFactory::getApplication(); Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 40. Curiosidades Algunas curiosidades y pequeños tips Posible rediseño de joomla.org https://plus.google.com/photos/108983221798389280265/albums/5643812923156404913 Posible rediseño del administrador https://plus.google.com/photos/108983221798389280265/albums/5625370216902790289 Plantillas para administrador: no solo hay plantillas para la parte front http://www.sergioiglesias.net/blog/joomla/119-plantillas-gratis-para-adminitrador-de-joomla-15-y-16 Mostrar posiciones en plantilla http://www.sergioiglesias.net/blog/joomla/90-visualizacion-de-posiciones-en-plantillas-16-con-tp1 Añadir teclas de acceso rápido: accesskey http://www.sergioiglesias.net/blog/joomla/89-anadir-etiquetas-accesskey-en-joomla-16 Ordenar módulos y artículos Definición propia de módulos en template <jdoc:include type="modules" name="blog" style="blog" /> Ver html/modules.php Plantillas Joomla! Curso “Nombre del Curso”. Ciudad.
  • 41. Publicidad Libro Joomla! 1.6 – Guía de referencia en español Guía de referencia en español Minitutoriales Introducción Instalar XAMPP Novedades en Joomla! 1.6 Instalar Joomla! 1.6 Enlaces de interés Joomla! Gestionar permisos Acceso al panel de control Crear un artículo Sitio Crear un contacto Usuarios Integrar noticias Menús Añadir un módulo submenú Contenido Habilitar la vista de módulos Componentes Añadir accesskey Extensiones Integrar DNI electrónico Ayuda Enlaces de interés www.librojoomla16.com Plantillas Joomla! Curso”. Ciudad. Curso “Nombre del
  • 42. Publicidad Sergio Iglesias www.sergioiglesias.net twitter.com/sergiois Plantillas Joomla! Curso”. Ciudad. Curso “Nombre del
  • 43. Fin del taller Gracias por vuestra atención Plantillas Joomla! Curso”. Ciudad. Curso “Nombre del