¿Cómo personalizo el Favicon de mi página web o blog?

Un favicon es un icono que aparece en la parte superior del navegador junto a la URL de la web. La utilidad práctica de este elemento es nula, sólamente tiene funciones decorativas y de branding (promoción de marca). Además, con la última tendencia de los navegadores de incorporar el uso de tabs o pestañas para navegar con una sola ventana abierta, el favicon cumple otro papel, ya que permite una rápida identificación de la página que “oculta” cada tab.

¿Cómo personalizo el Favicon de mi página web o blog?

Crear uno es muy sencillo. En primer lugar tendremos que tener una imagen que deseemos usar como favicon. Hay que tener en cuenta que la imagen deberá ser  16 x 16px, por lo que no debe contener mucha información gráfica, es decir, procura que sea algo simple que permita identificar tu web, ya sea con el logotipo, una inicial o una pequeña ilustración. Si utilizamos imagenes con muchos colores, al crear un favicon de 16×16 se perderá muchísima calidad de imagen, tanta, que lo más probable es que el favicon sea indescriptible. Por eso mismo la recomendación es crear un favicon directamente con un tamaño de 16×16 o incluso 32×32. En mi caso, uso el Photoshop, aunque puedes utilizar cualquier otra herramienta de edición de imagenes (GIMP, Corel Paint Sho Pro, etc).

Cuando hayamos creado nuestro pequeño icono, bastará con subirlo a Favicon from Pics y en unos pocos segundos podremos descargar un ZIP con nuestro favicon preparado para subirlo a la web. Lo ideal sería subirlo al root de la web (directorio raiz). Lo último que necesitaremos será incluir entre los metas <head></head> de cada página los siguientes códigos. Ten en cuenta que si usas un CMS, Blog o web dinámica cuya cabecera sea un único fichero, bastará con que lo incluyas ahí.

<link type="image/x-icon" href="favicon.ico" rel="icon" />
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />

Más info | Favicon from Pics

4 Comentarios

10 errores habituales en el diseño de aplicaciones y páginas web

10 errores habituales en el diseño de aplicaciones y páginas webA continuación os muestro un listado de los errores más habituales a la hora de diseñar o desarrollar una página web. El artículo original está en inglés, escrito por Jakob Nielsen. Si deseáis ampliar la información, podéis pasaros por Squac.iti.upv.es y leer el artículo completo en castellano.

  • Controles GUI (interfaces gráficas de usuario) no estándar
  • Inconsistencia
  • No mostrar claramente su funcionamiento (“no perceived affordance”)
  • Sin retroalimentación (“feedback”)
  • Malos mensajes de error
  • Pedir la misma información varias veces
  • Sin valores por defecto
  • Usuarios “lanzados” contra la aplicación
  • No indicar cómo se usará la información
  • Funcionalidades centradas en el sistema

Fuente | http://squac.iti.upv.es
Artículo original | http://www.useit.com/alertbox/application-mistakes.html

Sin Comentarios

sIFR: como usar tipografías no estándar en páginas web

sIFR: como usar tipografías no estándar en páginas web
A la hora de escoger una tipografía para una página web nos encontramos limitados a una serie de fuentes estándar: verdana, arial, georgia, helvetica, times new roman, y unas pocas más. Cuando elegimos una tipografía para nuestra web, debemos pensar que para que un usuario pueda verla, tendrá que tenerla instalada en su equipo, de lo contrario se sustituirá por aquella que tenga configurada por defecto en su navegador. Son tipografías estándar por que cualquier usuario las tiene instaladas por defecto en su ordenador (sea cual sea su SO).

Si queremos usar una tipografía especial (gótica, handwritten, etc.) solo tenemos dos opciones: bien crear una imagen del texto con photoshop (o cualquier programa de edición de imágenes)  y subirla a la web, o bien crear una regla CSS @font-face, que permite la descarga automática de la fuente en caso de que el usuario visitante no la tenga instalada. Ambos métodos tienen desventajas importantes, en primer lugar, tener que crear una imagen para cada texto de la web puede resultar una tarea tediosa, además de perjudicar al SEO. Además, tenemos el problema de que esta medida sólo sirve para contenido estático, es decir, que no varía. Por otra parte, es probable que tengamos problemas con algunos navegadores al usar @font-face, ya sea por que son antiguos o por que simplemente no lo soportan.

La solución para una página web con contenido dinámico es usar tecnologías sIFR, es decir, mediante JavaScript, CSS, DOM y ActionScript creamos una imagen en tiempo de ejecución (on-the-fly), que nos mostrará una imagen con el texto. Os recomiendo FaceLift, un pequeño script que podemos descargar de forma gratuita.

Más info | FaceLift

4 Comentarios

Importancia de la tipografia en entornos web

La siguiente presentación nos introduce en el mundo de las tipografías y su uso en las páginas web. Hay algunas ideas que van en contra del aspecto gráfico de la página web, como la recomendación de asignar a los enlaces un estilo clásico, es decir, de color azul y subrayado. Concepto que se encuentra en conflicto con el diseño, ya que, personalmente, un enlace con esas características puede resultar tan relevante u obvio para un usuario como un enlace de otro color que destaque sobre el resto del texto.

Por otro lado, comenta la posibilidad de utilizar distintos tipos de tipografías para estructurar el texto: Serif (las terminaciones de cada letra están marcadas para identificarlas mejor en una lectura rápida, como la Times New Roman) para las cabeceras y Sans Serif (las letras están redondeadas y sin terminaciones marcadas, como la verdana o arial) para el cuerpo del texto. Además de estructurar el texto, estamos aplicando a nuestra página una mejora de usabilidad web, ya que clasificamos y permitimos una mejor identificación del contenido.

Sin Comentarios

Crea gifs de loading personalizados totalmente gratis

Crea gratis imagenes de loading personalizados totalmente gratis

Desde Ajax Load podrás crear gifs de loading totalmente personalizados de forma gratuita. Mediante una aplicación desarrollada bajo tecnología AJAX tendrás la posibilidad de elegir entre más de 20 diseños distintos y personalizar sus colores: fondo transparente o un color concreto,

además de seleccionar el color de los elementos del diseño elegido. Una vez hayas escogido el diseño y los colores que desees, bastará con pulsar en el botón Generate It y podremos descargar nuestro gif de loading personalizado.

Más info | http://www.ajaxload.info

Sin Comentarios

Completo sistema de estadísticas web gratis corriendo en PhP & MySQL

Completo sistema de estadísticas en php completamente gratisPHP i-Stats es una pequeña aplicación que analiza el tráfico de tu página web. Basado en PHP y MySQL, proporciona informes de las estadísticas diarias, semanales, mensuales, referidos, datos geográficos, navegador utilizado, sistema operativo, y un largo etcétera de características de las visitas recibidas. Los datos se visualizan en formato de texto y con gráficos.

No es más que otro lector de logs, pero siempre viene bien contrastar las estadísticas de varias fuentes distintas para tomar una idea más aproximada del tráfico de nuestra web.

Más info | http://www.phpini.com

Sin Comentarios