Esta herramienta me la recomendó huasonic y le estoy (jajaja flaite) completamente agradecido por eso.
Web Developer es un add-ons para firefox (ahora si no conoces firefox, estamos en problemas - -> Urgente click aquí) que esta pensado para desarrolladores de plataformas web, entre las muchas herramientas que este add-ons posee, una es la posibilidad de manejar el css de una pagina web en tiempo real, vale decir, que puedo cambiar el css de cualquier página que este mirando en ese minuto a mi antojo, desde luego, a medida que modifico el css, la página cambia.
Pero veamos como funciona.
Al instalar Web Developer, este nos instala una barra en firefox (la cual es posible de quitar cuando queramos, yo la ocupo cada ves que edito un theme y luego la desactivo)
(Click en las imagenes para agrandar)
Esta barra tiene una serie de menus, pero el que más nos va a interesar para el desarrollo de un theme es el menú de css (señalado con rojo)
La pagina se nos vera algo asi.
En el menú de css hay 2 funciones que son de gran utilidad a la hora de hacer algo en bligoo, las cuales son. View Style Information y Edit CSS
Primero vamos a ver Edit CSS
Edit CSS es la opción que nos permite editar el css en tiempo real, al presionar sobre él el navegador se separa en 2 dandonos da la posibilidad de ver el codigo css y poder realizar cambios sobre él.
Por ejemplo busquemos la línea (el codigo) del fondo de la pagina, (mancha de pintura)
Y borrémosla, inmediatamente este desaparece, de la pagina.
Así podremos editar el theme de nuestro blog y ver inmediatamente los cambios que vamos produciendo.
La otra opción que les comente es de View Style Information, está opción nos provee de información sobre los diferentes bloques, módulos, estilos, barras etc… (entiéndase titulo, post, blidgets, pie de pagina, link, etc…) que componen la pagina. Al presionar sobre él nos mostrara otra barra de herramientas y el mouse nos cambiara de puntero, por una cruz, al mas puro estilo de un juego de shooter
Esta opción nos permite ver las diferentes opciones, valga la redundancia, de la opción de las opciones. Jajajjajaajja no falso… . Esta opción nos permite ver como esta configurado mediante css una sección de la página, al pasar el mouse sobre diferentes secciones, estas toman un marco rojo, para identificar cual es el espacio o bloque, que conforma dicha configuración de css. Aquí entra en juego una configuración de bligoo muy peculiar y sumamente poderosa, cada ves que nosotros creamos un blidget, o post, este tiene una id (identidad) única, diferente a cualquier otra que existe en el blog y me parece que en toda la comunidad de bligoo también, esta id unica aparece en la barra superior antes mencionada.
Por ejemplo, al pasar el mouse sobre un blidget en particular, aparecerá su id en la barra superior, #block-918
Ahora que yo se su id, vamos a hacer unos cambios en el blog. Vamos a borrar el fondo rojo, luego vamos a centrar el blog y luego agregaremos un fondo al blidget del cual acabo de saber su id (identidad). Para esto voy a usar el Edit CSS y View Style Information en paralelo, por si se me olvida el id, es cosa de pasar el mouse sobre el blidget.
Si les gusta como quedo el theme, seleccionan todo el texto y lo remplazan por el css existente, si no les gusta, no se asusten por que solo deben cerrar las opciones para que todo vuelva a la normalidad.
Recuerden revisar los link de W3Schools Online Web Tutorials, para tener un mejor manejo de css, y para los iniciados Manual CSS de Webstilo
Saludos.! ;)
Este sitio funciona sobre la
Mish
Axes Gino M. Villablanca Arias axes4466[o]gmail.com