Arsenal del Dev: Firebug I: Navegacion HTML

Publicadas por Jose Carlos Tamayo

Y para coronar mi regreso aqui un pequeño tutorial sobre esta gran herramienta. Este Plugin de Firefox es vital para cualquier chango que quiera desarrollar Paginas Web, incluyendo por supuesto Juegos Web. ¿Y que es lo que hace esta magica herramienta?, Que es lo que no hace deberian de preguntarse. Empezare por lo mas basico:

1) Modificacion de tu HTML
A veces te pasa lo siguiente: Tienes tu HTML generado de forma dinamica y para ver el resultado tienes que ver el codigo tal como te bota en blanco y negro y posiblemente muchos TAG aglomerados en una sola linea, simplemente brutal.


Agradezcan que Fierfox te colorea el codigo siquiera. ¿Han tratado de ver el codigo en IE6?

Con Firebug no solo puedo pasearme por el codigo HTML como si fuera un dia de campo y verlo todo coloreado resaltando los datos de los atributos, tambien puedo modificarlo, cambiandole el texto, añadir nuevos atributos, es mas puedo eliminar Tags completos solo por el gusto de ver que pasaria si elimino esa molestosa ventana flotante o ese quisquilloso DIV que me esta tapando la informacion.


En la parte de Abajo podemos apreciar el navegador de HTML. Rojo y azul excelente!

2) Selector de HTML
Ok ya tenemos nuestro navegador de HTML, ahora digamos que tenemos un tag que esta que molesta la vista, y tambien digamos que tu HTML es de 15k, asi que buscar nodo por nodo va a ser toda una travesia. Pues esos problemas se acabaron, haciendo un click en la pantalla puedes navegar hasta la parte del codigo donde aparezca ese elemento DOM que buscas.


Solo seleccionas la herramienta Inspeccion para anvegar a travez de tu pagina web


3) Cambia tu CSS al vuelo
Ok ya tienes seleccionado tu etiqueta, haz probado eliminarla y se ve bien. ¿Que sigue despues?. Manipula tu CSS on the Fly!!!. ASi es con firebug puedes cambiar tu CSS y ver los cambios al instante, sin necesidad de estar entrando una que otra vez a tu archivo CSS y presionando F5. Tan solo seleccionas tu propiedad y empeizas a manipularlo. Y si eres de gustos exigentes puedes crear nuevas propiedades a cualquier elemento.


Cambiandole el estilo a mi editor de Blogger. ¿Ven como aumente los bordes?

Destilado de Awesomeness en este debugeador web. La siguiente entrada hablaremos un poco sobre javascript y ajax asi que stay tune .


PD: Obviamente este plugin solo funciona para Firefox, aunque hay varios debugers que tratan de funcionar asi de bien en otros navegadores.

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

Arsenal del Dev: Aptana for Eclipse

Publicadas por Jose Carlos Tamayo


Desarrollar juegos para web no es tarea facil. Tienes que preocuparte por varios lenguajes y tecnologias al mismo tiempo. Es por eso que hace un año empece a buscar la herramienta perfecta que me ayude a desarrollar en css, javascript, html y php al mismo tiempo. Por un tiempo estuve con el Dreamweaver CS3. No es una herramienta mala, bien util en PHP, pero mis necesidades en el codigo javascript, ademas de todas las librerias que usaba limitaban al buen Dreamweaver, una herramienta propia de Diseñadores Web. Es ahi cuando encontre al Aptana.

Aptana es un IDE que ahora corre como una extension del ya mitico Eclipse o como version Standalone,aunque recomiendo la version para Eclipse. Nos permite crear codigo principalmente en HTML, Javascript y CSS de una forma por demas deliciosa.

Por supuesto lo que mas llama la atencion es que su version Community es totalmente gratuita. Yo uso esa y de verdad, me hace las cosas mas sencillas.

Si quieres usarlo pues son 3 pasos basicos:

  1. Bajate el Eclipse. Recomiendo la version Classic
  2. Bajate el Aptana for Eclipse. Ahi te dan las faciles instrucciones para instalarlo
  3. Actualiza tu Aptana y disfruta
Goodies:
  • Puedes trabajar codigo en Html,Javascript y Css. Ademas tienes una extension para trabajar codigo en PHP muy buena y completa.
  • Ademas tienes mas extensiones para trabajar con Ruby on Rails, Adobe Air 1.5 , Iphone y Python. Me falto mencionar que tambien puedes trabajar con WRT para celulares nokia
  • Funcionalidades especiales para las siguientes librerias javascript Jquery,Dojo,Yahoo,Ext Js, Motools, Prototype, Scriptaculos, Adobe Spry, Microsoft ASP.NET Ajax Controls, OpenRico y Aflax.
  • Outline Visualizator, navega por tags,variables y funciones, codigo en css ,javascript ,html y hasta en PHP!. De lejos la funcion mas util para mi

  • Autopadding: Supon que ingresas un if de ultimo momento , todo el codigo que este dentro de los nuevos corchetes se identa. Aptana ademas identa tu codigo en otros tipos de situaciones de una forma por demas inteligente. Me dejo pensando que Aptana esta vivo, o hay duendes magicos bien ordenados dentro del codigo.
  • Ademas en teoria tiene un debugeador de javascript bastante bueno. No lo he probado pero segun los comments leidos hace todo mas facil e interesante y ademas soporta todas las librerias citadas antes.
Lo unico que me parece un poco complicado es al momento de configurar tu servidor web. Pero lo bueno es que existe toneladas de documentacion con imagenes en la pagina principal de Aptana, asi que no hay pierde =).

A que esperas, empieza a usarlo ahora!!!

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me