Optimizar la tipografía del blog

La tipografía es el elemento más importante de un blog basado en los contenidos. Así que un buen uso de la misma puede ser la diferencia, no sólo entre una estética bella o desagradable, sinó también entre una web legible o no.

Soy un maníaco de la tipografía, suelo cambiar las fuentes muy a menudo en mis blogs, buscando siempre el equilibrio entre belleza y funcionalidad. Creo que de momento he encontrado el equilibrio con la familia de tipografías Tisa Web Pro, que son las que uso aquí. Eso tras muchos experimentos y ajustes.

Porque implementar una tipografía concreta requiere probar muchas configuraciones, de tamaño, alto de línea, ancho del contenido, etc., hasta dar con la que nos gusta o encaja a la perfección.

Pero si no quieres perder mucho tiempo en ello hay una solución genial de la mano de Pearsonified. Se trata de la Calculadora de Proporción Aúrea para Tipografía, una herramienta que permite especificar una tamaño de fuente, un ancho de contenido o los caracteres por línea deseados, y nos calcula el resto de configuraciones automáticamente.

Por ejemplo, para un tamaño de 18px de la tipografía Helvetica Neue nos recomienda un alto de línea de 29px, un ancho de párrafo de 829px y 104 caracteres por línea.

golden ratio typography 2

Y la Proporción Aúrea para los elementos de título serían 47px para los de primer nivel, 29px para los de segundo nivel, y 23px para los de tercer nivel.

La herramienta permite seleccionar entre 15 de las tipografías más utilizadas, como Georgia, Arial, Verdana, o Tahoma. Para tipografías menos utilizadas, como la Tisa que uso aquí, habría que buscar analogías, en mi caso con la tipografía Georgia.

Adobe Kuler para iOS

Para mi, que no soy totalmente daltónico pero que sí tengo problemas con algunos colores determinados, una aplicación como Adobe Kuler es de gran ayuda. No ya para identificar correctamente los colores, pero sí para no cometer atrocidades a la hora de diseñar un theme de WordPress o de cambiar los colores del blog, etc.

adobe kuler

Adobe Kuler, que desde ayer se puede descargar gratis en la AppStore, me permite extraer combinaciones de colores, simplemente apuntando la cámara del iPhone a cualquier paisaje, escena, persona u objeto cuyo colorido llame mi atención. Con esos colores extraídos Kuler creará un tema que puedo guardar, compartir o utilizar en un diseño.

Además, al loguearme con mi ID de Adobe puedo sincronizarlo con la versión web, donde además puedo explorar temas creados por otros usuarios, marcarlos como favoritos o copiarlos a mi biblioteca.

Pero la aplicación iOS también permite crear temas de modo manual, seleccionando si quieres colores monocromáticos, complementarios, compuestos, sombreados o colores de tríada.

Desde la versión web también puedes descargar los temas para abrirlos luego con cualquiera de las aplicaciones de Adobe, como por ejemplo Photoshop.

La verdad es que salvo el desastre de Flash, Adobe está haciendo cosas muy interesantes en el campo del diseño. Otro de sus servicios que estoy usando es Typekit, para utilizar tipografías en mis blogs.

Adobe Kuler está disponible en la AppStore.

Logowski

In 24 hours you will receive an e-mail with a preview of your logo. You can buy your logo by paying Logowski via PayPal. The price is up to you. You get the logo files in all official formats

A veces las ideas más sencillas son las mejores. Logowski crea tu logo en 24 horas. Pagas lo que quieras pagar.

Naked WordPress: un theme comentado para saber que hace cada cosa

Esta es una idea genial. Joshua Beckman ha creado un theme básico llamado Naked WordPress en el que cada parte del código está comentada, indicando que hace cada función.

La utilidad de esto depende del grado de conocimiento que tengas de las tripas de WordPress. Para desarrolladores que no tengan tiempo o no quieran pararse a estudiar el Codex de WordPress es una auténtica navaja suiza.

Pero para los usuarios normales también es muy útil, por ejemplo cuando quieres hacer cambios en tu theme pero tienes miedo de estropear algo. Sabiendo lo que hace cada cosa en el theme será más sencillo.

La única pega que tiene es que está en inglés, pero si lo dominas medianamente no vas a tener problema.

Además también sirve como base para crear tu propio theme, porque viene con características como diseño sensible (para dispositivos móviles), menús, sidebars y widgets personalizados, comentarios, categorías, tags, etc.

Naked WordPress (zip 38Kb) se puede descargar gratuitamente, aunque también puedes realizar un donativo.

Themes de WordPress, GPL y rastreo oculto

Estos días se ha levantado una agria polémica entre la Fundación WordPress, que vela por el cumplimiento de la licencia GPL del software de WordPress, y el sitio de venta de themes Themeforest. El asunto viene porque en Themeforest licencian como GPL solo aquellas partes del código que son comunes con WordPress, mientras que el CSS, las imágenes y plugins creados por los desarrolladores, llevan una licencia privativa.

Sinceramente me parece una polémica estéril y absurda. Yo siempre he recomendado Themeforest como uno de los mejores sitios para comprar themes de WordPress originales, diferentes y de calidad a precios razonables. No veo el problema de licenciar aparte aquello que el desarrollador crea sin partir de una base con licencia GPL.

Lo que me preocupa más es que algunos desarrolladores han comenzado a utilizar un nuevo servicio que rastrea el uso de sus themes. Se llama Presstrends y funciona así:

El desarrollador se crea una cuenta en el servicio, da de alta sus themes y se le proporciona un código que debe incluir en el archivo functions.php de cada theme. Cuando un usuario se instala ese theme en su blog, inmediatamente el sistema lo localiza y avisa al desarrollador, que puede comprobar si el usuario tiene o no licencia para usarlo.

Hasta aquí nada que objetar. El problema viene cuando el usuario, que se compra el theme, no es advertido de que en el mismo va un código que rastrea su dominio. No se las implicaciones legales que esto puede tener, pero me parece una práctica bastante fea.

[ Esta entrada se publicó por primera vez el 24 de enero de 2013 en el Número #2 de nuestra Newsletter. Si quieres recibirla en tu correo de forma gratuita suscríbete! ]

Recargar la página igual que en iOS con Hook: cómo instalarlo en tu blog

Una de las novedades más útiles que trajo consigo iOS fue la acción de arrastrar hacia abajo y soltar para actualizar una aplicación, un timeline o una página web. Si no recuerdo mal la primera vez que vi esa función fue en el ya desaparecido Tweetie, el primer cliente decente de Twitter para el iPhone, que al final el propio Twitter terminó comprando y destrozando.

Pues ese sencillo gesto de arrastrar hacia abajo y soltar para actualizar ya podemos tenerlo también en nuestra página web o blog con Hook. Se trata de un script desarrollado por Jordan Singer y Brandon Jacoby que podemos descargar gratuitamente (al pie tenéis el enlace).

Cómo instalar Hook en tu blog

Instalarlo es muy sencillo. Una vez descargado debemos colocarlo en una carpeta llamada hook dentro del theme de WordPress que estemos usando.

Luego editamos el archivo header.php de nuestro theme y justo antes de la etiqueta </head> colocamos este código:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

Después localizamos la etiqueta <body> y justo a continuación de la misma insertamos este código:

<div id="hook">
<div id="loader">
<div class="spinner"></div>
</div>
<span id="hook-text">Reloading...</span>
</div>

Y listo, tras guardar el archivo header.php ya sólo nos queda acceder a nuestro blog en el navegador y comprobar que funciona (es posible que debas refrescar la cache).

Descarga: Hook.js

Tendencias en diseño de blogs

En los últimos meses algo está pasando en la blogosfera internacional. Comenzó en muchos blogs personales norteamericanos y británicos, y ya se está extendiendo a las grandes redes de blogs. En realidad se trata de dos corrientes contrapuestas.

Gizmodo

Por un lado tenemos la corriente minimalista y purista, que prescinde de todo lo accesorio y vuelve a recuperar el papel principal de los textos. Los posts ahora ocupan prácticamente todo el espacio del diseño, reduciendo incluso la publicidad en favor de la experiencia lectora. Los formatos varían de un blog a otro, pero esencialmente se mantiene el clásico esquema blog, sin slides ni elementos que distraigan.

Algunos ejemplos (no necesariamente los primeros en sumarse a la tendencia ni los inventores) de esto serían The Brooks Review, Obvio de Manu Contreras, la versión española de Gizmodo, o más recientemente Blogpocket y Mangas Verdes. Yo mismo vengo experimentando con el modelo desde octubre del año pasado, aplicándolo en todos mis blogs.

Es cierto que existen muchos blogs que siempre han contado con diseños de este tipo. La diferencia es que ha llegado un momento en que muchos bloggers, cansados de la creciente complejidad de WordPress, hemos optado por regresar a lo simple. No se trata de una decisión basada solo en lo estético, sino también en la optimización de sitios con relativa carga de servidor y base de datos, que necesitan aligerar sus requisitos técnicos.

Está tendencia se puede observar también en la creciente proliferación de themes de este estilo, llamémoslo minimalista o purista. También en la aparición de herramientas como Twitter Bootstrap o Kirby, que abogan por un retorno a los orígenes, al háztelo tu mismo y la importancia de la tipografía como elemento principal de una web.

Mashable

Y como decía, también existe la tendencia contraria, que predica que la suma de elementos da mayor consistencia al resultado final. Los blogs que siguen esta tendencia suelen contar con diseños tipo magazine, algunos realmente originales y efectivos. Estos blogs suelen ser una amalgama de colores, tipografías y espacios de diferente forma y tamaño estructurados de manera cuasi arquitectónica.

En general suelen pertenecer a grandes redes de blogs comerciales, aquellas que pueden permitirse el coste de sobrecargar su servidor con toda clase de plugins, añadidos y funciones sociales.

Buenos ejemplos serían los actuales diseños de Mashable, The Verge, o el más reciente y excelente rediseño de Alt1040 (salvo por una tipografía poco legible para mi gusto en los posts).

La adscripción a una u otra tendencia depende del gusto de cada bloguer y de los recursos que tenga a su disposición, pero también de los principios que quiera transmitir en relación con el acto de comunicar, vender o crear opinión.

Usando Font Awesome More

Desde hace unos días comencé a usar en este blog la fuente tipográfica Font Awesome, que es una fuente de iconos mediante la que se pueden insertar algunos iconos sociales y símbolos en lugar de imágenes, con lo que la página es más ligera. Pueden ver el resultado al pie de este post, donde aparecen los iconos de Twitter, Facebook y Google Plus. No se trata de imágenes, como digo, sino de tipografía que se puede estilizar mediante css.

Buscando la manera de utilizar Font Awesome para incluir más iconos me encuentro la agradable sorporesa de que Guillermo Latorre había escrito hace algunas semanas un post al respecto, anunciando además la disponibilidad de Font Awesome More, que es la evolución de la otra.

Así que me la he descargado y he sustituido los archivos de la fuente antigua por la nueva versión, y ya estoy pensando en usarla para mis otros blogs. Las ventajas, como digo, son que al ser tipografías no cargan tanto la página como si fueran imágenes, y que existen iconos disponibles para prácticamente todas las redes sociales. Incluso el icono del enlace que pueden ver en las minientradas de este blog usa esa tipografía. Las posibilidades son muchas y sorprendentes.

Les remito al post de Guillermo Latorre en Hachemuda: Font Awesome 2.0: colección de iconos para la web en forma de tipo de letra, donde explica perfectamente cómo usar la fuente tipográfica.

Simplemente les comparto la manera en que la he implementado en este blog, y que consiste en los siguientes pasos:

1. Descargar la fuente Font Awesome More de la web oficial.

2. Subir los archivos a la carpeta del theme de WordPress que estoy usando.

3. Editar el archivo style.css del theme y añadir las siguientes líneas:

@font-face {
font-family: "FontAwesome";
src: url('includes/fonts/fontawesome/fontawesome-webfont.eot');
src: url('includes/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'),
url('includes/fonts/fontawesome/fontawesome-webfont.woff') format('woff'),
url('includes/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
url('includes/fonts/fontawesome/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}

Teniendo en cuenta que debes sustituir la ruta includes/fonts/fontawesome/ por aquella en la que hayas colocado los archivos de la fuente.

4. Insertar los iconos en el theme. Para ello, allí donde quieras que aparezcan debes insertar el siguiente código:

<i class="icon-twitter"></i>

En este ejemplo insertaríamos un icono de Twitter. Para ver todos los disponibles podemos consultar el listado de la web oficial: All Icons. Y debemos tener siempre en cuenta que al ser una fuente tipográfica tendrá por defecto el mismo tamaño y atributos que el texto, a menos que le apliquemos reglas css diferentes.