Miguel Rodríguez hace desarrollo de software efectivo.

Como tematizar a Drupal 7 con Omega 3

A pesar de que estoy dando concejos de tematización y diseño, recuerda que no soy diseñador, soy un desarrollador, y lo mejor que puedo hacer es algo que se vea bien pero funcional.
Este tutorial está basado solamente en mis experiencias de Drupal 7 y Omega 3.
Requerimientos:
 
  • deberías saber algo básico de HTML.
  • deberías saber algo básico de CSS.
Cuando se trata de subtemas en Drupal, Omega es uno de los mejores temas bases, es 100% configurable y optimizado en HTML5, así que, como se supone que debemos tematizar Drupal con Omega, eso es lo que vamos a discutir en este artículo.
 

Creando el subtema

 
El primer paso para tematizar con Omega es crear uno de sus subtemas, la mejor manera de crear un subtema es usando Drush Omega tools, esto puede ser hecho al tipiar este comando.
  1. > drush omega-subtheme misubtema
Desafortunadamente, no discutiremos una descripción minuciosa acerca de la creación de un subtema en este artículo, sin embargo, pueden encontrar más información en la sección "Omega subtheming" (ingles) de la documentación de Omega.
 
Una vez crees el subtema y lo establezcas por defecto, veras un monton de bloques raros y líneas rosa, esas son las secciones siendo resaltadas para mostrar su espaciado, ancho y largo, a fin de apagar eso desmarca la casilla a la derecha (temporalmente) o ve a las opciones y apaga las opciones de depuración (permanente).
 

La estructura de Omega

 
Omega tiene una estructura basada en una grilla dividida en muchas partes; zonas, regiones and secciones, esta organización puede variar dependiendo en las modificaciones hechas en el archivo ".info".
 
Las regiones son las piezas más pequeñas de la estructura de Omega, siendo más específico, ellas son las columnas de la grilla, se supone que ellas retienen el resto del contenido (los bloques, Vistas, ...), el número de columnas por cada una puede ser configurado, así como el prefijo y sufijo (columnas vacías para llenar espacios no usados). La organización de las regiones puede cambiar dependiendo del dispositivo (esto puede ser configurado en las opciones), puedes esperar que cada región tenga sus propios márgenes (otras propiedades como la "anchura" también son establecidos), por lo tanto, cambiar estas propiedades vía CSS por cualquier razón está altamente desaconsejado.
 
Las zonas son los contenedores de cada grilla, habrá tantas grillas como zonas hayan, las grillas tienen un numero de columnas permitidas hasta 24 columnas, cada zona puede tener su propia configuración, así que quizás una zona tenga 12 columnas y otra tenga 16 columns, a diferencia de las regiones, tomarán toda la pantalla horizontalmente, y pueden ser solamente organizadas verticalmente, las zonas pueden contener solamente regiones y nada más.
 
MechDeveloper - Demostración de regiones
Las regiones son las columnas de Omega.
Atribución: 
 
Las secciones son los contenedores de las zonas, sus anchos toman toda la pantalla y sus alturas dependen del contenido que sostienen, a diferencia de las zonas y regiones, ellas no pueden se ordenadas (o si quiera creadas) por el usuario, solo hay tres de ellas, la sección de cabecera, la sección de contenido y la sección de pie de página, deben ser consideradas como envolventes de contenido estático. Por ejemplo, la cabecera, el contenido y el pie de página no deberían ser movidos de sus posiciónes, si fueran cambiados, el contenido pudiera perder significado o sentido. No hay manera (al menos en Omega) para crear u organizar las secciones, sin embargo, puedes crear más secciones al hackear Omega (ingles).
 

Reemplazando las plantillas

 
El método para reemplazar una plantilla existente es exactamente la misma a la vía por defecto (ingles), la única cosa a mantener en cuenta es que las plantillas a reemplazar están en la carpeta "templates" de Omega, técnicamente, Omega es un subtema de Alpha (Omega es un grupo de temas base, Alpha es solo uno mas), por lo tanto, todas las plantillas están en la carpeta "templates" de Omega y Alpha, a fin de reemplazar una de estas plantillas, copia la plantilla de la carpeta "templates" de Omega al subtema.
 
Omega provee plantillas para reemplazar cada parte de su estructura (zonas, regiones y secciones), puedes esperar por cada plantilla una variable sosteniendo el contenido ($content), el envolvente del contenido y el envolvente de la entidad (en otras palabras, otro envolvente encerrando las zonas, regiones o secciones dadas), sin embargo, las secciones solo tendrán el contenido y su envolvente, Omega establece atributos al envolvente del contenido y la entidad a fin de establecer propiedades requeridas, por ejemplo, Omega añade clases CSS a través de esta vía para establecer el ancho apropiado a cada región, por lo tanto, modificar estos atributos está altamente desaconsejado.
 
Al hacer las plantillas de las regiones, es bueno añadir o modificar código solo dentro de envolvente de la entidad, como fue dicho antes, añadir propiedades CSS como márgenes, rellenos (paddings) o cualquier cosa similar a las regiones está altamente desalentado, también hay otras propiedades que pueden romper la distribución, la propiedad de borde es una de ellas, así que la propiedad "box-sizing" debería ser usada con ella, recuerda que las regiones representan las columnas in la grilla, sus anchos y posiciónes pueden variar.
 
Las zonas no tienen las mismas restricciones que las regiones, así que puedes añadir todo el código necesitado donde quieras que esté, sin embargo, el envolvente del contenido tiene propiedades CSS que no deberían ser cambiados, el envolvente de la entidad para todas las zonas puede aparecer en ciertas condiciones, cualquier espacio fuera del envolvente del contenido puede ser usado para especificar una parte en la página web el cual tome toda la pantalla. Vamos a ver un ejemplo, esta es la sección "highlighted" de este sitio web, como se puede ver, la sección "highlighted" toma toda la pantalla de izquierda a derecha, no puedes hacer lo mismo con una región, el enfoque correcto para hacerlo es usar la zona para tomar toda la pantalla así.
MechDeveloper - Acerca de mi
Esta es la zona 'highlighted'(resaltada) de este sitio web, tales partes como estas no pueden ser construidas usando regiones.
Atribución: 
 

Añadir CSS

 
A fin de dar color al sitio web, los archivos CSS deben ser escritos, Omega provee algunos archivos CSS para implementar el código al tema, esos archivos, como el resto del tema, fueron construidos en la metodología "Mobile First", esta metodología está basada en servir el diseño a dispositivos móviles y luego adaptarlo a dispositivos con mayor resolución, especialmente porque un dispositivo móvil tiene menores capacidades (por ahora) y espacio más pequeño que el computador de sobremesa, adaptar un diseño móvil el cual consume menores recursos a un diseño de sobremesa que consume más recursos es mas fácil que hacer lo contrario.
 
Mobile First (Diseño responsivo)
La metodología 'Mobile First' se centra en la entrega de la página web a empezando por los dispositivos móviles.
 
Los archivos CSS serán mostrados en un orden específico de acuerdo al tamaño de la pantalla del dispositivo accediendo al sitio web, empezando con el archivo mostrado para dispositivos móviles, estos archivos están descritos abajo.
  1. 0px - 740px: global.css
  2.  
  3. 741px - 979px: global.css + default.css + narrow.css
  4.  
  5. 980px - 1219px: global.css + default.css + narrow.css + normal.css
  6.  
  7. +1220px: global.css + default.css + narrow.css + normal.css + wide.css
Todos estos archivos están descritos en la sección "Omega theory" (ingles) en la documentación de Omega, como se puede ver, cada archivo tiene un tipo de dispositivo de inicio donde es mostrado por primera vez, desde ese tipo de dispositivo, el archivo empieza a ser mostrado para el resto de dispositivos, de acuerdo con esta descripción, el archivo "global.css" está mostrado todo el tiempo, este archivo debe tener todos los colores, imágenes, estilos, animaciones, todo, este archivo debe presentar la información solo para dispositivos móviles, sin embargo, los otros archivos generarán un respaldo/repliegue para los otros dispositivos, formateando el arreglo existente para presentar la información como se desee. Los dispositivos no móviles como las tablets, laptops y PCs son mostrados empezando desde el archivo "default.css", por lo tanto, el archivo "default.css" es el archivo apropiado para añadir código CSS para los dispositivos no móviles.
Puedes colocar mas archivos CSS como quieras, por ejemplo, pudieras querer establecer otro archivo CSS para hacer el sitio web "print friendly" (imprimible), a fin de hacer eso solo añade algunas líneas a el archivo ".info", así.
  1. css[<the given CSS file>][name] = 'El nombre del archivo'
  2.  
  3. css[<the given CSS file>][description] = 'la descripción del archivo dado.'
  4.  
  5. css[<the given CSS file>][options][weight] = '10 (aparente orden del archivo)'
  6.  
  7. css[<the given CSS file>][options][media] = print (print, screen, ...)
Cada envolvente de contenido y envolvente de entidad tienen una clase y un ID específico con un patrón común (usualmente la clase y el ID siempre son el mismo), este convenio de definición da una vía para referirse a cualquier parte de la estructura de Omega en todos los archivos CSS, el patrón para las regiones, zonas y secciones son descritas de la siguiente manera; los envolventes del contenido solo tienen dos clases, la primera es "region-inner" y la segunda es "region" seguido del nombre de la región y "inner", todo separado con guiones, Los envolventes de la entidad de las regiones usualmente tienen "region" seguido del nombre de la región dada separado por guion. Los envolventes del contenido de las zonas usualmente tienen "zone" seguido del nombre de la zona dada, los envolventes de entidad de las zonas usualmente tienen "zone" y en nombre de la zona dada, pero, adicionalmente, tiene "wrapper", todo está separado con guiones (recuerda que el envolvente de entidad de las zonas puede no aparecer). Los envolventes de contenido de las secciones siempre tienen "section" seguido del nombre de la sección dada separado con un guión.
Esto sería un ejemplo de todos los patrones en la estructura:
 
  1. <!-- esto es una sección -->
  2.  
  3. <div id="section-<nombre de la sección>" class="section section-<nombre de la sección>"> <!-- envolvente de contenido -->
  4.  
  5. ... contenido ($content) ...
  6.  
  7. </div>
  8.  
  9. <!-- esto es una zona -->
  10.  
  11. <div id="zone-<nombre de la zona>-wrapper" class="zone zone-<nombre de la zona>-wrapper"> <!-- envolvente de la entidad, puede no aparecer -->
  12.  
  13. <div id="zone-<nombre de la zona>" class="zone zone-<nombre de la zona>"> <!-- envolvente de contenido -->
  14.  
  15. ... contenido ($content) ...
  16.  
  17. </div>
  18.  
  19. </div>
  20.  
  21. <!-- esto es una región -->
  22.  
  23. <div id="region-<nombre de la región>" class="region region-<nombre de la región>"> <!-- envolvente de la entidad -->
  24.  
  25. <div class="region-inner region-<nombre de la región>-inner"> <!-- envolvente del contenido -->
  26.  
  27. ... contenido ($content) ...
  28.  
  29. </div>
  30.  
  31. </div>
 
Para más información puedes visitar "CSS IDs and Classes in an Omega theme: a general outline" (en inglés), adicionalmente, la documentación de Omega también describe cada parte de la estructura separadamente en la sección "Omega CSS Strategy Explained" (en inglés).
 

Arreglo de la disposición

 
A diferencia de los temas construidos desde cero, Omega permite cambiar la disposición de la estructura a traves de las opciones del tema, no hay necesidad de habilidades de programación para organizar la disposición, al hacerlo, asegúrate de haber completado todas las personalizaciones necesarias, Omega permite cambiar el orden de cada zona o región. La estructura del sitio web en si mismo debe ser cambiado con estas opciones, en otras palabras, si el logo está localizado a la izquierda de la cabecera, si está en el centro, si hay tres o cuatro columnas en el pie de página, todas estas cosas deben ser cambiadas usando estas opciones.
Omega - Arreglo de contenido
La disposición puede ser organizada en la sección 'Zones and regions configuration' en las opciones del tema.
 
Al organizar la disposición puedes establecer clases CSS a las regiones, por lo tanto, definir todos los estilos que pueden ser asignados a muchos elementos como clases CSS es una buena idea, trata de prestar especial atención a esto porque el arreglo de la disposición es una fase clave de la tematización de Omega, además, ahorrarías un montón de tiempo haciendo esto y añadirías funcionalidad extra al tema.
 

Reuniendo todo junto

 
Aunque hemos visto casi todo lo que tenemos que saber acerca de la tematización de Omega, toda esta información puede ser solo teoría, así que vamos a ver algunas guías prácticas y consejos como deberías deberías usarla:
 
  • Antes de hacer nada deberías tener una idea del diseño que vas a escribir en el tema (solo decía).
  • Los pasos comunes para tematizar con Omega son los siguientes (o, al menos, yo seguiría estos pasos); ( crea un subtema ) -> ( modifica la estructura HTML reemplazando las plantillas de ser necesario ) -> ( escribe los archivos CSS ) -> ( organiza la disposición para hacer ver al tema como estaba previsto ) -> ( bloques, vistas, escribir contenido, ... )
  • El diseño del sitio web y la estructura de Omega deben coincidir de alguna manera, el primer paso para hacer esto es definir todas las zonas y regiones que vas a usar, las regiones y zonas por defecto traídas por defecto con Omega son útiles, pero, debes asegurarte que esas son suficientes para ti, si no, entonces define tantas regiones y zonas como necesites. Haz un buen uso de la estructura de Omega, la estructura de Omega es lo suficientemente buena para encargarse de cualquier página web, es realmente importante pensar acerca de las posibles zonas y regiones del diseño, no tienes que pensar acerca de los bloques o cualquier otra cosa (por ahora), recuerda que las zonas son los contenedores para las grillas y las regiones son las columnas en sí mismas.
  • Hay un par de zonas y regiones que eres muy probable de reemplazar, por ejemplo, la región del menú y la región de la marca (donde está el logo), esas regiones pueden ser reemplazadas para modificar el contenido de esas regiones en caso que algunas opciones sean activadas como el menú principal & secundario, el slogan o el logo. Adicionalmente, hay algunos diseños los cuales requieren una zona bastante diferentes de otras zonas, las plantillas de estas zonas son candidatas de ser reemplazadas, aunque Omega está optimizado para HTML5, puedes sobrescribir la plantilla de una región para establecer semánticas especiales (aside, section, article, ...).
  • A fin de hacer ver la disposición del tema como el diseño, debes organizar las regiones en las opciones del tema, si el logo en el diseño está en el centro entonces coloca la región de marca en el medio de dos regiones (que seguramente tendrán un menú dividido), si el logo está a la derecha entonces organiza cada región apropiadamente.
  • Una vez las zonas y las regiones estén organizadas, establece los bloques a sus regiones correspondientes, todas las regiones serán mostradas en la opción de bloques de Drupal, en otras palabras, esto representaría asignar el contenido del sitio web.
  • Todas las secciones son el fondo del tema entero, asegúrate de establecer los colores e imágenes apropiadas por cada sección.
  • Trata de hacer un uso apropiado de las clases CSS, puedes usar las clases CSS para asignar los estilos a las regiones, algunos otros módulos como Panels y Views pueden usar esto también (incluso CKEditor puede usar clases CSS).
  • Usa el patrón de definición de Omega para dar la apariencia apropiada a todas las partes deseadas de la disposición usando CSS, la mayoría de los casos, las secciones de cabecera, contenido y pie de página, junto con las regiones de barra lateral (primera & segunda), marca y menú, siempre son personalizadas.
  • Nunca uses ninguna propiedad que pueda dañar la disposición como bordes, márgenes, rellenos (paddings), esto también incluye propiedades de posición con valor "absolute" ("position:absolute").
  • La mayoría de los casos, desactivar las hojas de estilo no usadas está recomendado, verifica si el tema realmente necesita los "Menu styles", "Omega styles", y cualquier otra hoja de estilo, esto se puede encontrar en la sección "toggle styles" (alternar estilos) en las opciones del tema.
  • Desafortunadamente, debes establecer las etiquetas HTML condicionales por ti mismo porque esto no viene con  Omega, simplemente reemplaza la plantilla HTML (html.tpl.php), remueve la etiqueta HTML actual y añade la etiqueta  HTML condicional, esto sería un ejemplo de una archivo de plantilla HTML modificado.
  1. <?php print $doctype; ?>
  2.  
  3. <!-- añade estas líneas abajo -->
  4. <!--[if lt IE 7 ]> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?> class="no-js ie ie6"><![endif]-->
  5. <!--[if IE 7 ]> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?> class="no-js ie ie7"> <![endif]-->
  6. <!--[if IE 8 ]> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?> class="no-js ie ie8"> <![endif]-->
  7. <!--[if IE 9 ]> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?> class="no-js ie ie9"> <![endif]-->
  8. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?> class="no-ie no-js"> <!--<![endif]-->
  9. <!-- añade estas líneas arriba -->
  10.  
  11. <!-- quita o reemplaza esta linea abajo -->
  12. <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?>>
  13. <!-- quita o reemplaza esta linea arriba -->
  14.  
  15. <head<?php print $rdf->profile; ?>>
  16. <?php print $head; ?>
  17. <title><?php print $head_title; ?></title>
  18. <?php print $styles; ?>
  19. <?php print $scripts; ?>
  20. <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  21. </head>
  22. <body<?php print $attributes;?>>
  23. <div id="skip-link">
  24. <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  25. </div>
  26. <?php print $page_top; ?>
  27. <?php print $page; ?>
  28. <?php print $page_bottom; ?>
  29. </body>
  30. </html>

About me

Acerca del autor
Miguel Rodríguez es un desarrollador freelance de Caracas - Venezuela, es una persona persistente y orientada a metas que trata de hacer el mejor uso de sus recursos, es lo suficientemente positivo, proactivo y motivado como para plantear una meta con intenciones de cumplirla, encuentra más sobre él .