Archivo de la etiqueta: web

.jpg, .png o .gif, ¿qué formato elegir para mi web?

jpggifpngConsiderando la velocidad de carga como un factor esencial en una página web, ninguno de los elementos contenidos en la misma (no sólo imágenes, también los .html, .css, .js, etc.) debería pesar más de 25Kb, lo que nos obliga a comprimir al máximo cada elemento para hacerlo más óptimo.

Nuestra web no sólo mejorará en la velocidad de carga, sino también en la experiencia de usuario y en el SEO. Entonces, ¿qué formato es más conveniente para cada aplicación?

.JPG

Tiene la información de color que queramos darle con la calidad, nos dejará un «ruido» por el «defecto jpg» (omite información de color, para reduciendo calidad, reducir peso). Es conveniente tan sólo para fotografías a las que queramos reducir peso.

.GIF o .PNG-8

Comprime con colores indexados, por lo que si tenemos una imagen con pocos colores, o tintas planas. Permite una transparencia muy sencilla. Es conveniente para pequeños elementos que requieran un área transparente o para imágenes con pocos colores y sólidos.

.PNG-24

El peso aumenta, pero permite transparencias más complejas que su hermano pequeño.Es conveniente para logotipos, vectores rasterizados, tintas planas con degradados o imagenes con distintos grados de transparencia.

Recuerda:

Cuando estemos en Photoshop o Illustrator, por ejemplo, no debemos olvidar que no hay que dar a «guardar cómo», sino a «guardar para web y dispositivos«, que nos permitirá una mayor compresión (omitiendo por ejemplo los metadatos) y podremos ver cuántos nos pesará el archivo final, lo que nos permitirá comparar entre los distintos formatos. Para web nunca utilices .bmp o .tif

Decora tu web con tipografías personalizadas gracias a Google fonts

Google Web FontsComo el título indica, dedico la entrada al maravilloso servicio Google Web Fonts del monopolista gigante empresarial Google, otro más de los que ofrece de manera libre y gratuita, gracias al cual podremos elegir una tipografía («fuente» para los amigos y amigas de Microsoft) dentro de su muy amplio abanico de posibilidades, para después utilizarla en nuestra página web sin necesidad de recurrir a «trucos CSS» ni alojando la tipo en nuestro servidor.

Para elegir seleccionamos la familia tipográfica, introducimos un texto modelo para visualizar el resultado y vamos escarbando en el listado. La aplicación nos permite trastear con determinados estilos, ver si dispone de tildes o ver cómo resultaría en un párrafo de texto corrido, incluso podremos seleccionar varias para comparar su uso.

¿Cómo incluyo las tipografías en mi web?

Google web fontsPara poder utilizar las fuentes a penas hacen falta unas nociones muy básicas de web. Cuando hemos seleccionado la o las tipografías que nos gusten, nos dará tres opciones:

  1. una simple línea de HTML con la etiqueta LINK para incluir en el HEAD
  2. un @import para incluir en nuestra hoja de estilos CSS
  3. un código JavaScript (viene con las etiquetas <script> para meter en el HEAD, pero puede apartarse a un .JS)

Mi consejo es utilizar la primera opción y no complicarnos la vida.

Como nuestra web ya tendrá localizado el elemento correspondiente a nuestra tipo de Google APIs, solo nos quedará asignar el estilo correspondiente a aquellos elementos que deseamos que aparezcan con la tipografía pertinente. Por ejemplo, si queremos que los títulos H1 tenga nuestra tipo escribiremos lo siguiente en nuestro CSS:

h1 {font-family: 'nuestratipo', sans-serif;}

Este código también nos lo facilitará Google, después lo aplicaremos al gusto.

Ventajas

page load

  1. Primero y ante la principal desventaja, que es lo que pueda tardar en cargar desde Google APIs mientras se carga nuestra web, la propia aplicación incluye un pequeño reloj que nos indica la repercusión que tendrá en la velocidad de carga
  2. Ahorraremos dolores de cabeza a la hora de incluir tipografías completas, antes era más caótico
  3. Es más cómodo para el cross-browser, solo deja de funcionar en navegadores desactualizados
  4. Evitaremos convertir textos en imágenes para subir títulos, mejorando la velocidad de carga, el SEO y ahorrándonos esfuerzo
  5. No ocupa espacio adicional en nuestro servidor (y el de Google no se cae (o sí, pero menos que el nuestro) y tiene un ancho de banda buenísimo)
  6. La exclusividad que supone tener elementos poco convencionales en nuestro espacio web

Estamos en Julio de 2012, seguro que el servicio sigue madurando (y como nos descuidemos lo integran en Google+), así que como última ventaja añadir que está en continuo desarrollo, cada vez hay más tipografías y mejor experiencia de usuario.