Archivo etiqueta google
Cargar tipografías web en Internet Explorer
Por Fran - css, Diseño web - 22 junio, 2011
Internet Explorer continúa sin cumplir los estándares, y esto trae de cabeza a los diseñadores web. Cuando quieres cargar una de las tipografías de Google en tu web o cualquier otra fuente compatible, utilizas el código para insertarla que te facilita Google y descubres que el maldito Internet Explorer no la muestra. Arreglar esto supone un trabajo extra para el diseñador.
¿Qué debemos hacer para que Internet Explorer muestre una fuente?
1. Descargar la fuente
Tenemos que usar una parte del código que Google nos facilita para insertar una de sus fuentes en nuestra web cuando hacemos clic en “Use this font”. En el caso de la tipografía Lobster:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&v1' rel='stylesheet' type='text/css'>
Debemos copiar la dirección completa que hay entre comillas simples del atributo href y pegarla en nuestro navegador. Cuando cargue esta dirección veremos el siguiente código:
@font-face {
font-family: 'Lobster Two';
font-style: normal;
font-weight: 400;
src: local('Lobster Two'), local('LobsterTwo'), url('http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc') format('woff');
}
De aquí tendremos que repetir la misma operación. Copiamos la dirección que hay entre las comillas de url
http://themes.googleusercontent.com/font?kit=Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc
De nuevo en nuestro navegador, pegamos la dirección, y podremos descargar la fuente (Lobster en el ejemplo). La guardamos en nuestro equipo.
2. Generar un kit en FontSquirrel
El siguiente paso es utilizar la fuente que hemos descargado para generar un kit en el generador de kit de FontSquirrel
Subimos la fuente que descargamos en el paso 1 (Add fonts). Marcamos el checkbox ‘Yes, the fonts……’ y hacemos clic en Download your kit. Obtendremos un archivo comprimido.
3. Modificar nuestra hoja de estilo CSS
Cuando descomprimimos el kit que acabamos de descargar, obtenemos una carpeta con varias tipografías (formatos: eot,svg,ttf,woff …) y una hoja de estilo stylesheet.css. El código de la hoja de estilo, tendremos que añadirlo a la nuestra:
@font-face {
font-family: 'Lobster';
src: url('lobster-webfont.eot');
src: url('lobster-webfont.eot?#iefix') format('embedded-opentype'),
url('lobster-webfont.woff') format('woff'),
url('lobster-webfont.ttf') format('truetype'),
url('lobster-webfont.svg#Lobster') format('svg');
font-weight: normal;
font-style: normal;
}
Y por último, debemos subir a nuestro servidor nuestra hoja de estilo modificada y los archivos de las tipografías. Es muy importante que prestemos atención a la ruta hacia los archivos de fuentes, si queremos guardarlos en una ubicación que no sea la misma carpeta en la que está nuestra hoja de estilo, deberemos modificar el código CSS para que las pueda localizar correctamente.
Esto es todo el trabajo extra que nos obliga a hacer Internet Explorer cuando queremos mostrar una tipografía especial en nuestras webs. ¡Con lo fácil que es usar el código que nos da Google!
¿A vosotros os da muchos quebraderos de cabeza Internet Explorer?
Google Font: tipografías libres para la web
Por Fran - css, Diseño web, Recursos - 20 mayo, 2010
Vía Twitter he conocido GoogleFont, con el que podemos usar en nuestras webs tipografías de gran calidad con licencia open source.
El principal problema de los diseñadores web a la hora de trabajar con tipografías es que si se utilizan fuentes poco comunes muy pocos usuarios verán la página tal y como se diseñó. Una solución a este problema es utilizar sistemas de reemplazo como SIFR, basado en Flash. Otra solución es embeber la propia fuente en la página para que el usuario la descargue como un elmento más junto a imágenes y resto de recursos web.
[ACTUALIZACIÓN] Un día después de publicar este post conozco Fonts-Live de Ascender. ¿Estaremos ante la guerra de las tipografías web?
Los diferentes navegadores no tratan de forma homogénea las tipografías embebidas. Con la librería de javascript WebFont Loader podremos cargar tipografías (de Google o de cualquier proveedor, como Typekit), controlar cuándo se ha completado la carga para hacer un callback o incluso mostrar tipografías comunes mientras se realiza la descarga de la fuente.
De momento éstas son las que hay disponibles a través de licencia open source de Google, aunque se prevé que el catálogo aumente:
Cómo insertar una tipografía.
Es realmente sencillo insertar una tipografía desde Google Font en nuestra web:
1. Enlazamos con la tipografía alojada en los servidores de Google:
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css' />
En el Directorio de fuentes tenemos toda la información necesaria sobre cada una de las fuentes disponibles, incluído el código de ejemplo para insertarlas en nuestra página.
2. La llamamos desde el estilo CSS
h1 { font-family: 'Cantarell', arial, serif; }
Y listo, ya la tenemos funcionando.
Variantes de una tipografía.
Para conseguir variantes de una fuente, como cursiva, negrita, etc. debemos añadir los parámetros de la API a la url:
<link href='http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
Habría que verificar en el Google Font Directory las variantes disponibles para cada tipografía.
Cargar desde CSS con @import
Existe la posibilidad de cargar la tipografía desde el propio código CSS:
@import url(http://fonts.googleapis.com/css?family=Cantarell);
WebFont loader
Ésta es la librería con la que tendremos mayor control del proceso de carga de las tipografías.
Con el siguiente ejemplo, conseguimos que primero se muestre el texto en la fuente serif por defecto, y cuando las fuentes han sido descargadas, se muestra el texto en la fuente especificada:
This is using Cantarell
This is using Tangerine!
Google´s AJAX APIs
Si usas alguna de estas apis Ajax, puedes cargar el WebFont Loader así:
Especificando proveedores y fuentes
Este ejemplo carga la Tangerine y Cantarell desde la API de Google Font
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
También podemos cargar de Typekit:
WebFont.load({
typekit: 'myKitId'
});
O de ambos:
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId'
});
Además disponemos de un módulo personalizable (custom) que puede cargar una hoja de estilo desde cualquier proveedor de fuentes:
WebFont.load({
custom: { families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ] }
});
Para más completa información sobre el Google WebFont Loader puedes visitar la página oficial.
Introducción a SEO
Congreso de Webmasters 2009. Foto: javiermcallan
Este post fue originalmente publicado en octubre de 2009. Ha sido el único artículo que he podido recuperar después de la pérdida del blog anterior.
Fue publicado en La Webera.
La intervención de Enrique Aguilera en el III Congreso de Webmasters me ha servido para aclarar algunos conceptos, y tener una base sobre la que apoyarme para profundizar en el tema.
Ya había leído antes sobre SEO, Search Engine Optimization = Optimización de búsqueda en buscadores = técnicas para que una página web aparezca de las primeras en los resultados de Google. También había aplicado algunas técnicas SEO a mis páginas. Pero he de reconocer que la ponencia de Enrique fue muy útil para asimilar conceptos y saber qué estamos haciendo realmente y para qué.
El objetivo del SEO está claro, y lo acabo de especificar arriba: queremos que nuestras páginas aparezcan de las primeras cuando alguien busca en Google servicios o contenidos que ofrecemos en ellas. Para conseguir esto es muy importante tener claro un concepto: cada una de nuestras páginas, de nuestros archivos .html, .asp, .php o lo que sea, son documentos independientes. Google no trata el conjunto de archivos HTML de un dominio como un todo, sino que los indexa de forma independiente. Esta idea es clave. Google busca los documentos (páginas) publicados en la red que mejor satisfagan los criterios de búsqueda del usuario, por lo tanto en teoría y dejando de lado otros factores, ante una búsqueda de “Diseño de logotipo” aparecerá mejor posicionada la página del Estudio de Diseño A que ha diferenciado las clave SEO de cada una de las secciones de su web adaptándolas a su contenido, que la del Estudio de Diseño B que ha utilizado las mismas claves SEO (carteles, flyers, logotipos, webs…) en todas sus páginas. Es como si buscamos un determinado CD en una estantería repleta de CDs y todos están nombrados igual: “rock, jazz, soul, etc.”. Vale, ya sé que en esta estantería hay música y que es de los estilos que me gustan, pero ¿cómo carajo encuentro el que busco si todos tienen el mismo nombre en la caja?.
Si hemos comprendido esto nos habremos dado cuenta de que una práctica tan habitual como es la de utilizar el mismo título, palabras clave y descripción en cada uno de los documentos de una web es un error garrafal de cara al posicionamiento de nuestra página. Como afirma Enrique, lo más importante de cara al posicionamiento, tan importante que si sólo pudieramos hacer una cosa para mejorar el posicionamiento de nuestra página tendríamos que hacer ésa, es utilizar correctamente la etiqueta <title></title> de nuestras páginas. Es la clave. Si Google abre el cajón de nuestra web para indexarnos, y encuentra 20 páginas con títulos específicos que identifican claramente el contenido de los documentos, nos indexará mejor que si abre el cajón y se encuentra 20 páginas con el mismo título. No volvamos a caer en el error de usar el nombre de la empresa de nuestro cliente como título de todas las páginas. A no ser que sea una marca mundialmente conocida con un claro objetivo de branding nos dará mucho mejor resultado usar títulos diferentes según el contenido de cada sección que el mismo en todas las páginas. Esto mismo lo deberíamos aplicar también a las meta keywords y meta descriptions.
El segundo elemento en grado de importancia es la etiquera <h1></h1>. Se le puede aplicar todo lo explicado en la etiqueta <title></title>. No lo usemos para repetir el nombre de nuestro cliente, nos será mucho más util para posicionarnos si adaptamos su contenido a los objetivos de posicionamiento que queremos conseguir en el documento determinado que estamos creando.
Junto al <title> y <h1>, la frecuencia de actualización de los contenidos de nuestra página es muy importante para el posicionamiento. Google valora mucho una página “viva”, cuyos contenidos son dinámicos y no guardan los mismos contenidos durante años.
Los enlaces también son muy importantes, tanto internos como externos. Debemos delimitar la relevancia de nuestros enlaces internos ayudándonos de la semántica HTML. Debemos usar apropiadamente los anchor text de los enlaces, el texto sobre el que se hace clic para abrir un enlace. Deben ser textos específicos, ovidémosnos del famoso “pinche aquí”. También es bueno que sitios externos al nuestro nos enlancen y de esto nacen los famosos intercambios de enlaces entre páginas. Pero hay que tener en cuenta el anchor text con que lo hacen, y no llamar la atención ‘antifraude’ de Google. Es decir, hacer un crecimiento sostenible. No pasar de cero a 5.000 enlaces desde otras páginas de la noche a la mañana. En este aspecto también influye la distancia de las páginas entrelazadas . A mayor distancia entre ellas mejor valorará Google los enlaces.
Si trabajamos correctamente estos elementos habremos ganado mucho, pero hay otros aspectos técnicos que pueden ayudarnos:
- separación de diseño y contenido: usar CSS
- cumplir con los estándares de la W3C y realizar páginas que validen
- Seleccionar un buen servidor donde alojarnos: un servidor lento y con caídas influirá negativamente en nuestro posicionamiento.
- La geolocalización de nuestra página está adquiriendo cada vez más importancia: dónde está nuestro servidor (IP), dominio, DNS. Si quieres posicionarte en el mercado español, lo más lógico es que te alojes en servidores españoles.
Además de esto existen lo que Enrique llamó extra points, detalles que pueden hacernos ganar puntos extra a los ojos de Google:
- Ofrecer contenidos multimedia que favorezcan la universal search.
- Social Media Optimization (SMO): Optimización de la página para su integración en las redes sociales.
- User Generated Content (UGC): Contenido generado por los usuarios, por ejemplo los comentarios en un blog.
- Feeds: son muy buenos para Google.
Con estas bases SEO se aclaran conceptos y se puede empezar a profundizar en este mundo. Espero que os sirvan, pero os aconsejo no obsesionaros con aparecer el primero de la lista. En el mundo SEO hay mucha competencia y mucho oscurantismo. Muy pocos saben a ciencia cierta cómo funciona Google, y éste cambia continuamente sus algoritmos de indexación. Por lo que obsesionarnos con aparecer los primeros puede hacernos perder tiempo y recursos que podríamos emplear a otras tareas. Como dice Pere Rovira se pueden obtener muy buenos resultados sin aparecer el primero. Cuando te digan “Si no sales el primero eres un fracasado”, responde: “fracasado tú”. El posicionamiento es un medio, no un fin en sí mismo.