tutorial omega drupal

GUÍA DE OMEGA FRAMEWORK EN DRUPAL 7

RESPONSIVE DESIGN EN DRUPAL
Por: Luis Dueñas
www.luisduenas.com

Responsive Web Design con OMEGA FRAMEWORK
La web no es, ni ha sido nunca, de ancho fijo. El primer contenido en la World Wide Web era
sensible, pero de alguna manera a lo largo del tiempo se decidió forzar un ancho específico en los
sitios que construimos. Con la actual explosión deltráfico de Internet desde móviles, tabletas,
televisores, nosotros como diseñadores y desarrolladores somos responsables de entregar
contenido relevante de una manera de fácil acceso, sin importar el dispositivo. De esa necesidad
fue como nació el Diseño sensible (Responsive Design).
Pero... ¿Qué demonios es Responsive Design? Responsive Design es una técnica de diseño y
desarrollo web quemediante el uso de estructuras e imágenes fluidas, así como de media-queries
en la hojas de estilo CSS, se consigue adaptar el sitio web al entorno del usuario, es decir, que
nuestro flamantes sitio web podrá verse cool desde cualquier dispositivo como en la siguiente
imagen. Todo se lo debemos a Ethan Marcotte, el creó y difundió esta técnica a partir de una serie
de artículos en A List Part.Drupal nos provee muchas formas de hacer Responsive Desing, OMEGA FRAMEWORK es una
de esas formas y que para mí personalmente es mi forma preferida de hacerlo con Drupal.
OMEGA FRAMEWORK es un tema base que nos provee de un conjunto de herramientas que nos
ofrece muchas de las características básicas que los diseñadores necesitan como: un sistema de
grid, compatibilidad entre navegadores, basede clases CSS y más. Porque implementar theming
en Drupal a veces no es tarea sencilla, pero la comunidad ha tratado de hacerlo cada vez más
fácil y OMEGA nos provee de esa facilidad.
En esta guía explicare Omega 3.x, cómo funciona y cuáles son las mejores prácticas
establecidas para empezar a utilizar su propio subtema basado en Omega. Por favor, se
paciente y empieza por el principio ya queel enfoque de Omega en el theming es diferente a
otros temas. Si asume demasiado se puede encontrar complicaciones en la comprensión

que podría haber evitado mediante la comprensión de los conceptos básicos desde el
principio.
En esta guía he recopilado información de varios sitios webs en Ingles y en especial desde la
misma documentación oficial de OMEGA FRAMEWORK, al final encontraratodos los links de las
fuentes.
¿Por qué Omega es un tema base? Es debido a que nunca cambia, usted construye su diseño
sobre la base que Omega ofrece, sin modificar Omega como tal.
Omega permanecerá igual cada vez que lo utilice, pero también puedes crear un sub-tema con
regiones y bloques personalizados, diseños de columna y CSS. Como se ve en la imagen de
abajo, un tema de una sola basepuede soportar múltiples variantes:

En esta guía voy a cubrir
• Instalación de Omega Framework
• Uso de Omega Tools para crear un subtema
• Entender el layout
• Las opciones básicas de configuración
• Comenzar a diseñar el tema (Es necesario tener

conocimientos de CSS)

Si no sabe CSS, no se preocupe, afortunadamente no necesita saberlo para saber instalarlo y
tenerlo funcionando.Paso 1. Instalar algunos módulos necesarios para ayudante y
hacerte la vida más fácil
Recomiendo que descargue e instale los módulos siguientes con el fin de sacar el máximo
provecho de su tema basado en Omega. Más sobre la instalación de módulos.
Asegúrese de que está ejecutando las últimas versiones estables de todos los módulos para
garantizar un funcionamiento correcto. Si está utilizandoversiones dev de cualquiera de estos
módulos, utiliza la versión dev para todos con el fin de mantener la compatibilidad.

Omega Tools
(Requiere ctools) - Omega Tools es un gran conjunto de funciones que le ayudarán a crear y
administrar fácilmente su subtema Omega. Esta herramienta es útil para el desarrollo, pero
probablemente debería estar deshabilitado en entornos de producción....