Mostrando entradas con la etiqueta firefox. Mostrar todas las entradas
Mostrando entradas con la etiqueta firefox. Mostrar todas las entradas

viernes 22 de junio de 2007

Cómo cambiar un icono en un buscador de la barra de firefox

Supongamos que tenemos un buscador para la barra de búsqueda de firefox sin icono (o que nos hemos hecho uno siguiendo estos pasos y queremos cambiar el icono de google por otro).

La descripción del buscador está en una carpeta dentro del directorio de firefox (en windows XP en "C:\Archivos de programa\Mozilla Firefox\searchplugins"). Abre los .xml en un editor de texto hasta que encuentres el que corresponda al buscador (puedes mirar que lo que está dentro de <ShortName> corresponde al nombre que aparece al elegirlo).

Vale, ahora buscamos una línea cómo esta:

<Image width="16" height="16">data:image/x-icon;base64,[cadena de caracteres muy larga]</Image>


Si no la tienes, cópiala y pégala allí (después de <SearchPlugin> y antes de </SearchPlugin>, no se te ocurra pegarla al final). La cadena de caracteres es una imagen escrita en modo texto. Tenemos que sustituirla por la cadena que corresponde a nuestra imagen.

Obviamente, primero necesitamos una imagen. Para ello:

  • La página del buscador tiene un iconito:

    Buscamos entonces la dirección del icono. Abre el código fuente de una página que muestre el icono y busca algo como:
    <LINK rel="icon" href="/favicon.ico" type="image/ico" />


    Si href no tiene una dirección completa (no empieza por http), necesitamos crear una dirección completa. Para ello sustituye todo lo que esté tras la última barra "/" de la dirección de la página de la cual estás mirando el código fuente por lo que aparezca en href, por ejemplo, si es href="/favicon.ico" y estás en "http://www.boardgamegeek.com/profile.php?action=viewmine", la dirección será http://www.boardgamegeek.com/ profile.php?action=viewminefavicon.ico = http://www.boardgamegeek.com/favicon.ico. Si la dirección no tiene una barra "/" (aparte de las que siguen a http) simplemente añade lo que pone en href al final. http://www.boardgamegeek.com se convertirá en http://www.boardgamegeek.com/favicon.ico.

    Ahora copia la dirección completa y ábrela en el navegador. Te debería aparecer un icono. Guárdalo en tu ordenador.

  • La página del buscador no tiene un iconito:

    Bueno, mala suerte. Necesitamos una imagen que represente a la página.

    Si tiene una imagen a propósito (algo representativo y no muy grande), dale a botón derecho y selecciona guardar imagen.

    Si no tiene una imagen a propósito, tendremos que crearnos una. Para ello, le damos al botón del teclado Impr Pant (Imprimir Pantalla) con la página abierta, abrimos el paint o similar, y le damos a pegar (si te pregunta que si quieres que crezca la imagen, dile que sí). Ahora selecciona una parte más o menos cuadrada (por ejemplo un logo o la inicial en el título) y copiala. Abre una imagen nueva y pega la selección que hemos hecho (si sobra fondo, en paint por lo menos puedes poner un tamaño de imagen muy pequeño, incluso de 1 pixel por 1 pixel y al pegar te crecerá lo justo, en otros programas te puede abrir incluso una nueva imagen con lo que tengas en el portapapeles y el tamaño adecuado). Guarda la imagen como jpg (si tiene muchos colores), gif o png.

    Una vez tengamos una imagen, tenemos que convertirla en un iconito. Hay páginas en internet como ésta que te permiten hacerlo. Dale a examinar, selecciona tu imagen y dale a generar.


Cuando ya tengamos el iconito, tenemos que generar la cadena de texto que le corresponda. Para ello vamos a esta página (la mencionaban en la ayuda de firefox, si no funciona, busca algo como "image to base64"). En "upload a file" buscamos nuestra imagen y luego le damos a generar. Dará como resultado un enlace, cópialo (el texto y el contenido del enlace son idénticos). Si en lugar de eso sale una cadena de caracteres rara, copia la dirección de la barra de direcciones del navegador. Lo que necesitas empezará con algo como "data:text/plain" o "data:image/x-icon;base64" o algo similar...

Volvemos a nuestra linea en el fichero xml de descripción del buscador.
<Image width="16" height="16">data:image/x-icon;base64,[cadena de caracteres muy larga]</Image>

Tenemos que sustituir todo lo que está entre <Image width="16" height="16"> y </Image> por lo que hemos copiado ahora.

Una vez hecho ésto, guarda el xml, cierra el firefox, y al abrirlo de nuevo aparecerá el icono al lado del buscador.

jueves 21 de junio de 2007

Cómo crear un buscador para la barra de firefox

Si es que me piden las cosas más raras...



Supongamos que queremos añadir un buscador distinto a los que ofrece firefox para la barra de búsqueda. Todos esos buscadores están en una carpeta del directorio de firefox (en windows XP en "C:\Archivos de programa\Mozilla Firefox\searchplugins"). Hay un archivo .xml para cada buscador, por lo que tendremos que crear un archivo para el nuestro (o si alguien lo ha creado, simplemente meterlo ahí).

Puesto que probé a leerme las instrucciones de la página de ayuda del firefox y no me enteré de absolutamente nada, os lo voy a explicar con un ejemplo.

Pongamos que queremos buscar mucho en una página que visitamos a menudo, por ejemplo la boardgame geek (sí, me pidieron esa). Si vais a esa página, podeis ver que tiene una barra de búsqueda.

Vamos a abrir un archivo xml existente y rellenar los valores con los del buscador de esa página. Por ejemplo, abrid el xml de google. Se puede abrir con cualquier editor de texto (block de notas o similar). Saldrá algo como esto:
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Google</ShortName>
<Description>Google Search</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,[cadena de caracteres muy larga]</Image>
<Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&qu={searchTerms}"/>
<Url type="text/html" method="GET" template="http://www.google.com/search">
<Param name="q" value="{searchTerms}"/>
<Param name="ie" value="utf-8"/>
<Param name="oe" value="utf-8"/>
<Param name="aq" value="t"/>
<!-- Dynamic parameters -->
<Param name="rls" value="{moz:distributionID}:{moz:locale}:{moz:official}"/>
<MozParam name="client" condition="defaultEngine" trueValue="firefox-a" falseValue="firefox"/>
</Url>
<SearchForm>http://www.google.com/firefox</SearchForm>
</SearchPlugin>


Vamos por pasos:

  1. Guarda el fichero con otro nombre antes de seguir, no te vayas a cargar el buscador de google. Por ejemplo, en este caso, bgg.xml

  2. <SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">

    No parece ser nada específico de google, así que déjalo como está.

  3. <ShortName>Google</ShortName>
    <Description>Google Search</Description>

    En shortname tienes que poner un nombre que quepa en el menú desplegable de selección. Por ejemplo "BGG". En description pones una descripción del buscador. Por ejemplo "Board Game Geek" o "Busqueda juegos de mesa".

  4. <InputEncoding>UTF-8</InputEncoding>

    Éste es el juego de caracteres que vas a usar para las búsquedas. A menos que uses chino o algo así puedes dejar el que está

  5. <Image width="16" height="16">data:image/x-icon;base64,[cadena de caracteres muy larga]</Image>

    Esto es el icono que aparecerá. Por ahora vamos a hacer lo otro y luego lo cambiamos. Esta es la parte más difícil ;)

  6. <Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&qu={searchTerms}"/>

    Ésta es la dirección para que te vaya haciendo sugerencias mientras escribes. Puesto que el buscador que vamos a añadir no hace sugerencias, simplemente borramos esta línea

  7. <Url type="text/html" method="GET" template="http://www.google.com/search">

    Bien, esta es la parte gorda. Vamos allá:

    Primero, hay dos métodos, "GET" y "POST". Para averiguar cuál usa, hacemos una búsqueda de prueba. Si en la barra de direcciones del navegador aparece luego algo como http://dirección (sin ningún "?") sería metódo POST, y si aparece algo como http://dirección?propiedad1=valor1&propiedad2=valor2... sería el método GET.

    También podemos mirar el código fuente de la página que contiene la caja de búsqueday buscar algo como <form ... method="GET"... (asegúrate de que es el correcto mirando si el texto cercano a la caja de búsqueda aparece también cerca de aquí. En este caso es fácil, está justo después de "SEARCH")

    Ahora ponemos en method "GET" o "POST" y sustituimos template="http://www.google.com/search" por template="http://dirección" (si usa el método POST la dirección que sale al buscar, si usa el método GET la dirección que sale, pero sólo hasta la "?", sin incluirla).

    También puedes buscar en el código fuente si pone en <form... action="http://dirección". Si no pone http, pero sí algo como action="/metasearch.php", sustituye todo lo que esté tras la última barra "/" de la dirección por lo que aparezca en action, por ejemplo, si es action="/metasearch.php" y estás en "http://www.boardgamegeek.com/profile.php?action=viewmine", la dirección será http://www.boardgamegeek.com/ profile.php?action=viewminemetasearch.php = http://www.boardgamegeek.com/metasearch.php

  8. <Param name="q" value="{searchTerms}"/>
    <Param name="ie" value="utf-8"/>
    <Param name="oe" value="utf-8"/>
    <Param name="aq" value="t"/>

    Vale, esto es un poco más difícil. Hay dos formas de hacerlo:

    Hacer una búsqueda de prueba (sólo método GET):

    Si usa el método GET, simplemente busca algo, y mira en la barra de direcciones los pares atributo=valor que necesitas (separados por &), por ejemplo:
    http://www.boardgamegeek.com/metasearch.php ?searchtype=game&search=arkham&B1=Go

    http://www.boardgamegeek.com/metasearch.php es la dirección que tenemos que poner en template en el paso anterior, y hay tres pares: searchtype=game, search=arkham y B1=Go. Uno de estos pares contiene lo que hemos buscado (en este caso he buscado "arkham"), y los otros tienen valor fijo. Sustituimos lo que hemos buscado por "{searchTerms}", de forma que nos quedan los pares searchtype=game, search={searchTerms} y B1=Go. Ahora, tenemos que poner una linea por cada par, de este modo:
    <Param name="(nombre atributo)" value="(valor del atributo)"/>

    en nuestro caso:

    <Param name="searchtype" value="game"/>
    <Param name="search" value="{searchTerms} "/>
    <Param name="B1" value="Go"/>

    (da igual el orden) y borramos el resto de las líneas que empiecen por "<Param" en caso de que haya alguna de más.

    Mirar el código fuente (sirve para método GET y POST):

    Si usa el método POST, es lo mismo, pero los pares atributo=valor no aparecen en la barra de direcciones al hacer la búsqueda. No hay más remedio que ir al código de la página que contiene la barra de búsqueda y buscar entre las etiquetas "<form>" y "</form>" las etiquetas "<input" y <option, y anotar su nombre (name=...) y valor (value=...) recordando sustituir el valor de la que contiene los campos de búsqueda por "{searchTerms}" (normalmente será de tipo texto, y pondrá type='text'). Solo para que no os asusteis, en nuestro caso:
    <form method="GET" action="/metasearch.php" style='padding:0; margin:0;'>
    ...
    <select name='searchtype' style='font-size:12px;'>
    <option value='game' SELECTED>Games</option>

    <option value='designer' >Designers</option>
    <option value='publisher' >Publishers</option>
    <option value='forum' >Forums</option>
    <option value='geeklist' >GeekLists</option>
    <option value='tag' >Tags</option>
    <option value='wiki' >Wiki</option>
    <option value='user' >Users</option>
    </select>
    </td>
    <td valign='middle'><input size=25 type="text" name="search" style='border: 1px solid #B0B0B0; padding:2px; font-size:12px;'></td>

    <td valign='middle'><input type='submit' name='B1' value='Go' style='font-size:12px;'></td>
    ...
    </form>

    Donde pone select es una lista desplegable. Name es el nombre del atributo, y para el valor, buscamos entre las opciones y anotamos el "value" que nos interesa. En este caso queremos buscar entre los juegos (games)
    <option value='game' SELECTED>Games</option>
    por lo que el par será searchtype (lo pone en name dentro de select) = game (lo pone en value dentro del option que nos interesa).

    <input size=25 type="text" name="search"

    Esta es la barra de busqueda. Como veis, se llama "search", así que el par es search={searchTerms}.

    <input type='submit' name='B1' value='Go'
    Este es el botón, creo que no es necesario, pero bueno, tiene value, así que el par es B1=Go

    Igual que en el sistema anterior, escribimos en el xml tantas líneas
    <Param name="(nombre atributo)" value="(valor del atributo)"/>

    como pares tengamos (el orden no importa) y borramos el resto de las líneas que comiencen por <Param.

  9. Volviendo a nuestro xml:
    <!-- Dynamic parameters -->
    <Param name="rls" value="{moz:distributionID}:{moz:locale}:{moz:official}"/>
    <MozParam name="client" condition="defaultEngine" trueValue="firefox-a" falseValue="firefox"/>

    No creo que nuestra búsqueda tenga parámetros dinámicos, así que borramos todo eso (solo las que son muy complejas como google los tienen)

  10. </Url>
    <SearchForm>http://www.google.com/firefox</SearchForm>
    </SearchPlugin>
    Y por último, aquí se pone la página web de la búsqueda por si la prefieres en lugar de la barra. Yo he ido a la búsqueda avanzada en board game geek y he copiado la dirección que aparece en la barra de direcciones para sustituirla por esta.


Si lo has hecho bien, te debería quedar algo como
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>BGG</ShortName>
<Description>BoardGame Geek</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16">data:image/x-icon,[cadena larga de caracteres]</Image>
<Url type="text/html" method="GET" template="http://www.boardgamegeek.com/metasearch.php">
<Param name="search" value="{searchTerms}"/>
<Param name="searchtype" value="game"/>
<Param name="B1" value="go"/>

</Url>
<SearchForm>http://www.boardgamegeek.com/searchform.php3</SearchForm>
</SearchPlugin>

(Si quieres buscar en boardgamegeek no tienes mas que copiar todo esto y pegarlo en un fichero de texto, y guardarlo en "C:\Archivos de programa\Mozilla Firefox\searchplugins"). Después de guardarlo, cierra el firefox y cuando vuelvas a abrirlo, el buscador aparecerá en la lista. Comprueba si funciona.




No me aparece icono, o me aparece el de google...

Vale, una vez funcione el buscador, hay que sustituir la cadena larga de caracteres (o lo que puse yo, [cadena larga de caracteres]), por la cadena correcta para que aparezca un icono que permita identificar el buscador. Para ello, pasad a la parte 2.




Actualización: Alguien me ha sugerido en comentarios que los buscadores también funcionan si se guarda el archivo xml en "C:\Documents and Settings\[nombre_de_usuarios]\Datos de programa\Mozilla\Firefox\Profiles\[nombre_aleatorio].default\searchplugins". La diferencia entre guardarlo ahí y no en C:\Archivos de programa\Mozilla Firefox\searchplugins" es que en esa otra carpeta sólo le aparecerán a tu usuario de windows, y no a todos los usuarios de windows que usen firefox. Lo digo por si alguien quiere añadirse un buscador en un ordenador que comparte con familiares, por ejemplo, y no quiere que a éstos les aparezca (No me había planteado ese problema, pero la verdad no suelo buscar "el mejor porno XY" ;D )

lunes 26 de marzo de 2007

Introducción a firefox

Firefox es un navegador de código abierto que os podeis descargar aqui. Esta es la base del navegador. Quiero decir, es un navegador con las cosas básicas que se ha decidido que necesita un navegador. Luego, te instalas de una lista de complementos todo lo que necesites extra dependiendo de qué usas en Internet. Ésto hace que ocupe lo menos posible y que puedas personalizarlo luego con lo que tú utilices.



Si te parece complicado simplemente sigue estos pasos:




1. Descárgatelo (de nuevo, de aqui) e instálatelo. Si no te sale la versión en español directamente en la página, hay una lista desplegable abajo donde puedes escogerla.



Te preguntará si quieres importar tus favoritos del explorer. Dile que sí si quieres (Si no, pues no. Puedes hacerlo más adelante).



Cuando te pregunte si quieres hacerlo tu navegador predeterminado puedes decirle con tranquilidad que sí. Si no te gusta, lo desinstalas y punto (o al abrir el explorer te lo preguntará él).



¿Instalado? Bien, perfecto. Ahora puedes usarlo directamente (si tienes un firewall tendrás que permitirle que acceda a internet, claro).




2. Instala las extensiones que quieras. Para empezar, te sugiero algunas. Abre este post en firefox y ve a los siguientes enlaces. En cada uno de ellos habrá un botón que diga "instalar ahora". Haz click en él y dale a aceptar cuando termine de descargar.



  • IE Tab. Sólo funciona en windows pero allí es imprescindible. Al instalarla te aparecerá un botón en la barra inferior con el icono de firefox. Si no ves bien alguna página, haz click en él y te abrirá esa página con el motor del explorer, todavía dentro de firefox (el icono cambiará a ser el icono de explorer, para que sepas donde estás). Ya no te volverán a incordiar las pocas páginas que no funcionan con firefox (la mayoría son de la administración pública). También, si te resulta más fácil, al hacer click derecho en una página aparece la opción "ver esta página con ie tab".


  • Add bookmark here. Te añade una opción en las carpetas de marcadores (favoritos) de añadir la página web que estás viendo en ese momento dentro esa carpeta. Así, en lugar de dar a "añadir a marcadores" y seleccionar la carpeta donde quieres meterlo (2 clicks) puedes ir a la carpeta como si fueses a escoger un marcador y usar esa opción (1 click). Vale, soy vaga... y tengo muchas carpetas...


  • Download Statusbar. Para que no te moleste la ventana de administración de descargas. (Sí, hace 20 días me descargué una foto, ¿y qué? pesado...). Te muestra las descargas en progreso en la barra inferior y luego te deja en paz.




Si te atreves a más, en herramientas->complementos, en la pestaña de extensiones, hay un enlace que pone "obtener extensiones". Escoge la que quieras de allí mirando las categorías o busca entre las más populares. Pruebalas, y si no te gustan, si las selecionas en la ventana de herramientas->complementos te saldrá un botón para desinstalarlas. Puedes instalarlas y desinstalarlas en cualquier momento, pero no verás los cambios hasta que no reinicies el firefox.




3. Cambia el maldito color. No me gusta nada el esquema de colores y los iconos que han escogido en el firefox por defecto, pero eso tiene solución. Como las extensiones, puedes descargarte y utilizar el esquema de colores (tema) que quieras.



Prueba si quieres alguno de éstos. De nuevo, sólo tienes que seguir el enlace, ver si en la imagen de ejemplo te gusta, darle al botón "instalar ahora" y darle a aceptar cuando te lo pida.

  • Pink Paula. Es... rosa. Muy rosa. Ideal para nenas...

    Es el que estoy usando en este momento.



  • iFox Smooth. Blanco y elegante.


  • Red Cats (green flavor) . Verde suave y con iconos de gatos.


  • PimpZilla. Es... indescriptible. Pruébalo y luego desinstálatelo. Fíjate por favor en como brillan los diamantes en los botones cuando pasas por encima. Incluso los más horteras tiemblan al verlo.


  • BlackJapanMAX. Negro noche de los orígenes de la negrura... Oye, hay gente a la que le gusta.


  • glowyblue. Azul y dorado. Para los horteras que no se atreven con PimpZilla


  • Scribblies Kids. Iconos grandes e infantiles. Muy, muy bonito.






Una vez instalados, no tienes más que seleccionar el que quieras en la lista en la pestaña de temas de herramientas->complementos y te saldrá un boton que pone "usar tema". Haz click en él y la próxima vez que abras firefox usará ese tema.



¿No te gusta ninguno? Dale al enlace de "obtener temas" en la pestaña de temas de herramientas->complementos y busca a placer.




Sé que todo el mundo dice que soy una pesada, pero en serio, probadlo, merece la pena