OmbuShop Crea Tu Tienda Online

Artículos para el mes: marzo, 2014

Tipografía y diagramación responsive con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Que el diseño web ha cambiado mucho en los últimos años no es novedad. La aparición de dispositivos de diversos tamaños capaces de navegar la web, obligó a cambiar el paradigma de diseño de páginas. Nuestras herramientas gráficas como grillas y niveles de lectura, entre otras, deben ser actualizadas.

Tradición gráfica

La diagramación básica de los sitios web que utilizamos aún hoy, viene de una larga tradición gráfica que data de los tiempos de Gutenberg, e incluso más atrás en el tiempo.

Gutenberg Bible

Tradición gráfica

El concepto de una grilla que sostiene la estructura de la página —márgenes, columnas, calles— nos precede. Ya incluso Gutenberg y sus seguidores imitaron los incunables que realizaban los copistas previos a la utilización de prensas con tipos móviles.

Muchos siglos después, cuando los diseñadores gráficos comenzamos a trabajar en este nuevo medio llamado World Wide Web, utilizamos las mismas convenciones gráficas para el diseño de páginas web. Creamos grillas utilizando ciertas medidas, múltiplos y submúltiplos para poder armar el layout de nuestras páginas según la mejor tradición gráfica que todo lector estaba acostumbrado a interpretar.

El desafío

Una de las problemáticas gráficas a resolver en cuanto a la diagramación de páginas web fue la falta de un formato fijo: es decir, dimensiones de ancho y alto fijas para el plano en el que debíamos trabajar.

La solución que se extendió fue la de “simular” una página tangible dentro del navegador web. Por medio de etiquetas de HTML se definía un área, que luego se diseñaba con CSS para mantener ciertas medidas fijas de ancho y alto, de forma tal que el diseñador pudiese trabajar como siempre: sobre una hoja. Incluso la apariencia de dicha área dentro del navegador en muchos casos se asimilaba a la de una hoja que descansaba sobre un fondo (en muchos casos con una textura, como si se tratara de una hoja blanca sobre un escritorio).

Este punto fue el origen del mal: convirtió al HTML —que era responsive por naturaleza— en un formato fijo que simulaba las características del mundo tangible.

Browser fixed width

¿Cuál es el problema con esta solución a la falta de dimensiones para trabajar? Mientras utilizábamos computadoras de escritorio con monitores de tamaños más o menos estandarizados, ninguno. El problema empezó cuando aparecieron los dispositivos móviles con pantallas de tamaños muy diversos: en muchos casos esta “hoja” ficticia a la cual asignábamos un tamaño fijo ya no entraba en las dimensiones de la pantalla, por lo que el usuario estaba obligado a hacer scroll hacia los costados para leer cada una de las líneas de un párrafo.

Situación actual

Hoy en día, que una página web sea responsive —es decir, que su diagramación y el tamaño de sus elementos responda al tamaño de la ventana del navegador o dispositivo en cuestión— dejó de ser una opción; se trata de una necesidad.

Los sitios web que diseñamos deben verse bien en monitores grandes, medianos, pequeños, tabletas, celulares y cuanto dispositivo ande dando vueltas por el mundo.

Esto nos obliga a repensar la situación de la “hoja” ficticia y volver a las bases: una página web como formato que nos permite un diseño que se adapte a las necesidades de cada usuario.

Medidas absolutas no, proporciones sí

La forma en la que tradicionalmente armábamos el layout, con diferentes columnas y áreas de contenidos era a través de medidas absolutas expresadas en pixels. Por lo general se trataba de los anchos de las cajas (width).

Si queremos que nuestro layout sea responsive por completo, debemos comenzar a expresar las medidas como proporciones relativas, antes que como medidas absolutas. A continuación, en ejemplo que muestra la manera de expresar dos columnas paralelas sin especificar ninguna medida de forma absoluta.


#contenedor {
margin: 20px auto;
width: 80%;
background: #000;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}

#principal {
float: left;
width: 70%;
background: #2BA47D;
}

#secundario {
float: right;
width: 28%;
margin-left: 2%;
background: #ffffdf;
}
See the Pen wiIfs by Lucas Mourelle (@lucasmourelle) on CodePen.
0

 

Media Queries

Cuando se utilizan medidas en porcentaje, se definen proporciones que pueden quedar mal en casos límite como monitores muy pequeños (o muy grandes). La forma de evitar estos problemas es a través de la tecnología de CSS llamada Media Queries, que nos permite definir ciertas reglas siempre y cuando se cumpla una condición (por ejemplo de tamaño del monitor):


#contenedor {
margin: 20px auto;
width: 80%;
background: #000;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}

#principal {
float: left;
width: 70%;
background: #2BA47D;
}

#secundario {
float: right;
width: 28%;
margin-left: 2%;
background: #ffffdf;
}

@media screen and (max-width: 500px) {
#principal {
float: none;
width: 100%;
margin-bottom: 20px;
}

#secundario {
float: none;
width: 100%;
margin-left: 0;
}
}

See the Pen ljBFi by Lucas Mourelle (@lucasmourelle) on CodePen.
0

En el ejemplo se ve cómo al achicar la ventana del navegador a una situación posiblemente problemática, las columnas dejan de estar una al lado de la otra y pasan a ocupar todo el ancho disponible.

Cuerpo tipográfico relativo

Para poder controlar de forma relativa y fácilmente el tamaño del texto —es decir: el cuerpo tipográfico— lo que podemos hacer es definir una medida base, en pixels, para la etiqueta body, y luego indicar el font-size de cada uno de los elementos de la página de forma relativa a dicha medida. Para esto, podemos expresar las medidas subsiguientes en la unidad de medida llamada em.


h1, h2, h3 {
font-weight: bold;
font-size: inherit; /* reset browser sizes */
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
}
h1 {
font-size: 2em; /* 32px */
}
h2 {
font-size: 1.5em; /* 24px */
}
h3 {
font-size: 1.25em; /* 20px */
}
p {
font-size: 1em; /* 16px */
}

See the Pen miaks by Lucas Mourelle (@lucasmourelle) on CodePen.
0

¡Los invitamos a realizar maravillosas tiendas responsive en OmbuShop!

CSS Atómico con SASS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

¿Cómo mejorar la organización de código y archivos CSS siguiendo el paradigma orientado a objetos?

Hablamos en posts anteriores acerca de CSS Orientado a Objetos  —una manera de organizar el código CSS— y de pre-procesadores, haciendo especial hincapié en SASS —una tecnología que extiende las posibilidades del CSS estándar—.

Además de una organización del código que entiende a los elementos de diseño como objetos, la posibilidad de fragmentar el código en diferentes archivos nos presenta un nuevo desafío. ¿Con qué criterio hacer esta división? ¿Cómo optimizar los tiempos de mantenimiento a futuro?

Diseño Atómico

En su artículo Atomic Design, Brad Frost nos propone una manera posible de entender el diseño de un sitio web.

La idea se basa en comprender al diseño web como la confección de sistemas de diseño, antes que páginas diseñadas. Brad Frost entiende a cada página web como un conjunto de organismos que interactúan entre sí, a su vez conformados por unidades más pequeñas.

Guiado por esta mirada particular, decide utilizar la metáfora de la química molecular para la organización de organismos, aprovechando la posibilidad de SASS de separar el código en distintos archivos. Plantea 5 carpetas organizadoras:

  1. Átomos
  2. Moléculas
  3. Organismos
  4. Plantillas
  5. Páginas

Inspirado en esta idea, Robin Rendle realiza algunas modificaciones sobre este modelo, continuando la misma lógica.

Robin realiza una división distinta, acorde a su flujo de trabajo y expone la siguiente variación:

  1. Utilidades
  2. Quarks
  3. Átomos
  4. Moléculas

Como verán, la idea es la misma, con algunos cambios de acuerdo a su gusto y mecánica de trabajo.

OmbuShop’s way

También en OmbuShop estuvimos trabajando con una visión orientada a objetos para el manejo de CSS, y comenzamos a utilizar un ordenamiento atómico propio para nuestras hojas de estilo SASS.

Nuestra síntesis incorpora elementos de ambas variaciones, a saber:

  1. Utilidades (utilities)
  2. Quarks
  3. Átomos (atoms)
  4. Moléculas (molecules)
  5. Páginas (pages)
  6. Vendor

¿Qué incluimos en cada una?

A continuación, una breve descripción de qué fragmentos del diseño se corresponden por cada una.

Por lo general, escribimos en inglés lo relacionado con código, por lo que listaré las carpetas in english. Asímismo, incluimos números al comienzo del nombre de cada carpeta, de forma que siempre se mantengan ordenadas de menor a mayor complejidad.

1. utilities

En esta carpeta incluiremos código genérico que será utilizado por los demás archivos. Definición de variables, mixins, el código básico para el body, grillas para el layout, etc.

2. quarks

Aquí estará el código que da estilo a unidades mínimas: cuestiones tipográficas como párrafos, títulos, listas, links, etc.

Por lo general los selectores en este nivel se refieren a etiquetas de HTML de forma genérica.

3. atoms

En este nivel los elementos diseñados empiezan a ganar complejidad.

Se trata de estilar elementos pequeños pero específicos: botones, formularios, elementos tipográficos más complejos, etc.

4. molecules

Las moléculas son elementos de mayor complejidad, conformados por unidades más pequeñas.

Algunos ejemplos pueden ser un cuadro de diálogo, una botonera de navegación o el footer de un sitio.

En este caso, cada archivo podría tener varios elementos (que son los constitutivos de la molécula total. Aquí es imprescindible hacer uso de la capacidad de nesting de SASS, si queremos mantener ese diseño encapsulado sin afectar a terceros.

5. pages

En este nivel se puede incluir código particular que afecta y varía el diseño de una página a otra de un sitio.

Cuando se trata de una modificación transversal, que incluso puede afectar a las moléculas anteriores.

Un cambio de paleta cromática de acuerdo a la sección del sitio, por ejemplo.

6. vendor

Siempre es útil reservar una carpeta con archivos SASS y CSS que sean de terceros. Por ejemplo librerías que han sido descargadas, frameworks, grillas, etc.

Si utilizas bootstrap, por ejemplo, puedes crear una carpeta bootstrap dentro de vendor.

Moraleja

Conviene tener un archivo SASS por fuera de estas carpetas, que se encargue de importar cada uno de los archivos que está en su interior, algo así:


// Vendor
@import "vendor/bootstrap/bootstrap";

// 1-UTILITIES
@import "1-utilities/variables";
@import "1-utilities/basic";
@import "1-utilities/grid";

// 2-QUARKS
@import "2-quarks/typography";
@import "2-quarks/links";
@import "2-quarks/icons";

// 3-ATOMS
@import "3-atoms/buttons";
@import "3-atoms/forms";

// 4-MOLECULES
@import "4-molecules/header";
@import "4-molecules/footer";
@import "4-molecules/floors";
@import "4-molecules/quotes";
@import "4-molecules/popups";

// 5-PAGES
@import "5-pages/contact_page";

See the Pen DEquG by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Dominado el lenguaje CSS para el estilado de sitios web y habiendo comenzado a utilizar pre-procesadores, la preocupación principal de todo frontender profesional actual es cómo organizar el código para que sea future-proof y de fácil mantenimiento.

¡A darle átomos!

SASS y otros preprocesadores de CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Los preprocesadores de CSS han llegado para quedarse. Son tecnologías que nos permiten escribir código CSS de forma optimizada, agregando funcinalidades tales como variables, mixins y cálculos al universo de las hojas de estilo!

Como sabemos, el desarrollo web front-end utiliza tres tecnologías básicas a saber:

  • HTML para el marcado semántico del contenido.
  • CSS para la presentación de dichos contenidos (el diseño).
  • JavaScript para la programación del comportamiento de dicho contenido diseñado.

Si bien CSS siempre fue una tecnología elegante, que basa parte de su belleza en el minimalismo de sus features y sintaxis, es evidente que el agregado de algunas funcionalidades no vendría mal.

Por ejemplo: todo diseñador sabe que trabajar con una paleta cromática controlada es clave. Consecuentemente, muchos elementos de un sitio web comparten los mismos colores. Es muy probable que el diseñador haya elegido 5 colores básicos, y que luego cientos de elementos en un sitio web se construyan combinando dichos colores.

Ahora bien, el resultado técnico de esta situación es la repetición en tantísimas ocasiones del mismo código de color en la hoja de estilos. Si el diseño es sistemático, lo mismo ocurrirá con medidas y otros valores en el código CSS.

Bondades de los preprocesadores

Sass and Less

Sass – Less

Los preprocesadores como SASS o Less, vienen a solucionar este tipo de problemas, agregando funcionalidad al código CSS. Daremos ejemplos utilizando SASS, pero Less tiene características similares.

Variables

El concepto de variables es el mismo que conocemos para JavaScript y otros lenguajes de programación. Permite guardar momentáneamente cierto valor, para ser utilizado luego.

En el caso de CSS, nos permite por un lado evitar la repetición de valores (por ejemplo un color, una familia tipográfica o una medida), y por otro centralizar dicho dato de forma tal que para su modificación haya que cambiar el valor una sola vez.

Aquí un ejemplo:


$color_principal: #fff;
$color_secundario: #2BA47D;
$tamano_texto: 30px;

body {
color: $color_principal;
background: $color_secundario;
font-size: $tamano_texto;
}

See the Pen gIehC by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Cálculos

La posibilidad de realizar cálculos también agiliza el trabajo. Podemos sumar (+), restar (-), multiplicar (+) y dividir (/).

Los cálculos pueden realizarse entre números o entre variables que contengan información numérica.


$ancho_total: 600px;
$ancho_principal: 400px;
$calle: 20px;
#contenedor {
width: $ancho_total;
background: #000;
padding: $calle;
font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}
#principal {
float: left;
width: $ancho_principal;
background: #2BA47D;
}
#secundario {
float: right;
width: $ancho_total – $ancho_principal – $calle;
background: #ffffdf;
}

See the Pen cAwrd by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Nesting

Teniendo en cuenta la naturaleza de un elemento dentro de otro en el HTML, es muy común que los selectores de CSS se vuelvan algo así muy pronto:


ul {
font-family: sans-serif;
background: #000;
color: #fff;
margin: 20px 0;
padding: 5px;
}
ul li {
margin: 5px;
padding: 10px;
background: #444;
}
ul li a {
display: block;
color: inherit;
text-decoration: none;
}

See the Pen ordcJ by Lucas Mourelle (@lucasmourelle) on CodePen.
0

SASS permite introducir un elemento dentro de otro tal como hacemos en el código HTML. Esto facilita el trabajo generando una situación análoga a la que tenemos en el marcado semántico:


ul {
font-family: sans-serif;
background: #000;
color: #fff;
margin: 20px 0;
padding: 5px;
li {
margin: 5px;
padding: 10px;
background: #444;
a {
display: block;
color: inherit;
text-decoration: none;
}
}
}

See the Pen qBjcb by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Mixins

En ciertas ocasiones el código a repetir en un archivo CSS es más que simplemente un valor. Los mixins nos permiten centralizar la escritura de varios renglones de CSS, para luego insertarlo donde queramos.


@mixin lato_light {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
p {
@include lato_light;
}

See the Pen Dsjhw by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Los mixins también permiten la inclusión de parámetros, de forma que no siempre el código generado es idéntico.


@mixin open_sans_light($size){
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: $size;
}
p {
@include open_sans_light(20px);
}

See the Pen CLKHF by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Herencia

SASS también permite que ciertos elementos “hereden” el estilo de otros, la sintaxis es la siguiente:


.boton {
font-family: sans-serif;
border-radius: 3px;
padding: 8px;
display: inline-block;
text-decoration: none;
padding: 10px;
color: #000;
}
.boton-importante {
@extend .boton;
background: #f00;
}

See the Pen hsajq by Lucas Mourelle (@lucasmourelle) on CodePen.
0

De esta manera, la clase boton-importante recibe todas las características de la clase boton.

Import

Otra posibilidad es la de dividir en diferentes archivos para organizar el código. Podemos tener un archivo estilos.scss, y luego otro llamado _reset.scss; el guión bajo al principio del nombre indica que se trata de un “partial”, un archivo parcial que luego será importado dentro de otro.

_reset.scss


/* Archivo: _reset.scss */
* {
margin: 0;
padding: 0;
}

See the Pen oLlEu by Lucas Mourelle (@lucasmourelle) on CodePen.
0

estilos.scss


/* Archivo: estilos.scss */
@import 'reset';

p {
font-family: 'Lato', sans-serif;
}

See the Pen GDlvu by Lucas Mourelle (@lucasmourelle) on CodePen.
0

El archivo resultante estilos.css, tendrá el código de estilos.scss, con el código de _reset.scss importado en el lugar indicado.

Pero ¿cómo funciona en los navegadores?

El código SASS, aunque muy parecido al de CSS nativo, no puede ser interpretado por los navegadores.

El código sirve para el desarrollo, pero luego debe ser compilado por estos pre-procesadores, transformándolo en CSS estándar.

Con cada cambio que hace el diseñador/desarrollador al código SASS, los preprocesadores generan automáticamente la versión CSS. Por lo general ocurre en tiempo real y de forma automática en el entorno de desarrollo.

Para más información al respecto, no dejen de visitar el sitio web oficial de SASS.

¡A continuar diseñando tiendas increíbles!

Ignacio Bertotti se suma a OmbuShop

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Tengo el agrado de anunciar que Ignacio Bertotti se suma a OmbuShop como nuevo especialista en Customer Happiness.

Algo que nos distingue sobre la competencia es la calidad de nuestra atención al cliente. Para mantener nuestro nivel, necesitamos más gente que tenga empatía y consideración.

 Ignacio Bertotti

Ignacio estará ayudándonos a atender a todas nuestras tiendas, para que sigan siendo clientes felices.

🙂

¡Bienvenido!

Mauro Otonelli se suma a OmbuShop

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Tengo el agrado de anunciar que Mauro Otonelli se suma a OmbuShop como nuevo full-stack developer.

Este va a ser un año de mucho crecimiento y necesitamos seguir mejorando la plataforma para que diseñadores y desarrolladores puedan crear tiendas de una forma más simple y fluida.

Mauro Otonelli

Mauro nos va a ayudar a abrir la plataforma, mejorar la performance e integrar a OmbuShop con nuevos servicios, para potenciar a todas las tiendas.

¡Bienvenido!