OmbuShop Crea Tu Tienda Online

Artículos para el mes: junio, 2014

Diseño web con Sketch app

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

En la era del prototipado iterativo y el diseño web responsive, las aplicaciones de diseño de Adobe ya no satisfacen las necesidades del diseñador web y de interfaces. Sketch, una aplicación independiente, gana terreno!

El nuevo niño mimado es Sketch: una aplicación realizada por una compañía llamada Bohemian Coding conformada por siete personas! Esta aplicación se está ganando el corazón de los diseñadores, a continuación veremos por qué!

Sketch app icon

¿Quiénes lo están utilizando?

En principio, cada vez más diseñadores web y de UI están utilizando Sketch. Se trata de usuarios que solían trabajar con Photoshop, Illustrator o el discontinuado Fireworks. Lo eligen por la facilidad y originalidad de su interfaz, pero sobre todo debido a su alta productividad en el flujo de trabajo Web.

La aplicación fue pensada desde las necesidades de diseñadores de sitios web y UI. Se nota claramente la atención al detalle y la investigación que el equipo de desarrollo ha hecho sobre nuestras necesidades.

Features sobresalientes

Listaremos a continuación algunos de los features que hacen de este soft el favorito de los diseñadores.

Interfaz

Sketch interface

Interfaz Sketch

La gente de Bohemian Coding no pretende hacer una reedición de las interfaces a las que Adobe nos tiene acostumbrados. Efectivamente plantean un paradigma diferente. No tenemos numerosísimos paneles de herramientas, sino tres zonas bien diferenciadas que permiten trabajar de forma cómoda y rápida: herramientas y acciones rápidas en la parte de arriba, layers a la izquierda y propiedades del objeto seleccionado a la derecha.

Acciones que necesitamos en todo momento como enviar un elemento hacia atrás o adelante, no se encuentran en las profundidades de un submenú, sino claramente a la vista, en la barra de herramientas superior junto con el zoom, la opción para agrupar elementos y otras acciones rápidas.

Vectores

vectors

Vectores

Sketch es básicmante un programa de dibujo vectorial. Todas sus herramientas son vectoriales e independientes de la resolución. Habiendo dicho esto, las medidas se manejan en pixels (para ser consecuentes con las unidades de medida utilizadas en CSS) y existe la posibilidad de ver un preview del diseño de manera pixelar.

Texto nativo

El motor de renderizado de texto es nativo, por lo que se verá exactamente igual que como lo veremos luego en el navegador o en la aplicación de Mac OS o iOS. Esto no es un detalle menor: el motor de renderizado de texto de Adobe suele ser muy distinto al generado por el sistema operativo en navegadores y apps, lo que complica las cosas a la hora de decidir familias, variables y cuerpos tipográficos.

Inspector

Sketch inspector

Sketch inspector

El panel de la derecha, llamado Inspector, cambia su contenido de acuerdo al elemento que esté seleccionado. Es una manera inteligente de optimizar el espacio en pantalla. Todas las propiedades de un objeto: relleno, contorno, sombras, estilos y mucho más, se controlan desde aquí. Todo está a la mano del usuario.

Símbolos

El concepto de símbolos, ya conocido por todos, nos permite repetir elementos de forma tal que se comporten como instancias de un único objeto. Al modificar el símbolo, se verán modificadas todas sus instancias.

Recorte de imágenes

En Sketch no es necesario recortar manualmente cada uno de los sectores que luego necesitaremos como imágenes sueltas para nuestro diseño web o de interfaz. El programa hace el trabajo por nosotros! Podemos hacer que exporte automáticamente cualquier objeto o grupo de nuestro documento, incluso con transparencia, pudiendo indicar qué capas deberán estar incluidas en dicha imagen.

Copiar estilos como código CSS

css-attributes

CSS Attributes

Por último, un feature que será bien apreciado por la comunidad web: podemos copiar el estilo de un elemento (colores, degradés, sombras) como código CSS, listo para ser pegado en nuestra hoja de estilos!

¡Esperamos que prueben muy pronto esta maravillosa aplicación!

Mixins vs. herencia en SASS

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

SASS optimiza la manera de trabajar con CSS, ayudándonos a evitar la repetición de código. Analizaremos por qué conviene utilizar herencia, antes que mixins, en casi todos los casos.

Como sabemos, en SASS existen diversas técnicas para optimizar de forma inteligente la escritura de código CSS que se aplicará a varios elementos del DOM de nuestro sitio, de forma que evitemos la repetición de código.

Sin embargo, pocos conocen en profundidad las diferencias que resultan del uso de una u otra técnica, y cuál es la repercusión en el CSS compilado final. Analizaremos punto por punto cómo funcionan cada uno de estos métodos.

Funcionamiento de mixins

Un mixin nos permite definir una serie de líneas de código SASS, para luego incluirlas donde sea necesario, de la siguiente manera:


@mixin boton {
font-size: 24px;
padding: .5em .8em;
border-radius: 3px;
border: none;
cursor: pointer;
}
.boton-principal {
@include boton;
background: #0BE66A;
}
.boton-secundario {
@include boton;
background: #DDDDDD;
}

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

Clickear “view compiled” para ver el código CSS compilado.

Como verán, el código del mixin queda incluido en donde fue indicado por medio del @include. El beneficio es indudable: cuando queramos modificar alguna de estas características, lo haremos en un único lugar que tendrá repercusión en todas aquellas partes del código donde fue insertado.

Sin embargo, la desventaja está a la vista: tenemos código repetido en el archivo CSS compilado. La generación de código repetido en un archivo CSS es algo que todo frontender experimentado en CSS sabe cómo evitar, pero suele ceder ante la tentación de los mixins en cuanto descubre SASS.

La ventaja de utilizar herencia

Otra opción, que funcionalmente genera el mismo resultado, es utilizar herencia. En SASS existe la posibilidad de crear un selector (por ejemplo para cierta class) y hacer que otros selectores hereden este código. Veamos un ejemplo:


.boton {
font-size: 24px;
padding: .5em .8em;
border-radius: 3px;
border: none;
cursor: pointer;
}
.boton-principal {
@extend .boton;
background: #0BE66A;
}
.boton-secundario {
@extend .boton;
background: #DDDDDD;
}

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

Como vemos, el funcionamiento es idéntico al caso anterior, pero el código CSS resultante es muy distinto. Ya no tenemos repetición de código en el archivo compilado, sino un uso más inteligente de agrupación de selectores.

Siempre que podamos utilizar herencia (con extend) en vez de mixins (con include), debemos hacerlo!

Placeholders

Un feature poco conocido de SASS son los placeholders. Nos permiten utilizar la herencia sin la generación de nuevas classes que de todas maneras no estarían siendo utilizadas.

El placeholder nos provee de un espacio para guardar varias líneas de código, que luego aparecerán en el CSS compilado únicamente en el interior de los selectores que las heredan. A continuación, un ejemplo:


%boton {
font-size: 24px;
padding: .5em .8em;
border-radius: 3px;
border: none;
cursor: pointer;
}
.boton-principal {
@extend %boton;
background: #0BE66A;
}
.boton-secundario {
@extend %boton;
background: #DDDDDD;
}

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

Fíjense el código resultante, verán que es casi idéntico al anterior, con la diferencia de que la clase boton no ha sido creada.

Por último: ¿cuándo utilizar mixins?

Los mixis son útiles en ciertos casos particulares, no es cuestión de abandonarlos del todo. ¿Cuándo utilizarlos? Será cuando se trate de mixins que inlcuyan parámetros, es decir un input que modificará el código resultante del mixin. Esta función es única y no puede ser reemplazada por ningún otra técnica disponible en SASS.

Aquí un ejemplo del uso de mixins con parámetros:


%boton {
font-size: 24px;
padding: .5em .8em;
border: none;
cursor: pointer;
}
@mixin boton-color-radius($color, $radius){
@extend %boton;
background: $color;
border-radius: $radius;
}

.boton-principal {
@include boton-color-radius(#0BE66A, 3px);
}
.boton-secundario {
@include boton-color-radius(#DDDDDD, 15px);
}

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

¡Los invitamos a seguir probando con esta maravillosa tecnología llamada SASS!

Evitar selectores largos en CSS

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

El uso de selectores largos, con descendencia en profundidad, dificulta la reutilización del código CSS. Veamos por qué no es conveniente y una posible solución.

Es relativamente sencillo generar una hoja de estilos cuyos selectores devienen en largas cadenas de descendencia. Esto no parece un problema al principio, pero a la hora de reutilizar el código esta situación se transforma en una pesadilla. Aquellos elementos que se estilan correctamente siempre que sigan la mentada cadena de descendencia, pierden su diseño en cuanto se los saca de contexto.

Este problema está presente en especial en el diseño de sitios web que funcionan como aplicaciones: por lo general, las aplicaciones web requieren un diseño modular cuyos elementos puedan ser reutilizados aquí y allá. Indicar con exactitud el contexto en una cadena inmensa de descendencia nos coarta esta posibilidad.

El problema

Imaginemos que tenemos un recuadro, dentro del contenido principal de la página. En su interior tenemos una zona para botones y allí dentro uno de los elementos es el botón principal.

Puede que los selectores en el código CSS queden algo así:


/* Ejemplo de selectores largos: NO recomendable */

body {
font-family: Helvetica, Arial, sans-serif;
background: #ccc;
}
#contenido-principal {
padding: 1em;
}
#contenido-principal div.recuadro {
background: #fff;
padding: 1em;
border-radius: 3px;
overflow: hidden;
box-shadow: rgba(0,0,0,0.1) 0 2px 3px;
}
#contenido-principal div.recuadro div.botones {
background: #ffffdf;
padding: 1em;
margin: 2em -1em -1em -1em;
}
#contenido-principal div.recuadro div.botones button.boton-principal {
color: #fff;
font-size: 1.2em;
padding: 0.5em 0.7em;
background: #FF8C2F;
border: 0;
border-radius: 3px;
}

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

El problema salta a la vista de inmediato cuando modificamos el contexto de uso de algún elemento, por ejemplo: probemos quitar el recuadro fuera del contenido principal. Perdemos todo el diseño.

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

Lo mismo ocurriría si tratásemos de utilizar el diseño del botón en algún otro contexto. El código se vuelve imposible de reutilizar, lo que nos obligaría a repetir código, algo que siempre debemos evitar.

La solución

Algunas de las técnicas analizadas en otros posts de este blog podrían ayudarnos a tener este problema. Las más populares son OOCSS (Object Oriented CSS) y Atomic CSS.

Pero aún sin ir tan lejos, una rápida recomendación podría ser pensar en cada elemento como un módulo, y diseñarlo sin obligarlo a existir dentro de cierta estructura de etiquetas particular. Veamos un ejemplo


/* Ejemplo de selectores modulares, orientados a objetos */

body {
font-family: Helvetica, Arial, sans-serif;
background: #ccc;
}
#contenido-principal {
padding: 1em;
}
.recuadro {
background: #fff;
padding: 1em;
border-radius: 3px;
overflow: hidden;
box-shadow: rgba(0,0,0,0.1) 0 2px 3px;
}
.botones {
background: #ffffdf;
padding: 1em;
}
.recuadro .botones {
/* modificación del contenedor de botones,
específicamente cuando está dentro del recuadro */
margin: 2em -1em -1em -1em;
}
.boton-principal {
color: #fff;
font-size: 1.2em;
padding: 0.5em 0.7em;
background: #FF8C2F;
border: 0;
border-radius: 3px;
}

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

Como se puede ver, los objetos a no dependen de su ascendencia. Pueden reutilizarse sin la necesidad de repetir el contexto.