OmbuShop Crea Tu Tienda Online

Artículos del autor

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!

Buscamos desarrollador Full-Stack

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

En OmbuShop estamos buscando a nuestro tercer programador o programadora! Debe ser desarrollador/a Full-Stack.

Hace más de tres años construimos OmbuShop y brindamos servicios de desarrollo a otras startups.
Nos gusta aplicar Lean Startup, tener un scrum por día, trabajar en la misma oficina, hacer experimentos y mejorar nuestro código a diario.

También nos gustan: (y estaría bueno que te gusten o quieras aprender)

  • Ruby
  • AWS
  • Redis
  • Git
  • SASS + Compass
  • Rspec
  • MySQL
  • Postgres
  • JavaScript
  • Sinatra
  • Rails
  • Heroku

Ofrecemos:

  • Un buen sueldo en relación de dependencia
  • Equity
  • Horarios flexibles
  • Entradas a conferencias
  • Clases de ping pong

Buscamos:

  • Alguien obsesionado por la calidad, pero también pragmático/a
  • Un mínimo de tres años de experiencia en desarrollo web full-stack
  • Conocimiento sólido de diseño orientado a objetos (OOP)

Al principio nos gustaría que trabajes en la oficina (Palermo, Buenos Aires) con nosotros.

Para postularte, enviá un email con tu CV y usuario de Github a ruby@ombushop.com

Unidades relativas al viewport en CSS

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

Pocos conocen las nuevas unidades relativas del módulo de Units de CSS3. Entre las novedades, tenemos la posibilidad de establecer medidas que dependen del viewport, es decir, el tamaño de la ventana del navegador. Veamos cómo se usan!

Como sabemos, tenemos dos tipos de unidades de medida en CSS: las unidades de medida absolutas y las relativas. Entre las unidades de medida absolutas, tenemos: px (pixels), pt (puntos), pc (picas), in (pulgadas), q (cuartos de milímetro), mm (milímetros) y cm (centímetros).

Del lado de las unidades de medida relativas, tenemos: em (cuerpo tipográfico), rem (cuerpo tipográfico del root), ex (altura de x), ch (ancho del 0), % (porcentaje) y las relacionadas al viewport: vw, vh, vmin y vmax.

Medidas relativas al viewport

Veremos en profundidad cada una de las nuevas unidades de medida que tienen relación con el viewport del navegador.

vw: viewport width

Esta unidad de medida funciona como porcentaje del ancho total del viewport. Por lo que si queremos que cierto elemento mida, a lo ancho, lo mismo que el viewport, deberíamos indicarle width: 100vw;

A continuación veremos un ejemplo.


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

 

vh: viewport height

Similar a la unidad vw, la unidad de medida vh se refiere al porcentaje del alto total del viewport. Es una medida muy utilizada en sitios que tienen “pisos” de diseño, de forma tal que cada uno de estos “pisos” del HTML midan lo mismo que el alto de la ventana.


.section {
height: 100vh; /* alto del viewport */
}

/* Detalles cosméticos */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
}
.section {
background-color: #6f0;
}
.section:first-child {
background-color: #f60;
}
h1 {
padding-top: 1em;
padding-bottom: 1em;
}

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

 

vmin: viewport min

En este caso también se trata del porcentaje de la medida actual del viewport, pero se calcula con respecto al lado más corto. Es decir que si el ancho del viewport es más corto que el alto, entonces vmin será lo mismo que utilizar vw. Por el contrario, si el alto del viewport es más corto que el ancho, entonces vmin será lo mismo que vh.


.section {
width: 100vmin; /* lado más corto del viewport */
height: 100vmin; /* lado más corto del viewport */
}

/* Detalles cosméticos */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
}
.section {
background-color: #6f0;
}
.section:first-child {
background-color: #f60;
}
h1 {
padding-top: 1em;
padding-bottom: 1em;
}

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

 

vmax: viewport max

Justo a la inversa de vmin: se trata del porcentaje de la medida actual del viewport, pero se calcula con respecto al lado más largo. Es decir que si el ancho del viewport es más largo que el alto, entonces vmin será lo mismo que utilizar vw. Por el contrario, si el alto del viewport es más largo que el ancho, entonces vmin será lo mismo que vh.


.section {
width: 100vmax; /* lado más largo del viewport */
height: 100vmax; /* lado más largo del viewport */
}

/* Detalles cosméticos */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
}
.section {
background-color: #6f0;
}
.section:first-child {
background-color: #f60;
}
h1 {
padding-top: 1em;
padding-bottom: 1em;
}

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

Para ver cuál es el nivel de soporte de estas unidades de medida en los diferentes navegadores, pueden remitirse a Can I Use.

¡Adelante, a probar las nuevas unidades de medida relativas de CSS3!

10 frameworks front-end para probar!

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

Aquí una lista de las 10 frameworks más populares entre desarrolladores front-end.

FRONT-END FRAMEWORKS

Se ha vuelto muy común trabajar el HTML y CSS de nuestros sitios con la ayuda inicial de frameworks front-end, especialmente cuando se trabaja en aplicaciones web. Se trata de librerías de CSS y en muchos casos también JS que nos ayudan a empezar sin tener que hacer todo desde cero.

Por otra parte, trabajar sobre la base de una framework establecida y con cierto nivel de popularidad en la comunidad también nos asegura la estructuración coherente de las diferentes partes de nuestro código, compartiendo un patrón de diseño común con muchos otros diseñadores y desarrolladores.

A continuación veremos algunas de las opciones más conocidas:

  • Bootstrap
    Muy probablemente, la más conocida entre todas las frameworks front-end que están en nuestro ecosistema. Fue creada originalmente por el equipo de Twitter, como guía de estilos interna. Las últimas versiones tienen funcionalidades responsive de muchísima utilidad.
  • Foundation
    Otra framework front-end responsive muy popular. Sin dudas ocupa el segundo puesto, luego de Bootstrap, en cuanto a popularidad.
  • UIkit
    Una librería de componentes de UI. Liviana y modular.
  • Semantic UI
    Otra librería liviana. Tiene debugger incluido y un diseño limpio y agradable.
  • Ionic
    Framework especialmente pensada para desarrollar aplicaciones híbridas para dispositivos móviles.
  • Pure
    Framework bien limpia y con fácil posibilidad de customización a través de SkinBuilder.
  • Mozilla Brick
    Colección de elementos de UI creados por el talentoso equipo de Mozilla. Carece de CSS estético para el look & feel inicial: no hace falta contradecir código previo.
  • Chocolate Chip UI
    Imita el look & feel de iOS 7. Facilita la creación de aplicaciones universales para iOS, desde la Web
  • 99lime HTML KickStart
    Otra interesante framework de HTML y CSS
  • Cascade Framework
    Framework liviana, atómica y modular.

Para una comparativa entre estas y otras frameworks: CSS Front-end Frameworks with comparison