¿El problema? Que los diseñadores gráficos no cuentan con herramientas visuales para crear interacción y animación HTML5, y eso es un gran freno en la adopción de otras tecnologías que no sean Flash. Desde hace tiempo venimos pensando que el primero que cree una herramienta de ese tipo puede llevarse “el gato al agua”. Y Adobe está tardando mucho (aunque seguro que lo tienen más cercano de lo que nos creemos).

El caso es que nos hemos encontrado ayer mismo con una herramienta online que permitirá hacer maravillas de animación con propiedades CSS3 (estará disponible en breve). Se llama Animatable, y SÍ, creemos que este es el camino que los programas de animación para web deberán de tomar. La pena es que de momento estas propiedades sólo funcionan en navegadores WebKit (Safari y Chrome). Podéis ver esta demo explicativa y “fliparlo”:

Tenéis también una genial demo de animación estilo “Mad Men” realizada con esta herramienta, bajo el nombre MadManimation
(pulsad en la palabra en rojo “Watch” para activarla). Incluso hemos probado en iPhone e iPad y va fluida fluida…
Web de Animatable

Que los desarrolladores web hace tiempo que no están emocionados con Flash es un secreto a voces, otra cosa son los diseñadores web, que en bastantes casos se resisten a creer que la tecnología de Adobe no vaya a seguir siendo el “rey del mambo” (en lo que a Web se refiere, no hablamos aquí de desarrollo de aplicaciones, banners o multimedia, ahí seguirá mucho tiempo teniendo protagonismo).

Sin embargo puede que sorprenda saber que Adobe, “con la boca pequeña” está anunciando iniciativas que nos hacen pensar que tiene un “plan B” por si finalmente esa amalgama de tecnologías llamada HTML5 desbanca a Flash en el liderazgo web (que parece lo más probable).

En este post del blog del ingeniero de Adobe John Nack se nos detallan unas cuantas que conciernen a Illustrator CS5 (capacidades de exportación a SVG mejoradas), Dreamweaver CS5 (pack de HTML5 y vídeo para el programa), y sobre todo, tres tecnologías que están desarrollando para complementar a Flash:

La primera podría ser una herramienta para convertir animaciones Flash a HTML5. Se hizo una demo de esto en las conferencias Adobe Max para asombro del respetable. El código final que se genera no me parece muy optimizado que digamos, pero el ahorro de tiempo es evidente.

La segunda es una herramienta de autoría HTML5 nativa, Edge (por cierto, me recuerda enormemente en interfaz al Flash Catalyst). No sabemos si esta herramienta será lo mismo que la rumoreada “Helium” que tienen planificado sacar con la Creative Suite 6, tal vez…

La tercera tecnología es una llamada –en nombre clave– “Muse” (musa) y promete poder crear websites HTML/CSS fácilmente desde herramientas como Illustrator o InDesign, sin saber gran cosa de código web

Lo cierto es que para el diseñador web eso son buenas noticias: pase lo que pase, tendrá herramientas sencillas para realizar su labor, y entregar el trabajo en menos tiempo, ahorrándose el tedio de codificar (o buscar un programador) para unas cuantas de sus tareas web. No hay que olvidar también que HTML5 es una tecnología que sólo funcionará bien con Explorer 9 en adelante, y eso es decir que aún habrá un porcentaje relativamente alto de usuarios que no van a poder acceder a ella sin cambiar de navegador.

En cualquier caso Adobe está haciendo una labor inteligente, que probablemente haga que siga siendo líder en programas visuales de creación web, y declarando de antemano sus progresos está seguramente desanimando a posibles competidores de intentar meterse en este mercado. Por cierto ¿no tendría que haber más gente trabajando en autoría HTML5 visual, siendo un mercado tan en alza? Estaría bien que Adobe tuviera un poco de competencia, para variar…

Así que en este 2011 posiblemente veamos (antes de terminar el año) un anuncio de la Creative Suite 6 y además, nuevas herramientas para el diseño web sin Flash, que cambiarán bastante el panorama actual. Mientras tanto, disfrutemos de este año de transición y vayamos mentalizándonos a todo lo que nos espera: seguir formándonos en nuevos softwares y tecnologías web.

PD. la imagen de arriba no es un “fake”, es un eslógan real sacado de la web de Adobe.

¿Cómo se controlará el iPad 2 (y presumiblemente, el iPhone 5 que salga este verano)? Pues aquí tenéis un vídeo que nos lo muestra: habrá que aprender a hacer un par de gestos con tres/cuatro deditos.

Aunque nadie pensábamos que íbamos a vivir tan bien sin un teclado físico, y nos hemos acostumbrado, y los modelos actuales ya tienen muy pocos botones reales, soy ligeramente escéptico. ¿Cuándo demasiada simplicidad en un diseño es eso: demasiada? ¿Acabará Apple por volver a poner botón de inicio por petición popular, como le pasó con los modelos de iPod Shuffle, en los que casi quiso acabar con los controles físicos? ¿O nos acabaremos acostumbrando y pensando que no hacía falta el botoncito de marras? ¿Está la gente en su mayoría preparada para asumir ahora mismo ese cambio de filosofía, y olvidarse de pulsar teclas para ir aprendiendo a utilizar interfaces gestuales? ¿O es aún pronto para algo tan “radical”? En definitiva, ¿será bueno para la usabilidad del aparato, o ese sacrificio lo será también en parte de la ergonomía de uso?

Lo sabremos en breve: va a ser interesante, pero vosotros, ¿qué pensáis?

Noticia original en: creativebits.org (en inglés) :: iPad 2 will not have a Home Button

Viéndolo, lo tenemos claro: deseamos que empecéis el año con ganas, para mejorar en ello, y que, entre todos, vayamos cambiando cómo la gente a nuestro alrededor percibe el diseño…

Aguantad un minuto o así y veréis cómo se ve la revista en formato interactivo. Nada que ver con reemplazar al papel: han querido hacer mucho más que eso, cosas que en papel jamás se podrían implementar por supuesto. Y es que un nuevo medio sólo se valora bien cuando se aprovecha al máximo, y es lo que se puede ver en este vídeo. Vía Adobe Inspire

Está inspirado en el baile del Javascripy que podéis leer aquí y oír cantado (no por profesionales, aviso) en esta otra dirección.

La cosa empieza con el baile del Actionscripy así:

¡¡¡Teclea, teclea!!!

El Actionscripy mola mogollón,

aunque yo prefiero la versión esa, la dos.

Ponle actionscripy a esa paginilla,
que el actionscripy le da mucha más “vidilla”.

Programas eventos,
controlas variables,
la línea de tiempo,
mi ‘amol’ ya tu sabes!

Programas con acciones,
copias con Control-C,
o con comportamientos que son código también!

Y el actionscripy se programa asi:
1-El gotoAnPlay ( )
2-El on ( ‘Rilis’ )
3-el if con else
4-Los muvi-clis

Programa el actionscripy,
Programa el actionscripy,
programa el diseñata, y también el friki

Programan en la offis, programan en la escuela,
Programan los nenes y también las abuelas.

Programa hasta el Chaves sin espacios ni nada,
y Juan Carlos le dice: ¿Por qué no lo sangras?

En el fotograma de un clip muy normal,
pusieron actionscripy y el ratón le hizo bailar

¡¡¡Bailar!! ¡¡Bailar, Bailar, Bailar!!!

Y el actionscripy se programa asi:
1-El gotoAnPlay ( )
2-El on ( ‘Rilis’ )
3-el if con else
4-Los muvi-clis

No me cansaré en insistir que cuando hablamos de diseñar interfaces (algo imprescindible para quienes crean webs, interactivos y aplicaciones en general), no sólo debemos pensar y tomar inspiración en resolver problemas ante el ordenador. Es tanto o más interesante pensar en qué problemas de ergonomía presentan aparatos que encontramos a diario.

Es el caso de los ascensores. ¿No os sorprende la cantidad de gente que confunde el botón de arriba o abajo del ascensor con la noción de que quieren que el ascensor baje o suba, en vez de pensar en lo que ellos quieren hacer (que es a su vez lo que los ingenieros deben desear que la gente piense) y pulsar en subir o bajar? Esta historia común de la vida real se narra en el blog de GarageKubrick, y por cierto se da una bonita moraleja aplicada curiosamente a los guiones de audiovisuales.

Pero en fin, como reza el título de este mensaje, hay veces que dos botones no son mejores que uno; y es cuando confunden al usuario común. Dejemos de hacer un dogma de que es el usuario quien debería pensar de otra manera. Dejemos de exigirle que se “tecnifique” y que se adapte a la forma de usar un aparato o una interfaz que el autor ha definido como “correcta”. La moraleja: estudiemos cómo piensa el común de los mortales (o de los internautas) y diseñemos para personas reales, no para “geeks” (especialistas en informática).

Veamos un caso extremo pero interesante: tenemos por caso un mando a distancia para controlar un ordenador que se conecta a la tele (un Media Center que se llama, vamos). ¿Qué mando a distancia preferiría un usuario no experto en el uso de aparatos? Dicho de otro modo, ¿cuál preferiría usar tu madre?

El modelo del centro es por supuesto el que viene con los Macintosh de Apple últimamente y con otros de sus inventos (el AppleTV por ejemplo, que es su MediaCenter particular). Es radicalmente simple, tanto que a los tecnófilos les parecerá que no es posible hacer muchas cosas con él. Pero sorprendentemente, combinado con la interfaz de Media Center de Apple, SÍ se puede hacer prácticamente todo lo que un usuario normal/medio querría hacer. La simplicidad y ergonomía al poder, vamos… Lo cual es esencialmente una de las máximas a poner en práctica en el medio web, especialmente cuando va dirigido al gran público.

Por cierto, si queréis ver botoneras de ascensores, desde el blog de GarageKubrick nos dan esta direción:
http://www2.isye.gatech.edu/~jjb/misc/elevators/elevators.html
donde podemos ver esperpentos varios.

Seguimos atendiendo consultas bien en persona o por correo (consultas@iddeco.net es nuestro mail) y hoy contestamos a una cuestión que nos lleva a programar un poco dentro de Flash. ¿Cómo vincular a correo electrónico?

En primer lugar aclarar que NO estamos hablando de mandar el correo electrónico directamente desde la película Flash. Esto último NO es posible directamente sin la intermediación de tecnologías de servidor tales como PHP, JSP, ASP o similares. De todos modos, si estáis interesados en saber cómo se envía un “emilio” desde una interfaz Flash, este enlace a un tutorial del excelente site de Cristalab es lo que estáis buscando, a por él…

• Si lo que queréis es poner un enlace a una dirección de correo electrónico (como era el caso de esta consulta) os lo explicamos en una serie de pasos bien “migaditos”…

Nota: Antes que nada, si no queréis programar “na’ de na’” podéis usar el panel de comportamientos de Flash y añadir una acción de Web>Ir a página Web y tomar en cuenta el punto cero que ahora comentamos:

0) En principio decir que la sintaxis para enlaces de correo electrónico en la web siempre es mailto:nombre@dominio.com y en Flash tampoco cambia esa norma. Tened en cuenta que lo que hace un enlace de dicho tipo es abrir el programa de correo electrónico que uséis por defecto (Outlook, Mail, Entourage, Thunderbird, etc.) y crear un correo nuevo a dicha dirección. NO funciona por tanto para llamar a envío de correos de páginas web del tipo hotmail, gmail, yahoo, etc.

1) En segundo lugar, para llamar a un enlace web dentro de una película Flash tradicionalmente se empleaba el comando getURL, que en su sintaxis más simple funciona de este modo:

getURL(“mailto:pepepe@gmail.com“);

Es decir, la dirección web va entrecomillada.

Ahora mismo en el nuevo estándar de Actionscript 3.0 de Flash CS3 (la versión 9) la cosa va a cambiar (a peor desde mi punto de vista) y ahora tenemos que usar este otro comando:

navigateToURL (new URLRequest(“mailto:pepepe@gmail.com“));

2) Sólo tenemos que vincular ahora este comando dentro de un evento, por ejemplo de un botón, para ello en el Flash con Actionscript 2 (Flash 8 y anteriores), seleccionábamos el botón y escribíamos en el panel de Acciones:

Mucho cuidado que en el panel de acciones ponga “Acciones- Botón”, de otro modo quizá estamos colocando el código en el lugar equivocado.

En Actionscript 2 un evento de botón con programación para
enviar correo electrónico quedaría así

En Actionscript 3.0 de Flash CS3 sería obligatorio darle un nombre a la instancia de botón y luego programar un evento de manera más compleja; por ejemplo si el botón se llama “miboton” como instancia en el Panel de Acciones para el fotograma 1 de la película (que ponga Acciones-Fotograma en el panel) escribiríamos:

miboton.addEventListener(MouseEvent.CLICK, enlaza);

function enlaza (evento:MouseEvent):void {

navigateToURL (new URLRequest(“mailto:pepepe@gmail.com“));

}

En Actionscript tanto la sintaxis para eventos como la de ir a una URL cambian,
y son más complejas y estrictas, en general como todo Actionscript 3.0

En definitiva, la transición a Actionscript 3.0 de Flash CS3 nos complica un poco la vida y tenemos que volver a aprender cómo hacer cosas que eran simples y conocíamos con Actionscript 2. Por supuesto, siempre puedes “obligar” a Flash CS3 a trabajar como era antes, pero en algún momento dejará de funcionar esto y habrá que ir haciéndose a la idea.

Hoy os traemos este mapa visual estilo como los del metro de una gran ciudad, en ella se representan los 200 mejores sitios de Internet como si fueran estaciones, cada uno asociado a una de estas grandes líneas:

Compartir archivos, Herramientas, Tecnología, Saber, Negocios, Noticias, Noticias sociales, Comunidades, Diseño, Influenciadores, Películas, Música y otras como conexiones chinas, políticas, etc.

Una manera muy visual de saber qué está de moda en Internet… Por cierto, como todo en la filosofía de la web 2.0, todo gira en torno de ti (You), el usuario.
Para verlo ampliado pulsa en la imagen arriba o en este enlace de informationarchitects.jp

———–

La importancia del Deshacer

Muchos usuarios de internet manifiestan desconfianza cuando interactuan con la web. Es nuestro trabajo como diseñadores web intentar darles tranquilidad y ponerles una red de seguridad para cuando las cosas vayan mal. Facilitar diversos métodos mediante los cuales los usuarios puedan deshacer sus acciones es un útil refuerzo para los usuarios menos seguros.

Beneficios del Deshacer

La funcionalidad del Deshacer parece estar en horas bajas en la oleada de webs 2.0, especialmente en los sitios web que hace uso intensivo de AJAX. Es un tema triste para el diseño web, ya que la capacidad de deshacer las acciones consigue tres beneficios cruciales:

1. Aliviar la ansiedad

Como he dicho muchas veces, y repetiré, a la mayoría de la gente no le gustan los ordenadores. Es tan fácil para nosotros olvidarnos de esto, los que convivimos y dormimos con ordenadores cada día… Tengo que confesar que me siento más cómodo trabajando con un ordenador que con el mundo real. Después de todo, ¡cuántas veces hubiera querido un Control+Z para la vida real!

Sin embargo, aunque muchos estemos cómodos con los ordenadores, la mayoría de la gente no lo está. Son intimidantes, impersonales y les falta mucho para ser intuitivos. Esto es cierto no solamente de los ordenadores personales, sino también de la web. En realidad quién se plantearía diseñar una interfaz cuya apariencia cambiara [radicalmente] entre secciones (sitios web).

La capacidad de deshacer, volver atrás o escapar es una liana salvadora para muchos usuarios. Es inmensamente tranquilizador saber que siempre podrás deshacer algo si lo hiciste mal, y cuando dicha opción no está disponible puede ser tremendamente pertubador para el usuario. Pon como ejemplo la primera vez que compraste algo online: ¿recuerdas ese sentimiento de intranquilidad cuando te dabas cuenta de que el siguiente clic ya no tenía vuelta atrás?

Poder volver atrás es una como una cuerda
de Seguridad en la Web para el usuario

2. Un modo de vencer la complejidad

Soy un gran fan de la simplicidad, mayormente desde que terminé hace poco “Las leyes de la Simplicidad” ( “The Laws of Simplicity”) de J. Maeda. En su libro habla acerca del hecho de que la capacidad de deshacer algo crea la sensación de simplicidad incluso en las aplicaciones más intrincadas.

Una función de deshacer al alcance del usuario crea una sensación de sencillez porque inculca al usuario la actitud de “qué narices, siempre puedo deshacerlo”. Una vez que el usuario retiene dicha actitud percibe las cosas como más sencillas de lo que realmente son.

3. Un método de construir confianza

La actitud de “qué narices” se basa en su mayor parte en la confianza. La confianza en el poder mágico del Deshacer, es lo que permite que juguemos y experimentemos con una aplicación. A través de la experimentación, el juego y el conocimiento llega la confianza en nuestras propias habilidades. Ese es el poder del Deshacer.

Oportunidades de dotar de un Deshacer

Ahora que hemos establecido la importancia del deshacer, el siguiente paso es mirar a qué opciones están disponibles como diseñadores web para dotar a nuestros usuarios de ellas. He encontrado cuatro modos en que esto es posible, sin embargo la triste realidad es que continuamente tiramos por tierra estos métodos por la manera como diseñamos o codificamos.

a) El botón de Volver atrás

Me he sentado en cientos de sesiones de usabilidad durante la última década y no recuerdo una sola donde el usuario no empleara el botón de Volver atrás del navegador en algún momento. El botón de atrás es la principal cuerda de seguridad que emplea la mayoría para arreglar problemas, y sin embargo en la mayoría de sitios no funciona correctamente. El problema reside en el uso de AJAX y Flash, que rompe la metáfora de página con la que se han pensando y construido los navegadores. El mismo problema ocurre con los frames (marcos) y fue una de las razones fundamentales por la que acabaron decayendo.

Si bien hay remedios para este problema en Flash y en AJAX, son menos que perfectos y se implementan raramente. Se debe dar atención seria a este asunto cuando se desarrollan aplicaciones web, ya que no hacerlo restaría usabilidad y además perjudicaría a la confianza del usuario.

b) Las líneas de navegación jerárquicas (Breadcrumbs)

[Nota: breadcrumbs o "miguitas de pan" es una referencia al típico cuento de Pulgarcito donde el pequeño era abandonado en el bosque y podía volver a su casa por el rastro de migas de pan que había ido dejando. En la web moderna equivaldría a poner al usuario las categorías y subcategorías en las que ha ido entrado, haciendo que sean enlaces y te dejen volver a otras partes anteriores del árbol de navegación]

Hubo un tiempo en el que los usuarios no entendían las líneas de navegación jerárquica. Sin embargo como ha sugerido recientemente Jakob Nielsen [el gurú de la usabilidad], ya no es ese el caso [véase este enlace al respecto].

Las “breadcrumbs” o líneas de jerarquía de navegación como esta son una
ayuda más al usuario para deshacer y volver a donde ya estuvo

Si bien las líneas de navegación nunca deben plantearse como un sustituto del botón de atrás, funcionan como una alternativa útil para usuarios más experimentados. Lo que es más, aunque tradicionalmente se han empleado en websites basados en el modelo de página, puede trasladarse fácilmente su uso a aplicaciones web [o interactivos].

c) Marcadores o Favoritos

En las sesiones de usabilidad he visto ocasionalmente utilizar favoritos y marcadores como herramienta de deshacer para volver a una página anterior. Pero al contrario que con el botón de Volver esta funcionalidad a menudo no es posible en las aplicaciones web modernas que actualizan secciones de una página en vez de la página entera. Los favoritos permiten al usuario regresar a “puntos seguros” marcados en su navegar; en consecuencia deberíamos hacer lo más posible para que esta habilidad siga funcionando.

d) Página inicial (Home Page)

Casi todos los sitios web tienen un enlace a la página de inicio, sin embargo no todos hacen este enlace tan evidente. Una práctica común es hacer que el logotipo del website sea un enlace a ella, y si bien esta práctica en sí misma está bien, no es tan obvio que este enlace exista y muchos usuarios no están al tanto de ello.

Tener un enlace a la página principal es una manera estupenda de dejar al usuario “volver a empezar” pero si vas a facilitar dicha funcionalidad necesita ser todo lo evidente que sea posible.

Así que esto ha sido todo: el por qué el Deshacer es tan importante y algunas técnicas para hacer sencillo volver atrás en tus websites. Espero que te sean de ayuda.

———————-

Artículo original en:
http://www.boagworld.com/archives/2007/06/the_importance_of_undo.html

También es muy recomendable este artículo en español que comenta algunos de estos aspectos: http://www.nosolousabilidad.com/articulos/orientacion_usuario.htm

Por cierto, si queréis saber quién inventó el Control+Z / Comando+Z en Mac (y no, no fue Bill Gates) os animo a visitar este artículo: el Control+Z