conecti.ca
articulos recientes en google
Hace apenas una semana les dimos la noticia de que Google había anunciado la posibilidad de hacer llamadas a ··· » leer
Seguramente ya más de uno de ustedes puede que lo sepa, ya que es información pública y cualquiera puede tener ··· » leer
Los ingenieros en casi todas las áreas de Google pareciera que trabajan 24 horas, pues cada día salen nuevas ··· » leer
Gmail fue pensado para satisfacer las necesidades de los usuarios avanzados pero sin perder la sencillez necesaria para ··· » leer

7
ENE

¡Helvetica! Como mejorarle el aspecto a tu navegación por medio de skins dinámicos

Escrito por Mauricio Pastrana en Guías, Navegadores, Productividad

  • Live
  • Bitacoras.com
  • Meneame
  • BarraPunto
  • FriendFeed
  • StumbleUpon
  • Tumblr
  • PDF
  • Print
  • email
  • RSS

No es ningún misterio que en conecti.ca (como muchos) estamos enamorados de la famosa tipografía suiza: Helvetica. Ahora resulta que tenemos el como mejorar nuestra experiencia de navegación por medio de un postrender que reemplaza todos los estilos que intencionan los diseñadores de Google (o Twitter) con los bellisimos estilos que hacen que hacen parte del “Kit” Helvetica.

¿Que como?

Para poder entender que es una aplicación como Greasemonkey, hay que entender como funciona tu navegador. A super grosso modo, tu browser es un programa que recibe código HTML de varios servidorer en el Internet y luego lo traduce a imágenes, videos o texto con estilos predeterminados en el mismo código (cof-cof, en CSS).

Bueno pues resulta que hay programas que corren nativo en tu máquina que operan previo al interpretador de HTML de tu navegador y modifican el código HTML que este recibe del servidor para un sinfín de usos: deshacerte de banners, remodificar la página a algún modo que te sea más entendible, o en el caso de los scripts que van a continuación, instalar estilos en Helvetica para sitios ya de uso común. Hay que notar y me veo obligado a escribir que estos cambios (claramente) suceden solo en tu máquina.

Helvetireader (Google Reader + Helvetica)

Para instalar en Firefox

  1. Instala la extensión de Firefox: Greasemonkey
  2. Reinicia Firefox
  3. Instala este script para Greasemonkey
  4. Reinicia Firefox

Para instalar en Opera, Chrome o cualquier navegador basado en Webkit (Safari, Omniweb, etc.)

  1. Instala el administrador de scripts Greasekit (nota: vas a requerir SIMBL más instrucciones en la página de Greasekit)
  2. Reinicia tu navegador
  3. Instala este script para Greasekit
  4. Reinicia tu navegador

Bonus de lentes de pasta:

Helvetireader es ideal para usar con Fluid.app (instrucciones) o Mozilla Prism. Así mismo también hay un script de que traduce los favicons de los feeds RSS a iconos en Helvetireader.

Link: Helvetireader

Helvetical (Google Calendar + Helvetica)

Para cualquier navegador

  1. Instala Greasemonkey, Stand, Fluid o Stylish
  2. Reinicia tu navegador
  3. Instala este script
  4. Reinicia tu navegador

Link: Helvetical

Helvetwitter (Twitter + Helvetica)

Como aplicación de escritorio en Mac usando Fluid

  1. Descarga el icono (png, 512px)
  2. Descarga este script y tenlo a la mano.
  3. Arranca Fluid.app y configura http://twitter.com con Helvetwitter como nombre, usa el icono que descargaste y dale Create.
  4. Abre Helvetwitter.app y dale Ctrl+Cmd+N para crear un nuevo script de usuario y de nombre dale de nombre Helvetwitter
  5. Mientras tanto, en una ventana aparte en un editor de texto abre el script que descargaste en el paso 2 y ubica donde dice ‘// da yer thing’. Copia todo el texto luego de esta linea y ponlo en el script de usuario que estas generando en el paso 4.
  6. Guarda, Cierra y vuelve a abrir Helvetwitter.app.

Para Firefox o como aplicación de escritorio usando Mozilla Prism

  1. Instala Greasemonkey
  2. Reinicia tu navegador (o Prism)
  3. Instala este script
  4. Reinicia tu navegador (o Prism)

Para Safari o Chrome

  1. Instala el administrador de scripts Greasekit (nota: vas a requerir SIMBL más instrucciones en la página de Greasekit)
  2. Reinicia tu navegador
  3. Instala este script para Greasekit
  4. Reinicia tu navegador

Para Opera

  1. Abre el menu de preferencias y ve a advanced-content-javascript.
  2. Descarga este script
  3. Selecciona el folder donde descargaste el script.

Link: Helvetwitter

Helvetimail (Gmail + Helvetica)

Para todos los navegadores

  • En Gmail, Selecciona Minimalista en Configuración > Temas. Helvetimail hace uso de algunos iconos presentes en este tema.

Como aplicación de escritorio en Mac usando Fluid

  1. Te puede interesar descargar este icono
  2. Descarga este script y tenlo a la mano.
  3. Arranca Fluid.app y configura http://gmail.com con Helvetimail como nombre, si lo descargaste, usa el icono que descargaste y dale Create.
  4. Abre Helvetimail.app y dale Ctrl+Cmd+N para crear un nuevo script de usuario y de nombre dale de nombre Helvetimail
  5. Mientras tanto, en una ventana aparte en un editor de texto abre el script que descargaste en el paso 2 y copia todo el texto luego para despues ponerlo en el script de usuario que estas generando en el paso 4.
  6. Guarda, Cierra y vuelve a abrir Helvetimail.app.

Para Firefox o como aplicación de escritorio usando Mozilla Prism

  1. Instala Greasemonkey
  2. Reinicia tu navegador (o Prism)
  3. Instala este script
  4. Reinicia tu navegador (o Prism)

Para Safari o Chrome

  1. Instala el administrador de scripts Greasekit (nota: vas a requerir SIMBL más instrucciones en la página de Greasekit)
  2. Reinicia tu navegador
  3. Instala este script para Greasekit
  4. Reinicia tu navegador

Para Opera

  1. Abre el menu de preferencias y ve a advanced-content-javascript.
  2. Descarga este script
  3. Selecciona el folder donde descargaste el script.

Link: Helvetimail

Tags: , , ,

« CES 2010: Project Natal disponible para ··· CES 2010: Se presenta la primera ··· »

Comentarios de los lectores

  1. César Salazar | marzo 2, 2010 a las 21:25 pm

    Me gustó mucho este artículo. Yo le llamaría "GreaseMonkey + Fluid para seres humanos": http://bit.ly/9AGU47 (escribe @mpastrana)

    Respondele a César Salazar

Deja un comentario!

XHTML: Puedes usar: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

conecti.ca
  Bitacoras.com
  Todo el Contenido Bajo la Licencia Atribución - No Derivadas 2.5 México de Creative Commons.
(CC) Shinra SA de CV
tel +52 (55) 84219341
e-mail info@sclbits.com · Contácto · Legal · Pase Usted