Hoy a medio día, hace unas horas, consultaba la entrada Fecha tipo calendario en todas las entradas, una entrada de Rosa Torre que corrige varios problemas de un script que adapte en su momento en Personalizar la forma en que se muestra la fecha en Blogger. Y hace unos minutos, por medio de Oloblogger me entero de una noticia que me dejo helado, Rosa Torre, autora del Escaparate de Rosa, ha fallecido.

Hay dos blogs que me inspiraron para iniciar en el tema Blogger y en compartir lo poco que voy aprendiendo, uno es el blog de Gema y el otro el escaparate de Rosa. Blogs con una vocación de ayuda que se ve muy poco en la web, de calidez distinta.

Es curioso como ser lector de un blog, puede aportarte tanto y paralelamente desarrollarte un cariño y gratitud hacia su autor.

Hoy se cierra un escaparate en la web, un escaparate que sin embargo seguirá en línea ayudando a una gran cantidad de bloggers, entre ellos a mi. Que frío se vuelve el HTML con estas noticias.

Descanse en paz Rosa Torre.

PD: En memoria a Rosa, se ha abierto un grupo en Facebook, para recopilar mensajes y posts para ella y su familia.

Si haz creado una página en facebook para tu blog como forma alternativa de suscripción, quizá también te interese mostrar en tu blog la cantidad de fans que esta tiene y así, alentar a más personas a suscribirse.

¿De que sirve tener el número de fans en texto plano? Por que es mucho más flexible para adaptar y personalizar al diseño de tu blog que los widgets que ofrece Facebook. El objetivo final es hacer más atractiva la suscripción a la página en Facebook de tu blog.

Para obtener el número de fans de una página en Facebook es necesario recurrir a su API y obtener algunos datos de manera sencilla:

1. Con tu cuenta Facebook entra a la aplicación de Desarrollador. (Si no tienes cuenta de desarrollador, tal sacar una).

2. Ahora desde el Desarrollador ve al botón "Configurar una nueva aplicación". Le damos un nombre y aceptamos los términos de Facebook. Esto para obtener una Clave API y un número secreto que dan acceso al número de fans. 

Entonces, los datos a usar más adelante son:

3. Ahora es necesario obtener el ID de la página de la fans en Facebook, Para esto solo entramos a la página, y en el enlace de "Editar página" de la barra lateral esta la URL con el ID de la página. Es algo como:

http://www.facebook.com/pages/edit/?id=123456789012

El número del final es el ID y también el último dato necesario para obtener el número de fans.

4. Ahora, para trabajar con estos datos es necesario de hacer uso de la librería facebook.php. Descarga Facebook PHP SDK y coloca el archivo facebook.php en la raíz del directorio donde lo usaras (en WordPress, el directorio del theme).

5. Por último, para mostrar el número de fans, abre el archivo php donde quieres que se muestre (en WordPress podría ser sidebar.php) y pega el siguiente código:

<?php
require_once('facebook.php');
$facebook = new Facebook(array(
    'appId'  => 'ID_de_aplicación',
    'secret' => 'Número_secreto',
    'cookie' => true,
));
$result = $facebook->api(array(
    'method' => 'fql.query',
    'query' => 'select fan_count from page where page_id = ID_de_página;'
));
$fb_fans = $result[0]['fan_count'];
?>

<?php
//Número de fans en texto plano
echo $fb_fans; 

?>

Y reemplaza en el código anterior:

• ID_de_aplicación por el número de ID de la aplicación creada en el paso 2.
• Número_secreto por el número secreto de la aplicación creada en el paso 2.
• ID_de_página por el número de ID de la página de fans visto en el paso 3.

Con esto ya tienes el número de fans en texto plano, al que puedes acompañar con un mensaje estilo "Tenemos 800 fans ¡hazte fan también!" y un link hacia la página de Facebook.

Artículo basado en How to Display Facebook Fan Count in Text de Hongkiat.

Es conocido por todos que la publicidad es el soporte principal del internet. La mayoría de servicios web, diarios en línea, blogs y sitios multimedia tienen su principal ingreso en anuncios de distintos formatos.

Por el otro lado, muchos usuarios ven en la publicidad un obstáculo en su experiencia de navegación, lo que ha traído el desarrollo de bloqueadores de publicidad, o herramientas que evitan que los anuncios sean mostrados.

En Smashing Magazine hacen una interesante reflexión ¿Deberían los diseñadores web dejar de usar bloqueadores de publicidad? reflexión que podemos extender a bloggers y usuarios en general. Los argumentos para no usarlos que da el autor de la nota son, a mi interpretación:

• Obstaculizan la comunidad. Rompiendo un ecosistema de producción, consumo y difusión.
• Promueven una actitud egoísta. Donde lo que importa es “mi” navegación y olvidado el esfuerzo de los creadores de contenido.
• Pueden crear un miniburbuja. Empresas invirtiendo en publicidad y menos personas dispuestas a consumir.
• Hacen una navegación menos real. Para un diseñador y un blogger, te hace perder ver un internet distinto al de la mayoría, casi utópico, sin publicidad.

Agregaría:

• Empeoran el diseño de varios sitios web. El diseño web actual ya casi siempre considera los espacios para la publicidad, y el peso visual de un diseño se hace tomándolos en cuenta. En algunos sitios este balance se pierde sin la publicidad.

Y los beneficios de estos bloqueadores son por demás conocidos, principalmente un navegación ligeramente más rápida y menos peso visual.

Sin duda un tema controversial, en mi opinión, los bloqueadores de publicidad aun no tienen un impacto crítico en los ingresos de los sitios web, de otro modo, sin duda habría una cantidad igual de herramientas “anti-bloqueadores“; por otro lado, tampoco todo es culpa del bloqueo de la publicidad, buena parte de lo que se deciden en bloquearla es por aquellos sitios que abusan en densidad de anuncios y lo intrusivos en la navegación.

¿Tienes instalado un bloqueador de anuncios? ¿Qué opinas del tema como navegante y como blogger? Sin duda será interesante conocerla.

Otros artículos relacionados:

• Anti-AdBlock, plugin contra el bloqueo de publicidad.
• Los bloqueadores de publicidad (ad-blockers), son legales?
• Why Ad Blocking is devastating to the sites you love.

Fotografía de Straws pulled at random. Licencia CC.

Descargar CoolSidebar

En esta ocasión les mostraremos como se hace un botón con diseño de sticker, que últimamente se han puesto muy de moda en los packs de iconos sociales, al final del tutorial tendrás la base que podrás aplicar este diseño a cualquier tipo de botón, ya sea social o no.

Todo desde Illustrator CS4 (Ai)

Todo el botón será creado con vectores por lo que no tendrás problemas para los tamaños y calidad de tus imágenes. Usar vectores es una solución ideal para web, ya que a pesar de que uses tamaño relativamente pequeños, la exportación de tus png’s será con una fidelidad de contornos muy buena. Si a eso le añades que en Ai CS4 por fin puede hacer medidas en pixeles para web simplemente lo tienes todo.

Iniciamos en nuestro documento haciendo una figura de circulo (180px por 180px) con las siguiente características y le ponemos color de relleno #FDF8E3, sin stroke.

Ahora lo que haremos será hacer la parte del sticker que se esta despegando para esto ponemos una figura de rectangulo por encima del circulo seleccionamos ambas figuras , copiamos ( Cmd+C o Ctrl+ C) y pegamos (Cmd+V o Ctrl+V).

Abrimos nuestra ventana del Pathfinder (Menú Window→Pathfinder) seleccionamos un par de figuras (círculo y rectángulo) hacemos la opción  Intersect (es decir quedara solo laintersección entre las dos figuras) y en al segunda aplicacmos la oción Minus (que la figura de arriba sustraiga a la figura de abajo).

Ajustamos un poco la curva de la figura más pequeña,  haciéndola un poco más grande, le agregamos los siguiente valores de relleno y la giramos

Duplicamos esta misma figura. Ajustamos la curva para que la forma quede como sombra proyectada la rellenamos de negro y le damos una transparencia del 12%.

Ahora duplicamos el semicírculo que nos queda, lo mandamos al fondo,  lo desfazamos un poco , lo rellenamos de negro y le damos transparencia del 12%.

Ya esta nuestra etiqueta ahora a poner diseño

Creamos un nuevo círculo de 136 x 136 pixeles, con un stroke de 2 pt. de color y un gradiente circular como relleno de los siguientes colores #FBB03B y #F16123, lo que no deja una imagen así.

Pasamos adelante el pedazo de sticker despegado y su sombra.Ahora tomamos uno vectores que descargamos de Internet (ambos son totalmente gratis este y este otro de DeviantArt . Los agregamos con el color #FFD54E y una transparencia del 50%

Ahora solo falta agregar el símbolo de RSS, el cual tome del siguiente vector gratuito,  aunque si eres de esos que les gusta hacerlo todo desde cero en este tutorial viene explicado como se hace.

Ajustamos el logo y listo. Puedes exportarlo como png.

Para Terminar

Tenemos listo nuestro botón ahora puedes cambiar los colores y poner el símbolo de cualquier otra aplicación o red social ( facebook, twitter o friendfeed quedan con el color azul) y así puedes hacer las diferentes adaptaciones.

Un tip que te puedo dar es que puedes modificar este sticker exportándolo como .png y jugando con texturas y transparencias en Photoshop, para dar una sensación distinta.  Espero puedas dejarme tus comentarios dudas y si gustas puedes mandarme un reply vía twitter (@ulizes), me agradaría saber como te fue con el tutorial así como ver tus propias versiones.

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.

Existen servicios externos que hacen la función, pero varios han quedado offline y otros más no funcionan tan bien como se quisiera. Además, queda el riesgo de que también desaparezcan por ser servicios "pequeños".

Hasta ahora el método más sencillo y estable que encontré es el de Yahoo! Pipes.

Unir feeds con Yahoo! Pipes

1. Entra en Yahoo! Pipes y crea un nuevo pipe (Create a pipe).

2. En la barra lateral veras todos los módulos disponibles. Arrastra uno del tipo "Fetch feed" (Sources → Fetch feed).

3. Agrega la URL de todos feeds que deseas unir.

4. Agrega un operador "Sort" (Operators → Sort), para ordenarlos por fecha de publicación (item.pubDate → descending). Ahora conecta la salida del módulo Fetch feed con el modulo Sort y la salida del módulo Sort con la salida del Pipe (Pise Output). La imagen de arriba lo ejemplifica.

5. Guarda los cambios (Save) y corre el pipe (Run pipe …). Ahora, en esta nueva página tendrás un previo del resultado y un enlace del nuevo Feed compuesto.

La URL resultante es algo como:

http://pipes.yahoo.com/pipes/pipe.run?_id=7bb5377e17a2091d2cc8cd22b000a95a&_render=rss

Por lo que conviene usar Feedburner y de este modo tener una URL más amigable y la información estadísticas y ventajas correspondientes.

Uno de los inconvenientes de este método es que Yahoo! Pipes borra el autor de cada artículo, en parte obvio, pues al ser feeds distintos podrían ser autores distintos.

Aunque puede parecer complicado si nunca has usado Yahoo! Pipes, en realidad es bastante intuitivo y fácil de seguir.

Para WordPress

En los archivos donde quieras mostrar el botón (por ejemplo single.php) agrega el siguiente código:

<a href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" rel="bookmark">Buzz!</a>

Puedes incluirlo en todos los archivos donde muestras los servicios para marcación de favoritos, la única condición es que quede dentro del Loop.

Para Blogger

Si ya haz agregado otros servicios de marcadores sociales, el proceso es similar, e igual al botón de compartir en Twitter.

En el código de tu plantilla (Inicio → Diseño → Edición de HTML → Expandir plantillas de artilugios) busca:

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

Justo abajo agrega el siguiente código:

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&amp;title=" + data:post.title'>Buzz!</a>

Cuida que todas las etiquetas se abran y cierren correctamente.

Anotaciones

Si agregas este código a una lista de marcadores existentes, adáptalo a su formato; suele ser listas no numeradas, así que es posible tengas que las etiquetas <li> y </li>.

Como tal, el código en este post es solo un enlace, si quieres mostrarlo como un botón, en lugar de vincular al texto "Buzz!", vincula una imagen como la propuesta por savedelete:

O mashable:

Quizá es un poco temprano para saber si Google será una herramienta atractiva de promoción, al menos tan atractiva como para regalarle un espacio en cada artículo; Ya Goolge Bookmarks demostró que no porque sea Google, será popular. Por lo pronto, blogs como Mashable ya lo integraron.

Tú qué opinas ¿Google Buzz se volverá una herramienta popular?

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.