Sebastián Thüer Blog » Destacado

El diseño web en 2011: Las principales tendencias del año que se va

Sebastián Thüer — Wed, 14 Dec 2011 19:15:49 +0000

Con la llegada del final de año comienza la sistemática publicación de artículos que recogen lo mejor (o peor) de la temporada que se está yendo. Con el diseño web ocurre algo similar así que me gustaría hacer mi aporte personal al género “lo mejor de 2011” con una mirada un poco más general sobre aquellos puntos que han marcado el año en el diseño para la web.

HTML5 y CSS3

Los diseñadores tomaron la delantera y está utilizando CSS3 de manera cada vez más fluida para simplificar procesos que antes requerían de trucos y “hacks” para que funcionacen corramente. Bordes redondeados, sombras, incluso animaciones y menús interactivos: con CSS3 definitivamente la vida es más fácil.
HTML5 viene algo más demor ado. Muchos ya estamos utilizando las etiquetas semánticas específicas como

Timeline, un nuevo concepto visual para repensar Facebook

Sebastián Thüer — Wed, 28 Sep 2011 14:50:38 +0000

Facebook modificará radicalmente la experiencia de usuario. Durante la semana pasada presentó en la conferencia de desarrolladores F8 un proyecto que avanza mucho más allá de los cambios estéticos y las pequeñas mejoras que venía realizando hasta ahora. Timeline es una nueva propuesta conceptual para orientarnos en las redes sociales donde el muro tradicional pasa a la historia.

¿Por qué semejante cambio? Básicamente porque el modelo visual de Facebook se está agotando. Hasta ahora su eje era el streaming de datos, esto es, el flujo de información desde la actividad de los contactos hacia el usuario: Fulano es amigo de Mengano, Sultano fue etiquetado en una foto o un amigo que te invita a su fiesta a través de los eventos.

El problema con este modelo es la cantidad de información. Las estadísticas oficiales de Facebook nos dicen que cada usuario tiene un promedio de 130 amigos y unas 80 conexiones adicionales entre páginas, eventos y grupos. Un número bastante alto si tenemos en cuanta que hay cuentas abandonadas, usuarios con más de una y perfiles falsos inactivos. Toda la información no puede entrar en el streamline, al menos no sin que el usuario sienta que el flujo de datos es un caos y termine agobiado por la cantidad de informacion que se le escapa.

La solución parcial de Facebook fue comenzar a filtrar datos. Por empezar, mostrarnos solo los datos de las personas con las cuales nos comunicamos más frecuentemente. El problema del criterio, es que no necesariamente más comunicación significa más cercanía o más interés por conocer lo que hace el otro.

Una idea reciente fue el de las listas inteligentes por las cuales nos crea automáticamente un grupo de “mejores amigos”, compañeros de estudio y de trabajo. Un intento sin mucho disimulo por emular los círculos de Google+ que tanto gustan a los analistas y expertos en social media. Como los círculos, en las listas inteligentes se puede elegir qué persona sale o ingresa de ellas.

El problema que sigue subsistiendo son los datos históricos ¿Cómo encontrar aquel comentario tan divertido que dejó un amigo hace un par de años? Si no es a través de una fotografía, probablemente la búsqueda sea muy difícil. El 50% de los usuarios de Facebook ingresa al sitio todo los días. Pero para la otra mitad, un día sin ingresar equivale a perder de vista información.

Facebook tenía un encanto especial cuando íbamos descubriendo viejos amigos o compañeros y nos enterábamos qué fue de su vida, pero lentamente la preocupación de los usuarios comienza a ser cómo dejar de recibir basura y orientarse en el incesante flujo de datos para encontrar lo que verdaderametne le interesa. En esa dirección apuntó Facebook al anunciar que deja de enviar un correo de notificación por cada cosa que pasara en nuestro muro para optar por un formato de resumen diario.

Adiós al muro

La presentación de Marck Zuckerberg en F8

Timeline borra de un plumazo el antiguo muro y organiza los datos como sucesos alrededor de una línea de tiempo donde se representan los sucesos más significativos de nuestra vida. Una especie de álbum de fotos multimedia con el registro de los momentos más relevantes según un algoritmo de Facebook, aunque esta selección automática puede corregirse y personalizarse.

Justamente este algoritmo es el que ha recibido más críticas ¿Está realmente listo Facebook para decirnos cuáles son los momentos más importantes de nuestra vida? Un cumpleaños, los estudios, un nuevo trabajo son solo algunos eventos bastante obvio debajo de los cuales hay mucha más información para procesar.

Además, dice Lance Ulanoff en Mashable, Timeline viene de la mano de OpenGraph que no es más que una aplicación para conocer patrones de conducta. En teoría, esto serviría para un grupo de amigos mirara una película o escuchara música al mismo tiempo y pueda comentar entre ellos lo que está sucediendo ¿Pero interesa realmente esto a los usuarios o está hecho a la medida de los gerentes de marketing y aunciantes que pueden conocer en detalle la audiencia a la cual se dirigen? Otra cuestión complicada de Timeline: revela quién dejó de ser nuestro amigo.

En el lado positivo encontramos que Timeline tiene un indudable atractivo para viajar hacia atrás en el tiempo y redescubrir sucesos, fotos y comentarios del pasado. Todo desde una sola pantalla y sin necesidad de usar buscadores o rastrear una imagen en decenas álbumes.

El nuevo formato permite muchas más opciones de personalización. Las ridículas fotos que Facebook pone al azar en nuestro perfil no necesariamente refleja la imagen que queremos. Por eso, además de la foto de perfil, existe ahora la opción de subir una foto de presentación donde mostrar la imagen que queremos. Más allá de esta cuestión particular, en general Timeline transmite la sensación de que hay mucho más control sobre lo que mostramos en nuestro perfil.

En conclusión…

Si Facebook quiere evolucionar el muro tradicional se convierte en un lastre. Creado en 2005, cuando apenas Facebook tenía un año, el formato no está pensado para la cantidad de información que circula hoy por las redes sociales ni el número de conexiones que se crean.

Los sucesivos cambios de controles de privacidad aportaron bastante lío al tema y es probable que muchos usuarios no tengan todavía demasiado claro qué están compartiendo y con quién a través de Facebook. A esto hay que sumarle la natural resistencia al cambio y las habituales quejas de los usuarios cada vez que algo se modifica. Un dato interesante: el 86% de los usuarios está disconforme cada ves que Facebook cambia algo de lugar.

Pero manterse tal como está no parece ser una alternativa razonable para Facebook. En definitiva, Timeline es una apuesta por naturalizar el flujo de información alrededor de una línea del tiempo donde el viejo formato de “caja de texto enriquecida” que aporta el muro queda superado por un ecosistema de datos donde la información luce más integrada y relacionada entre sí.

Habrá que esperar para saber si la nueva apuesta tiene éxito.

Los mejores sitios web del año seleccionados por la revista Time

Sebastián Thüer — Thu, 18 Aug 2011 18:45:21 +0000

La revista Time ha dado a conocer los mejores sitios web de 2011. Como toda lista, tiene sus limitaciones y sesgos pero es interesante para analizar qué es lo que espera el gran público de un sitio.

Cuando trabajamos en el sector de la tecnología corremos el riesgo de cerrarnos en un círculo bastante pequeño donde nos deslumbramos por páginas que nos parecen increíbles por el trabajo y el cuidado que tienen en su desarrollo pero que, de cara a la mayoría de los usuarios, no son gran cosa.

Por eso, este listado nos ubica en una perspectiva más global donde las tendencias y los gustos se mueven a un ritmo y con una lógica diferente del mundo más geek. En definitiva, si tenés que realizar algún trabajo de diseño o desarrollo web en algunas de las categorías que analizó Time no está de más mirar y ver qué es lo que se espera hoy de un buen sitio de su rubro.

Música y Video

Familia & Niños

Deportes

Información & Noticias

Finanzas & Productividad

Viajes & Compras

Salud y Ejercicio

Social Media

Juegos

Educación

Diseño web con HTML5: 10 recursos para comenzar ya

Sebastián Thüer — Mon, 21 Feb 2011 09:00:27 +0000

El HTML5 está a la vuelta de la esquina. Aunque la especificación todavía no está aprobada, cada vez más diseñadores y desarrolladores web se animan a iniciar sus proyectos con el futuro estándar. Para que iniciar un proyecto en HTML5 no sea un quebradero de cabeza, acá hay una recopilación de diferentes recursos que permiten comenzar rápidamente el diseño web en la nueva versión del HTML.

Está lista actualiza el viejo post de 2009 con 5+5 recursos para HTML5. Si no tenés idea de HTML5, mirá primero HTML5 para diseñadores web.

1. Modernizr

Moderniz es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

Más sobre Modernizr

2. HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

Más sobre HTML5 Shiv

3. HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

Más sobre HTML5 Boilerplate

4. Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

Más sobre Initializr

5. HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

Más sobre HTML5 Reset

6. Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

Más sobre Switch To HTML5

7. HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el escricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

Más sobre HTML5 Lint

8. HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

Ir a HTML5 Doctor

9. HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqué una presentación sobre HTML5. HTML5 Rocks combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

Ir a HTML5 Rocks

10. HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto a el uso de iconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

Ver HTML 5 Reference Poster

#Bonus: HTML5 for Beginners

HTML5 for Beginners

HTML5 for Beginners es un libro escrito por Jeremy Keith especialmente para diseñadores web que quieran iniciarse en los futuros estándares de la web. De manera ágil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos prácticos. Un texto breves pero tremendamente útil publicado por A Book Apart. Cuesta 18 dólares más envío en versión papel y 9 dólares el eBook (ePub y PDF abierto sin restricciones).

Ilustración principal a partir de una imagen de BigStockPhoto

Wireframe, la clave del proceso de diseño web

Sebastián Thüer — Mon, 22 Nov 2010 11:00:13 +0000

Aprender diseño web hoy puede ser bastante frustrante. Si en los comienzos alcanzaba con editar HTML en el bloc de notas, la evolución del sector y su profesionalización ha llevado a que cada vez haya que saber más cosas.

Salvo raras excepciones, un buen sitio web se trabaja en equipo. Desde la idea inicial hasta el producto terminado hay varias manos y cabezas que trabajan sobre diferentes partes del problema. Los directores o jefes de proyecto definen con el cliente los trazos gruesos y el objetivo de la web, los diseñadores de interacción buscan transformar los problemas en historias relatadas con sencillez, los artistas visuales pulen la gráfica, los codificadores transforman las dibujos en HTML y CSS y los especialistas en marketing buscan que el contenido sea los más visible. Y eso que no contamos a los programadores ni creadores de contenido.

Travis Isaacs, un reconocido diseñador que trabajó en numerosos proyecto, propone un proceso de diseño web bastante tradicional:

Sketch: Se capturan con lápiz y papel las ideas principales y se piensa en una primera organización del contenido.
Wireframe: Se diseñan las bases de la interfaz a partir de múltiples interacciones entre el equipo con el cliente.
Comp: Se realiza la composición del sitio en Photoshop para ajustar la interfaz visualmente y agregar los detalles.
Prototype: Se obtiene una página web funcionando con HTML, CSS, jQuery y todos los elementos que sean necesarios.

La clave de Isaacs está en el acento que pone sobre el wireframe. Aquí está el verdadero corazón del diseño y se toman las decisiones clave que pueden convertir una buena idea en un gran sitio web o hacer que fracase. Es el momento de mayor discusión y donde el equipo de desarrollo más interactúa con el cliente. Por eso, nos sugiere Isaacs, es el punto donde los buenos diseñadores hacen la diferencia.

Generalmente, el wireframe es un gráfico bastante esquemático donde se ubican los elementos principales que se mostrarán en pantallas y se analiza como el usuario interactúa con ellos. Sus ventajas son evidente para el diseñador pero los clientes, en general, no llegan a visualizar claramente que aspecto tendrá su página web.

Por eso Isaacs propone wireframes de alta fidelidad, un medio camino entre el wireframe tradicional y el composión del sitio final en Photoshop.

¿Cómo hacerlo? Con KeyNote, el programa de presentaciones de Mac. Es lo suficientemente sencillo como poder crear una diseño rápidamente y, a la vez, tiene varias opciones de dibujo que le dan bastante potencia.

Pero más allá del software específico lo interesante es la técnica de trabajo. El comienzo de todo es una historia donde se le dice al usuario que está en una situación A y va a llegar a una situación B. Luego, el diseño consiste en construir un guión sólido que relate de modo consistente como ocurre esta transformación. Y la película, por supuesto, siempre tiene final feliz.

Presentación completa de Trevis Isaacs

Vía: Mashable
Las imágenes del post pertenecen a la presentación del autor, salvo la último que está modificada por mí.

8 pasos para hacer email marketing de forma efectiva

Sebastián Thüer — Mon, 01 Nov 2010 10:00:06 +0000

¿Tiene sentido seguir usando el correo electrónico como canal del marketing en la fiebre de los servicios 2.0? La respuesta es clara: sí. Ni Facebook, Twitter o Delicous, las estadísticas dicen que todavía el e-mail sigue siendo la principal vía para compartir información a través de Internet.

El martes pasado se llevo adelante el Email Marketing Made Simple (EMMS), un evento que reunión a diversos especialistas que hablaron sobre cómo llegar de forma efectiva a los usuarios a través del correo electrónico.

A pesar de los problemas iniciales con el streaming, finalmente los inconvenientes se solucionaron y muchos pudimos seguir el evento online donde la interacción con los demás participantes enriquecía las presentaciones. Encontré especialmente interesantes las charlas de Franco Carrera, Juan Damia y Jonathan Baldovino.

El EMMS 2010 me sirvió para sistematizar algunas ideas y el resultado es esta pequeña guía para hacer comenzar a realizar mail marketing.

1. Definir la estrategia y objetivos

El mail marketing es un medio, no un fin. Antes de pensar en herramientas, métricas o cuestiones de diseño hay que definir con claridad cuál es el propósito de la comunicación ¿Buscamos incrementar ventas o reforzar la presencia de la marca? ¿Vamos a vender productos nuevos o utilizarla para liquidar remanentes de stock? Mensaje, contenido y diseño se articulan a favor de un objetivo concreto.

Otra cuestión a tener en cuenta es rol del marketing por e-mail dentro de la estrategia global de comunicación ¿Se usa el mail como medio exclusivo o sirve para reforzar una campaña que también circula por canales alternativos? ¿Se transmite el mismo mensaje o hay disonancias con otras comunicaciones? Es importante que el mail marketing sea parte de un proceso integral o y no una acción aislada.

2. Establecer las métricas

Una vez que hay objetivos, hay mediciones ¿Qué métrica puedo usar en estos casos? Una básica es la tasa de apertura, es decir, qué porcentaje de los destinatarios de los correos abren el mensaje en su bandeja de entrada. Los especialistas hablan que una tasa de apertura superior al 20% ya es buena.

Otras métricas también dependen del objetivo concreto de la campaña y tienen que articularse con las mediciones que se realizan sobre el propio sitio web y social media. Por ejemplo, CTR (Click Through Rate), ratio de conversión, ratio de bajas, ratio de viralidad o emails rebotados.

3. Seleccionar la herramienta

Distribuir newsletters con el Outlook es como diseñar sitios web con Front Page: casero y poco profesional. Para hacer un trabajo serio hay que utilizar las herramientas adecuadas que básicamente se dividen en dos grandes grupos: software de escritorio y software online o “en la nube”. En este caso, las ventajas del software en la web son evidentes porque además de la ubicuidad nos ayudan un tema técnico no menor: configurar los servidores para enviar el correo y evitar entrar en la indeseable carpeta de correo no deseado.

Entre las herramientas online está Doppler (auspiciante del EMMS 2010) con la ventaja de estar disponibe en español. Otras alternativas son Mail Chimp y Campaign Monitor. En todos los casos hay planes basados en la cantidad de suscriptores y te proveen de diferentes herramientas para diseñar tu newsletter y hacer los envíos. También incluye herramientas para medición y, en algunos casos, integración con Google Analytics.

Otra alternativa es utilizar algún plugin o módulo para tu CMS y enviar el correo desde ahí. En el caso de WordPress hay algunos interesantes en su repositorio. Para Drupal se puede usar StreamSend, mientras que la gente con sitios sombre Joomla también puede consultar un directorio con varios plugins.

Si te gusta el software de escritorio una opción es Group Mail que funciona bastante bien. Eso sí, tenés que asegurarte de saber configurar los servidores y tener en cuenta que el 99% de los servicios que dan cuentas de correo electrónico limitan la cantidad de mails que podés enviar por hora o día. Además, vas a tener que estudiar temas de autentificación de mails como SPF (Sender Policity Framwork), Sender ID y Domain Keys para evita entrar en la carpeta de spam.

4. Definir el mensaje

Lo explicó claramente Franco Carrera: la composición de un newsletter se divide entre mensaje (40%), contenido (40%) y diseño (20%). En lo que hace al mensaje, la clave está en la claridad del concepto y la simplicidad con la cual se transmite.

Básicamente existen tres tipos de mensajes que enviamos por e-mail: informativo (newsletter), promocional (publicitario) y presencia o fidelización (cupones, invitaciones, saludos). En todos los casos hay que aplicar los mismos principios que para un sitio web: hay pocos segundos para convencer al usuario de permanecer en la página (o el mensaje) y hay que decirle rápidamente cuál es el propósito del mensaje que está leyendo.

5. Proponer contenido de calidad

Si el contenido no es de calidad, no esperemos buenos resultados. Cuando alguien nos deja su correo no es para que le llenemos su casilla de propaganda inútil. Si es un newsletter, la información tiene que ser relevante; si se trata de una promoción, que sea lo suficientemente buena. Un caso a destacar es el newsletter del sitio de tipogafías MyFonts donde cada mes entrevistan a un tipógrafo destacado. La calidad de contenido incluso llevó a que se editara un libro con estas entrevistas.

En el caso de la fidelización hay que aportar valor. Saludos de cumpleaños, de feliz navidad y similares se terminar transformando en basura con los cientos de correos de salutaciones y cadenas de mensajes que recibimos en esta fecha

6. Diseñar el prototipo

El diseño del e-mail se realiza en función del tipo de mensaje. Aquí podemos ver algunos modelos básicos por cada uno.

Prototipo básico para un newsletter

Prototipo básico para un email publicitario

Prototipo básico para email de fidelización

Hay algunas cuestiones muy importantes que se dijeron en el EMMS 2010. En primer lugar, la clave del mail está en el botón “call to action”, es decir, la proposición que se hace al usuario para tome una acción. Esto tiene que estar claramente visible y ser muy fácil de interpretar que se trata llamado a que el usuario haga clic.

En segundo término, el peso gráfico no está en el mail sino en la landing page hacia la cual apunta el correo. No conviene recargar demasiado la gráfica del mail y mucho menos poner información importante en imágenes. Lo ideal es que se utilicen para lograr impacto visual pero el mensaje se debe entender claramente si por alguna razón el usuario no visualiza las imágenes.

7. Conocer las limitaciones del soporte

El diseño de e-mails es seguramente unos de los aspectos más odiosos del diseño web por las enormes limitaciones que tiene este soporte. Para no fracasar en el intento hay que tener algunas premisas en claro:

No superar los 600 píxeles de ancho.
Usar tipografía estándar para los textos como Arial, Verdana, Tahoma, Times New Roman, etc. La opción de embeber fuentes usando @font-face no funciona.
Usar CSS en línea, nunca en archivo externo. Para ver las propiedades de CSS disponibles se pude consultar la guía de CSS publicada por Campaing Monitor (descargar PDF).
Usar colores planos de fondo.
No se puede embeber videos ni Flash. GIFs animados funcionan en algunos clientes de correo pero raramente sirven de algo.
No usar HEAD, poner el contenido en BODY o directamente dentro de una tabla.
Usar tablas para armar el diseño y dejar de lado los DIVs.
Usar codificación para caracteres latinos como acentos, eñes, etc. á = á

8. Testear

Una vez lista la pieza hay que asegurarse que se vea bien en diferentes webmails y clientes de correo. Existen servicios como Litmus que pueden ayudar a hacer el testeo pero la mejor alternativa es hacerlo uno mismo.

Como mínimo hay que probar como se ve el mensaje en los servicios de webmail más populares como Hotmail, Yahoo Mail y Gmail; aunque tampoco estaría mail testearlo en IMP Horde y Squirrel Mail, dos de las soluciones de webmail más populares que usan muchos servicios de hosting.

Entre los clientes de correo los más populares son Outlook, Outlook Express (discontinuado pero todavía bastante popular), Windows Live Mail y Thuderbird. Obviamente, si tenés varios usuarios de Mac también incluí los clientes de correo para este sistema.

¿Algo más para agregar a la lista? Dudas, comentarios y opiniones son bienvenidos.

Diseño web barato vs. diseño web de calidad

Sebastián Thüer — Thu, 05 Aug 2010 10:30:32 +0000

¿Qué diferencia hay entre un diseñador web que cobra 150 dólares y otro que cobra 700 por el mismo trabajo? La discusión sobre precio versus calidad es tan vieja como la economía misma, pero en el ámbito del diseño web es todavía un terreno fangoso. La ausencia de parámetros claros para evaluar un trabajo y la enorme oferta existente hacen que el tema sea complejo.

La diseñadora Amber Winberg hizo una interesante experiencia: buscó profesionales y empresas que ofrecen pasar un diseño de Photoshop a HTML (PSD to HTML) a bajo costo y analizó el resultado. Se encontró con lo esperado: el código de la página web dejaba bastante que desear.

Aunque creo que que conceptualmente el diseño web es mucho más que saber escribir bien HTML y CSS el trabajo de Winberg es muy bueno por una sencilla razón: permite analizar de forma bastante objetiva los resultados. Un código mal escrito no es una cuestión de gustos o que el cliente lo pidió así: simplemente está mal escrito y punto.

Veamos entonces cuáles son los problemas más habituales que tienen los diseños web de bajo coste y qué se espera de un diseño de calidad.

1. Superpoblación de scripts

Diseño barato. La página está llena de referencias a archivos externos aunque no se sabe muy bien cuál es su utilidad. La mayor parte de estas llamadas se encuentra en el inicio de la página, lo cual hace que termine por cargar más lenta. Los archivos externos son bastante voluminosos pero están llenos de comentarios y funciones que no se utilizan.

Diseño de calidad. La carga de archivos externos ha sido optimizada para que afecte lo menos posible la performance del sitio. Los archivos solo incluyen el código necesario y se han “minificado” para que ocupen el menor tamaño posible.

2. Divs, divs, divs

Diseño barato. Los DIVs son áreas de contenido que sustituyen a las antiguas tablas. En el diseño barato proliferan DIVs de todo tipo con nombre indescifrables o confusos. Modificar una página así es una tarea que lleva muchísimo tiempo y nos hace dependientes de seguir contratando al mismo diseñador, que por suerte es barato.

Diseño de calidad. Las áreas de contenido se estructuran de manera clara y consistente. Cada DIV posee un nombre que alude al tipo de contenido que alberga y hace fácil que otro diseñador pueda continuar el trabajo. Con la llegada del HTML5 el uso de DIVs tenderá a bajar drásticamente, no obstante se seguirá usando para asegurar la compatibilidad con navegadores antiguos.

3. Tags del cajón de los recuerdos

Diseño barato. Sigue utilizando etiquetas o atributos del HTML que pasaron a la historia, especialmente los meta tags que antiguamente servían para posicionar mejor un sitio web en los buscadores. Emplea etiquetas comoFONT-FACE o STRIK, que han quedado obsoletas porque esta información se coloca en el CSS.

Diseño de calidad. Separa claramente la información de su modo de presentación. Emplea HTML para lo primero y deja de lado los tags anticuados para definir el modo de mostrar los contenidos en la hoja de estilos CSS. Todas las etiquetas usadas corresponden a la especificación del HTML 4.01 del W3C.

4. Optimizado para…

Diseño barato. La página se ve perfectamente en Internet Explorer, preferiblemente la última versión: con versiones anteriores no se sabe. En Firefox puede que el sitio se vea bien aunque algunos elementos se corren de lugar. Con Chrome, Safari u Opera directamente es como jugar a la lotería.

Diseño de calidad. La página se visualiza correctamente en los navegadores modernos. Si emplea algunas funcionalidades incompatibles con versiones anteriores se muestra la corresopndiente advertencia al usuario. Se ha codificado la página siguiendo los estándares del W3C y en el caso de ser necesario se emplean hacks para solucionar algún defecto de visualización que pudiera presentar un navegador específico.

5. Class, class, class

Diseño barato. El atributo class asocia a la etiqueta un estilo definido en el CSS. El diseño web barato repite 20 veces la misma clase en todas las etiquetas, coloca el atributo class a prácticamente todos los elementos y termina generando un código superpoblado y repetitivo. Es lo que suele ocurrir cuando se usa indiscriminadamente la vista de diseño de los editores web.

Diseño de calidad. Se usan diferentes selectores CSS de forma inteligente para minimizar el tamaño de los archivos, facilitar la posterior actualización del sitio y hacer el código más comprensible.

6. Validación

Diseño barato. Si funciona, ya está validado. Los estándares son una bonita idea pero no hay demasiado tiempo para ello porque lo importante es que el sitio se vea bien… en Internet Explorer, claro.

Diseño de calidad. Se genera el código de acuerdo con los estándares del W3C y posteriormente se valida el mismo para asegurarse que todo está correcto. Puede que se utilicen pequeños hacks o fixes por lo cual el validador detecte errores que no son tales, pero el diseñador es planamente conciente de ello y sabe que se trata de pequeños trucos utilizados para asegurar la compatibilidad con navegadores que no cumplen con los estándares como el viejo Internet Explorer 6. Si el trabajo lo requiere, también se realizan validaciones de accesibilidad.

Conclusión

El diseño web barato no es necesariamente malo. Muchas veces hay presupuestos muy ajustados o se necesitan soluciones rápidas -o peor, ambas cosas- con lo cual se cumple la vieja máxima de la economía: si hay oferta, hay demanda. Sin embargo, hay que asumir que el bajo costo se refleja en la calidad final del trabajo. Páginas excesivamente lentas o un código laberíntico que solo comprende quien lo generó, por ejemplo.

Ser capaz de crear un diseño web de calidad requiere capacidad, esfuerzo y fundamentalmente muchos años de experiencia como desarrollador o diseñador web. Es decir, cosas por las cuales la gente normalmente cobra más dinero. Puede haber algún joven genio en algún lugar remoto que por 10 dólares la hora haga maravillas, pero eso es la excepción.

Adobe CS5, la nueva suite para el diseño web

Sebastián Thüer — Wed, 14 Apr 2010 21:40:07 +0000

Como ocurre cada dos años Adobe lanzó su suite de diseño Adobe CS5 con nuevas versiones de sus principales programas. El lanzamiento mundial fue el 12 de abril y estuvo a cargo de John Loiacono, Vicepresidente Senior y Manager General de Adobe.

“Estamos tremendamente emocionados de presentar la nueva versión de Creative Suite, no porque está llena de nuevas herramientas de gran y características, sino porque estas características son complementadas por la capacidad para resolver problemas reales de flujo de trabajo de extremo a extremo”, dijo Loiacono.

El flujo de trabajo, entendido como una línea que recorre al contenido desde su creación, entrega, visualización, testeo y optimización, es precisamente el gran protagonista en las novedades de Adobe CS5 que apunta a reducir el tiempo empleado para tareas que hasta ahora se hacían paso a paso.

Veamos un rápido repaso por las principales aplicaciones de la suite para el diseño web.

Photoshop CS5

Photoshop es una de los programas más antiguos de Adobe y uno de los que presenta las novedades más impactantes al permitir realizar tareas que llevaban bastante tiempo de forma muy rápida. La opción content aware es la estrella y permite eliminar objeto de un escenario sustituyéndolos por el fondo, como se ve en este video:

Puppet Warp es otra función muy interesante que descompone una figura en celdas donde se pueden insertar puntos de anclaje, al estilo de los programas vectoriales y algunos de 3D. De esta forma, es posible, mover y articular un objeto dentro de una fotografía con relativa facilidad.

Más novedades en Photoshop: selección de contornos mejorada para las máscaras, corrección de lentes para corregir distorsiones ópticas, edición avanzada de alto rango dinámico (HDR), corrección automática de la línea del horizonte y más. En quesabesde.com hay una buena síntesis de las principales novedades de Photoshop CS5.

Dreamweaver CS5

El programa de diseño web por excelencia finalmente ofrece soporte para los principales CMS como WordPress, Joomla! o Drupal. Una tarea cada vez más frecuentes para los diseñadores es desarrollar plantillas para alguno de estos sistemas que hasta ahora se debía hacer en la vista de código y sin poder obtener una previsualización de los resultados.

Otro paso hacia donde avanza Dreamweaver es permitirnos ver cómo queda nuestras creaciones cuando son accedidas con diferentes navegadores. La comprobación de código puede funcionar bien, pero no hay nada mejor que ver en la realidad cómo luce la web cargada en un navegador con un sistema operativo concreto. Por eso Dreamweaver CS5 se integra con Adobe BroweserLab que permite generar capturas de pantalla de una web como si se viera con distintos navegadores y sistemas.

Otra novedad interesante es la inspección de CSS al estilo Firebug: al seleccionar un elementos se puede ver todas las clases que tiene aplicadas. Algo muy útil cuando hay que hacer ajustes finos o trabajar con muchos estilos y clases anidadas.

Este video muestra otra función interesante: el “pegado inteligente” de vectores y otros archivos directamente en Dreamweaver.

Flash CS5

La guerra entre Flash y HTML5 destapada a raíz de la falta de soporte de Flash en el iPad tiene un nuevo capítulo en Flash CS5 que convertirá las animaciones generadas con este programa en HTML5. Se trata de una jugada arriesgada pero brillante ya que permitirá a los diseñadores recuperar sus trabajos anteriores y hacerlos compatibles en aquellos dispositivos que no admitan el plugin de Flash.

Otra mejora de Flash tiene que ver con aquellos que escriben código ya que tiene un editor mejorado con la posibilidad de autocompletar clases personalizadas. Para los diseñadores, Flash CS 5 trae Text Layout Framework con lo cual la inserción de elementos gráficos dentro de un texto (emoticons, gráficos, dibujos, etc.) se hace mucho más sencilla. Eso sí, requiere tener el plugin Flash 10 instalado.

Debajo está el video de una presentación de Flash CS5 en Flash On The Beach:

El resto de Adobe CS5

Recorriendo brevemente los programas que componen la suite está claro que refuerzan su apuesta por la integración de los productos para poder llevar elementos de un lado a otro de manera rápida, clara y organizada. El pegado inteligente de Dreamweaver es un ejemplo de ello.

Para Illustrator CS5 hay novedades interesantes como la facilidad para trabajar el dibujo en perspsectiva, la capacidad de modificar el grosor de un trazo en puntos independientes y crear objetos con precisión de pixeles, algo que se agradece para el diseño web.

En el caso de Fireworks Cs5 ahora el programa se integra con Adobe Device Central con lo cual es posible producir diseños para varios dispositivos móviles. También agrega plantillas de diseño y ofrece un mejor flujo de trabajo con Flash.

¿Hay algo que te guste especialmente de la nueva suite? ¿Esperás que cambie realmente tu modo de trabajo? ¿Qué cosas importantes se han dejado de lado? Me gustaría conocer la opinión de los lectores.

Más información

Sitio oficial de Creative Suite
Cs5.org: Mucha información sobre los productos de la suite
Análisis de Illustrator CS5 en GenBeta
Análisis de Flash CS5 en Cristalab
Análisis de Photoshop CS5 en QueSabesDe.com
Análisis de Dreamweaver CS5 en PC Magazine (inglés)

Lanzamiento y precio

Se espera que la suite Adobe CS5 esté disponible el público en mayo pero podés inscribirte para que te avisen cuando se lance al mercado. El precio de Adobe Creative Suite 5 Design Premium es de 599 dólares para las actualizaciones y 1800 dólares por la versión completa. Si hacés tu reserva hasta el 29 de abril el envío de la versión box es gratuito.

31 Herramientas para hacer tu blog o página más social

Sebastián Thüer — Thu, 07 Jan 2010 11:30:08 +0000

Esta navidad Facebook fue la página más visitada en Estados Unidos y superó a Google. Las redes sociales y aplicaciones que conectan personas y contenido son cada vez más importantes en Internet y será la gran tendencia que se consolide en el 2010 ¿Está tu blog o sitio web preparado?

A continuación encontrarás una recopilación de diferentes herramientas, plugins y servicios que para conectarte con los medios sociales. La mayor parte de ellas las he probado, ya sea en este blog o en otros proyectos. En este primer listado figuran herramientas de propósito general y los servicios más populares como Facebook, Twitter o FriendFeed.

Si conocés alguna que no está listada o querés comentar alguna experiencia tus comentarios son bienvenidos.

Generales

Las herramientas de propósito general permiten gestionar varios servicios y plataformas desde un mismo lugar. Aunque a veces se pierde flexibilidad, son una opción interesante para comenzar a interactuar con redes sociales desde tu blog.

1. Wibya

Esta barra se inserta en tu blog para que tus usuarios tengan accesos numerosas herramientas como Facebook o Twitter. Simplemente hay que copiar y pegar una línea de JavaScript en todas las páginas para que comience a funcionar. Luego, tendremos que crear nuestra cuenta y configurar los servicios que queremos utilizar. Una forma sencilla y eficaz de conectar tu blog con medios sociales.

Página de Wibya

2. Gigya

Una herramienta poderosa para vincular tu blog con diversas plataformas como Facebook, Twitter, MySpace, Google, Yahoo y otras. Permite utilizar servicios de identificación de usuarios, gestionar comentarios, compartir contenido o enviar el contenido a los amigos agregados a la red. Probablemente sea una de las herramientas más completas con muchas opciones de personalización. Por contrapartida, hay que leer e investigar un poco a para sacarle todo el jugo.

3. Lifestream

Un poderoso plugin para WordPress que permite publicar en tu blog toda la actividad que realizás en redes sociales como Twitter, YouTube, Delicious, tu propio blog y cualquier medio que tenga un RSS. Se puede personalizar modificando el CSS y agregar funcionalidades con clases de PHP. Hice algunas pruebas con este plugin tiempo atrás y hay que tener en cuenta que consume bastantes recursos, especialmente si agregamos muchos medios. Recomendable tener un buen hosting si vas a instalarlo: VPS o superior.

4. DandyID

Con la proliferación de redes y plataformas a veces es muy difícil gestionar nuestra identidad digital. DandyID tiene soporte para más de 300 sitios como Facebook, MySpace, Twitter y Delicious para que puedas centralizar el manejo de tu información desde un solo lugar. El plugin para WordPress muestra tus diferentes perfiles en la barra lateral para que tus usuarios te encuentren en la red apropiada.

5. Social Media Page

Este plugin para WordPress muestra tus diferentes perfiles en redes sociales a través del blog. A través de la página de configuaración simplemente hay que colocar el nombre de usuario y el plugin se encarga de buscar si estamos registrados en las redes más conocidas. En la mayor parte de los servicios funciona de forma automática pero otros -como Facebook- requieren ingresar datos manualmente.

6. Disqus

Este servicio pretende organizar los comentarios en tu blog de manera global. Para los adminsitradores de blogs permite moderar todos los comentarios desde un solo lugar y y conectar con plataformas y redes sociales. Para los usuarios permite crearse un perfil y usarlo a lo largo de los diferentes sitios que implementan el sistema. Está presente en varios blogs populares como Mashable. Desde la página se pueden elegir versiones para WordPress, Tumblr, Movable Type, Blogger, Drupal, Joomla y más.

Página de Disqus

7. Intense Debate

Otro sistema destinado a mejorar la conversación en tu blog. Maneja varios niveles de respuesta, enviar comentarios y recibir notificaciones por correo, crear perfiles y sistema de reputación para las personas que comentan. Hace un tiempo fue adquirido por Auttomatic, la empresa detrás de WordPress. Ofrece instalación automática para WordPress, Blogger, Tumblr y TypePad; y un script general para otros sistemas.

Página de Intese Debate

Para Facebook

Con más de 350 millones de usuarios Facebook es la red social más extendida y utilizada hoy en todo el mundo. Si hay algún lugar por donde comenzar a interactuar en el mundo social probablemente Facebook sea la mejor opción.

8. Share On Facebook

Un plugin sencillo para WordPress que permite a los usuarios compartir el contenido de tu blog con sus amigos a través de Facebook. Fácil de instalar y configurar.

9. WP Facebook Connect

Creado por el desarrollador de Facebook Adam Hupp, fue no de los primeros plugins para usar Facebook Connect con WordPress. Permite que los usuarios se identifiquen con su cuenta de Facebook, publica la actividad que realizan en el muro y muestra la fotografía en los comentarios. Requiere crear una aplicación en Facebook para obtener una API y clave secreta.

Plugin para WordPress

10. Facebook Connect

Es el plugin que actualmente estoy usando en mi blog y permite añadir algunas opciones interesantes como crear tu propia comunidad de usuarios. Desarrollado por Sociable.es, es otra opción para interactuar con Facebook Connect y así dejar que tus usuarios usen su cuenta de Facebook para identificarse y comentar en tu sitio. También requiere API y clave secreta para funcionar.

11. Simple Facebook Connect

La principal diferencia con otro plugins que interactúan a través de Facebook Connect es que permite habilitar o deshabilitar opciones individualmente. Este diseño modular permite escoger si queremos habilitar la opción de inicio de sesión, la opción de compartir contenido y mostrar la información a través de widgets. Interesante para tener un mayor control si no pensamos incorporar todas las funcionalidades.

12. Facebook Comments

Uno de los problemas más frecuentes cuando el mismo contenido se distribuye en diferentes lugares es la fragmentación de la interacción. Si publicás el contenido de tu blog en Facebook este plugin para WordPress te permite copiar los comentarios que recibas a tu blog. De esta forma cualquier opinión que recibas desde Facebook quedará también reflejada en tu propia web.

13. Publish To Facebook

Otro plugin con una funcionalidad específica: publicar desde tu blog hacia Facebook. De esta forma evitás tener que agregar a mano las notas que vayas escribiendo. Funciona para WordPress.

Página: http://nothing.golddave.com/?page_id=111
Plugin para WordPress: http://wordpress.org/extend/plugins/publish-to-facebook/

14. Facebook Dashboard Widget

Si no querés estar cambiando de página para saber qué pasa en Facebook este plugin te muestra la actividad de tus amigos desde el tablero de administración de WordPress. Para fanáticos o gente muy ocupada:

15. Drupal’s Facebook Connect module

No todo es WordPress. Si tu sitio o blog está basado en Drupal este módulo permite inteactuar con Facebook Connect para permitir la identificación de usuarios, mostrar tus actualizaciones de estado y compartir contenido con Facebook. Un detalle interesante: permite que los usuarios existentes asociación su cuenta con Facebook.

Página de Drupal’s Facebook Connect Module

16. Facebook Connect Commenters

En este caso vincula Facebook con aquellos blogs que funcionan sobre Movable Type. Permite a los usuarios identificarse, comentar y publicar sus acciones en Facebook. Es Open Source y se encuentra en fase beta.

Página Connect Commenters

Para Twitter

Twitter es sinónimo de interacción en tiempo real en Internet. Este servicio que permite publicar mensajes de 140 caracteres es cada vez más popular y muchos usuarios lo utilizan para compartir enlaces, comentar lo que hacen, conversar con otras personas y más. Hay muchas herramientas, servicios y plugins para interactuar de forma efectiva entre Twitter y tu blog o página web.

17. Twitter Tools

Uno de los primeros plugins para integrar Twitter con WordPress. Creado por el conocido desarrollador Alex King, permite mostrar en el blog tus tweets y vicecersa: escribir un tweet deste tu blog. También hay una opción para enviar automáticamente a Twitter los artículos que se publican en el blog. La versión 2.0 incluye integración con Bit.ly para usar este servicio que acorta las direcciones.

18. TweetSuite

Otro plugin para WordPress que posibilita la interacción entre tu blog y tu cuenta en Twitter con diversas herramientas y opciones: Enviar a Twitter las actualizaciones del blog en forma automática, botón de re-tweet y varios widgets para mostrar tweets por distintos criterios como los últimos, los favoritos o los más populares.

Página de TweetSuite

19. TweetMeme

Este servicio muestra los enlaces más populares que se están publicando en Twitter. Tiene plugins oficiales para WordPress, Blogger y TypePad que facilitan la interacción y muestra la cantidad de veces que un post ha sido enviado a Twitter. También da acceso a estadísticas para ver cuál es el contenido más popular de tu blog. Como tiene una API distintos desarrolladores han creado versiones para Drupal, Joomla, B2Evolution y Windows Live Writer.

20. Twitter Updater

Este plugin par WordPress es bastante sencillo se encarga de enviar a Twitter los post que vas publicando en el blog. Recomendable si no te interesan las suites sino solo esta funcionalidad específica.

Página de Twitter Updater

21. Bit.ly

Los acortadores de direcciones permiten sustituir la dirección original de una páinga por otra más breve para ahorrar caracteres en Twitter. Dentro de los varios servicios que hay Bit.ly es de los más populares y casi todos los programas vinculados con Twitter interactúan con él. Un punto interesante es que podés consultar cuánta gente hace clic en los enlaces que envía a través de este servicio.

Página de Bit.ly

22. Twitter Friendly Links

Este plugin permite generar enlaces cortos con tu dominio; por ejemplo, sitio.com/3921. De esta forma evitás usar un servicio acortador de direcciones y tenés control total. Obviamente el consejo es usarlo solo si tenés un dominio corto.

23. TwitterLink Comments

Esta utilidad agrega un campo más al formulario de comentario de tu blog para agregar el usuario de Twitter. De estar forma los usuarios que comenten en tu blog tendran la opción de ser seguidos en Twitter.

24. Twit Connect

El equivalente de Facebook Connect para Twitter. Este plugin permite que los usuarios de tu blog puedan identificarse con su cuenta de Twitter. Requiere crear la aplicación para obtener una API y clave secreta, en la página explican cómo hacerlo.

Para FriendFeed

Este servicio puede ser visto como una síntesis de tu actividad y la de tus amigos en diversos medios sociales. FriendFeed permite publicar tu actividad, comentar y valorar lo que otros dicen. Aunque no goza la de misma popularidad que Facebook o Twitter, es una opción cada muchos entusiastas de las redes sociales están comenzando a usar.

25. FriendFeed Activity Widget

Este sencillo plugin para WordPress muestra la actividad de FriendFeed en tu blog. Si te interesa compartir el contenido de Facebook, Twitter y otras redes esta puede ser una buena alternativa.

26. FriendFeed Comments

FrieendFeed permite decir si un contenido publicado te gusta o no, de forma similar a cómo lo hace Facebook. Este plugin sirve para mostrar la cantidad de veces que un comentario hecho en tu blog fue marcado con la opción “Me gusta”. Mashable usa este sistema.

Para Compartir Contenido

Un sitio no es verdaderamente social si no permite que su contenido sea distribuido a través de las numerosas redes y servicios para compartir información. Las herramientas para facilitar a los usuarios enviar el contenido de una página a Facebook, Delicious o incluso por correo son sencillas, efectivas y fáciles de implementar.

27. Sociable

Este plugin te permite agregar la opción de compartir el contenido de tu página a través de diferentes redes sociales y sitios especializados. Viene en tres versiones: para la plataforma Blogger, para WordPress o en HTML, lo que le da gran versatilidad. Su uso es bastante sencillo y solo tenemos que elegir qué servicios habilitamos para compartir el contenido. En la actualidad tiene una base de datos de unos 100 lugares incluyendo los más populares como Facebook, Delicious, Twitter, MySpace, Technorati, Google Bookmarks y otros. También

Tip: El código fuente es bastante sencillo de seguir y fácilmente se puede agregar otro sitio que no esté predefinido. Hay instrucciones en inglés para hacerlo.

28. I Love Social Bookmarking

Similar a Sociable, este plugin hace foco en la sencillez y el bajo consumo de recursos. Permite compartir el contenido del blog a través de Blinklist, Blogmarks, Digg, del.icio.us, Furl, NewsVine, Reddit, StumbleUpon y Technorati. Servicios populares como Facebook o Twitter no está soportados.

29. Sexy Bookmarks

Hace lo mismo que los plugins mencionados más arriba pero su principal atractivo es la interfaz. Unos iconos cuidados, el efecto al pasar por encima el mouse y el texto informal que invita a compartir son sus sellos distintivos. Hay versiones para WordPress, Blogger, Joomla y bbPress.

30. ShareThis

Esta herramienta se puede agregar a un blog o cualquier página web para compartir el contenido a través de múltiples servicios y redes sociales. Solamente hay que insertar el código fuente que nos dan y ya podemos usarla. Se pueden escoger entre dos formatos: un único icono que muestra una ventana emergente al pasar el cursos por encima o la clásica tira de iconos con todos los servicios.

Tip: Si te gustan las analíticas web este servicio se integra con Google Analytics y Omniture. De esta forma podés saber cuáles son las plataformas favoritas de los usuarios para compartir el contenido de tu página.

31. Add to Any

Ofrece un servicio rápido, liviano y personalizable. Similar a a ShareThis, es un botón para integrar a tu página o blog. Algunos parámetros como el idioma y lo servicios que se muestran se ajustan automáticamente según el usuario. También tiene integración con Analytics para conocer el comportamiento de los usuarios:

Extra:WP Super Cache

Con tantas herramientas y recursos para interactuar con medios sociales es posible que algún contenido de tu página alcance popularidad. Si se trata de un blog esto se traduce en muchas consultas a tu base de datos y la pérdida de performance. WP Super Cache es un plugin que crea versiones estáticas de las páginas y de esta forma elimina el procesamiento de PHP y las consultas a la bases de datos. Tiene una opción interesante que permite preparar una página de tu blog para tráfico intensivo

Esto no termina…

Me gustaría mantener esta lista actualizada por lo que cualquier nuevo aporte es bienvenido. Si tenés experiencia utilizando alguna de estas herramientas tu comentario también es importante para despejar dudas a los usuarios. Y si hay algo que no te gusta, también podés decirlo. Animate y comentá.

Basta de páginas web, pensemos en carteles

Sebastián Thüer — Wed, 02 Dec 2009 10:17:42 +0000

Primero fueron las páginas blancas llenas de texto. Luego llegaron iconos, botones e imágenes de fondo. Vino más tarde el tiempo de Flash y las webs de alto impacto. Alguien pensó que era mejor ordenar esta ensalada y entonces hicieron su entrada la arquitectura de la información y la usabilidad. El uso de ajax explotó recientemente y se popularizaron los frameworsk como jQuery para usar javascript con un criterio claramente funcional.

¿Que se viene ahora?

La web está evolucionando hacia un medio donde por fin podemos diseñar con más libertad. La principal tarea del diseñador web siempre ha sido luchar contra las limitaciones del medio: colores limitados, tipografías limitadas, posicionamiento de elementos limitados, multimedia limitado. Los diseñadores web fueron muchas veces recopiladores de trucos y recetas para hacer que la web no ignorara la larga tradición de la humanidad en diseñar objetos agradables.

La popularización del CSS y la adpoción de estándares resolvieron muchos problemas. Pero no todos. La extrema preocupación por recrear un ambiente familiar al usuario hizo que muchas páginas web fuesen diferentes variaciones del hiperclásico esquema cabecera-menu-contenido-pie de página. Pero la dirección está cambiando.

Hace unos días el reconocido diseñador Paul Boag escribió Stop designing websites, start designing posters. En pocas palabras, Boag nos dice que el excesivo apego por las convenciones nos llevó a diseñar páginas web con un mismo molde que sea fáciles de comprender para el usuario. Sí, puede que sean fáciles pero resultan terriblemente aburridas.

La metáfora propuesta para renovar el diseño web es no pensar en páginas. Merjo, pensar en carteles. Atractivo visual, fáciles de ojear y con más información para el lector interesado. En un contexto de saturación y sobrepoblación de sitios y páginas la premisa básica del cartel vuelve a tener sentido. Ya no se trata de llenar la página de información para que el usaurio pueda “verlo todo”, hay que escoger una o dos ideas sencillas, jerarquizarlas y presentarlas para salir a la captura de un usuario sobre saturado de mensajes.

Atractivo

Aun conservando los elementos estructurales básicos de una página es posible ser creativos y llamar la atención del usuario. En lugar de un listado interminable de características MailChimp optó por gráficos, colores y texto en gran tamaño para decirnos claramente que…

MailChimp, gráficos y colores para crear un contraste atractivo

Son un servicio para hacer marketing por e-mail
Hay dos acciones destacadas: registrarnos o ver una demo de 2 minutos
Una persona de un medio muy importante lo probó y habla bien de él.
Nos dicen que incluye la versión gratuita y podemos ver la tabla de precios.
Información extra: Principales características, una nueva funcionalidad destacada, clientes importantes que poseen y un pie de página con acciones, opciones y datos secundarios.

Usable

La creatividad no está reñida con la usabilidad. Diseñamos para que se entienda el mensaje y la web -salvo páginas artísticas/experimentales- no es la excepción. Podemos ser tremendamente innovadores en la gráfica, emplear una disposición transgresora de los elementos en el plano, o definir la comunicación con el usuario desde un enfoque novedoso pero siempre tenemos el mismo objetivo: hacer comprensible nuestro mensaje fácilmente.

Este es el eje de la usabilidad: crear objetos con los cuales resulte fácil y agradable interactuar. En pocos palabras, el usuario debe saber donde está, donde tiene que hacer clic y cómo moverse a lo largo del sitio.

PixelCraft, un diseño simple, atractvo y de fácil comprensión.

En Pixelcraft hay un buen ejemplo con un interesante uso del blanco.

Al abrir la página centramos la atención en este apartado donde vemos algunos elementos clave que quiere promocionar el sitio. Luego de unos segundos la imagen cambia y completada la serie se reinicia. Un recurso sencillo, efectivo y fácilmente comprensible por el usuario.
Luego de fijar la atención si bajamos encontramos vemos dos elementos que son centrales en una empresa del rubro: mostrarnos el portfolio de trabajos y decirnos qué áreas cubren. Un listado que recuerda a los planes de hosting comunica en poco espacio mucha información.
Si no hacemos scroll tenemos el tercer elementos en importancia dentro de la página: el logotipo y la barra de navegación. Al saber que la mayoría de los usuarios conoce la ubicación de estos elementos no hay un énfasis innecesario en estos elementos que son claramente visibles y accesibles a lo largo de todo el sitio.
Una vez obtenida la información básica (quienes son, qué hacen, qué los diferencia) bajamos para encontrarnos con texto que refuerza y amplia la información anterior. La información detallada está detrás de los enlaces.

En síntesis, un diseño claro, sencillo y elegante.

De un vistazo

En inglés scannable es la capacidad de un texto para ser recorrido fácilmente con la vista. Podría traducirse como “escudriñeable” pero no es una palabra que refleje el carácter apropiado. Cada vez más los usuarios se acostumbran a recorrer las pantalla buscando títulos y gráficos que permitan tener una idea del contenido en pocos segundos sin necesidad de detenerse a leer.

Esta es la tendencia y nada indica que se vaya a revertir. Un buen sitio nos tiene que transmitir rápidamente qué podemos esperar de él. Si hasta las citas personales se reducen a pocos minutos no hay razón para otorgarle más de unos segundos a una web.

La web de Firefox, en pocos segundo descubrimos qué hay por hacer.

La webde Firefox es un excelente ejemplo ¿Por qué atormentarnos con datos si la principal razón por la cual llegan los usuarios es hacer clic en el botón de descarga? Es el primer elemento donde ponemos nuestros ojos y rápidamente podemos saber lo que obtendremos: la última versión de Firefox. Hacia la derecha tenemos un menú con opciones muy fáciles de entender para entrar en detalles.

Si no estamos desesperados por saber algo podemos bajar un poco y nos encontramos con el principal argumento por el cual debemos actualizar Firefox: es más rápido. Además vemos otro menú con las principales características del nuevo navegador.

Recién más abajo encontramos la información complementaria como la visita guiada, los premios o consejos para usar el programa. Y en un espacio totalmente marginal están los enlaces información que casi nadie lee: la política de privacidad.

Información claramente jerarquizada

Cuando hay mucha información hay que jerarquizar, escoger qué es importante y qué secundario. El cartel lleva este principio del diseño a su máxima expresión y generalmente está domininado por una única idea expresada a través de un título, una fotografía, una ilustración o una mezcla de todo.

Kanchi, unidades de información claramente diferenciadas.

No es necesario llegar a este punto en la web, pero un buen diseño nos debería permitir diferenciar lo importante de lo accesorio. Kanchi.org es un buen ejemplo. Desde la página inicial podemos ver que hay una clara jerarquía donde un titular que es una declaración de principios de esta organización domina la página. Un buen modo de identificar a qué se dedica esta organización sin necesidad de ir a la página de “Sobre nosotros”.

Más abajo un video acompañado de un pequeño texto captar nuestra atención por el contraste de la imagen sobre el fondo negro. Y luego aparecen tres recuadros de idéntico tamaño con más información. Parece bastante claro por donde comenzar a navegar el sitio.

Conclusión

Con las limitaciones que tenían los primeros diseñadores web algunos hacían auténticas maravillas para acercarnos una web original, agradable y bonita. En ese entusiasmo inicial algunos se pasaron de la raya y terminaron por crear sitios intendentibles con las nuevas tecnologías que iban apareciendo.

Hoy, con la usabilidad como una disciplina indispensable para pensar la web y la progresiva asimilación de la web como un medio por parte de los usuarios asistimos a un escenario donde el diseño gráfico recobra su valor: tipografía, planos, fotografías, luces, colores… desde un minimalismo extremo hasta la ornamentación barroca el abanico de posibilidades es mucho mayor.

La metáfora de la web como un cartel nos permite salir del molde con el cual se crean muchas páginas y proyectar algo diferente. Sin caer en propuestas estrambóticas, el diseño web es hoy mucho más que acomodar un encabezado, menú y pie de página para que rodeen el contenido.

Guía básica de HTML 5 para diseñadores web

Sebastián Thüer — Thu, 01 Oct 2009 12:00:25 +0000

HTML 5 para diseñadores web

Hace 10 años que se actualizó por última vez el HTML con la especificación 4.01. Desde entonces, la web ha cambiado radicalmente como también lo ha hecho el modo de diseñar y desarrollar páginas. Se han estandarizado una serie de elementos como los encabezados o el menú, se utiliza Ajax para recargar el contenido dinámicamente y todo el mundo usa CSS para definir los atributos visuales de la página.

El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementos para desarrollar páginas dándole un valor especial a la semántica, es decir, que se pueda reconocer desde el propio código el tipo de contenido que se está mostrando. Conviene recordar, que en sus orígenes el HTML no era más que un lenguaje de etiquetas sencillo orientado a poner en líneas trabajos académicos. Por eso, por ejemplo, tenemos seis niveles de títulos (

,

…

) que casi nadie usa en su totalidad.
El estado actual del HTML 5 es el de un borrador que está madurando. La primera versión salió a la luz en enero de 2008 pero ha sido revisada varias veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya pueden interpretarlo y tienen soporte para las etiquetas y tecnologías que vienen de la mano.

Las novedades

El borrador del HTML 5 es un documento complejo y extenso. Hice la prueba de convertilo a PDF obtuve un documento de 1737 hojas tamaño A4. Sin embargo, hay mucha información estrictamente técnica que no afecta al diseño web como dice Eric Meyer . Por ejemplo, el cómo hacer un análsis sintáctico (“parsear”) del componente tiempo o cómo moverse por el historial del navegador.

En lo que es estrictamente diseño lo más importante son las etiquetas del HTML 5. Pero antes avanzar conviene recordar que -como es habitual en el W3C- se asegura la compatibilidad hacia atrás con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguirán mostrando correctamente las páginas. Sin embargo, profesionalmente nos vamos a quedar atrás y en algún momento debemos encarar la transición. Mejor hacerlo ahora.

Etiquetas que salen

Con la llegada del CSS muchas etiquetas del HTML que afectaban la presentación de los elementos de pantalla cayeron en desuso. Ahora definitivamente se eliminan. Todas pueden ser perfectamente reempalzadas por atributos en las hojas de estilo.

El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente:

```
FONT
```
```
CENTER
```
```
STRIKE
```
```
BASEFONT
```
```
BIG
```
```
S
```
```
STRIKE
```
```
TT
```
```
U
```

El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirá siendo válido. Por lo tanto, las etiquetas vinculadas con los frames que salen son:

```
FRAME
```
```
FAMESET
```
```
NOFRAMES
```

Para terminar, encontramos etiquetas que ya no se usan porque creaban confusión o hacían lo mismo que otras ya existes. Estas son:

```
ACRONYM
```
```
APPLET
```
```
ISINDEX
```
```
DIR
```

Etiquetas que entran

Como mencioné anteriormente, una prioridad del HTML 5 es darle valor semántico al código para que se pueda reconocer fácilmente la función de los elementos en una página. Por eso, aparecen muchos indicadores de secciones y contenedores para tipos de contenido específicos.

Hay 22 nuevas etiquetas y son las siguientes:

```
SECTION
```
```
ARTICLE
```
```
ASIDE
```
```
HGROUP
```
```
HEADER
```
```
FOOTER
```
```
NAV
```
```
DIALOG
```
```
FIGURE
```
```
 VIDEO
```
```
EMBED
```
```
MARK
```
```
PROGRESS
```
```
METER
```
```
TIME
```
```
RUBY (RT y RP)
```
```
CANVAS
```
```
COMMAND
```
```
DETAILS
```
```
DATALIST
```
```
KEYGEN
```
```
OUTPUT
```

También tenemos etiquetas que soportan nuevos atributos. Por ejemplo, anteriormente en INPUT solo podías escoger entre botones, casillas de verificación, campos de texto o clave y pocas opciones más. Ahora tenemos atributos específicos como SEARCH si se trata de un campo de búsqueda, EMAIL si el usuario tiene que introducir un correo electrónico o DATE si es una fecha. También aparece el atributo AUTOFOCUS para poder poner el foco de un formulario en un lugar concreto sin tener que recurrir al JavaScript.

Primeros pasos con HTML 5

Voy a intentar explicar algunas de las nuevas etiquetas (las más importantes en mi opinión) a través de un ejemplo práctico. Supongamos que tenemos un sitio clásico formado por el encabezado, menú a la izquierda, contenido y pide de página.

En HTML 4.01 hubiésemos usado algo así:

Esquema de una página en HTML 4

Mientras que en HTML 5 podemos hacer más explícito el contenido de cada sección en lugar de usar identificadores para los DIVs.

Esquema de una página en HTML 5

Claramente podemos adivinar que HEADER sive para definir el encabezado del sitio, NAV contiene los enlaces para navegar y FOOTER la información del pie de página.

Luego aparecen una serie de etiquetas para especificar dentro del área de contenido el tipo de información que agregamos. SECTION obviamente marca el inicio y fin de una sección, ARTICLE sirve para indicar cada artículo (muy útil en un blog, por ejemplo) mientras que FIGURE es usado para señalar que un elemento se trata de una ilustración que acompaña un texto. Estos elementos puede ser tanto una imagen, como un video o un audio.

Pasemos este esquema a código HTML 5:






El nombre o título de mi Sitio




Sitio

Inicio
Acerca De
Contacto






Las novedades del HTML 5
La nueva versión del lenguaje ya está aquí y llega con nuevos cambios...


Tutoriales con CSS
Nueva serie de tutoriales con CSS sobre la posiblidad de crear efectos con nuestras imagenes...

     
Video explicativo sobre uso de CSS para efectos



    Más articulos
  


Copyright 2009 por mi

Este ejemplo es muy simple pero sirve para analizar la estructura básica de una página web en HTML 5. Como se puede ver, en este caso usé la etiqueta FIGURE para insertar un video y que acompañé con LEGEND para agregarle el epígrafe.

El HTML 5 también tiene etiquetas para tipos de contenidos muy específicos. Muchas se pueden comprender fácilmente: TIME para mostrar la hora, DATE para las fechas, AUDIO para insertar sonidos o METER para representar una magnitud de medición (el espacio en el disco rígido, por ejemplo). Otras no lo son tanto pero su uso es interesante. Un par de ejemplos

ASIDE: Es para lo que en periodismo se llaman “apostillas”, esto es, una información adicional sobre un tema pero que no hace al centro del a cuestión. Como los recuadros que acompañan a veces la nota central de una revista.
PROGRESS: Para representar el avance de una tarea como puede ser el proceso de registro o suscripción en una web.

El adiós a los plugins que no fue

Una de las propuestas más controvertidas del HTML 5 fue su intención de trabajar con estándares abiertos para el tratamiento del contenido multimedia. Hay que recodar que la llegada del video y la animación a la web fue de la mano de estándares cerrados como Quick Time y Flash respectivamente.

La intención del W3C fue apostar fuerte por soluciones de código abierto como Ogg Theora para manejar la reproducción multimedia. Sin embargo, las presiones de la industria hicieron que la propuesta se retirara y aun no hay una definición concreta a respecto.

Pero lo cierto es que las etiquetas OBJECT y EMBED que se utilizan para agregar contenido multimedia con plugins siguen siendo soportadas. En el caso de OBJECT desaparecen algunos atributos como ARCHIVE, CLASSID, CODEBASE, CODETYPE, DECLARE y STANDBY. Estos atributos se pueden mantener por razones de compatibilidad con HTML 4 pero no tienen función alguna en la nueva versión. La etiqueta APPLET –usada casi exclusivamente para embeber un programa en Java dentro de una página- no tuvo la misma suerte y fue retirada.

Formularios más complejos

Uno de los aspectos en el cual el HTML 4 exhibe más limitaciones es la hora de trabajar con formulario. Ahora el nuevo HTML 5 nos permite trabajar con componentes específicos para algunos tipos de datos como fechas, un código postal o una dirección de e-mail.

Por ejemplo, un formulario clásico donde pedimos al usuario su nombre, correo y página web queda del siguiente modo:

Uno de los aspectos más interesantes de HTML con los formularios es que podemos hacer validaciones de datos sin recurrir a JavaScript. Aunque ya tenemos tipos de datos específicos como correo, fechas o teléfono siempre es interesante verificar que el usuario realmente escribe datos de forma correcta en los campos. Para realizar la validación empleamos el atributo PATTERN.

La validación se realiza con un método estándar como son las expresiones regulares definidas en ECMAScript. No vamos a desarrollar acá el tema de expresiones regulares pero veamos un ejemplo sencillo de cómo evitar que nos metan código malicioso en un formulario:

El soporte para formularios en HTML 5 funciona al 100% en Opera, mientras que lo hace de forma parcial en Chrome y Safari. Sin embargo, podemos usar Web Forms 2 para implementar sus características en otros navegadores.

HTML 5 avanzado

Además de nuevas etiquetas el HTML 5 también introduce una serie de cambios que facilitan la creción de aplicaciones webs. La representación de un documento se realiza a partir del DOM (Document Object Model) y no de la sintaxis del lenguaje. En palabras simples, es un nivel más abstracto que, por ejemplo, permite que unapágina se pueda escribir tanto en HTML 5 como XHTML 5: el resultado será el mismo. También afecta el modo en que los objetos son recorridos desde JavaScript.

Otro aspecto interesante es el soporte para gráficos vectoriales escalables (SVG). Permiten dibujar en pantalla sin tener que usar imágenes en mapa de bits como sería un JPG, PNG o GIF. Del mismo modo que el CSS podemos escribir el SVG en línea (dentro del código en la página) o vinculado a un archivo externo. Empleando la etiqueta CANVAS y JavaScript también podemos crear dibujos de forma dinámica o sobreponer elementos a un video.

Tanto el nuevo DOM como el uso de SVG son temas bastante complejos pero creo que pronto comenzarán a hacerse más populares de la mano de herramientas específicas que faciliten su desarrollo. Sin embargo, es importante tomar nota de las nuevas posibilidades que esto abre para el diseño web.

Conclusión

El HTML 5 trae bastantes novedades, muchas de ellas necesarias después de 10 años sin demasiados cambios. Nos guste o no, lo cierto es que HTML 5 se terminará convirtiendo en un estándar para el desarrollo de páginas web.

No hay que perder de vista que el borrador que define las características del HTML 5 es un documento en desarrollo que está sujeto a cambios. Una serie de diseñadores influyentes como Aaron Gustafson, Eric Meyer y Jeffrey Zeldman crearon HTML 5 Super Friends para apoyar la dirección que está tomando la nueva versión del lenguaje. Varias de sus sugerencias está siendo incorporadas lo cual significa que el W3C realmente está escuchando la opinión de los profesionales.

Un incentivo más para comenzar a estudiar, debatir y opinar.

Estrenando nuevo tema en el blog

Sebastián Thüer — Thu, 17 Sep 2009 23:00:43 +0000

Si estás leyendo este post sin problemas es porque he podido configurar correctamente el nuevo tema que usa este blog. Después de 4 años de vida esta es la tercera renovación que tiene el sitio que tiene por objetivo ponerlo al día en el aspecto gráfico e incorporar lo que Jyri Engeström llama objetos sociales. En pocas palabras y de forma simple, que puedas traer tu información de actividades en medios sociales como que puedas llevar el contenido que encontrás acá a otros lugares.

Por ejemplo, si te conectás con tu cuenta de Facebook podés hacer que los comentarios que publiques sean visibles en tu perfil. Debajo de cada post también encontrarás la opción de enviar el contenido a las principales redes sociales y sitios para compartir enlaces. No están todas las redes sino aquellas que considero que son más adecuadas por el tipo de contenido que tiene este blog.

Opción de votación para valorar el contenido

Más abajo encontrarás post relacionados con el que estás leyendo y la opción de calificar el contenido en una escala de 1 a 5. Estas opciones ya estaban previamente integradas en el blog pero creo que algo fallaba en el diseño porque su utilización era marginal. Ahora son más visibles, accesibles y ganan en presencia dentro de la página.

Tweetmeme, ver la repercusión del post en Twitter y enviarlo

Al inicio de cada post encontrarás un botón informativo que cumple 2 funciones: informar la cantidad de veces que un post fue enviado a Twitter y darte la oportunidad de hacerlo si te parece que el post es interesante.

Comentarios vs. Trackbacks

Comentarios y trackbacks, mejor separados

Dentro del genial sistema de publicación de contenido que es WordPress una de las pocas cosas que todavía no me termina de convencer es que por defecto los comentarios de los usuarios se muestran junto con los trackbaks y pings (referencias al post publicadas en otros sitios y blogs). Creo que son dos cuestiones semánticamente diferentes y que no tiene sentido mostrarlas de manera conjunta. Por eso, al entrar a un post ambos tipos de contenido se muestran de manera diferenciada.

El formulario para dejar tu comentario está elaborado siguiendo una vieja idea mía que alguna vez también la vi publicada ¿Por qué generalmente tenemos que escribir primero el nombre, e-mail, página web y luego el comentario cuando dejamos una opinión en un blog? El flujo natural es el contrario: pensamos y escribimos la idea que queremos compartir y luego la firmamos.

Nuevo formulario para comentar: Primero el texto, luego identificar al usuario

Un pequeño detalle es que si el sistema te reconoce porque estás conectado o dejaste anteriormente un comentario te salude y puedas elegir cerrar la sesión si es que no sos realmente vos.

Jerarquía de la información y descubriendo nuevo contenido

Los blogs tienen la particularidad de ser un sistema de publicación muy simple y comprensible por prácticamente todo el mundo. Esa simpleza está basada, entre otras cosas, en que el contenido está ordenado cronológicamente de manera inversa para que el usuario vea siempre lo último publicado. Pero muchas veces lo último no es necesariamente lo más importante.

Dos sistemas para jeraquizar: Relevancia y cronología

Por eso la página principal muestra dos categorías de ordenamiento. La parte superior está reservada a mostrar el contenido que considero más relevante aunque no sea necesariamente lo último publicado. Inmediatamente debajo se encuentran los últimos post publicados ordenados de manera cronológica tal como es habitual en cualquier blog.

Otro aspecto que me parece importante en un blog es que te permite descubrir nuevos contenidos. Muchos usuarios llegan a esta página a través de Google con una idea u objetivo muy específico ¿Por qué no mostrar también que otras cosas hay disponibles para leer? La opción que elegí es mostrar una serie de posts basados en diferentes criterios

Últimos post

Lo último: Algunos de los posts más visitados de mi blog son del año 2006 o 2007. Al mostrar el último contenido el usuario puede ver que este sigue siendo un blog activo con información actual.

Los posts mejor valorados

Los más votados: Aquellos post que tienen la mejor calificación por parte de los usuarios. Lamentablemente no es mucha la gente hasta ahora que ha votado, pero creo que el nuevo diseño puede ayudar al colocar esta opción de manera más visible.

Lo más relevante para los usuarios

Los más populares: Un algoritmo calcula la popularidad del post basado en el número de visitas, de donde provienen esas visitas (página principal, página de archivo, visitas directas, etc.), la cantidad de comentarios, trackbacks y otros factores.

Seleccionando información para la página principal

Uno de los principales desafíos del nuevo diseño fue seleccionar qué información iba a ir en la página principal. Con la profusión de servicios sociales, widgets, plugins y agregados de todo tipo es fácil perderse y terminar abarrotando el ingreso al blog de elementos accesorios que terminan por distraer y confundir al usuario.

La pantalla de ingreso no es necesariamente la página de entrada al blog pero sí la más relevante para mostrar la organización del sitio y poder captar rápidamente ante qué tipo de sitio estamos. En mi caso, opté por utilizar la parte superior para hacer una brevísima introducción personal con enlaces a los servicios más relevantes para cada tipo de actividad que realizo: Mi cuenta en twitter como servicio generalista, mi perfil en LinkedIn para lo profesiona, mi perfil en Mendeley para la actividad académica y mi perfil en Facebook para lo social.

Mini presentación en la página principal

Luego viene el contenido destacado y los últimos posts que están separados tal como lo comenté anteriormente: el más relevante al inicio y luego ordenados cronológicamente. Las barras laterales muestran información que permiten al usuario orientarse dentro del sitio. En el caso de la barra de la izquierda está el contenido más popular, los últimos comentarios y debajo dos elementos que ayudan a enfocar un poco el contenido que tiene el sitio: mi lista de personas de referencia en tecnologías de la información y los últimos artículos que leí.

Barras laterales de la página principal

La barra lateral derecha de la página principal reserva la primera parte para cuestiones de marketing como suscripción al sitio y patrocinadores. Debajo se encuentra la opción para conectarte con tu cuenta de Facebook y ver los usuarios que son parte de la comunidad. Inmediatamente debajo hay dos elementos que ayudan a organizarse en el sitio la lista de palabras claves utilizadas en formato de nube de tags y las secciones del sitio.

Sobre este último tema hasta hace poco no estaba realmente convenido de que contar con secciones dentro de mi blog fuese de utilidad. Básicamente, porque me parece que una palabra clave o etiqueta funciona mucho mejor para organizar el contenido. Sin embargo, creo que próximamente comenzaré a utilizarlas definir un primer nivel de clasificación como puede ser separar un tutorial de una noticia.

Al final de la columna derecha están las últimas actualizaciones en Twitter. En un principio había pensado en incorporar un lifestream que resumiera mi actividad en diferentes medios sociales. Sin embargo, creo que en realidad Twitter puede servir justamente para hacer esta síntesis y es mucho más claro ver esto que un sinfín de actualizaciones de Facebook, LinkedIn, Delicious y otros.

Una beta en serio

La versión final del tema la estoy probando desde un par de semanas tanto en un blog de prueba como en este utilizando el plugin Theme Test Drive. Sin embargo, es probable que aparezca algún problema para lo cual está disponible el formulario de contacto para reportar errores.

En cuanto al tema, tiene el nombre interno de Newport pero todavía le falta bastante para poder liberarse por lo cual de momento no está disponible para descargar. Espero poder completar esta tarea en las próximas semanas y así ofrecer un tema desarrollado por mi en su totalidad salvo algunas funciones en PHP que tomé de otros themes gratuitos.

Ssugerencias, opiniones, comentarios… ¡tu participación es bienvenida!

Alejandro Paul, tipografías del hemisferio sur para el mundo

Sebastián Thüer — Mon, 07 Sep 2009 21:35:28 +0000

El último newletter de MyFonts dedica una entrevista a Alejandro Paul, uno de los fundadores de Sudtipos que se constituye en el primer colectivo argentino dedicado exclusivamente a la producción tipográfica. Creada en plena crisis económica durante el 2001, Sudtipos reune además a Ariel Garofalo, Claudio Pousada y Diego Giaccone, profesionales todos con larga trayectoria en el campos del diseño corporativo y el packaging.

Uno de los rasgos que define a los tipos creados por Sudtipos es que están pensados para que los diseñadores pueden obtener un rasgo único en sus producciones. Como dice Paul en la entrevista, cuando diseñamos el envoltorio para un producto que dice “light” hay otra decena de productos con la misma palabra y lo último que queremos es que sea percibido como uno más.

(...)
Leer más de Alejandro Paul, tipografías del hemisferio sur para el mundo (522 words)

El nuevo Yahoo apuesta por el viejo formato de los portales

Sebastián Thüer — Mon, 24 Aug 2009 11:09:24 +0000

Desde que Yahoo se decidió a utilizar la tecnología de Microsoft para su buscador hay bastante expectativa para ver qué dirección irá su página web. El nuevo rediseño, del cual ya podemos ver una beta, se concentra en un concepto de la era temprana de Internet: el portal.

(...)
Leer más de El nuevo Yahoo apuesta por el viejo formato de los portales (322 words)