• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
J!D Barcelona 2009 - Taller Plantillas Avanzado
 

J!D Barcelona 2009 - Taller Plantillas Avanzado

on

  • 3,670 views

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

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

Statistics

Views

Total Views
3,670
Views on SlideShare
3,635
Embed Views
35

Actions

Likes
2
Downloads
147
Comments
0

5 Embeds 35

http://www.sergioiglesias.net 17
http://www.slideshare.net 11
http://localhost 4
http://www.linkedin.com 2
http://wildfire.gigya.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 J!D Barcelona 2009 - Taller Plantillas Avanzado Presentation Transcript

  • JOOMLA! 1.5.X Joomla!Day 2009 - Barcelona Taller: Desarrollo de Plantillas Autor: Sergio Iglesias Sánchez Fecha: Viernes 11 de Diciembre
  • Índice
    • Repaso: estructura básica de una plantilla.
    • templateDetails.xml
    • index.php
    • template.css
    • params.ini
    • Template Overrides
    • Joomla + iPhone + Android + PDA
    • Trucos de codificación  ver documentos
    Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 1. Estructura básica de una plantilla Joomla!Day 2009 - Taller: Desarrollo de plantillas 1. Estructura básica de una plantilla
  • 2. templateDetails.xml
    • Determinante para que la plantilla sea reconocida en el back.
    • 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.
    • Se utiliza como instalador de la plantilla.
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 2. templateDetails.xml
  • 2.a. Datos (templateDetails.xml)
    • Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción.
    2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 2.b. Archivos (templateDetails.xml)
    • Especificación de los archivos utilizados en el diseño.
    2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 2.c. Posiciones (templateDetails.xml)
    • Qué y cuántas posiciones tendremos en nuestro sitio (para mostrar contenido en pantalla).
    2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 2.d. Parámetros (templateDetails.xml)
    • 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 Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 2. templateDetails.xml COMPLUSOFT – Curso Joomla! 1.5.X 2. templateDetails.xml Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 3. index.php I
    • 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)
      • $this  template
        • Obtenemos el nombre de la carpeta que contiene nuestra plantilla.
        • Carga css, favicon y cualquier otro archivo
      • $mainframe  getCfg(‘sitename’)
        • Obtenemos el nombre del sitio
    3. index.php Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 3. index.php II
      • <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 Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 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
    • 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 Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 4. template.css II
      • 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 Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 4. template.css III
      • 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 Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 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
    • Í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 Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 5. params.ini II 5. params.ini Joomla!Day 2009 - Taller: Desarrollo de plantillas
  • 6. Template Overrides I
    • 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.
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 6. Templates Overrides
  • 6. Template Overrides II
    • 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.
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 6. Templates Overrides
  • 6. Template Overrides III
    • 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=&quot;image&quot; value=&quot;'.$button_text.'&quot; class=&quot;button'.$moduleclass_sfx.'&quot; alt=&quot;botón buscar&quot; src=&quot;'.$img.'&quot;/>';
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 6. Templates Overrides
  • 7. Joomla + iPhone + Android + PDA I
    • 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.
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
  • 7. Joomla + iPhone + Android + PDA II
    • Para adaptar nuestro Joomla a estos dispositivos podemos elegir una de estas posibilidades:
      • PDA plugin
      • Auto Template Switcher
      • Kuneri MobileJoomla
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
  • 7. Joomla + iPhone + Android + PDA II
    • 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
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
  • 7. Joomla + iPhone + Android + PDA III
    • 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')) {
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
  • 7. Joomla + iPhone + Android + PDA IV
    • 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
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 7. Joomla + iPhone + Androide + PDA
  • 8. Trucos de codificación
    • 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
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 8. Trucos de codificación
  • 8. Trucos de codificación
    • Extensiones de FireFox:
      • FireBug
      • HTML validator
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 8. Trucos de codificación
  • Fin del taller
    • Gracias por su asistencia.
    • Más información en… [email_address]
    Joomla!Day 2009 - Taller: Desarrollo de plantillas 8. Trucos de codificación