joe di castrohttp://joedicastro.com2012-06-14T20:52:00+02:00Productividad & Linux: Pentadactyl2012-06-14T20:52:00+02:00joe di castrohttp://joedicastro.com/productividad-linux-pentadactyl.html<p><a href="http://5digits.org/pentadactyl/">Pentadactyl</a> como su nombre sugiere (<em>"que tiene cinco dedos"</em>), está
pensado para ser usado con los cinco dedos de cada mano, ergo, el teclado. No es
una aplicación en si misma, si no un complemento para el navegador web
<strong>Firefox</strong>. Básicamente podríamos resumirlo en que es un complemento que te
permite controlar Firefox desde el teclado. Pero sería un resumen bastante
injusto para todo lo que te ofrece este plugin. Una pista, los atajos de teclado
están basados en los de
<a href="https://es.wikipedia.org/wiki/Vim">Vim</a>.</p>
<p>Ejemplo de navegación web con Pentadactyl empleando únicamente el teclado.
Observar como el puntero del ratón permanece estático en la misma posición
(parte superior derecha de la pantalla). Es un ejemplo muy básico, pero llega
para hacerse una idea.</p>
<p style="text-align:center;"><img src="pictures/pentadactyl_demo.gif"
width="600" height="400" alt="Pentadactyl" /></p>
<p>En esta imagen se puede ver una ventana de Firefox estándar y una otra de
Firefox con el complemento Pentadactyl activado (con mi configuración). Como se
puede observar, se puede ganar una cantidad significativa de espacio en la
ventana para la página web. En este caso son 170px, un 6% más de espacio
vertical. En el caso de que abriéramos otra pestaña más, aparecería la barra de
pestañas y solo ahorraríamos el espacio que ocupan la barra de menús y la de
navegación. Aunque en mi configuración actual ya he eliminado también la barra de
pestañas e incluso las barras de desplazamiento, solo se ve la línea de estado
de Pentadactyl.</p>
<p style="text-align:center;"><img src="pictures/pentadactyl_vs_ffox.png"
width="700" height="431" alt="Pentadactyl vs Firefox" /></p>
<p>Pero... y la barra de herramientas de navegación, ¿no es necesaria? No, con este
complemento no lo es, dado que las direcciones las introduces a través de la
línea de comandos y la dirección de la página web siempre está visible en la
linea de estado inferior de Pentadactyl. Por ejemplo, para abrir la página web
de google, pulsamos la tecla <strong><code>o</code></strong> y luego escribimos <code>google.es</code> y pulsamos
<strong><code>↵</code></strong> así de sencillo. Si quisiéramos abrirla en una nueva pestaña, bastaría
con pulsar <strong><code>t</code></strong> en lugar de <strong><code>o</code></strong></p>
<p style="text-align:center;"><img src="pictures/pentadactyl_command.png"
width="700" height="118" alt="Linea de comandos de Pentadactyl" /></p>
<p>Aquí se puede ver la línea de estado y la linea de comandos. La línea de
comandos tiene autocompletado y en la imagen se ve como se va a introducir el
comando que activa la completísima ayuda que proporciona el complemento. A la
línea de comandos se accede igual que en Vim, pulsando la tecla <strong><code>:</code></strong></p>
<h2 id="caracter+sticas">Características</h2>
<p>Estas son algunas de las funciones que proporciona Pentadactyl para Firefox, sin
contar con las <a href="http://5digits.org/pentadactyl/plugins">extensiones disponibles para el mismo Pentadactyl</a>:</p>
<ul>
<li>Atajos de teclado basados en vim. Soporta las mismas opciones de contexto que
Vim, por ejemplo, desplazarse dos pestañas hacia la derecha <strong><code>2 <ctrl> +
n</code></strong></li>
<li>Comandos para prácticamente cualquier función de Firefox. Ejemplo: abrir la
ventana de complementos, <strong><code>:dialog addons</code></strong> que puede abreviarse como <strong><code>:dia
addo↹</code></strong></li>
<li>Autocompletado para todos los comandos, opciones, marcadores, bufferes,
motores de búsqueda, ...</li>
<li>Características de privacidad adicionales a las de Firefox y muy potentes</li>
<li>Búsqueda dentro de la página (con resaltado) y navegación a través de los
resultados. Similar a la búsqueda de Vim. Se pueden emplear expresiones
regulares</li>
<li>Macros de teclado (se pueden grabar sobre la marcha) y se pueden personalizar
los atajos de teclado y los comandos (pudiendo ademas añadir otros)</li>
<li>Esquemas de color y extensiones (algunas muy interesantes)</li>
<li>Navegación potente y rápida a través de enlaces, campos de formularios, áreas
de texto, ... desde el teclado</li>
<li>Linea de estado similar a la de Vim</li>
<li>Se pueden ejecutar comandos de shell directamente en la línea de comandos de
Pentadactyl</li>
<li>Interfaz mínimo, pudiendo ocultar menús, barras de herramientas, barras de
desplazamiento y pestañas</li>
<li>Se pueden cargar scripts directamente con el comando <strong><code>:source</code></strong>, soportando
ficheros javascript y CSS, además de comandos propios de Pentadactyl</li>
<li>Se pueden emplear alarmas visuales o sonoras para indicarnos errores</li>
<li>Posibilidad de establecer marcadores de posición dentro de páginas</li>
<li>Marcadores rápidos para acceder de forma rápida a los sitios que queramos</li>
<li>Se pueden editar los campos de texto desde un editor externo</li>
<li>AutoComandos para ejecutar acciones activadas por ciertos eventos</li>
<li>Sistema de ayuda incorporado completísimo que cubre todo lo que el plugin
puede hacer. A la ayuda se accede bien a través de los comandos <strong><code>:help</code></strong> o
<strong><code>:helpall</code></strong> o bien pulsando la tecla <strong><code>F1</code></strong></li>
</ul>
<p>No es mi intención explicar aquí la forma de trabajar con el complemento, ya que
posee tantas opciones y una ayuda tan completa, que lo considero excesivo.
Además no es necesario conocer toda su funcionalidad, de hecho yo sigo
infrautilizandolo y voy descubriendo funciones nuevas de vez en cuando. Por
ejemplo, hasta que no he vuelto a repasar sus funciones para escribir este
articulo, estaba empleando un plugin (It's All Text!) para editar los campos de
texto con gVim, ahora lo hago también con Pentadactyl y de manera aún más
sencilla. Y con este ya van ocho complementos para Firefox que he dejado de
usar porque los suplo con Pentadactyl.</p>
<h2 id="mi_configuraci+n">Mi configuración</h2>
<p>Mi configuración es realmente sencilla, ya que aparte de emplear un par de
extensiones, un par de comandos y un esquema de color, lo demás es cambiar
ciertas opciones predefinidas del mismo. La configuración la he dejado
disponible en mi repositorio de <code>dotfiles</code>, en <a href="http://github.com/joedicastro/dotfiles">GitHub</a>.</p>
<h3 id="validar_el_html_de_una_p+gina">Validar el HTML de una página</h3>
<p>Este es un comando que he añadido a la configuración para poder validar el HTML
de una página empleando la <a href="http://validator.w3.org/">herramienta del W3C</a>. Como se puede ver, se
basa en emplear javascript para definir lo que queremos hacer:</p>
<div class="codehilite"><pre><span class="nx">command</span><span class="o">!</span> <span class="o">-</span><span class="nx">description</span><span class="o">=</span><span class="s1">'Validar XHTML'</span> <span class="nx">valid</span> <span class="o">:</span><span class="nx">open</span>
<span class="nx">javascript</span><span class="o">:</span><span class="k">void</span><span class="p">(</span><span class="nx">location</span><span class="o">=</span><span class="s1">'http://validator.w3.org/check?uri='</span><span class="o">+</span><span class="nx">escape</span><span class="p">(</span><span class="nx">location</span><span class="p">))</span>
</pre></div>
<p>Aquí se puede ver como funciona:</p>
<p style="text-align:center;"><img src="pictures/validate.gif" width="640"
height="400" alt="validate HTML" /></p>
<p>Gracias al autocompletado de Pentadactyl, solo es necesario escribir las dos
primeras letras del comando y pulsar el tabulador y finalmente Intro para
ejecutar la operación. Nos aparece la herramienta del W3C diciendo que la página
ha validado correctamente como HTML 5. Y desde luego esto es más rápido que
emplear el ratón conjuntamente con otro plugin.</p>
<h3 id="guardar_paginas_en_pocket_anteriormente_read_it_later">Guardar paginas en Pocket (anteriormente Read it Later)</h3>
<p>Para guardar páginas en <a href="http://getpocket.com">Pocket</a>, el que hasta hace unas semanas era Read
it Later, empleo también otro comando. Antes empleaba el plugin oficial, pero no
solo consumía memoria si no que para emplear solamente una combinación de
teclas, empleo un comando de Pentadactyl y me ahorro el tenerlo instalado.</p>
<div class="codehilite"><pre><span class="nx">command</span><span class="o">!</span> <span class="nx">pocket</span> <span class="o">-</span><span class="nx">description</span> <span class="s2">"Bookmarklet: Save to Pocket"</span> <span class="nx">open</span>
<span class="nx">javascript</span><span class="o">:</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">ISRIL_H</span><span class="o">=</span><span class="s1">'83dd'</span><span class="p">;</span><span class="nx">PKT_D</span><span class="o">=</span><span class="s1">'getpocket.com'</span><span class="p">;</span><span class="nx">ISRIL_SCRIPT</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'SCRIPT'</span><span class="p">);</span><span class="nx">ISRIL_SCRIPT</span><span class="p">.</span><span class="nx">type</span><span class="o">=</span><span class="s1">'text/javascript'</span><span class="p">;</span><span class="nx">ISRIL_SCRIPT</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="s1">'http://'</span><span class="o">+</span><span class="nx">PKT_D</span><span class="o">+</span><span class="s1">'/b/r.js'</span><span class="p">;</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'head'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">ISRIL_SCRIPT</span><span class="p">)})();</span>
</pre></div>
<p>Podemos ver en esta animación como funciona este comando:</p>
<p style="text-align:center;"><img src="pictures/pocket.gif" width="640"
height="400" alt="Guardar pagina en Pocket" /></p>
<p>La clave para este comando es bien sencilla, primero tener una cuenta en Pocket,
luego ir a la página en la que se nos proporciona un <a href="http://getpocket.com/add/">botón para la barra de
marcadores </a> para añadir las páginas a Pocket. Copiad con el botón derecho
la ruta del enlace que os proporciona ese botón, <em>et voilà!</em>, ahí tenéis el
código javascript que necesitáis para el comando. Luego para ejecutar el comando
solo necesitáis estar logueados en Pocket para que funcione.</p>
<h3 id="editar_+reas_de_texto_con_un_editor_externo">Editar áreas de texto con un editor externo</h3>
<p>Esta opción es para muy cómoda cuando se trata de editar grandes áreas de texto,
pues un editor externo te proporciona mejores y más cómodas herramientas. Además
en caso de que haya algún problema al enviar el texto, sigues teniendo la copia
en el editor.</p>
<p>Activar esta opción es muy sencillo, para Linux y Gvim, añadir esto a el archivo
de configuración:</p>
<div class="codehilite"><pre><span class="k">set</span> editor<span class="p">=</span><span class="s1">'/usr/bin/gvim -f +<line> <file>'</span>
</pre></div>
<p>Después puede ser empleado como comentaba para editar áreas de texto, o para
abrir el código fuente de una página, entre otras posibilidades.</p>
<h3 id="readability">Readability</h3>
<p>Para usar este servicio empleo una extension, <a href="https://github.com/grassofhust/dotfiles/blob/master/.pentadactyl/plugins/readability.js">readability.js</a>, que es
necesario descargar y añadir al directorio <code>~/.pentadactyl/plugins/</code>. Para
ejecutarlo solo necesitamos emplear el comando <strong><code>:rea ↹ ↵</code></strong>, como podemos ver
en esta animación:</p>
<p style="text-align:center;"><img src="pictures/readability.gif" width="640"
height="400" alt="Readability + Pentadactyl" /></p>
<h3 id="http_headers">HTTP Headers</h3>
<p>Esta es otra extensión que nos permite ver las cabeceras HTTP de una página. Es
una de las <a href="http://5digits.org/pentadactyl/plugins">extensiones oficiales </a> y al igual que la anterior, basta con
añadirla al directorio de plugins de Pentadactyl.</p>
<p>Si queremos ver la información que Pentadactyl nos ofrece de una página,
escribimos el siguiente comando <strong><code>:pageinfo</code></strong> y podemos ver algo como esto:</p>
<p style="text-align:center;"><img src="pictures/pageinfo.png" width="700"
height="190" alt="pageinfo" /></p>
<p>Ahora, si queremos ver las cabeceras, tenemos estas dos opciones:</p>
<ul>
<li>Request Headers, <strong><code>:pageinfo h</code></strong></li>
</ul>
<p style="text-align:center;"><img src="pictures/requesth.png" width="700"
height="141" alt="Request Headers" /></p>
<ul>
<li>Response Headers, <strong><code>:pageinfo H</code></strong></li>
</ul>
<p style="text-align:center;"><img src="pictures/responseh.png" width="700"
height="150" alt="Response Headers" /></p>
<p>Y podemos ver las dos a la vez empleando <strong><code>:pageinfo hH</code></strong></p>
<h2 id="alternativas">Alternativas</h2>
<p>Existen diferentes alternativas para este complemento, tanto para el mismo
Firefox, como para otros navegadores. Pero ninguna es tan completa como este.</p>
<p>Podríamos empezar por <a href="http://www.vimperator.org/vimperator">Vimperator</a>, que es el plugin original, ya que
Pentadactyl es un fork del mismo por parte de algunos de los desarrolladores
originales del mismo. Luego tenemos a <a href="http://code.google.com/p/vimium-firefox/">Vimium</a> que en este caso es una
versión del mismo plugin para Chrome.</p>
<p>Para Chrome/Chromium tenemos también varios plugins disponibles,</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/godjoomfiimiddapohpmfklhgmbfffjj">Vrome</a></li>
<li><a href="https://chrome.google.com/webstore/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Vimium</a></li>
<li><a href="https://chrome.google.com/webstore/detail/gghkfhpblkcmlkmpcpgaajbbiikbhpdi">vichrome</a></li>
</ul>
<p>Existen alguno que otra solución para Safari y Opera, si no me equivoco.</p>
<h3 id="navegadores_con_control_a_trav+s_del_teclado">Navegadores con control a través del teclado</h3>
<p>Existen una serie de navegadores, todos ellos pensados para ser muy ligeros y
todos basados en <a href="http://es.wikipedia.org/wiki/WebKit">Webkit</a>, que implementan la navegación por teclado por
defecto. Además estos que muestro están basados en los atajos de teclado de
Vim.</p>
<ul>
<li><a href="http://www.uzbl.org/">Uzbl</a></li>
<li><a href="http://sourceforge.net/apps/trac/vimprobable/">Vimprobable</a></li>
<li><a href="http://portix.bitbucket.org/dwb/">dwb</a></li>
<li><a href="http://mason-larobina.github.com/luakit/">luakit</a>, orientado a programadores y usuarios avanzados.</li>
</ul>
<h2 id="teledactyl">Teledactyl</h2>
<p>Los mismo desarrolladores de Pentadactyl tienen disponible otro plugin para la
otra gran herramienta de la <a href="https://es.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, el cliente de correo
electrónico <strong>Thunderbird</strong> , y aunque está en desarrollo en fase muy temprana, se
puede usar: <a href="http://5digits.org/teledactyl">Teledactyl</a>. Aunque si queremos emplear un plugin similar,
pero con un desarrollo más maduro, podemos escoger la herramienta hermana de
Vimperator, <a href="http://test.vimperator.org/muttator">Muttator</a></p>
<h2 id="productividad">Productividad</h2>
<p>Se qué me dejo muchas posibilidades de este plugin en el tintero, pero el
articulo se haría eterno. Si no ha despertado ya tu curiosidad por lo que te he
contado y mostrado, difícilmente lo hará ya. Ahora bien, si decides probarlo,
entonces seguro que serás el primero en mirar la ayuda para intentar sacarle
todo el jugo que este complemento te aporta. A lo poco que lo domines,
incrementara tu productividad en la navegación web considerablemente.</p>
<p>Y es que una vez te acostumbras a él -si conoces Vim y tienes soltura con él,
todo te será muy natural- la diferencia entre navegar con el teclado y el ratón
es abismal, no hay color. Tamaña es la diferencia que ni siquiera me planteo el
cambio de navegador por otro, porque todos carecen de Pentadactyl. Si navegas
habitualmente por la red, agradecerás mucho el tiempo que un plugin como este te
devuelve para emplearlo en otras tareas.</p>