Icono de nuestro sitio en la barra de navegacion

En un post anterior expliqué como poner un ícono para nuestra página web (favicon), si no contamos con un graficador capaz de exportar a formato.ico siempre podemos contar con una muy util herramienta online como es Favicon.ico Generator con esta aplicación podemos subir nuestras imágenes, incluso podemos editarlas y tener una vista previa de como va quedando nuestro favicon para luego obtener el archivo .ico listo para ponerlo en nuestro sitio.

Buscar colores para nuestra pagina web

Cuando diseñamos es importante saber elegir los colores, algunas veces lo hacemos “al ojo” o guienadonos por nuestro propio gusto, sin embargo hay herramientas que nos pueden dar una mano a la hora de definir colores afines entre si, en este caso encontré Color Sheme Designer, es una excelente herramienta que ademas nos permite exportar nuestros colores en paletas para Photshop.

Tutorial firebug

Firebug es una de esas herramientas indispensables para todo desarrollador de páginas web, nos permite encontrar errores en nuestro código muy rápidamente ya sea html, css o javascript.
Podemos descargarlo desde su site

¿Como funciona?

Luego de instalar Firebug en nuestro Firefox, debemos apretar la tecla F12 y se nos mostrará las consola de firebug como esta

consola-firebug

Consola Firebug

Esta es una de las pestañas más interesantes en esta se mostrarán los errores javascript, en caso que aparezca un error basta dale un click y nos llevará a la linea donde se produce el error, además podemos ver las llamadas AJAX, tanto los datos que enviamos como la respuesta, incluso los errores con nuestro CSS aparecerán aqui

consola-firebug2

Firebug HTML

Esta es una de las pestañas mas interesantes a la hora de arreglar esas páginas que se descuadran o para maquetar y acomodar nuestro diseño, en la parte izquierda esta el codigo HTML, si deseamos ubicar una sección en nuestra página basta darle click al segundo ícono (Inspeccionar) y asi podremos ubicar rapidamente el elemento que queremos editar; a la derecha esta el CSS del elemento HTML que hemos seleccionado con tres pestañas:

• Estilos, donde aparece una lista de los estilos aplicados al objeto, es posible editarlos directamente o agregar estilos aunque estos cambios no se grabarán
• Maquetación, la segunda pestaña nos muestra el tamaño del elemento, margenes y padding de nuestro elemento
• DOM, nos muestran los detalles de nuestro elemento

Firebug CSS

Aunque me parece más util la anterior pestaña, aqui podemos editar directamente nuestro codigo CSS

Firebug Script

Desde esta pestaña, Firebug nos permite ver nuestros javascript, pudiendo iniciar la depuración, mostrarnos errores en el código

script-firebug

Firebug Red

Esta es una de las pestañas más importantes para optimizar nuestro sitio, nos muestra los tiempos de carga de los distintos elementos y además nos indica si falta algún archivo.

red-firebug

Complementos de Firebug

Además existen algunos complementos para firebug, para este tutorial por ejemplo he usado Firecookie, un plugin que me permite ver las cookies creadas, una herramienta ideal a la hora de hacer sistemas de login, carritos de compras y otros, aunque existen algunos agregados mas para Firebug

Pixlr edita tus fotos online

Hace poco encontré esta fantástica herramienta que nos puede salvar de algún apuro, es un completo graficador que no requiere que lo instalemos ya que se trata de una aplicación online con una interfaz similar a Photoshop.

Este graficador puede editar los principales formatos gráficos para web e incluso PSD
Pueden verlo en acción Aquí

IE Tester 0.3 prueba tus paginas

Uno de los dolores de cabeza de todo desarrollador es hacer sus páginas compatibles entre todos los navaegadore o por lo menos entre los más populares lo cual lamentablemente no significa entre los mejores; basta que recordar que el peor navegador (y por muuuuchas razones) es Internet Explorer 6 y sin embargo es el más utilizado.
Asi que debemos probar nuestras páginas web entre IE6, IE7 y ahora ultimo IE8 RC1, Firefox por lo general no da problemas si hacemos las cosas bien además de tener al poderoso Firebug como aliado (IE 8 sacó una copia un tanto deficiente llamada IE developer toolbar). Bueno vamos al grano IE Tester es una herramienta que nos permite probar nuestra página en distintas versiones de Internet Explorer de forma muy facil, lo mejor es gratuito y podemos bajarlo aqui