View
3.995
Download
1
Category
Preview:
DESCRIPTION
Taller de Plantillas avanzado impartido en el Joomla!Day 2009 en la ciudad de Barcelona.
Citation preview
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
Joomla!Day 2009 - Taller: Desarrollo de plantillas
3
1. Estructura básica de una plantilla
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
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
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
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
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
2. templateDetails.xml
COMPLUSOFT – Curso Joomla! 1.5.X
9
2. templateDetails.xml
9
Joomla!Day 2009 - Taller: Desarrollo de plantillas
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
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
3. index.php III12
3. index.php
12
Joomla!Day 2009 - Taller: Desarrollo de plantillas
3. index.php IV13
3. index.php
13
Joomla!Day 2009 - Taller: Desarrollo de plantillas
3. index.php V14
3. index.php
14
Joomla!Day 2009 - Taller: Desarrollo de plantillas
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
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
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
4. template.css IV18
4. template.css
18
Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css V19
4. template.css
19
Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css VI20
4. template.css
20
Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css VII21
4. template.css
21
Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css VIII22
4. template.css
22
Joomla!Day 2009 - Taller: Desarrollo de plantillas
4. template.css IX23
4. template.css
23
Joomla!Day 2009 - Taller: Desarrollo de plantillas
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
5. params.ini II25
5. params.ini
25
Joomla!Day 2009 - Taller: Desarrollo de plantillas
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
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
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
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
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
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
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
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
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
8. Trucos de codificación35
Extensiones de FireFox: FireBug HTML validator
35
Joomla!Day 2009 - Taller: Desarrollo de plantillas
8. Trucos de codificación
Fin del taller36
Gracias por su asistencia.
Más información en…sergio.iglesias@complusoft.es
36
Joomla!Day 2009 - Taller: Desarrollo de plantillas
8. Trucos de codificación
Recommended