Firefox: El navegador de los desarrolladores y diseñadores web

Con la llegada de Firefox 11 que ahora tiene integrado herramientas para los desarrolladores y diseñadores web además de sus excelentes extenciones, es el navegador para la programación y el diseño web por excelencia y una ventaja para la competencia aunque Chrome y Opera tiene herramientas para el desarrollo web no estan tan avanzados como Firefox ya que lleva más años y dedicación en estos temas y va seguir perfeccionando estas herramientas.

Solo tienes que ir a botón Firefox > Diseñador web > Style Editor (para editar CSS) o Inspeccionar (para ver HTML o CSS) entre otras herramientas.

Aquí una demostración de Firefox con sus herramientas web en este video se muestra cuando Firefox 11 estaba en Beta.



y este es una de las novedades más sorprendentes puedes ver tu sitio en 3D solo debes ir botón Firefox  > Inspeccionar y presionar el botón 3D en la barra inferior. Debes tener una tarjeta de video con soporte 3D y compatible.




Descarga Firefox: http://www.mozilla.org/es-CL/firefox/new/

Como modificar una plantilla en Wordpress con Firebug

Firebug es uno de los plugins en Firefox más importantes para un desarrollador o diseñador web. WooThemes muestra como modificar una plantilla de Wordpress en Firebug facilitando bastante a los diseñadores sin tantos conocimientos de programación, lo recomiendo totalmente, también sirve para las plantillas de Joomla.

Aquí les dejo un video explicativo de como se usa Firebug en una plantilla Wordpress (en inglés)


How to use FireBug to modify a WordPress theme from WooThemes on Vimeo.

Fuente: http://wpsites.net/tools/what-is-firebug/

Artisteer: Haz Templates personalizados de CMS de forma facíl y rápida

En el mundo de los CMS hay muchos templates o plantillas gratuitas que los más expertos los modifican a travez de Dreamweaver u otro editor de XHTML y CSS. Pero hay muchas personas que no saben estos tipos de lenguajes de programación web pero quieren un sitio con un estilo propio o podria de ser de ayuda para los diseñadores web que tienen muchas cosas que hacer y tienen que entregar un sitio de un día para otro, que a muchos nos pasa eso.

Artisteer es un programa que funciona en Windows y que puedes hacer templates personalizados de una forma rapida y fácil sin conocimientos de programación, todos los templates de los CMS cumple con tres partes básicas que es el encabezado (head), el cuerpo (body), y el footer o pie de pagina y que puedes modificar imagenes, colores, texto a tu gusto. Este programa puede realizar tenplates para Wordpress, Joomla, Drupal, Blogger o DotNetNuke o también puede hacerlo en HTML, ASP, CodeCharge Studio.

Aqui les dejo un video de como instala y se utiliza este programa hay muchos videos tutoriales en Youtube pero elegí este como agradecimiento ya que tiene el programa completo y lo probe sin problemas.



Si quieres descargar el Artisteer completo descarga aqui: http://depositfiles.com/files/rkuo8e7ip

Herramientas para desarrolladores web en Google Chrome, Opera e IE8

Firefox es el navegador de los diseñadores y desarrolladores web por su cantidad de aplicaciones dedicadas al desarrollo web que estan las 10 herramientas más importantes que escribí un tiempo atrás y se utilizan para estos profesionales. Sin embargo hay otros navegadores que tienen herramientas de desarrollo web, no son tan completas como las de Firefox pero podrian ser muy utiles para ver como se ven estos sitios en otros navegadores ya que no todo es Internet Explorer o Firefox también hay exelentes navegadores como Google Chrome, Opera o Safari, de hecho cada vez más diseñdores ocupan Google Chrome por su rapidez y seguridad. Con estas herramientas puedes ver e incluso editar CSS, Html, Scripts, etc.

Para ir a las herramientas para ver estas herramientas deben ir a:

Google Chrome:
En Google Chrome que cada vez más lo estan utilizando diseñadores web, hay que ir al icono de la hoja o archivo > Opciones de desarrolladores > Herramientas para desarrolladores o presionar Crtl + Mayusc + I y aprecera un nueva ventana que es una buena herramienta para ver como funciona el sitio o pagina puedes ver los CSS, Html, los Scripts, también puedes ver la velocidad del sitio en cuanto a bajada, el scripting y el renderizado. El único inconveniente es que no se puede editar el CSS ni Html. Tambien hay una extensión de Firebug un exelente editor web para Google Chrome.

Opera:
Opera tiene una herramienta de desarrollo web llamado Opera Dragonfly, es una exelente herramienta web, es muy parecido a Firebug una extensión de Firefox, para probarlo debes ir en Opera 10.5 a la O o la pestaña roja en la parte superior-izquierdo a Pagina > Herramientas de desarrollo > Opera Dragonfly con esta herramienta puedes ver los CSS, Html, Scripts, tiene un selector con el puntero para saber cual es el elemento y su ubicación en el código, y lo más importante que se puede editar el CSS ahi mismo. Es una de las mejores herramientas web que viene dentro de un navegador incluido.

Internet Explorer 8:

A pesar que este navegador es odiado por muchos (que me incluyo) lamentablemente es la más utilizada es por eso hay que tenerlo en cuenta, también tiene una herramienta para web hay que ir a Herramientas > Herramientas de desarrollo o presionar F12. También te permite ver Html, CSS y Scripts.

Las 10 extensiones Firefox que todo webmaster debe tener

Firefox el navegador por exelencia por los desarrolladores, diseñadores web, webmasters y seguidores de las tendencias web, por sus inumerables extensiones, plugins o add-ons que tiene este navegador del software libre, aquí daré las 10 extensiones más importantes que todo constructor web sobre todo en los CMS debe tener. Si quieres puedes ver las 50 extensiones Firefox para los webmasters también.

1.- Web Developer: Es una barra de herramientas al navegador. Esta barra permite efectuar muchas cosas, como editar CSS y HTML, validar una página en W3C, reglas para calcular los elementos, indicador de los elementos en CSS, etc. Se necesitara un poco de tiempo para aprender a manejar todo, pero es de verdad un plugin indispensable.

2.- FireBug: permite explorar la estructura de una página (Javascript, CSS, HTML y Ajax) y descubrir los detalles menores. Si encuentran problemas con sus escrituras, podrá ayudarles gracias a un debuggeur Javascript muy potente.

3.- EditCSS: muestra las propiedades CSS de un sitio web, además de editarlas.

4.- IE Tab: cuando se desarrolla un sitio web, es necesario garantizar que se visualizara de la misma manera sobre Firefox y sobre Internet Explorer (puesto que son los navegadores más utilizados hoy). Para evitarles tener que alternar entre estos dos navegadores, es posible gracias a este plugin abrir dentro de Firefox un ventana que utiliza el motor de Internet Explorer.

5.- MeasureIt: como su nombre lo indica, MeasureIt es útil para tomar medidas en pixel. Es posible comprobar el tamaño o la alineación de las imágenes muy fácilmente.

6.-View Dependencies: con este plugin, se puede ver todos los ficheros (imágenes, escrituras, etc.) de una pagina que este en redweb. Contabiliza incluso el peso total. Es muy práctico para ver cómo se ha codificado una página en Internet, esto se ejecuta en "Ver información de la página".

7.- ColorZilla: este plugin permite ver los colores (y su código en formato RGB o hexadecimal). Embarca un selector de color (color picker en inglés) y permite también capturar el color de un elemento de una página en que lo señala al ratón.

8.- UrlParams: Es muy útil para garantizar que un formulario funciona bien.

9.- SEOFirefox: Excelente plugin para todos aquellos, a quienes les gusta ver las estadísticas de Google y Yahoo en resultados de búsqueda. Usted puede obtener de Alexa, Google PageRank, Tehnorati ranking y muchos otros datos útiles.

10.- FireFTP: Este es un exelente cliente FTP para subir o bajar tus archivos al servidor en el mismo navegador sin necesidad de abrir otro programa.

Fuente: http://cosassencillas.wordpress.com/2007/04/23/8-plugins-firefox-indispensables-para-desarrollar-un-sitio-web/