OmbuShop Crea Tu Tienda Online

Artículos para el mes: agosto, 2014

Acepta pagos con Bitcoin en tu tienda con BitPagos

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

Cada vez son más las empresas en el mundo que aceptan pagos en Bitcoin. Dell, WordPress y airBaltic entre las más conocidas. ¡Ahora tu tienda online en OmbuShop también puede aceptar pagos con Bitcoin!

OmbuShop se integra con BitPagos para vender con Bitcoin

BitPagos

Para que tus clientes puedan comprar con Bitcoin en tu tienda sigue estos pasos:

  • Ingresa a tu panel de administración ombushop.com/admin
  • Dentro de dicho panel, en la sección Configuración -> Medios de Pago, verás una nueva solapa a la derecha de “DineroMail” y “MercadoPago” que dice “BitPagos“.
bitpagos

Activar BitPagos

  • Haciendo click en dicha solapa, te permitirá autenticarte con tu cuenta de BitPagos (puedes registrarte siguiendo el link que aparece o haciendo click aquí)
  • Una vez autenticado, regresarás automáticamente a tu panel de administración
  • ¡Listo! Tu tienda ya puede aceptar pagos en Bitcoin usando BitPagos.

Después de haber hecho esto, puedes probar realizar una compra en tu tienda y aparecerá la opción de comprar con Bitcoin al momento de hacer check-out. Todas las compras que los clientes realicen se acreditarán en tu cuenta de Bitpagos, y desde ahí podrás enviar los pagos a tu wallet personal. ¡Ahora puedes fácilmente aceptar Bitcoin con tu propia tienda online!

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

Lean Startup para emprendedores sociales

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

Ernesto Tagwerker —CEO de OmbuShop y OmbuLabs— y Diego Da Col  estuvieron en la Universidad Torcuato Di Tella dando un workshop sobre Lean Startup para emprendedores sociales.

A continuación les dejamos las pantallas de la presentación:

Lean Startup para Emprendedores Sociales from Ernesto Tagwerker

Navegación off-screen utilizando sólo CSS

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

Cómo ocultar y mostrar una botonera de navegación off-screen utilizando sólo CSS, sin una sola línea de JavaScript!

Muy de vez en cuando se encuentra una idea realmente reveladora, una técnica maravillosa hecha con las herramientas que estaban al alcance de todos, pero cuya utilización de aquella manera particular no se nos había ocurrido.

Es exactamente lo que ocurre en este caso. Me topé con el código de Austin Wulf, en donde muestra de forma magistral cómo generar una interacción con un click, sin la necesidad de utilizar JavaScript. ¿El secreto? El uso de un checkbox, el pseudo-selector :checked y el selector para siblings.

¡La maravilla!

 

See the Pen Pure CSS Off-Screen Navigation Menu by SitePoint (@SitePoint) on CodePen.0

Artículo original de Austin Wulf: Pure CSS Off-screen Navigation Menu.