Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

martes, 31 de mayo de 2011

Como explorar hashtags en Twitter

hashtagify es una aplicación web que permite—fácilmente—explorar no sólo la popularidad o la tendencia de cualquier hashtag publicado en Twitter sino, además, cualquier otro hashtag que se relacione.

Como explorar hashtags en Twitter

En mis pruebas, por ejemplo he encontrado alcances, como el siguente:

Variants: SEO:51% seo:48% Seo:1% SeO:0% SEo:0%

Cualquiera con una cuenta en Twitter puede crear, usar y re-utilizar un hashtag. Así el término SEO se convierte en hashtag al escribirlo como sigue: #SEO

Esta aplicación, a la fecha, ha rastreado ya poco más de 1 millón de hashtags en 37,8 millones de tweets.

Sitio Web | hashtagify
Share:

lunes, 30 de mayo de 2011

Como combinar y comprimir CSS y Javascript con zbugs

zbugs es una aplicación Web que permite combinar, minimizar y comprimir—mediante gzip—tanto los archivos Javascript como los CSS también.

Como combinar y comprimir CSS con zbugs

Esta aplicación Web trabaja en forma satisfactoria ante cualquiera de las 3 siguentes modalidades:

  • informar la URL del dominio que nos ocupa
  • subir los archivos
  • indicar la URL de cada archivo

En el promedio de pruebas que he llevado a cabo, se ahorra—en promedio—hasta un 80% del tamaño de archivos y se reducen las peticiones HTTP entre 20 y 25, según los casos.

A los efectos de optimizar la velocidad de carga de cualquier sitio Web,  considero el uso de esta aplicación (o similar)  como un excelente recurso; en especial atención que esta variable SEO incide en los resultados de búsquedas orgánicos (Google dixit)

Sitio Web | zbugs
Share:

domingo, 29 de mayo de 2011

Layer Styles: un editor visual de capas

Layer Styles es una aplicación Web que—de manera visual—permite generar el CSS correspondiente a diferentes visualizaciones de una capa genérica.

Layer Styles: un editor visual de capas

De esta manera, es posible lograr ajustes con respecto a:

  • sombras (interna y externa, por separado)
  • fondo y borde del layer
  • bordes redondeados

Sitio Web | Layer Styles
Licencia | Open Source
github | LayerStyles
Share:

sábado, 28 de mayo de 2011

Está Twitter matando al RSS?

Desde que Twitter ha rediseñado su sitio, se le ha acusado de muchas cosas; entre ellas, de matar al ecosistema.

El foco de estas acusaciones comienza cuando Twitter remueve el canal RSS del perfil de cada usuario. A la fecha, y aunque públicamente esto estaba en planes de solucionarse; nada ha ocurrido todavía.

Está Twitter matando al RSS?

No obstante, hay un par de recursos disponibles para suscribirse a los contenidos sindicados; al time-line de cualquier usuario de Twitter (que comparta sus publicaciones).

La primera es llevar a cabo una búsqueda en search.twitter.com mediante el nombre de usuario deseado y dados los resultados está disponible el enlace (arriba a la derecha) en el botón de contenidos RSS. Convengamos que mediante este método, uno puede suscribirse a los resultados de cualquier query ;-)

La otra manera, necesita pocos algunos pasos adicionales y es así:

Requiere el uso de un servicio de terceros, como idfromuser, por ejemplo. Esta aplicación Web devuelve el ID del user consultado. Luego hay que remplazar XYZ con el ID encontrado en la siguiente URL https://twitter.com/statuses/user_timeline/XYZ.rss

Luego sólo hay que utilizar una aplicación como Google Reader o un plugin de Firefox para estar al día con las publicaciones.

Basado en la lectura de Twitter hasn’t killed RSS just yet, here’s how to find your Twitter feed RSS url
Share:

domingo, 15 de mayo de 2011

Como transformar imágenes a CSS

Entre insólito y presumido, esta aplicación Web logra su cometido: generar un marcado estructural y el CSS correspondiente para transformar cualquier imagen en HTML+CSS

Como transformar imágenes a CSS

Como imagen, puede cargarse cualquiera de los siguientes formatos:
  • JPEG
  • GIF
  • BMP
  • TIFF
  • ICO
Aunque, el mejor impacto visual está de mano de utilizar PNG

Las principales fortalezas de esta aplicación Web son:
  • al utilizar PNG la app mantiene su transparencia
  • amplio soporte del tipo de imágenes para procesar
  • su uso no puede ser bloqueado por proveedores de mail que bloquean imágenes
  • el CSS al ser utilizado inline asegura buena compatibilidad con los diversos clientes de correo

Sitio Web | Img to CSS
Share:

jueves, 12 de mayo de 2011

Layer Styles: un editor visual de capas

Layer Styles es una aplicación Web que—de manera visual—permite generar el CSS correspondiente a diferentes visualizaciones de una capa genérica.

Layer Styles: un editor visual de capas

De esta manera, es posible lograr ajustes con respecto a:

  • sombras (interna y externa, por separado)
  • fondo y borde del layer
  • bordes redondeados

Sitio Web | Layer Styles
Licencia | Open Source
github | LayerStyles
Share:

miércoles, 11 de mayo de 2011

Encabezados escalables con FitText

FitText es un plugin, una librería en jQuery que permite—en los diseños fluídos—adaptar el tamaño de la fuente de los encabezados según el ancho del contenedor correspondiente.

Encabezados escalables con FitText

Sitio Web | FitText
Share:

lunes, 9 de mayo de 2011

Un teclado basado en logos y marcas

El diseñador argentino Ignacio Pilotto es el responsable de este ingenioso diseño de teclado; el cual, aunque basado en la distribución QWERTY ha reemplazado logos de empresas por las letras que representan.


Así, entonces, y en orden alfabético:

Adidas, Burger King, Coca Cola, Disney, eBay, Facebook, Google, HP, Intel, J&B, Kodak, Lacoste, McDonald's, Nike, O2, Pepsi, Quaker, Rolling Stone, Shell, Twitter, Unilever, Virgin, WordPress, Xerox, YouTube y Zippo

Vía | Digital Inspiration
Share:

Google también dice Somos gente...

Google también nos dice: "Somos gente, no máquinas". Información suministrada dentro del archivo humans.txt ya sugerido por Juanjo Bernabeu en su proyecto lanzado a inicio del año: Qué es humans.txt?

Google is built by a large team of engineers, designers, researchers, robots, and others in many different sites across the globe. It is updated continuously, and built with more tools and technologies than we can shake a stick at. If you'd like to help us out, see google.com/jobs

La cita está presente en la siguiente URL: http://www.google.com/humans.txt y aunque no responde al estándard sugerido por human.txt no deja de ser un anécdota—que a las claras—que no dice: —hasta Google compró la idea...


Vía | Google Operative System

Share:

sábado, 7 de mayo de 2011

Como verificar un blog en Google

Desde el Blog del Equipo de Calidad de Búsqueda de Google me llega la noticia de una nueva manera de reclamar la administración de un sitio Web.

Si tu blog corre bajo la plataforma de WordPress, ahora disponés de un plugin que te hace las cosas mucho más fáciles a la hora de verificar tu sitio.

Como verificar un blog en Google

Se trata de Google Site Verification Plugin, un plugin que utiliza la API de Google Site Verification.

Requerimientos para instalar Google Site Verification Plugin

  • WordPress 3.0 ó superior
  • PHP 5.2.0 ó superior
  • Tener instaladas las extensiones JSON y CURL de PHP (si no conocés sobre estos datos, consultá a tu proveedor de hosting)

Además—finalmente—si estás ejecutando extensiones como WP-Cache o WP Super Cache, vas a tener que desactivarlas temporalmente, para que este plugin pueda hacer bien su trabajo
Share:

martes, 3 de mayo de 2011

CSS3 PIE o como implementar CSS3 en IE

Se trata de CSS3 PIE un archivo que se adjunta a cualquier página Web de forma tal que Internet Explorer (desde la versión 6 a la 8, inclusive) pueda llevar a cabo un render adecuado con el nuevo estándard que se viene: CSS3.

Y que ya, muchos navegadores (modern browsers) están implementando progresivamente.

CSS3 PIE o como implementar CSS3 en IE

El CSS que genera la aplicación, en mis pruebas, es algo así:

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

Nótese la última línea con behavior y la ruta hacia el archivo de marras.

Esta última versión de PIE (v1.0 beta 4), implementa en forma adecuada:
  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient (como una imagen de fondo)
Este proyecto—aunque joven—cuenta con la participación (en inglés) de una entusiasta comunidad que participa a cotidiano en el foro del sitio.

:-) Happy CSS3 coding! (PIE dixit)

Sitio Web | CSS3 PIE
Share:

domingo, 1 de mayo de 2011

Un editor online de CSS3

CSS3 Generator es una aplicación Web que te hace más fáciles las cosas para editar algunos básicos de CSS3.

Como ser:
  • border-radius
  • box-shadow
  • background gradient
  • opacity
Este generador permite personalizar algunos aspectos antes de obtener el código.


En mis pruebas, el CSS obtenido, se ve así:

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 2px #000000;
-webkit-box-shadow:0px 0px 2px #000000;
box-shadow:0px 0px 2px #000000;
/*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
background: -moz-linear-gradient(top, #ffffff, #000000);
background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000));
background: -o-linear-gradient(top, #ffffff, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(top, #ffffff, #000000);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
opacity:0.39;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=39);
/*-ms-filter must come before filter*/
filter: alpha(opacity=39);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/


Sitio Web | CSS3 Generator

Share:

Publicidad

Estadísticas