Omega Overview and Terminology

Video loading...

  • 0:00
    [Omega Overview and Terminology]
  • 0:02
    [Introduction to Omega 3.x, Chapter 2, with Addison Berry]
  • 0:05
    In this lesson, we're going to just start by taking a look at
  • 0:08
    Omega and some of the things that are
  • 0:11
    related to it--the overall terminology and structure.
  • 0:14
    Basically, we want to get ourselves oriented to what Omega is
  • 0:17
    and what we have available to us before we actually dive into things.
  • 0:21
    So the kinds of things that we're going to be looking at
  • 0:23
    is we're going to actually look at
  • 0:26
    what are the major features that are in Omega.
  • 0:29
    We'll also be taking a look at helper modules
  • 0:32
    that are often used with Omega,
  • 0:34
    so Omega Tools and the Delta module and what those are used for.
  • 0:39
    We'll also be doing a general overview of Omega terminology.
  • 0:43
    Omega does a few extra things in theming
  • 0:46
    that are not common in Drupal theming, so we want to cover what those things are
  • 0:49
    so we understand them before we start to try and use them.
  • 0:53
    And then we'll also be taking a look at where we can get
  • 0:56
    more information about Omega with documentation and help
  • 0:59
    so as you work through your journey,
  • 1:02
    if you need to have additional resources,
  • 1:04
    we can point you in the right direction for those.
  • 1:07
    So, we're going to begin our journey with Omega,
  • 1:10
    and buckle your seatbelt and get ready to ride.
  • 1:13
    Here I am on the Omega project home page
  • 1:16
    at drupal.org/project/omega.
  • 1:20
    The Omega theme provides a number of really nice features out of the box.
  • 1:25
    Notably, it provides us with a responsive framework
  • 1:28
    that, for instance, handles our media queries for us so we don't have to
  • 1:32
    write those or build those ourselves.
  • 1:34
    It also supplies a 960 grid,
  • 1:37
    and it even creates HTML 5 markup for us.
  • 1:40
    So we can have all of those things handled for us
  • 1:42
    without having to write them ourselves.
  • 1:44
    Omega really lets us build our responsive website really quickly
  • 1:47
    without having to actually write very much code,
  • 1:50
    which is one of its major advantages.
  • 1:53
    It's really good for people who don't have a lot of experience with theming in Drupal
  • 1:57
    or don't want to spend the time
  • 2:00
    to write all of these base sort of framework needs in their theme.
  • 2:03
    And it also gives you a really nice user interface
  • 2:06
    that lets you configure a lot of these things.
  • 2:09
    So it even provides a lot of defaults.
  • 2:12
    But if you want to change them, you can also configure them in a UI,
  • 2:16
    and Omega will change the code to match that.
  • 2:19
    And this is really great because basically you're getting
  • 2:21
    your base code and HTML written,
  • 2:24
    and then you can just play with the CSS and have a lot of fun
  • 2:27
    making things look really nice.
  • 2:29
    So Omega combines theming in both configuration and code
  • 2:32
    which is definitely a bit different
  • 2:35
    from regular Drupal theming.
  • 2:38
    It's handy and very useful,
  • 2:40
    but it can also be a little bit confusing and frustrating to work with.
  • 2:44
    Especially most people who are familiar with Drupal theming
  • 2:47
    are used to doing everything in the code in their way,
  • 2:51
    and so you need to start to understand the Omega perspective and process
  • 2:55
    and what it's expecting and how you can actually use the tools
  • 2:58
    that Omega provides rather than fighting against them,
  • 3:01
    and then you can start to really sort of bang out some themes
  • 3:04
    really quickly and get the stuff that you need done
  • 3:08
    without a whole lot of hassle.
  • 3:11
    So if we scroll down on the project page,
  • 3:13
    there's quite a lot of information on this page, which is very handy.
  • 3:16
    If we scroll down all the way to the bottom,
  • 3:19
    we have a couple of other interesting pieces of information
  • 3:22
    to help us sort of wrap our head around the basics
  • 3:25
    of what Omega can provide for us.
  • 3:27
    One thing that is often overlooked but is very important,
  • 3:30
    if you look down here at the bottom on the reported installs,
  • 3:33
    there are over 38,000 installations.
  • 3:36
    It's a really large community of people who are using this theme,
  • 3:40
    and that means that there is a lot of support available,
  • 3:43
    a lot of people who've been down the same road that you've been down
  • 3:45
    and can help you sort out issues that you come up with
  • 3:49
    or new things that you want to do.
  • 3:51
    Chances are good, in a community of that size, that somebody else
  • 3:54
    has already been there or has some suggestions or ideas
  • 3:57
    about how you can approach things.
  • 3:59
    We should also take a minute to talk about the versions that are available for Omega.
  • 4:03
    You'll notice here that the recommended version for 7
  • 4:06
    is this 3.1 version,
  • 4:09
    but there's also a 4.0 version.
  • 4:12
    So there's version 3 and version 4.
  • 4:15
    In this series, we're going to be using version 3 because
  • 4:18
    that's the sort of tried and true and very stable version,
  • 4:21
    and that's why it's listed under the recommended releases.
  • 4:24
    Version 4 is still in active development,
  • 4:27
    which means it's constantly changing right now.
  • 4:30
    They're doing a lot of new things, and so it might change under your feet.
  • 4:34
    Omega also has a lot of very good documentation.
  • 4:36
    You can see that there's an informational micro-site,
  • 4:39
    and there's an Omega handbook on drupal.org.
  • 4:42
    And actually, if we even go in here,
  • 4:45
    you'll see that there's documentation about which version to use.
  • 4:48
    If I scroll down here and go to the Omega 4 section of the documentation,
  • 4:52
    that actually opens up a page
  • 4:55
    that has the question, should I use 3 or 4?
  • 4:58
    And at this time, it's telling you that this is still experimental code with version 4,
  • 5:02
    so version 3 is definitely where we want to stay for now.
  • 5:06
    In addition to the Omega base theme itself,
  • 5:09
    there are also two additional helper modules
  • 5:12
    that are often used with it.
  • 5:14
    So we'll take a look at--Omega Tools is available.
  • 5:18
    And we will be looking at Omega Tools in this series.
  • 5:21
    [drupal.org/project/omega_tools]
  • 5:23
    It basically provides a bunch of helper functions so that we can
  • 5:26
    use the base theme to create our sub-theme without
  • 5:29
    having to do it all manually in code.
  • 5:32
    It provides drush commands for Omega,
  • 5:35
    so if you're familiar with drush and want to use drush
  • 5:38
    to create your new sub-theme and that kind of thing.
  • 5:41
    So it's just got some handy stuff. It lets us export code, things like that.
  • 5:44
    It's very useful during development of your sub-theme.
  • 5:48
    It's not something you would necessarily use on your production site,
  • 5:51
    but it's a really great developer tool.
  • 5:53
    In addition to Omega Tools, another module that's often used is Delta module.
  • 5:58
    And what Delta does is it integrates
  • 6:01
    the Omega theme with the context module
  • 6:04
    so that you can create different layouts with Omega
  • 6:09
    and export those to code, and you can actually have
  • 6:12
    different layouts on your site that are doing
  • 6:15
    different things, depending on the context
  • 6:18
    that someone is visiting on your site.
  • 6:21
    We're not going to be covering Delta module in this series,
  • 6:24
    but it is a very handy module if you happen to be using context
  • 6:28
    and need to have that kind of flexibility on your site.
  • 6:31
    Before we dive into actually using the Omega theme,
  • 6:34
    there are a few things that we should probably wrap our heads around.
  • 6:37
    One is the actual structure of the base and sub-themes
  • 6:40
    when using Omega,
  • 6:42
    and then the other thing is a little bit of terminology in terms of how pages are structured
  • 6:45
    with Omega.
  • 6:47
    So if we look at this simple graphic here,
  • 6:49
    looking at the base and sub-themes,
  • 6:51
    when you download Omega from drupal.org
  • 6:54
    and put that on your site,
  • 6:56
    you actually have two themes in that folder.
  • 6:59
    One of them is called Alpha, and the other is called Omega.
  • 7:02
    Alpha is actually the initial base theme
  • 7:06
    that everything is being built from.
  • 7:09
    Omega is a sub-theme of Alpha,
  • 7:12
    which provides a lot of the really nice things
  • 7:15
    that we are going to be using
  • 7:17
    as we proceed with our sub-theme.
  • 7:20
    It provides a lot of the UI configuration and a lot of the settings
  • 7:23
    and things like that that are really nice.
  • 7:26
    Those come with the Omega download.
  • 7:28
    We're going to create our sub-theme based off of Omega.
  • 7:31
    So Omega is both a sub-theme of Alpha,
  • 7:34
    but it's also the base theme for our custom
  • 7:37
    sub-theme that we're going to be creating.
  • 7:39
    And we'll take a look at those files in future lessons
  • 7:43
    so that you can have a better understanding
  • 7:45
    of how the files are actually structured and what we're creating.
  • 7:48
    Another thing that is particularly Omega
  • 7:51
    is the way that it structures a page
  • 7:54
    that's being actually printed out.
  • 7:57
    Instead of just having
  • 8:00
    regions and blocks, which is the classic core Drupal way
  • 8:03
    of sort of organizing a page,
  • 8:06
    Omega also provides sections.
  • 8:09
    A page is broken into
  • 8:12
    three main sections--header, content, and footer.
  • 8:15
    And then within each section you can have
  • 8:18
    any number of zones, and you can also customize those.
  • 8:23
    So by default we have a header zone
  • 8:26
    in the header section and a content zone in the content section.
  • 8:30
    We could have multiple zones if we wanted to,
  • 8:33
    if we wanted to be able to have
  • 8:36
    the content within them react differently
  • 8:39
    in a responsive environment.
  • 8:41
    And within a zone we have what we're familiar with
  • 8:44
    with regions, and you can put multiple regions within a zone
  • 8:48
    and weight them differently so that they will behave in the manner you expect
  • 8:52
    in a responsive environment.
  • 8:54
    And within our regions is where, of course, we put our blocks.
  • 8:57
    This is just classic Drupal regions and blocks,
  • 9:00
    while Omega is adding this concept of
  • 9:03
    zones and sections to give us a little more flexibility
  • 9:06
    than just what the regions and blocks systems that come with
  • 9:09
    Drupal core would provide for us.
  • 9:12
    We'll be playing with these a lot more, and we'll be able to see them in action,
  • 9:15
    but it's a good idea to just at least sort of
  • 9:18
    understand that there is new terminology
  • 9:21
    and how these pieces fit together before we dive into it all.
  • 9:24
    So as you can see, Omega has a number
  • 9:27
    of very nice advantages.
  • 9:29
    There are definitely some things that are new, done a little bit differently,
  • 9:32
    can be a little bit confusing.
  • 9:34
    So that's what we're going to be clarifying as we work through
  • 9:37
    this series on the Omega theme.
  • 0:00
    [Omega: Visión General y Terminología]
  • 0:02
    [Introducción a Omega 3.x, Capítulo 2 con Addison Berry]
  • 0:05
    En esta lección empezaremos con dar un vistazo a
  • 0:08
    Omega y algunas de las cosas que están
  • 0:11
    relacionadas a él-- la terminología general y la estructura.
  • 0:14
    Básicamante, queremos orientarnos en qué es Omega
  • 0:17
    y qué tenemos disponible antes de sumergirnos más.
  • 0:21
    Así que, el tipo de cosas que estaremos viendo,
  • 0:23
    lo que realmente veremos,
  • 0:26
    serán las características fundamentales de Omega.
  • 0:29
    También daremos un vistazo a módulos adicionales
  • 0:32
    que suelen usarse con Omega,
  • 0:34
    como Omega Tools y el módulo Delta y para qué se utilizan.
  • 0:39
    También daremos un vistazo general a la terminología de Omega.
  • 0:43
    Omega hace algunas cosas extra en el theming
  • 0:46
    que no son muy comunes en el theming de Drupal, así veremos de qué tratan
  • 0:49
    para entenderlas antes de empezar a probarlas y usarlas.
  • 0:53
    Y también veremos dónde podemos obtener
  • 0:56
    más información acerca de Omega con documentación y ayuda
  • 0:59
    para que mientras vas avanzando,
  • 1:02
    si necesitas ayuda adicional,
  • 1:04
    podamos indicarte la dirección correcta para ello.
  • 1:07
    Empezaremos nuestro viaje con Omega,
  • 1:10
    abróchense los cinturones y prepárense para el paseo.
  • 1:13
    Aquí estoy en la página principal del proyecto Omega
  • 1:16
    en drupal.org/project/omega.
  • 1:20
    El tema Omega provee un número de funciones realmente bellas.
  • 1:25
    Notablemente, nos provee de un framework responsive que,
  • 1:28
    por ejemplo, maneja nuestros media queries por nosotros, así no tenemos que
  • 1:32
    escribirlos o construirlos nosotros mismos.
  • 1:34
    También provee un 960 grid,
  • 1:37
    y también crea un marcado HTML 5 por nosotros.
  • 1:40
    Así que podemos hacer uso de todo eso
  • 1:42
    sin tener que escribirlo nosotros mismos.
  • 1:44
    Omega nos permite construir nuestro sitio web responsive muy rápido
  • 1:47
    sin tener que escribir mucho código,
  • 1:50
    lo que es una de sus mayores ventajas.
  • 1:53
    Es realmente bueno para aquellos que no tienen mucha experiencia con los temas de Drupal
  • 1:57
    o no quieren gastar el tiempo
  • 2:00
    en escribir todo ese framework base necesario en su theme.
  • 2:03
    Además, también nos ofrece una buena interfaz de usuario
  • 2:06
    que nos permite configurar muchas de estas cosas.
  • 2:09
    También proporciona una gran cantidad de configuraciones por defecto.
  • 2:12
    Pero si quieres cambiarlas, puedes hacerlo también en la Interfaz de Usuario,
  • 2:16
    y Omega cambiará el código para que encaje.
  • 2:19
    Esto es realmente grandioso ya que obtienes
  • 2:21
    tu código base y HTML escrito,
  • 2:24
    y luego sólo hace falta jugar con el CSS y divertirse mucho
  • 2:27
    haciendo que todo luzca realmente bello.
  • 2:29
    Así, Omega combina el theming tanto en la configuración como en el código
  • 2:32
    lo que definitivamente es un poco diferente
  • 2:35
    al theming regular de Drupal.
  • 2:38
    Es accesible y muy útil,
  • 2:40
    pero también puede ser algo confuso y frustrante trabajar con él.
  • 2:44
    Especialmente para aquellos que están familiarizados con el theming de Drupal
  • 2:47
    y suelen hacer todo en el código mientras van avanzando,
  • 2:51
    por lo que deben empezar a entender la perspectiva y proceso de Omega,
  • 2:55
    qué se espera y cómo pueden usar realmente las herramientas
  • 2:58
    que Omega provee en vez de luchar contra ellas,
  • 3:01
    luego estarán listos para machacar temas
  • 3:04
    realmente rápido y lograr las cosas que necesitan hacer
  • 3:08
    sin muchas molestias.
  • 3:11
    Si bajamos en la página del proyecto,
  • 3:13
    hay bastante información en ésta página, la cual es muy útil.
  • 3:16
    Si bajamos hasta el final,
  • 3:19
    tenemos un par de enlaces con información interesante
  • 3:22
    para ayudarnos a empaparnos con lo básico
  • 3:25
    que Omega puede hacer por nosotros.
  • 3:27
    Una de las cosas que se pasan por alto pero que es muy importante,
  • 3:30
    si ven aquí abajo, en la base, en instalaciones registradas,
  • 3:33
    hay más de 38,000 instalaciones.
  • 3:36
    Es una comunidad realmente grande de personas que están usando éste tema,
  • 3:40
    y eso significa que hay mucho soporte disponible,
  • 3:43
    mucha gente que ha ido por el mismo camino que tú
  • 3:45
    y pueden ayudarte con los problemas que puedas encontrar
  • 3:49
    o cosas nuevas que quieras hacer.
  • 3:51
    Hay muchas probabilidades, en una comunidad de éste tamaño, de que alguien
  • 3:54
    ya haya pasado por lo mismo o tenga alguna sugerencia o idea
  • 3:57
    acerca de cómo afrontar las cosas.
  • 3:59
    También debemos tomarnos un minuto para hablar de las versiones disponibles de Omega.
  • 4:03
    Verán que la recomendada para la versión 7
  • 4:06
    es esta versión 3.1,
  • 4:09
    pero también hay una versión 4.0.
  • 4:12
    Así que están la versión 3 y la versión 4.
  • 4:15
    En estas series estaremos usando la versión 3 porque
  • 4:18
    es una versión bastante probada y estable,
  • 4:21
    y por ello se encuentra listada bajo las liberaciones recomendadas.
  • 4:24
    La versión 4 aún se encuentra en desarrollo activo,
  • 4:27
    lo que significa que por ahora se encuentra en constante cambio.
  • 4:30
    Están haciendo bastante cosas, por lo que puede cambiar frente a sus ojos.
  • 4:34
    Omega también tiene muy buena documentación.
  • 4:36
    Verás que también hay un micro sitio de información,
  • 4:39
    y hay un manual de Omega en drupal.org.
  • 4:42
    En realidad, si vamos ahí,
  • 4:45
    verás que hay documentación sobre qué versión usar.
  • 4:48
    Si haces scroll aquí y vas a la sección de Omega 4 de la documentación,
  • 4:52
    la cual abre una página
  • 4:55
    que tiene la pregunta, ¿debo usar 3 o 4?
  • 4:58
    Y en este momento, les dice que todavía hay código experimental en la versión 4,
  • 5:02
    así que la versión 3 es definitivamente en dónde queremos quedarnos por ahora.
  • 5:06
    Adicionalmente al tema básico de Omega en sí,
  • 5:09
    existen dos módulos de ayuda adicionales
  • 5:12
    que usualmente se usan con él.
  • 5:14
    Así que echaremos un vistazo a las herramientas de Omega disponibles
  • 5:18
    Y veremos el módulo Omega Tools en éstas series.
  • 5:21
    [drupal.org/project/omega_tools]
  • 5:23
    Provee un montón de funciones de ayuda para que
  • 5:26
    usemos el tema base para crear nuestro subtema sin
  • 5:29
    tener que hacerlo manualmente en código
  • 5:32
    Nos da comandos drush para Omega,
  • 5:35
    por si estás familiarizado con drush y quieres usarlo
  • 5:38
    para crear su nuevo subtema y ese tipo de cosas.
  • 5:41
    Tienen cosas muy útiles. Nos deja exportar código, cosas como esas.
  • 5:44
    Es muy útil durante el desarrollo de un subtema.
  • 5:48
    No es algo que usarías en sitios en producción,
  • 5:51
    pero es una gran herramienta de desarrollo.
  • 5:53
    Adicionalmente a las herramientas de Omega, otro módulo que suele usarse es el módulo Delta.
  • 5:58
    Y lo que Delta hace es integrar
  • 6:01
    el tema Omega con el módulo Context
  • 6:04
    con lo que puedes crear diferentes layouts con Omega
  • 6:09
    y exportarlo a código, y así tener
  • 6:12
    diferentes layouts en el sitio que estás haciendo
  • 6:15
    cosas diferentes, dependiendo del contexto
  • 6:18
    en el que alguien está visitando su site.
  • 6:21
    No vamos a cubrir el módulo Delta en éstas series,
  • 6:24
    pero es un módulo muy útil si estás usando Context
  • 6:28
    y necesitas tener este tipo de flexibilidad en tu site.
  • 6:31
    Antes de sumergirnos en el uso del tema Omega,
  • 6:34
    hay algunas cosas que deberíamos ver.
  • 6:37
    Una es la estructura base y los subtemas
  • 6:40
    cuando usamos Omega,
  • 6:42
    y la otra es un poco de terminología en términos de cómo están estructuradas las páginas
  • 6:45
    con Omega.
  • 6:47
    Así que si vemos éste sencillo gráfico aquí,
  • 6:49
    viendo la base y los subtemas,
  • 6:51
    cuando descargan Omega de drupal.org
  • 6:54
    y lo ponen en su site,
  • 6:56
    en realidad hay dos temas en ese directorio.
  • 6:59
    Uno de ellos se llama Alpha y el otro se llama Omega.
  • 7:02
    Alpha es el tema base inicial
  • 7:06
    sobre lo que todo esta hecho.
  • 7:09
    Omega es un sub tema de Alpha,
  • 7:12
    que provee un montón de cosas realmente bellas
  • 7:15
    que vamos a usar
  • 7:17
    mientras procedamos con nuestro sub tema.
  • 7:20
    Provee bastante configuración en la Interfaz de Usuario y muchas cosas
  • 7:23
    son realmente buenas.
  • 7:26
    Eso viene con la descarga de Omega.
  • 7:28
    Vamos a crear nuestro sub tema basado en Omega.
  • 7:31
    Así que Omega es un subtema de Alpha
  • 7:34
    pero también es el tema base para el tema
  • 7:37
    personalizado que vamos a crear.
  • 7:39
    Veremos muchos de esos archivos en futuras lecciones
  • 7:43
    para que tengas un mejor entendimiento
  • 7:45
    de cómo los archivos están estructurados y qué estamos creando.
  • 7:48
    Otra cosa que hace particular a Omega
  • 7:51
    es la forma en la que se estructura una página
  • 7:54
    que está siendo impresa.
  • 7:57
    En vez de tener simplemente
  • 8:00
    regiones y bloques, lo cual es la forma clásica del core de Drupal
  • 8:03
    para organizar de cierta forma una página,
  • 8:06
    Omega también provee secciones.
  • 8:09
    Una página está dividida en
  • 8:12
    tres secciones importantes: cabecera, contenido y pie.
  • 8:15
    Y luego en cada sección pueden haber
  • 8:18
    cualquier número de zonas que puedes personalizar.
  • 8:23
    Así que por defecto tenemos una zona de cabecera
  • 8:26
    en la sección de cabecera y una zona de contenido en la sección de contenido.
  • 8:30
    Podemos tener múltiples zonas si queremos,
  • 8:33
    si queremos tener la posibilidad de tener
  • 8:36
    contenido dentro de ellos que se comporte de otra forma
  • 8:39
    en un entorno responsive.
  • 8:41
    Y dentro de una zona tenemos
  • 8:44
    regiones, y podemos tener varias regiones dentro de una zona
  • 8:48
    y ponderarlas de forma diferente para que se comporten de la forma que esperas
  • 8:52
    en un entorno responsive.
  • 8:54
    Y dentro de las regiones es donde, claro, ponemos nuestros bloques.
  • 8:57
    Esto son las clásicas regiones y bloques de Drupal,
  • 9:00
    mientras Omega está añadiendo este concepto de
  • 9:03
    zonas y secciones para darnos un poco más de flexibilidad
  • 9:06
    del que traía el sistema de regiones y bloques que
  • 9:09
    Drupal core nos provee.
  • 9:12
    Trabajaremos con estas mucho más y podremos verlas en acción,
  • 9:15
    pero es idea que al menos comencemos a
  • 9:18
    comprender que existe nueva terminología
  • 9:21
    y cómo encajan estas piezas antes de sumergirnos del todo.
  • 9:24
    Así que, como pueden ver, Omega tiene varias
  • 9:27
    hermosas ventajas.
  • 9:29
    Definitivamente hay cosas que son nuevas, que se hacen un poco diferente,
  • 9:32
    que pueden resultar un poco confusas.
  • 9:34
    Así que eso es lo que vamos a aclarar mientras trabajemos en
  • 9:37
    esta serie de Omega theme.

Omega Overview and Terminology

Loading...

In this lesson we're going to take a look at the Omega theme, cover some basic terminology around it, and discuss the advantages and challenges of using it. Specifically this lesson will cover:

  • Omega features
  • Helper modules
  • Where to find documentation
  • Omega terminology
Additional resources: 

Average review

0
No votes yet

Reviews