¿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

Ilustración de Cinismo Ilustrado.

¿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 video fue grabado en Marzo del 2000 durante una conferencia en San Francisco, en él aparecen: Evan Willians, Meg Hourihan y Paul Bausch, creadores y programadores de Blogger.com.

En 2002 el código de Blogger fue reescrito, y para 2003, la plataforma completa fue vendida a Google Inc. Al momento de la venta, Blogger tenía 1.1 millones de usuarios registrados.

Evan Williams, uno de los fundadores, dejó Google en 2004, quien ese mismo año fundo Odeo, una plataforma de podcasting, la cual a su vez fue adquirida en 2007 por Sonic Mountain.

En Abril de 2007, Evan Willians cofundó Twitter, una herramienta de comunicación más de 50 millones de actualizaciones diarias por sus usuarios y de la cual sigue siendo CEO.

10 años después de la grabación del video, parecen escenas surrealistas, sin embargo, este es un inicio relativamente común en las grandes empresas de tecnología. Una idea, mucho trabajo y el doble de perseverancia.

Algunos datos curiosos:

• Blogger no fue concebido como un proyecto comercial, sino como una herramientas de publicación interna.
• La televisora Globo de Brasil fue la primera en comprar un licencia de "Blogger Pro" en 2002.
• Meg Hourihan fundadora de Pyra Labs, dejó de trabajar en servicios de internet en 2004 para trabajar en un restaurant en Massachusetts y actualmente solo se dedica a su familia.
• El video fue grabado por el diseñador puertorriqueño Alberto Gonzales, de ahí que se presentaran en español.

Fuentes y más información:

• Pyra Labs / Wikipedia.
• Blogger’s history re-imagined.
• Evan Willians blog.
• Meg Hourihan blog.

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.

Quix abarca una gran cantidad de funciones que puede ser de gran ayuda a bloggers, desarrolladores o cualquier usuario asiduo de internet. Tiene funciones especificas para WordPress, SEO, webmasters, estadísticas, social media y hasta para aplicaciones externas.

Funcionamiento

Funciona como una barra de comandos en el navegador, donde al insertarse un comando o un comando y un parámetro realizamos una acción predefinida. Que mejor que verlo en video:

Ventajas

• Puede realizar una gran cantidad de tareas. Desde básicas a avanzadas.
• Reemplaza extensiones del navegador, pero también a otros bookmarlets.
• Prácticamente uso cero de los recursos del navegador.
• Funciona en, prácticamente, cualquier navegador web (incluyendo celulares).

Y quizá se mayor desventajas es tener que aprender la sintaxis de los comandos, los cuales, no son pocos.

Instalación

Como cualquier Bookmarlet, para tenerlo “instalado”, solo hay que arrastrar un enlace al navegador. Puedes obtener directamente en Quixapp.com o con el siguiente enlace:

Enlace para arrastrar: Quix

Comandos

Que mejor forma de conocer todas sus funciones que listando todos los comandos que se puede ejecutar. Aquí te traducimos los comandos de Quix:

Comandos básicos

Comandos sociales

WordPress

SEO

Webmaster

Quix

Estadísticas

Acortadores de URL’s

Aplicaciones externas.

Integración con comandos Mac

Conclusión

Sin duda un Bookmarlet imperdible en nuestro navegador, son una gran cantidad de funciones a disposición pero sin perder rendimiento en nuestra navegación. La he usado una semana y me tiene satisfecho, no es que haga maravillas, pero si te crean una gran cantidad de atajos.

Visto en thinkwasabi.

La suscripción por Twitter cada día toma más fuerza con usuarios que no están tan familiarizados con el RSS y no quieren tener la bandeja de correo con contenidos de muchos sitios. Para brindar la suscripción por Twitter lo primero es publicar todos los contenidos directamente en una cuenta, para ello existen servicios como Twitter Feed, útil para cualquier plataforma pues se basa en una dirección Feed.

Sin embargo, esta herramienta no siempre es la mejor opción y para WordPress hay una alternativa bastante buena que seguro hará pensar en usarla, se trata de WP to Twitter, un plugin totalmente personalizable para publicar tus posts en twitter al instante de ser publicados en tu blog.

WP to Twitter

Opciones

Una vez instalado (solo subir y activar), se tiene acceso a un panel en Opciones → Wp -> Twitter con todas las opciones de publicación en Twitter desde tu WordPress, principalmente:

• Tipo de posts para publicar en Twitter: Publicado, recientemente editado, página.
• Longitud del resumen del post.
• Convertir tags en hashtags.
• Prefijos.
• Servicio de acortamiento de URL’s a usar.
• Tus datos de acceso para Twitter y del servicio de acortamiento de URL’s.

Ventajas

Las ventajas de este sistema son interesantes:

• Publicación inmediata. Contrario a Twitter Feed, el tweet se publica en el momento que publicas la entrada en el blog.
• Estadísticas. Las opciones de estadísticas conn Bit.ly o Google Analytics son excelentes para conocer la eficacia de este tipo de suscripción.
• Personalización completa de los mensajes a publicar.
• No damos acceso a terceras partes a nuestra cuenta.

Desventajas

Y como toda herramienta tiene sus destajas:

• La seguridad va por tu parte. Al estar el plugin en tu servidor, este será responsable de gestionar la conexión con Twitter con los riesgos que pueda implicar.
• Mar carga. WordPress ya es muy crítica por la carga que genera, esto le añade un poco más, pero solo en al momento de publicar/editar entradas.
• Mantenimiento.  Para tener actualizado el plugin.

Descargar: Wp to Twitter

Conclusión

Desde mi particular punto de vista, son más las ventajas ofrecidas por WP to Twitter que sus desventajas, tienes el control total en tiempo y forma en la publicación de los tweets sin recurrir a un tercero. Me parece la alternativa perfecta a Twitter Feed para WordPress, pero ustedes tienen la última palabra.

Para WordPress ya habiamos explicado como generar URL’s cortas de forma nativa, y ahora, usando la API de bit.ly, el servicio por defecto de Twitter, se pueden crear y mostrar URL’s cortas en cada entrada de Blogger.

Paso a paso

1. Para mostrar la URL corta al pie de la entrada, con los artilugios expandidos, busca:

<div class='post-footer-line post-footer-line-3'>

</div>

También pueden ser post-footer-line-1 o post-footer-line-2, solo cuida que las etiquetas abran y cierren correctamente.

2. Dentro de cualquiera de las 3 lineas del footer agrega el siguiente código:

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

3. Justo antes de la etiqueta de cierre:

</head>

Pega el siguiente script:

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=blogandweburl&amp;apiKey=R_42c5e2a7ff92fd21c23d3b75f2d85f7c"></script>
<script type="text/javascript" charset="utf-8">
	BitlyClient.addPageLoadEvent(function(){
		BitlyCB.myShortenCallback = function(data) {
			// this is how to get a result of shortening a single url
			var result;
			for (var r in data.results) {
				result = data.results[r];
				result['longUrl'] = r;
				break;
			}
			document.getElementById("shorturl").innerHTML = "Dirección para compartir: &lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
		}
		BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
	});
</script>

4. Opcionálmente se pueden dar estilos para adaptar este nuevo elemento al diseño del blog. Por ejemplo:

form#shorturl {
color:#666;
font-size:11px
}

#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;
}

Recordemos que los estilos siempre van antes de la etiqueta de cierre:

</b:skin>

5. El resultado, con los estilos de ejemplo en cada página individual de las entradas, es:

Brindar la URL corta en lugar del link directo para hacer un Tweet tiene la ventaja de que pueden usarlo en otras redes sociales donde una URL larga no es muy estética, no solo Twitter.

Por ejemplo, se podría usar para que automáticamente siga a todas las personas que mencionen la URL de tu blog.

El script

Descargar: twitter-auto-follow-v0.1.php

Uso

Los variables que hay que definir son el usuario, la contraseña y el término de búsqueda de interés al inicio del script.

// Datos de acceso de Twitter
$user = "";
$pass = "";
// Término de búsqueda (ej. "blogandweb")
$term = "";

Una vez definidas se sube el archivo a un servidor con soporte de PHP y se ejecuta accediendo directamente al archivo, por ejemplo, si lo subiste a la raíz de tu sitio y dejaste el mismo nombre de archivo:

http://sitio.com/twitter-auto-follow-v0.1.php

Esta es la ejecución manual, obviamente, de acuerdo a tu manejo de PHP podrías usarla como función para que se ejecute bajo ciertas condiciones o cada periodo de tiempo.

Conclusión

Creo que este script tiene potencial positivo en la promoción de una web o un producto, o en la vinculación de una marca con sus consumidores, sin embargo también puede caer en los límites del spam si se usa mal. Yo recomendaría que se use para términos muy específicos y usar los filtros de búsqueda de Twitter para llegar solo a personas que en verdad puedan estar interesadas.

Hay una estrecha relación entre el Blogging y el Microblogging, muy pocos Bloggers no han caído en la seducción de compartir sus ideas de manera express en 140 caracteres, ya lo decía Iván en su artículo ¿Twitter está matando a los blogs?, estas dos herramientas pueden perfectamente complementarse y una de ellas es usando a Twitter como otro método de suscripción para nuestro blog.

¿Qué ventajas tiene Twitter cómo método de suscripción?

• Hay lectores que NO usan Feed RSS y que sí usan Twitter.
• Es menos intrusivo que la suscripción por email.
• Se puede agregar contenido adicional al que ofrece el blog.
• Lo seguidores son un buen método de estadísticas de este canal.
• Se pueden ganar lectores que te encuentren por Twitter sin conocer tu blog.
• Es un sistema de suscripción rápido e interactivo lector/blogger.
• En contenido de interés se puede aumentar la distribución con los RT’s de los suscriptores.

¿Cómo usar Twitter cómo forma de suscripción?

• Lo primero es crear una cuenta Twitter para cada blog, sin olvidar poner la descripción y la url.
• Vincular el Feed RSS de tu blog con tu cuenta Twitter, para esto es útil la herramienta Twitter Feed. Este servicio se encargará de “twittear” los encabezados de tus artículos y algún texto adicional. una vez funcionando, te muestra la cantidad de clics que recibió un enlace a tu blog desde tu cuenta Twitter.
• Ahora solo promociona esta cuenta Twitter junto al tradicional Feed y la suscripción por email.

Algunas ideas para el Twitter de tu blog

• Tener una cuenta para tu blog y otra personal. Suele ser un tanto molesto leer muchos feed en cuentas que en teoría son personales y puede llegar a ser contraproducente.
• Publica enlaces a artículos interesantes, fotos relacionados al desarrollo de tu blog (diseños pasados, el lugar desde donde escribes, etc), freebies o cualquier cosa que pueda aportar valor.
• Porque no, agrega el feed de otro blog afín al tuyo.
• Un icono de twitter acorde a la suscripción, los que ilustran este post son un ejemplo de ello y los puedes descargar en snap2objects.
• ¿Hacer planets en Twitter? No lo he visto todavía, pero no es mala idea tener una cuenta donde se twittee el contenido de varios blogs sobre un mismo tema.
• Si solo muestras el contenido de tu blog en Twitter, agregar las actualizaciones en el sidebar puede ser redundante, no lo hagas a menos que aportes algo nuevo.
• Sigue a otros usuarios y blogs con temas similares o complementarios para aumentar tu red.

Conclusiones

El crecimiento en el uso de lectores RSS sigue creciendo, sin embargo, el crecimiento de Twitter es aun más grande, por tanto, entre más canales de suscripción podamos aportar más grande es el rango de usuarios al que podemos llegar. Puede tener algunas desventajas, como la descentralización de los comentarios, sin embargo se compensa con una mejor distribución, que finalmente es congruente con la idea de una web más social.

Y ya en esto, los invito a suscribirse a nuestro Twitter y/o a nuestro Feed RSS.