SlideShare una empresa de Scribd logo
1 de 14
DISEÑAR EN JOOMLA!
¿QUÉ ES UNA PLANTILLA
“Es una serie de archivos que controlan la presentación del
         contenido en un sitio que utiliza Joomla”
                                                 Barrie North
                                            CompassDesigns.net
ELEMENTOS DE UNA
                   PLANTILLA
•   index.php

    •   Código para manipulación de
        datos

•   template.css

    •   Reglas para manipular la
        visualización de los datos

•   TemplateDetails.xml

    •   Instalación y datos en Backend
CÓMO SE MANEJA EL
           CONTENIDO
• Componentes

 •1   por página, generalmente en la parte central

• Módulos

 • Varios   por página, en “posiciones” de plantilla

• Plugin

 • Varios, manipulan   el comportamiento del contenido
CREANDO UNA PLANTILLA
PASO 1: CREAR UN HTML Y
        CSS BASE
(utilizando las carpetas de Joomla! para una plantilla)
PASO 2: INSTALAR LA
PLANTILLA BASE EN JOOMLA!
PLANTILLA BASE EN JOOMLA!

1.Instalar Joomla!

2.Crear la carpeta en templates, con los archivos requeridos

3.Cambiar el HTML base a index.php dejando las variables de
  Joomla!

4.Aplicar la plantilla en Extensions / Template manager
PASO 3: INTRODUCIR LAS
   POSICIONES EN LA
      PLANTILLA
PASO 4: CSS




Referencia: http://www.nosolocodigo.com/css-cheatsheet-
                    para-joomla-15
CSS DEL CONTENIDO
    PRINCIPAL EN JOOMLA! 1.5
• Título
      de componente:      • Contenido
                                    de artículo:
 div.componentheadin       table.contentpaneope
 g                         n

• Contenido: table.blog   • Autor: span.small

• Título
      de artículo:        • Fecha: td.createdate
 td.contentheading
CSS DEL CONTENIDO
   PRINCIPAL EN JOOMLA ! 1.6
• Título   de componente: h1   • Información:
                                dl.article-info
• Contenido: div.blog
                                 • dt.article-info-term
• Título   de artículo: h2
                                 • dd.category-name

                                 • dd.published

                                 • dd.createdby
MENÚ EN 1.5 Y 1.6

• div.moduletable_menu

• ul.menu

• li(class=”active” si está
  activo)
MÓDULOS EN 1.5 Y 1.6

• div.moduletable

• Título: h3

• Elementos: ul   / li

Más contenido relacionado

La actualidad más candente

Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5
mferrer
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
2012diego
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
4000859
 

La actualidad más candente (9)

Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5
 
Google drive POR CORINA QUITO
Google drive POR CORINA QUITOGoogle drive POR CORINA QUITO
Google drive POR CORINA QUITO
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Introduccion a CSS I
Introduccion a CSS IIntroduccion a CSS I
Introduccion a CSS I
 
Menú archivo
Menú archivoMenú archivo
Menú archivo
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Html
HtmlHtml
Html
 
Fundamentos de lenguaje html
Fundamentos de lenguaje htmlFundamentos de lenguaje html
Fundamentos de lenguaje html
 
WordPress en servidor local
WordPress en servidor localWordPress en servidor local
WordPress en servidor local
 

Similar a Diseñar en joomla!.key

Convertir html y css en Joomla!
Convertir html y css en Joomla!Convertir html y css en Joomla!
Convertir html y css en Joomla!
pelfriede
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
Amit Kvint
 
Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02
Kimiemi VJ
 

Similar a Diseñar en joomla!.key (20)

Convertir html y css en Joomla!
Convertir html y css en Joomla!Convertir html y css en Joomla!
Convertir html y css en Joomla!
 
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Igl...
 
DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7
DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7
DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7
 
Introducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-endIntroducción comprensivo al theming para Drupal 7 Front-end
Introducción comprensivo al theming para Drupal 7 Front-end
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Ficheros de ayuda en aplicaciones
Ficheros de ayuda en aplicacionesFicheros de ayuda en aplicaciones
Ficheros de ayuda en aplicaciones
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Iniciación al Desarrollo Web con Wordpress
Iniciación al Desarrollo Web con WordpressIniciación al Desarrollo Web con Wordpress
Iniciación al Desarrollo Web con Wordpress
 
Desarrollo rápido de páginas web con Joomla!
Desarrollo rápido de páginas web con Joomla!Desarrollo rápido de páginas web con Joomla!
Desarrollo rápido de páginas web con Joomla!
 
Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02
 
Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02
 
Sesion moodle - "más allá de lo básico"...
Sesion moodle - "más allá de lo básico"...Sesion moodle - "más allá de lo básico"...
Sesion moodle - "más allá de lo básico"...
 
Guía de Instalación de WordPress
Guía de Instalación de WordPressGuía de Instalación de WordPress
Guía de Instalación de WordPress
 
El funcionamiento del WordPress Themes y las posibilidades de personalización
El funcionamiento del WordPress Themes y las posibilidades de personalizaciónEl funcionamiento del WordPress Themes y las posibilidades de personalización
El funcionamiento del WordPress Themes y las posibilidades de personalización
 
Joomla vs drupal
Joomla vs drupalJoomla vs drupal
Joomla vs drupal
 
Taller de introducción a drupal 7 1ª parte
Taller de introducción a drupal 7 1ª parteTaller de introducción a drupal 7 1ª parte
Taller de introducción a drupal 7 1ª parte
 
Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 

Más de Grupo de Usuarios de Joomla! Guatemala

Más de Grupo de Usuarios de Joomla! Guatemala (20)

Overrides intecap-leo canton
Overrides intecap-leo cantonOverrides intecap-leo canton
Overrides intecap-leo canton
 
Sitios web responsive con Joomla!
Sitios web responsive con Joomla!Sitios web responsive con Joomla!
Sitios web responsive con Joomla!
 
Sitios Multi Idiomas, por Leonel Cantón
Sitios Multi Idiomas, por Leonel CantónSitios Multi Idiomas, por Leonel Cantón
Sitios Multi Idiomas, por Leonel Cantón
 
Joomla Platform, por David Hurley
Joomla Platform, por David HurleyJoomla Platform, por David Hurley
Joomla Platform, por David Hurley
 
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
Joomla + Azure: Interoperabilidad y Escalabilidad en tus manos, por Víctor Ca...
 
Creando un mundo mejor con Joomla, por Paul Orwig
Creando un mundo mejor con Joomla, por Paul OrwigCreando un mundo mejor con Joomla, por Paul Orwig
Creando un mundo mejor con Joomla, por Paul Orwig
 
SEO en Joomla
SEO en JoomlaSEO en Joomla
SEO en Joomla
 
Frameworks para Plantillas, por Tito Alvarez
Frameworks para Plantillas, por Tito AlvarezFrameworks para Plantillas, por Tito Alvarez
Frameworks para Plantillas, por Tito Alvarez
 
Creando plantillas responsive para Joomla, por David Hurley
Creando plantillas responsive para Joomla, por David HurleyCreando plantillas responsive para Joomla, por David Hurley
Creando plantillas responsive para Joomla, por David Hurley
 
Responsive Web Design, por Víctor López
Responsive Web Design, por Víctor LópezResponsive Web Design, por Víctor López
Responsive Web Design, por Víctor López
 
Un recorrido por Joomla 3
Un recorrido por Joomla 3Un recorrido por Joomla 3
Un recorrido por Joomla 3
 
Introducción a Joomla, por Gretel Gutiérrez
Introducción a Joomla, por Gretel GutiérrezIntroducción a Joomla, por Gretel Gutiérrez
Introducción a Joomla, por Gretel Gutiérrez
 
Conferencia Inicial del Joomla Day Guatemala 2013. Paul Orwig
Conferencia Inicial del Joomla Day Guatemala 2013.  Paul OrwigConferencia Inicial del Joomla Day Guatemala 2013.  Paul Orwig
Conferencia Inicial del Joomla Day Guatemala 2013. Paul Orwig
 
Joomla! sitio web en 30 minutos (Flisol GT 2011)
Joomla! sitio web en 30 minutos (Flisol GT 2011)Joomla! sitio web en 30 minutos (Flisol GT 2011)
Joomla! sitio web en 30 minutos (Flisol GT 2011)
 
Crear modulos
Crear modulosCrear modulos
Crear modulos
 
Api joomla!.key
Api joomla!.keyApi joomla!.key
Api joomla!.key
 
Qué es joomla
Qué es joomlaQué es joomla
Qué es joomla
 
Template overrides
Template overridesTemplate overrides
Template overrides
 
Qué más podemos hacer admin joomla
Qué más podemos hacer  admin joomlaQué más podemos hacer  admin joomla
Qué más podemos hacer admin joomla
 
Estructura básicas de plantillas en joomla!
Estructura básicas de plantillas en joomla!Estructura básicas de plantillas en joomla!
Estructura básicas de plantillas en joomla!
 

Último

EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 

Diseñar en joomla!.key

  • 2. ¿QUÉ ES UNA PLANTILLA “Es una serie de archivos que controlan la presentación del contenido en un sitio que utiliza Joomla” Barrie North CompassDesigns.net
  • 3. ELEMENTOS DE UNA PLANTILLA • index.php • Código para manipulación de datos • template.css • Reglas para manipular la visualización de los datos • TemplateDetails.xml • Instalación y datos en Backend
  • 4. CÓMO SE MANEJA EL CONTENIDO • Componentes •1 por página, generalmente en la parte central • Módulos • Varios por página, en “posiciones” de plantilla • Plugin • Varios, manipulan el comportamiento del contenido
  • 6. PASO 1: CREAR UN HTML Y CSS BASE (utilizando las carpetas de Joomla! para una plantilla)
  • 7. PASO 2: INSTALAR LA PLANTILLA BASE EN JOOMLA!
  • 8. PLANTILLA BASE EN JOOMLA! 1.Instalar Joomla! 2.Crear la carpeta en templates, con los archivos requeridos 3.Cambiar el HTML base a index.php dejando las variables de Joomla! 4.Aplicar la plantilla en Extensions / Template manager
  • 9. PASO 3: INTRODUCIR LAS POSICIONES EN LA PLANTILLA
  • 10. PASO 4: CSS Referencia: http://www.nosolocodigo.com/css-cheatsheet- para-joomla-15
  • 11. CSS DEL CONTENIDO PRINCIPAL EN JOOMLA! 1.5 • Título de componente: • Contenido de artículo: div.componentheadin table.contentpaneope g n • Contenido: table.blog • Autor: span.small • Título de artículo: • Fecha: td.createdate td.contentheading
  • 12. CSS DEL CONTENIDO PRINCIPAL EN JOOMLA ! 1.6 • Título de componente: h1 • Información: dl.article-info • Contenido: div.blog • dt.article-info-term • Título de artículo: h2 • dd.category-name • dd.published • dd.createdby
  • 13. MENÚ EN 1.5 Y 1.6 • div.moduletable_menu • ul.menu • li(class=”active” si está activo)
  • 14. MÓDULOS EN 1.5 Y 1.6 • div.moduletable • Título: h3 • Elementos: ul / li

Notas del editor

  1. \n
  2. Expectativa del cliente escogido: Cultura Android Guatemala\nEn este punto, mostrar la el template base (template.html) de la carpeta 01 - Maquetación Base\nMostrar las posiciones de módulos y componentes que se configurarán\n
  3. \n
  4. \n
  5. \n
  6. Expectativa del cliente escogido: Cultura Android Guatemala\nEn este punto, mostrar la el template base (template.html) de la carpeta 01 - Maquetación Base\nMostrar las posiciones de módulos y componentes que se configurarán\n
  7. No es necesario mostrar nada\n
  8. Mostrar la carpeta y el archivo XML generado (02 - base Joomla! / 1.5)\nMostrar el Template manager antes de subir la carpeta\nSubir la carpeta y aplicar la plantilla, mostrar el resultado final\n
  9. Introducir las posiciones menu, right y footer, así como el contenido (component)\nResultado final como “03 - Posiciones” (1.5 y 1.6 respectivamente)\nTips necesarios: hablar de la configuración de los artículos\n
  10. \n
  11. Resultado final como “04 - CSS Contenido” / 1.5\n\n
  12. Resultado final como “04 - CSS Contenido” / 1.6\nNotar diferencias entre tablas 1.5 y divs 1.6\n
  13. Resultado final como “05 - CSS Menús” / (1.5 y 1.6)\n\n
  14. Resultado final como “06 - CSS Módulos” / (1.5 y 1.6)\n\n