OmbuShop Crea Tu Tienda Online

Artículos para el mes: septiembre, 2014

Herramientas para refactorear CSS

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

El código CSS puede volverse complejo y difícil de mantener. Aquí listamos algunas herramientas útiles para el análisis y refactoreo del código CSS.

Como sabemos, luego de trabajar semanas o meses en un proyecto el código CSS puede comenzar a contener código repetido, colores que son el mismo pero no exactamente, selectores largos y demasiado específicos, complejidad creciente y hojas de estilo cuyo peso significa un problema.

Si bien un análisis minucioso por parte de un ser humano es necesario, existen algunas herramientas que facilitarán el trabajo.

Las herramientas:

  • CSS Lint: realizará un análisis exhaustivo de errores o incluso potenciales problemas. Indicará con precisión cuál es la causa de cada uno de los problemas y a qué navegador/es afecta.
  • StyleStats: analizará una página web a partir de su URL, extraerá los estilos que están siendo aplicados a dicha página web y mostrará un resumen de las estadísticas más importantes: cantidad de colores, cantidad de cuerpos tipográficos distintos, cuántos selectores complejos hay en las hojas de estilos, cuán complejo es el selector más complejo, etc. Todo a la vista en forma de dashboard.
  • Type-o-matic: un plugin para Firefox que hará un reporte de todas las tipografías siendo utilizadas y sus respectivos colores.
  • CSS Colorguard: escrito en node, ayudará a encontrar colores que —por estar demasiado cerca— deberían ser el mismo. Se trata de un error muy común, ocasionado por el uso y abuso del color picker.
  • Dust-Me Selectors: se trata de otro plugin de Firefox, en este caso se ocupará de chequear cuáles selectores no están siendo utilizados en una página.

Esperamos que puedan utilizarlas para próximos sitios y tiendas online!

Z-index con Sass

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

Cómo organizar los números de z-index de los diferentes elementos de una página compleja.

La organización de los diferentes niveles de z-index en sitios web complejos suele ser desprolija y difícil de mantener. Veremos aquí una técnica con Sass que saltea estos inconvenientes!

z-index

Sass permite ahora la inclusión de listas dentro de una variable, por lo que podremos generar una lista con los nombres que tendrán los elementos cuya propiedad z-index queremos controlar.

Una vez hecho esto, podemos utilizar la función index para obtener el valor del índice del mentado elemento en dicha lista. Se trata de una función que espera recibir dos parámetros: la variable que contiene la lista, y luego el nombre de la variable cuya posición tiene dentro de la variable. Esto lo podemos repetir con todos los elementos a los cuales se les deba indicar un valor específico en el z-index.

Vaya el código a continuación:


// Creación de lista de Sass:
$elements_order: elemento_a, elemento_b, elemento_c, elemento_d;
/* ———————— */
/* Cuestiones estructurales */

#elemento-a {
position: absolute;
top: 20px;
left: 20px;
z-index: index($elements_order, elemento_a);
}
#elemento-b {
position: absolute;
top: 40px;
left: 40px;
z-index: index($elements_order, elemento_b);
}
#elemento-c {
position: absolute;
top: 60px;
left: 60px;
z-index: index($elements_order, elemento_c);
}
#elemento-d {
position: absolute;
top: 80px;
left: 80px;
z-index: index($elements_order, elemento_d);
}
/* ——————— */
/* Cuestiones cosméticas */

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 200;
letter-spacing: .1em;
}
#elemento-a,
#elemento-b,
#elemento-c,
#elemento-d {
color: #fff;
text-align: center;
padding: 10px;
width: 100px;
height: 100px;
box-shadow: rgba(0,0,0,.2) (-2px) 3px 2px;
}
#elemento-a {
background: #E74C3C;
}
#elemento-b {
background: #4AA3DF;
}
#elemento-c {
background: #9B59B6;
}
#elemento-d {
background: #1ABC9C;
}

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

El día de mañana, en caso de querer cambiar el número de los z-index, no tendremos más que cambiar de orden a los elementos que están dentro de la lista con tal fin. Los que están hacia lo último en la lista, serán los que se percibirán más arriba que los demás.

Más información sobre este mismo método, en inglés, en el siguiente artículo.

Libro: tipografía en la Web

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

A la excelente colección de libros para gente que hace sitios web de A Book Apart, se suma un nuevo volumen sobre tipografía en la Web. Jason Santa María ha escrito y publicado el nuevo libro “On Web Typography”.

On Web Typography

On Web Typography

La mayor parte del diseño de una web está conformada por el diseño tipográfico. La diagramación, las columnas, el espacio en blanco, la interlínea y —por supuesto— la elección de la familia tipográfica, hacen a un altísimo porcentaje de los elementos que sirven como pilares y estructura a un sitio web.

Pocos diseñadores web tienen tan controlado el aspecto gráfico de sus creaciones en la Web. Jason Santa María viene, evidentemente, del universo de lo gráfico impreso, del mundo editorial, casi diríamos del trabajo artesanal que hacían los tipógrafos allá lejos y hace tiempo. Gente con oficio, que se repartían entre un trabajo más cercano a lo artístico (diagramar la página) y otro puramente técnico: convertir aquella aproximación artística en una realidad tangible. El armado de la rama, la organización de los tipos móviles, etc.

Hoy en día esto mismo hacemos los diseñadores y desarrolladores web. No sólo proyectamos el diseño de un sitio web, también realizamos la implementación técnica. Reemplacemos tipos móviles por HTML y CSS y se trata del mismo tipo de trabajo: el del artesano que requiere la habilidad que sólo el oficio puede dar: el craftsmanship pero con diferentes herramientas.

Este libro acerca a quienes sólo tuvieron contacto con la Web, al universo de lo tipográfico y la lectura. ¿Cómo leemos? ¿Cómo funcionan las tipografías? ¿Cómo combinarlas? ¿Qué son los sistemas tipográficos? Son sólo algunas preguntas que intentará abordar.

Aquí el link al sitio oficial del libro.

A seguir estudiando, aprendiendo y creando excelentes sitios web y tiendas online!

 

Confirmación de pago vía e-mail

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

Siguiendo nuestro proceso contínuo de pruebas de usuario y mejoras en la UX (experiencia de usuario), hemos modificado los e-mails que notifican del estado de los pedidos a los administradores de tiendas en OmbuShop.

Pago confirmado

Confirmación de Pago

Datos del pedido

Con respecto al detalle del pedido, ahora incluimos la información en forma de tabla en todos los e-mails (tanto para el comprador como para el vendedor). Así, la información se mostrará de manera clara y fácil de entender para todos nuestros usuarios.

Confirmación de pago

Por otra parte, con respecto a las diferentes notificaciones que llegan a los vendedores o administradores de tiendas cuando se realiza un pedido o compra online, al e-mail de venta iniciada, hemos agregado un nuevo email de pago confirmado, para cuando el pago ha sido efectivamente confirmado por la pasarela de pago que corresponda (DineroMail, MercadoPago, PayPal, BitPagos, etc.).

¡Esperamos que estas modificaciones redunden en un uso aún más sencillo de las tiendas!
Como siempre, estamos a disposición por cualquier consulta.

 

CSS: técnicas de clearfix

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

Los elementos flotados se comportan de formas inesperadas y poco intuitivas para quienes recién comienzan a aprender CSS. A continuación, las técnicas más utilizadas para realizar lo que comúnmente llamamos clearfix hack.

Este asunto es largamente conocido por los frontenders experimentados: cuando un elemento está flotado, es extraído del normal flujo de la página; comienza a comportarse de forma alternativa. Consecuentemente, cuando todos los hijos (children) de cierto elemento están flotados, éstos dejan de ocupar lugar en el interior de su padre (parent), lo que resulta en el colapso de la altura del elemento contenedor.

¿¡Cómo!?

En resumen: cuando en el interior de un elemento habitan únicamente elementos flotados, la altura de dicho elemento se colapsará. A continuación un ejemplo:

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

La solución a este problema suele llamarse clearfix hack, y existen varios métodos para lograr el resultado deseado. Veremos los dos métodos más populares para evitar que se colapse la altura del elemento contenedor. Resultan poco intuitivos, pero su utilización es sencilla.

Método 1: “overflow”

Es el método más sencillo y minimalista. Implica el agregado de una única línea de código al CSS. Básicamente, lo que se hace es setear la propiedad overflow del padre, al valor auto. A continuación vemos el código.

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

La desventaja de este método radica en que la propiedad overflow tiene otra función. Algunas veces necesitamos poder indicar otro valor para esta propiedad, y otras veces simplemente la consecuencia de su utilización no nos sirve para el diseño que estamos trabajando.

Método 2: “micro”

Es un poco más complejo, pero es el más popular hoy en día. A diferencia del método “overflow” carece de efectos secundarios. Lo que hacemos es utilizar la posibilidad de crear pseudo-elementos en CSS. Daremos indicaciones de CSS para los pseudo-elementos before y after. Veremos el ejemplo a continuación.

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

Por supuesto, eso mismo puede aplicarse a una clase (e.g. clearfix) y aplicarlo a cuanto elemento lo requiera, evitando la repetición de código.

¡Esperamos que les sea útil!