Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

17
Desarrollo Ágil de sitios Web utilizando Joomla y Gantry Framework Miguel Cantillana Farías [email protected] [email protected] http://www.miguelcantillana.com ELINUX 2011

description

El presente trabajo tiene por objetivo mostrar un marco de trabajo para el Desarrollo Web utilizando Joomla! y Gantry Framework, los cuáles permite desarrollar portales web de gran factibilidad operativa en muy poco tiempo, minimizando los problemas de compatibilidad entre navegadores, Layout sin tablas y HTML no semánticos, entre otros problemas clásicos de cualquier proyecto web, permitiendo dar mucho más valor a los productos que se desarrollen sobre estos.

Transcript of Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Page 1: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Desarrollo Ágil de sitios Web utilizando Joomla y Gantry

Framework

Miguel Cantillana Farí[email protected]@opensur.orghttp://www.miguelcantillana.com

ELINUX 2011

Page 2: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

1

Índice

● Qué es Joomla● Características● Ejemplos

● Qué es Gantry-Framework● Características ● Cómo funciona

● Ejemplos de Implementación

ELINUX 2011 – PUERTO MONTT

Page 3: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

¿Qué debemos saber?

2

● Joomla!● CSS● HTML

ELINUX 2011 – PUERTO MONTT

Page 4: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Qué es Joomla

3

● 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

Page 5: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

… y que son las plantillas?

4

● Son las encargadas de definir el aspecto estético, disposición de elementos y estilo visual de nuestro sitio web.

ELINUX 2011 – PUERTO MONTT

Page 6: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Módulos y Plantillas

5

● 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

Page 7: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Gantry Framework

6

● 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

Page 8: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Qué nos ofrece Gantry?

7

● 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

Page 9: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

¿Cómo funciona?

8ELINUX 2011 – PUERTO MONTT

Page 10: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Framework CSS 960

9

● 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

Page 11: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

¿Cómo funciona?

10

Page 12: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

¿Cómo funciona?

11ELINUX 2011 – PUERTO MONTT

Page 13: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

¿Cómo funciona?

12ELINUX 2011 – PUERTO MONTT

Page 14: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

¿Cómo funciona?

13ELINUX 2011 – PUERTO MONTT

Page 15: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

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>

14ELINUX 2011 – PUERTO MONTT

Page 16: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

DEMO

15ELINUX 2011 – PUERTO MONTT

Page 17: Desarrollo de ágil de sitios web utilizando Joomla gantry Framework

Recursos

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