Curso de diseño web con Sketch – 9 Mayo – Bilbao

curso-sketch-bilbao

Para los que no pudísteis asistir, me gustaría dejaros aquí un webinar de introducción a Sketch que hice recientemente :). Lo dejo al final del post.

El otro día me traía una ronda rápida de recursos para Sketch y la semana pasada se hizo público el último tutorial de diseño con Sketch que he creado para Tuts+. Lo tenéis justo aquí: Design a Bold Email Newsletter [en] (también disponible en Español).

Hoy vuelvo a dar la lata con el dichoso programita porque gracias a arketipo y THELAB me dejaré caer una vez más por tierras bilbaínas para impartir un workshop de diseño digital con Sketch que espero que sea la introducción perfecta al manejo del programa para todos los que quieran asistir. La cita será el día 9 de mayo, sábado, y el lugar concreto se sabrá próximamente.

Hay precios reducidos para los primeros y para cualquier duda podéis contactar con Diego para que os resuelva todas las cuestiones que no pueda hacer yo ahora mismo. El temario sobre el que trabajaremos es:

  • Introducción. ¿Sketch?
  • ¿Por qué Sketch? ¿Alternativas?
  • ¿Carencias?
  • Primer contacto con la interfaz. No te asustes. Sketch no muerde.
  • Jerarquía y organización de contenidos.
  • Importación de contenidos y compatibilidad.
  • Navegando por nuestro documento.
  • Medidas, guías, rejillas…
  • Trabajando con vectores en Sketch.
  • Trabajando con bitmap en Sketch.
  • Trabajando con texto.
  • Máscaras.
  • Estilos y símbolos.
  • Exportación de material like a pro.
  • Plugins, recursos a go-go.
  • Webs de referencia para Sketch lovers.
  • Práctica final: cacharreando con Sketch.
  • Buenas prácticas.

Con un poco de suerte y aprovechando el enchufe en video2brain por ser formador igual me llevo algún regalito en forma de suscripciones por lo que la jugada puede salirle redonda a más de uno 🙂

Yo, como intento hacer siempre, pondré todo de mi parte para que sea un día productivo y podáis volver a casa con la sensación de haber aprovechando bien el día.

Curso de diseño web con Sketch

PD: Este mismo mes también hay planeado un curso de productividad con Mac.

PD: Webinar de introducción a UI con Sketch

Probando Disqus

disqus

Llevo unas cuantas semanas intentando trastear con Disqus para poder implementarlo en esta web. Aunque no soy muy partidario de integrar chorromil servicios externos, incluir Disqus como sistema de comentarios era algo que tenía entre ceja y ceja desde hace un tiempo.

Todo empezó a raiz de escribir artículos y tutoriales en Tuts+. Me pareció curioso que una red de contenidos tan grande usara un sistema de terceros para todo lo que supone el sistema de comentarios. Supongo que no se le puede hacer ascos a un servicio que ofrece notificaciones, un cómodo panel centralizado o la posibilidad de suscribirte sin necesidad de plugins extras.

A priori y visto lo visto Disqus no debería ser una mala elección pero he leído infinitas historias sobre lo complicado que podía llegar a ser su integración en casos en los que no se parte de cero y toca importar contenidos (comentarios básicamente) que ya existiesen en el sistema antes de empezar a usarlo. Algo que en un principio se puede suponer como una tarea sencilla se ha convertido en un auténtico reto personal. Y puedo ser muy cabezón.

Tengo que dar las gracias a Javi (que hizo un post y todo) y a mister Roberto porque han respondido mis dudas o me han aguantado cuando he llegado al momento de querer tirarme por la ventana.

También tengo que agradecer que Internet siga siendo un pozo de sabiduría que parece no tener fondo. He encontrado artículos en los que se nos sugería modificar algunos parámetros para evitar que el proceso de migración de contenidos no se quedara congelado o en los que se indica qué hacer si salta algún error durante el proceso: Disqus WordPress Imports Hangs [en] + How to Fix WordPress Export, Disqus Import Comments Errors [en].

Qué majo queda el perfil de usuario en Disqus :3
Qué majo queda el perfil de usuario en Disqus :3

En mi caso y tras probar todo lo habido y por haber sólo he podido lograr el éxito durante estos días en los que, con motivo de unos extras que han añadido, quizá también han toqueteado algo sobre este proceso y he conseguido avanzar hasta dejarlo activo… al menos de momento 😛 Recuerdo hacer exactamente lo mismo hace un par de semanas y todo eran errores de formato en el archivo que genera WordPress a la hora de exportar los contenidos.

¿Cómo ha sido la jugada? Importando los comentarios de forma manual y poco a poco desde la sección de importación de la web de Disqus. No ha terminado de funcionar en ninguna ocasión la opción disponible en el panel de administración del blog que aparece cuando se usa el plugin.

Para hacerlo “poco a poco” o bien exportamos los contenidos en diferentes archivos secuenciales (contenidos de Enero 2008 a Febrero 2008, contenidos de Marzo 2008 a Abril 2009, etc.) o empleamos una utilidad llamada WXR File Splitter [en] que nos divide automáticamente en archivos fraccionados el xml que hayamos exportado con todos los contenidos.

Para darle un poco más de emoción al asunto, cada vez que subía un nuevo xml para empezar la importación, Disqus me lanzaba un bonito error, por lo que en ningún momento he estado seguro al 100% de que el proceso estuviera haciendo “algo”. Era cuestión de dejar un ojo pendiente del estado en que se encontraba todo:

disqus-01
¿Funcionará? ¿No funcionará?

Parece que de momento todo funciona bien y en teoría puedo plantearme desactivar más adelante plugins como Akismet o Subscribe to Comments Reloaded. Es una lástima que se pierdan los avatares de comentarios anteriores (Disqus ya no emplea Gravatar para las imágenes) pero el contenido en sí que es lo que de verdad me importaba más, se ha mantenido intacto. Estaré revisando durante unos días que todo funcione bien para decidir si me caso con Disqus o vuelvo al sistema nativo de comentarios. También le echaré un vistazo a eso de integrar Disqus sin necesidad de plugin [en] o probar el alternativo Disqus Conditional Load [en]. De momento sigo cruzando los dedos.

Kraken.io, lo mejorcito que he encontrado para optimizar las imágenes en WordPress

kraken-image-optimizer

Actualización Marzo 2015: parece que Yahoo ha dejado de ofrecer el servicio de optimización de imágenes de Smush.it. Razón de más para echarle un vistazo a Kraken 🙂

Comentaba el otro día en Facebook que me había rascado el bolsillo en un nuevo servicio y que hablaría de él más adelante. Y ya va tocando.

Se trata de Kraken [en], un potente optimizador de imágenes (con plugin de WordPress disponible) que reduce notablemente el peso de las mismas con el consiguiente ahorro de espacio en disco y ancho de banda consumido. Ha sido todo un descubrimiento, oigan.

¿Y qué hago usando yo algo así? Pues porque soy un “neuras” y un poco maniático en lo que se refiere a temas de optimización. Me gusta intentar tenerlo todo “limpito”.

Ya he publicado anteriormente algunos consejos para optimizar los cacharros peceros y también consejos para optimizar tu web pero se han quedado un poco rancietes con el paso de los años y toca ir actualizando las metodologías.

Mientras publico algo nuevo (sendas revisiones serán publicadas en algún momento entre mañana y 2020) quería destacar uno de los puntos con los que me peleaba últimamente: la optimización de imágenes. Porque la historia no tiene por qué acabarse en el “Salvar para Web” de Photoshop. De hecho NO debería acabarse con eso.

En The Starter Kit [en] hay unos cuantos recursos relacionados con la temática. No pueden faltar utilidades como TinyPNG [en] o JPEGmini [en] para reducir al máximo el peso de las imágenes que empleamos. Pero yo buscaba “algo” que enchufar a mi WordPress y que por un lado me automatizara el proceso y por otro me permitiera optimizar las chorromil imágenes que ya tenía alojadas. Y ahí es donde aparece Kraken.

kraken-sized

Pero antes de Kraken probé otras alternativas como WP Smush.it [en] (usa un servicio externo de Yahoo) y EWWW Image Optimizer [en] siendo éste último el más destacable. Smush.it sólo optimiza las imágenes que subes al servidor, no las que genera WordPress (la mayoría de los temas de WP modernos generan tamaños adicionales para mostrar en diferentes secciones) y EWWW me daba algún problemilla en la configuración. Otro problema añadido es que estos plugins consumen recursos del servidor que da gusto. Probablemente en entornos mucho más limitados que el que me ofrecen en CDmon podría tener algún problema de rendimiento.

Valoré la opción de toquetear un poco Grunt siguiendo lo comentado en el artículo Optimize PNG Files in the WordPress Uploads Folder with Grunt [en] pero tampoco quería liarme demasiado. Supongo que en un par de meses hubiera conseguido hacerlo funcionar 😛

Así pues terminé por probar Kraken como la alternativa más esperanzadora que me quedaba.

Kraken no deja de ser un servicio más de los que te ofrecen hacer menos pesadas tus imágenes. Como otros productos similares, tiene una versión free para optimizar imágenes de forma individual desde su interfaz web: Kraken Web Interface [en]. No obstante lo bueno te lo ofrecen cuando te conviertes en usuario de pago para tener acceso a su API.

El porqué terminé usándolo fue la disponibilidad de su plugin de WordPress [en], porque optimiza todas las versiones generadas de las imágenes subidas al servidor, usa recursos de sus propios servidores para los procesos de optimización y porque absolutamente todos los comentarios de sus usuarios son positivos a día de hoy. No podía estar tan mal.

kraken-image-optimizer-account

Llevo usando el servicio algo más de una semana en su modalidad “micro plan” y estoy encantado. Es muy rápido (obviamente en la subida de las imágenes hay un tiempo de espera mientras se regeneran las versiones optimizadas) y su uso es totalmente for dummies. Desde que lo instalé juraría que no he tocado nada más. Ha sido un buen descubrimiento y no podía perder la oportunidad de comentarlo. Ya sólo me queda decir…

Release the kraken!

Kraken [en]

Why Burying Sign Up Buttons Helps Get More Sign Ups

Me gusta mucho lo que cuenta la tropa de ZURB en su blog [en]. A veces sueltan freebies [en] bastante majos y otras veces escriben artículos breves sobre cosas concretas.

Es el caso de este Why Burying Sign Up Buttons Helps Get More Sign Ups donde nos hablan sobre la capacidad de atracción de un botón de “registrarse” (cambiadlo por “comprar” si queréis) en función de la manera en que se presente. Un detalle muy sutil pero que tiene gran impacto a la hora del éxito o fracaso de una idea.

Why Burying Sign Up Buttons Helps Get More Sign Ups [en]

Responsive Typography

responsive-typogaphy

Que el diseño web está cambiando en los últimos meses a una velocidad muchísimo mayor es innegable. El amplio abanico de sistemas que nos permiten visualizar contenido en la red, “obliga” a que nos vayamos preparando si no lo hemos hecho ya.

Me ha parecido interesante dejaros el enlace a un breve artículo sobre Responsive Typography para que nos demos cuenta que el diseño adaptado no es cuestión de meter cuatro hojas de estilo diferentes y acomodar el contenido y ale. Un buen diseño adaptado es un esfuerzo muchísimo mayor que requiere de más recursos.

With the chaos of different screen sizes and a new generation of web browsers, the design paradigms of layout and typography have shifted away from static layouts and system fonts to dynamic layouts and custom web fonts. Now, screens are changing not just in size, but also in pixel density. In other words: we do not just need responsive layouts, we also need responsive typefaces.

Responsive Typography [en] (y de regalo: Adaptive Images in HTML [en])

Actualizo este post tras unos añitos para añadir un par de recursos con mucha más actualidad e interés. Por un lado una librería javascript para trastear con la tipografía en diferentes entornos: FlowType (interesante también echar un vistazo a FitText)

Techniques for responsive web typograhy [en] también es un artículo que debemos guardarnos para revisar con calma si necesitamos entrar en profundidad en este asunto.

Bueno, y por supuesto en The Starter Kit tengo unos cuantos recursos extra sobre responsive design, claro 😀

Otra ronda de recursos de diseño de interfaz

Disfruto cuando puedo añadir cositas nuevas con las etiquetas de diseño de información o de diseño de interacción. Le dedico muchas horas al día a este tema y cada nuevo linkito que encuentro, paso a compartirlo para añadirlo a todos los anteriores.

Esta vez me he encontrado UI-Patterns [en] que no es que esté muy actualizada pero aún así es una buena fuente de información y ejemplos sobre patrones de diseño de interfaz y usabilidad.

Mobile UI Patterns [en] pues el propio nombre lo indica, ¿verdad? Estructuralmente un calco de UI Parade, presenta chorrocientos pantallazos de patrones de diseño para dispositivos móviles. Joyita!

Y por último Patternry [en], que es otro poquito más de lo mismo pero con el añadido de que en algunos ejemplos incluye el código HTML necesario para generar el diseño.

Qué aproveche!

CreateJS – librerías javascript para hacer un poquito de todo

Create JS

Aunque confieso que no sé determinar si son la mejor opción a día de hoy, me topé con CreateJS y me pareció un buen recurso a destacar para la creación de contenido interactivo y web apps mediante HTML5. De hecho hay unos vídeos en la web de Adobe mostrando la combinación de trabajo de su toolkit con esta suite JS.

CreateJS se compone de diferentes librerías especializadas para trabajar con efectos de movimiento o tweens, precarga, exportación de contenido en formato swf, etc… La verdad es que tiene buena pinta. Si alguno lo ha llegado a probar, agradecería que nos comentara la experiencia 🙂

CreateJS [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