Sebastián Thüer

Comunicación, diseño y tecnología

herramientas

Under The Site, una herramienta para espiar qué tecnología utiliza cada sitio

· ·

Es inevitable que  cuando vemos un buen sitio nos preguntemos… ¿cómo lo habrán hecho? Podemos investigar el código fuente, analizar las respuestas que proporciona el servidor y mirar con detalles las rutas de los archivos para descubrir directorios familiares pero lleva demasiado tiempo.

Under The Site facilita esta tarea y con sólo escribir la dirección del sitio nos devuelve un listado bastante complejo de la tecnología empleada en el sitio web. Por ejemplo, vemos que TechCrunch – sitio de referencia en temas de tencología- usa jQuery, Google Analytics, WordPress, el plugin BatCache y HTML5. O que la web de Mozilla está sobre un servidor Apache, programada en PHP y usa Google Chrome Frame para mejorar la visualización de las páginas en Internet Explorer.

El sitio también lista las tecnologías más populares entre las que encontramos:

  • Apache HTTP Server
  • UTF-8 Unicode charset
  • Google Analytics
  • jQuery
  • FBML
  • script.aculo.us
  • Twitter Widgets

Una buena herramienta para jugar un poco y espiar lo que están utilizando los sitios de nuestro segmento.

Pure CSS3 Lightbox: Galería de fotos en una sóla página sin JavaScript

· ·


Probablemente Ligthbox se uno de los plugins de JavaScript más extendidos en los diseñadores web. Si no lo conocés, se trata de un código JavaScript que sirve para generar galería de imágenes donde el usuario puede previsualizar y ampliar fotografía en mayor tamaño sin necesidad de recargar la página.

Se utiliza en muchos sitios web porque se trata de una solución práctica, sencilla y muy elegante. En el sitio de mi estudio de diseño web podés ver un ejemplo.

Sin embargo, la potencia de CSS3 permite que un comportamiento bastante similar pueda emularse sin necesidad de JavaScript ¿Las ventajas? Velocidad, facilidad de mantenimiento y código más liviano. El estudio Deaxon presenta este interesante experimento de emular a LightBox sin una sola línea de JavaScript.

Si bien todavía no todos los navegadores tienen soporte total para CSS3, el futuro parece estar en esa dirección: cada vez más efectos visuales en CSS.

El código del ejemplo anterior lo encontrás aquí (clic en la pestaña Source Code).

LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop

· ·

Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes.

Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Eso sí, la sintaxis también se ha hecho algo más compleja porque -como toda novedad en la industria- los desarrolladores de navegadores no se ponen de acuerdo y hay que utilizar propiedas específicas.

Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.

Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9.

El resulta es bastante bueno, aunque a veces puede que la pantalla del navegador se congele si agregamos demasiados efectos. Igualmente el proyecto de Felix Nicklas es de código abierto con lo cual es esperable que se vaya mejorando.

Obviamente, esta herramienta utiliza HTML5.

Zoetrope, una máquina del tiempo para la web

· ·

Hasta ahora cuando investigamos los registros históricos de la web teneíamos una solo herramienta: Wayback Machine del Internet Archive , que tiene indexados unos millones de sitios web desde 1996. Se trata de un excelente servicio gratuito que muy fácil de usar pero al cual se le podría dotar de muchísimas funcionalidades más.

Esto es lo que propone Zoetrope, un servcio que permite interactuar con los servicios históricos de la web. Desarollado por la Universidad de Washington y Adobe, se trata de una utilidad que va más allá de tomar instantáneas de sitios web y permite comparar datos a lo largo de un sitio web. Por ejemplo, podemos seguir la evolución del precio de un producto en Amazon.

[Leer más…] acerca de Zoetrope, una máquina del tiempo para la web

Wordle, un vistoso generador de nube de tags

· ·

Nube de tags de mi sitio con Wordle

Las nubes de tag o tagclouds es un conjunto de las palabra claves más importante de un sitio -generalmente un blog- que cuya frecuencia está representada en su tamaño. Es decir, que las palabras que más aparecen están más grandes y las que menos más pequeñas (como lo que está en la columna derehca de este blog). En síntesis, una forma rápida y visual para mostrar información.

Wordle es una herramienta que le da una vuelta más y te premite crear tu propia nube de tags tomando como fuente un texto o cualquier sitio que tenga RSS. En varios blogs y sitios han estado jugando con las herramienta para ver qué se dice sobre un tema. [Leer más…] acerca de Wordle, un vistoso generador de nube de tags