Delirios de un Informático

Font Squirrel: conversor de fuentes para @font-face

Con la progresiva implementación de @font-face por parte de los desarrolladores de los navegadores, empieza a ser factible implementar esta funcionalidad en nuestras páginas web. El problema reside en que no todos los navegadores soportan todos los tipos de letra (TTF, EOT, OTF, SVG…) por lo que es recomendable soportarlos todos y por lo tanto realizar las correspondientes conversiones. Para eso se creó Font Squirrel, una utilidad online que permite subir una fuente y obtener un kit que incluye todos los formatos así como un archivo CSS con el código necesario para añadirlo directamente a nuestras hojas de estilo.

“Detección” de navegadores con CSS

Aunque se maquete con estándares, siempre hay pequeñas diferencias que nos fuerzan a usar trucos especificos para cada navegador. Puede realizarse una detección mediante CSS basándose en ciertas propiedades específicas de cada uno, y el blog de Tanrei Sofware hace una buena recopilación en CSS Hack Series.

S60Webkit Simulator

Hace tiempo que había visto esta utilidad para poder testear las webs en el iPhone desde el navegador. No es más que un simple iframe con las dimensiones correctas sobre una imagen del teléfono , pero da una idea muy aproximada de cómo se verá y más si se usa el navegador Safari.

Como no he visto nada similar para el navegador S60Webkit que traen todos los teléfonos Symbian 3rd Edition, he creado S60Webkit Simulator, que permite testear el desarrollo de páginas web dentro de un Nokia E61i ( pantalla 4:3 de 320x240px ) y un Nokia N95 ( pantalla 3:4 de 240x320px ).

Lo ideal es visualizarlo con Konqueror o Safari, ya que el navegador de Nokia está basado en KHTML ( es más, se identifica como Safari ), y cambiando además el User Agent del navegador:

Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 (KHTML, like Gecko) Safari/413 es61

Eso permite que webs que detectan el navegador se muestren correctamente.

Además, el código de la utilidad se puede descargar para testear en local.

Pseudoclase hover en Internet Explorer

Llevo unos dias peleando con Internet Explorer y su incompatibilidad con los estándares. Una de las cousas que me frustran a la hora de diseñar algo visible es la carencia de la pseudoclase hover para todo lo que no sea un enlace.

Para solucionarlo hay un método ( bastante cutre, sí ) que consiste en forzar un cambio de clase en el evento onmouseover, de modo que se simula el efecto. En este artículo de A List Apart muestran cómo hacerlo con listas para generar menús desplegables. Un sencillo código JavaScript soluciona el problema….