¿Quieres registrarte?

Editar páginas HTML desde Firefox con Ubiquity

Por: M@U
13 de Septiembre del 2008
5085 de clabLevel
Otros artículos de M@U
4,910 visitas

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!".


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:

Hey ! ¿Crees poder eliminarme? :P


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:

多くのおめでとう!





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:

http://www.mapquest.com/maps/map.adp?ovi=1&mqma
p.x=300&mqmap.y=75&mapdata=%252bKZmeiIh6N%252bI
gpXRP3bylMaN0O4z8OOUkZWYe7NRH6ldDN96YFTIUmSH3Q6
OzE5XVqcuc5zb%252fY5wy1MZwTnT2pu%252bNMjOjsHjvN
lygTRMzqazPStrN%252f1YzA0oWEWLwkHdhVHeG9sG6cMrf
XNJKHY6fML4o6Nb0SeQm75ET9jAjKelrmqBCNta%252bsKC
9n8jslz%252fo188N4g3BvAJYuzx8J8r%252f1fPFWkPYg%
252bT9Su5KoQ9YpNSj%252bmo0h0aEK%252bofj3f6vCP

tiny this: Enter


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 !

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas html 2.0 firefox

Comentarios | Enviar un comentario
Buen resumen. Muchas gracias! Habrá que probarlo y darle una patadita al monito...
Por: Carmen
Muy buen tip. Gracias ;)
Por: elchininet
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.