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]

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]

Ronda rápida de recursos para Sketch 3

sketch-3

Con la llegada de Sketch 3, la comunidad en torno al programa anda un poco más revolucionada de lo normal. Lo cierto es que a Sketch se le ha cogido cariño y sus creadores supieron aprovechar muy bien el momento de la estocada mortal a Fireworks para coger un poco de velocidad y posicionarse como uno de los programas de diseño que nos deberían sonar si nos dedicamos a entornos digitales.

En su momento preparé el curso Diseño web con Sketch para servir como introducción al manejo del programa y posteriormente lo complementé con un ejemplo práctico de diseño de interfaz. Nota para navegantes: sobre los cursos que he hecho hay más información pasando por aquí.

sketch-tweets

Del mismo modo quise aceptar el reto de escribir artículos especializados sobre Sketch en Tuts+, una comunidad enorme que aglutina cientos de miles de visitantes. Me daba un poco de vértigo pero la verdad es que empecé con muy bien pie consiguiendo que la versión original en inglés de mi primer artículo: Sketch para principiantes: diseño de la interfaz de un formulario de login tuviera una difusión enorme incluyendo menciones de verdaderos cracks del panorama digital. Fue todo un subidón.

Todos los artículos sobre Sketch que se van publicando en Tuts+ los tenéis disponibles aquí [en]. Los míos en concreto están accesibles desde aquí con el extra de que los preparo en inglés y también en español. La lista se va a ir ampliando, prometido 😉 De hecho ahora mismo hay unos cuantos ya:

Además de esta ración de autobombo me guardo a mano los enlaces a Learn Sketch [en], a SketchTalk [en] y a su rinconcito en Reddit [en] para intentar mantenerme a la última sobre todo lo que acontence. Ahora los tenéis vosotros también.

Quiero añadir también el vídeo a uno de los últimos webinar que he realizado, precisamente enfocado a enseñar lo fácil que es empezar a trabajar con Sketch. Si queréis tener una introducción rápida al programa, no os lo perdáis!

¡Si tenéis algún enlace valioso no os lo quedéis para vosotros!

Baymard Institute, E-Commerce Usability Research

baymard-ecommerce-usability

El siguiente link es un linkazo que he podido rescatar del olvido gracias a un par de mails cruzados con el gran Elad. De no ser por él hubiesen pasado los años sin poder volver a dejarme caer por la web de Baymard Institute, un recurso super útil con gran cantidad de artículos, análisis y recursos sobre usabilidad y ecommerce.

Sus contenidos se agrupan en cuatro grandes bloques donde se estudian y analizan los detalles de los procesos de compra, categorización o páginas de inicio, comercio en el móvil… Como extra, ofrecen una serie de estudios premium por los que hay que rascarse el bolsillo. Pero no seríais los primeros 😛

Os dejo el enlace de rigor. Uno de esos que (creo) no os debe faltar si os interesan estos temas.

Baymard Institute, E-Commerce Usability Research [en]

Pixate – un paso adelante en la creación de prototipos interactivos móviles

pixate

A poco que estéis al tanto de lo que se cuece en el mundillo del diseño digital (diseño de interfaces, experiencia de usuario, prototipado) habréis notado el notable crecimiento en disponibilidad de aplicaciones y desarrollo de entornos con los que llevar nuestros prototipos un paso más allá. Y es lógico. Lo estático si bien es válido, puede no ser suficiente en algunos casos en los que la propia interacción y la animación sean parte importante del proceso.

Es aquí donde podemos recurrir a herramientas como Flinto [en], Framer [en], Origami [en] o Avocado [en] para dotar de ese extra a nuestras ideas. Pero también hay que reconocer que se pone muy cuesta arriba el asunto como no sepamos pelearnos mínimamente con código. Quizá Flinto sea el más user friendly de los mencionados.

Por ello me ha parecido muy interesante lo que propone Pixate, un entorno mucho más amistoso (y parecido a Flinto) que nos permitirá recrear interacciones animadas sin la necesidad de meternos tanto en las “tripas”. Lo bueno es que además tienen pensado poder exportar el código para poder integrarlo en el proyecto real y no nos quedemos a medio camino.

El equipo detrás de Pixate ya está curtido. En 2012 lanzaron una campaña Kickstarter que recaudó más del doble de lo que pidieron [en] y desde entonces han seguido adelante. No hay que perder la pista a su lanzamiento.

En la web, actualmente sólo podemos registrarnos y esperar más información, además de pegarle un repaso a los vídeos que van incluyendo. La cosa pinta bien.

Pixate [en]

Recursos, consejos y guías de diseño de Apple, Google, Microsoft y Mozilla

Hace nada tuve que rescatar el link desde el que descargar la tipografía oficial de Firefox OS y me dí cuenta que necesitaba recopilar de algún modo los cinco o seis enlaces básicos sobre patrones de diseño que las grandes empresas ponen a nuestra disposición. Porque antes de ponerse el traje de buzo, a veces es mejor dejarse caer primero por la documentación oficial que podemos encontrar en sus sitios web y que nos puedan hacer un buen apaño si estamos buscando material o preparando el diseño de una aplicación móvil para iOS, Android o quizá alguna cosilla para entornos Windows.

apple-guidelines

Apple Guidelines

De Apple tenemos Designing great apps[en] que es el punto de partida desde el que saltar a los artículos que tienen disponibles sobre diseño de interfaz, usabilidad así como consejos y convenciones que se toman a la hora de preparar contenidos móviles y/o para ser visualizado en dispositivos de alta resolución. Es un recurso que debemos tener de manera obligatoria si estamos un poco perdidos. Hay algún punto que se centra evidentemente en el entorno Mac pero a grandes rasgos se marcan pautas genéricas que debemos saber sí o sí.

android-guidelines

Android Guidelines

Otra ración similar a la de Apple pero centrada en los dispositivos del robot verde y que no puede faltar ni mucho menos si queremos contar con una buena base de conocimiento. Toda la chicha la tenemos aquí, en el apartado de diseño en su web para desarrolladores [en]. Hay bastante material y bien organizado. Y de “material” también tenemos todo esto: Introduction to Material Design.

firefox-os

Mozilla guidelines

No se puede decir que la guía de estilo de Mozilla [en] sea muy extensa y se desarrolle de igual manera que las mencionadas de Apple y Android pero algo es algo. Por ejemplo tienen una pequeña sección dedicada a Firefox OS [en] que nos puede venir bien tener a mano.

No obstante tienen mucho más material en otros sitios web como por ejemplo en el apartado Designing apps, disponible en Mozilla Developer Network [en] y también en Building Firefox OS [en].

windows-guidelines

Microsoft guidelines

No podía faltar la pertinente mención a la documentación y literatura que Microsoft pudiera ofrecer a los diseñadores. Por un lado ofrece patrones y recursos de diseño para su Windows Phone [en] pero también tengo guardado el rinconcito dedicado al diseño para Windows y sus aplicaciones para la store [en]. De hecho tengo también el acceso directo a este curso sobre UX para Windows 8.1 [en] que ofrece Microsoft como apoyo para sus certificaciones.

Y como guinda final me gustaría destacar Designer’s Guide to DPI que no tiene que ver concretamente con ninguno de los recursos anteriores pero trata de manera muy extendida el asunto de los diferentes tamanos de pantalla, densidad de píxels por pulgada y otros conceptos relacionados que sé que a más de uno le dan dolores de cabeza. Es un recurso que tengo guardado en The Starter Kit pero bien merece la pena también comentarlo aquí.

Diseñando apps para móviles

diseno-apps-moviles

Título: Diseñando apps para móviles

  • Categoría:Diseño móvil.
  • Extensión: 276 páginas.
  • Español, inglés
  • Precio: 9,99€ (versión digital) | 19,75€ (versión impresa)

Llevaba mucho tiempo queriendo aportar mi granito de arena al proyecto appdesignbook. Creo que llegué hasta él de forma totalmente casual, probablemente a través de algún retweet y casi sin pensarlo ya estaba suscrito a la lista de correo que me informaría puntualmente de la fecha de salida. Y cuando llegó ese momento estoy seguro que debí ser de los primeros en hacerme con una copia digital.

Lo hice casi sin ningún tipo de miramiento y es que estoy totalmente a favor de este tipo de iniciativas. Leñe, que son 10 euros por un librito bien majo de casi 300 páginas de contenido. Mi respeto a los autores por el trabajo de documentación e investigación. Espero que el proyecto les haya salido bien.

Diseñando apps para móviles es un libro perfecto como introducción al mundo del diseño y mercado móvil. No profundiza demasiado ni entra en aspectos excesivamente técnicos pero da una visión global de todo lo que entraña meter la pezuña en el mundillo móvil y tras su lectura creo que puedo decir sin temor a equivocarme, que el lector adquiere una buena base sobre la que seguir trabajando. Lo interesante además es que es una buena recomendación tanto si eres diseñador o desarrollador. Se tocan temas válidos para ambos perfiles. De hecho aquí está disponible el índice.

Recuerdo que a mí particularmente no me descubrió nada realmente impactante ni tampoco me sorprendió con algún “truco” o contenido de esos que aplaudes con las pestañas pero igualmente me dejó satisfecho. Además su lectura fue muy amena. Se puede leer al completo en un par de tardes.

Los autores cuidan con mimo el proyecto. Si no recuerdo mal, desde su lanzamiento han llevado a cabo dos actualizaciones de contenido, totalmente gratuitas para los compradores claro. Bravo.

Otro punto positivo del proyecto es que está disponible de forma totalmente gratuita en la web oficial. Vamos, que podéis echarle un vistazo bien a fondo y apoyar el proyecto posteriormente comprando alguna de sus versiones. Y es precisamente por esta razón por la que no voy a extenderme más en lo que es el análisis del libro. Teniendo su contenido disponible totalmente, podréis juzgar si merece la pena su lectura a coste cero. Pero recordad si os gusta, que la gente no vive del aire 🙂

Diseñando apps para móviles + versión Kindle

Diseñar para móviles

Diseñar para móviles

A la hora de diseñar para móviles es necesario tener en cuenta una serie de aspectos y condiciones que quizá no contemplemos de un inicio. No sólo debemos ceñirnos al estudio de la interfaz para dispositivos diferentes a los que estamos acostumbrados sino a la manera de trabajar con éstos.

A Jimena Catalina le sigo la pista desde hace mucho y se ha marcado una estupenda presentación titulada Diseñar para móviles en la que nos brinda una serie de datos y consejos a la hora de afrontar este tipo de proyectos. Y es que no todo es Apple y aunque es un mercado jugoso, hay mucho más a lo que hincar el diente y que merece la pena estudiar.

Diseñar para móviles

Responsive web design techniques

Muchas veces me voy guardando información para tenerla recopilada y preparar un post potable. En esta ocasión versaba sobre el uso de media queries y frameworks o utilidades que ayudan en el desarrollo web multidispositivo. Hablo de cosas como 320 and up [en] o Skeleton [en].

Pero el tiempo ha ido pasando y en Smashing Mag han sacado un artículo muy (MUY) destacable sobre este tema, con un montón de recursos y enlaces super útiles que os llevarán por la senda correcta. Rara vez un recopilatorio de estos me ha parecido tan bueno y sólo puedo agradecer al autor su publicación. Ahí os va el link.

Responsive web design techniques [en]