SlideShare una empresa de Scribd logo
1 de 11
CONVERTIR HTML Y CSS EN
 UNA PLANTILLA JOOMLA!
        Joomla! 1.5 y 1.6
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.5

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
PLANTILLA BASE EN JOOMLA!
           1.6
1.Instalar Joomla!

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

3.Crear la estructura base de la carpeta (incluyendo el XML) y
  guardarla en un ZIP

4.Instalar la plantilla en Extensions / Extension manager
  (sólo la primera vez es necesario instalar)

5.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 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 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

La actualidad más candente (10)

Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5Nuevas etiquetas en HTML 5
Nuevas etiquetas en HTML 5
 
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
 
Semana 4 SPA vs MPA
Semana 4  SPA vs MPASemana 4  SPA vs MPA
Semana 4 SPA vs MPA
 
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
 
Google drive
Google driveGoogle drive
Google drive
 
Cuales son las herramientas del menú archivo
Cuales son las herramientas del menú archivoCuales son las herramientas del menú archivo
Cuales son las herramientas del menú archivo
 

Similar a Convertir html y css en Joomla!

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
 
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
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child ThemesAmit Kvint
 
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
 
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
 
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
 
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates WorkshopJoomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshopjoomlaprojects
 
Utpl Normas Etiquetado
Utpl Normas EtiquetadoUtpl Normas Etiquetado
Utpl Normas Etiquetadoacmedinaj
 
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
 
#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
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!SergioIglesiasNET
 

Similar a Convertir html y css en Joomla! (20)

Diseñar en joomla!.key
Diseñar en joomla!.keyDiseñar en joomla!.key
Diseñar en joomla!.key
 
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
 
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
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
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...
 
Ficheros de ayuda en aplicaciones
Ficheros de ayuda en aplicacionesFicheros de ayuda en aplicaciones
Ficheros de ayuda en aplicaciones
 
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
 
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
 
Joomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates WorkshopJoomladay Mallorca 2010 Templates Workshop
Joomladay Mallorca 2010 Templates Workshop
 
Tunea tu wordpress
Tunea tu wordpressTunea tu wordpress
Tunea tu wordpress
 
Utpl Normas Etiquetado
Utpl Normas EtiquetadoUtpl Normas Etiquetado
Utpl Normas Etiquetado
 
Temas Drupal
Temas DrupalTemas Drupal
Temas Drupal
 
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"...
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!
 
MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!MasterClass Desarrollo Plantillas Joomla!
MasterClass Desarrollo Plantillas Joomla!
 
Plantillas Twig (Symfony)
Plantillas Twig (Symfony)Plantillas Twig (Symfony)
Plantillas Twig (Symfony)
 
Protostar como framework
Protostar como frameworkProtostar como framework
Protostar como framework
 
Wordpress
WordpressWordpress
Wordpress
 

Último

EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
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 estossgonzalezp1
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
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...JohnRamos830530
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
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.FlorenciaCattelani
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
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 eyvanamcerpam
 

Último (10)

EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
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
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
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...
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
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.
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
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
 

Convertir html y css en Joomla!

  • 1. CONVERTIR HTML Y CSS EN UNA PLANTILLA JOOMLA! Joomla! 1.5 y 1.6
  • 2. PASO 1: CREAR UN HTML Y CSS BASE (utilizando las carpetas de Joomla! para una plantilla)
  • 3. PASO 2: INSTALAR LA PLANTILLA BASE EN JOOMLA!
  • 4. PLANTILLA BASE EN JOOMLA! 1.5 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
  • 5. PLANTILLA BASE EN JOOMLA! 1.6 1.Instalar Joomla! 2.Cambiar el HTML base a index.php dejando las variables de Joomla! 3.Crear la estructura base de la carpeta (incluyendo el XML) y guardarla en un ZIP 4.Instalar la plantilla en Extensions / Extension manager (sólo la primera vez es necesario instalar) 5.Aplicar la plantilla en Extensions / Template manager
  • 6. PASO 3: INTRODUCIR LAS POSICIONES EN LA PLANTILLA
  • 7. PASO 4: CSS Referencia: http://www.nosolocodigo.com/css-cheatsheet- para-joomla-15
  • 8. CSS DEL CONTENIDO PRINCIPAL EN 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
  • 9. CSS DEL CONTENIDO PRINCIPAL EN 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
  • 10. MENÚ EN 1.5 Y 1.6 • div.moduletable_menu • ul.menu • li(class=”active” si está activo)
  • 11. 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. No es necesario mostrar nada\n
  4. 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
  5. Mostrar la carpeta y el archivo XML generado (02 - base Joomla! / 1.6)\nMostrar el Template manager antes de instalar la plantilla\nInstalar y aplicar la plantilla, mostrar el resultado final\n
  6. 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
  7. \n
  8. Resultado final como “04 - CSS Contenido” / 1.5\n\n
  9. Resultado final como “04 - CSS Contenido” / 1.6\nNotar diferencias entre tablas 1.5 y divs 1.6\n
  10. Resultado final como “05 - CSS Menús” / (1.5 y 1.6)\n\n
  11. Resultado final como “06 - CSS Módulos” / (1.5 y 1.6)\n\n