GUÍA DE OMEGA FRAMEWORK EN DRUPAL 7. RESPONSIVE DESIGN EN DRUPAL Por: Luis Dueñas

Transcripción

1 GUÍA DE OMEGA FRAMEWORK EN DRUPAL 7 RESPONSIVE DESIGN EN DRUPAL Por: Luis Dueñas

2 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 del trá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 que mediante 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, base de 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 que el enfoque de Omega en el theming es diferente a otros temas. Si asume demasiado se puede encontrar complicaciones en la comprensión

3 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 encontrara todos 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 base puede 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á utilizando versiones dev de cualquiera de estos módulos, utiliza la versión dev para todos con el fin de mantener la compatibilidad.

4 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. Delta Delta es una poderosa herramienta que le permite crear variaciones de una configuración 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 configuración de región y crear todos los diseños 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 representación 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 página para ver qué contexto está activo. Cualquier reacción que se asocian a contextos activos son entonces disparado. Ctools Un conjunto de APIs que son requeridos por muchos módulos en Drupal. Es probable que usted ya tiene ctools habilitada para otros módulos. Views Es un sistema para hacer consultas a la base de datos y un generador de reportes personalizados. Se trata de un módulo muy potente. Nota de precaución: Algunos de estos módulos 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 creación de un sub-tema. Algunos de estos módulos se encuentran todavía 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 producción, si vas a hacer cambios o antes de instalar cualquiera de estos módulos.

5 Paso 2. Descargar e instalar Omega Puede descargar el Framework aquí: Para instalarlo, vaya a Apariencia> Instalar tema nuevo. Hay dos formas de hacerlo vía web desde el administrador de Drupal. 1. Copiar la url del archivo ftp desde la pagina del tema y click en el botón de Instalar. 2. Descargar el archivo y buscar en el equipo local y click en el botón de instalar.

6 También es posible hacerlo por vía 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 Después de la instalación usted verá dos nuevos temas disponibles Core y Core Alfa Omega.

7 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 módulo de Omega Tools, context y Delta verá un enlace adicional en la página de Apariencia. Paso 3. Cree el Subtema Se recomienda crear un subtema de Omega en lugar de editar el tema básico en sí, Cuando se crea el subtema casi todas las características del tema base son heredados por el sub-tema. Es genial, porque cuando llega el momento de las actualizaciones de versión, sólo tienes que actualizar la base, y todos los sub-temas se actualizará con él. Cualquier personalización que haya realizado en el subtema no se verán afectados. Existen 3 formas de crear un subtema Creación de una Subtema Usando Omega Tools (recomendado para principiantes) Creación de una Subtema con Drush (Recomendado para usuarios avanzados) Creación de una Subtema - Versión Manual (Si todo lo demás falla) En esta guia explicare como hacerlo usando el módulo Omega Tools, puede dirigirse a los links si necesita hacerlo de las otras formas. Creación de una Subtema Usando Omega Tools (recomendado para principiantes) Primero debes de tener instalado y activado el módulo Omega Tools (admin / modules / omega_tools) Luego debes de ir a Apariencia y hacer clic en Crear nuevo subtema Omega.

8 Dar un nombre a su tema Elige tu tema básico. Elige tu kit de inicio. Omega le ofrece dos opciones de kit de arranque, Omega-html5 y Omega xhtml. HTML5 es una mejor opción en términos de compatibilidad a largo plazo con los estándares web modernos. Elige Omega-xhtml kit de inicio si usted tiene algún requerimiento especial XHTML.

9 Paso 4. Ir al asistente de configuración y Finalizar Esta a un paso del asistente para finalizar y tener funcionando su subtema. Si da click en el botón de finalizar del asistente, tendrá funcionando el subtema tal y como está escrito por default. Si da click en el botón de continuar, tendrá más opciones de configuración del sub-tema, podrá modificar el archivo.info si lo desea..

10 Marque la casilla para habilitar el tema.

11 Después haga clic en Activado, puedes elegir si desea que sea el tema predeterminado de su sitio web. También puede hacer clic en configuración avanzada para abrir más opciones, como mencionaba anteriormente si desea modificar el archivo.info. Cuando regrese a la página 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.

12 Omega incluye la capacidad de usar herramientas de depuración, tales como una superposición de cuadrícula y bloques de depuración para mostrar las diversas regiones configurados en la página. 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 fácilmente cómo las regiones se organizan y cuántas columnas estándar abarca. En la parte superior derecha de la pantalla podrá ver dos marcas de verificación verdes. Al pasar el ratón 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".

13 Paso 6. Configure el sub-tema que ha creado Una de las cualidades más deseables de Omega es la capacidad de tener configuración a un nivel profundo que estará a su alcance a través de la interfaz de usuario en la configuración del tema. Para acceder a la configuración del sub-tema (una vez que el sub-tema está habilitado), vaya a admin / apariencia / ajustes / sub-tema. En las opciones de configuración 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 página de Apariencia. Puede pasar por alto el vínculo Editar. Le llevará al asistente incompleto que no llegó a utilizar durante la instalación.

14 Elija su sistema de rejillas. Sus opciones son 960px (predeterminada) y Fluido. Si opta por Fluido, usted ya no tendrá columnas fijas, y la distribución 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 móviles, añadirá la etiqueta meta viewport que hará que su sitio se muestre correctamente sin importar el tamaño de la pantalla del dispositivo móvil. En casi todos los casos de uso usted no tendrá que tocar estos parámetros, la experiencia móvil sera óptima ya que fijara la vista en una escala haciendo que el sitio web se sienta nativo en el dispositivo. Para obtener más información sobre Viewport metatags haga clic aquí.

15 Distribución primaria Seleccione cual sera el diseño por defecto. Esta será también la vista predeterminada de tu sitio en IE7 / 8 o navegadores que no soportan media queries. "Diseño Normal" está activada por defecto ya que es el diseño web con estándares web de 960px de ancho. Configuración de diseño Aquí usted puede activar/desactivar los diferentes diseños como: narrow, normal y wide. También puede cambiar los diferentes media queries para cada tamaño, y su peso (es decir, el orden de la carga). Recuerde que cada diseño tiene una hoja de estilo correspondiente en la carpeta de css de su sub-tema para fines de tematización. El valor predeterminado de tamaño de los diseños es el siguiente (en base al tamaño de pantalla del dispositivo, no el tamaño 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 mayoría de tabletas en Landscape Wide: de 1220px en adelante - Monitores de escritorio de pantalla ancha

16 Paso 7. Configuración de zona y región 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 página / layout se puede hacer utilizando la interfaz de usuario. Por lo general hay muy poca necesidad de modificar el sub-tema mediante código personalizado en Tpls. Cada panel corresponde aquí a las filas de las secciones y las regiones que se muestran en la página 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 diseño. El enlace dice configurar zonas y regiones, pero los paneles están tituladas sección y zona. Una

17 sección es una envoltura que va a través de toda la cuadrícula de los grids de la pagina, en total hay 3 zonas por default que son header, content y footer, sirve mucho para la tematización del sitio web. Una zona es una parte de la sección. Al hacer clic en la zona, verás la región que se encuentra en la zona. Estas serían 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 edición de un panel. Haga clic en Configuración para modificar la configuración. Haga clic Regiones para abrir el panel que muestra las regiones. Haga clic en el nombre de la región que desea editar.

18 Para cada zona, las siguientes opciones están disponibles: Provide full width wrapper around this zone : Al habilitar esta función 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á vacía. Customize the region positioning: Esto le permite manipular la inclusión de las regiones en esta zona. Section: Define en qué sección estará la zona. Para mover una zona a otra sección, elija el nombre de la sección que desee que este la zona. Weight: Define el orden de las zonas que estarán dentro de la sección. Para mover una zona, seleccione un nuevo peso. Las zonas se ordenan de menor a mayor número. Column count: Elija el número deseado de columnas para la zona. Las opciones por defecto son 12, 16, y 24. Cada zona define su propio número de columnas, lo que significa que puede utilizar un número diferente de columnas para cada zona de la página. Primary region: Define qué región dentro de la zona debe aparecer primero en el código fuente y se expanden para llenar el espacio vacío si otras regiones de esa zona están vacíos. Additional zone classes: Puede introducir clases CSS que se añada a la zona para la tematización. Additional wrapper classes: Puede introducir clases CSS que se añade a la envoltura de la zona para la tematización. Esto sólo se utiliza si la opción de proporcionar una envoltura de anchura completa alrededor de la zona está habilitada. En cada región, los siguientes ajustes están disponibles: Force this region to be rendered: Activar esta región siempre, incluso si está vacía. Zone: Define la zona donde estará la región. Para mover una región a otra zona, elija el nombre de la zona deseada. Prefix: Elija el número de columnas vacías que deben aparecer antes de esta región.

19 Width: Elija el número de columnas de la región que debe tomar dentro de la zona. El número total de columnas para las regiones en una zona (más cualquier prefijo o sufijo de columnas) debe ser igual al número de columnas elegido para la zona. Suffix: Elija el número de columnas vacías que debe aparecer después de esta región. Weight: Define el orden de la región donde se colocará dentro de la zona. Para mover una región, elige un nuevo peso. Las regiones se ordenan de menor a mayor número. El peso entra en juego cuando se ve su sitio web en un dispositivo móvil (o la ventana de su navegador está configurado para una anchura menor) y las regiones empiezan a apliarse de forma vertical, la región con el menor peso flotará en la parte superior, mientras que la región con el mayor peso se hundirá hasta el fondo. IE: Si la "Región Sidebar primaria" tiene un peso de -5, y la "Región de contenido" Tiene un peso de 10, cuando la ventana está contraído al tamaño móvil de la "Región Sidebar Primaria" estará en la cima de esa zona, y la "región de contenido" estará en la parte inferior. Additional region classes: Introduzca las clases CSS que se añade a la región para la tematización. Debugging En debuggin encontramos las herramientas de depuración que están activados por default, así como los permisos de visualización por roles de usuarios que existen, si consideramos ya no usarlos solo debemos desactivarlos.

20 Paso 8. Explicación de CSS en OMEGA Esto describir las mejores prácticas de CSS y cómo distinguir una zona de una región de un sub-tema. CSS IDs y Clases en un tema de Omega: una descripción general Cuando se acerque a la tarea de hacer la tematización de un nuevo subtema de Omega, es importante tener en cuenta la variedad de clases y los identificadores que están integrados en la estructura de Omega. Tomando la sección de contenido que en este caso contiene un área de contenido que ocupa 8 columnas de rejillas de ancho, y una región 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 sólo 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 patrón general que se puede utilizar:

21 Las secciones contienen zonas, estas contienen regiones y estas contienen bloques, y como puede ver en esta imagen, el patrón es visible: El término <ST> es para el título de la sección, <zt> significa el título de zona, <rt> representa el título región y <bn> es el nombre del bloque - todos estos son nombres de máquina como en la información del archivo del tema. También donde se ve la rejilla es <x> aquí es donde la anchura de una región se especifica. Conocer esta estructura es muy útil cuando usted está buscando especificar estilos para determinadas secciones de la página. Cómo funciona las hojas de CSS de un Sub-tema en Omega? CSS es donde Omega gana su poder. A través de los media queries, Omega tiene la capacidad de determinar la anchura del navegador y responder en consecuencia. La comprensión de cómo 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 edición se encuentran en la carpeta de css del sub-tema en sites/all/themes/yoursubthemename/css

22 NOTA: Cuando la opción Enable the responsive grid está desactivada, el "Diseño 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 cómo 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 través de los otros a menos que un estilo idéntico 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 ilustración de vidrios apilados, global.css es la capa inferior que si no se sobrescribe tendrá su estilo heredado por todas las demás capas.

23 * NOTA * Omega es "Mobile First". Esto significa que el tema se construye a partir de la experiencia móvil y crecera progresivamente hasta que se muestre la versión de escritorio. El diseño 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 difícil y confuso empezar a construir de primero la versión móvil, pero es recomendable hacerlo ya que las hojas de estilo CSS no repetirán código 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 tamaño 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 demás vistas. De esa forma podemos controlar los estilos que deseamos en cada vista del diseño, ya que casi siempre es necesario mostrar de diferente forma el contenido para cada tamaño de pantalla.

24 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 diseño según el tamaño 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á algún 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 móvil.

25 Enlaces de fuentes