OmbuShop Crea Tu Tienda Online

Convenciones para los atributos Class

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

¿Por qué buscar una convención para el nombramiento de clases? Llegar a un acuerdo para la creación de nombres de clase facilitará el trabajo en equipo y la lectura del código. Veremos algunos ejemplos de convenciones existentes.

En el universo de la programación tenemos algunas pocas convenciones en cuanto al nombre que aplicamos a constantes, variables, modelos, instancias y métodos. Si bien no es técnicamente necesario seguirlas, ayudan mucho a los artesanos del código fuente.

El tiempo demostró que vale la pena dejar de lado caprichos o gustos individuales y consensuar, entre todos, una opción estándar. De esta forma, podemos identificar si un objeto es una variable o una constante con sólo ver su nombres.

Ahora bien, ¿cuál es la situación actual en el universo front-end? ¿Qué pasa con las clases en los elementos del HTML y sus respectivos selectores desde CSS? No parece haber muchos profesionales siguiendo un único estándar extendido, pero las convenciones existen. Veamos…

Un camino intuitivo: método modular

Como sabemos, es conveniente evitar la creación de selectores largos en el archivo CSS, por lo que explicitar en el nombre de la clase la relación de parentezco puede ser una buena idea. Usaremos, entonces, las clases de forma inteligente, evitando usar selectores con descendencia siempre que se pueda.

Una posibilidad puede ser explicitar al parent y luego el child, encadenados por un guión. Explicitar los conjuntos de elementos con el patrón plural, singular, los modificadores como adjetivos luego del elemento (también separados por guión) y los estados de forma similar.

No estamos siendo técnicamente descriptivos de las relaciones entre elementos, pero el código es muy amigable para ser leído por humanos. Ejemplificamos aquí los casos con código:


/* Convención modular para clases de CSS */

/* Descendencia: */
.parent { }
.parent-child { }
/* e.g. */
.modal { }
.modal-header { }

/* Grupos de objetos: plural > singular */
.objects { }
.object { }

/* Modificadores: se aplican dos clases al mismo elemento */
.object.big { }
.object.small { }

/* Estado de objetos: se aplican con el verbo “is”, en inglés */
.object.is-open { }
.object.is-closed { }

/*
Basado en artículo:

http://thesassway.com/advanced/modular-css-naming-conventions

*/

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

Más información sobre el método modular en este artículo.

Un camino más complejo y descriptivo: BEM

BEM significa Block-Element-Modifier, e implica el uso de un formato específico y muy técnico para las clases de los objetos. Su formato unívoco le indica al desarrollador si se trata de un bloque (que contendrá elementos en su interior), un elemento o un modificador de algún elemento. Para separar bloques de sus respectivos elementos se utiliza la combinación de dos guiones bajos, y para indicar la existencia de un modificador se recurre a dos guiones medios.

Tanto el código HTML como los selectores de CSS se complejizan, pero tenemos ahora la seguridad de estar utilizando una forma unívoca de nombrar a los elementos en sus distintas situaciones.

Veremos cómo es esto, con casos reales:


/* Convención BEM para clases de CSS */

/* Blocks */
.block { }

/* Elements */
.block__element { }

/* Modifiers */
.block__element–modifier { }

/* Algunos ejemplos */
.modal { }
.modal__header { }
.modal__header–error { }
.modal__content { }
.modal__buttons__button–default { }
.modal–alert__content { }

/*
Basado en artículo:

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

*/

See the Pen Convención BEM para clases de CSS by Lucas Mourelle (@lucasmourelle) on CodePen.

Más información sobre BEM aquí.

Algunas de las críticas más fuertes a BEM es que genera un paisaje poco convencional en el código HTML y CSS, algo que puede dificultar un poco su lectura.

A probar y seguir experimentando en tu próxima tienda online!

 

Tu propia grilla con CSS o SASS

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

Sí, sabemos que hay montones de grillas de CSS y SASS dando vueltas. Pero tal vez quieras hacer tu propia grilla para mantener el control de tu código o simplemente por tus ganas de experimentar.
¡Veremos cómo se hace!

Si las grillas pre-hechas como SusySingularity no son suficientes —o son demasiado—, entonces te ha llegado el momento de comprender cómo puede construirse una grilla a medida y hacerlo por tu cuenta!

A continuación mostramos un ejemplo muy versátil y con pocas líneas de código.

Los elementos fundamentales

Para hacer una grilla simple, sólo necesitamos dos elementos:

  • fila: hará las veces de contenedor para las columnas, le aplicaremos la clase row.
  • columna: lo más importante de una grilla, le aplicaremos la clase column.

La única responsabilidad del elemento row (fila, en inglés) será la de evitar que se mezclen las columnas. Definimos una fila y mantenemos bajo nuestro control qué columnas se ubican en cada nivel. Además, utilizaremos la técnica del before y el after para que el contenedor no colapse.

Por otra parte, indicaremos a las columnas la propiedad float para que estén una al lado de la otra, y padding de ambos lados para preservar las calles.

Tanto las columnas como las filas tendrán box-sizing: border-box; para que el padding esté incluido en el ancho de la columna.

Modificadores para las columnas

Prepararemos columnas con los siguientes anchos: medio (half), tercio (third) y cuarto (quarter). Esto es muy sencillo utilizando porcentajes. También tendremos una clase para una columna que ocupe el ancho completo, lo haremos explícitamente para ser más descriptivos.

Por último, agregaremos dos clases más, que servirán como modificadores para forzar a una columna a ser la última, o la primera de la fila. Para esto utilizaremos la propiedad de CSS llamada clear.

Pantallas pequeñas

Para que las columnas no queden muy angostas en pantallas pequeñas, incluiremos un media query que nos permita la transformación a una única columna.

El código completo, con CSS

Los invitamos a estudiar el código completo con atención, a continuación.


.row, .column {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.row {
margin-left: auto;
margin-right: auto;
max-width: 1200px; /* opcional */
}
.row:before {
content: ” “;
display: table;
}
.row:after {
content: ” “;
display: table;
clear: both;
}

.column {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
}
.column.half {
width: 50%;
}
.column.third {
width: 33.3333333333%;
}
.column.quarter {
width: 25%;
}
.column.full {
width: 100%;
float: none;
clear: both;
}
.column.force-first {
clear: left;
}
.column.force-last {
clear: right;
}

@media screen and (max-width: 768px) {
.column, .column.half, .column.third, .column.quarter {
width: 100%;
float: none;
clear: both;
}
}

/***************************************/
/* Cosmética, no es parte de la grilla */

body {
color: #444;
font-family: sans-serif;
line-height: 1.2;
padding: 2em;
}
.row {
margin-bottom: 2em;
}
h1 {
font-weight: bold;
padding-bottom: .5em;
background: #ffffdf;
}
p {
background: #ffffdf;
}

See the Pen CSS Simple Grid (spanish) by Lucas Mourelle (@lucasmourelle) on CodePen.

Al final del código hay algunos detalles cosméticos agregados, están para facilitar la visualización del resultado final y no son parte necesaria para armar la grilla.

Ver resultado en pantalla completa para ver el correcto funcionamiento responsive de la grilla!

El código completo, con SASS

Para quienes prefieran utilizar SASS (como yo), adjunto aquí una opción posible. Se podría compactar aún más el código utilizando mixins, placeholders y cálculos matemáticos, pero lo mantenemos como sigue para mantener la simpleza.


$gutter: 20px;
$max-width: 1200px;
$breakpoint_1: 768px;

.row, .column {
@include box-sizing(border-box);
}

.row {
margin-left: auto;
margin-right: auto;
max-width: $max-width; /* opcional */
&:before {
content: ” “;
display: table;
}
&:after {
content: ” “;
display: table;
clear: both;
}
}

.column {
position: relative;
min-height: 1px;
padding-left: $gutter/2;
padding-right: $gutter/2;
float: left;
&.half {
width: 50%;
}
&.third {
width: 33.3333333333%;
}
&.quarter {
width: 25%;
}
&.full {
width: 100%;
float: none;
clear: both;
}
&.force-first {
clear: left;
}
&.force-last {
clear: right;
}
}

.column, .column.half, .column.third, .column.quarter {
@media screen and (max-width: $breakpoint_1) {
width: 100%;
float: none;
clear: both;
}
}

/***************************************/
/* Cosmética, no es parte de la grilla */

body {
color: #444;
font-family: sans-serif;
line-height: 1.2;
padding: 2em;
}
.row {
margin-bottom: 2em;
}
h1 {
font-weight: bold;
padding-bottom: .5em;
background: #ffffdf;
}
p {
background: #ffffdf;
}

See the Pen SASS Simple Grid (spanish) by Lucas Mourelle (@lucasmourelle) on CodePen.

Ver resultado en pantalla completa para ver el correcto funcionamiento responsive de la grilla!

Esperamos que puedan probar esta grilla pronto!

Click the following link for an english, geeky and more complex version of this code.

Desarrollo web al día

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

Los cambios en los estándares y las técnicas que utilizamos diariamente diseñadores y desarrolladores web frontend ocurren de forma vertiginosa. ¿Cómo estar al día con tanta información?

Además de relacionarse con colegas del ámbito local y seguir a referentes internacionales en twitter, una buena opción es visitar semanalmente los sitios de noticias de nuestro campo de acción, aquí algunas recomendaciones:

Esperamos que aprovechen estos links y continúen aprendiendo y experimentando para la creación de más y mejores tiendas de eCommerce!

Registro de clientes desde una tienda

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

Una funcionalidad disponible en OmbuShop desde hace un tiempo es la posibilidad de que cada cliente de una tienda se registre como usuario. Esto permite, por ejemplo, que sólo los clientes dados de alta en una tienda puedan realizar una compra.

Para agregar los formularios de alta e ingreso, debemos seguir los siguientes pasos:

En nuestro panel de administración, vamos a la pestaña ‘Diseño’, y luego a ‘Personalizar’, para ver las plantillas HTML y CSS de nuestra tienda.Podemos agregar el código para registro y login en cualquiera de las plantillas HTML, pero lo mas común es que se haga en la plantilla de layout: ‘theme.liquid’.

Formulario de registro (sign-up)

Una vez elegida la plantilla a editar, agregamos el siguiente código para el formulario de alta de un usuario (sign-up), en donde queramos que aparezca dicho formulario:

 See the Pen EHmfD by Mauro Otonelli on CodePen.

Al agregar este código, los clientes podrán darse de alta en su tienda, y cada cliente registrado recibe un email con un link para activar su cuenta.

Formulario de ingreso (login)

Para los usuarios que vuelven a la tienda se necesita tener el formulario de ingreso (login):

 See the Pen EHmfD by Mauro Otonelli on CodePen.

Podrá darle el estilo que desee a estos formularios, en consonancia con el diseño de la tienda, desde las hojas de estilo CSS.

Luego de haber agregado estos dos formularios, ya tendrá el registro e ingreso de clientes listos para usar en su tienda online!

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

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

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

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

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!