Editar páginas HTML desde Firefox con Ubiquity

Ubiquity es un nuevo experimento de Mozilla.Labs con bastantes funciones y un alto espectro de posibilidades.

Con este tip lo que pretendo es compartir algunos de los comandos que maneja Ubiquity, muy útiles en la edición de código HTML ajeno, que he ido descubriendo y probando poco a poco por simple gusto al PlugIn, y lo digo como usuario de algunos kiddie.scripts de GreaseMonkey.

Ahora, quizá te preguntes: "bueno, ¿si hacen casi lo mismo por que no continuar con GreaseMonkey?, tiene un lindo monito de Favicon, y mucha más fama!".

• Si este fue un caso similar al tuyo; considero que se debe al manejo de 0 lineas de código y ningún conocimiento necesario de programación. La lógica desventaja que conlleva esto es que no podrás compartir tu trabajo de la misma manera
• Si no lo fue; continua leyendo !

Requisitos

1. Estar utilizando (preferentemente) a partir de aquí Mozilla FireFox 3.
   
2. La versión Prototipo de Ubiquity Instalada obviamente.

Procedimiento y Comandos de Edición

Ahora continuo a mostrar algunos de los comandos mas interesantes, que probablemente (de no ser por el JavaScript) quitaran peso y muchas lineas de código a GreaseMonkey.

Ademas, recuerdo o en caso de no saberlo aclaro que no es necesario escribir todo el comando, normalmente basta con poner algunas de las iniciales.

Delete HTML ["delete", "seleccion"]

Este comando solo funciona después de utilizar el de "delete". Ya que permite eliminar cualquier elemento del sitio que busques modificar, solo debes seleccionarlo, llamar al comando delete, y pulsar Enter. Inclusive lo veras con un bonito efecto Smooth. Intentalo:

unDelete ["undelete"]

Este comando hace lo contrario al "Delete" ya que devuelve el ultimo elemento borrado. Prueba y devuelve el contenido de arriba.

Edit-Page ["edit-page"]

Este en lo personal es de los mas divertidos, ya que transforma toda la pagina en una versión empotrable de la misma, que te permitirá cambiar el tamaño de los Divs, Imágenes, Texto, etc... Ademas de que puedes agregar, eliminar o cambiar los botones y texto en general, agregando notas a libre gusto. Con un simple drag & drop te sera posible cambiar todo, y sin un poco de código siquiera.

Reemplaza el texto, cambia de tamaño este campo, o juega con esta:

Stop-Editing-Page ["stop-editing-page"]

Al igual que "unDelete", este comando funciona únicamente después de utilizar "edit-page", ya que termina el modo de edición que este mismo crea.

Translate ["translate", "text", "to languaje", "from language"]

Este comando es de los mas útiles también, ya que permite cambiar de idioma sin actualizar la pagina de la mas agradable manera. Como escribí mas arriba no es necesario escribir todo el comando; tan solo las primeras lineas.

Por ejemplo intenta introducir el texto señalado abajo:

tra this to spa fro jap + Enter

Esto funciona de la siguiente manera; trabajando en 4 partes:

1. "tra" es por la abreviación a translate. Igual puede funcionar la palabra completa.
2. "this" es para referirse al texto seleccionado, y no a una introducción adicional.
3. "to spa" se refiere a to Spanish, es decir que traduciremos el texto al español.
4. Finalmente, "fro ja" es de from Japanise, que en este caso estamos traduciendo del japones.

Zoom ["zoom", "percent"]

Como su nombre lo indica, solamente crea un zoom dentro del código fuente de la pagina. Aunque puede resultar útil para algunos Clabers !

HighLight ["highlight", "text"]

Este es uno de los mas sencillos, ya que únicamente subraya el texto seleccionado (this).

Syntax-Highlight ["syntax-highlight", "text"]

Este comando agrega un campo de Texto con el código que introduzcas. Agregando color y formato al código, muy similar a las [ php ] y [ /php ] del foro.

View-Source ["view-source"]

Este comando te muestra en esta misma ventana todo el código fuente de la pagina. Equivalente al clásico "CTRL+U".

TinyUrl ["tinyurl", "url to shorten"]

Este comando, aunque no tiene NPI que ver con el manjeo o edicion de HTML, realmente mola ! Es de los que mas me gustaron ya que permite convertir una extensa URL por medio de TinyUrl a una muy pequeña:

Terminando

Como podrán ver se puede jugar de manera muy sencilla con el source de cada pagina. En mi caso quite los anuncios de FireFox en el home que vienen como default en Google, ademas de los Ads en esta pagina. Y mejor aun, puedes grabar los cambios lo cual le da una ventaja sobre GreaseMonkey, que aunque es obvio que lleva mucho mas terreno gracias a la edición basada en JavaScript solucionara muchas cosas de una manera; "0 Lineas".



Espero que a alguien le pueda ser de utilidad !

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.