J!D Barcelona 2009 - Taller Plantillas Avanzado

JOOMLA! 1.5.X

Joomla!Day 2009 - Barcelona

Taller: Desarrollo de Plantillas

Autor: Sergio Iglesias SánchezFecha: Viernes 11 de Diciembre

Í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

1. Estructura básica de una plantilla


3

1. Estructura básica de una plantilla

2. templateDetails.xml


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.a. Datos (templateDetails.xml)5

Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción.


5


2.b. Archivos (templateDetails.xml)6

Especificación de los archivos utilizados en el diseño.


6


2.c. Posiciones (templateDetails.xml)

7

Qué y cuántas posiciones tendremos en nuestro sitio (para mostrar contenido en pantalla).


7


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


8



COMPLUSOFT – Curso Joomla! 1.5.X

9


9


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


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


3. index.php III12

3. index.php

12


3. index.php IV13

3. index.php

13


3. index.php V14

3. index.php

14


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


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


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


4. template.css IV18

4. template.css

18


4. template.css V19

4. template.css

19


4. template.css VI20

4. template.css

20


4. template.css VII21

4. template.css

21


4. template.css VIII22

4. template.css

22


4. template.css IX23

4. template.css

23


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


5. params.ini II25

5. params.ini

25


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


6. Templates Overrides

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



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



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


7. Joomla + iPhone + Androide + PDA

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



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



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



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



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


8. Trucos de codificación

8. Trucos de codificación35

Extensiones de FireFox: FireBug HTML validator

35



Fin del taller36

Gracias por su asistencia.

Más información en…[email protected]

36



J!D Barcelona 2009 - Taller Plantillas Avanzado

Business