Joomla es un sistema de gestión de contenidos de código abierto que permite crear sitios web flexibles y escalables. Gantry es un framework para el desarrollo de plantillas de Joomla que ofrece 65 posiciones para módulos y 38 posibles diseños de página mediante el uso de un marco CSS de 960 columnas. El documento explica cómo Gantry funciona integrando su configuración como un plugin de Joomla y utilizando bloques de CSS para controlar la disposición de módulos y contenido.

1. Desarrollo Ágil de sitios Web
utilizando Joomla y Gantry
Framework
Miguel Cantillana Farías
miguel@ewok.cl
mcantillana@opensur.org
http://www.miguelcantillana.com
ELINUX 2011

2. Índice
● Qué es Joomla
● Características
● Ejemplos
● Qué es Gantry-Framework
● Características
● Cómo funciona
● Ejemplos de Implementación
ELINUX 2011 – PUERTO MONTT 1

3. ¿Qué debemos saber?
● Joomla!
● CSS
● HTML
ELINUX 2011 – PUERTO MONTT 2

4. Qué es Joomla
● Joomla es un gestor de contenido (CMS), de
código abierto escrito en PHP y utiliza como
motor de datos mySQL.
● Con Joomla podemos crear portales web,
flexibles y altamente escalables
● Joomla es Software Libre!
ELINUX 2011 – PUERTO MONTT 3

5. … y que son las plantillas?
● Son las encargadas de
definir el aspecto
estético, disposición de
elementos y estilo
visual de nuestro sitio
web.
ELINUX 2011 – PUERTO MONTT 4

6. Módulos y Plantillas
● Los módulos son pequeñas
aplicaciones que permiten
mostrar información
específica.
● Joomla distribuye sus
funcionalidades a través
de módulos.
● Cada módulo puede estar
presente en distintos
apartados del sitio.
ELINUX 2011 – PUERTO MONTT 5

7. Gantry Framework
● Framework para el desarrollo de
Plantilla para Joomla!
● Desarrollado por Rocket Theme
● Se integra como un Plugins
● Basado en 960 Framework CSS
ELINUX 2011 – PUERTO MONTT 6

8. Qué nos ofrece Gantry?
● 65 Posiciones de módulos para situar
funcionalidades de Joomla.
● Completo Soporte para Joomla!
● 38 posibles combinaciones de layout
para cuerpo y columnas (Mainbody y
Sidebar)
● Dispone de configuración de vistas
Mobile/iPhone y Android
● Sencilla Interfaz de administración
● Soporte para RTL language
● Permite compresión de CSS y JS
● Layout sin tablas
● Compatibilidad entre navegadores (IE6,
IE7, IE8, Firefox, Chrome, Safari)
ELINUX 2011 – PUERTO MONTT 7

9. ¿Cómo funciona?
ELINUX 2011 – PUERTO MONTT 8

10. Framework CSS 960
● El principio básico de este framework es crear
maquetaciones de ancho fijo de 960px
● Características
● Ofrece un marco de trabajo sencillo
● Permitir crear layouts fácilmente, utilizando 12 ó 16
columnas
● Posee una hoja de estilo de reset
● Compatibilidad con los navegadores mas populares
ELINUX 2011 – PUERTO MONTT 9

11. ¿Cómo funciona?
10

12. ¿Cómo funciona?
ELINUX 2011 – PUERTO MONTT 11

13. ¿Cómo funciona?
ELINUX 2011 – PUERTO MONTT 12

14. ¿Cómo funciona?
ELINUX 2011 – PUERTO MONTT 13

15. CSS por Bloque
● El CSS que dibuja gantry por bloque es el que
sigue:
<div id=”rt-NOMBRE”>
<div class=”rt-container”></div>
</div>
● Para Módulos:
<div id=”rt-block”>
<div class=”module-title”>
<h2>TITULO MODULO</h2>
</div>
</div>
ELINUX 2011 – PUERTO MONTT 14

16. DEMO
ELINUX 2011 – PUERTO MONTT 15

17. Recursos
● http://960.gs
● Http://www.gantry-framework.com
● http://docs.joomla.org