miércoles, 4 de marzo de 2009

FUENTES SEGURAS PARA DISEÑO WEB (WEB SAFE FONTS)

Se sorprenderían al saber que hay diseñadores que no saben todavía que no se puede usar cualquier tipografía en la web y que, además, al especificar tipografías se deben listar más de una, porque nunca tenemos la certeza de que el usuario tenga la que nosotros elegimos.
Diseñar para la web implica saber y aceptar que todo cambia de equipo a equipo, de usuario a usuario y además, con el tiempo.
Para saber qué tipografías utilizar, hay que buscar listados de tipografías web (web-safe fonts). Este listado tiene relación con el software que se utiliza en cada época, porque son las tipografías que traen los programas más usados los que determinan qué familias se utilizan. Por eso, porque los programas, las versiones y los sistemas operativos van cambiando, es que esta lista va cambiando con el tiempo.

¿Por qué no se puede usar cualquier tipo de letra en diseño web?

Los navegadores (programas como Internet Explorer, Opera, Safari, Firefox, Google Chrome, etc) son los programas encargados de interpretar cada diseño web, para esto, utilizan las tipografías instaladas en el Sistema Operativo (Windows, Linux, MacOS, etc) donde se estén ejecutando. Dado que no todos los sistemas operativos tienen las mismas tipografías instaladas, es recomendable utilizar aquellos fonts que estén instalados en todos los sistemas operativos más populares.
Tabla de tipografías disponibles según Sistema Operativo

















Tipografías comunes
(*) MS Core fonts, menos comunes

Pixel Fonts

No solo en los desarrollos html, hay problemas con las tipografías. En Flash, por ejemplo, que nos permite usar cualquier Font sin necesidad de que este instalada en el equipo del usuario, muchas tipografías que usamos para grafica o cualquier otra aplicación no suelen tener buenas terminaciones dentro de las películ as flash. Una buena alternativa para solucionar esto es la utilización de las denominadas Pixel fonts, o fff (fonts for flash), que tienen una mejor terminación a la hora de funcionar dentro de la película dado que cada carácter está diseñado de tal manera que los extremos de las tipografías encajen exactamente en los extremos de los pixeles del monitor, permitiendo así una mejor legibilidad en tamaños pequeños de texto.

SILVERLIGHT una buena alternativa

Segun Microsoft:
"Silverlight es la nueva tecnología de Microsoft multinavegador y multiplataforma para presentar la siguiente generación de de experiencias en medios basados en .NET y aplicaciones altamente interactivas para la Web. Silverlight ofrece un modelo de programación flexible que soporta AJAX, VB, C#, Python y Ruby, y se integra con las aplicaciones de Web existentes. Silverlight soporta la descarga rápida y eficiente de video de alta calidad a todos los principales navegadores que corren en Mac OS o Windows.

Anteriormente conocido como “WPF/E”, Silverlight está diseñado para ofrecer un amplio contenido enriquecido con el resto del entorno de desarrollo Web, incluido ASP.NET.

Para alcanzar a la mayoría de la comunidad Web, Silverlight necesita ejecutarse correctamente en los diversos sistemas operativos y en los exploradores más usados. La primera versión es compatible con los exploradores Firefox y Safari que se ejecutan en Mac OS X, así como en Firefox e Internet Explorer de Windows. Se espera que a medida que el producto evolucione se van a admitir más sistemas operativos y exploradores.

Tiene la ventaja de que no depende de otros productos como podrían ser el Windows Media Player para reproducir video ni de Microsoft .NET Framework 3.0 para el análisis de XAML. Cierto es que es una tecnología del lado del cliente, pero encaja en una estrategia mayor orientada a servidor, incluida la capacidad de usarse en servidores que ejecutan PHP o Java.

Esencialmente, Silverlight es un complemento de navegador que representa XAML, exponiendo su modelo de objetos del documento (DOM) interno y el modelo de evento al explorador de manera traducible en secuencias de comando. De esta manera, un diseñador puede reunir un documento XAML que contenga gráficos, animaciones y escalas de tiempo y, por otra parte, un desarrollador puede adjuntarlos al código de una página para implementar la funcionalidad. Dado que XAML se basa en XML, el documento que define la interfaz de usuario que se descarga al cliente se basa en texto. Esto implica que no es un problema para los motores de búsqueda ni firewalls. Además, SQML puede ensamblarse y emitirse en tiempo de ejecución mediante una aplicación de servidor, lo que no sólo ofrece una experiencia gráfica enriquecida, sino también una experiencia personalizable y dinámica."


Para ponerlos en orbita, el silverlight es una alternativa directa el Flash, aunque tambien compite con Adobe Flex, Nexaweb, OpenLaszlo y algunas presentaciones de componentes AJAX. La primera versión de Silverlight fue lanzada en septiembre de 2007 y actualmente su versión 2.0 se distribuye de forma gratuita.

Uno de los puntos más fuertes de Silverlight es el soporte que tiene para video de Alta Definición (HD) que maneja streaming desde el cliente (o sea, sin meterle mano al servidor) de video de hasta 720 líneas progresivas por cuadro.

Para crear contenido gráfico para Silverlight tu herramienta debería ser Expression Blend 2, y para un desarrollador Visual Studio 2008.Hay excelentes ejemplos sobre Silverlight en el sitio oficial, además de algunos tutoriales y código para descargar y reciclar.

La verdad les recomiendo que lo investiguen, porque es una aplicación de mucho futuro, con grandes posibilidades y una muy buena alternativa al Flash (aunque me guste el flash - mucho - es muy bueno manejar distintas plataformas para poder brindar un mejor producto dependiendo del caso y la necesidad).