OmbuShop Crea Tu Tienda Online

Artículos con la etiqueta: ‘diseño web’

Atomic CSS en el BAFrontend Meetup

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

Lucas Mourelle —nuestro líder de diseño en OmbuShop & OmbuLabs— y Alejandro Vizio —director creativo de Aerolab— hablaron en la tercera edición de Buenos Aires Front-end Meetup.

Aquí les dejamos el video de ambas charlas. Arrancan en el minuto 11:40. Una es muy técnica: cómo generar código CSS fácil de mantener con OOCSS, Sass y Atomic CSS; la otra sobre Onboarding & Storytelling.

(Empieza en el minuto 11:40)

 

A continuación dejamos las slides de la charla sobre Atomic CSS:

 

Diseño web con Sketch app

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

En la era del prototipado iterativo y el diseño web responsive, las aplicaciones de diseño de Adobe ya no satisfacen las necesidades del diseñador web y de interfaces. Sketch, una aplicación independiente, gana terreno!

El nuevo niño mimado es Sketch: una aplicación realizada por una compañía llamada Bohemian Coding conformada por siete personas! Esta aplicación se está ganando el corazón de los diseñadores, a continuación veremos por qué!

Sketch app icon

¿Quiénes lo están utilizando?

En principio, cada vez más diseñadores web y de UI están utilizando Sketch. Se trata de usuarios que solían trabajar con Photoshop, Illustrator o el discontinuado Fireworks. Lo eligen por la facilidad y originalidad de su interfaz, pero sobre todo debido a su alta productividad en el flujo de trabajo Web.

La aplicación fue pensada desde las necesidades de diseñadores de sitios web y UI. Se nota claramente la atención al detalle y la investigación que el equipo de desarrollo ha hecho sobre nuestras necesidades.

Features sobresalientes

Listaremos a continuación algunos de los features que hacen de este soft el favorito de los diseñadores.

Interfaz

Sketch interface

Interfaz Sketch

La gente de Bohemian Coding no pretende hacer una reedición de las interfaces a las que Adobe nos tiene acostumbrados. Efectivamente plantean un paradigma diferente. No tenemos numerosísimos paneles de herramientas, sino tres zonas bien diferenciadas que permiten trabajar de forma cómoda y rápida: herramientas y acciones rápidas en la parte de arriba, layers a la izquierda y propiedades del objeto seleccionado a la derecha.

Acciones que necesitamos en todo momento como enviar un elemento hacia atrás o adelante, no se encuentran en las profundidades de un submenú, sino claramente a la vista, en la barra de herramientas superior junto con el zoom, la opción para agrupar elementos y otras acciones rápidas.

Vectores

vectors

Vectores

Sketch es básicmante un programa de dibujo vectorial. Todas sus herramientas son vectoriales e independientes de la resolución. Habiendo dicho esto, las medidas se manejan en pixels (para ser consecuentes con las unidades de medida utilizadas en CSS) y existe la posibilidad de ver un preview del diseño de manera pixelar.

Texto nativo

El motor de renderizado de texto es nativo, por lo que se verá exactamente igual que como lo veremos luego en el navegador o en la aplicación de Mac OS o iOS. Esto no es un detalle menor: el motor de renderizado de texto de Adobe suele ser muy distinto al generado por el sistema operativo en navegadores y apps, lo que complica las cosas a la hora de decidir familias, variables y cuerpos tipográficos.

Inspector

Sketch inspector

Sketch inspector

El panel de la derecha, llamado Inspector, cambia su contenido de acuerdo al elemento que esté seleccionado. Es una manera inteligente de optimizar el espacio en pantalla. Todas las propiedades de un objeto: relleno, contorno, sombras, estilos y mucho más, se controlan desde aquí. Todo está a la mano del usuario.

Símbolos

El concepto de símbolos, ya conocido por todos, nos permite repetir elementos de forma tal que se comporten como instancias de un único objeto. Al modificar el símbolo, se verán modificadas todas sus instancias.

Recorte de imágenes

En Sketch no es necesario recortar manualmente cada uno de los sectores que luego necesitaremos como imágenes sueltas para nuestro diseño web o de interfaz. El programa hace el trabajo por nosotros! Podemos hacer que exporte automáticamente cualquier objeto o grupo de nuestro documento, incluso con transparencia, pudiendo indicar qué capas deberán estar incluidas en dicha imagen.

Copiar estilos como código CSS

css-attributes

CSS Attributes

Por último, un feature que será bien apreciado por la comunidad web: podemos copiar el estilo de un elemento (colores, degradés, sombras) como código CSS, listo para ser pegado en nuestra hoja de estilos!

¡Esperamos que prueben muy pronto esta maravillosa aplicación!

Iteraciones en JavaScript: for, forEach & each

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

Para aquellos puristas del código y la performance, les contamos algunas alternativas para iterar en JavaScript: for, forEach y herramientas de algunas librerías.

Como sabemos, existen diversas maneras de recorrer un Array, iterando cierta programación para cada uno de sus elementos. Hemos confeccionado una serie de tests para comparar la velocidad de los métodos más conocidos:

  • for nativo
  • forEach nativo
  • for hacia atrás
  • jQuery.each
  • underscore.each
  • lodash.each
  • Lazy.each

Performance

Por el momento, las opciones relacionadas con el uso nativo del for fueron los que dieron mejores resultados (superando ligeramente en Chrome la opción en reversa), seguido de lejos en un tercer lugar por el uso de Lazy.each e inmediatamente después lodash.each.

Iterators performance

Iteraciones en Javascript – Performance

Hemos subido los tests para poder sumar estadísticas al respecto. ¡Los invitamos a ingresar a la página de los tests de iteración de JS y correrlos desde su navegador!

Legibilidad

Por otra parte, no todas las decisiones de uso deben basarse en la performance. Cuando un fragmento de código se vuelve muy críptico, esto dificulta el trabajo en equipo y el mentenimiento de dicho código a futuro.

Existen casos, entonces, donde será importante sopesar la legibilidad del código, algo que nos puede hacer ganar mucho tiempo de trabajo a futuro. La mantenibilidad del código es fundamental si queremos pensar en proyectos a largo plazo.

Invitamos a diseñadores y frontenders a continuar experimentando y midiendo resultados!

5 Consejos esenciales para el posicionamiento de tu tienda

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

Para que los buscadores más usados, Google y Bing, muestren a nuestra tienda en los primeros resultados de una búsqueda es necesario optimizar a nuestro sitio para que tenga una buena estructura (para los robots de Google!)

Google     Bing

¿Qué quiere decir esto?

La optimización SEO (por sus siglas en Inglés, Search Engine Optimization) u optimización para motores de búsqueda se dedica a afinar detalles del contenido de cada una de las páginas de nuestra página.

Por ejemplo:

  • Que las direcciones de las páginas sean descriptivas
  • Que no se repita contenido en páginas con direcciones diferentes
  • Que los atributos en la metadata de la página sean descriptivos del contenido

Uno de los sitios más conocidos y respetados para optimización SEO es SEOMoz (ahora conocido como Moz).

La gente de Moz hizo una guía para principiantes muy interesante, hace poco traducida al Español por SEO.pe: Guía SEO para Principiantes.

SEO Moz

¿Por qué es tan importante el SEO?

Si nuestra tienda vende productos únicos, queremos que si alguien los busca en Internet los encuentre en la primera página. Todos los que buscamos por Google muy pocas veces llegamos a la segunda página de los resultados.

Por ejemplo: Puedes empezar buscando en Google el nombre de tu marca y ver cuántos resultados tuyos aparecen en las primeras cinco posiciones.

Consejo #1: Utiliza Google Webmasters Tools para empezar

Google Webmasters Tools es una herramienta gratuita de Google que nos brinda información útil para corregir problemas con el contenido de nuestro sitio. Es de fácil instalación y nos permite ver errores comunes como:

  • Páginas con etiquetas de título duplicadas
  • Links que no conducen a ninguna parte

También podremos ver cómo ve e indexa Google nuestra tienda virtual.

Consejo #2: Utiliza Google Chrome y MozBar para analizar tus páginas

Si todavía no lo tienes, baja e instala Google Chrome, el navegador de Google. Abre Chrome e instala la barra de Moz.

Ahora, cada vez que te encuentres viendo una página de tu tienda, podrás ver un botón a la derecha de la barra de direcciones.

MozBar Icono

Cuando quieras analizar el contenido de cada página, podrás clickear el ícono de Moz y ver los detalles. Por ejemplo:

Detalles de Página

Detalles Moz

 

Si falta información en alguno de estos campos, tienes que asegurarte de que esto no sea así.

Consejo #3: Asegúrate que todo el contenido de una página sea consistente

Cuando nos referimos al contenido a una página estamos hablando de todo esto:

Todas las tiendas en OmbuShop pueden administrar toda esta información desde su panel de administración. Así que cuando ves tu producto, deberías ver una dirección, un título, una descripción y una metadata descriptiva, como este producto de Valeria Nicali:

Valeria Nicali Tote Amerindia

Valeria Nicali Tote Amerindia

Consejo #4: Tienes que mantener actualizado al sitemap.xml de tu tienda

Piensa en los archivos sitemap o mapas de sitio como en una lista de archivos que brindan pistas a los buscadores sobre cómo deben rastrear tu sitio. Los sitemaps ayudan a los motores de búsqueda a encontrar y clasificar contenido en tu web que podrían no haber encontrado por si mismos.

Todas las tiendas de OmbuShop tienen su sitemap actualizado por defecto, pero si no tienes tu tienda sobre nuestra plataforma, puedes ir a http://tutienda.com/sitemap.xml y ver el contenido.

Si no tienes el archivo, puedes generarlo fácilmente con www.xml-sitemaps.com

Consejo #5: Utiliza Google Analytics para medir el tráfico por semana

No puedes controlar lo que no puedes medir. Así que configura Google Analytics para tu tienda online.

La información que te brinda este servicio es esencial, y combinado con Google Webmaster Tools, es excelente para saber:

  • Cuáles son tus productos más populares
  • Cuáles son tus páginas más populares
  • De dónde vienen tus visitas (de Chile, España, México, Estados Unidos, etc?)
  • Cuánto tiempo pasan tus visitantes en cada página

Google Analytics es una herramienta con cientos de funciones pero las que más importan son las que te muestran el comportamiento de tus clientes y los productos que más venden.

Podría darles 5 consejos más, pero quizás en otra oportunidad.

Si quieres saber más sobre posicionamiento web, te recomendamos la Guía SEO para Principiantes.

Entrevistas con partners: Pixel2HTML

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

Empezamos una nueva serie de entrevistas con nuestros partners. Hoy tengo el gusto de presentar a Bruno y Diego de Pixel2HTML, expertos en la implementación de diseños de PSD a HTML.

Bruno Belcastro

Bruno Belcastro, co-fundador y CEO, comenzó a desarrollar productos para la web hace más de 10 años. En el pasado ha trabajado de forma freelance y en la agencia Edelman realizando estrategias de comunicación para marcas como Samsung, Starbucks y Diageo. Es un amante del buen café, la fotografía y el cine.

Diego Peralta

Diego Peralta, co-fundador y CTO, tuvo su primer contacto con la programación web a los 12 años y desde ese entonces fue amor a primera vista. En el pasado trabajó de forma freelance con equipos en todo el mundo utilizando tecnologías como HTML/CSS, JavaScript, PHP, MySQL y Ruby.

¿Podrían explicarnos qué es y cómo funciona Pixel2HTML?

Pixel2HTML es un servicio de slicing de PSD a HTML/CSS. Nos encargamos de transformar los hermosos diseños de nuestros clientes en código web frontend de gran calidad. Vemos que varios de nuestros competidores tienen una estrategia de precios demasiado elevada lo que le imposibilita a muchas agencias medianas acceder a sus servicios. Pensamos que nuestra oferta actual es más accesible a un freelancer o agencias pequeñas/medianas y siempre mantiene la misma calidad de servicio. (más…)