Webmaster Libre

• QuirksBlog: The AJAX response: XML, HTML, or JSON?
  (tags: AJAX development javascript tutorial xml json html)

Seguro que todos hemos tenido alguna vez la necesidad de facilitar, mediante una página web, direcciones y teléfonos de contacto. Lo ideal sería poder ofrecer toda esa información de la forma más cómoda posible para nuestros usuarios, en formato vcard, para que puedan importarlo de forma sencilla en sus gestores de contactos.

Lo que, en principio, puede parecer una tarea complicada se simplifica mucho gracias a los microformatos, en concreto hcard y a Brian Suda, que ha creado un comodísimo script con el que podemos convertir nuestras hcard en vcards.

Pero, vamos por partes. lo primero que debemos hacer es crear nuestra hcard. Como sabéis, los microformatos no son más que una forma de añadir mayor valor semántico al XHTML mediante el uso de determinadas clases. Por tanto, podréis incorporarla a cualquier página sin problemas y darle estilo con toda la libertad del mundo. Para no alargarnos mucho, vamos a crear nuestra hcard con el hcard creator.

La mía queda más o menos así:

Y se ve así:

Bien, ahora que ya tenemos nuestra hcard sólo queda transformarla en una vcard y facilitarla a nuestros usuarios. Para ello sólo tendremos que incluir un enlace al script de Brian Suda con la url de la página en la que reside nuestra hcard.

Descarga mis datos de contacto como vCard

En Shape Shed, donde descubrí el script conversor, llevan más allá la parte estética de este método. Eso ya es cosa tuya, recuerda, no es más que XHTML así que tu imaginación es el límite.

Hace tiempo comentamos un estupendo script PHP que nos permitía unir y versionear los archivos css y javascript de nuestros sitios, permitiéndonos comprimir estos últimos.

Mihalcea Romeo, basándose en este mismo script ha hecho unas cuantas modificaciones y, como resultado, tenemos un script que nos permitirá también comprimir nuestras hojas de estilo para ganar en optimización, no sólo reduciendo el número de peticiones HTTP si no también permitiéndonos utilizar tantos archivos, comentarios y espacios blancos queramos en nuestros CSS, ya que el script simplemente copia el contenido de los archivos en uno nuevo y lo comprime. Así nosotros editamos un código humanamente leible y servimos a nuestros usuarios uno optimizado para maquinas.

Web page optimizer

A la hora de incluir imágenes en nuestros sitios web solemos dar por buenas las convenciones de diseño que nos plantean las hojas de estilo. En el caso de querer incluir imágenes con algún efecto recurrimos a complejos trucos y a editores de imágenes. Válido para un sitio con pocas imágenes pero ¿qué pasa si necesitamos dar estilo a muchas imágenes?

swfIR pretende ser a las imagenes lo que sIFR es al uso de tipografías no convencionales en nuestros diseños, mediante Javascript y Flash, de forma no intrusiva, nos permite incluir efectos en nuestras imágenes de forma automática. Entre los efectos que nos permite están:

• Añadir un borde
• Añadir sombras
• Rotar imágenes
• Bordes redondeados

El código generado es completamente válido y, al basarse en la mejora progresiva (progresive enhancement) los usuarios cuyos navegadores no soporten javascript o flash ni lo notarán (recibirán las imágenes normalmente)

swfIR: http://www.swfir.com/

Las galerías están de moda, de diseños con CSS, de logotipos, de pinceles, tipografías… Nos faltaba una galería de scripts AJAX para descargar.

MiniAjax es una recopilación de pequeños scripts encontrados por la red, listos para descargar y utilizar. No se trata de scripts nuevos, estoy segura que la mayoría ya los conocéis de antes, si no de una selección de buenos scripts que nos ahorra tiempo de búsqueda.

MiniAjax: http://www.miniajax.com

En las últimas semanas se ha hablado mucho de OpenID. Supongo que todos sabemos a estas alturas que se trata de una iniciativa para crear un “equivalente” libre al Passport de MSN: una única cuenta que nos abrirá las puertas a muchas aplicaciones y sitios web diversos.

Si estás pensando en probar OpenID en algún desarrollo con Ruby on Rails ahora lo tienes más fácil que nunca con la librería Ruby OpenID Library (gem install ruby-openid)

Más información y enlaces en el wiki de Ruby on Rails

• CSS - Clearing floats
  El unico articulo que necesitas para comprender porque tus contenedores no se muestran bien cuando contienen elementos flotados y como solucionarlo
  (tags: CSS design bug html layout posicionamiento)
• Web 2.0 how-to design style guide
  La guía de estilo definitiva para la web 2.0
  (tags: design Inspiration webdesign web2.0)
• Clutter Free - WordPress plugin - Download Squad
  Si el interfaz del editor de WordPress te parece demasiado agobiante puedes probar clutter free para eliminar todo eso que nunca usas
  (tags: plugin Wordpress)
• Know your Enemy: Web Application Threats
  (tags: articles security web)

Cuando creamos un sitio web es importante que nos aseguremos de que es accesible por cualquier usuario desde cualquier plataforma. No obstante, sobre todo a los diseñadores y desarrolladores de javascript, no nos gusta renunciar a las mejoras visuales y de usabilidad que nos pueden proporcionar ciertas técnicas. ¿Cómo podemos compaginar la accesibilidad de un sitio con las técnicas más avanzadas?

Existen dos respuestas: creando sitios web que se degraden aceptablemente o mejorando nuestros sitios paulatinamente.

La degradación aceptable (Graceful degradation) consiste en crear nuestros sitios web pensando en los usuarios de los principales navegadores y crear elementos que sustituyan a los no compatibles con navegadores antiguos o agentes de usuario no convencionales.
Un ejemplo claro de degradación aceptable es la inclusión de etiquetas <noscript> para los navegadores que no soportan Javascript.

La mejora progresiva (Progresive Enhancement) consiste en comenzar creando sitios simples, compatibles con todos los navegadores y agentes de usuario e ir introduciendo mejoras que, en caso de no ser compatibles, no provocarían cambios importantes en la página (salvo, por supuesto, la desaparición de algunas funciones no imprescindibles)

Ambos enfoques tienen sus pros y contras, para seguir indagando en el tema os recomiendo dos artículos, ambos en inglés:

• Sitepoint: Handling Javascript disabled browsers
• Accessites.org: Graceful Degradation & Progressive Enhancement

Los formularios son parte fundamental de la mayoría de sitios web: formularios de registro, formularios de contacto, tiendas…
Pero, para muchos de nuestros usuarios, los formularios son un estorbo e incluso una razón para abandonar un sitio. Demasiado largos, demasiado complejos, demasiado personales…

FormAlive te permitirá trabajar con datos reales en lugar de suposiciones a la hora de optimizar tus formularios. Con sólo introducir un código en tus formularios podrás conocer el número de abandonos e, incluso, el campo en el que ha abandonado el formulario cada usuario.

FormAlive: http://www.formalive.com

Via Wwwhat’s new?

No sé vosotros pero yo, a veces, cuando ando perdida buscando un color no soy capaz de sacarle partido a las típicas ruedas o selectores de colores. Yo necesito una idea y trastear con barras deslizadoras o valores puede ser una ardua tarea.
Cuando estoy atascada con la paleta de color me gusta ver galerias de paletas o colores (como daily color scheme) y hoy, via del.icio.us he encontrado Color Whore.

Color Whore es un directorio de colores que podrás navegar mediante categorías y al que podrás añadir colores tu mismo (como buen directorio). Sin duda otro enfoque a las herramientas de color online. Uno que, si consigue generar algo de interés, puede convertirse en un recurso de valor.

Color Whore - a directory of nice colors