SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances (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
 

Similaire à 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
 
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...SergioIglesiasNET
 
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 7Keopx
 
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-endJames Wilson
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!SergioIglesiasNET
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!SergioIglesiasNET
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child ThemesAmit Kvint
 
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 WordpressAlejandro Gil Mialdea
 
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!Remigio Salvador Sánchez
 
Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02Sesionmoodle 101223143117-phpapp02
Sesionmoodle 101223143117-phpapp02Kimiemi VJ
 
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"...Valeria Pleszowski
 
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 WordPressPatricio Mas
 
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ónComunidadRedDes
 
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ª parteJavier Gomez
 
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.1Julio Camarero
 
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demasdiseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demasjeacordoba2020
 

Similaire à 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
 
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demasdiseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demas
 

Plus de Grupo de Usuarios de Joomla! Guatemala

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...Grupo de Usuarios de Joomla! Guatemala
 

Plus 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!
 

Dernier

Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...AlanCedillo9
 
ejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofJuancarlosHuertasNio1
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...JaquelineJuarez15
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 

Dernier (20)

Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
 
ejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sof
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 

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

Notes de l'éditeur

  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&amp;#xF3;n Base\nMostrar las posiciones de m&amp;#xF3;dulos y componentes que se configurar&amp;#xE1;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&amp;#xF3;n Base\nMostrar las posiciones de m&amp;#xF3;dulos y componentes que se configurar&amp;#xE1;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&amp;#xED; como el contenido (component)\nResultado final como &amp;#x201C;03 - Posiciones&amp;#x201D; (1.5 y 1.6 respectivamente)\nTips necesarios: hablar de la configuraci&amp;#xF3;n de los art&amp;#xED;culos\n
  10. \n
  11. Resultado final como &amp;#x201C;04 - CSS Contenido&amp;#x201D; / 1.5\n\n
  12. Resultado final como &amp;#x201C;04 - CSS Contenido&amp;#x201D; / 1.6\nNotar diferencias entre tablas 1.5 y divs 1.6\n
  13. Resultado final como &amp;#x201C;05 - CSS Men&amp;#xFA;s&amp;#x201D; / (1.5 y 1.6)\n\n
  14. Resultado final como &amp;#x201C;06 - CSS M&amp;#xF3;dulos&amp;#x201D; / (1.5 y 1.6)\n\n