¿Son ya tan cotidianos y necesarios estos servicios? En mi caso la respuesta es: totalmente. Por otro lado, es interesante pensar el porque de cada producto para cada servicio. Los invito a decirlo en los comentarios.

Fuente: featureshoot.com

Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.

Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.

Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.

Modificar el CSS de un elemento con Firebug.

Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:

1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.

2. Dar clic en el botón de Firebug en la barra de herramientas , luego en el botón de Inspeccionar  y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.

3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.

Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.

Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).

Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.

4. Pruebas en vivo.

Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.

Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.

Y muy similar para los valores numéricos:

Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.

Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad background o background-image.

Y hay otras varias herramientas que pueden ver directamente en el manual oficial.

5. Usando los datos de las pruebas.

Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.

En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.

Screencast

Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.

Conclusión

Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.

Firefox esconde muchos secretos, pero una de las funcionalidades menos conocidas y más útiles de Mozilla Firefox para aquellos que desarrollan páginas web es el uso de perfiles de usuario. Firefox permite crear perfiles específicos que incluyen aquellos plugins, temas o extensiones que un usuario puede necesitar. Además, tanto los marcadores, como el historial de navegación, descargas, etc., son exclusivos de este nuevo perfil.

¿Y para qué quiero yo perfiles? Por ejemplo, puede ser conveniente arrancar un perfil de Firefox con todos aquellos plugins que se usan para desarrollo o pruebas, y tener otro perfil para uso más general y sin tantos plugins. Así ahorramos consumo de memoria y mantenemos nuestro perfil por defecto a prueba de fallos. En este artículo os mostraré cómo configurar un perfil, cómo arrancarlo o cómo tener dos perfiles abiertos a la vez.

Lo primero es cerrar Fifefox, asegurándonos que no se está ejecutando en segundo plano. Luego, y en función del sistema operativo ejecutamos “firefox.exe -profilemanager“:

Esto nos abrirá esta ventana:

Si no habéis creado un perfil antes, podréis crear uno nuevo ahora pulsando “Crear perfil…”. Antes de continuar, os recomiendo que desactivéis la casilla de “No preguntar al inicio”. Así podréis elegir el perfil al arrancar Firefox.

Una vez creado, se selecciona y se pulsa “Iniciar Firefox”. Ahora ya tendréis un Firefox totalmente nuevo. Es decir, ninguno de los plugins, ni estilos, etc… del perfil por defecto, estarán en el nuevo perfil. Si nuestro objetivo es utilizar este perfil para diseñar o depurar aplicaciones, os recomiendo que os instaléis de golpe todos los plugins que consideréis necesarios.

Lo bueno de tener este perfil independiente, es que no sobrecargáis un único perfil con todos los plugins y así se ahorra memoria. Por supuesto, cualquier cambio que hagáis aquí no afectará al perfil por defecto, y podréis probar con cualquier plugin o tema sin ningún problema. Ahora tendréis una “sandbox” completamente a prueba de fallos que podréis utilizar como banco de pruebas sin correr el riesgo de cargaros vuestro perfil por defecto.

Para más comodidad os podéis crear accesos directos (esto variará en cada sistema operativo) que arranque uno u otro perfil. Para ello basta con poner esta ruta: firefox.exe -P “NombreDeMiPerfil”. En la ventana anterior de perfiles sería firefox.exe -P “Testing”. Si además queréis que ambas perfiles puedan estar abiertos a la vez, podéis añadir “-no-remote” a la línea anterior: firefox.exe -p “Normal” -no-remote.

Nota: Si no hacéis esto el perfil del primer acceso directo que ejecutéis será el que se use por todos.

Ni que decir tiene, que también se pueden aplicar los perfiles para usar en un ordenador compartido y que cada usuario tenga la configuración que quiera. Si queréis ampliar la información en la web de soporte de Mozilla hay más información sobre la gestión de perfiles.

¿Qué os parece el truco? ¿Usáis los perfiles habitualmente?

¿Cómo funciona?

Stylish funciona con CSS, y al ser una extensión, funciona en los navegadores modernos, con lo que tenemos acceso a todas las ventajas de CSS 3. Con Stylish creas hojas de estilo locales, que te permiten modificar cualquier elemento de un sitio web.

Ejemplos de uso: borrar secciones que nunca se usan, eliminar publicidad, resaltar elementos importantes, cambiar el ancho de una columna, cambiar la paleta de colores y en general cualquier otra cosa dentro de las capacidades de CSS.

Paso a paso

1. Descarga e instala Sylish: Firefox | Chrome 

Reinicia tu navegador.

2. Ahora en el menú del navegador:

Firefox: Herramientas → Complementos → Estilos de usuario → Escribir un nuevo estilo.
Chrome: Opciones → Extensiones → Stylish → Opciones → Add new style.

Tendrás el botón para crear un nuevo estilo.

3. En esta nueva ventana se agrega el nombre del estilo, etiquetas y el campo de escritura, en este último irán todas las instrucciones CSS.

Seguro no se aplicaran estilos a todas la páginas que se visitan, por tanto, es importante definir dos tipos de estilo: generales y específicas a un dominio.

Estilos generales

Los estilos generales se aplican a todas las páginas que se visiten. Por ejemplo, la siguiente instrucción:

#ads {display:none;}

Borraría todos los elementos con id igual a "ads". Es poco recomendado pues en diferentes páginas un id podría tener funciones distintas y por lo tanto, estar eliminando posibles elementos útiles.

Estilos específicos por dominio

Para evitar afectar a todas las páginas por las que navegamos, se pueden crear estilos específicos a un dominio, la construcción del css puede ser como sigue:

@-moz-document url-prefix(http://www.sitio.com) { 

/* Estilos que solo afectaran al dominio www.sitio.com */ 

}

Es conveniente dar un vistazo a la documentación de stylish y a los selectores CSS 3 para sacar mayor provecho a esta extensión.

Ejemplos prácticos

Para hacer evidentes las ventajas de esta extensión, dejo a continuación algunos ejemplos para limpiar un poco la interfaz de Gmail, Twitter y Google Analytics, con explicaciones.

GMail

@-moz-document url-prefix(https://mail.google.com) {

.nH div.ps {display:none;} /* Borra los gagets en barra lateral. Por ejemplo, la de invitar a un amigo o el chat */
.k .diLZtc .nH .nH .mq {display:none;} /* Borra la barra de anuncios superior */
.ov .nH .mn {display:none;} /* Borra los "consejos" de uso de gmail en el footer */

}

Twitter

@-moz-document url-prefix(http://twitter.com) {

p.promotion {display:none;} /* Borra la apps recomendadas en la barra lateral */
.status-body .meta span:nth-child(2) {display:none;} /* Borra la aplicación desde donde se escribió cada tweet */
#footer {display:none;} /* Borra el footer */
#home .u-username {display:none;} /* Borra todos los tweets de un usuario "username" */
#home .share {display:none;} /* Borra todos los retweets automáticos de tu timeline */

}

Analytics

@-moz-document url-prefix(https://www.google.com/analytics) {

/* Limpia la interfaz de inicio de google analytics */
td.property_row, #footer, #CommonQuestions-ROOT, #ProductRecommendation-ROOT, ul.admin_lefthandside {display:none;}

}

También se puede consultar una biblioteca de estilos para muchos sitios en:

userstyles.org/stylish

Notas

Los estilos CSS no evitan que los elementos se carguen en la página, por lo tanto, no tienen ninguna ventaja respecto a la carga de la página; simplemente oculta elementos a nuestra vista. Si existe la opción de eliminar elementos desde el panel de una aplicación, esta será una mejor opción.

En estos momentos, la extensión de Firefox es más práctica que la de Chrome.

Conclusión

Stylish se ha vuelto una extensión necesaria en mi navegador, pues me permite limpiar mi área de trabajo y ocio en muchas aplicaciones web. Una interfaz limpia, quita muchos distractores.

El navegador es una de las principales herramientas del desarrollador web y del blogger; las extensiones, una forma increíble de potenciarlos. Actualmente Mozilla Firefox lleva la cabeza con más de 5000 extensiones, sin embargo, Google Chrome llegó pisando fuerte y ya cuenta con cerca de 3000.

Un excelente ejemplo de la capacidad de los completos son las siguientes 16 extensiones para Firefox y Chrome que pueden hacer más fácil la vida de Bloggers, Desarrolladores y SEO’s:

1. Firebug

Firebug es una de las extensiones más completas y poderosas para el desarrollo web. Extremadamente útil para el trabajar con el código directamente en el navegador y ver los cambios en tiempo real.

Firefox: Descargar Firebug.

Chrome: Descargar Firebug.

Nota: La versión para Chrome esta en fase beta, pero ya es un extensión como tal, por encima de la versión Firebug Lite que circulaba desde hace tiempo.

2. Speed Page / Speed Tracer

Son extensiones para evaluar el tiempo de carga de un sitio. Muestra cada uno de elementos y su desempeño en la carga. Muy útiles para disminuir en el tiempo de carga y así mejorar la experiencia del usuario.

Firefox: Descargar Speed Page. Desarrollada por Google, es una extensión que funciona sobre Firebug.

Chrome: Speed Tracer. Extensión desarrollada también por Google.

3. Web Developer

Un completo kit de herramientas para trabajar con HTML, CSS, estándares, formularios, imágenes. Puede ser más de lo que necesitas sino trabajas cotidianamente con esto. Ideal para diseñadores web.

Firefox: Descargar web developer.

Chrome: Descargar Pendule.

4. SEO

Extensiones para ayudar con la optimización y seguimiento de un sitio web en los buscadores. Información estadística por dominio, posición en Google, palabras clave, desempeño del sitio web, entre muchos otros parámetros de importancia SEO.

Firefox: Descargar SeoQuake SEO. También ver SenSEO.

Chrome: Descargar Chrome SEO. También ver META SEO Inspector.

5. ColorZilla / Eye Dropper

ColorZilla es un es un elemento color picker, es decir, que se puede obtener el color de un elemento con solo dar un clic sobre él. Permite obtener el código de color en varios formatos o mostrar el resto de la paleta de colores circundante.

Firefox: Descargar ColorZilla.

Chrome: Descargar Eye Dropper.

6. IE Tab

IE Tab es una extensión que te permite visualizar un sitio web con tu versión de Internet Explorer, pero dentro de tu mismo navegador. Con la ventaja de tener un botón siempre a mano y no esperar la carga completa del glorioso IE.

Firefox: Descargar IE Tab

Chrome: Descargar IE Tab

7. Window Resizer

Permite redimensionar la ventana del navegador para probar como luce un sitio a múltiples resoluciones. No te da la misma noción que verlo en una resolución de forma nativa, pero si una buena idea del uso del espacio en el diseño.

Firefox: Descargar Window Resizer.

Chrome: Descargar Window Resizer.

8. Measureit

Measureit es un sencillo complemento que te permite medir las dimensiones de cualquier elemento en el navegador. Tal como su icono muestra, funciona como un regla virtual.

Firefox: Descargar Measureit.

Chrome: Descargar Measureit.

9. Screengrap / Webpage screenshoot

Screengrab es una excelente herramienta para copiar o guardar capturas de parte de visible de una página en el navegador, del sitio completo o una zona especifica. Sencillo y muy efectivo con su tarea.

Firefox: Descargar screengrab.

Chrome: Descargar webpage screenshoot.

10. Link Checker

Link Checker permite verificar el estado y tipo de los enlaces en un sitio web. Perfecto para encontrar enlaces rotos.

Firefox: Descargar Link Checker.

Chrome: Descargar Chrome Link Checker.

11. Greasemonkey

Greasemonkey es una extensión referencia en Firefox y permite cargar scripts y estilos sobre cualquier sitio web y mejorar nuestra experiencia de navegación. Cuenta con miles de scripts prácticamente para todo uso, por ejemplo, recuperar suscriptores en feedburner.

Firefox: Descargar Greasemonkey.

Chrome: No necesario. La última versión incluye soporte nativo para scripts de greasemnkey.

12. Diccionario de español

El diccionario de español es especialmente útil para bloggers con una ortografía tan mala como la mía. Resalta con subrayado las faltas de ortografía en cualquier campo de texto del navegador.

Firefox: Descargar diccionario de español: México, España, Argentina.

Chrome: Aun no disponibles. Existen diccionarios con el de RAE para definición de palabras, pero no como correctores ortográficos.

13. AdBlock

AdBlock es una extensión que te permite bloquear la publicidad de la mayoría de los sitios web. Para el desarrollador permite limpiar la interfaz con que se trabaja; para el blogger evita impresiones improductivas de los propios anuncios.

Firefox: Descargar AdBlock Plus.

Chrome: Descargar AdBlock y Browser Button for AdBlock.

14. Twitter

No catalogaría a las extensiones para Twitter como necesarias, pero sin duda que son populares entre bloggers y desarrolladores. Permiten leer y publicar mensajes en Twitter, desde una ventana discreta y ágil a la lectura.

Firefox: Descargar Echo fon.

Chrome: Descargar Chromed Bird.

15. BuiltWith

BuiltWith te permite saber con que CMS o script esta hecho un sitio web, mostrando un icono en la barra de direcciones del navegador.

Firefox: Descargar BuiltWith.

Chrome: Descargar BuiltWith.

16. Flags

Muestra la bandera del país donde se encuentra hospedado un sitio web o blog.

Firefox: Descargar FlagFox.

Chrome: Descargar Chrome Flags.

Conclusión

Es impresionante lo mucho que ha crecido Google Chrome en uso y desarrollo en tan poco tiempo, sin embargo, Mozilla Firefox sigue teniendo la ventaja en madurez. Tal como están las cosas ahora, la extensiones en Firefox superan por mucho a las de Chrome en desempeño y cantidad. Lo cierto es que Chrome cada día se acerca más y a Firefox les cuesta renovarse.

No esta de más decir que no es recomendable tener una gran cantidad de extensiones instaladas, escoge aquellas que sabes usaras de forma frecuente. También puedes ver en los bookmarlets una alternativa liviana a tareas de algunas de estas extensiones.

Muchos de las personas que solicitan la suscripción, nunca terminan el proceso de verificación. Bien puede ser porque el mail quedo en la carpeta de spam o porque finalmente no supieron de que se trataba.

Sin embargo, no todo esta perdido, pues Feedburner ofrece una lista con las personas activas y las no verificadas, dándote una segunda oportunidad. Te mostramos el proceso en tres pasos:

Cómo recuperar suscriptores no verificados

1. Instalar el script para Greasemonkey: Feedburner Unverified Email Subscriber Tool. Puedes hacerlo desde:

• Mozilla Firefox, necesitaras tener instalado la extensión Greasemonkey y posteriormente instalar el script.
• Google Chrome; su última versión admite scripts directamente, así que simplemente instálalo.

2. Entra al administrador de suscripciones de Feedburner.

Inicio → Publicize → Email Subscriptions → Subscription Management

Nota: Si tienes Feedburner en español, cambia el idioma a inglés para que el script funcione.

Gracias al script, ahora tendrás un campo con la direcciones de correo, listas para copiar, de todos los usuarios que solicitaron la suscripción, pero no la activaron (Show Unverified Subcriber List).

3. Envía un email a todas las direcciones recordándoles que dejaron su suscripción inconclusa. Por ejemplo:

Hola,

Recientemente enviaste una solicitud para suscribirte a Blog and Web. Puedes activar tu suscripción desde el email que se envío la primera vez o intentarlo de nuevo con la siguiente dirección:

http://feedburner.google.com/fb/a/mailverify?uri=blogandweb

También puedes usar nuestra suscripción por Twitter, Facebook o RSS. Recuerda, nuestra suscripción es gratuita y puedes borrarla en cualquier momento.

Un saludo,

Francisco,
Webmaster de Blog and Web.

Anotaciones

Son muchas las personas que prefieren la suscripción por correo electrónico, y también significativo el número de personas que se queda a mitad del proceso, vale la pena darse un tiempo y recordarles de su intensión. Eso sí, lo mejor es solo enviar un mail para no ser considerado spam y que esto no juegue en contra.

Por cierto ¿Ya estas suscrito a Blog and Web? Tienes todas las opciones en nuestra barra lateral →

Concrétamente los cambios en el navegador están relacionado dar mayor prioridad a contenidos mexicanos, brindar enlaces de sitios mexicanos en los buscadores más populares, noticias nacionales en el botón “Últimas noticias” y tener el navegador y la documentación de Mozilla Firefox en es_MX. Y a mi parecer, por encima de estas adaptaciones, es bueno tener ya una representación de este navegador y comunicación con los desarrolladores.

Para celebrar, la comunidad Mozilla México esta preparado una fiesta en la ciudad de México y en varias ciudades de provincia para el próximo sábado 11 de Julio. Yo estoy usando esta versión y hasta ahora demuestra ser estable, cosa que no ocurrió con algunas versiones anteriores, sin más, los dejo con el enlace para descargar esta versión y la prueben:

Descarga Firefox 3.5 (es_MX)

Page Speed

Page Speed funciona de la siguiente manera (y traduzco de su página):

Page Speed realiza varios tests en la configuración del servidor web de un sitio y en su código. Estos tests están basados en una serie de buenas prácticas para mejorar el rendimiento de una página web. Los webmaster que ejecuten Page Speed en sus páginas obtendrán una serie de puntuaciones para cada página, al igual que sugerencias útiles para mejorar su desempeño.

Usarla nos permite hacer nuestro sitio más rápido y además reducir los costes de ancho de banda del servicio de hosting que usemos.

Hagamos un pequeño repaso de como usarlo. Básicamente, lo que voy a hacer de aquí en adelante es traducir de manera libre las instrucciones que vienen en su página, usando también sus imágenes.

Primero que todo, tenemos que tener instalado Firebug. Esto es indispensable, pues Page Speed funciona con ella. Firebug es una extensión que nos permite examinar y editar código HTML, CSS y Javascript. Por sí misma, es una extensión sumamente recomendable (muy útil a la hora de editar un tema, por ejemplo) y se puede descargar aquí.

Una vez que hemos instalado Firebug y Page Speed, procedemos.

1.- Abrimos Firebug yendo a Herramientas > Firebug > Abrir Firebug.

2.- En la ventana de Firebug, vamos a la pestaña Page Speed.

3.- Entramos a la web que deseamos analizar y esperamos a que se cargue completamente. Para ello, hay que fijarse en la barra de estado, en la parte inferior del navegador. Cuando aparezca la palabra “Terminado” a la izquierda, es que se habrá cargado. Para páginas con vídeo en streaming, que no muestran el mensaje “Terminado”, esperar a que el vídeo se empiece a reproducir.

4.- Hacer clic en el botón “Analyze performance”. Cuando la página ha sido analizada, Page Speed mostrará la lista de mejores prácticas de desempeño web (ellos les llaman “reglas”) y la puntuación de la página en cada una, ordenadas según la importancia o prioridad para la página en concreto.

5.- Opcionalmente, se puede expandir cada una de las reglas para ver las sugerencias concretas de mejoramiento, hacer clic en cada una de las reglas para ver su documentación o hacer clic en el botón “Show Resources” (mostrar recursos) para ver una lista detallada de los recursos utilizados en la página. Esto último te puede servir para conocer el peso total de tu página y cuanto se transfiere al abrirla.

Para cada regla, Page Speed nos da sugerencias específicas para su mejoramiento, y le da a la página una puntuación en la que pesan varios factores. Estos incluyen el impacto potencial de la regla (basada en la experiencia de Google), la dificultad de implementación y la severidad de la variación de la página respecto a la regla. El último factor varía de acuerdo a la regla específica, pero consiste en una medida cuantitativa del “fallo” de la página a la hora de plicar la regla. Por ejemplo, puede ser un porcentaje del número total de archivos revisados.

Así es como se interpretan las puntuaciones:

Prioridad alta: estas sugerencias representan que, al ser corregidas, se obtendrá la mayor ganancia potencial de desempeño para un esfuerzo de desarrollo relativamente pequeño. Vamos, que ganaremos mucho trabajando poco. Debes solucionar estos aspectos primero.

Prioridad media: estas sugerencias pueden representar ganancias menores o más trabajo que las anteriores para implementarlas. Soluciona estos aspectos a continuación de los anteriores.

Funciona bien o prioridad baja: si estas sugerencias son acompañadas de un signo +, probablemente representan ganancias mucho menores. En el caso de que no estén acompañadas de nada, es que funcionan bien. Son las últimas que deben ser solucionadas.

Mensajes de información. Algunos de estos aspectos no se aplican a la página o hubo un problema al ejecutar el test. Si aparecen muchos mensajes de información es que probablemente has intentado correr el test antes de que la página se haya terminado de cargar.

La extensión cuenta con algunas funciones más avanzadas que no vamos a repasar aquí. Hay que resaltar que, como se ve en las imágenes, los resultados que ofrece están en inglés, por lo que si no dominas aunque sea un poco la lengua de Shakespeare, lo vas a tener un poco difícil para usarla.

En resumen, una extensión a la que le pueden sacar más partido los desarrolladores que un blogger “de a pie”. Sin embargo, estos últimos pueden usarla revisando las incidencias que Page Speed ofrece, solucionando las que tengan menos dificultad y documentándose para solucionar las mayores o que le parezcan más complicadas, de manera que al tiempo que amplíen sus conocimientos, puedan ir mejorando el rendimiento de su web. Personalmente, la he ejecutado contra uno de los blogs que tengo y… bueno, ejem… como que la cosa es mejorable y ya tengo tarea para cuando haya tiempo.

Sin duda, una extensión muy recomendable.

Web: Page Speed.