viernes, 7 de enero de 2011

Tu Web para Internet Explorer 9 – Parte 1 (Icono)

Estimados amigos este es mi primer post creado en Lima, resulta que estaba en internet (Que raro no?) cuando mi lindísima amiga Emi Piedra me hizo una consulta por el Facebook con lo siguiente:

Pregunta de Emi

Por lo que este Post se lo dedicaré a Emi Piedra mostrándole paso a paso como colocar un favicon.ico o iconoen tu web.

Es decir, una pequeña imagen, que aparece en algunos navegadores junto a la dirección de una página web. Por ejemplo, ahora deberías estar viendo algo parecido a esto:

1

Antes que empezar quisiera comentarles que identificar tu sitio a través de un ícono es muy importante, ya que a parte de brindar estética, muestra seriedad y con Internet Explorer 9 puedes habilitar tu sitio para tratarlo como una aplicación en Windows 7.

Una de las cualidades de Internet Explorer 9 consiste en permitir a los sitios web aprovechar al máximo el poder de la PC, los usuarios pueden interactuar con sus sitios web como aplicaciones completas en la barra de tareas, esto gracias a que fijando un sitio a la barra de tareas el icono del sitio se utiliza como la principal forma de identificar y tener acceso al sitio, es decir necesitamos un ícono para identificar a nuestro sitio, para esto vamos a utilizar un sitio web que nos permite crear el ícono sin necesidad de instalar algún programa en la PC.

  1. Creando el Ícono: X-Icon Editor es una aplicación HTML 5 (basado en <canvas>) que le permite crear iconos de alta resolución que hará brillar a sus sitios con IE9. Con X-Icon Editor usted puede tener su sitio listo con un gran icono que brindará otra experiencia a sus usuarios!
    1. Primer Paso: Les sugiero que ya tengan listo su logo para que lo importen al X-Icon Editor, la interface del sitio web es la siguiente:
      interface
    2. Segundo Paso: Importamos el logo (De preferencia que sea cuadrado) dando clic en Import y nos aparecerá este cuadro:
      importar
      En el cual das clic a Upload y te abrirá un cuadro de dialogo para seleccionar la ubicación del logo a importar.
    3. Tercer Paso: Una vez importado la página web les mostrará lo siguiente:
      importado
      Luego exportamos y seleccionamos el destino y lo guardamos con el nombre de favicon.ico.
  2. Seleccionando el Ícono de nuestra web: Una vez creado y guardado el ícono en nuestra PC:
    1. Lo subimos a la carpeta principal de nuestra web (Upload a la Raíz).
    2. Luego agregamos este código HTML (De color amarillo) en nuestra página principal (Index, master, home, etc.) luego del título y los meta content, por Ejemplo:

      <title> | Mi sitio | </title>
      <meta content="Francis Urteaga" name="keywords" />
      <meta content="Página del MVP" name="description" />
      <link rel="shortcut icon" href="favicon.ico"/>

Con esto ya pueden anclar su sitio en la barra de tareas de Windows 7 y disfrutar de Internet Explorer 9 en su pc:

fin

En 2 días estaré publicando el segundo Post-Tutorial: Tu Web para Internet Explorer 9 – Parte 2 (JumpList) no se lo pierdan!!!

Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
Microsoft Student Partner Senior | Microsoft Perú
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

1 comentario: