OmbuShop Crea Tu Tienda Online

Artículos para el mes: abril, 2014

Transformaciones 3D con CSS

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

Los tiempos cuando necesitábamos generar imágenes en Photoshop para cada efecto de diseño han quedado atrás. A medida que pasan los años, CSS va sumando posibilidades, quitando responsabilidad a los programas de diseño. A continuación hablaremos de transformaciones 3D con CSS.

Preparando el terreno

Antes de comenzar, prepararemos nuestro espacio de trabajo para poder operar con objetos 3D. Lo primero que haremos es definir la perspectiva del elemento padre (es decir: el que tendrá en su interior a los elementos con efectos 3D). Esto se realiza a través de la propiedad de CSS llamada perspective. Esta propiedad define a cuánta distancia están los elementos 3D de la vista.

A continuación, diremos que queremos preservar las propiedades 3D de los hijos y descendientes de los elementos con transformaciones en 3 dimensiones. Esto lo logramos con transform-style: preserve-3d.

Veremos un ejemplo de perspective y transform-style a continuación:

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

Todavía no hemos aplicado ningún efecto 3D, pero ya está todo listo!
Te invitamos a agregarlo a tus hojas de estilo antes de probar lo que sigue.

Aclaración:

Los ejemplos de este post utilizarán SASS (con sintaxis SCSS), y un poco de ayuda de Compass, para el código de presentación. Si deseas ver el código CSS convencional, puedes hacer click donde dice “view compiled”. Allí verás que en muchos casos algunas propiedades se repiten, con los prefijos de cada navegador, hablaremos de eso al final.

(Si todavía no has probado SASS, te recomendamos que leas este post.)

Translate (traslación)

Una posibilidad es modificar la posición de un elemento en el espacio (es decir, en las 3 dimensiones). Esto se puede hacer con la propiedad translate, a continuación mostramos ejemplos de traslación horizontal, vertical y en profundidad.

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

Siempre que se esté trabajando en el eje X, los números negativos mueven al elemento hacia la izquierda y los positivos hacia la derecha. Cuando se trabaja en el eje Y, los valores negativos mueven al elemento hacia arriba y los positivos hacia abajo. Por último, cuando de profundidad se trata, los números negativos alejan al elemento de la vista, mientras que los positivos lo acercan (haciéndolo ver más grande).

Te invitamos a probarlo y a modificar el código y ver su resultado en tiempo real en cada uno de los ejemplos!

Rotate (rotación)

También podemos rotar objetos, en cada uno de los 3 ejes 3D. Veamos un ejemplo:

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

 

Backface

Como habrás visto en el código, estamos utilizando una propiedad llamada backface. No, no se trata de un insulto en inglés, sino de una propiedad booleana (es decir que acepta únicamente los valores: true o false) que permite definir si queremos que se vea el dorso del elemento, en caso de estar rotado por completo utilizando la rotación 3D.

Por lo general, el dorso de un elemento muestra su contenido en espejo, como puedes ver en el siguiente ejemplo:

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

 

Scale (escalado)

También podemos aprovechar las propiedades de escalado en su versión 3 dimensiones.

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

En el primer ejemplo modificamos el escalado horizontal (scaleX), en el segundo el escalado vertical (scaleY), y en el tercero el escalado en profundidad (scaleZ), para el cual además hemos agregado una rotación de forma que se visualice el efecto de estiramiento en el eje Z.

Transform origin (eje de transformación)

Habiendo utilizado transformaciones en 2 y 3 dimensiones, también podemos decidir cuál es el eje de coordenadas de estas transformaciones (por ejemplo, desde que punto pivotea una rotación). Esto se hace a partir de la propiedad de CSS transform-origin.

Al no haber aclarado el transform-origin en los ejemplos anteriores, los navegadores utilizarán el default (que suele ser 50% 50%, es decir en el centro del objeto).

En el ejemplo que sigue pondremos el eje en el límite izquierdo del objeto (con las coordenadas 0% 0%):

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

Las medidas pueden ser absolutas (por ejemplo en px) o relativas (utilizando %, em, etc.). Te invitamos, nuevamente, a probar modificando el código.

Prefijos y compatibilidad

Desde ya, muchas de estas propiedades son relativamente nuevas, por lo que al utilizarlas debemos asegurarnos que su utilización signifique mejoras progresivas al diseño de nuestras páginas (progressive enhancements), antes que un feature necesario para el uso del sitio o la webapp.

En muchos casos, habrá que agregar los prefijos de los navegadores (-webkit- , -moz-, -ms- , -o-). Puedes chequear en el sitio Can I Use, siempre que vayas a utilizar una propiedad de CSS cuya compatibilidad en navegadores está en duda.

¡Esperamos que utilices estas propiedades de CSS para lograr efectos 3D en tus tiendas online!

Git para diseñadores

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

¿Qué es Git?

Git es una herramienta que nos permite controlar versiones de nuestros proyectos y trabajar de forma colaborativa y descentralizada. Es particularmente relevante para diseñadores web, ya que es en esta área donde los diseñadores trabajamos con código.

Lidiamos con muchos archivos de texto plano escritos en lenguajes formales como HTML, CSS y JavaScript, que en muchos casos están siendo modificados por varias personas al mismo tiempo: diseñadores, programadores y  editores de contenidos.

Hoy en día la mayoría de los diseñadores y desarrolladores web utilizamos Github como servidor para guardar nuestros repositorios. Recomiendo que se suscriban a dicho sitio para dar los primeros pasos.

Otra alternativa es BitBucket, que incluso te permitirá tener repositorios privados en su plan gratuito.

¿Cómo instalar Git?

Interfaz gráfica de usuario (modo amigable)

Una vez creada la cuenta en  Github, podremos descargar la aplicación amigable con interfaz gráfica de usuario para Mac y para Windows, Esta aplicación nos permite el uso de Git sin mayores inconvenientes, a la manera que estamos acostumbrados a utilizar nuestras aplicaciones hoy en día: ventanas, botones, cursor, etc.

Línea de comandos (modo geek)

Por lo general, a medida que uno se vaya acostumbrando, es más práctico manejar Git desde la línea de comandos. A pesar de lo complejo que esto pueda parecer, su utilización es muy rápida y sencilla, a continuación los links con los instaladores de línea de comando para cada plataforma:

Una vez instalada la app para el manejo de Git desde línea de comandos, no tenemos más que abrir una sesión de la línea de comandos y escribir los comandos correspondientes a Git. Aquí hay una buena guía en español de los comandos de Git.

Configuración inicial

La configuración inicial es muy sencilla desde la web de Github o desde la aplicación nativa. Vamos a concentrarnos en cómo crear un repositorio desde la línea de comandos, que es lo que puede resultar más complejo para quien no está acostumbrado a ejecutar comandos desde allí.

Luego de abrir la línea de comandos, podremos configurar Git siguiendo los siguientes pasos. Lo primero es indicar el nombre de usuario, como sigue:

git config --global user.name "Tu Nombre Aquí"

Lo siguiente será configurar el email (el mismo que utilizamos para la cuenta de GitHub), también es muy sencillo:

git config --global user.email "your_email@example.com"

Si necesitas más detalles para los pasos, puedes ver esta guía para el seteo de Git.

Creación de tu primer repositorio

Cuando trabajamos un proyecto con Github, dicho proyecto estará alojado en lo que llamamos repositorio. Un nuevo repositorio puede crearse desde la web de Github, desde la aplicación gráfica, o bien desde la línea de comando. Una vez hecho el repositorio, habrá una relación entre una carpeta local en tu disco rígido y el repositorio online en Github.

Por lo general, se clona el repositorio remoto en la computadora local. Trabajamos sobre la versión clonada local, y luego podremos empujar los cambios hacia el repositorio remoto cuando sea necesario.

Modificaciones en tu proyecto

Cuando trabajes en tu proyecto localmente, puede ser que necesites agregar nuevos archivos o sub-carpetas. Para eso existe el comando add:

git add <archivo o carpeta>

Por otro lado, también tenemos la posibilidad de confirmar una instantánea, una “foto” del proyecto en cierto momento puntual. De esa forma confirmas las modificaciones que hayas hecho sobre los archivos que estuviste trabajando. Esto se realiza con el comando commit:

git commit -m "Mensaje descriptivo de la modificación que has hecho."

El comando permite la inclusión de un mensaje que describe qué cambios fueron realizados al proyecto. De esta forma tendrás documentado qué archivos fueron modificados, exactamente en qué renglones y con qué objetivo (el mensaje).

Por último, status te permite verificar el estado de un proyecto, si ya has confirmado los cambios por medio de un commit, o no, etc.:

git status

Sincronizar con el repositorio remoto

Para mantener siempre una copia de seguridad en el repositorio remoto, conviene sincronizar para mantener los archivos actualizados. De la misma forma, si se trabaja en equipo, varios usuarios podrán trabajar de forma centralizada sincronizando sus cambios con el repositorio remoto.

Descargando desde el repositorio

Para descargar los últimos cambios que pueda tener el repositorio remoto (por ejemplo, cambios realizados por otros colegas), se puede utilizar el comando pull. A continuación lo estamos usando para que descargue los últimos cambios que se encuentren en el repositorio, desde el origen “master” (en este caso, la branch sobre la cual se está trabajando):

git pull origin master

Las branches (“ramas”, en inglés), son diferentes versiones de un mismo software, que pueden ir en palalelo. De forma tal que un grupo de personas pueda trabajar sin afectar al código principal en el cual sigue trabajando otra parte del equipo.

Subiendo cambios al repositorio

Para publicar los cambios que tenemos en nuestro entorno de trabajo local y subirlo al repositorio remoto, utilizamos el comando push, como sigue (también aclaramos que queremos subir los cambios al origen llamado “master”, en este caso):

git push origin master

Resumen

Luego de hacer los commit en nuestro entorno local, entonces, podemos hacer un pull —para descargar los últimos cambios que pueda haber hecho otra persona al repositorio remoto— y luego un push, para subir nuestros cambios locales al repositorio remoto —de forma tal que luego nuestros colegas puedan hacer pull de nuestros cambios hacia sus respectivos entornos locales—.

¡Esperamos que todo esto les sirva para hacer más y mejores tiendas online con OmbuShop!

Personalización de e-mails automáticos

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

Una funcionalidad que muchas tiendas nos han pedido es la posibilidad de enviar e-mails personalizados cuando un cliente realiza una compra. Hoy lanzamos esta nueva función.

A continuación, les explico cómo configurar los emails personalizados de su tienda:

  • En el panel de administracion de la tienda, ingresar a la pestaña Diseño y luego hacer click en la opción Personalizar.
Menu del panel de administración

Menu del panel de administración

  • En la columna HTML, buscar la sección denominada Email Templates.
Selección de email template

Selección de email template

  • En esta sección, veremos que hay cuatro opciones disponibles. Cada una de estas contiene una descripción explicando cuándo se envía el e-mail al cliente.
  • Por ejemplo, si queremos modificar el e-mail que se envía cuando se marca el envío como enviado, tenemos que editar shipped_email.liquid
  • Una vez elegido el e-mail a editar, se abrirá una nueva ventana mostrando el e-mail con formato Liquid para que podamos editar libremente.
Editar email personalizado

Editar email personalizado

  • Finalmente, hacemos click en Guardar y volver para guardar los cambios. En este caso, cuando un cliente compre uno de nuestros productos y lo enviemos, el e-mail que personalizamos será el que se le envíe.

A partir de hoy puedes personalizar los siguientes emails:

  • E-mail de confirmación de compra con pago online: Este e-mail se envía cuando un cliente realiza una compra utilizando un gateway de pagos online.
  • E-mail de confirmación de pedido con pago offline: Este e-mail se envía cuando un cliente realiza un pedido con pago en efectivo o contra entrega (offline)
  • E-mail de confirmación de envío: Este e-mail se envía cuando envías el pedido a tu cliente, luego de confirmar el pago. Le avisa a tu cliente que el pedido ya está en camino.
  • E-mail de cancelación de pedido: Este e-mail se envía cuando cancelas un pedido. Puede ser que ya no tengas stock o que el cliente se haya arrepentido de concretar la compra.

Usabilidad vs. UX

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

Existe una confusión muy difundida en el rubro acerca de lo que significan los términos Usabilidad y UX. La gran mayoría de los profesionales los utilizan de forma indistinta, como si fueran sinónimos, cuando no lo son.

Ambos términos determinan la calidad de una interfaz. Los usuarios interactúan diariamente con nuestras interfaces y están a merced de nuestras decisiones de diseño. En muchos casos logran sus objetivos, en otros no. A veces disfrutan el uso de nuestras interfaces, a veces no.

Definiremos a continuación qué significa cada uno de estos términos, para evitar confusiones futuras y comprender en mayor profundidad la problemática de la interacción.

Usabilidad

Veamos las definiciones oficiales que promueve ISO:

  • “La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso”
  • “Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”

En ambos casos, hablamos de la posibilidad de uso. Hablamos de la funcionalidad del producto. ¿Puede un usuario cumplir sus objetivos, utilizando el producto en cierto contexto real específico? ¿Cuán ardua es la curva de aprendizaje? ¿Pudo concluir la tarea satisfactoriamente?

La eficacia se corresponde con la capacidad de alcanzar el objetivo esperado, mientras que la eficiencia tiene que ver con el esfuerzo necesario para alcanzar dicho objetivo: la idea es cumplir un objetivo con el mínimo de recursos disponibles y en un tiempo razonable.

UX – User eXperience

La experiencia de usuario, por otro lado, radica en la percepción —positiva o negativa— que se tiene del producto durante y después de su uso. Esto va más allá de si el usuario pudo completar el objetivo propuesto o no.

Lo ideal es lograr que el usuario termine los objetivos, pero además se lleve una percepción positiva con respecto al uso del producto, lo que sin dudas ayudará a que lo vuelva a elegir o usar en situaciones futuras.

El uso de nuestros productos —en nuestro caso particular se trata de sitios web, aplicaciones web y tiendas online— debe ser grato. Queremos que nuestros usuarios tengan un recuerdo positivo de su experiencia.

¡Los invitamos a tener en cuenta tanto la Usabilidad como la UX de sus sitios y tiendas online! ¡Por clientes felices!