GUA DE OMEGA FRAMEWORK EN DRUPAL 7

RESPONSIVE DESIGN EN DRUPAL Por: Luis Dueas

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 especfico en los sitios que construimos. Con la actual explosin del trfico de Internet desde mviles, tabletas, televisores, nosotros como diseadores y desarrolladores somos responsables de entregar contenido relevante de una manera de fcil acceso, sin importar el dispositivo. De esa necesidad fue como naci el Diseo sensible (Responsive Design). Pero... Qu demonios es Responsive Design? Responsive Design es una tcnica de diseo y desarrollo web que mediante el uso de estructuras e imgenes 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 tcnica a partir de una serie de artculos 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 caractersticas bsicas que los diseadores necesitan como: un sistema de grid, compatibilidad entre navegadores, base de clases CSS y ms. Porque implementar theming en Drupal a veces no es tarea sencilla, pero la comunidad ha tratado de hacerlo cada vez ms fcil y OMEGA nos provee de esa facilidad. En esta gua explicare Omega 3.x, cmo funciona y cules son las mejores prcticas establecidas para empezar a utilizar su propio subtema basado en Omega. Por favor, se paciente y empieza por el principio ya que el enfoque de Omega en el theming es diferente a otros temas. Si asume demasiado se puede encontrar complicaciones en la comprensin

que podra haber evitado mediante la comprensin de los conceptos bsicos desde el principio. En esta gua he recopilado informacin de varios sitios webs en Ingles y en especial desde la misma documentacin oficial de OMEGA FRAMEWORK, al final encontrara todos los links de las fuentes. Por qu Omega es un tema base? Es debido a que nunca cambia, usted construye su diseo sobre la base que Omega ofrece, sin modificar Omega como tal. Omega permanecer igual cada vez que lo utilice, pero tambin puedes crear un sub-tema con regiones y bloques personalizados, diseos de columna y CSS. Como se ve en la imagen de abajo, un tema de una sola base puede soportar mltiples variantes:

En esta gua voy a cubrir

Instalacin de Omega Framework Uso de Omega Tools para crear un subtema Entender el layout Las opciones bsicas de configuracin Comenzar a disear 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 mdulos necesarios para ayudante y hacerte la vida ms fcil
Recomiendo que descargue e instale los mdulos siguientes con el fin de sacar el mximo provecho de su tema basado en Omega. Ms sobre la instalacin de mdulos. Asegrese de que est ejecutando las ltimas versiones estables de todos los mdulos para garantizar un funcionamiento correcto. Si est utilizando versiones dev de cualquiera de estos mdulos, utiliza la versin dev para todos con el fin de mantener la compatibilidad.

Omega Tools (Requiere ctools) - Omega Tools es un gran conjunto de funciones que le ayudarn a crear y administrar fcilmente su subtema Omega. Esta herramienta es til para el desarrollo, pero probablemente debera estar deshabilitado en entornos de produccin. Delta Delta es una poderosa herramienta que le permite crear variaciones de una configuracin de temas sin tener que crear un sub-tema nuevo. Cuando se utiliza con el contexto, Delta le permite editar la red omega, la zona y la configuracin de regin y crear todos los diseos nuevos basados en las condiciones disponibles en su contexto. Context (Requiere ctools) - Context le permite manejar las condiciones contextuales y las reacciones de diferentes partes de su sitio. Usted puede pensar en cada contexto como la representacin de un "segmento" de su sitio. Para cada contexto, puede elegir las condiciones que desencadenan este contexto que se activa y elegir diferentes aspectos de Drupal que debe reaccionar ante este contexto activo, en ese "segmento". Piense en condiciones como un conjunto de reglas que se comprueban durante la carga de la pgina para ver qu contexto est activo. Cualquier reaccin que se asocian a contextos activos son entonces disparado. Ctools Un conjunto de APIs que son requeridos por muchos mdulos en Drupal. Es probable que usted ya tiene ctools habilitada para otros mdulos. Views Es un sistema para hacer consultas a la base de datos y un generador de reportes personalizados. Se trata de un mdulo muy potente. Nota de precaucin:

Algunos de estos mdulos son bastante complicados de configurar y tiene su propia curva de aprendizaje que pasar. Si usted es un principiante, usted no tiene que hacer nada con ellos para experimentar con la creacin de un sub-tema. Algunos de estos mdulos se encuentran todava en las primeras versiones, as que no experimente mucho en un sitio vivo. Use un sitio de pruebas para aprender. Siempre haga copias de seguridad de tu sitio en produccin, si vas a hacer cambios o antes de instalar cualquiera de estos mdulos.

Paso 2. Descargar e instalar Omega

Puede descargar el Framework aqu: http://drupal.org/project/omega Para instalarlo, vaya a Apariencia> Instalar tema nuevo.

Hay dos formas de hacerlo va web desde el administrador de Drupal. 1. Copiar la url del archivo ftp desde la pagina del tema y click en el botn de Instalar. 2. Descargar el archivo y buscar en el equipo local y click en el botn de instalar.

Tambin es posible hacerlo por va FTP Es necesario tener acceso FTP de su sitio, siga estas instrucciones:
1. Descargar Omega 7.3 Release recomendado

2. Descomprimirlo (7-Zip o similar) 3. Coloque la carpeta Omega y su contenido en su sitio de Drupal /sites/all/themesor /sites/example.com/themes

Despus de la instalacin usted ver dos nuevos temas disponibles Core y Core Alfa Omega.

No es necesario activar estos o establecer como predeterminados. De hecho, es mejor si no lo haces. Usted va a utilizar estos temas como base y har toda su obra en los subtemas que se cree de los mismos. Si ha instalado el mdulo de Omega Tools, context y Delta ver un enlace adicional en la pgina de Apariencia.

Paso 3. Cree el Subtema

Se recomienda crear un subtema de Omega en lugar de editar el tema bsico en s, Cuando se crea el subtema casi todas las caractersticas del tema base son heredados por el sub-tema. Es genial, porque cuando llega el momento de las actualizaciones de versin, slo tienes que actualizar la base, y todos los sub-temas se actualizar con l. Cualquier personalizacin que haya realizado en el subtema no se vern afectados. Existen 3 formas de crear un subtema

Creacin de una Subtema Usando Omega Tools (recomendado para principiantes) Creacin de una Subtema con Drush (Recomendado para usuarios avanzados) Creacin de una Subtema - Versin Manual (Si todo lo dems falla)

En esta guia explicare como hacerlo usando el mdulo Omega Tools, puede dirigirse a los links si necesita hacerlo de las otras formas. Creacin de una Subtema Usando Omega Tools (recomendado para principiantes) Primero debes de tener instalado y activado el mdulo Omega Tools (admin / modules / omega_tools) Luego debes de ir a Apariencia y hacer clic en Crear nuevo subtema Omega.

Dar un nombre a su tema Elige tu tema bsico. Elige tu kit de inicio.

Omega le ofrece dos opciones de kit de arranque, Omega-html5 y Omega xhtml. HTML5 es una mejor opcin en trminos de compatibilidad a largo plazo con los estndares web modernos. Elige Omega-xhtml kit de inicio si usted tiene algn requerimiento especial XHTML.

Paso 4. Ir al asistente de configuracin y Finalizar

Esta a un paso del asistente para finalizar y tener funcionando su subtema. Si da click en el botn de finalizar del asistente, tendr funcionando el subtema tal y como est escrito por default. Si da click en el botn de continuar, tendr ms opciones de configuracin del sub-tema, podr modificar el archivo .info si lo desea. .

Marque la casilla para habilitar el tema.

Despus haga clic en Activado, puedes elegir si desea que sea el tema predeterminado de su sitio web. Tambin puede hacer clic en configuracin avanzada para abrir ms opciones, como mencionaba anteriormente si desea modificar el archivo .info.

Cuando regrese a la pgina de Apariencia ver que el tema con el nombre que le dio y que es ahora el tema por defecto.

Paso 5. Visite el sitio

Esto es lo que ver cuando usted eche un vistazo en el sitio.

Omega incluye la capacidad de usar herramientas de depuracin, tales como una superposicin de cuadrcula y bloques de depuracin para mostrar las diversas regiones configurados en la pgina. Las barras de color rosa son las columnas creadas por el sistema de rejillas (960 Grid). Las cajas son bloques que hay en las regiones. Usted puede ver fcilmente cmo las regiones se organizan y cuntas columnas estndar abarca.

En la parte superior derecha de la pantalla podr ver dos marcas de verificacin verdes. Al pasar el ratn sobre ellos se abren y le dir lo que se relaciona. Si hace clic en GRID, la marca cambiar a una X de color rojo y las barras de color rosa desaparecer. Al hacer clic en bloques, cambiar los contornos de las regiones.

As es como se v el sitio cuando las rejillas y los bloques de las regiones estan "apagados".

Paso 6. Configure el sub-tema que ha creado

Una de las cualidades ms deseables de Omega es la capacidad de tener configuracin a un nivel profundo que estar a su alcance a travs de la interfaz de usuario en la configuracin del tema. Para acceder a la configuracin del sub-tema (una vez que el sub-tema est habilitado), vaya a admin / apariencia / ajustes / sub-tema. En las opciones de configuracin en la parte izquierda, se encuentra gran parte de lo que necesita para crear temas ricos y sensible todo con la facilidad de una interfaz interactiva para el usuario.

Haga clic en Opciones situado junto al logo del tema en la pgina de Apariencia. Puede pasar por alto el vnculo Editar. Le llevar al asistente incompleto que no lleg a utilizar durante la instalacin.

Elija su sistema de rejillas. Sus opciones son 960px (predeterminada) y Fluido. Si opta por Fluido, usted ya no tendr columnas fijas, y la distribucin se ampliar al 100% de la pantalla. Los ajustes de respuesta ser marcada por defecto.

Lo que ve en la imagen anterior ayudar a su sitio web a que se vea bien en dispositivos moviles. Ya que controla el zoom de su sitio web en los navegadores mviles, aadir la etiqueta meta viewport que har que su sitio se muestre correctamente sin importar el tamao de la pantalla del dispositivo mvil. En casi todos los casos de uso usted no tendr que tocar estos parmetros, la experiencia mvil sera ptima ya que fijara la vista en una escala haciendo que el sitio web se sienta nativo en el dispositivo. Para obtener ms informacin sobre Viewport metatags haga clic aqu.

Distribucin primaria Seleccione cual sera el diseo por defecto. Esta ser tambin la vista predeterminada de tu sitio en IE7 / 8 o navegadores que no soportan media queries. "Diseo Normal" est activada por defecto ya que es el diseo web con estndares web de 960px de ancho. Configuracin de diseo Aqu usted puede activar/desactivar los diferentes diseos como: narrow, normal y wide. Tambin puede cambiar los diferentes media queries para cada tamao, y su peso (es decir, el orden de la carga). Recuerde que cada diseo tiene una hoja de estilo correspondiente en la carpeta de css de su sub-tema para fines de tematizacin. El valor predeterminado de tamao de los diseos es el siguiente (en base al tamao de pantalla del dispositivo, no el tamao de las rejillas):

Movil: de 0px a 740px de ancho Narrow: de 741px a 979px de ancho - Tablet en posicion Portrait Normal: de 980px a 1219px de ancho - Escritorios Non-fullscreen y la mayora de tabletas en Landscape Wide: de 1220px en adelante - Monitores de escritorio de pantalla ancha

Paso 7. Configuracin de zona y regin

Lo primero es lo primero: Es muy importante entender que usted debe colocar su contenido en bloques, bloques en Regiones, Regiones en Zonas y las zonas en las secciones. En la interfaz de usuario del tema (UI) se puede hacer posicionamiento de bloques, regiones, zonas y secciones de forma muy simple. Usted debe suponer que la mayor parte de su estructura de la pgina / layout se puede hacer utilizando la interfaz de usuario. Por lo general hay muy poca necesidad de modificar el sub-tema mediante cdigo personalizado en Tpls.

Cada panel corresponde aqu a las filas de las secciones y las regiones que se muestran en la pgina de inicio. Vea su sitio web o echar otro vistazo a la imagen en el paso 5, y usted ver que esta lista corresponde a su diseo. El enlace dice configurar zonas y regiones, pero los paneles estn tituladas seccin y zona. Una

seccin es una envoltura que va a travs de toda la cuadrcula de los grids de la pagina, en total hay 3 zonas por default que son header, content y footer, sirve mucho para la tematizacin del sitio web. Una zona es una parte de la seccin. Al hacer clic en la zona, vers la regin que se encuentra en la zona. Estas seran las mismas que las "regiones de bloque" en otras plantillas, y ser el lugar en el que colocar los bloques. Esto a un inicio es muy confuso. Eventualmente tuve que empezar a colocar contenido y asignar algunos bloques en las regiones para ver lo que realmente estaba sucediendo. Esto es lo que usted necesita para empezar a darle forma a las regiones o zonas.

Haga clic en Zona de usuario para abrir la edicin de un panel. Haga clic en Configuracin para modificar la configuracin. Haga clic Regiones para abrir el panel que muestra las regiones. Haga clic en el nombre de la regin que desea editar.

Para cada zona, las siguientes opciones estn disponibles: Provide full width wrapper around this zone : Al habilitar esta funcin le dar una envoltura alrededor de la misma zona, es decir, agregar un contenedor alrededor de la zona, lo que le permite tema en los elementos que aparecen fuera de la zona pixel 960 contenedores.

Force this zone to be rendered: Activar siempre esta zona, incluso si est vaca. Customize the region positioning: Esto le permite manipular la inclusin de las regiones en esta zona. Section: Define en qu seccin estar la zona. Para mover una zona a otra seccin, elija el nombre de la seccin que desee que este la zona.

Weight: Define el orden de las zonas que estarn dentro de la seccin. Para mover una zona, seleccione un nuevo peso. Las zonas se ordenan de menor a mayor nmero. Column count: Elija el nmero deseado de columnas para la zona. Las opciones por defecto son 12, 16, y 24. Cada zona define su propio nmero de columnas, lo que significa que puede utilizar un nmero diferente de columnas para cada zona de la pgina. Primary region: Define qu regin dentro de la zona debe aparecer primero en el cdigo fuente y se expanden para llenar el espacio vaco si otras regiones de esa zona estn vacos. Additional zone classes: Puede introducir clases CSS que se aada a la zona para la tematizacin. Additional wrapper classes: Puede introducir clases CSS que se aade a la envoltura de la zona para la tematizacin. Esto slo se utiliza si la opcin de proporcionar una envoltura de anchura completa alrededor de la zona est habilitada. En cada regin, los siguientes ajustes estn disponibles: Force this region to be rendered: Activar esta regin siempre, incluso si est vaca. Zone: Define la zona donde estar la regin. Para mover una regin a otra zona, elija el nombre de la zona deseada. Prefix: Elija el nmero de columnas vacas que deben aparecer antes de esta regin.

 Width: Elija el nmero de columnas de la regin que debe tomar dentro de la zona. El nmero total de columnas para las regiones en una zona (ms cualquier prefijo o sufijo de columnas) debe ser igual al nmero de columnas elegido para la zona. Suffix: Elija el nmero de columnas vacas que debe aparecer despus de esta regin. Weight: Define el orden de la regin donde se colocar dentro de la zona. Para mover una regin, elige un nuevo peso. Las regiones se ordenan de menor a mayor nmero. El peso entra en juego cuando se ve su sitio web en un dispositivo mvil (o la ventana de su navegador est configurado para una anchura menor) y las regiones empiezan a apliarse de forma vertical, la regin con el menor peso flotar en la parte superior, mientras que la regin con el mayor peso se hundir hasta el fondo. IE: Si la "Regin Sidebar primaria" tiene un peso de -5, y la "Regin de contenido" Tiene un peso de 10, cuando la ventana est contrado al tamao mvil de la "Regin Sidebar Primaria" estar en la cima de esa zona, y la "regin de contenido" estar en la parte inferior. Additional region classes: Introduzca las clases CSS que se aade a la regin para la tematizacin.

Debugging

En debuggin encontramos las herramientas de depuracin que estn activados por default, as como los permisos de visualizacin por roles de usuarios que existen, si consideramos ya no usarlos solo debemos desactivarlos.

Paso 8. Explicacin de CSS en OMEGA

Esto describir las mejores prcticas de CSS y cmo distinguir una zona de una regin de un sub-tema.

CSS IDs y Clases en un tema de Omega: una descripcin general

Cuando se acerque a la tarea de hacer la tematizacin de un nuevo subtema de Omega, es importante tener en cuenta la variedad de clases y los identificadores que estn integrados en la estructura de Omega. Tomando la seccin de contenido que en este caso contiene un rea de contenido que ocupa 8 columnas de rejillas de ancho, y una regin que es la barra lateral que ocupa las restantes 4 columnas, se puede ver una estructura anidada:

section con el id "section-content" y con clases "sectGroupion" and "section-content"

div con id "zone-content-wrapper" y clases "zone-wrapper", "zone-content-wrapper" y "clearfix" (este div slo existe si la zona esta configurada para tener una envoltura de ancho) div con id "zone-content" y clases "zone", "zone-content", "clearfix" y "container-12" div con id "region-content" y clases "grid-8", "region" y "region-content" div con clases "region-inner" y "region-content-inner" div con id "region-sidebar" y classes "grid-4", "region" y "region-sidebar" div con clases "region-inner" y "region-sidebar-inner"

Aqu est una imagen que muestra esta estructura: Hay un patrn general que se puede utilizar:

Las secciones contienen zonas, estas contienen regiones y estas contienen bloques, y como puede ver en esta imagen, el patrn es visible:

El trmino <ST> es para el ttulo de la seccin, <zt> significa el ttulo de zona, <rt> representa el ttulo regin y <bn> es el nombre del bloque - todos estos son nombres de mquina como en la informacin del archivo del tema. Tambin donde se ve la rejilla es <x> aqu es donde la anchura de una regin se especifica. Conocer esta estructura es muy til cuando usted est buscando especificar estilos para determinadas secciones de la pgina.

Cmo funciona las hojas de CSS de un Sub-tema en Omega?

CSS es donde Omega gana su poder. A travs de los media queries, Omega tiene la capacidad de determinar la anchura del navegador y responder en consecuencia. La comprensin de cmo ocurre esta respuesta es fundamental para crear un trabajo de un tema sensible en Omega. Todos los archivos de CSS en el que usted debe centrarse para la edicin se encuentran en la carpeta de css del sub-tema en sites/all/themes/yoursubthemename/css

NOTA: Cuando la opcin Enable the responsive grid est desactivada, el "Diseo principal" se utiliza. Por defecto se establece "normal (960px)" como ancho preterminado. En este caso, se puede usar los archivos global.css y susubtema-alpha-default-normal.css que se cargaran y por lo tanto tendr que poner sus ediciones en uno de ellos. Conoce tus Capas Aprender cmo estas diferentes capas se afectan entre s, usted comenzar a ver la mejor manera de crear sus hojas de estilo para lograr el efecto deseado. Las capas que debatiremos y su significado y funcionalidad es la siguiente: global.css = global yoursubthemename-alfa-default.css = por defecto yoursubthemename-alpha-default-narrow.css = estrecho yoursubthemename-alpha-default-normal.css = normal yoursubthemename-alpha-default-wide.css = ancho

La herencia es clave La mejor manera de pensar de estas capas es como paneles transparentes de vidrio, sobre la que va a crear los estilos. Lo que se coloca sobre la capa inferior se mostrar a travs de los otros a menos que un estilo idntico se coloque sobre una capa superior de la misma. Esta herencia de las hojas de estilo donde una capa esta sobre la siguiente le ayudar a prevenir archivos de css grandes que tienen estilos duplicados en cada capa. Usando la ilustracin de vidrios apilados, global.css es la capa inferior que si no se sobrescribe tendr su estilo heredado por todas las dems capas.

* NOTA * Omega es "Mobile First". Esto significa que el tema se construye a partir de la experiencia mvil y crecera progresivamente hasta que se muestre la versin de escritorio. El diseo Mobile-First ser la base para toda la experiencia, y global.css le permitir crear un entorno integrado de respuesta para los usuarios. En principio puede ser difcil y confuso empezar a construir de primero la versin mvil, pero es recomendable hacerlo ya que las hojas de estilo CSS no repetirn cdigo en cada archivo. Capa sobre capa La estructura de capas de los archivos css predeterminados es (de abajo hacia arriba) como en la imagen que se mostro anteriormente: global default narrow normal wide. Como los media queries responden con el ancho del navegador, pues los archivos de CSS estan bien apilados en el orden indicado anteriormente. Un ejemplo muy practico para entender como funcionan las capas de hojas de estilo, son el tamao de letra, color de letra o el fondo del sitio web.

En la imagen anterior puede notar que el color de letra est de color rojo, y esta propiedad ha sido puesto en el archivo global.css que se encuentra en la carpeta css de su sub-tema de OMEGA, al ponerlo en el archivo global.css este se hereda en las dems vistas. De esa forma podemos controlar los estilos que deseamos en cada vista del diseo, ya que casi siempre es necesario mostrar de diferente forma el contenido para cada tamao de pantalla.

En la imagen anterior se puede ver que se agrego la misma propiedad, solo que ahora fue en el archivo subtema-alpha-default-narrow.css y este sobre escribe la propiedad que se puso en global.css, de esta forma es como se controla lo que deseamos ver para cada diseo segn el tamao del dispositivo. Este efecto de capas le permite hacer cambios en cada capa de forma consecutiva. Mantener un buen sentido de los archivos css que desea editar con el fin de lograr el efecto deseado tomar algn tiempo para acostumbrarse, pero con la practica y estar jugando con las hojas de estilo lo llevaran a comprender bien como funciona y como puede construir su proyecto. Espero que con esto usted pueda empezar a construir su propio sub-tema basado en OMEGA, y as tener un grandioso sitio web sensible a cualquier dispositivo mvil.

Enlaces de fuentes http://drupal.org/node/1768696 http://www.ostraining.com/blog/drupal/omega/ http://www.mediacurrent.com/blog/inside-look-omega-theme