OmbuShop Crea Tu Tienda Online

Artículos para el mes: febrero, 2014

El futuro de la venta por catálogo

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

Si bien la venta por catálogo funciona y sigue existiendo, cada vez más empresas suben su catálogo de productos a su sitio o tienda online.

Es una realidad que el comercio electrónico está creciendo en América Latina potenciado por más de 644 millones de usuarios online.

Esta es una presentación muy interesante en base a un reporte de comScore de 2013:

Futuro digital latinoamerica 2013 de comScore de Clau Alderete

 

Estos son algunos datos interesantes que salen del informe:

Cada día, la venta por catálogo pierde terreno y la venta online gana nuevos clientes.
El crecimiento que estamos viendo en América Latina es el más alto en todo el mundo. El año pasado la categoría de retail ha visto un crecimiento de 16%.

 

Está muy claro que al momento de pagar compras online los clientes prefieren:
  1. Tarjetas de crédito
  2. Transferencias electrónicas
  3. Tarjetas de débito
  4. Efectivo contra entrega

 

¿Qué estás esperando para tener tu tienda online?

CSS Orientado a Objetos (OOCSS)

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

El código CSS tiende al caos cuando se trabaja sin un concepto rector para su ordenamiento. ¿Cómo mantener código CSS ordenado y de fácil mantenimiento?

Cuando del lenguaje de presentación de la WWW se trata, mucho se habla de las nuevas características de CSS3 en cuanto a sus propiedades —gradientes, sombras, transparencias, etc— pero se presta poca atención a cómo ordenar el código CSS en proyectos grandes.

El problema

Es muy común cuando se diseña la interfaz de una webapp, por ejemplo, que los archivos lleguen rápidamente al orden de las miles de líneas de código.

No somos máquinas: lidiar con archivos que contienen miles de renglones de texto técnico es un problema que dificulta nuestro trabajo, complicando los tiempos y en desmedro de la calidad del producto final.

Incluso cuando trabajar con archivos kilométricos pueda ser viable para algunos, esta situación se vuelve en contra cuando debemos compartir el código con nuestros compañeros de trabajo, o incluso con nosotros mismos a futuro!
Tomar un proyecto dentro de un mes y encontrarse con este lío puede ser catastrófico.

Otro gran problema es la repetición de código, por lo general el trabajo sin una estructura de organización genera la necesidad de incluir el mismo código en varios lugares. Recordemos que en ningún caso es conveniente la repetición de código.

Una solución: OOCSS

Los programadores se han estado enfrentando a este tipo de problemas durante años. Existen muchos paradigmas para la generación de código y la lógica de un programa: uno de ellos es la Programación Orientada a Objetos (OOP, por su sigla en inglés).

Este método de trabajo permite la fragmentación de un proyecto grande en unidades mínimas (los mentados objetos), cada una con sus propias responsabilidades.

Lo mismo puede hacerse con el lenguaje CSS, de forma tal que el código pueda ser reusable.

Verán cómo el siguiente ejemplo plantea la repetición de ciertas propiedades y valores de CSS (algo que preferimos evitar).

#button-big {
font-size: 24px;
font-weight: bold;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}
#button-small {
font-size: 16px;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}

Ambos botones comparten gran parte del código, lo que podemos hacer es fragmentar las propiedades de forma más inteligente y aprovechar una gran ventaja de las clases: un mismo elemento de HTML puede tener varias clases aplicadas al mismo tiempo.

Aquí el resultado final:

.button {
font-family: Arial, sans-serif;
display: inline-block;
color: #fff;
background: #0d0;
padding: 0.5em 1em;
border-radius: 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1);
}
.button.small {
font-size: 16px;
}
.button.big {
font-size: 24px;
font-weight: bold;
padding: 0.8em 1.5em;
border-radius: 8px;
box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1);
}

De esta manera, minimizamos el código repetido, y nos permitimos el agregado de mayor cantidad de botones a futuro. Por ejemplo, podríamos agregar un botón rojo para situaciones de peligro.

.button.danger {
background: #d00;
}

Si quisiéramos incluir un botón de peligro (rojo), que además fuera grande, aplicaríamos las tres classes en el HTML:

<a href="#" class="button big danger">Cuidado!</a>

Como se ve, el nuevo código es completamente modular 🙂

Aquí el resultado final: http://codepen.io/lucasmourelle/pen/Eoenw

Esperamos que puedan aplicar pronto el método de CSS Orientado a Objetos (OOCSS) en sus tiendas y sitios web personales!