Recursos y materiales para dar tus primeros pasos con Flexbox

flexbox

Mientras recopilaba algunos recursos que añadir en The Starter Kit, encontré Flexbox defense [en], un acercamiento básico y sencillo a las bases del uso de Flexbox en nuestros proyectos de maquetación html/css.

Irremediablemente me recordó a Flexbox Froggy [en], cuyo objetivo (y todo en general) es similar: hacernos entender cómo funciona el uso de flexbox mediante sencillos ejercicios.

Recuerdo que tanto este “Froggy” como el ejercicio similar para aprender más sobre el uso de selectores CSS, CSS Dinner [en], me tuvieron bastante entretenido y sin embargo nunca he llegado a mencionarlos por aquí hasta ahora.

Si alguien os pide un recurso rápido para conocer las bases, con estas utilidades vais servidos bajo mi opinión.

Sobre el uso de Flexbox, también me apañé con What The Flexbox [en], un curso gratuito dividido en pequeñas video-lecciones, que trata con más calma y profundidad todo el mundillo en torno a Flexbox. Los juegos mencionados anteriormente están bien para tener una introducción y asimilar algunos conceptos básicos pero What The Flexbox nos permite ir un par de pasos más allá.

Luego si queremos tener una “chuleta” a mano de referencia rápida, siempre tendremos la grandísima web de CSS Tricks para solucionarnos la papeleta 🙂 A Complete Guide to Flexbox [en].

Por último, publicaban hace no demasiado en Smashing Magazine el artículo The Flexbox Reading List: Techniques And Tools con el que termino completando esta ronda rápida de recursos y materiales con los que dar unos primeros pasos con Flexbox.

¿Hay alguno realmente interesante que no esté mencionado? Estaré encantado de poder revisarlo 🙂

Añado Flexbox in 5 minutes cortesía del bueno de Aarón García 🙂

O’Reilly Topics

o-reilly

Acabo de rescatar de entre todos los marcadores del navegador que tengo pendientes por organizar, el enlace hasta una sección en la web de O’Reilly (apenas necesitan presentación creo yo) en la que se dedican a guardar un montón de contenidos interesantes relacionados con los temas que cubren en sus publicaciones editoriales.

o-reilly-ideas

Me ha recordado a lo que hacen también de manera similar en SitePoint [en], otro excelente sitio donde pasar horas y horas (y ojo que sigue vigente la promo de acceso a todo el contenido premium a precio de risa).

Supongo que la vorágine informativa puede con todos y cada uno de nosotros. No es de extrañar la verdad. Pero no por ello deja de merecer la pena que tengamos medio ojo sobrevolando contenidos como estos.

No sé si para ver todos los contenidos es requisito imprescindible que estemos registrados pero bueno, es algo totalmente gratuito y nos da acceso a todos los artículos escritos y también alguna que otra presentación en vídeo o audio.

O’Reilly Topics [en]

Adobe Project Comet, lo que está por venir…

adobe-project-comet

Se que llego tarde a comentar uno de los últimos movimientos más interesantes que han tenido lugar en fechas cercanas. Me refiero a ese en el que Adobe ha enseñado un poco la patita de lo que está por venir: Project Comet. ¡Dentro vídeo!

Lo he recordado durante estos días que me he peleado más de la cuenta con Sketch (preparando un par de artículos para Tuts+) y no negaré que espero el lanzamiento con cierta emoción.

Aunque siempre que puedo intento contar las bondades que puede ofrecer Photoshop para diseño web, lo cierto es que el día a día sigo acompañado de Fireworks y Sketch mayoritariamente. Pero es por pura cuestión práctica, por el tipo de trabajo que desempeño y por mantener cierta agilidad en el horario laboral, no porque le tenga manía a Photoshop. Y eso que desde Adobe también se empeñan mucho en mostrar lo eficiente que puede ser trabajar con él. Sirva de ejemplo el uso combinado de las composiciones de capas y objetos inteligentes.

Lo cierto es que ya desde las últimas actualizaciones de Photosop se ven ciertos detallitos de calidad pensados específicamente para el profesional de la web: la exportación rápida como JPG/PNG al hacer clic derecho sobre una capa (he gastado la opción de tantas veces que la he usado), la (muy mejorable) presencia de áreas de trabajo, la opción extract que nos permite inspeccionar archivos psd que tengamos alojados en nuestro espacio en Creative Cloud, etc.

extract-creative-cloud

Project Comet parece ser el siguiente paso lógico en la evolución que en Adobe quieren para Photoshop (o que se han visto obligados a ofrecer dada la grandísima cantidad de usuarios que emplean Photoshop para diseño de interfaces y páginas web). Tiene muy buena pinta y deseo realmente que sea un buen producto porque la competencia le está comiendo parte de la tostada. Eso sí, si algo le pido es que funcione de manera ágil y se note esa soltura que Photoshop siempre ha tenido a la hora de abrir y manejar archivos, algo que siempre he echado de menos en Fireworks para considerarlo un producto redondo y que casualmente también es algo que brilla por su ausencia en la versión actual de Photoshop a la hora de trabajar con áreas de trabajo (un rendimiento infumable).

Me vuelvo por donde he venido pero antes, un par de links: Investigando un poco sobre Project Comet llegué hasta The Toast Report, una parada muy recomendable con un puñado de artículos disponibles que permiten ampliar datos e ideas sobre Photoshop para diseño web y lo que está por venir con Project Comet. Que aproveche.

Bola extra: Parte del catálogo de revistas mensuales de Ztory están dedicadas a Photoshop, retoque y fotografía. Y a un euro 😛

100 Days of Fonts

100-dias-tipografia

Nos ha dejado Adrian Frutiger, uno de los apellidos más reconocidos en el mundo tipográfico. Un profesional que ha dejado como legado grandes trabajos y recursos. Descanse en paz maestro (Ampliar información).

Como “homenaje” me gustaría mencionar un proyecto de Do-Hee Kim, una diseñadora afincada en San Francisco que tuvo la idea de zambullirse en Google Fonts durante un buen puñado de días para ir creando diferentes estructuras y combinaciones:

Every day for the last 99 days, I designed and coded a combination of Google Fonts, the result of which lives on this page.

Proyectos así cada vez hay más y me parecen un ejercicio realmente positivo que he valorado hacer en más de una ocasión. Quizá un año de estos.

Hasta que llegue el momento, me conformo con sacarle provecho a las diferentes ideas y combinaciones tipográficas que 100 Days of Fonts nos ofrece. Un gran recurso para los que gustamos de usar Google Fonts un día sí y otro también.

100 Days of Fonts [en]

Disponible gratis online “Designing for Performance”

designing-performance

Me he llevado una grata sorpresa al enterarme por Twitter de la disponibilidad online de Designing for Performance un título de la conocida casa O’Reilly. Lo tenía anotado como “lectura futura” para adquirirlo antes o después y resulta que lo han lanzado online de manera que pueda leerse su versión digital desde la web oficial de la publicación. Genial. Pero vamos, que si lo queréis impreso siempre tendréis esa opción.

Lectura más que recomendable para entender que un proyecto no basa su éxito exclusivamente en ponerlo todo bonito, hay mucha chicha por detrás 🙂

Designing for Performance [en]

¿Ganarse la vida vendiendo temas de WordPress? (y II)

vender-temas-wordpress

En Abril de este año 2015 publiqué un artículo exclusivo de este rinconcito donde los chicos de Jelly Themes nos contaron un poco sobre el proceso que supone dedicarse a vender temas premium de WordPress, una forma de conseguir ingresos que más de un profesional del mundo web debe haber sopesado en más de una ocasión. El link para tenerlo a mano: ¿Ganarse la vida vendiendo temas de WordPress?

Con herramientas como Marketopia podemos hacer números y sacar unas cuantas estadísticas interesantes sobre este tipo de negocio digital. Pero no hay nada mejor que las experiencias que nos cuentan los implicados de primera mano.

Navegando por DN (creo) me encontré Selling Commercial WordPress Themes, A Real Life Story, un artículo creado por Chris Wharton y que trata precisamente de eso, sus andaduras en el mundo del mercadeo de WordPress. Una lectura muy recomendable porque estos artículos escasean bastante.

Selling Commercial WordPress Themes, A Real Life Story [en]

Steam y LinkedIn: pequeños detalles de UX que marcan la diferencia

Los azares del destino han querido que estos últimos días me diera de bruces con dos situaciones realmente interesantes usando Steam y LinkedIn. Situaciones interesantes desde el punto de vista del estudio de la experiencia de usuario. Pequeños detalles que sin ningún tipo de dato adicional con el que poder justificarlos, bien merece la pena que sean revisados. A ver cómo lo veis.

Caso Steam

No voy a entrar en detalles sobre qué es Steam. Los que hayan sustituido las monedas de 25ptas por el Síndrome de Diógenes digital sabrán que en Steam se hacen un par de veces al año una serie de campañas de ofertas en las que los precios de los videojuegos caen hasta rozar valores totalmente ridículos, haciendo que las ventas se multipliquen de forma mareante.

Así pues, durante las últimas rebajas de verano y en la búsqueda de engordar más aún el listado de títulos que quiero tener (y que nunca jugaré), me encontré con la siguiente situación:

steam-no-button

La imagen de arriba muestra parte de la “lista de los deseos”, una sección del perfil de usuario que nos permite guardar aquellos títulos o productos que nos interesan para poder echarles un vistazo rápido, accediendo a la página de la comunidad sobre el juego o la página de detalle.

El caso es que en época de ofertas es altamente probable que más de uno de los títulos en tu lista de deseados se encuentren en oferta. ¿Acaso no sería ideal poder comprarlos desde aquí?

Esa opción NO existe a día de hoy. De hecho si quieres comprar 3 títulos diferentes, debes dirigirte a la pantalla de detalle del primer producto, añadirlo al carro, volver al listado de deseados, ir al detalle del siguiente producto, añadirlo al carro, volver al listado de deseados… Y así tantas veces como sea necesario.

Y ojo porque como Steam no tiene en tu perfil el dato de tu edad, para poder ver el detalle de algunos juegos deberás introducir tu fecha de nacimiento mediante los típicos selectores. Más clics y pantallas intermedias.

El resultado es una experiencia muy frustrante y negativa desde el punto de vista de la experiencia que se ofrece al usuario. Tan negativa que yo de hecho no hice las compras. Y estoy seguro que no debo ser el único que se ha enfrentado a algo así.

Sin meterme en la complejidad de todo lo que pueda suponer (no creo que sea por dinero), un botón para añadir al carro desde la lista de deseados sería una mejora enorme, ¿verdad? ¿No aumentaría las conversiones?

steam-button

Sin embargo la falta de datos no me permite ir más allá y lo único que se me ocurre es que quieran generar un mayor número de páginas vistas pese a la clarísima pérdida de efectividad de una sección tan interesante como la lista de deseados de un usuario. Pero me extraña que quisieran perder ventas en momentos tan “calientes”.

¿Qué decís? Me parece que es un cambio que repercutiría positivamente en ambas partes, facilitando la compra al usuario y generando ingresos para Steam.

Caso LinkedIn

Por otro lado el caso de LinkedIn creo que está hecho así precisamente para entorpecer la experiencia de usuario y que no realice la acción. Hablo del momento en que queremos realizar un borrado de múltiples contactos.

El primer paso para gestionar nuestros contactos es acceder a la sección correspondiente donde tenemos a nuestra disposición un buscador y un listado de los contactos actuales. Algo así:

linkedin-listado

Aquí reconozco que la pata la puede meter el usuario (mi caso) si no hacemos un escaneo visual de la pantalla. Y es que realmente desde el primer momento existe en la zona derecha un enlace de “Borrar contactos” junto al de “Añadir contactos”.

Sin embargo por pura proximidad y porque empezamos a escanear los elementos desde la zona izquierda (salvando excepciones), podemos sentirnos tentados nada más entrar en la sección a seleccionar usuarios mediante el check correspondiente que aparece al lado de la imagen de cada contacto, esperando que alguna opción contextual de eliminación aparezca. Y en efecto nada más seleccionar un contacto, justo a la derecha, aparecerá un listado con el nombre de los seleccionados, el número total y un enlace que pone “Borrar”. Mmmm, borrar… ¿qué podrá significar que me aparezca un enlace de borrar tras seleccionar contactos? No sé si me vais entendiendo.

Si os habéis encontrado en la situación en la que queríais eliminar bastantes contactos, sabréis que el proceso de selección lleva su tiempo. Luego le dais al dichoso enlace de borrar y os da la risa al comprobar que ese enlace lo que hace es borrar… la selección de los contactos. ARGH!

linkedin-listado-borrar

Cuando te das cuenta del tiempo perdido, te arrastras virtualmente hasta el recién descubierto enlace de “Borrar contactos”, dispuesto a realizar una vez más el proceso. Y te encuentras con esto:

linkedin-borrar-contactos

Un listado mucho menos intuitivo en el que desaparece la imagen de perfil y el número de contactos del usuario, datos que pueden ser un gran apoyo para determinar a quien toca eliminar y a quien no. Es más, no existe un listado único sino que deberemos ir letra por letra y tampoco disponemos del filtrado por etiquetas.

¿Cómo lo veis? Para mí es una jugada maestra de LinkedIn con la que (me lanzo a la piscina) pienso que penalizan de manera deliberada el proceso de eliminación de contactos con el objetivo de mantener nuestras cuentas bien nutridas y rechonchas de contactos.

Sinceramente no recuerdo momentos tan frustrantes frente a la pantalla como los de estos dos casos mencionados.

A tortas con responsive images: Guía y recursos de imágenes responsive para entender de una vez cómo trabajar con ellas

responsive-images

Lo de trabajar con imágenes responsive surge porque hace tiempo que quería meter en The Starter Kit alguna manera de cargar diferentes imágenes cuando se visualizara la página a través de dispositivos con una densidad de pixel por pulgada mayor a la habitual. Vamos, lo que conocemos coloquialmente como dispositivos de densidad “2x” y superiores.

La razón es que en el caso de esa web en concreto, las imágenes servidas para cada post tenían un ancho de 300px y al verlas desde móviles como un Nexus 4 y similares, se veían bastante feotas.

La opción más sencilla hubiese sido sustituir la petición de esas versiones de las imágenes para mostrar en su lugar las que subo a WordPress y que están a mayor resolución (un ancho de 800px). Con esto resolvería el problema pero repercutiría negativamente en los entornos en los que no es necesaria una imagen de tales dimensiones. Y luego encima la nota del PageSpeed baja un montón, por mucho que las optimice con Kraken.io 😛

Total, que me tocó rescatar algunos enlaces interesantes que me guardé hace tiempo para investigar con más calma qué era eso de picture, srcset y chino mandarín. Hasta la fecha había cacharreado con Rimg [en] pero quería comprender las diferentes opciones existentes.

Después de haber separado el grano de la paja me he quedado con los recursos que cito a continuación que me han servido para entender cómo está el patio actualmente:

responsive-images-wtf

Porque aunque casi me da un telele cuando lo leí en profundidad, Responsive Images: Use Cases and Documented Code Snippets to Get You Started [en], es el artículo que me ha permitido entender perfectamente todo lo que tiene que ver con el uso de las imágenes responsive en una situacion en la que nos enfrentamos a tamaños de pantalla tan dispares y que a su vez ofrecen densidades de pixel tan diferentes.

En español me quedaría con los dos artículos que comento a continuación. Se solapan en algunos contenidos pero creo que merecen la pena ambos. Hablo del articulo de Félix, Guía práctica de imágenes responsive y este otro en Emenia: Imágenes en diseño web adaptativo: picture, sizes y srcset.

Sí que puede venirnos bien guardarnos también en favoritos el acceso hasta RICG [en] que vendría a ser el rinconcito del consejo de sabios de esto de las imágenes responsive.

Y por supuesto, para WordPress también tengo algo de chicha. En concreto y después de probar un par de plugins diferentes, el que me pareció más resultón es WP Responsify [en] ya que nos permite probar entre diferentes configuraciones. Tengo que decir que para mi situación en concreto no me sirvió pero viendo cómo funcionaba y leyendo los artículos mencionados arriba, pude hacerme un apaño aprovechando las imágenes de las que ya disponía gracias a entender perfectamente qué es lo que buscaba y cuáles eran las posibilidades.

Por si sirve de algo lo que hice fue simplemente mantener la etiqueta img haciendo uso de la imagen que genero en WordPress a un ancho de 300px, pero añadí un srcset adicional con la imagen que subo de ancho 800px para dispositivos con densidad 2x. Tan sencillo como eso 🙂

La imagen de cabecera es cortesía de Shutterstock.

Probando Atomic.io, una herramienta alternativa más de prototipado digital.

atomic-io

Dejaban hace unos días en Designer News [en] el enlace hasta Atomic, una nueva herramienta de prototipado que viene a sumarse a otras ya existentes como por ejemplo Invision, Marvel (de la que hablo en el curso de fundamentos sobre UX que ahora tiene un 40% de descuento con el código V2BM40) o Pixate. Quise apuntarme a la beta para echarle un vistazo rápido a ver qué podría encontrarme y aproveché la madrugada para hincarle el diente.

Atomic promete ser un entorno de trabajo amistoso, con características tales como la posibilidad de crear flujos de navegación a través de zonas interactivas, un control de versiones en formato línea de tiempo que nos permite deshacer cambios o modificaciones, incluir propiedades CSS directamente sobre los elementos de nuestro prototipo, comentarios de usuarios, etc.

La verdad es que al no tratarse de una herramienta que requiera instalación (corre directamente en el navegador) ni de ser excesivamente compleja (más bien al contrario) os animaría a probarla directamente si os gusta cacharrear con “juguetes nuevos”. En unos 10 minutos como mucho ya habréis entendido cómo funciona.

atomic-io-00

Sabiendo que Atomic aún está en fase beta, se le notan importantes carencias siendo la falta de importación de contenidos desde Sketch o Photoshop la que considero más importante. No vendría nada mal poder incluir archivos .psd o .sketch.

Lo que sí que podemos hacer actualmente es importar imágenes (he probado a importar archivos SVG sin problema aparente) y añadir elementos extra con las diferentes herramientas de trazado y texto que tenemos a nuestra disposición para, a continuación, ponernos manos a la obra e incorporar efectos adicionales gracias a la posibilidad de incluir propiedades CSS.

En cuanto a capacidades de interacción, Atomic se limita a ofrecernos el poder crear zonas interactivas que hagan las veces de puente entre las diferentes páginas que tengamos incluidas en nuestro prototipo. Una vez creada una zona interactiva, tendremos todo un surtido de diferentes efectos de transición para poder jugar con la apariencia del cambio entre páginas.

Dicho esto y si finalmente os animáis a probar la herramienta, os preguntaréis entonces cómo han conseguido los efectos de transición y desplazamiento de elementos tan chulos en los ejemplos ofrecidos. La respuesta es bien sencilla.

La ubicación y presencia de los elementos es determinante para el efecto de transición. Por ejemplo si colocamos una barra de navegación en la página de origen y aparece exactamente en la misma posición en la página destino, no pasará absolutamente nada con este elemento en concreto. Sin embargo si la colocamos fuera del área de trabajo (las páginas tienen unas dimensiones fijas), al realizar la interacción la barra de navegación no desaparecerá sino que se desplazará hasta la posición deseada. ¿Qué quiere decir esto? Que podemos jugar con la colocación de elementos fuera del “área de trabajo” para hacer aparecer y desaparecer elementos.

Este detalle hace que sea realmente fácil conseguir efectos animados sin mucha dificultad pero personalmente no creo que sea algo muy intuitivo.

Si os ha picado el gusanillo, podéis registraros para pedir acceso a la beta o simplemente dejad un comentario por aquí porque tengo 3 invitaciones disponibles 🙂

Atomic.io [en]

Así fue el curso de Sketch en Bilbao

curso-sketch-bilbao

Durante el último encuentro que tuve con Diego y con Sergio se empezó a gestar un nuevo acercamiento a tierras vascas para ofrecer un curso de Sketch en pleno Bilbao que tuvo lugar el fin de semana pasado. Excusa perfecta para volver a ver caras conocidas como las del gran Kamatiko o Ainara, además de las de Carlos (y Belén) que se hicieron el viajecito desde tierras galegas.

Aunque soy un firme defensor de la formación a distancia y lo intento demostrar siempre que puedo, también es cierto que la opción presencial es perfectamente válida y en pequeñas pildoritas como cursos sencillos o talleres es algo perfectamente compatible. Además verse las caras siempre es más divertido y yo particularmente me lo paso bastante bien intentando compartir lo que sé y contando batallitas.

Creo que el curso salió bastante bien. Es evidente que no puedes obtener el mismo grado de aceptación por parte de todo el mundo pero seguiré puliendo todo lo que pueda mi metodología para que la valoración siga siendo tan buena como la de esta ocasión. Me consta además que hay interés por llevar el curso de Sketch a otras ciudadades (Madrid es una de ellas) por lo que si tenéis interés decidlo abiertamente para coger la furgoneta hippie y montar una nueva edición. En los comentarios o a través de la sección de contacto por ejemplo.

Durante las 7 horas que estuvimos “encerrados”, intenté hablar de todo lo que ofrece Sketch para el mundo de diseño digital a través de ejemplos muy básicos y ofreciendo recursos adicionales. También me dediqué a contar algunas experiencias del día a día y compartir mi visión sobre lo importante que debe ser buscar una buena comunicación entre todos los implicados en la fase de diseño/maquetación. Porque un programa por sí solo es simplemente un programa y Sketch no hace milagros. Esos los hacemos nosotros con el esfuerzo día tras día y compartiendo lo que sabemos hacer 🙂

Actualizo este post, añadiendo el vídeo del webinar que realicé sobre introducción a Sketch