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 🙂

¿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]

Project Parfait ¿Adobe enseña la patita del próximo Photoshop?

project-parfait

Bajo el nombre en clave Project Parfait, Adobe se está poniendo las pilas y ya nos está enseñando alguna de las próximas mejoras que tienen toda la pinta de acabar en futuras versiones de Photoshop y/o en ese supuesto sucesor de Adobe Fireworks que puede que aparezca el día menos pensado. Aunque teniendo en cuenta que podemos juguetear con el experimento usando archivos PSD, la cosa deja poco márgen a la imaginación

Estaba cantado que algo tenían que hacer. Sea o no sea la mejor elección, Adobe Photoshop es un entorno que a día de hoy se usa enormemente como herramienta de diseño web. Y no hay discusión ante esto. Son quizás los pequeños detalles los que hasta hace no demasiado conseguían que más de uno se tirase de los pelos al meterle mano a un PSD. Otros sin embargo se las ingeniaban para lanzar añadidos tan útiles como CSS Hat o specKing [en] por citar un par.

Total, que es ahora Adobe la que nos deja ver algunas de las mejoras “obvias” y “necesarias” en un programa de retoque y edición de imágenes (nótese el sarcasmo): medición de distancias entre objetos, extracción y mejor copia de propiedades CSS, etc… En el apartado de preguntas frecuentes indican además que el objetivo es ir mejorándolo junto a una mejor integración con Adobe Generator (que un servidor piensa que es un puntazo).

¿El objetivo? Que la obtención de imágenes y recursos y que en general el flujo de trabajo entre diseño y desarrollo sea cada vez menos “duro”. Siendo así, sólo puede ser algo bueno.

Project Parfait [en]

Codeacademy: fundamentos HTML y CSS

Codeacademy

Hace no mucho os hablaba de pasada de Codeacademy. Aunque no voy al día, lo sigo usando y me ha parecido un buen sistema para tomar algunos conceptos básicos sobre los conocimientos que ofrecen.

Ahora han lanzado dentro de su proyecto Code Year [en] los primeros fundamentos sobre HTML y CSS. Y sé que si los véis, a la mayoría os sorprenderá lo realmente básicos que son. Pero entiendo que todavía hay mucha gente que necesita sentar las bases más elementales y la manera de hacerlo en Codeacademy me parece muy acertada.

¿Os animáis?

Codeacademy: fundamentos HTML y CSS [en]

Animate.css, plantilla de animaciones con CSS

Colgaba Abel un tweet en el que nos mostraba animate.css, un pequeño recopilatorio de animaciones y transiciones mediante el uso de código CSS. Podemos descargarnos el archivo que incluye todas las variantes preparadas por el autor o bien seleccionar simplemente las que nosotros queramos. Muy muy útil para tener como chuletilla de acceso rápido 🙂

Animate.css [en]

Turn.js, Efecto pageflip ahora en HTML5

Turn.js

Y llegó. El famoso efecto de paso de página del que tanto se ha hablado por aquí ya es una realidad empleando HTML5. Se lo he visto al amiguete de Elad y aunque confieso que apenas lo he mirado, parece que tiene muy buena pinta para los que usamos la pezuña y no la cabeza para meternos con código.

Turn.js [en]

PD: Como guinda del pastel también tenéis disponible en formato jQuery un completo efecto pageflip que además es responsive, por lo que se adaptará a diferentes dispositivos. A un precio bien majo 🙂 Pageflip responsive con jQuery

HTML5 please, úsalo con responsabilidad.

html5-please

Comenzando a ver cada vez más ‘sitios HTML5’ espectaculares… que hacen que un ordenador de gama media se arrastre como con el peor Flash :-S

Esta cita es un twitteo de César Córcoles que leí gracias a elecash. Y no puedo estar más de acuerdo. Porque por lo mismo que se demonizaba el uso de flash parece que curiosamente también está pasando con HTML5, javascript y CSS a saco. A ver si al final va a ser que no es la tecnología sino el usuario con su uso el que va a tener la culpa…

En fin, al grano. HTML5 please me parece un acierto realmente destacable en forma de página web en la que se nos sugieren, recomiendan o comentan algunas de las características disponibles a día de hoy en la variedad de navegadores existentes. Qué compatibilidad ofrecen, si es mejor optar por ofrecer retrocompatibilidad… Una chuleta a la que echarle un vistazo al menos un par de veces. Y fijaos que de regalo y si no la conocíais también crearon CSS3 Please!.

HTML5 Please [en] + CSS3 Please! [en]

También os dejo a continuación unos cuántos títulos bien majos para que añadáis a vuestra biblioteca.

Pragmatic responsive design

Creo que os he mencionado que últimamente me lo paso en grande buceando por Slideshare [en], ese rinconcito donde subir presentaciones y documentos y donde terminan subiéndose gran cantidad de datos de lo más variopinto.

Es por eso que me dedico a buscar documentación sobre Fireworks o diseño y me encuentro material bastante potable (os dejaba hace poco el enlace a Aprende a diseñar (un poco) en 13 minutos y ahora os dejo por ejemplo Controlling Web Typography [en].

En un principio puede parecer información totalmente descontextualizada pues suelen ser en su mayoría diapositivas que sirven de base en una charla o un taller. Pero si lo miramos por otro lado, nos deshacemos del envoltorio para quedarnos simplemente con los puntos fuertes o destacables (sin desmerecer en absoluto la charla relacionada por supuesto!). Y es que muchas veces me encuentro con artículos muy buenos pero de una densidad que no me permite una cómoda lectura con el tiempo del que dispongo. Y a estas pequeñas pildoritas les encuentro hueco fácilmente 🙂

La última que he encontrado (y que enlacé también en el pajarito) se titula Pragmatic responsive design y araña la superficie de lo que se nos viene encima con el diseño multidispositivo o conceptos como el enriquecimiento progresivo [en]. Buff, podría estar horas leyendo sobre esto. Ahí os va el linkito!

Pragmatic responsive design [en]

Adobe Edge, el asistente de Adobe para hacer animaciones HTML5 y CSS3

Adobe EDGE

Hace no mucho Adobe lanzaba Wallaby [en] un mejunje especial en el que por un lado metías contenido en formato flash y por el otro te lo servía transformado en html5. Evidentemente hay que ser muy creyente para esperar que de esta utilidad saliese algo decente, más aún cuando se trata de algo totalmente experimental. Pero bueno, al menos ahí queda el detalle.

Ahora por fin ya está disponible una versión (preliminar) de Adobe EDGE, su particular programa para la creación y edición de formato animado empleando para ello características HTML5, CSS3 y javascript.

Su interfaz os recordará a la que Adobe emplea en otros programas en los que la línea de tiempo juega un papel esencial: Premiere o After Effects por ejemplo. De este modo se intenta facilitar al usuario la adaptabilidad a un nuevo programa. La realidad es que es bien sencillo ponerse a trabajar con el programa y ofrecen ejemplos con los que trastear. Está claro que si ya existían aplicaciones de este tipo (véase Sencha o Ceaser) Adobe no podía quedarse atrás en este aspecto.

Y bueno, con la llegada de Adobe EDGE ha vuelto a salir el tema de siempre: que si Flash se muere, que si Adobe se ha bajado los pantalones y bla bla bla… Hay muchos artículos y muchos tests sobre el asunto y no le veo interés sacarlos nuevamente. Pero Flash sigue teniendo cuerda para rato y estoy cansado de repetirlo. Está claro que no se puede hacer cambiar de opinión a gente que NO sabe de lo que habla. Flash NO son banners cutres. Flash NO son intros cutres. Flash NO es youtube…

Adobe EDGE [en]