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]

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.

Última llamada – Curso Sketch a tope el día 9 de Mayo

sketch-3

El curso ya finalizó pero por lo que parece hay interés en hacer nuevas ediciones en otras ciudades. ¿Te interesa? Ponte en contacto conmigo para saber la disponibilidad y fechas

Se va acercando el día y me toca hacer un recordatorio para los más rezagados. Hay una cita marcada en el calendario para los que quieran introducirse en el manejo de uno de los entornos de trabajo que más adeptos ha captado en el panorama de diseño digital: Sketch. Acompañados por un servidor que hará las veces de guía espiritual.

El día 9 de Mayo me dejaré caer por Bilbao una vez más. En esta ocasión para dar un workshop que servirá de introducción al manejo de la herramienta y lo que pudiera acontecer durante su uso en el día a día. Creo que será un día bastante productivo y de lo que estoy seguro es que será una cita perfecta para cogerle el truco a Sketch y perderle el miedo a la herramienta si apenas la hemos tocado.

Toda la información, temario y demás justo en el link a continuación. Quizá no os interese asistir o no podáis pero conocéis a alguien a quien pudiera serle util. Creo que ya sólo quedaban dos plazas y además el curso está a la vuelta de la esquina por lo que…¡hay que darse prisa! ¡Nos vemos allí!

Curso Sketch Bilbao 9 de Mayo

¿Crear webs sin escribir código es posible? La eterna promesa de los editores web

pingendo

Aprovechando estos días de fiesta he querido ponerme un poco las pilas con la maquetación web usando Bootstrap (además de barnizar unas estanterías para un intento de huerto urbano). Me decanté por este framework web porque por algún lado tengo que empezar, porque parecía sencillito de entender y porque regularmente sale a la palestra el dilema de Bootstrap sí, Bootstrap no [en].

Bien. Durante el día completo que le dediqué a mi puesta a punto coder tuve una revelación: no soy capaz de usar los programas tan modernos y chulos que te prometen crear webs sin escribir código o sin saber programar. No están hechos para mí. Me siento más cómodo con un editor de texto como Sublime Text que algunos dopan con un montón de extras.

Pero dejadme que os cuente un poco más sobre esta apasionante historia de inquietudes profesionales apta para todos los públicos.

Bootstrap es un recurso empleado con cierta frecuencia en el estudio y creo que es importante que un diseñador web tenga unas buenas bases sobre lo que se puede hacer y lo que no, teniendo en cuenta el entorno de trabajo en el que se encuentre y las herramientas de trabajo de equipo. De nada sirve que prepare visuales para webs ultra-mega-cool si el día a día o los proyectos no lo permiten encajar. Todos queremos hacer webs chulas pero a veces el tiempo y el dinero mandan.

No es que no supiera nada sobre el aspecto más técnico y developer de la web pero tampoco paso de beginner level y hacía tiempo que no le dedicaba un día entero exclusivamente a pelearme con HTML, CSS y un par de chorraditas de JS.

De hecho hacía tanto que no sacaba un hueco para estos menesteres que ha pasado suficiente tiempo como para que fueran apareciendo apareciendo un buen puñado de herramientas pensadas principalmente para nosotros, los diseñadores pezuñeros del código. Herramientas que prometen hacer de la creación de webs un auténtico camino de rosas. De entre todas las disponibles me he ido tropezando con:

Algunas son herramientas de trabajo directamente en el navegador y otras son programas independientes instalados en nuestro sistema. Las hay pensadas específicamente para desarrollo con Bootstrap y otras son mucho más generalistas. Pero todas tienen en común un objetivo: suavizar la transición entre la fase de diseño y la de maquetación, presentándose como entornos amigables que prometen ayudar a los usuarios menos experimentados que necesitan crear webs sin saber html. Como cuando Dreamweaver se vendía como una máquina de hacer webs él solito.

webflow
Webflow es de los entornos más completitos…y que más asustan.

No he llegado a probar todos los programas que he enumerado arriba pero sí que he trasteado en diferentes momentos con Readymag, con Webflow, Macaw, Pingendo y LayoutIt! Por ejemplo Readymag está muy orientado para hacer case studies, presentaciones de proyectos, etc… Es muy interesante ver cómo lo usan grandes profesionales como Anton & Irene quienes han comentado en más de una ocasión que les parece una herramienta fantástica. Por algo será.

Webflow por su parte me parece de los entornos de trabajo más completos y robustos que hay disponibles actualmente. Es un buen editor online sin embargo creo que como entorno amistoso para el novato puede llegar a asustar. Demasiadas opciones y posibilidades de configuración.

Macaw por su parte empezó muy fuerte prometiendo un entorno mucho más potente que la alternativa de Adobe, Muse, pero le he perdido un poco la pista y no sé muy bien en qué quedará finalmente. No veo que tenga mucho movimiento últimamente en los rinconcitos de diseño. Lo último que leí era precisamente una comparativa con Webflow [en].

LayoutIt! me pareció infumable y con Pingendo he realizado todo el ejercicio que tenía en mente de maquetación responsive y que me ha empujado a estar escribiendo ahora mismo. Había oído hablar de Jetstrap muy bien pero al final fue Pingendo el que se llevó el gato al agua (por puro azar).

Pingendo NO es la solución para todos aquellos que buscamos el gran botón rojo que lance el método makeWeb('responsive','cool'); De hecho petardea lo suyo y en más de una ocasión tuve que cerrarlo y volver a abrirlo. Sin embargo en su favor tengo que decir que me ha servido para entender algunas estructuras al facilitarme el ir añadiendo y arrastrando componentes al html con el que estaba trabajando. Además presenta una interfaz sencillota y amigable para el que verdaderamente no tenga ni idea de en dónde se está metiendo.

Como extra muy interesante tengo que añadir que el día antes de ponerme con el ejercicio me sirvió mucho echarle un vistazo a un par de cursos que hay disponibles en video2brain sobre Bootstrap 3. No daré mucho la lata en este punto en concreto pero podéis probar video2brain durante 7 días gratis si queréis. Aquí dejo toda la información.

cursos-bootstrap
Cursos para aprender Bootstrap desde cero

Cuanto más avanzaba haciendo el ejercicio más me daba cuenta de que en realidad no estaba usando ninguna de las características del programa. Teóricamente si usas un programa así es para poder emplear los módulos prefabricados o los asistentes. Al final terminé con la zona del editor de código maximizada para ir escribiendo directamente el HTML y las propiedades CSS necesarias. Guardaba, abría el HTML en el navegador y volvía al editor. Repetir ad infinitum.

Fue ahí donde me dí cuenta que la mejor metodología es, para mi, mamarte las bases de HTML y CSS para pegarte con ellas en un simple editor de texto. Con ejemplos muy chorras y sencillos al principio. Como si es para aprender simplemente qué es una lista desordenada y el código necesario para hacerla. Sólo así realmente entiendes qué es lo que estás haciendo. Desde la base más base de todas las bases que puedes estar pensando. Una vez tienes los conceptos iniciales claros, sí que es posible sacarle partido a un entorno como Webflow y compañía sin que todo suene a chino.

Lo curioso llega justo ahora y es que creo que en el momento en que se tienen unos conocimientos básico-intermedios, el uso de estos programas termina añadiendo una capa extra de complejidad al desarrollo. No digo que estos programas “sobren”. Particularmente me parece muy interesante cacharrear y probarlos, pero tras haber catado unos pocos sigo sin encontrar uno que realmente pueda recomendar muy fuerte hasta el punto de señalarlo con el dedo con los ojos abiertos de par en par.

Resumiendo: Sé que enfrentarse al código web da un poco de miedo al principio y que si de verdad no sabes hacer nada todo parece muy muy MUY cuesta arriba. En ese caso échale un vistazo a los cursos mencionados anteriormente porque hay más chicha para aprender fundamentos de HTML y CSS para novatos. Creo sinceramente que es la mejor decisión que se puede tomar en vez de buscar un sustituto en forma de programa que promete hacer el trabajo sucio por ti…y se queda por el camino.

Bola extra: Aprovechando el calentón hice un freebie que consiste básicamente en el sistema de columnas responsive que viene por defecto en Bootstrap. Para Sketch. Aquí. Y también recordad que aquí hay muchísimas plantillas y módulos premium bien majos para no tener que empezar de cero.

In Pieces

species-in-pieces

No sé si lo habréis visto ya pero como estoy medio enganchado a la red virtual y a sitios como Designer News [en] pues me entero rápidamente de proyectazos como este In Pieces que ayer empezó a pegar fuerte y a ser la comidilla entre los rincones diseñiles de la gran red.

Y es que Bryan James [en] (trabajos increíbles y awesome dentro) no se ha cortado un pelo en hacer un ejercicio preciosista, sacándose de la chistera una web vitaminada con toques poco habituales de CSS y llena de efectillos tan chulos que no puedes dejar de navegar y fijarte en todos los rinconcitos para ver si se te escapa algún efecto hover que no hayas visto aún. Justo lo que me pasó el otro día con la web de Hello Monday [en] que son otros cracks.

species-in-pieces-2

Echadle un ojo a In Pieces porque mola. Y punto.

In Pieces [en]

Patrones de diseño web – ronda rápida sobre UX

experiencia-de-usuario

Hace unas semanas se lanzó mi curso Patrones de diseño web a través de video2brain. Mi idea era complementar de algún modo los conceptos que planteo en otro curso anterior, Fundamentos de UX y prototipado para web y dispositivos, y así dar una idea más general sobre algunas cosas a tener en cuenta cuando nos toca pelearnos con un proyecto digital y no contamos con un gran equipo sobre el que puedan delegarse otras tareas relacionadas con la arquitectura de contenidos, el diseño de interacción, etc. Así este modo no nos suena a “chino” y no vamos enterando que crear un proyecto web no es sólo ponerlo bonito. La verdad es que creo que no han quedado nada mal.

De estos cursos y de mi labor en formación en general, siempre dejo el linkito a la página donde cuento un poquito más en qué consiste 🙂

Casualmente hace unos días fui invitado a compartir mesa virtual con mister Daniel Torres Buriel, Verónica Traynor y Rebeca Ramírez para charlar sobre usabilidad y experiencia de usuario. Poco hubiese podido aportar a lo que tres grandes del UX compartieran pero tenía bastantes ganas de colaborar. Murphy hizo acto de presencia y por problemas “técnicos” a falta de unas horas me caí de la convocatoria. La verdad es que hubiese sido genial participar.

Lo bueno es que podéis ver la grabación aquí para aprender un poco más sobre estos temas. Imprescindible para ir haciéndose una idea de lo interesante y entretenido que es eso del diseño centrado en el usuario.

Echad un ojo a las webs de los participantes porque hay también bastante material. Por ejemplo Verónica comparte su lista de libros imprescindibles de UX. Pero no se vayan ustedes todavía.

Me recordaba mi señor jefe hace poco un linkazo que consiste en una serie de videos en los que el super crack Luke Wroblewski comparte sugerencias y metodologías para conseguir que nuestros usuarios obtengan una mejor experiencia e interacción con nuestros proyectos web. Si no les echásteis un ojo en su momento, aún no es tarde.

Por si eso fuera poco, me vi el otro día esta genial presentación de Janne Jul Jensen que aunque también tiene su tiempo, es igualmente interesante. En poco menos de una hora te puede poner al día en técnicas relacionadas con la fase de definición de objetivos, arquitectura y prototipado. Ahí va!

Por cierto (y ya voy acabando), que en Userium [en] por fin lanzaron la posibilidad de crear nuestras propias UX checklist. Tanto como si queremos hacer las nuestras propias como si no, es un buen recurso que tener a mano porque nos desvela rápidamente los puntos básicos a tener en cuenta para establecer una buena conexión entre el usuario y nuestras páginas web.

Con todo esto y la cantidad de recursos extra sobre UX que voy guardando en TheStarterKit creo que hay material como para estar entretenidos dos vidas y media. ¡Qué aproveche!

La imagen de cabecera es cortesía de Shutterstock.