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