• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
MasterClass Desarrollo Plantillas Joomla!
 

MasterClass Desarrollo Plantillas Joomla!

on

  • 1,488 views

MasterClass en Desarrollo de Plantillas Joomla! - Sesión Demostradora - Bilib - Albacete

MasterClass en Desarrollo de Plantillas Joomla! - Sesión Demostradora - Bilib - Albacete

Statistics

Views

Total Views
1,488
Views on SlideShare
1,381
Embed Views
107

Actions

Likes
3
Downloads
61
Comments
2

4 Embeds 107

http://www.sergioiglesias.net 71
http://localhost 28
https://twitter.com 7
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hola Diego. Gracias por tu comentario. En cuanto a versiones de CSS, HTML, PHP y MySQL te recomiendo siempre las últimas. Por ejemplo CSS3 y HTML5. Flash no te lo recomiendo (cuando veas CSS3 y HTML5 te darás cuenta el por qué). En cuanto al editor los más utilizados son NotePad++ y el que está últimamente de moda, Sublime. Salu2!!
    Are you sure you want to
    Your message goes here
    Processing…
  • Excelente documento....te agradecería que me orientes que versión de css debo profundizar, de php, mysql, html, e incluso flash y que editor debo adquirir para crear mis propios sitios sin invertir tanto tiempo y dinero. Ya que he estado practicando joomla 2.5 y hay muchos módulos, plugins y plantillas que tienen defectos y retrasan la creación de una página.....muchas gracias
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    MasterClass Desarrollo Plantillas Joomla! MasterClass Desarrollo Plantillas Joomla! Presentation Transcript

    • Joomla!MasterClass Desarrollo de Plantillas (1.5, 1.6, 1.7, 2.5, 3.0)
    • Joomla!MasterClass Desarrollo de Plantillas (1.5, 1.6, 1.7, 2.5, 3.0) Sergio Iglesias Sánchez www.sergioiglesias.net | twitter.com/sergiois Trabajo en: Complusoft Pertenezco a: OSIberia ● www.complusot.es ● www.osiberia.es ● twitter.com/complusoft ● twitter.com/osiberia
    • ÍNDICE DEL CONTENIDO ● XHTML + CSS + PHP ● Qué es una plantilla ● Frameworks de desarrollo ● Estructura básica de archivos ● templateDetails.xml ● API Joomla! ● Templates Overrides ● Ejemplo: index.php + css + params ● Diferencias entre versiones MasterClass Desarrollo Plantillas Joomla!
    • XHTML + CSS + PHP XHTML + CSS + PHP MasterClass Desarrollo Plantillas Joomla!
    • XHTML + CSS + PHP → XHTML ● Define la estructura de la información. ● Extensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). ● El lenguaje HTML no cumple al 100% las reglas del estándar XML. Para poder aprovechar las ventajas del XML, se hizo necesaria una evolución. del HTML hacia el xHTML, que no es más que una redefinición del lenguaje haciendo más estrictas algunas de sus formulaciones básicas (para que sea totalmente compatible con XML). ● Entre las reglas que forman parte del xHTML, pero no del HTML, podemos citar la obligación de cerrar todas las etiquetas y el uso exclusivo de minúsculas para las palabras del lenguaje (etiquetas). ● Es un estándar del W3C. MasterClass Desarrollo Plantillas Joomla!
    • XHTML + CSS + PHP → CSS ● Define el diseño. ● Cascading Style Sheets (hojas de estilo en cascada). ● Tres formas de aplicar: ● CSS externa → recomendada. ● CSS interna. ● CSS en línea. ● Ventajas: ● Separa el diseño del contenido. ● Mejora el mantenimiento. ● HTML más claro de entender (e indexable). ● Distinto diseño para dispositivo: impresora, PDA... ● Es un estándar del W3C. MasterClass Desarrollo Plantillas Joomla!
    • XHTML + CSS + PHP → PHP ● Lenguaje de programación del lado del servidor. ● Pre-Procesador de Hipertexto: ● Lenguaje de programación interpretado. ● Acceso a base de datos (MySQL). ● Ventajas: ● Desarrollo de páginas web dinámicas. ● Lenguaje multiplataforma. ● Cuidado con las versiones de PHP (5, 6). ● Aplicaciones creadas con PHP: ● Joomla! ● SugarCRM. ● FaceBook. ● Tuenti. MasterClass Desarrollo Plantillas Joomla!
    • QUÉ ES UNA PLANTILLA QUÉ ES UNA PLANTILLA MasterClass Desarrollo Plantillas Joomla!
    • QUÉ ES UNA PLANTILLA ● Es la base de la aplicación de entrega de contenidos. ● Formada por diferentes archivos que controlan la estructura y el diseño de la página y de sus contenidos. ● Ventajas: ● Proporciona una separación entre la estructura, el contenido y el estilo. ● HTML/XHML/HTML5 → estructura ● DB (MySQL, SQL Server...) → contenido ● CSS → estilo MasterClass Desarrollo Plantillas Joomla!
    • FRAMEWORKS DE DESARROLLO FRAMEWORKS DE DESARROLLO MasterClass Desarrollo Plantillas Joomla!
    • FRAMEWORKS DE DESARROLLO ● Estructura de software compuesta de componentes personalizables e intercambiables para el desarrollo de una aplicación. ● Ventajas: ● Acelerar el proceso de desarrollo. ● Reutilizar código ya existente. ● Promover buenas prácticas de desarrollo (uso de patrones). ● Frameworks de plantillas en Joomla!: ● Gantry: http://www.gantry-framework.org/ ● Warp: http://www.yootheme.com/warp/ ● ZenGrid: http://www.joomlabamboo.com/joomla-templates/zen-grid-framework ● T3: http://www.joomlart.com/joomla/t3-framework-and-ja-purity-templates ● YJSG: http://yjsimplegrid.com/ MasterClass Desarrollo Plantillas Joomla!
    • ESTRUCTURA BÁSICA DE ARCHIVOS ESTRUCTURA BÁSICA DE ARCHIVOS MasterClass Desarrollo Plantillas Joomla!
    • ESTRUCTURA BÁSICA DE ARCHIVOS MasterClass Desarrollo Plantillas Joomla!
    • ESTRUCTURA BÁSICA DE ARCHIVOS ● index.html: añade seguridad a las carpetas. Es un fichero vacío. ● index.php: contiene el HTML que define la estructura de la plantilla y las llamadas PHP a la API de Joomla! (punto de entrada al template). ● params.ini: guarda los parámetros personalizables desde el admin. ● template_thumbnail.png: imagen miniatura de la plantilla. ● template_preview: a partir de 1.7. Imagen un poco más grande. ● css: carpeta con los archivos .css que necesita la plantilla. ● template.css: archivo principal con los estilos. ● images: carpeta con las imágenes utilizadas en la plantilla (y css). ● html: contiene vistas personalizadas de extensiones (técnica de template overrides). ● templateDetails.xml: contiene información necesaria para la correcta instalación de la plantilla. Define los parámetros personalizables. MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML TEMPLATEDETAILS.XML MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML ● Imprescindible para que la plantilla sea reconocida por el admin. ● Se utiliza como instalador de la plantilla. ● Todo lo que no esté definido en él, no se instala. ● 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. ● Relacionado con el fichero params.ini MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML → DATOS ● Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción. ● Para Joomla! 1.7 en adelante hay cambios. MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML → ARCHIVOS ● Especificación de los archivos utilizados en la plantilla. ● Recuerda: lo que no se declare aquí, no se instala. ● Para incluir una carpeta completa, utilizar: <folder>nombre_carpeta</folder> MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML → POSICIONES ● Qué y cuántas posiciones tendremos en la plantilla. MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML → PARÁMETROS ● Parámetros: para ser manejados desde el back. Hace que una plantilla sea más versátil. ● Apartado ligado con el fichero params.ini ● Para Joomla! 1.7 en adelante hay cambios MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATEDETAILS.XML MasterClass Desarrollo Plantillas Joomla!
    • API JOOMLA! API JOOMLA! - JDOC MasterClass Desarrollo Plantillas Joomla!
    • API JOOMLA! - JDOC ● <jdoc:include type=”head”/> ● Va dentro de la cabecera HTML (<head>). ● Muestra el title, metatags, feed y js (MooTools). ● $this->template ● Obtenemos el nombre de la carpeta que contiene nuestra plantilla. ● Uso: para cargar css, favicon, js y cualquier otro archivo. ● $mainframe->getCfg(sitename) ● Obtenemos el nombre del sitio. ● <jdoc:inclue type=”modules” name=”posicion” style=”estilo”/> ● Indica la carga de un módulo de una manera específica: ● name: posiciones cargadas en el fichero templateDetails.xml ● style: table (tabla vertical = columna), horz (tabla horizontal = fila), xhtml (divs), rounde (divs anidados), raw (sin contenedor). ● También se pueden crear estilos propios. MasterClass Desarrollo Plantillas Joomla!
    • API JOOMLA! - JDOC ● <jdoc:include type=”component”/> ● Cargamos el contenido principal del sitio (contenido de componentes): artículos, secciones, categorías, calendarios... ● if($this->countModules(nombre_posicion)){} ● Condicional para saber si hay algún módulo en una posición determinada. ● $this->baseurl ● Contiene la dirección base de nuestro sitio. ● $this->language ● Contiene el idioma en el que se encuentra nuestro sitio. MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATE OVERRIDES TEMPLATE OVERRIDES MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATE OVERRIDES ● Técnica para redefinir la presentación por pantalla de un componente o módulo de Joomla! ● Se trata de una “clonación” de la vista de la extensión. ● Se incluye a partir de la versión 1.5. ● Ventajas: ● Personalizar el portal sin preocuparse de las actualizaciones de las extensiones. ● Validación de estándares propuestos por la W3C. ● Conseguir un nivel adecuado de accesibilidad (algunas extensiones, incluso las nativas, no cumplen con la accesibilidad). ● Importante: la extensión debe cumplir con MVC. MasterClass Desarrollo Plantillas Joomla!
    • TEMPLATE OVERRIDES → USO ● Crear una carpeta llamada html dentro de nuestra plantilla: ● templates/plantilla/html/ ● Dentro de esta carpeta crear las carpetas con los nombres de las extensiones (componentes y/o módulos) que queramos “redefinir” o “clonar”. ● Copiar en ellas el contenido de la carpeta tmpl (vistas) y realizar en esos ficheros las modificaciones/adaptaciones necesarias. ● Joomla!, al generar la página web, mira a ver si existe una carpeta html en la plantilla y si hay una “clonación” de la extensión que va a mostrar. En caso afirmativo, muestra ésta en lugar de la original. MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS ● Insertar estilos para la maquetación de la plantilla. ● Conocer algunas clases que Joomla! carga por defecto: ● componentheading: muestra el título del componente. ● contentheading: muestra el 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 la fecha de creación del artíuclo. ● readon: utilizada en el enlace de “leer más...” de los artículos. ● article_separator: utilizada por etiqueta <span> para separar artículos. ● moduletable(+ sufijo):carga los div (y sufijo cargado desde back) de los módulos. ● active: para ítem de menú activo. ● parent: cuando hay sub-ítems, para el elemento padre. MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS ● Otras clases: ● button: asociada a elementos de tipo botón. ● inputbox: asociada a elementos text-input. ● pagenav: asociada a paginación de artículos. ● modifydate: asociada a fecha de modificación del artículo. ● sectiontableentry1/sectiontableentry2: asociada a datos en tablas. MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS ● Íntimamente ligada al fichero templateDetails.xml: ● Sus parámetros se ponen en este fichero. ● Declaración: ● nombre_parametro_1=valor_1 nombre_parametro_2=valor_2 nombre_parametro_3=valor_3 ● Llamada desde PHP ● <?php echo $this->params->get(nombre_parametro); ?> ● Los estilos asociados se añaden en los ficheros .css (template.css) MasterClass Desarrollo Plantillas Joomla!
    • EJEMPLO: INDEX.PHP + CSS + PARAMS MasterClass Desarrollo Plantillas Joomla!
    • DIFERENCIAS ENTRE VERSIONES DIFERENCIAS ENTRE VERSIONES MasterClass Desarrollo Plantillas Joomla!
    • DIFERENCIA ENTRE VERSIONES ● Novedades a partir de Joomla! 1.7: ● Salida de contenidos sin tablas: todos los archivos de salida están escritos en xHTML 1.0 Strict. ● templateDetails.xml (estilos de plantilla): creación de variaciones en la plantilla para una o varias páginas que pueden ser asignadas de forma específica. ● Novedades a partir de Joomla! 3.0: ● Incorporación de Twitter Bootstrap (framework CSS). ● Nuevas plantillas front y back adaptadas a móviles (boostrap). ● Actualización plantilla accesible Beez3. MasterClass Desarrollo Plantillas Joomla!
    • DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ● A partir de Joomla! 1.7: MasterClass Desarrollo Plantillas Joomla!
    • DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ● Parámetros en Joomla! 1.5: MasterClass Desarrollo Plantillas Joomla!
    • DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ● Campos de configuración a partir de Joomla! 1.7: MasterClass Desarrollo Plantillas Joomla!
    • DIFERENCIA ENTRE VERSIONES → INDEX.PHP ● En Joomla! 1.5, La variable mainframe se definía así: ● $global mainframe; ● A partir de Joomla! 1.7, se define así: ● $mainframe = JFactory::getApplication(); MasterClass Desarrollo Plantillas Joomla!
    • FIN DE LA MASTERCLASS Gracias por vuestra atención. Tenéis más información en: atención www.sergioiglesias.net Y www.twitter.com/sergiois FIN DE LA MASTERCLASS MasterClass Desarrollo Plantillas Joomla!
    • PUBLICIDAD ● Libro Joomla! 1.6 – Guía de referencia en español ● Guía de referencia en español ● Minitutoriales Introducción Instalar XAMPP Novedades en Joomla! Instalar Joomla! 1.6 1.6 Gestionar permisos Enlaces de interés Crear un artículo Joomla! Crear un contacto Acceso al panel de Integrar noticias control Añadir un módulo Sitio submenú Usuarios Habilitar la vista de Menús módulos Contenido Añadir accesskey Componentes Integrar DNI electrónico Extensiones Enlaces de interés Ayuda http://www.bubok.es/libros/200879/Joomla-16--Guia-de-referencia-y-minitutoriales MasterClass Desarrollo Plantillas Joomla!
    • PUBLICIDAD ● www.sergioiglesias.net/blog ● www.twitter.com/sergiois ● www.complusoft.es/blog ● www.twitter.com/complusoft ● www.osiberia.es ● www.twitter.com/osiberia MasterClass Desarrollo Plantillas Joomla!