Crear extensiones para Chrome

La gente de Tutorialzine nos enseña cómo realizar extensiones para Google Chrome, y la verdad parece bastante sencillo. Para ello realizan una extensión de ejemplo que muestra los últimos posts de su feed.

La extensión debe constar de un fichero de configuracion (manifest.json) y luego el CSS, HTML5 y jQuery de la extensión. Chrome permite desarrollar las extensiones sin tener que instalarlos, para lo que desde chrome://extensions/ tendremos que ir a Developer mode y desde allí cargar el script.

Para tener más información podéis ir a la página oficial de Google

Making Your First Google Chrome Extension

Vía / @jlantunez

| |

Laboratorio: reconocimiento de un motor de búsqueda para navegadores

Una de las características más útiles que poseen actualmente los navegadores es la posibilidad de personalizar y añadir motores de búsqueda. Firefox lo dispone desde hace tiempo e Internet Explorer lo ha añadido en su última versión. Para poder tener un poco de orden en la creación de estos motores existe OpenSearch, que tal como dice la Wikipedia es:

es un conjunto de tecnologías que permiten publicar los resultados de una búsqueda en un formato adecuado para la sindicación y agregación. Es una forma para que las páginas web y los motores de búsqueda publiquen sus resultados de forma accesible

El proceso es sencillo, añades un XML en tu web y un acceso desde tus páginas para que el navegador lo reconozca y te avise de que existe para instalarlo directamente.

El XML sería el siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Sentido Web</ShortName>
<LongName>Sentido Web - Actualidad, productividad y desarrollo web...</LongName>
<Description>Encuentra todo lo que necesitas en tu día a día del desarrollo web.</Description>
<Tags>sentidoweb web internet blogs bitácoras weblogs web2.0 estándares css xhtml web-semántica php javascript</Tags>
<Contact>info@blogsmedia.com</Contact>
<Url type="text/html"     template="http://sentidoweb.com/bm/mt-search.cgi?IncludeBlogs=1&amp;search={searchTerms}&amp;submit.x=0&amp;submit.y=0&amp;submit=Buscar"/>
<Image height="16" width="16" type="image/vnd.microsoft.icon">http://sentidoweb.com/i/favicon.ico</Image>
<Query role="example" searchTerms="php" />
<Developer>Luis Sacristán Pascual</Developer>
<Attribution>BlogsMedia 2007, Creative Commons (Reconocimiento-NoComercial-SinObraDerivada 2.5)</Attribution>
<SyndicationRight>open</SyndicationRight>
<AdultContent>false</AdultContent>
<Language>es-es</Language>
<OutputEncoding>UTF-8</OutputEncoding>
<InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Y la línea que hay que añadir a nuestras páginas en el header es la siguiente:

<link rel="search" type="application/opensearchdescription+xml"
href="http://dominio/path/opensearch.xml" title="Nuestro buscador" />

El XML de arriba es el que usamos para Sentido Web y aunque su lectura es clara, explicaremos cada una de las etiquetas del XML:

  • OpenSearchDescription: es la cabecera del XML de OpenSearch.
  • ShortName: contiene el nombre corto que identifica al motor de búsqueda. Debe tener como máximo 16 caracteres.
  • LongName: contiene el nombre largo que identifica al motor de búsqueda. Debe tener como máximo 48 caracteres.
  • Description: descripción del motor de búsqueda. Debe tener un máximo de 1024 caracteres.
  • Tags: conjunto de palabras separadas por espacios que describen el tipo de contenido que nos encontraremos en las búsquedas. Debe tener un máximo de 256 caracteres.
  • Contact: e-mail de contacto.
  • Url: indica el interfaz que el cliente (navegador) podrá utilizar para realizar la búsqueda. Dispone de varios parámetros que nos permiten personalizar la búsqueda:
    • type: tipo MIME del resultado de la búsqueda. Puede ser por ejemplo application/rss+xml para RSS o application/xhtml+xml para XHTML.
    • template: la plantilla de la URL para indicar al cliente cómo realizar la búsqueda, usando esta sintaxis.
    • indexOffset: contiene el índice del primer resultado de búsqueda.
    • pageOffset: contiene el número de la primera página de resultados.
  • Image: URL de la imagen que se asocia al buscador.
  • Query: define una búsqueda pueden realizar los clientes, más información aquí.
  • Developer: creador del xml.
  • AttributionEntidades a las que se les asocia el motor de búsqueda.
  • SyndicationRight: el grado de resultados que provee el buscador que se pueden buscar, mostrar y redistribuir.
  • AdultContent: indica si hay contenido para adultos.
  • Language: idioma del resultado de la búsqueda.
  • OutputEncoding: codificación de los datos de salida.
  • InputEncoding: codificación de los datos de entrada.

Existen otras etiquetas y se le pueden añadir otras si se indica un xmlns en la etiqueta OpenSearchDescription.

|

Basar el diseño del historial del navegador en la memoria del usuario

La usabilidad del historial del navegador podría ser mucho más útil si se rediseña pensando en cómo funciona la memoria del usuario. Es la acertada reflexión que hace Alex Faaborg, diseñador de experiencia de usuario en Mozilla y miembro del equipo de desarrollo de Firefox 3.

El objetivo del usuario cuando va al historial se podría resumir en algo como: "Yo vi algo en algún sitio hace poco y quiero volver ahí". Lo que normalmente hacemos para volver a encontrar esa información es ir al sitio donde lo vimos y recrear las acciones realizadas para volver a encontrar la información: esto suele ser más sencillo y rápido que usar el historial del navegador.

El problema es que el historial funciona mostrando una lista de titulos de páginas, además ordenados por orden alfabético y casi nadie se fija en el título de una página que, además, suele ser poco descriptivo.

Sin embargo hay elementos de la interacción con el navegador que son más fáciles de recordar:

  • Acciones específicas que hizo: recordamos más facilmente lo que hemos hecho que dónde hemos estado. Por ejemplo: yo busqué tal palabra, guardé tal sitio en mis favoritos o ví el enlace en tal blog.
  • El aspecto del sitio donde estuvimos: la ciencia cognitiva ha demostrado repetidamente que somos mucho mejores recordando imágenes que textos, especialmente en tareas de reconocimiento.
  • Palabras o frases que leímos
  • Cuándo hicimos algo: sabemos que hemos hecho algo hoy, ayer o hace varios días. No sabemos lo que hicimos hace exactamente 5 días o hace 7 días.

En base a estas premisas, algunas hipotéticas, pero muy lógicas, Faaborg hace una propuesta de rediseño del historial que se puede ver en este prototipo:

http://sentidoweb.com/img/2007/01/newHistory.jpg_large-thumb.jpg

y que tendría estas características:

  • Poder buscar sobre las búsquedas que has realizado
  • Estaría organizado sobre segmentos de tiempo y acciones realizadas (buscar, abrir pestaña, pulsar link…). Cada segmento se agruparía sobre la acción que disparó la visualización de una serie concreta de páginas.
  • Añadiría al título de la página una imagen en miniatura de la misma.

Una interesante propuesta que es posible que se convierta en una extensión para Firefox del laboratorio de Mozilla

Vía / Blog de Alex Faaborg

|

Google niega que vayan a sacar su propio navegador

google.pngSegún indica Eric Schmidt, Google no va a sacar su propio navegador, aunque sigan preocupados por la nueva versión de Internet Explorer y su buscador por defecto. Entre otras razones, dice que parece que el público está conforme con IE, Firefox, Safari y Opera, a parte de que ellos no se van a poner a realizar un navegador por el simple hecho de pasarlo bien. Mientras tanto siguen con el apoyo que ofrecen a Firefox.
Vía / Robert Accettura’s Fun With Wordage

|

Google recomienda Firefox a los usuarios de IE

Los usuarios de Internet Explorer de Estados Unidos que se conecten a google.com les aparecerá un anuncio de la barra de Google para Firefox y les indican muy sutilmente que:

Firefox with Google Toolbar: tabbed browsing, safer surfing

A parte, también hay una ventanita que les ayuda a usar Google como motor de búsqueda para Firefox.
google-firefox.png

Vía / SitePoint

Uso de memoria: comparativa Firefox 2 IE7b2

firefox-ie.pngAhora que acaban de salir las betas de dos de los navegadores más populares: Firefox 2.0 e IE7 b2, hay alguien que ha realizado una comparativa muy interesante sobre el uso de memoria en ambos navegadores. Se puede sacar como conclusión que Firefox es superior a IE, usando más o menos la mitad de memoria que IE7 a la hora de visualizar páginas únicas. También es mejor el Firefox cuando se trata del uso de pestañas, aunque en este caso se ha modificado el valor por defecto de browser.sessionhistory.max_total_viewers dentro del about: config, lo cual hace que sea un estudio algo “especial”. Tambien indica que IE libera memoria cuando está minimizado o en background, mientras que Firefox se queda tal cual estaba.

Internet Explorer 7 beta2 and Firefox 2 Alpha 1 Memory Usage Comparison

Vía / Downloadsquad