Firebug: el complemento imprescindible para webmasters

Firebug Logo

 

Firebug LogoIncontables veces miramos nuestra web y vemos una imagen fuera de lugar, un texto sin el tamaño adecuado, un borde descuadrado o, simplemente, no sabemos dónde modificar un parámetro concreto (como el color del texto de una zona concreta).

Siempre me han preguntado cómo soy capaz de adivinar qué hay que cambiar y a donde ir para hacerlo. Nada de magia, nada de trucos. Bueno, tal vez si sea un truco, pero no es más que el conocido Firebug.

Firebug es un complemento para el explorador Firefox que tiene sus primos hermanos en otros exploradores como Chrome. Sin embargo, en este artículo me centraré en él y os lo mostraré breve y gráficamente.

 

¿ Para qué sirve Firebug ?


Firebug nos permite ver y detectar el código HTML, CSS e incluso Javascript de nuestra web y modificarlo a tiempo real. Para aquellos no duchos en estos términos, nos permite ver, en una sola interfaz, todos los archivos (y sus consecuentes parámetros) que dan forma al contenido de la página actual en la que estamos.

Supongamos, por ejemplo, que no me gusta el color, el tamaño o la fuente del “Pagina web personal y blog” que veis arriba.

Extiendo Firebug y la herramienta para seleccionar elementos.

Herramienta Firebug

Después hacemos clic en el elemento, en este caso “Pagina web personal y blog”

Herramienta Firebug

 

Como podéis ver, al seleccionar el elemento nos indica la línea final del HTML. También los parámetros CSS o de estilo, que son los que determinan el estilo, en este caso, del texto. Así, sabemos que la fuente es una Georgia, y el color un#864a4a, incluso el tamaño o si está en cursiva.

Si queremos modificarlo, tan sólo tenemos que ir a nuestro gestor de archivos de servidor y modificar el archivo en la línea que nos indica.

Pero, sin embargo, lo mejor de Firebug es que, si antes de modificarlo, quieres ver cómo queda, solo tienes que hacer doble clic para cambiar el parámetro.

Podemos añadir nuevas líneas de código, o modificar las existentes, todo ello, sin realizar ningún cambio real, y sin salir de nuestro explorador. (Ojo, no refresquéis la página o perderéis los cambios. Y, si queréis otro consejo, no hagáis muchos a la vez o, la hora de hacerlo reales, no recordaréis cuales son.)

Otra de las ventajas que tiene es que pueden integrarse servicios como el YSlow, que nos permitirá medir en cuanto tiempo se carga nuestra página y qué cosas debemos de hacer para mejorarlo, según las preferencias de los exploradores.

 

Fácil y útil ¿eh? Echadle un vistazo, lo mejor de ello, es que es gratis.

¡Dejar un comentario también es gratis! 😀

 

Google +1 ya disponible

boton+1

 

Como ya os comenté en el artículo anterior sobre el botón de Google, el botón +1, la llegada de este botón no seharía esperar mucho más. Bien aquí lo tenemos, lo podéis encima de este artículo.

Lamentablemente, no puede utilizarse con cuentas de Google Apps (como tampoco es posible utilizar Buzz) de modo que aquellos que hagamos uso de ellas deberemos de usar una alternativa de Gmail.

Ahora sólo queda experimentar con el botón y comenzar a sacarle fallos ¡O cantar sus maravillas!

 

boton+1

 

35 páginas de stock de imágenes gratuitas para tu blog

Imágenes de stock

Si tienes un blog o una página web, te habrás encontrado con el dilema de las imágenes. La gran mayoría de las que circulan por internet tienen derecho de autor, y las que no, pertenecen a páginas de fotos de stock de pago.

Existen una serie de alternativas a estos sitios de pago que, si bien pueden no suplir todas nuestras necesidades, nos ayudan a salir del paso.

¡Aquí os dejo la lista!

 

stock xchngStock.xchng Personalmente, es la primera que ojeo, la calidad es buena y hay una relativa variedad.

Freefoto.com Freefoto.com Gran variedad y división por categorías.

kavewall Kavewall.com Imágenes y texturas

A digital dreamer Digital Dreamers Numerosas galerías

stockvault StockVault.com Página bastante extensa (cuidado, os mostrará también resultados patrocinados)

FreePhotosBank FreePhotosBank.com Lo mismo, divididas en categorías.

Fredigitialphotos Freedigitalphotos.com Gran cantidad de imágenes

Stock Art Deviant Art Stock Art DeviantArt ¡Las imágenes pueden ser asombrosas! Todos concemos Devian Art. Consultad las condiciones de uso de cada uno.

Cepolina.com Imágenes en diferentes formatos.

turbophoto Turbophoto.com Pequeño sitio de imágenes de stock

Freestockimages.net No hay mucha cantidad de imágenes pero no son malas 🙂

unprofound Unprofound.com Creado y gestionado por diseñadores (No requiere registro)

Vintage Pixels Vintagepixels.com Fotos e imágenes de estilo “vintage” (la calidad no es muy buena)

imageafter Imageafter.com Imágenes y texturas

FreePhotosIndex Tiene muy buenas imágenes pero la web es bastante mala en cuanto al diseño y estructura

Every Stock Photo Everystockphoto.com Muy buen sitio web con gran cantidad de imágenes (¡cuidado con las promocionales!)

MorgueFile.com Bastante conocido y con buena calidad de imágenes

pixelperfect Pixelperfectdigital.com Fotografía digital

Freerange Freerangestock.com Muy buen sitio de imágenes de stock, recomendado.

Animation Factory Animationfactory.com En este caso es un directorio de animaciones

woophy Woophy.com Fotos de lugares del mundo

Mayang.com Buen directorio de texturas

FromOldBooks.com Si los libros antiguos es lo tuyo, este es tu directorio

TextureWarehouse.com Almacén de texturas de gran calidad, merece un vistazo.

designpacks Designpacks.com Packs de imágenes por temas para descargar

ZurbPhotos ZurbPhotos Descarga imágenes de Bryan Zmijewski

AmazingTextures AmazingTextures Hay un pequeño directorio con muestras gratuítas

diwiesign Diwiesign La fotos son muy buenas y gratuítas, aunque se anima a hacer donaciones para mantener el proyecto.

TOFZ TOFZ.org Stock de imágenes urbanas de diferentes ciudades del mundo

LightMatterPhotography Fotos del fotografo Aaron Logan (¡recomendadas!)

FreeImages FreeImages.co.uk El diseño de la web no es muy bueno, pero hay bastante imágenes, algunas muy buenas.
creatingonline Creatingonline Hay tanto fotos premium como de stock.

creativity103 Creativity103 Fondos abstractos, un buen stock de imágenes.

freemediagoo FreeMediaGoo Stock de Imágenes, Audio, Texturas y Flash

Une Image au Hasard Une Image au Hasard Galería de imagenes de fotógrafo amateur

 

¡Y aquí acabamos! Se trata básicamente de que tengas una lista completa de la que podáis seleccionar aquellos que más se ajustan a vuestras necesidades.

Si alguno cambia a modo de pago, o simplemente eliminan el sitio ¡no dudes en avisarme!

También podéis comentarme de alguno más que pueda añadir. ¿Usais vosotros alguno de los anteriores?

 

 

 

 

 

Perder clientes por tu página web; una realidad.

Diseño Web

 

¿Te representa tu web?Hace unos días uno amigo estaba decidiéndose por una empresa para solicitar un servicio. Me pidió consejo, y me pasó el enlace a la página web de una empresa con unos precios realmente asequibles. Con sólo abrir la página deseché la empresa.

Algunos consideraran que es una simple cuestión de prejuicios. Sin embargo mi experiencia me ha demostrado que, si bien no debemos dejarnos llevar por la imagen, esta siempre ofrece mucha información, información de valor incalculable.

De la misma forma en la que es importante ir arreglado a una entrevista de trabajo, también lo es presentarse “arreglado” ante unos clientes.

Como explico en la sección de Diseño Web de mi web/blog, nuestra página web es nuestra tarjeta de presentación hoy en día. Y esta, es una realidad a la que las empresas han de saber responder.

 

¿Que errores comentan las empresas en sus páginas web?

Diseño: Uno de los principales problemas con los que nos encontramos es el diseño. Ya sea por falta de gusto del responsable de la empresa, o por incompetencia de quien la haya diseñado. El diseño es crucial. Crucial. Nadie quiere una empresa desaliñada.
El responsable de la empresa deberá de tener en cuenta que, su criterio, no es el criterio de los clientes.

Información: Créeme, nadie se va a leer esa estupenda página dónde, en 10 parrafos, explicas toda la historia de tu empresa. No, no siquiera añadiéndole un par de dibujitos.

Marketing desafasdo: Últimamente me encuentro con experimentados profesionales con grandes conocimientos del sector y del marketing que repiten hasta la saciedad el gran conocimiento que tienen sobre el marketing. Claro está, se les olvida mencionar que  se trata de un marketing del siglo XIX en el que el lema “¡¡¡OFERTA!!! ¡¡¡COMPRA YA!!! ¡¡¡SOMOS LO QUE BUSCAS!!!” en Arial 30 en ROJO es muy “cool” y consideran que Times New Roman 12 es clásico cuando, en realidad, se pasa de retrógrado.

Imágenes: La imágenes de stock son un recurso muy útil, pero también un arma de doble filo. Si, aunque no lo creas, todo el mundo sabe que esa secretaria de sonrisa profident no trabaja en tu empresa ¿Por qué? Porque la pobre no tiene horas suficientes para trabajar en todas las empresas en cuya página web se encuentra su foto.

Mal uso: Tienes Twitter, Facebook y un Blog. Y la única entrada que tienen los tres desde hace un año es la de prueba.

 

¿Algunos útiles consejos para remediar los errores?

 

Diseño Web No te fies de tu gusto. Es importante que diferenciemos entre lo que es “la imagen que queremos transmitir” y nuestra capacidad para transmitir esa imagen en una web. No caigas en el error de creer que, porque eres el responsable, debes de saberlo todo.
Elige un buen diseñador web, jóven, y con experiencia. Transmítele tu idea, y dale rienda suelta. He visto páginas horrendas hechas por grandes diseñadores simplemente por capricho del cliente. ¡Confía en tu diseñador! Tu web ha de ser diferente, ha de entrar por los ojos.

Resume, sintetiza. Y si no, añade una “leer más” o la opción de descargar los males y penurias de tu empresa en un cómodo PDF. Define tu empresa, tus objetivos. Utiliza palabras clave, pero no abuses de ellas, o parecerás un político.
Haz uso de tablas, llaves, gráficas. Tendemos a prestar más atención al texto si vemos estos elementos.

Si no conoces el marketing, no lo uses. Nadie te dijo que es una arma de doble filo ¿cierto? Déjalo en manos de un experto o implica a todo tu equipo a través de técnicas como el brainstorming. Y cuando digo TODO, me refiero a TODO el equipo.

En ocasiones, una imágen real, realizada con una buena cámara, es mil veces mejor que una imágen de stock. Personalmente, no confío en empresas que tienen un 100% de imágenes de stock en su web. La gente también quiere ver humanidad en tu empresa, incluso conocer las caras de quienes trabajan en ellas.

Si no tienes tiempo o recursos para hacer uso de las redes sociales, no las incorpores. La redes sociales necesitan de una persona (como mínimo) dedicadas completamente a ellas y el blog. No subestimes su complejidad.

 

Si sigues estos pasos, conseguirás una web actual, real y funcional. Pero, por encima de ello, es importante que valores la importancia de tu página web. La inversión que realices en ella no es “un gasto más”, es una inversión a largo plazo que repercutirá en al imagen y los beneficios de tu empresa u organización.

Con humildad, cautela, intención y aceptación al cambio, todo es posible.

Y vosotros ¿cuidais la imágen de vuestra web?