La diseñadores web han lidiado desde siempre con la lacra de no tener la suficiente libertad a la hora de elegir las tipografías de una página web. Se limitaban a optar por fuentes estándar, como arial, trebuchet, times... o a usar apaños con javascript o flash para incluir alguna tipografía que los sistemas no tenían por defecto.

Con CSS3 llegó @font-face, una propiedad muy útil para definir en una página web fuentes que el usuario no tenga instaladas en su sistema. Si bien CSS3, y por consiguiente @font-face, sólo está implementada en los navegadores más modernos (Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+). Desde mi punto de vista no es una solución a corto plazo, pero sin duda se terminará implantando cuando la mayoría de usuarios cuenten con versiones actualizadas de sus navegadores.

Google al rescate

Ayer Google presentó su directorio de fuentes libres que podremos definir en cualquiera de nuestras web. La cantidad de fuentes aún es limitada, pero con total seguridad que ira creciendo con el tiempo. Qué tal si vemos su uso:

Comenzaré con la manera más limpia de utilizar Google Font. Abrimos nuestra hoja de estilos e introducimos un par de líneas para importar y definir la fuente "Reenie Beanie":

@import url('http://fonts.googleapis.com/css?family=Reenie+Beanie');
 
h1 {
	font-family: 'Reenie Beanie', "Trebuchet MS", Tahoma, Arial;
}
 

La otra manera, que considero menos limpia y elegante, es introduciendo una línea en nuestro documento HTML y definir la fuente en nuestro CSS.

link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css" /

h1 {
	font-family: 'Reenie Beanie', "Trebuchet MS", Tahoma, Arial;
}

Para usar otra fuente debemos sustituir el valor del parámetro “family” de la url de importación, Reenie+Benie en éste ejemplo, por el de la fuente que vamos a usar y posteriormente definirla. Por supuesto puedes usar fuentes en cualquier otra etiqueta, clase o identificador.

Mi blog personal puede servir de ejemplo. He usado esta técnica para mejorar el formato de los texto. yonerocha.net

Actualización: He leído en unijimpe que podemos importar varias tipografías en una misma llamada de la API, separando el nombre de cada fuente con "|".

Ejemplo: http://fonts.googleapis.com/css?family=Lobster|Cantarell

Un diseñador web, por desgracia, no le basta con que su código CSS y HTML sea válido. Gracias al mal hacer de Microsoft con su navegador Internet Explorer debe perder muchísimas horas parcheando su código para que éste se vea de igual manera en navegadores que si respetan los estándares web (Safari, Firefox, Chrome...) como en los chapuceros IE de Microsoft.

Evidentemente, debemos tener instaladas las versiones más utilizadas de IE para poder probar nuestros diseños web. El problema es que no puedes tener varias versiones instaladas en la misma máquina, no por defecto. La solución viene de la mano de un paquete de software en el que vamos a encontrar cada una de las versiones del dichoso navegador, Internet Explorer Collection.

Internet Explorer Collection contiene las siguientes versiones de IE:

• Internet Explorer 1.0 (4.40.308)

• Internet Explorer 1.5 (0.1.0.10)

• Internet Explorer 2.01 (2.01.046)

• Internet Explorer 3.0 (3.0.1152)

• Internet Explorer 3.01 (3.01.2723)

• Internet Explorer 3.03 (3.03.2925)

• Internet Explorer 4.01 (4.72.3110.0)

• Internet Explorer 5.01 (5.00.3314.2100)

• Internet Explorer 5.5 (5.51.4807.2300)

• Internet Explorer 6.0 (6.00.2800.1106)

• Internet Explorer 6.0 (6.00.2900.2180)

• Internet Explorer 7.0 (7.00.5730.13)

• Internet Explorer 8.0 (8.00.6001.18702)

La respuesta tiene nombre propio, slccount. Un pequeño programa para GNU/Linux que, como casi siempre, podemos descargar desde los repositorios de Ubuntu. Para eso tenemos que escribir el siguiente comando en la consola:

sudo apt-get install sloccount

Una vez instalado sólo debemos llamar a sloccount pasando la ruta de nuestro proyecto, yo lo he usado en puskasCMS que está escrito en PHP5, pero se puede usar con otros muchos lenguajes de programación.

sloccount /ruta_del_código_fuente

Además, nos proporciona una estimación económica de nuestro proyecto, eso sí, un tanto desorbitada desde mi punto de vista.

Total Physical Source Lines of Code (SLOC) = 57.868

Development Effort Estimate, Person-Years (Person-Months) = 14,18 (170.13)

Estimated Average Number of Developers (Effort/Schedule) = 9,66

Total Estimated Cost to Develop = $ 1.915.147 (average salary = $56.286/year)

¡Mi gestor de contenidos tiene casi 60.000 líneas de código! Tengo que hacer más vida social...

No sé que sentimientos puede tener un padre hacía un hijo, no soy padre. Pero soy hijo y por lo tanto podría ponerme en la piel de Puskas CMS para experimentar los sentimientos, si los tuviese, hacia su creador, el mismo que aquí escribe.

Después de meses de gestación, Puskas existe. Crece y se enriquece con la única pretensión de sustentar lo que hoy podéis ver como promineostudios.com.

Cuando comencé el desarrollo tuve que tomar decisiones que afectarían a cualquier evolución posterior de la aplicación. Decidí replantear todo el trabajo que había realizado hasta el momento. Como base usé el patrón de diseño MVC, hasta ahora usaba un híbrido entre OOP PHP5 y un sistema de plantillas con el que podía tener el código más o menos limpio y sencillo de mantener, pero que no era suficiente. No para lo que yo quería que fuese el CMS de Promineo Studios.

El anterior sistema de plantillas, Smarty, era bastante correcto en su funcionamiento pero requería demasiados recursos, además de obligar a aprender un pseudo-lenguaje nuevo, muy sencillo eso sí. Smarty se hizo prescindible, ya que desarrollé mi propio motor de plantillas valiéndome del propio PHP y las QuickTags. El aumento de rendimiento fue significativo, aún cuando smarty cachea las plantillas, ya no era necesario tener un motor tan pesado para generar las vistas de una página.

El segundo paso fue programar el núcleo de la aplicación con todas las funcionalidades básicas que incorporaría el CMS. Como por ejemplo, controladores base, modelos base, configuración, autentificación de usuarios, filtros de entrada de datos, manejador de conexión a base de datos, multilenguaje, sesiones y demás hierbas.

Como funcionalidades más 'revolucionarias' del núcleo puedo nombrar el uso PHP Data Objects, Gettext o manejo de Sesiones desde una base de datos. De PHP Data Object, escribiré e instruiré en próximos artículos en los que transmitiré todo lo que he aprendido de esta interfase de acceso a datos que me tiene enamorado ;-p. Sobre Gettext, que puedo decir... Es el pilar de toda aplicación multilenguaje que se precie. Y el manejo de sesiones desde una base de datos da para otro artículo.

Dejando de lado el núcleo, Puskas ofrece un completo sistema de blog, videoblog y creación de cualquier contenido para una web. Debo reseñar la incorporación de trackback y pingback en el blog, una característica muy interesante para comunicar contenido referenciado entre blogs. Comentarios enriquecidos con Ajax, votación de artículos

Aún queda mucho que madurar y para próximas versiones incorparé un sistema de caché para contenido estático, comentarios para el videoblog y cualquier cosa que se me vaya ocurriendo. txp4zuaybj