Por ejemplo, Facebook brinda la posibilidad de agregar un contador a cada artículo con el fin de saber la cantidad de veces que fue enviado a dicha red social, pero no soy muy partidario de este método puesto que involucra sumar más código a nuestro diseño y no me parece de utilidad para los lectores… Si nosotros queremos satisfacer nuestra curiosidad podemos hacer uno de la API de Facebook para, desde una simple dirección, obtener información en referencia a una página ingresada…

No necesitamos montar nada en nuestro servidor o diseño, ya que simplemente deberemos de ingresar la dirección de la API en cuestión junto con la dirección a analizar, y se nos retornará un archivo XML con los datos sobre la cantidad de veces envidada a Facebook, cantidad de veces que alguien presionó en “Me gusta” en alguna de las páginas publicadas dentro de la red social, la cantidad total de comentarios y las veces que los usuarios presionaron en el contenido compartido para terminar en nuestro sitio…

http://api.facebook.com/restserver.php?method=links.getStats&urls=www.google.com

Por supuesto deberemos de reemplazar “www.google.com” por la dirección de la página a analizar, y tendremos la posibilidad de agregar más de una dirección por consulta, separadas por una coma…

http://api.facebook.com/restserver.php?method=links.getStats&urls=www.google.com,www.yahoo.com

Tendremos que ver el código fuente de la página para poder ver la estructura del archivo XML y así entender a que corresponden los valores que se nos despliegan (si queremos podemos crear en nuestro servidor una página que llame a dicha dirección y así darle estilo al archivo XML devuelto para que sea más fácil su análisis)… Por ejemplo, en el caso de la última consulta el archivo XML generado es el siguiente…

<links_getstats_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd" list="true"> 
  <link_stat> 
    <url>www.google.com</url> 
    <share_count>6877</share_count> 
    <like_count>1546</like_count> 
    <comment_count>3586</comment_count> 
    <total_count>12009</total_count> 
    <click_count>1</click_count> 
    <normalized_url>http://www.google.com</normalized_url> 
  </link_stat> 
  <link_stat> 
    <url>www.yahoo.com</url> 
    <share_count>77856</share_count> 
    <like_count>3032</like_count> 
    <comment_count>7138</comment_count> 
    <total_count>88026</total_count> 
    <click_count>376</click_count> 
    <normalized_url>http://www.yahoo.com</normalized_url> 
  </link_stat> 
</links_getstats_response>

Para aquellos utilizando la librería PHP de Facebook, se puede utilizar la función Link.getStats de forma más fácil y eficiente, simplemente escribiendo la siguiente línea, en donde colocaremos las direcciones a analizar, separadas por comas, entre los paréntesis… El resultado será el mismo archivo XML…

Todo esto es simplemente la base inicial para que nosotros pongamos en juego nuestra destreza e integremos la función anterior a nuestro diseño o aplicación que estemos creando… Para más información podemos consultar la documentación sobre Link.getStats, la función explicada anteriormente… Saludos…

Las letras se encuentran todas subrayadas por defecto, decoración que no se le puede eliminar, y las mayúsculas son recuadradas por completo, tal cual se puede ver en la imagen de ejemplo anterior…

Por supuesto, todo completamente gratuito… Si conocen alguna tipografía mejor que esta los invito a dejarla en los comentarios así quien las necesite tenga opciones… Saludos…

Divididos en 16 categorías, y más categoría dentro de las mismas, en Soundsnap podemos encontrar sonidos de animales, comics, exteriores, humanos, industriales, de ciencia ficción, entre otros, todos con su debida previsualización, detalles en cuanto al tiempo de duración y cantidad de veces descargado, y la posibilidad de obtenerlo en formato MP3, WAV o AIFF…

Hasta hace poco tiempo Soundsnap permitía hasta la descarga de cinco diferentes sonidos mensuales con un simple registro gratuito, estatus que se mantuvo para los que estaban registrados con antigüedad, pero a partir de hace poco tiempo los nuevos registros no obtienen ningún archivo de sonido sin antes pagar alguno de los paquetes que van desde los cinco sonidos, hasta las descargas ilimitadas (9 dólares, y 249 dólares respectivamente)…

Repito, el servicio lamentablemente no es gratuito, pero se trata de un excelente banco de imágenes para aquellos trabajadores profesionales que requieran de los mismos de forma constante y estén dispuestos a pagar lo necesario para disponer de forma fácil y rápida de su materia prima de trabajo… Saludos…

Con el lanzamiento de Google Buzz, la red social de Google que permite el intercambio de contenidos, enlaces, estados, entre otros materiales multimedia mediante Gmail y los contactos del mismo, era inevitable que aparecieran iconos sociales sobre este servicio así los podíamos anexar a nuestro diseño y así permitir que quienes nos visiten difundan nuestras creaciones mediante Google Buzz… Uno de los paquetes más destacables que he encontrado fue creado por Cheth Studios, cuya descarga incluye tres diferentes diseños en varios tamaños, conformando una carpeta de diez diferentes imágenes…

Específicamente podemos encontrar el clásico ovalo de Google Buzz (ese que se puede apreciar en la imagen que acompaña a este artículo) con su fondo transparente o sobre un cuadrado en gris degradado hacia el blanco, y finalmente otro tercer diseño cuadrado donde todas las dimensiones es ocupado por los colores azul, amarillo, verde y rojo (como el que pueden apreciar al final del articulo)…

Descargar Google Buzz Social Network Icon Pack

El artículo titulado “Google Buzz Social Icons for Bloggers and Designers” ofrece la descarga oficial del paquete de iconos de Google Buzz, así como otra información respecto a cómo integrarlo a nuestro sitio… Saludos…

De casualidad me topé con el artículo “How to Remove Chrome’s Orange Outline” en el cual se explica con claridad como un diseñador o cualquier persona con mínimos conocimientos de diseño, puede evitar que Google Chrome agregue este borde naranja en los cuadros de texto, e incluso eliminar el borde azul que Safari también utiliza… Cabe aclarar que esta explicación es para evitar que nuestra propia página muestre los bordes, y la guía no tiene como finalidad el eliminar el borde naranja (o azul en Safari) de todos los sitios que visitemos con nuestro navegador…

En fin, deberemos de editar la hoja de estilos de nuestro sitio (nuestro archivo .css) para agregar al mismo la siguiente línea que básicamente lo que hace es eliminar el borde exterior, cualquier tipo de borde exterior, de cualquier cuadro de texto de nuestro sitio en cuanto los mismos son utilizados por el usuario…

*:focus  {  outline: none;  }

Esto no afecta a otros navegadores (al menos que en un futuro también agreguen el borde exterior al igual que Google Chrome o Safari) y se aplica, reitero, a todos los elementos del sitio que estemos editando… Saludos…

Buscando información al respecto para combinar mi aplicación con el diseño de Facebook, di con el artículo “How to Style an Application Like Facebook” publicado por Bill Konrad en la bitácora Devtacular, en el cual se incluye todo lo necesario para que nuestra aplicación tenga los mismos colores, la misma tipografía, los mismos bordes, dimensiones, iconos y efectos que la red social…

Por un lado, en el caso de los colores, el autor ha especificado el código de cada uno de los colores junto a una muestra de los mismos y el uso que Facebook les da (por ejemplo, el azul del encabezado, el azul de los enlaces, los grises y negros de los textos, los grises de los recuadros y de los bordes de los mismos, y los azules, amarillos y rojos para los mensajes de aviso, notificación y error respectivamente)… Luego tenemos la tipografía utilizada que al parecer es única para todo la red social, y finalmente las dimensiones que Facebook le otorga al recuadro donde nuestra aplicación es insertada, a la columna de nuestro perfil, y a los iconos…

Todo el artículo esta ejemplificado para que sepamos de que se trata cada código y en donde es conveniente utilizarlo… De igual manera, y para los interesados, les recomiendo leer la documentación oficial de Facebook en referencia al diseño de las aplicaciones: Facebook Styles y CSS Tips and Tricks… Saludos…

Todos debemos de conocer al iPhone, y todos debemos de haber visto (ya sea en directo o mediante imágenes) el diseño por defecto de los menúes de navegación (el clásico fondo rayado y la combinación de tonos en azul con blanco), por lo cual muchos optan por seguir este patrón para diseñar sus sitios o para hacerlos compatibles con el teléfono de Apple, con el fin de ayudar al usuario a sentirse cómodo en el uso de nuestra página mediante una interfaz que ya tiene incorporada en su vida diaria…

Para simplificarnos las cosas, Minid se ha tomado el trabajo de crear y distribuir de forma gratuita un Framework CSS y XHTML para desarrollar en iPhone e iPod Touch que incluye todo lo que necesitamos para crear un diseño que se adapte al iPhone o el iPod Touch (ya que el sistema operativo es el mismo), desde cabeceras, listas, campos de información, grilla de imágenes, formularios, burbujas y botones, todos idénticos a los que podemos encontrar en el dispositivo…

Todo ya está creado, y todo cuenta con el mismo diseño que el iPhone o iPod Touch, por lo cual simplemente tendremos que utilizar los códigos e ir creando el sitio que necesitemos… Pueden ver una demostración en línea de todo lo que este Framework incorpora ingresando al Universal iPhone UI Kit, por lo cual recomiendo utilizar uno de estos dispositivos porque la visualización es muy diferente en la computadora que en el iPhone o iPod Touch… Saludos…

Si han utilizado Firebug en conjunto con Page Speed notaron que uno de los parámetros de performance que evalúa esta última extensión se titula “Leverage browser caching” y se trata del tiempo de valides de las imágenes y hojas de estilo de una página hasta que las mismas expiren y tengan que ser nuevamente cargadas desde el Servidor…

Supongamos que configuramos el tiempo de expiración de las imágenes a siete días, entonces el usuario carga nuestra página por primera vez y el navegador dice “¡Epa! Acá hay unas imágenes que tienen validez por siete días, entonces las guardo en el disco hasta pasada una semana“… De esta manera, y durante siete días, cada vez que el mismo usuario cargue nuestra página las imágenes serán tomadas desde su propia computadora, ahorrándonos transferencia mensual y ancho de banda, así como acelerando la experiencia del usuario… Una vez transcurridos los siete días el navegador volverá a cargar las imágenes pero desde nuestro servidor…

Entonces, ¿cómo configuramos el tiempo de expiración de la Caché?… Gracias al artículo “Using browser cache for performance” descubrí que únicamente deberemos de editar nuestro archivo .htaccess y agregar la siguiente porción de código:

<ifmodule mod_expires.c>
<filesmatch “\.(jpg|JPG|gif|GIF|png|PNG|css|ico)$”>
ExpiresActive on
ExpiresDefault “access plus 31 day”
</filesmatch>
</ifmodule>

De esta manera hemos configurado a 31 días (el mínimo recomendado por Google) el tiempo de expiración de la caché de todas las imágenes de nuestro diseño o adjuntas en los artículos de nuestro Blog, de las hojas de estilo, e incluso del Favicon… Saludos…

De todas maneras sigo vivo y decidí poner en pausa el tema de esta bitácora hasta que Diego me terminase el nuevo diseño, y el día llegó… Luego de plasmar mi idea de un diseño básico, limpio y centrado más que nada en el contenido deje todo en sus manos y lo que pueden apreciar es el resultado de la suma de la experiencia de Bahía Studio y mi constante molestia por mensajería instantánea para conocer todos los días un nuevo avance…

El theme tiene exactamente lo que necesito: que sea limpio, claro para la lectura de los artículos, que cargue de forma rápida y no le haga perder tiempo al usuario, que los comentarios estén anidados, y que despliegue un poco de Magia en cada visita…

Espero sus comentarios, críticas, sugerencias y aviso de las cosas que no funcionen para que pueda dejar todo a “punto caramelo“… Saludos…

De igual forma, aburrido, decidí agregarle un Sidebar a mi bitácora, quedó tal cual la pueden apreciar ahora, y estoy muy orgulloso del mismo ya que fue creación propia… Ahora, ¿que puedo decir de todo esto?…

La mayoría de los Sidebars en los Blogs son repetitivos, he visto muy pocos que se esmeran por colocar algo diferente al común de los mortales… Normalmente los Sidebars incluyen una lista de links con enlaces recomendados, mejor conocidos como Blogroll, un listado con las categorías del sitio, la posibilidad de subscribirse mediante correo electrónico o RSS y un archivo con enlaces a los diferentes meses y correspondientes años…

Otro más “avanzados” decidieron agregar además una lista de artículos populares, otra lista de artículos recientes, y finalmente otros colocan un ranking con los nombres de quienes más comentan… Desde mi punto de vista la lista de artículos populares es algo útil, aunque poco dinámico porque estos no cambian con regularidad, el tema de los artículos recientes tampoco me agrada porque es lo mismo que viajar al inicio del Blog, y el ranking con los nombres de quienes más comentan tiene utilidad nula, es simplemente un adorno…

Por otro lado, los Blogrolls tradicionales parecen siempre enlaces vendidos, no cumplen la función de recomendar sitios, y muchos encima colocan infinidad de estos, pierde la esencia, y finalmente el tema de suscripción por correo electrónico es una sección útil para el usuario que primera vez nos visita, olvidándonos del lector asiduo…

Yo propongo que hagamos más útil esta sección, y no la pensemos únicamente para el lector que nos visita por primera vez… Por ejemplo, en mi caso (y no digo que sea un ejemplo a seguir ni la formula del éxito), he incluido iconos sociales para seguirme en diferentes redes o agregar el contenido a otras así se difunde el mismo y el Blog tranza con la Red de Redes… Además he modificado la estructura estándar de los Blogrolls, donde encima de incluir pocos he agregado una pequeña descripción de los mismos así el usuario se ve tentado de visitarlo y esta sección cumple su verdadera función, la de compartir sitios que consideramos (ya que parece que le tenemos terror al hecho de que el usuario visite otras bitácoras)…

Además, ¿cuando fue la última vez que editaron esas columnas llamadas Sidebars?, quizás nunca, es porque las creamos y las dejamos olvidadas… Por esto propongo que incluyamos algo que por lo menos a mi me ha encantado, una pequeña sección destinada a recomendar lo mejor de nuestra bitácora, a sugerir ese artículo que tanto nos costó hacer y queremos que todos lean… Esta parte le es de utilidad tanto al usuario asiduo como nuevo, ya que luego de leer el artículo por el cual llegaron ven el Sidebar y dice “Ah, mira vos que interesante esto”…

Son ideas, sugiero aplicarlas o en realidad hacer lo que ustedes tengan ganas ya que cada uno es dueño de su propio Blog… Saludos…

Una de las sugerencias de Page Speed era que optimizará las imágenes de mi bitácora para reducir el peso total del sitio y por ende hacer que este se cargase mucho más rápido, por eso mismo me dispuse de ahora en adelante utilizar una nueva herramienta que encontré que cumple la función de, a cualquier imagen, comprimirla y devolverla en formato PNG sin una absoluta pérdida de calidad…

Los resultados de esta herramienta llamada PNG Out me han dejado sorprendido, y para demostrar su funcionamiento voy a realizar una serie de prueba sobre una imagen que utilizo como fondo de pantalla en mi computadora, y otra serie de pruebas en otra imagen seleccionada al azar para afirmar los resultados…

Mi fondo de pantalla, como me gusta apreciar una imagen en muy buena calidad, es en formato BMP con un peso de 3,90 MB (lo cual es normal para una imagen de 1280 x 800)… A esta imagen la voy a transformar a PNG utilizando primero que nada un programa de edición de imágenes como Adobe Photoshop, y luego al archivo original, en BMP, lo voy a someter al programa PNG Out para comparar los tres archivos finales una vez terminado el proceso…

Como se puede apreciar en la tabla anterior, si bien la diferencia es mínima, existe… Utilizando el programa en cuestión se logra en este caso un 0,98% más de compresión sobre un archivo en PNG normal, si a esto lo aplicamos a todas las imágenes que tenemos en nuestro sitio en Internet la reducción total del peso del mismo será más que considerable…

Por otro lado he analizado una tercer imagen con dimensiones de 480 x 320 en formato JPEG, con un tamaño de 252 KBs, y realizando el mismo proceso que con la imagen anterior los resultados son aún más maravillosos…

En este caso el archivo transformado a PNG pesa un poco más del 15% sobre el valor del peso inicial, por lo cual nos convendría utilizar el JPEG original… Pero si a este archivo original lo pasamos por el PNG Out obtenemos una reducción del 4,36% sobre el valor original, y un 19,43% de compresión en comparación con el PNG sin manipular…

Estos valores pueden ser absurdos para un usuario común, pero si aplicamos la compresión a todas las imágenes de un sitio en Internet, ya sea del diseño o de los artículos en el caso de una bitácora, podemos obtener resultados de carga maravillosos que el visitante nos agradecerá… Saludos…

Esta herramienta creada por Adobe es gratuita y esta disponible tanto mediante un navegador de Internet como también utilizando la plataforma de Adobe Air (como no podía ser menos viniendo de la mano de Adobe), donde la primera esta mucho más completa que la versión de escritorio (a mi entender)…

Gracias a Adobe Kuler podemos ver las diferentes creaciones de los usuarios de dicha herramienta, alguna de las cuales he utilizado hace tiempo, o incluso podemos crear nuestra propia paleta de colores a partir de un color o subiendo una imagen desde nuestra computadora… En cualquiera de los dos casos la herramienta es muy simple de utilizar, y a pesar de que la misma esta en Ingles, dudo que sea un problema para aquellos que no manejen el idioma porque la interfaz es simple de utilizar…

En el caso de la misma herramienta sobre Adobe Air podremos también ver las creaciones recientes o más populares de los diferentes usuarios de Adobe Kuler, y aquella que nos guste podremos arrastrarla fuera del programa para mantenerla en una ventana aparte y no perderla mientras seguimos en la búsqueda… Lamentablemente lo que no nos permite la herramienta es crear nuevas paletas, por lo cual tendremos que inevitablemente ingresar a la página…

En mi caso me ha sido de mucha utilidad y espero les cubra sus necesidades lo mejor posible… Saludos…

Por eso mismo es que el diseño Facebook Addict cumple el requisito de todos aquellos que quieren un diseño para WordPress con la nueva apariencia que actualmente utiliza Facebook (que a muchos parece no gustarle, pero a mi me encanta)…

El mismo esta preparado con Widgets tanto en la columna izquierda como derecha, incluye el apartado de noticias que utiliza Facebook pero donde en este caso se muestra el último artículo de alguna categoría que especifiquemos, y finalmente incluye al lado de los artículos (en donde se supone que estaría, en Facebook, la foto del usuario) una imagen en miniatura extraída directamente del contenido (sin necesidad de que tengamos que realizarlo de forma manual)…

Lo único que no me gusta es el diseño que se les ha atribuido a los comentarios y los formularios del mismo, además de que no soporta el entrelazado que brinda WordPress 2.7… Si estan interesados pueden descargarlo de “Addicted to Facebook? Facebook-Addict WordPress Themes is Available for Free“… Saludos…

Por estos motivos es que muchas personas con algo de conocimiento en diseño, o muchas personas con ganas de lanzar una nueva idea, proponen métodos para incentivar al usuario a actualizar su versión de Internet Explorer o abandonar dicho navegador para pasar a nuevas alternativas como Mozilla Firefox, Opera, Google Chrome o Safari… En este caso me entero gracias a Anieto2K y el artículo “IE6 Update, la forma más sutil de sugerir que se actualicen” de la existencia de IE6 Update, una propuesta en donde se nos invita a colocar un pedazo de código fuente en nuestro diseño para desplegar a los visitantes que utilicen este ya obsoleto navegador una barra que proponga actualizar la versión de Internet Explorer…

He estado leyendo un análisis al respecto de IE6 Update y hay mucha controversia al respecto ya que la barra que se despliega es muy similar a las que Microsoft utiliza para notificaciones o advertencias oficiales, por lo cual esta barra le puede sonar como una emergencia al usuario y asustarlo, cuando en realidad es una simple invitación a actualizar, pero que se presta a confusión… Por esto mismo queda a elección del administrador de un sitio utilizarlo o no… Saludos…

Esta última oportunidad empezó luego de encontrarme con la colección de Fondos para Twitter publicado en Kabytes, entre los cuales destaco el que hace referencia a la famosa ballena elevada por los pajaritos que podemos encontrar cuanto Twitter entra en fase de mantenimiento o algo se rompe dentro de la herramienta y deja de funcionar momentáneamente…

La descarga del mismo en formato JPG con unas dimensiones de 1600 pixels x 1200 pixels esta acompañada también por una sugerencia en cuanto a la personalización de los colores del diseño de nuestra cuenta de Twitter con el fin de que el fondo se adapta a los colores (o los colores de adapten al fondo, es lo mismo)…

El fondo en cuestión se encuentra en el artículo antes mencionado y no es la imagen que pueden ver en este artículo (sólo esta para alegrarle el día a tus ojos)… Saludos…