Diseño web

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]

En Twitter sigo a unos cuantos forofos de Fireworks y eso me permite mantenerme al tanto día a día de las novedades más jugosas en relación al programa. Y últimamente parece pegar con fuerza la llegada de Specctr.

Specctr es un añadido para Fireworks que facilita enormemente la tarea de documentación del diseño. Generalmente en mi caso, no suelo meter la pezuña en el código en primera instancia ya que se encargan mis compañeros. Luego yo hago un repaso y vamos limando asperezas. Quizá con Specctr nos ahorraríamos tiempo de ese proceso final al permitirme a mí el poder mostrar muy rápidamente todas las propiedades de los objetos, los textos, distancias…

Es algo que podría hacer actualmente pero no de manera tan automatizada y eso es precisamente la ventaja de Specctr:

Lo voy a probar sin duda porque tiene muy buena pinta. Podéis solicitar una demo simplemente introduciendo los datos y así trastear con él durante dos semanas. A partir de ahí ya es cosa de cada uno valorar si merece la pena la inversión. Yo mañana lo comentaré en el estudio :)

Specctr, blueprints for the web [en]

Preguntaba hace no mucho en Twitter por alguna librería javascript para “tunear” elementos de formulario como los dropdowns. Hasta el momento ya conocía alguna como Uniform [en] pero no ofrecía el grado de personalización necesaria.

El bueno de Marcio Barrios sugirió una solución que a priori tiene muy buena pinta: DropKick. Este plugin jQuery permite modificar la apariencia al completo, con lo que el grado de “tuneo” es mayor que Uniform. Y como quizá alguno llegue a necesitar algo parecido, aquí va el linkito:

DropKick [en]

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]

El vídeo que podréis ver justo aquí arriba muestra la continua evolución que ha sufrido la página de entrada de 37signals [en] a lo largo de los últimos meses. Un buen ejemplo de cómo se va adaptando la estética y el contenido en función de las necesidades del momento o en base a intentar mejorar la captación. Se ven cambios totales, pequeñas realineaciones, cambios de claims…

Evolution of a homepage [vimeo] (Se lo vía a Jcorrea).

Para los que no uséis Fireworks o el programa de Balsamiq [en] por citar un par, quizá os interese Frame Box, una sencilla y pequeñita herramienta online para hacer prototipados rápidos.

Incluye los elementos estándar para hacer bocetos: botones, cajas de texto, separadores, carga de imágenes, checks, etc… una vez completado te lo guardas y el sistema te dará un enlace para que puedas compartirlo con quien necesites.

Frame Box [en]

El otro día estaba en el estudio buscando cosillas y llegué de casualidad hasta jQuery Masonry:

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Como una imagen vale más que mil palabras echadle un ojo a un ejemplo [en] y probad a redimensionar la ventana. Todo un recurso de gran utilidad que va para la saca. Y ojo con su creador, David DeSandro [en] porque tiene otros proyectos que también vale la pena explorar.

jQuery Mansonry [en]

A la Tabla comparativa de navegadores con soporte html5 y demás vengo a sumar esta otra tabla que acabo de encontrar y en la que se comparan los diferentes players de video actuales que podemos encontrar en la red y que podemos emplear en nuestros proyectos. Muy útil si no estamos muy puestos o dudamos de si el que estamos empleando es la mejor opción.

Tabla comparativa reproductores de video HTML5 [en]

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]

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]

Hace un tiempo estuve probando un nuevo servicio web que aparecía aquí como una pequeña barra en la zona superior (o un pequeño tirador con una flecha). El servicio se llamaba The Hello Bar y te permite crear notificaciones de una manera super sencilla y, lo más interesante, comprobar la efectividad del servicio mediante su sistema de tracking.

El servicio viene en diferentes sabores en función del pago mensual. La versión de prueba te deja emplear el sistema durante un par de semanas, tiempo más que suficiente para ver si te merece la pena emplearlo profesionalmente.

Si no recuerdo mal creo que se puede registrar cualquiera o al menos solicitar una invitación. Si os pica la curiosidad tengo unas cuantas invitaciones directas por lo que sólo tendréis que pedirlo :)

The Hello Bar [en]

Me pega el toque Antonio para comentarme que ha estado preparando en Cristalab un curso gratuito en nuestro idioma para que nos iniciemos en el mundo de las hojas de estilo en su tercera revisión.

Como estamos siempre acostumbrados a tirar de material en inglés pues seguro que más de uno agradecerá algo de chicha en el idioma de Cervantes. Está todo estructurado en diferentes capítulos y es información realmente valiosa para los que queráis empezar a toquetear un poco :)

Curso CSS3

Aunque ya lleva tiempo entre nosotros, el uso de font-face a nivel particular no lo he tocado demasiado.

Buscando información me encontré con una presentación de Jay Barry que explica muy bien todo este asunto y da una serie de consejos y trucos para su mejor implementación. Ahí os va.

Practical steps for using @font-face in your websites now [en]

Los chicos de Divine [en] siguen desarrollando su proyecto. Mucho tiempo ha pasado desde el primer post y me han escrito para que le eche un ojo al desarrollo actual de este añadido para Photoshop que te permite crear temas para Wordpress sin necesidad de picar código.

En el vídeo de demostración [youtube] (por cierto, la voz me recuerda a GLaDOS xD) parece dejar bastante claro que ahora Divine funciona como “puente” entre Photoshop y la exportación final del tema y que han pulido la interfaz y han añadido bastantes funcionalidades para que los temas tengan elementos actuales tales como galerías, tipografías no estándar, etc…

Divine ahora es de pago, pero ofrece una demo funcional durante 30 días para decidirnos si queremos hacernos con la herramienta a tiempo completo.

Divine [en]

CatsWhoCode no es una web de diseño sino que se enfoca claramente a la parte de desarrollo y código. La pongo porque la leo desde hace bastante y me parece bastante útil a pesar de que sea de esas webs que parece que sólo saben hacer recopilatorios…

Encontraréis artículos bastante potables (en función de vuestro conocimiento claro) como 10 super useful PHP snippets [en] o los chorrocientos que dedica a Wordpress.

CatsWhoCode [en]

Hace no mucho dejaba unos enlaces que nos ayudaban a crear animaciones con CSS y tenían muy buena pinta. Hoy me traigo gracias a un par de tweets de Pumpkin y Marcio Barrios, dos linkitos para juguetear con el uso de las propiedades de degradados mediante CSS.

Por un lado, desde Microsoft, CSS Gradient Background Maker [en] donde el nombre lo dice todo y por otro CSS gradients, please! [en] donde también hay pruebas interesantes como CSS3 Patterns [en].

Desde Ateneu Popular recojo esta particular utilidad web que bien podría hacer las delicias de más de uno. Coged el concepto del Lorem Ipsum y aplicadlo en imágenes.

La idea está bastante bien, yo conocía Ipsum Image [en] pero Pixum está mejor. Lo que pasa es que no sé yo hasta qué punto es útil en el día a día. Si es para colocar una imagen temporal, ¿no vale lo mismo una cualquiera que tengas o el típico rectángulo? Pero oigan, que la mención se la merece porque tiene su miga.

Lorem Pixum [en]

PD: Eso sí, si queréis maquetas de calidad, lo mejor que podéis usar es {placekitten} :3

Nano en Twitter colgaba un valioso recurso para los que sólo sabemos hacer la o con un canuto en términos de programación. Free jQuery & CSS templates tiene como título la web y ofrece descargas gratuitas de plantillas bastante resultonas, funcionalmente hablando. Que si una con el footer pegado siempre abajo, que si otra con la navegación siempre visible… Esas cosas que para los que ya estáis puestos os resultan super fáciles de hacer pero que pueden conseguir que especímenes como yo pidan ayuda a seres divinos. Por lo tanto, bienvenidos sean!

Free jQuery & CSS templates [en]

Aunque no soy de los que va poniendo enlaces a temas de Wordpress debido a la gran variedad que hay y que no se puede tener contento a todo el mundo, creo que este caso en concreto es realmente interesante y muy válido para tenerlo en cuenta.

Knowledgebase es un tema que se puede encontrar en WPBundle [en] y que me parece una elección realmente acertada si nos queremos montar, por ejemplo, un almacén de recursos y tenerlo todo bien organizadito. La verdad es que ha sido como un flechazo a primera vista con el tema en cuestión y se adapta muy bien a las necesidades que se me ocurrían en su momento para hacer precisamente una web de ese estilo.

Echadle un ojo a la demo a ver qué os parece. La pega es que actualmente no se puede comprar individualmente este tema y hay que hacerse con el pack completo que ofrecen. Aún así creo que la inversión merece la pena viendo todo lo que adquieres.

Knowledgebase [en] (Me lo enseñó RUDE)

Después de traerme en su momento Sencha Animator, hoy y gracias a Pumpkin descubro otro recurso similar que os puede ser de utilidad para facilitar la tarea de crear animaciones con CSS de la misma manera que son (creo) de muchísima ayuda las tweenlibrary en Flash. Echadle un ojo y trastead.

Ceaser, CSS Easing Animation Tool [en]