• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

Guerra de formatos en la web: HTML 5 vs. Flash

Sebastián Thüer · 11.02.2010 ·

El iPad de Apple no soporta Flash y encendió la mecha
El iPad de Apple no soporta Flash y encendió la mecha

Es liviano, interactivo y rápido ¿Flash? No, HTML 5.  El nuevo HTML llega con muchas novedades para manejar contenido multimedia y el apoyo de dos gigantes: Apple y especialmente Google ¿Cuál es el futuro del formato de Adobe ante la avanzada del código abierto y sus padrinos?

Repasemos los últimos movimientos. Apple lanzó su promocionadísimo iPad con un montón de características. Pero entre ellas no figura una tan básica como el soporte para Flash. En el blog de desarrolladores de Flash Adrian Ludwig escribió un post para hacerlo notar y señaló que esa forma se privaba a los usuarios de acceder al 75% del video y el 70% de los juegos que está en la web. A pesar de tener soporte para PDF, ePub y otros formatos Flash estaba ausente. Kevin Lynch, CTO de Adobe, también criticó con dureza la actitud de Apple y recordó irónicamente que Flash fue desarrollado 15 años atrás para pen tablets.

Google no fue tan lejos porque su navegador sí reproduce Flash pero está experimentando con HTML 5 en el mayor sitios de videos del mundo y todo parece indicar que tendremos un YouTube Flash Free próximamente.  Google Wave, la plataforma de comunicaciones -en la cual viene trabajando desde hace tiempo, se basa en la nueva versión del HTML que también está en Android, su sistema operativo para teléfonos móviles. Por no mencionar la enorme diferencia para el SEO entre usar HTML o Flash.

La historia multimedia de la web

Future Splash Animator, la primera versión de Flash
Future Splash Animator, la primera versión de Flash

Para mirara hacia al futuro conviene poner las cosas en perspectiva. Flash llegó a la web cuando las páginas se diseñaban como si fuesen libros con hipertexto.  Hay que recordar que Tim Berners-Lee pensó pensó originalmente en la web como un lugar para compartir artículos y bibliografía científica. Por eso tenemos seis etiquetas para poner niveles de títulos pero ninguna para reproducir sonido o video.  Era como si la web hubiese obviado los progresos en diseño gráfico de los últimos 200 años.

La aparición de Flash fue una bendición para que diseñadores y desarrolladores pudiesen hacer que la web pudiese ser multimedia: mostrar animaciones, reproducir sonidos y extender la interactividad más allá del clic sobre un enlace. Claro que hubo abusos y muchos no tuvieron mejor idea que transformar sus sitios en lugares imposibles de navegar, abarrotado de objetos animados y con introducciones pensadas para mostrar la maestría de su creador pero carentes de todo sentido para los usuarios.

Pero estos excesos no dejaban de esconder una grave déficit: El HTML era extremadamente pobre para asegurar una experiencia de usuario al menos digna. La solución fue dejar que el aspecto visual recayera en el hoy indispensable CSS. Contenido en el HTML, forma en el CSS.

Sin embargo quedaba otro problema por solucionar: la interactividad. La respuesta llegó de la mano del Javascript, un lenguaje que siempre estuvo presente pero del cual no se había extraído todo el potencial. Con HTML + CSS + Javascript parecía que podían lograrse cosas bastante interesantes, algo que definitivamente se alcanzó con la filosofía que impuso Ajax para que las páginas pudieran responder al usuario sin necesidad de recargarse.

Pero a Flash le quedaba un as en la manga: el video. RealTime, QuickTime y WindowsMedia competían para ver quien se quedaba con el interesante mercado de los reproductores de video online hasta que llegó Flash y los barrió. Fundamentalmente con dos argumentos: un codec que comprimía más que los demás sin sacrificar calidad y una enorme tasa de penetración que evitaban a los usuarios el fárrago de instalar un plugin para ver un trailer de 2 minutos.

Mirando hacia adelante

Ahora HTML 5 incluye etiquetas específicas para contenido video y los codecs abiertos como Theora han avanzado para ofrecen buena relación peso/calidad. Además, cuentan con el impuslo de navegadores como Firefox y Chrome están apoyando decididamente los formatos abiertos ¿Cuál es la carta que le queda a Flash por jugar?

Los avisos. Todavía existe un abismo de diferencia entre los anuncios de texto al estilo Adwords y el repertorio de recursos que puede desplegar Flash para impactar en el usuario. Esto no significa un voto a favor del insufrible Test de la Muerte o los agobiantes layers que se aparecen cuando estás leyendo un periódico en español. Pero sí es verdad que con Flash existe un abanico de posibilidades que utilizadas con imaginación y criterio pueden ayudar a los anunciantes a ofrecer una experiencia mucho más rica a los usuarios. Y aunque podamos hacer lo mismo con otras tecnologías para la distribución de la publicidad online resulta mucho más sencillo embeberlo todo en un SWF.

Pero se trata de un factor circunstancial y no es el producto de una decisión estratégica. Otro aliado tradicional de Flash solía ser su capacidad multiplataforma: en lugar de comprobar un sitio con una larga lista de navegadores y versiones para ver cómo procesaban una página, Flash garantiza una experiencia idéntica para todo el mundo. Pero con la extensión de los estándares web y la progresiva adopción de los frameworks de JavaScript -como jQuery- esta barrera está cayendo lentamente.

¿Podrán los desarrolladores de Flash amoldarse a los tiempos que corren y seguir ofreciendo un valor diferencial para su producto? Flash agregó esteroides a una web raquítica en multimedia y seriamente limitada por el ancho de banda en sus inicios. Pero el HTML ha hecho pasado mucho tiempo preparándose para la pelea y se presenta con padrinos de peso para la batalla.

¿Cuánto cobrar por un diseño web?

Sebastián Thüer · 29.12.2009 ·

Una de los aspectos más delicados y que suele ser un auténtico karma para los diseñadores web es presupuestar su trabajo. Hay varias estrategias para ello: cobrar a ojo, determinar el valor de la hora de trabajo o establecer una matriz de taza diaria. Sin embargo, muchos veces está bien buscar valores de referencia para saber si nuestras cuentas nos dan un precio competitivo o no.

El sitio Build Iinternet hizo una encuesta entre sus lectores para saber cuánto cobran y los resultados son interesantes: el 25% cobra menos de 25 dólares la hora, el 41%  cobra entre 25 y 50 dólares y el 34% estima el valor de su hora por encima de los 50 dólares. Hay que considerar que contestaron unas 107 personas contra más de los 8000 suscriptores que tiene el sitio, y que dicha selección no fue producto de ningún muestreo por  lo cual no tiene valor científico. De todas formas, sirve para mirar cómo está el panorama.

Algunas consideraciones de los resultados

  • El cuestionario tenía solamente dos campos: uno para poner el precio en dólares y otro para dejar comentarios. No se consideran habilidades específicas, formación o experiencia del diseñador; solo se pregunta sobre el precio final de su hora de trabajo.
  • La mayoría de los que contestaron que cobran debajo de 25 dólares la hora son estudiantes o viven en países donde el dólar es una divisa fuerte.
  • En el mercado internacional cobrar menos de 20 dólares la hora puede que no sea tan competitivo como pueda parecer. Si apuntamos a un mercado de precios competitivos el valor promedio de la hora es de unos 35 dólares.
  • Para competir en el segmento profesional los valores iniciales están en torno a los 50 dólares.
  • Precios bajos pueden atraer malos clientes que constantemente van regatear el valor de la hora de trabajo. Mejor comenzar por un precio acorde con las expectativas reales que tenemos.

No sé si estoy de acuerdo con todos los puntos que plantea el artículo, fundamentalmente porque «diseño web» suele ser un paraguas bajo el cual se agrupan un conjunto de actividades indefinidas y que requieren competencias muy diversas. De todos modos, está bien mirar estos valores de referencia para compararlos con los nuestros.

Newsletters de Navidad, cuando las ideas se toman vacaciones

Sebastián Thüer · 24.12.2009 ·

La costumbre de enviar salutaciones navideñas está bastante extendida entre todas las empresas. Desde tarjetas virtuales hasta costos regalos, las organizaciones aprovechan las fiestas de Navidad y Año Nuevo para llevar adelante acciones de comunicación que generalmente tienen por objetivo generar empatía con clientes, proveedores y las personas que trabajan en ella.

¿Son realmente efectivas estas acciones? Me gustaría reflexionar particularmente sobre los famosos correos electrónicos o newsletter navideños que se distribuyen a esta altura del año. Muchas veces su envío se hace por simple costumbre, como una tradición para «quedar bien» pero no se piensa realmente si es algo que tiene o no valor.

Noche de paz, días de furia

Un buen manual de comunicación dice dice que debemos llegar a la persona adecuada en el momento adecuado. Para lo primero necesitamos que las bases de datos estén ordenadas y bien segmentadas y la Navidad tiene poco que ver con esto. En lo segundo, adquiere mayor relevancia.

¿Es un buen momento generar una acción de comunicación ahora? Seguramente en estos días tu casilla de correo rebosará de mensajes de todo tipo relacionados con la fiestas. Desde PowerPoints emotivos hasta el enésimo reenvío de chistes pasando por mensajes masivos de amigos, amigos de amigos y compañeros. Por si fuera poco, parece que todos los sitios donde dejamos alguna vez nuestro email se ponen de acuerdo para hacernos llegar tarjetas llenas de clichés navideños como arbolitos, renos y copos de nieve.

Fuera del mundo digital, la vida de la mayoría de las personas se ve alterada con numerosos eventos: cenas con compañeros de trabajo, reencuentro con viejos amigos y familias que se reúnen. Muchos también hacen un rally de compras para conseguir regalos y organizar la cena de nochebuena y nochevieja. En el hemisferio sur también se da la particularidad que el fin de año es el final de los proyectos, el momento de las evaluaciones, los balances y la planificación del próximo ciclo. El enero del sur es el agosto del norte.

La conclusión es bastante obvia: Con la proliferación de mensajes los canales se saturan y el tiempo que las personas dedican a lo que no es imprescindible -leer una tarjeta de salutación, por ejemplo- se reduce.

Comunicar en tiempos difíciles

Si hay muchos mensajes circulando y la predisposición del usuario a leerlos es baja la estrategia es clara: hay que ofrecer algo diferente o añadir algo (aunque sea pequeño) al tradicional «Feliz Navidad». No es el caso de estos correos que recibí:

Como se puede ver, el valor del mensaje es prácticamente cero. En los dos primeros casos solo hay un texto de felicitaciones y nada más. En el tercero me invitan a ver una animación con Papá Noel, renos y música cuya única interacción consiste en que las pupilas de los ojos siguen el puntero del mouse. Y en el último al hacer clic descubro otra animación que va formando la palabra Navidad y al final me ofrece hacer un vínculo para acceder a la página principal.

Agregando valor

Una forma de agregar algo de valor a la comunicación es añadir más de información al saludo. Por ejemplo, MySpace además de saludarme me recuerda que hay un evento próximo del cual puedo participar. Muy básico pero ya es algo más que un simple mensaje de felicidades.

Las fiestas de fin de año también están asociadas con valores sociales. En su newsletter Softonic optó por aprovechar la ocasión para difundir labora solidaria como la contribución a Médicos Sin Fronteras para tratar a enfermos en la India. Un momento más que adecuado para mostrar las acciones de responsabilidad social de la empresa.

El Departamento de Investigación de LinkedIn me envío este correo donde cuentan las principales acciones que realizaron este año y es también un modo de implicarme: yo estoy comprendido dentro de los números que presentan y me siento parte del proceso.

Por último está Vueling que toca otra fibra sensible del consumidor: el precio.

La elección es coherente con su política de comunicación donde el precio es un elemento clave y el momento es adecuado dado que el tráfico aéreo se incrementa sensiblemente en estas fechas.

En pocas palabras

El tradicional modelo de la comunicación de Roman Jakobson nos habla de la función fáctica para referirse a aquel tipo de comunicación que solo se realiza para comprobar el buen estado del canal y mantener la interacción. Enviar un mensaje solo para decir «feliz navidad» significa decir «hola, sé que es Navidad y te envío un mensaje para que lo sepas. Adiós». No hay contenido de valor ni preocupación real por generar empatía con el destinatario.

Este tipo de correos muestran una comunicación en piloto automático y no integrados en una estrategia. Las personas son bombardeadas en su cuenta de correo con información irrelevante en un momento donde las pautas sociales marcan una actividad intensa y dejan poco lugar a lo que no sea indispensable.

¡Feliz Navidad y excelente Año Nuevo a los lectores/comentaristas del blog!

Conocé tus contenidos más visible con Google Browser Size

Sebastián Thüer · 17.12.2009 ·

Google sigue sacando herramientas para optimizar sitios web y ahora es el turno de Google Browser Size que hace algo muy simple: te muestra tu sitio web y por encima una capa semitransparente con el porcentajes de usuarios que ven el contenido basado en la resolución de los navegadores y la cantidad de gente que hace scroll.

Captura de Google Browser Size
Captura de Google Browser Size

El concepto es bastante sencillo y viene de la época del diseño de diarios. Tradicionalmente la mitad de arriba es el espacio privilegiado donde está el titular principal y toda aquella información que se considera que puede atraer al lector. Esto es porque los diarios, especialmente los formato sábana, se exhiben doblado a la mitad.

Trasladado a la web sería que la parte más importante del contenido es aquella que se encuentra visible sin que haya necesidad de usar las barras de desplazamiento. Google utiliza las estadísticas que obtiene de las visitas a la página principal de su sitio y a partir de ahí estima qué porcentaje de usuarios llegan a ver el contenido que se encuentra fuera del área que muestra por defecto el navegador.

Por ejemplo, el contenido que se ve desde entre los 600 pixeles de ancho y los 350 de alto es visto por el 99& de los usuarios, pero si superamos los 800 pixeles de ancho el porcentaje baja hasta el 90%. En el blog de Google hay más información y cuentan como pudieron aumentar las descargas de Google Earth con solo subir el botón que dice «Download» 100 pixeles hacia arriba.

La herramienta está buena pero en mi opinión el tema es un poco más complejo. Que el usuario tenga que hacer scroll no significa que el contenido sea invisible, influye mucho el diseño y cómo se ha organizado al espacio para mostrar al usuario que hay más cosas interesantes cuando mueve la barra de desplazamiento. Y para aquellos que digan que hacen faltan datos para sostener esta afirmación aquí va un artículo intereante: The myth of the page fold: evidence from user testing.

Importante: No hay que confundir este herramienta de Google que se basa en probabilidades con el eyetracking que mide dónde efectivamente miran los usuarios.

Solución sencilla para un formulario de selección múltiple usable

Sebastián Thüer · 09.12.2009 ·

La selección múltiple de elementos suele ser un dolor de cabeza la hora de trabajar con formularios. Por defecto el HTML nos da tres elementos para diseñar la interacción del usuario con opciones cerradas:

La casilla de verificación o check box, que se utiliza cuando el usuario puede escoger más de una opción de un grupo de elementos.

Check box, para seleccionar uno o más elementos
Check box, para seleccionar uno o más elementos

Los radio buttons para escoger entre una sola opción de un grupo de elementos.

Radio buttons, para seleccionar una sola opción
Radio buttons, para seleccionar una sola opción

Las cajas de selección o select box que muestran por defecto una sola opción pero permiten escoger otras hacemos clic sobre ellas.

Cuadro de selección o select box
Cuadro de selección o select box

Cuando tenemos muchas opciones para ofrecerle al usuario normalmente no queremos saturarlo y usamos el select para que vaya recorriendo el listado a su conveniencia. El problema es que si queremos ofrecerle la alternativa de elegir más de un ítem la forma de hacerlo es muy poco natural: el usuario deben presionar la opción y mantener presionada la tecla control.

Cuando hacemos uso de esta opción normalmente colocamos la referencia debajo ya que se trata de una opción mayormente desconocida. Para facilitarle un poco el proceso normalmente hacemos que el cuadro de selección se expanda hasta que muestre 2 o 3 opciones, con lo cual damos a entender que existe la alternativa de elegir más de un elemento.

Selección múltiple en un select box
Selección múltiple en un select box

Una solución sencilla que ofrece una mejor experiencia de usuario es emplear casillas de verificación con una barra de desplazamiento como el siguiente ejemplo.

Selección múltiple con check box
Selección múltiple con check box

Solamente hay que agregar un poco de CSS:

div.multiple {
	height: 100px;
	overflow: auto;
	background:#eee;
	border:5px solid #eee;
	margin:0 0 1.5em 25px;
}

Y el HTML quedaría algo así

1. ¿Cuáles de estos periódicos lees?




...

Existen otras soluciones más sofisticadas como usar Web Forms 2.0 o algún framework de JavaScript como jQuery, pero esta solución está bien para algo simple y sin agregar demasiado código.

  • Descargar el archivo de ejemplo
  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 31
  • Página 32
  • Página 33
  • Página 34
  • Página 35
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder