Artux’s Blog

Ultimamente estoy utilizando mucho Prototype para algunos trabajos; y visitando el blog de bartelme encontre un widget, realizado por el, para acceder de forma rápida a la documentación oficial del API de Prototype. El widget de nombre Prototype Reference Widget, realizado por bartelme, es sinceramente hablando, estéticamente perfecto y extremadamente útil.
Pero el incombeniente fundamental es que el mencionado widget esta hecho para el Dashboar de Mac.

Es muy comun para los que no estamos trabajando todo el tiempo con las mismas funciones, sea del lenguaje que sea, el hecho de no recordar ciertos aspectos o métodos de funciones que ya hace tiempo no implementamos. Y es ahi donde este tipo de herramientas, simples pero útiles, vienen a socorrernos; ahorrandones el tiempo de recorrer toda la documentación disponible para llevarnos directamente a lo que necesitamos.

Prototype Quick Reference

Pensando en esto, y en lo bien que me vendria el widget de bartelme, hice Prototype Quick Reference, una herremienta simple, útil y que puede usarse desde cualquier Sistema Operativo, con el plus de poder instalarlo como Search Plugin en Firefox.

Digo simple, porque la aplicación en si es muy sencilla, solo unas cuantas líneas para transformar los parametros en url, lo único que me llevo un poco de tiempo fue el diseño, que por cierto me quedo más que bien, aunque mi ego dice que perfecto .

Pero basta de palabras, es hora de probarlo. Funciona de la misma manera que el widget de bartelme. Pudiendo acceder a las especificaciones de las diferentes funciones y utilidades de Prototype tipeando solamente el nombre correspondiente.

Ejemplo: tipeando Ajax Updater o ajax.updater llegaremos instantaneamente a las especificaciones de dicha función.

Aunque tengo pensado extender la aplicación, para que muestre la documentación en el mismo sitio y en español, por el momento creo que con esto se puede trabajar de una forma más dinámica con Prototype.

Tambien, para los amantes de los widgets, transforme el widget para mac de bartelme en un widget para yahoo! widgets que pueden descargar desde el siguiente enlace Prototype Quick Reference Widget.

Saludos a todos!

Twitter This

Usuario: Password:

No voy a entrar en detalles sobre la relevancia o no de los buscadores, todos sabemos que para una persona que pasa la mayor parte de su tiempo en internet, los buscadores son la aplicación por excelencia.

Si existe algo mas fácil de hacer, que un plugin de busqueda (search plugin) para firefox, debe ser escribir un tutorial de como hacer uno. Sin embargo, bromas aparte, creo que un buen tutorial sobre el tema, puede ser útil para muchos que por falta de tiempo o falta de astucia desconocen la simpleza de la tarea.

Como hacer un search plugin para Firefox 2:

A diferencia de su hermano menor (Firefox 1.5), Firefox 2.0.* soporta tres formatos distintos para su search bar.

1. Sherlock: estandar desarrollado por Apple.
2. MozSearch: forma simplificada del formato OpenSearch de Amazon A9.
3. OpenSearch: estandar desarrollado por Amazon A9.

En este post solamente voy a tratar el 3º, OpenSearch un estándar que según sus creadores, pretende ser para la búsqueda lo que el RSS es para la sindicación de noticias. Para el primero (Sherlock) existen un par de tutoriales muy buenos, Como hacer un plugin de… (Microsiervos) y Make your first plugin (en ingles - MozDev) y para el segundo (MozSearch) esta el tuto, se podria decir oficial, Creación de plugins MozSearch (mozilla developer center) que por suerte para muchos esta en castellano………

Plugin de busqueda para Firefox 2 con OpenSearch.

Primero el modelo a seguir:

<?xml version=”1.0″ encoding=”UTF-8″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”>
<ShortName>Nombre Corto de tu Buscador</ShortName>
<Description>Descripcion de la busqueda</Description>
<Contact>tuemail@tuemail.com</Contact>
<Url type=”text/html”
method=”get”
template=”http://www.tudominio.com/?s={searchTerms}”>
</Url>
<LongName>Nombre un poco mas largo de tu buscador</LongName>
<Image height=”16″ width=”16″ type=”image/vnd.microsoft.icon”>http://www.tudominio.com/favicon.ico</Image>
<Query role=”example” searchTerms=”Busca en MI Blog” />
<Developer>Tu Nombre</Developer>
<Attribution>
Copyleft Andres “Artux” Scheffer, Algunos derechos Reservados. CC by-nc 2.5.
</Attribution>
<SyndicationRight>open</SyndicationRight>
<AdultContent>false</AdultContent>
<Language>es-ar</Language>
<OutputEncoding>UTF-8</OutputEncoding>
<InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Manos a la Obra:

• Abrimos un .txt, en win por ejemplo con Notepad o en linux con Gedit o similar, y copiamos el codigo anterior.
• Ahora solo resta remplazar algunos campos, los demas podemos dejarlos como estan:

=>Buscamos la linea: <ShortName> y remplazamos por el nombre de nuestro buscador.

=>En la linea que empieza con: <Description> va la descripcion del buscador.

=>Donde dice: <Contact> podes poner tu e-mail o uno falso si no tenes interes de estar respondiendo.

=>Atento con esta linea: <Url type=”text/html” …… </Url>, este punto es el que decide si tu plugin funciona o no, donde dice method=”get” puede ser que tu buscador utilice el método post para procesar la busqueda, en ese caso debes remplazar “get” por “post”, de lo contrario dejalo como esta; donde dice template=”http://… tienes que remplazar por la url exacta a tu buscador (si usas wordpress seria algo asi: template=”http://tudominio.com/?s={searchTerms}), tenes que tener en cuenta que {searchTerms} es el comodín, es decir, tenes que poner la url de tu buscador y justo al final agregarle {searchTerms}.

=>Seguimos remplazando: <LongName> el nombre extendido del buscador; en <Image height=”16″ width=”16″… tenes que poner la url exacta a tu favicon.ico; en <Developer> podes poner tu nombre; en <Attribution> el tipo de licencia; en <Language> podes poner es-es; ya con esto el plugin queda funcional.

• Importante: Una vez que hallamos remplazado lo necesario, guardamos el archivo en formato .xml, el archivo tiene que quedar nombrearchivo.xml.
• Subimos a nuestro servidor el archivo, ej: tudominio.com/nombrearchivo.xml, y ya podemos empezar a ofrecerles a nuestros usuarios el searchplugin

Detección automática del plugin de búsqueda por el Navegador:

Para que el navegador detecte tu search plugin tenes que agregar la siguiente linea en el header de tu sitio:

<link rel=”search” type=”application/opensearchdescription+xml” title=”Mi Busacador” href=”http://tudominio/nombrearchivo.xml”/>

Para ofrecer un enlace que instale el plugin:

<a href="javascript:window.external.AddSearchProvider('http://tudominio.com/nombrearchivo.xml')">Instalar</a>

Podes probarlo en funcionamiento:

Artux Search.(instalar)

Recursos:

Generador de favicon online (enlace).

Generador online de search plugin OpenSearch (enlace).

Creo que me extendi demasiado, pero quedo bastante completo. Espero que les sea de alguna Utilidad, Saludos!!

Twitter This

Usuario: Password: