JOOMLA! 1.5.X Joomla!Day 2009 - Barcelona Taller: Desarrollo de Plantillas Autor: Sergio Iglesias Sánchez Fecha: Viernes 1...
Índice <ul><li>Repaso: estructura básica de una plantilla. </li></ul><ul><li>templateDetails.xml </li></ul><ul><li>index.p...
1.  Estructura básica de una plantilla  Joomla!Day 2009 - Taller: Desarrollo de plantillas 1. Estructura básica de una pla...
2. templateDetails.xml <ul><li>Determinante para que la plantilla sea reconocida en el back. </li></ul><ul><li>Datos divid...
2.a. Datos (templateDetails.xml) <ul><li>Datos específicos de la plantilla: versión, autor, email, página web, año, licenc...
2.b. Archivos (templateDetails.xml) <ul><li>Especificación de los archivos utilizados en el diseño. </li></ul>2. templateD...
2.c. Posiciones (templateDetails.xml) <ul><li>Qué y cuántas posiciones tendremos en nuestro sitio (para mostrar contenido ...
2.d. Parámetros (templateDetails.xml) <ul><li>Para ser manejados desde el back: hace que una plantilla sea más versátil. <...
2. templateDetails.xml COMPLUSOFT – Curso Joomla! 1.5.X 2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de pla...
3. index.php I <ul><li>Formado por etiquetas HTML (maquetación) y directivas PHP de Joomla! </li></ul><ul><ul><li><jdoc:in...
3. index.php II <ul><ul><li><jdoc:include type=“modules” name=“posición” style=“estilo” /> </li></ul></ul><ul><ul><ul><li>...
3. index.php III 3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
3. index.php IV 3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
3. index.php V 3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css I <ul><li>Insertar estilos para la maquetación de la plantilla. </li></ul><ul><li>Conocer clases que Jooml...
4. template.css II <ul><ul><li>readon: utilizada por ling “Leer más…” </li></ul></ul><ul><ul><li>article_separator: utiliz...
4. template.css III <ul><ul><li>parent: cuando hay sub-items (para elemento padre). </li></ul></ul><ul><li>Otras clases im...
4. template.css IV 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css V 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css VI 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css VII 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css VIII 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css IX 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
5. params.ini I <ul><li>Íntimamente ligada a templateDetails.xml </li></ul><ul><ul><li>Sus parámetros se ponen en este fic...
5. params.ini II 5. params.ini Joomla!Day 2009 - Taller: Desarrollo de plantillas
6. Template Overrides I <ul><li>Técnica para redefinir la presentación por pantalla de un componente o módulo de Joomla. <...
6. Template Overrides II <ul><li>Uso: </li></ul><ul><ul><li>Crear una carpeta llamada html dentro de nuestra plantilla ( t...
6. Template Overrides III <ul><li>Ejemplo: </li></ul><ul><ul><li>Queremos poner un atributo “alt” a la imagen del módulo d...
7. Joomla + iPhone + Android + PDA I <ul><li>Cada vez es más frecuente el acceso a internet a través de móviles y PDAs. </...
7. Joomla + iPhone + Android + PDA II <ul><li>Para adaptar nuestro Joomla a estos dispositivos podemos elegir una de estas...
7. Joomla + iPhone + Android + PDA II <ul><li>1/ Plugin PDA </li></ul><ul><li>Uno de los plugin más utilizados. </li></ul>...
7. Joomla + iPhone + Android + PDA III <ul><li>2/ Auto Template Switcher </li></ul><ul><li>Permite servir hasta 3 plantill...
7. Joomla + iPhone + Android + PDA IV <ul><li>3/ Kuneri MobileJoomla ( http://www.mobilejoomla.com/ ) </li></ul><ul><li>Pr...
8. Trucos de codificación <ul><li>Para adaptar nuestro Joomla y conseguir contenido más accesible: </li></ul><ul><ul><li>U...
8. Trucos de codificación <ul><li>Extensiones de FireFox: </li></ul><ul><ul><li>FireBug </li></ul></ul><ul><ul><li>HTML va...
Fin del taller <ul><li>Gracias por su asistencia. </li></ul><ul><li>Más información en… [email_address] </li></ul>Joomla!D...
Upcoming SlideShare
Loading in …5
×

J!D Barcelona 2009 - Taller Plantillas Avanzado

3,328 views
3,191 views

Published on

Taller de Plantillas avanzado impartido en el Joomla!Day 2009 en la ciudad de Barcelona.

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,328
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
155
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • 1. Errores más comunes en PHP
  • J!D Barcelona 2009 - Taller Plantillas Avanzado

    1. 1. JOOMLA! 1.5.X Joomla!Day 2009 - Barcelona Taller: Desarrollo de Plantillas Autor: Sergio Iglesias Sánchez Fecha: Viernes 11 de Diciembre
    2. 2. Índice <ul><li>Repaso: estructura básica de una plantilla. </li></ul><ul><li>templateDetails.xml </li></ul><ul><li>index.php </li></ul><ul><li>template.css </li></ul><ul><li>params.ini </li></ul><ul><li>Template Overrides </li></ul><ul><li>Joomla + iPhone + Android + PDA </li></ul><ul><li>Trucos de codificación  ver documentos </li></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas
    3. 3. 1. Estructura básica de una plantilla Joomla!Day 2009 - Taller: Desarrollo de plantillas 1. Estructura básica de una plantilla
    4. 4. 2. templateDetails.xml <ul><li>Determinante para que la plantilla sea reconocida en el back. </li></ul><ul><li>Datos divididos en 4 partes: </li></ul><ul><ul><li>Datos. </li></ul></ul><ul><ul><li>Archivos. </li></ul></ul><ul><ul><li>Posiciones. </li></ul></ul><ul><ul><li>Parámetros. </li></ul></ul><ul><li>Los datos de los parámetros podrán ser utilizados desde el back para cambiar la visualización. </li></ul><ul><li>Se utiliza como instalador de la plantilla. </li></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 2. templateDetails.xml
    5. 5. 2.a. Datos (templateDetails.xml) <ul><li>Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción. </li></ul>2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
    6. 6. 2.b. Archivos (templateDetails.xml) <ul><li>Especificación de los archivos utilizados en el diseño. </li></ul>2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
    7. 7. 2.c. Posiciones (templateDetails.xml) <ul><li>Qué y cuántas posiciones tendremos en nuestro sitio (para mostrar contenido en pantalla). </li></ul>2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
    8. 8. 2.d. Parámetros (templateDetails.xml) <ul><li>Para ser manejados desde el back: hace que una plantilla sea más versátil. </li></ul><ul><li>Este apartado está íntimamente ligado al archivo params.ini </li></ul>2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
    9. 9. 2. templateDetails.xml COMPLUSOFT – Curso Joomla! 1.5.X 2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
    10. 10. 3. index.php I <ul><li>Formado por etiquetas HTML (maquetación) y directivas PHP de Joomla! </li></ul><ul><ul><li><jdoc:include type=“head” /> </li></ul></ul><ul><ul><ul><li>Va dentro de la cabecera HTML (head) </li></ul></ul></ul><ul><ul><ul><li>Muestra el título, metatags, feed y js (MooTools) </li></ul></ul></ul><ul><ul><li>$this  template </li></ul></ul><ul><ul><ul><li>Obtenemos el nombre de la carpeta que contiene nuestra plantilla. </li></ul></ul></ul><ul><ul><ul><li>Carga css, favicon y cualquier otro archivo </li></ul></ul></ul><ul><ul><li>$mainframe  getCfg(‘sitename’) </li></ul></ul><ul><ul><ul><li>Obtenemos el nombre del sitio </li></ul></ul></ul>3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
    11. 11. 3. index.php II <ul><ul><li><jdoc:include type=“modules” name=“posición” style=“estilo” /> </li></ul></ul><ul><ul><ul><li>Indica la carga de un módulo en particular y de una manera específica (parámetros name y style). </li></ul></ul></ul><ul><ul><ul><li>name: posiciones cargadas en el fichero templateDetails.xml </li></ul></ul></ul><ul><ul><ul><li>style: table (tabla vertical = columna), horz (tabla horizontal = fila), xhtml (divs), rounde (divs anidados), raw (contenido sin contenedores ni título). </li></ul></ul></ul><ul><ul><li><jdoc:include type=“component” /> </li></ul></ul><ul><ul><ul><li>Cargamos contenido principal del sitio: artículos, secciones, categorías… </li></ul></ul></ul>3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
    12. 12. 3. index.php III 3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
    13. 13. 3. index.php IV 3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
    14. 14. 3. index.php V 3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
    15. 15. 4. template.css I <ul><li>Insertar estilos para la maquetación de la plantilla. </li></ul><ul><li>Conocer clases que Joomla! carga por defecto: </li></ul><ul><ul><li>componentheading: muestra título el componente. </li></ul></ul><ul><ul><li>contentheading: muestra título de los artículos. </li></ul></ul><ul><ul><li>buttonheading: muestra iconos PDF, imprimir y enviar a un amigo. </li></ul></ul><ul><ul><li>small: utilizado en varios elementos (como autor del artículo). </li></ul></ul><ul><ul><li>createdate: muestra fecha creación artículo. </li></ul></ul>4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    16. 16. 4. template.css II <ul><ul><li>readon: utilizada por ling “Leer más…” </li></ul></ul><ul><ul><li>article_separator: utilizada por etiqueta <span> que separa artículos entre sí. </li></ul></ul><ul><li>Conocer clases pertenecientes a módulos: </li></ul><ul><ul><li>moduletable(+ sufijo): carga los div (y el sufijo es el que se le da desde el back). </li></ul></ul><ul><ul><li>h3: los títulos de módulos se cargan con esta etiqueta. </li></ul></ul><ul><ul><li>active: para ítem del menú activo. </li></ul></ul><ul><ul><li>item: cada elemento del menú (+ su ID). </li></ul></ul>4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    17. 17. 4. template.css III <ul><ul><li>parent: cuando hay sub-items (para elemento padre). </li></ul></ul><ul><li>Otras clases importantes: </li></ul><ul><ul><li>button: asociada a elementos tipo botón. </li></ul></ul><ul><ul><li>inputbox: asociada a elementos text-input. </li></ul></ul><ul><ul><li>pagenav: asociada a paginación de artículos. </li></ul></ul><ul><ul><li>modifydate: asociada a fecha modificación “. </li></ul></ul><ul><ul><li>sectiontableentry1 / sectiontableentry2: asociada cuando se muestran datos en tablas. </li></ul></ul>4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    18. 18. 4. template.css IV 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    19. 19. 4. template.css V 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    20. 20. 4. template.css VI 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    21. 21. 4. template.css VII 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    22. 22. 4. template.css VIII 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    23. 23. 4. template.css IX 4. template.css Joomla!Day 2009 - Taller: Desarrollo de plantillas
    24. 24. 5. params.ini I <ul><li>Íntimamente ligada a templateDetails.xml </li></ul><ul><ul><li>Sus parámetros se ponen en este fichero </li></ul></ul><ul><li>Declaración: </li></ul><ul><li>Llamada desde el PHP: </li></ul><ul><li>Añadir estilos en template.css </li></ul>5. params.ini Joomla!Day 2009 - Taller: Desarrollo de plantillas
    25. 25. 5. params.ini II 5. params.ini Joomla!Day 2009 - Taller: Desarrollo de plantillas
    26. 26. 6. Template Overrides I <ul><li>Técnica para redefinir la presentación por pantalla de un componente o módulo de Joomla. </li></ul><ul><li>Se incluye a partir de la versión 1.5.X. </li></ul><ul><li>Ventajas: </li></ul><ul><ul><li>Personalizar el portal sin preocuparse de actualizaciones de extensiones. </li></ul></ul><ul><ul><li>Conseguir un nivel adecuado de accesibilidad. </li></ul></ul><ul><ul><li>Validación de estándares propuestos por el W3C. </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 6. Templates Overrides
    27. 27. 6. Template Overrides II <ul><li>Uso: </li></ul><ul><ul><li>Crear una carpeta llamada html dentro de nuestra plantilla ( templates/plantilla/html/ ). </li></ul></ul><ul><ul><li>Dentro de esta carpeta meter las carpetas de los componentes y/o módulos que queramos redefinir. </li></ul></ul><ul><ul><li>Copiar el contenido de la carpeta tmpl (vistas) y realizar en ellos las modificaciones. </li></ul></ul><ul><ul><li>Joomla, al generar la página web, mira si hay en la plantilla una redefinición. Si la encuentra, la utiliza. </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 6. Templates Overrides
    28. 28. 6. Template Overrides III <ul><li>Ejemplo: </li></ul><ul><ul><li>Queremos poner un atributo “alt” a la imagen del módulo de búsqueda (mod_search). </li></ul></ul><ul><ul><li>Creamos la carpeta html dentro de nuestra plantilla. </li></ul></ul><ul><ul><li>Creamos la carpeta mod_search dentro de html. </li></ul></ul><ul><ul><li>Copiamos los archivos default.php e index.html. </li></ul></ul><ul><ul><li>Buscamos y modificamos el código: $button = '<input type=&quot;image&quot; value=&quot;'.$button_text.'&quot; class=&quot;button'.$moduleclass_sfx.'&quot; alt=&quot;botón buscar&quot; src=&quot;'.$img.'&quot;/>'; </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 6. Templates Overrides
    29. 29. 7. Joomla + iPhone + Android + PDA I <ul><li>Cada vez es más frecuente el acceso a internet a través de móviles y PDAs. </li></ul><ul><li>Con iPhone se dio un gran salto debido a su sistema operativo, pantalla táctil… </li></ul><ul><li>Más tarde llega Android, de la mano de Google: </li></ul><ul><ul><li>Software libre. </li></ul></ul><ul><ul><li>Código abierto. </li></ul></ul><ul><li>Este tipo de pantallas es más pequeño que las de un PC o portatil. </li></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
    30. 30. 7. Joomla + iPhone + Android + PDA II <ul><li>Para adaptar nuestro Joomla a estos dispositivos podemos elegir una de estas posibilidades: </li></ul><ul><ul><li>PDA plugin </li></ul></ul><ul><ul><li>Auto Template Switcher </li></ul></ul><ul><ul><li>Kuneri MobileJoomla </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
    31. 31. 7. Joomla + iPhone + Android + PDA II <ul><li>1/ Plugin PDA </li></ul><ul><li>Uno de los plugin más utilizados. </li></ul><ul><li>Formado por 2 archivos: </li></ul><ul><ul><li>Plantilla </li></ul></ul><ul><ul><li>Plugin </li></ul></ul><ul><li>Modo de empleo: </li></ul><ul><ul><li>Instalar los dos </li></ul></ul><ul><ul><li>Configurar opciones a través del plugin </li></ul></ul><ul><li>Desventajas: </li></ul><ul><ul><li>no funciona con nuevas plataformas </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
    32. 32. 7. Joomla + iPhone + Android + PDA III <ul><li>2/ Auto Template Switcher </li></ul><ul><li>Permite servir hasta 3 plantillas diferentes según el navegador que se utilice. </li></ul><ul><li>Modo de empleo: </li></ul><ul><ul><li>Instalar + Habilitar + Configurar </li></ul></ul><ul><ul><ul><li>Seleccionar posición y No mostrar título </li></ul></ul></ul><ul><ul><ul><li>Definir navegadores y sus plantillas </li></ul></ul></ul><ul><ul><ul><li>Modificar función de /includes/application.php (línea 286) if ($template = $this->get('setTemplate')) { if ($template = $this->getUserState('setTemplate')) { </li></ul></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
    33. 33. 7. Joomla + iPhone + Android + PDA IV <ul><li>3/ Kuneri MobileJoomla ( http://www.mobilejoomla.com/ ) </li></ul><ul><li>Pretende ser el más completo de todos: </li></ul><ul><ul><li>Detección avanzada de User Agent incluyendo WURFL y Compact WURFL </li></ul></ul><ul><ul><li>Soporte de múltiples sitios </li></ul></ul><ul><ul><li>Adaptación de imágenes </li></ul></ul><ul><ul><li>Configuración de layouts líquidos </li></ul></ul><ul><ul><li>Redireccionamiento por subdominio </li></ul></ul><ul><ul><li>Categorización por dispositivo: XHTML, iPhone, iMode y WAP </li></ul></ul><ul><ul><li>Plantillas personalizables por categoría </li></ul></ul><ul><ul><li>Filtrado del menú por categoría </li></ul></ul><ul><ul><li>Totalmente personalizable con diferentes módulos </li></ul></ul><ul><ul><li>Compatibilidad con extensiones, módulos y componentes de terceros </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
    34. 34. 8. Trucos de codificación <ul><li>Para adaptar nuestro Joomla y conseguir contenido más accesible: </li></ul><ul><ul><li>Utilizar dos versiones distintas de MooTools </li></ul></ul><ul><ul><li>Utilizar librería jQuery en front </li></ul></ul><ul><ul><li>Añadir etiquetas accesskey y title a enlaces de menú </li></ul></ul><ul><ul><li>Cambiar etiqueta alt por defecto en Banners </li></ul></ul><ul><ul><li>Javascript no intrusivo </li></ul></ul><ul><ul><ul><li>Iconos PDF, Print, Email </li></ul></ul></ul><ul><ul><ul><li>Validación de formulario de contacto </li></ul></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 8. Trucos de codificación
    35. 35. 8. Trucos de codificación <ul><li>Extensiones de FireFox: </li></ul><ul><ul><li>FireBug </li></ul></ul><ul><ul><li>HTML validator </li></ul></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 8. Trucos de codificación
    36. 36. Fin del taller <ul><li>Gracias por su asistencia. </li></ul><ul><li>Más información en… [email_address] </li></ul>Joomla!Day 2009 - Taller: Desarrollo de plantillas 8. Trucos de codificación

    ×