A partir de un wizard paso a paso podemos obtener una tabla para utilizar en nuestros proyectos. Además, se puede guardar el resultado y compartirlo en las redes sociales.

via Compare Ninja | HTML & CSS Comparison tables.

enlace: WhatFont Tool, the easiest way to inspect fonts in webpages.

Los valores de cada uno de los colores también se pueden copiar y pasar a un editor de textos desde el que pueden exportarse, por ejemplo, en forma de paleta para Gimp/Inkscape.

Si de lo que se trata es de extraer colores de una imagen, hay muchas posibilidades distintas. También dentro del navegador, se puede utilizar una extensión en Chrome (Chrome Palette) que funciona así de bien:

Si necesitas un programa parecido para Windows, puedes utilizar SQLite database browser, que es portable y también gratuito:

Si necesitas una herramienta más profesional para cualquier tarea relacionada con bases de datos MySQL, MySQL workbench es una herramienta mucho más completa, pero también compleja, disponible tanto para Windows como Linux y Mac OS X.

Te ofrece un entorno visual para experimental para jugar con las propiedades css siguientes: font-family, font-size, color, espaciado entre letras, palabras espaciado, font-style, font-weight, text-decoration, text-align, z-index, línea de altura, anchura, altura, la opacidad, moz / webkit-transform, text-shadow y tipo de letra.

Con TypeFolly puedes crear, guardar y exportar (css + html) tus proyectos de diseño.

Hemos introducido algunos cambios en la plantilla de este blog. Llevábamos casi desde el principio con el mismo tema, con pequeñas modificaciones y retoques de vez en cuando. Ahora,  aprovechando la función de child themes que tiene WordPress hemos aplicado una plantilla nueva, más visual y atractiva. Con esta plantilla, los artículos más recientes van acompañados de una imagen representativa que hace la navegación más atractiva en dispositivos como el iPad.

Google Chrome cuenta ya con un sinfín de extensiones que te permiten ser más productivo con tu navegador, y añadirle funciones que te ahorran mucho tiempo y esfuerzo. Existen muchas listas de extensiones recomendadas para diseñadores web y desarrolladores. Estas son las extensiones que yo mismo utilizo, y que recomiendo sin dudar:

Diigo Web Highlighter and Bookmark - Version: 1.6.0.2 Marcador social con muchos extras. Se sincroniza automáticamente con del.icio.us y muchas otras funciones avanzadas. ID: oojbgadfejifecebmdnhhkbhdjaphole

Feedly - Version: 2.16.295 Feedly organiza tus fuentes de noticias preferidas (sumarios rss) de Google Reader y Twitter y los presenta en forma de tu magazine personal. ID: ndhinffkekpekljifjkkkkkhopnjodja

Firebug Lite for Google Chrome - Version: 1.3.0.6879 Una extensión imprescindible para el desarrollador web. ID: bmagokdooijbeehmkpknfglimnifench

Helvetical – Google Calendar User Style - Version: 1.0 Estilo de usuario para Google Calendar basado en Helvetireader de Jon Hicks: un look simple y minimalista, elegante, para tu calendario. ID: bmhkoejlafocjmpphogllclaalhkmggp

Pendule - Version: 0.0.10 Web developer tools for Chrome. ID: gbkffbkamcejhkcaocmkdeiiccpmjfdi

Screen Capture (by Google) - Version: 0.1.7 Captura regiones, pantalla completa o páginas enteras. ID: cpngackimfmofbokmjmljamhdncknpmg

Simplenote - Version: 1.2.0 Accede cómodamente a tus notas guardadas y sincronizadas con Simplenote ID: bbgfniloleokgjiegikjpbjifiodmeba

View Page as Text - Version: 1.3 Muestra la página como texto simple (con W3.org html2txt tool (similar a Lynx). ID: gcaebagnkmkgakplgkojolncgppamlfo

Web Developer - Version: 0.3.1 Otra extensión para desarrollo web, un poco redundante si tienes Pendule, pero con sus propias herramientas. ID: bfbameneiokkgbdmiekhjnmfkcnldhhm

All Mangas Reader – Version: 1.1.1 Para estar al día con las actualizaciones de manga en diversos sitios (Manga Fox, Bleach Exile, MangaStream, …). ID: gcamgngbdaiibdbikdfmjinnmgoppecp

Colorsuckr tiene algunos detalles que vale la pena destacar:

• Puedes arrastrar y soltar los colores obtenidos en la página para reordenarlos, o ocultar uno o más de los colores.
• También puedes entrar directamente una página web completa a partir de su url (por ejemplo http://vectoralia.com/) para que  ColorSuckr analize las imágenes presentes y te muesrtre una lista para elegir.
• Está disponible como Bookmarklet: basta arrastrar este enlace a la barra de favoritos de tu navegador y podrás activar Colorsuckr al momento con solo hacer clic en este marcador.
• También dispone de una extensión para Firefox que simplifica aún más el proceso: nada de copiar y pegar enlaces. La extensión, por ejemplo, añade una opción al menú contextual para las imágenes que permite extraer los colores de la imagen con solo hacer clic con el botón derecho sobre ella y elegir esa opción.
• Aún mejor, los resultados están conectados a la comunidad de Colour Lovers, de manera que obtienes instantáneamente paletas de colores relacionadas con cada uno de los colores extraídos de la imagen. La información de cada color aparece en los formatos hexadecimal y rgb, además del color web safe correspondiente. El servicio también permite la exportación de la paleta generada al formato ACE de Photoshop.

Así, puedes ver galerías específicas de sitios con formularios bien resueltos, con cabeceras impactantes, etc. Así, hasta un total de 45 colecciones temáticas, cada una de las cuales cuenta con decenas de ejemplos.

• WordPress (plataforma de publicación de blogs y sitios web)
• Bbpress, para comunidades online.
• Chyrp (gestor de blogs simplificado)
• Drupal (sistema de gestión de portales)
• Joomla (sistema de gestión de portales)
• phpBB, sistema de comunidades online.
• prestaShop (solución de ecommerce)
• Symphony
• Vanilla

Se sube el script descargado de Instant Install al servidor, se ejecuta en el navegador, siguiendo las instrucciones en pantalla, y listo. Lo único que hace falta es, por supuesto, tomar nota de nombres de usuario y contraseña.

Su diseño, en forma de retícula que se adapta al ancho de la pantalla, tiene un impacto visual inmediato y da todo el protagonismo a las imágenes.

El resto de themes ofrecidos por este desarrollador están muy bien. Unos son gratuitos: Workaholic, Fullscreen, F8 static y F8 lite, Modularity lite, otros comerciales:

Esta es una vista más detallada de un blog con el tema Fullscreen:

Siempre es interesante descubrir técnicas nuevas para generar galerías de imágenes atractivas. Por ejemplo, me encanta este artículo que muestra cómo es posible crear una galería de imágenes con efecto polaroid, utilizando exclusivamente código CSS (CSS3). Magnífica idea. Todos los detalles en ZURB Playground

ImageOptim es una especie de navaja suiza de la optimización de imágenes en Mac OS X. La optimización es importante para ganar un poco de tiempo extra en la carga de las imágenes en las páginas web y ahorrar espacio en los archivos, algo que es crucial en aplicaciones para telefonía móvil. Esta utilidad elimina información innecesaria y recalcula los parámetros que permiten comprimir el archivo de mapa de bits. A diferencia de otras utilidades, ImageOptim se encarga, por sí solo, de PNG, JPEG y GIF. Rápido, ligero y conveniente. Incluso reduce el tamaño de lo que supuestamente Photoshop ha guardado para la web.

De hecho, lo que viene a hacer ImageOptim es proporcionar una GUI para herramientas como: AdvPNG (de AdvanceCOMP),OptiPNG, PngCrush, JpegOptim, jpegtran de libjpeg, Gifsicle y, opcionalmente,  PNGOUT (por motivos de licencia éste se descarga separadamente y se le debe indicar a ImageOptim cuál es su localización.)

Para más conveniencia, además proporcionan un añadido para el menú contextual de Mac OS X, para poder enviar cualquier imagen a la rutina de optimización con solo hacer clic con el botón derecho sobre ella.

ImageOptim está disponible en diferentes idiomas; pronto habrá una versión en español.

Un servicio similar es Fontdeck, donde puedes elegir también por diseñador, estilo o fundición tipográfica:

WebInk es el servicio de tipografías para la web de Symantec, desarrollador de Suitcase y otras aplicaciones de gestión de tipografías y recursos digitales.

Esta tecnología se está implantando a gran velocidad y sin duda aparecerá algún otro servicio en los próximos meses. Es un mercado en cambio muy rápido y habrá que seguirle la pista, por ejemplo a través del portal webfonts.info.

No olvidemos que también podemos experimentar con algunas tipografías para la web de forma completamente gratuita, por ejemplo con la utilidad que nos proporciona Font Squirrel, comentado aquí anteriormente.

Para comparar visualmente las características de las opciones existentes, viene muy bien la tabla comparativa que pone a nuestra disposición Sylvia Egger, de Sprungmarker:

En Smashing Magazine también han publicado también un artículo en que revisan los diferentes servicios existentes: una comparativa muy completa con los precios, planes de facturación, pros y contras, selección de tipografías en oferta… resumido en esta comparativa:

Hasta un total de 48 ejemplos que destacan por el uso imaginativo de las retículas y combinan bien la funcionalidad y el atractivo para el visitante. Por lo general me gustan mucho las cuadrículas con imágenes diversas, sea con mucho colorido o bien algo más sobrio. Creo que tienen un punto de enigma y de juego que resulta irresistible.

La actualización de la versión anterior (2.71) a esta me llevó un solo clic. Sin ningún problema y directamente desde el propio dashboard de WordPress. ¡Cómo se han ido facilitando todas las operaciones, versión tras versión!

Puedes estar al día de todo lo que se publica sobre WordPress, sean themes, plugins, trucos, soluciones y hacks en algunos blogs sobre WordPress que sigo.

Una muestra de cómo utilizar el panel en ambas utilidades:

Screencast: Making a Lifestream with Sweetcron (de Alex Denning en Vimeo.)

AmpliFeeder User Manual (de Jon Paul Davies en Vimeo.)

Hasta que solucionen este irritante problema, lo más fácil es desactivar Gears para tu blog en WordPress. Encontrarás una larga discusión sobre este fallo aquí y aquí.