viernes, 17 de diciembre de 2010

WIDGET y FAVICON

Primero vamos a definir qué son cada uno para saber en qué contexto nos vamos a desenvolver.

WIDGET: Es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos están los de dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Sin embargo los widgets pueden hacer todo lo que la imaginación desee e interactuar con servicios e información distribuida en Internet; pueden ser vistosos relojes en pantalla, notas, calculadoras, calendarios, agendas, juegos, ventanas con información del tiempo, etcétera. El modelo de mini aplicaciones de widgets, es muy atractivo por su relativamente fácil desarrollo: muchos de los widgets, pueden ser creados con unas cuantas imágenes y con pocas líneas de código, en lenguajes que van desde XML, pasando por JavaScript a Perl, y C#, entre otros. En primer lugar los widget de Apple ni siquiera están comprimidos, no son más que una carpeta con extensión .wdgt, así que si le sacamos la extensión un widget se transforma en carpeta y si le agregamos la extensión a una carpeta esta se transforma en widget, así de fácil, no se necesita ningún programa adicional.

FAVICON: Del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente. Asimismo los utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos, en los historiales de páginas visitadas y de navegación reciente, y toda vez que deban hacer referencia a ellas.

Ya entendiendo a qué nos referimos vamos a la parte importante, ¿Cómo crearlos?, y luego ¿Cómo insertarlos en la página web que estoy creando?:

1) De los Widgets:

A) ¿Cómo crearlo?

- Lo más sencillo que puedes hacer es entrar a http://www.widgadget.com/node/add/widget, seleccionar algún tipo de "plantilla" y simplemente seguir los pasos que te indican para crear uno gratuito que obviamente va a estar patrocinado por esa página y vas a tener que acceder a la publicidad y sus condiciones de uso.

- Yahoo! tiene una sección entera en su portal online dedicada a la creación y al desarrollo de widgets. Dentro de Yahoo! Widget, se encuentran el software, tutoriales y otros recursos útiles para diseñar tu widget o traducir un paquete con tu contenido existente para ser distribuidos con Yahoo! Widgets.

- Los Google Gadgets son widgets en HTML o JavaScript que se pueden incrustar en las páginas web y otras aplicaciones (como iGoogle) para que distribuyas tu contenido. Google Code tiene una sección dedicada donde puedes encontrar toda la información necesaria para desarrollar, construir y desplegar un gadget usando la API de Google.

- O crea a través de códigos HTML y JavaScript tu propia aplicación personalizada para tus intereses o el de tu web site.


B) ¿Cómo Insertarlo en el Web Site?


- Como todo código, lo insertas el el "" de la página y le indicas el lugar exacto, tamaño y colores con los que quieres que aparezca en tu sitio web.

2) De los FAVICONS:

A) ¿Cómo crearlo?

Lo primero que debemos elegir es una imagen cuadrada, no muy grande, de unos aprox 250 x250 px como máximo, luego de esto es usar la siguiente herramienta obtenida de Dynamic Drive:

http://tools.dynamicdrive.com/favicon/

Luego en la parte inferior de la herramienta hacen clic en Examinar, eligen el archivo de imagen que usaran como icono y luego hacen clic en "Create ICON"

B) ¿Cómo Insertarlo en el Web Site?

Aqui les dejaré la imagen que usaremos como icono:
favicon

Seguimos los pasos (mencionados arriba), Examinar, Create icon y se nos mostrará una previsualizacion de como se vera el icono. Luego click en "Download Favicon" para descargarlo, con eso lo bajas a tu pc y asegura que quede guardado con el nombre favicon.ico (o simplemente con la extensión .ico que es lo importante), (si no pueden ver las extensiones es conveniente que lo habiliten: MI PC> Herramientas> Opcione de Carpeta> Ver> Ocultar las extensiones para tipo de archivo conocido - dejar desmarcado, o dale click derecho al archivo > Propiedades y ahí ves el nombre del archivo y te debe salir .ico)

Luego que tienes el favicon en su pc lo deben subir a algun hosting que soporte este tipo de archivos, te recomiendo que te crees una cuenta en:

http://pages.google.com/

Para que puedas subir tus archivos, sino pudieran u otra cosa.

Con eso tendrás la url que suponemos será:

http://www.myweb/favicon.ico (para este caso)

Luego que tenemos el favicon subido a internet sólo queda colocar el codigo. Abrimos la Edicion de Plantilla (Te recomiendo que NO uses ese codigo que te da DYNAMIC DRIVE (la pagina de la herramienta)):

[code]<] Porque suele fallar, sino que USES ESTE CODIGO (despues del tag de su plantilla):
Code:

http://www.myweb/favicon.ico' rel='shortcut icon'/>

Y obtendrás algo como esto:
favicon2

No hay comentarios.:

Publicar un comentario