PHPSpeedy: mejora el tiempo de carga de tu sitio

PHP Speedy Hay muchas formas de mejorar el tiempo de carga de una página; algunas de ellas son:

  • realizar menos peticiones al servidor
  • agregar una cabecera de expiración muy lejana en el futuro
  • comprimir los componentes de la página
  • “minificar” tu javascript, css, html

PHP Speedy es un script para PHP que realiza estas cuatro tareas automáticamente. Está disponible como clase (para utilizar en cualquier sitio/página que soporte PHP) o como plugin para WordPress —he estado probando este último en mi tumblelog y el resultado ha sido bastante satisfactorio.

Si quieres utilizar el plugin para WordPress, debes asegurarte que tu theme incluya el hook <?php wp_head(); ?> antes de </head>. Además, revisa que todo lo que tenga que ver con JavaScript siga funcionando: el plugin combinará y “minificará” tus scripts y los enlazará en el punto donde se encuentre <?php wp_head(); ?>. Si tienes código que necesita de librerías que se hayan invocado anteriormente, puedes solucionarlo simplemente moviendo tu código más abajo de <?php wp_head(); ?>.

Usufructo y atribución

Hoy, en un ejercicio que no suelo hacer, me puse a ver los titulares del sitio de la Tercera —no suelo hacerlo porque odio el “papel digital” (la carga de contenidos es infinita), no logro encontrar las notas de ediciones pasadas, no tiene buscador interno, no publican los contenidos completos en el RSS, etc. En fin…

La cuestión es que, dado que hace relativamente poco rediseñaron el sitio, me preguntaba si habrían utilizado algún framework CSS. así que me puse a ver el código… y a pesar de que no había ningún señalamiento, en la hoja llamada neutralizacion.css me encontré con una frase que me parecía conocida: /* remember to define focus styles! */, que tras un rápido googleo, pude situar en el Reset Reloaded de Eric Meyer. La hoja contenía lo siguiente:

/*Neutralizacion*/

/* { margin: 0; padding: 0; }
body { background: url("grilla.gif"); font-family: 'Trebuchet MS', Arial, sans-serif; line-height: 1; }*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
/* remember to define focus styles! */
:focus {
	outline: 0;
}

a { text-decoration: none; }

ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Continue reading “Usufructo y atribución”

Incrustar imágenes en hojas de estilo

Un artículo dedicado a las URL de datos en hojas de estilo: cómo incrustar una imagen, cuándo y sus desventajas.

A pesar de que no es una técnica muy ampliamente utilizada, la capacidad de poder insertar imágenes directamente en una hoja de estilo es una alternativa que en ocasiones bien podría estar no solamente justificada, sino derechamente preferida por sobre la típica referencia mediante una URL

Aclaro de qué estoy hablando: cuando vamos a aplicar una imagen de fondo a algún elemento mediante CSS, generalmente lo hacemos de esta forma

.lorem-ipsum{
	background-image: url(http://servidor.com/ruta/a/imagen.jpg);
}

Al “incrustar” una imagen, lo haríamos de este modo:

.lorem-ipsum{ 
	background-image: 
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAAVCAMAAABlsmI+A 
AAAA3NCSVQICAjb4U/gAAAAS1BMVEX////////29vbv7+/m5ubf39/W1tbMzMzExMS9vb61t 
bWtra2lpaWZmZmVlZWLi4uEhIR7e3tycnJra2tgYGBaWlpTU1NJSUlEREQYZf5IAAAAGXRST 
lMA////////////////////////////////MFNJ3QAAAAlwSFlzAAALEgAACxIB0t1+/AAAA 
BV0RVh0Q3JlYXRpb24gVGltZQA1LzEwLzA2n1SBaAAAABx0RVh0U29mdHdhcmUAQWRvYmUgR 
mlyZXdvcmtzIENTM5jWRgMAAAQRdEVYdFhNTDpjb20uYWRvYmUueG1wADw/eHBhY2tldCBiZ 
Wdpbj0iICAgIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEge 
G1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDQuMS1jM 
DM0IDQ2LjI3Mjk3NiwgU2F0IEphbiAyNyAyMDA3IDIyOjExOjQxICAgICAgICAiPgogICA8c 
mRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5b 
nRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgI 
CAgICB4bWxuczp4YXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgI 
CA8eGFwOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzM8L3hhcDpDcmVhdG9yVG9vb 
D4KICAgICAgICAgPHhhcDpDcmVhdGVEYXRlPjIwMDctMDktMDhUMjI6Mzg6MzhaPC94YXA6Q 
3JlYXRlRGF0ZT4KICAgICAgICAgPHhhcDpNb2RpZnlEYXRlPjIwMDctMDktMDhUMjI6NDg6M 
zRaPC94YXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZ 
GY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwO 
i8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ 
2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSR 
EY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI 
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgII5AjlkAAAEsSURBVFiF3 
ZfRDsIgDEVZKWV0sIGT2f//UgtG/QJj0vNCeOvJ5Wadc5NU6mmPWy3svqS97TnZg/PejvS23 
I6cKHh7YKCU6/a2ZPIAi0EAPPExPdc9BVyPu9z3+O+xfgCEtI93Wzggdxl0/vdQPwACFw2zE 
KxdGgdu0k3mSSW5LeFySMPR2CaHxYpiyi4TLF3S0IMk3aImkGoGWERw3lHE/3mkXwAhu00NN 
c151zQtai64OVbNKnU+Wj1tavLU5EvqCmuVB1vs5tBM2k0s1/xuPh43i2nqhuBiBD231qW3f 
F43g3FCXHU/QABAijFSoPNq5jwB1VLj9HPH9X7YGvT0MY7dPdKnkLrQn5cxTU/x9SemnsbUv 
sDH0jmKwaSoVjHEj+UQJUJ7EEV6+T0B4Yo20scg/HAAAAAASUVORK5CYII="); 
}

Probablemente éste sea el momento en el que muchos digan ¡¿qué?!… pues bien, el objetivo de esta técnica es insertar directamente toda la información de una imagen en la misma hoja de estilo.

¿Cómo incrustar una imagen en una hoja de estilo?

Si se fijan en el código anterior, hay cuatro partes fundamentales: en primer lugar, la referencia a la imagen parte como todas: url(, pero después de eso viene lo importante:

  1. El tipo de URL no es http://, sino data:
  2. En segundo lugar, debemos indicar el tipo de contenido o mime type, en este caso, image/png para una imagen en formato PNG
  3. Tercero: cómo está codificada la información… claro, no se trata de abrir la imagen con el bloc de notas y pegar en binario… no, no, no. En este caso, se ha utilizado base64… la verdad es que no tengo ni idea si habrán otras codificaciones compatibles
  4. Finalmente, la información de la imagen, codificada; para codificar un archivo en base64 pueden hacerlo a través de este codificador/decodificador Base64 Online. Como resultado, tendrán el mismo archivo que subieron pero representado de otra forma, pero codificado en [base64->@wiki]

¿Para qué incrutar una imagen en una hoja de estilo?

Como ponía al principio, esta no es una práctica muy generalizada, pero en ocasiones podría ser bastante recomendable, como cuando el acceso a las imágenes se podría ser limitado o sea necesario distribuir solamente un archivo auto-contenido —es el caso del tema para Google Reader desarrollado por Jon Hicks (de donde saqué la imagen del ejemplo), o algunos de los estilos de userstyles.org.

Otra posibilidad es que sea necesario reducir la cantidad de peticiones HTTP al servidor, o en situaciones en que el tamaño de las imágenes es tan reducido que la demora en hacer las peticiones podría efectivamente reducirse al incrustar las imágenes en el código.

Desventajas

A pesar de ser una buena alternativa en ciertas situaciones, este método tiene ciertas desventajas que debemos analizar antes de aplicarlo:

  • Nuestro navegador preferido, MSIE 6, no tiene soporte para url("data:… lógico, ¿acaso alguien esperaba otra cosa? Ante esto, una buena solución podría ser servir las imágenes en hojas de estilos separadas de la principal (lo que de todos modos siempre es una buena idea), y mediante comentarios condicionales determinar qué navegador recibe qué hoja, es decir:
    1. Tener una hoja “normal” con todos tus estilos, menos los estilos que reemplazarás por imágenes incrustadas
    2. Una hoja con las imágenes incrustadas, para Firefox, Opera, Safari, etc.
    3. Una hoja con los estilos de las imágenes incrustadas referenciadas con el método tradicional background:url(ruta/imagen.jpg); para Explorer
  • El tamaño de las imágenes aumenta en alrededor de un tercio (multiplica el tamaño por 4/3)
  • A menos que combines y planees inteligentemente tus selectores, si utilizas una imagen más de una vez tendrías que declararla todas las veces que sea necesario… por eso es mejor ser inteligente y planificar 😛

Y para terminar… Dean Edwards afronta el problema de la falta de soporte para Base64 en Explorer en dos artículos que no está demás reseñar:

Y aclaro (antes que alguien me lo indique en los comentarios) que esta técnica en realidad parte en HTML, y todo a lo que me he referido como “incrustar imágenes” pueden encontrarlo en inglés buscando por data URL, como en Using Data URLs Effectively with Cascading Style Sheets.

¿Cómo aprendiste (X)HTML?

Si no me hubiesen preguntado, no me daba cuenta: hace algo así como diez años que he construí mi primer sitio web, y desde entonces no me he detenido… seguramente hay formas más fáciles de aprender

Durante la semana pasada, un amigo me comentaba sobre sus primeros pasos para aprender algo de HTML, y con ello vino la inevitable pregunta… ¿y tú cómo aprendiste?, y que debido al poco tiempo que tuvimos para seguir conversando, quedó inconclusa.

Ahora, haciendo memoria y sin tratar de latear a nadie, creo que en verdad se me haría imposible identificar de dónde he aprendido sobre HTML, y mucho menos sobre CSS y PHP, porque en verdad creo que mi única forma de aprender ha sido simplemente haciendo. Seguro, aquellos manuales que hace mil años en la entonces revista(-impresa) Mouse fueron una excelente base, en tiempos en que (si la memoria no me falla) lo más nuevo era HTML 3.2 y [Netscape Navigator->@wiki] aún era el rey del mercado.

Y desde entonces (por allá en 1996/97) que nunca paré… mi primer sitio “importante” fue un directorio de enlaces a los sitios de bandas de heavy/speed/power/black metal, todo hecho con Bloc de notas… ¡se imaginarán lo fácil que era mantener ese sitio! ¡Sin siquiera utilizar CSS, tenía que definir los estilos de cada bloque de texto cada vez! Según Wikipedia, recién en 1999 se publicó el primer navegador con un real soporte de [CSS->@en.wiki], es decir, mayor del 99%… irónicamente, este era MSIE 5 para Mac.

Pero bueno, antes de desviarme… después de ello, vino mi sitio de Pink Floyd que después terminó en la desaparecida Ciudad Futura, y luego, para hacerle compañía, uno de Rolling Stones, era el tiempo de la burbuja .com (la primera, quiero decir), y como era lógico, cuando reventó, me quedé sin host.

Prácticamente todo el resto de la historia está en este blog: lo pueden ver en el primer post, Buscando un espacio para yukei y la muerte del free hosting. Entonces, llegué a Blogger y luego NucleusCMS, Movable Type y finalmente (al parecer, a principios del 2004), WordPress

Y eso ha sido más o menos cómo he aprendido… haciendo… 1997… eso es como un millón de años en tiempo de internet.

Ahora, para terminar y, ojalá, dejar algo un poco más útil que solo decir “se aprende haciendo” (sobre todo considerando que hoy hay muchos más medios para aprender mejor y más rápido), en primer lugar dejo tres enlaces que bien pueden servir para comenzar:

Y con ello, tiro la pelota para quien la quiera tomar: como comentario, meme o como se te ocurra; puedes partir con solo dos preguntas:

  1. ¿Cómo aprendiste (X)HTML?
  2. ¿Qué recursos recomendarías a alguien que quiera aprender?

Inspiración: diseños de tumblelogs

He estado trabajando en algunas ideas para rediseñar mi tumblelog, y como siempre, antes de lanzarme de lleno, he querido darme algunas vueltas para observar otros diseños de tumblelogs (lógicamente, distintos a los que están disponibles en Tumblr).

Así que, veamos qué es posible encontrar…

Continue reading “Inspiración: diseños de tumblelogs”

YUI y otros Frameworks CSS

Yahoo! ha creado un potente conjunto de herramientas para el desarrollo web que ha puesto a disposición de todos, y dentro de ella un grupo de hojas de estilo que podrían facilitarnos más de algún asunto en nuestros proyectos.

De a poco las nuevas herramientas que Yahoo ha puesto a disposición de quienes desarrollamos proyectos para el web han comenzado a ganar popularidad; esta colección conocida como Yahoo! User Interface Library consta de un montón de herramientas JavaScript y —lo que más me interesa y quisiera comentar acá— una serie de herramientas CSS que podrían ayudarnos a facilitar nuestra vida.

Como quizás sabran, la idea de un framework CSS no es nueva, y de hecho podríamos encontrar uno de los primeros intentos en los hojas diseñadas para “resetear” los estilos predeterminados que los distintos navegadores aplican a cada uno de los elementos de una página. La cuestión es la siguiente: esos estilos predeterminados no son iguales en todos los navegadores, por lo que la solución sería “emparejar hacia abajo”, “limpiando” todos los estilos para luego volver a declararlos mediante tu propia hoja de estilos —es lo que hace Eric Meyer con Reset Reloaded.

Otros han llevado esta idea más lejos, y además de resetear los estilos, proponen una base para conseguir un estilo consistente, como es el caso de Tripoli; o crean un verdadero meta-lenguaje con el que conseguir rápidos y consistentes resultados, como es el propósito de Blueprint —a veces, al costo de disminuir [la semántica de las clases->Semántica en clases e ids] utilizadas en el código.

YUI hace todo esto y algo más. Se compone (hasta el momento) de cuatro herramientas:

YUI Reset CSS
Básicamente, remueve las inconsistencias de los estilos aplicados por los navegadores. Es distinto a lo propuesto por Meyer, pero sigue la misma idea.
YUI Fonts CSS
Una hoja para normalizar y controlar la presentaciónde tipografías
YUI Grids CSS
Similar a Blueprint, sirve para crear una grilla basada en CSS utilizando las clases adecuadas definidas en esta hoja.
YUI Base CSS
Complementa a las anteriores aplicando un conjunto consistente de estilos a los elementos HTML

¿En qué se diferencia YUI de los demás Frameworks CSS?

En lo personal, creo que tiene algunas ventajas que lo convierten en una alternativa bastante atractiva:

  • En primer lugar, está creado y respaldado por un gran equipo de desarrollo —esto que no quiere decir que los proyectos comunitarios valgan menos, pero es razonable pensar que un grupo de personas dedicadas a esto, trabajando en una de las empresas líderes del rubro, que seguramente cuenta con medios adecuados para experimentar y probar sus desarrollos y es puesto constantemente bajo exigencia debería realizar un trabajo bastante decente, ¿no?
  • El que hayan creado el concepto de soporte graduado para navegadores, enfocado a una perspectiva de mejoramiento progresivo más que degradación grácil y que se concentren en hacer funcionar a la perfección sus productos en un conjunto de navegadores que en la práctica abarca la gran mayoría de usuarios… me parece un acercamiento bastante cuerdo.
  • Que sea posible servir los archivos desde sus propia red de servidores, lo que si bien probablemente no significará una disminución muy grande de tu consumo de ancho de banda, tiene la cualidad de estar respaldado por una red de distribución de contenidos global.
  • Tienen una cheatsheet (enlace a PDF) bastante útil; junto con una documentación en lo general bastante clara y minuciosa.

4 años

…y llegamos a los cuatro años con traje nuevo (o casi-casi-nuevo)

yukei.net + Perestroika Realigned

Como también me pasó el año pasado, me había olvidado del “cumpleaños” de este blog hasta que revisando los archivos descubro que la primera entrada está fechada hace más de cuatro años. Claro, entonces todavía no era yukei.net sino solamente yukei, ya que solamente en Julio del 2005 (cerca del segundo cumpleaños) me hice del nombre de dominio y el alojamiento en DreamHost que hasta hoy mantengo.

Coincidiendo con este aniversario, he aprovechado de cambiar (una vez más) algunos elementos del diseño del blog; en este caso se trata de una real realineación, puesto que he realizado todo el trabajo sobre la base de [Perestroika->], el theme que estrené en Febrero de este año.

Los cambios principales:

Ancho fijo
si no me falla la memoria, siempre he desarrollado mis diseños en medidas relativas (“fluídas”, en porcentajes) o elásticas (en ems)… ahora es tiempo de probar algo distinto, la idea es lograr algo más ajustado a una cuadrícula, aunque para ello no es necesario ocupar medidas fijas. Quizás más adelante transforme nuevamente el diseño a medidas relativas, como cuando aprenda a controlar las expressions de MSIE para limitar el ancho máximo.
Cambio en las letritas
tipografías, fuentes, typeface o como quieran llamarle, de Arial a [Calibri->Fuentes gratis cortesía de Microsoft] como primera opción, y en un tamaño significativamente menor, lo que he tratado de equilibrar con un mayor interlineado y ancho de línea limitado para mantener una buena [legibilidad->Legibilidad y lecturabilidad].
Reestructuración del pie de página
que como estaba no me parecía muy funcional y aún tenía algunos enlaces muertos desde que había comenzado a utilizar el anterior/actual tema
Utilización de tags
que en realidad hace tiempo estaba usando, pero no mostraba porque no tenía una plantilla de archivos para los tags… ahora están ahí, pero la plantilla sigue chúcara
Posts completos en la página de inicio
el cambio que motivó todo —me explico: el formato anterior, con un post completo y ‘x’ resúmenes me parecía intimidante a la hora de escribir posts cortos, pero ideal para artículos extensos y bien trabajados… Con esto quiero elevar mi frecuencia de publicación y quizás escribir de forma más espontánea.

Como era de esperar, el theme presenta algunos problemas de presentación en MSIE (lógico), Safari para Windows y Konqueror… eso al menos de lo que he podido revisar en Browsershots. De todos modos, esto es el inicio de un proceso, por lo que pueden esperar más cambios a futuro.

¡Y yukei.net para algún tiempo más!

¿Image replacement o simplemente imagen?

La técnica de image replacement puede funcionar bien para la presentación de un documento en pantalla, pero no ocurre lo mismo al imprimir una página web; utilizar efectivamente una imagen puede ser una buena oportunidad de mejorar la presentación de los documentos impresos.

Probablemente una de los primeros trucos que encontré al comenzar a aprender a hacer páginas “bien” —o sea, con un editor de texto, HTML y CSS, no con Dreamweaver y tablas— es la técnica del image replacement. La idea es simple: reemplazar, por ejemplo, una cabecera por una imagen con CSS, prescindiendo de insertarla con el elemento <img src='lorem-ipsum.jpg' alt='Lorem Ipsum' /> ya que esto produciría en un código más accesible y semánticamente correcto.

HTML:
<h1 title="contrasentido">contrasentido</h1>

CSS:
h1{
display:block;
background:url(img/contrasentido.gif) top no-repeat;
width:402px;
height:55px;
text-indent:-9999em;
}

Las reglas básicas de esta técnica: “indentar” negativamente el texto del elemento en el que queremos realizar el reemplazo lo suficiente para que no aparezca en pantalla y especificar la imagen que deseamos mostrar como fondo. El atributo title en el elemento que será reemplazado sirve para poner los tooltips con los que MSIE solía mostrar, erróneamente, el texto alternativo de las imágenes… en otras palabras, completan la ilusión.

Hasta acá pareciera que todo está bien, sin embargo todas las técnicas de image replacement presentan problemas: algunos causados por comportamientos extraños navegadores poco actualizados (más específicamente, Explorer 5 y versiones antiguas de Opera), otras en escenarios que, si bien pueden resultarnos poco comunes, no vale la pena descartar (como que el usuario tenga desactivada la descarga de imágenes al mismo tiempo que activada la utilización de hojas de estilo), necesidad de agregar etiquetas vacías o poco/ningún valor semántico o de aplicar hacks específicos para algunos navegadores.

Continue reading “¿Image replacement o simplemente imagen?”

Tipografías web y Ubuntu/Linux

Si el 95% del diseño web es tipografía y ni siquiera has pensado las fuentes con que debería verse tu página en Linux… tienes tarea por hacer.

Que en los últimos años ha aumentado el número de usuarios de Linux, y que una parte importante de este aumento es atribuíble a la creciente popularidad de Ubuntu no debería ser una sorpresa para nadie remotamente ligado al desarrollo de proyectos web —si lo es, deberías considerar seriamente ampliar tus fuentes de información.

Siguiendo con las obviedades: en un medio en el que el 95% de la información es lenguaje escrito, poner atención al diseño tipográfico debería ser una de las principales preocupaciones e involucrar decisiones bastante bien pensadas —claro, incluso hay quien podría afirmar que el diseño web se trata totalmente de tipografía y punto.

Si estas cuestiones parecen tan obvias, ¿porqué al momento de definir la familia de fuentes de un sitio web la mayoría pensamos (me incluyo) solamente en Windows (o, con suerte, en Mac) y se nos olvide Linux?

Continue reading “Tipografías web y Ubuntu/Linux”

Fuentes gratis, cortesía de Microsoft

Microsoft ha incluído una serie de nuevas fuentes en Vista, considerablemente más atractivas que las típicas fuentes usadas en diseño web, y a las que es posible acceder gratuita y legalmente

Seguramente, para más de alguno la primera expresión que se le vino a la mente al leer el título de este post fue algo así como “aaaargh”… para mí también lo habría sido. Sin embargo, contegan un momento eso que ya se ha convertido en una reacción primaria anti-Microsoft para tratar de apreciar las nuevas fuentes a las que podemos acceder gratuita y legalmente gracias a la compañía de Bill Gates.

Pero… ¿cómo?

Gracias a Matt Thomas que dio a conocer el dato: el visor PowerPoint 2007 de Microsoft, que está disponible gratuitamente a través de su sitio web (el de Microsoft, claro) incluye una colección de seis nuevas fuentes desarrolladas para Vista: Calibri, Corbel, Candara, Cambria, Constantia y Consolas. Las tres primeras son fuentes sans-serif, Cambria y Constantia son serif y la última, como lo podrían suponer por su nombre, es de ancho fijo (o monospace).

 

Como podrán ver, representan un cambio refrescante sobre las típicas elecciones a las que los diseñadores web se ven constreñidos actualmente (Arial, Verdana, Tahoma, Trebuchet MS), y en mi opinión, resultan mucho más agradables que las anteriores.

Para quienes utilicen Linux, Alex Sancho ha publicado el procedimiento para instalar estas fuentes en Ubuntu —que, por supuesto, puede servir como guía también para otras distribuciones.

Fuentes de Vista en tus hojas de estilo

Ok, entonces ya tienes tus nuevas fuentes, ahora sería bueno aprovecharlas, ¿no?

Afortunadamente, Christian Montoya ya se dio el trabajo de crear algunas familias de fuentes recomendadas que incorporan las fuentes de Vista:

Helvetica, Calibri, Arial, sans-serif Corbel, Verdana, "Bitstream Vera Sans", sans-serif Candara, "Trebuchet MS", Trebuchet, sans-serif Cambria, "Times New Roman", Times, serif Constantia, "Palatino Linotype", Palatino, Georgia, serif Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace

En su post también incluye un PDF con una comparación entre las fuentes de Vista y las “típicas fuentes web”.

Continue reading “Fuentes gratis, cortesía de Microsoft”