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

Si eres usuario de alguna herramienta compleja de Google, como el Google Mail, o de algún sistema de blogs tipo WordPress o Blogger, no está mal echar un vistazo a este recurso donde puedes aprender cómo usar algunos atajos de teclado para mejorar tu productividad en estas herramientas online. La web está en inglés, pero los atajos se entienden bastante bien: Shorcut Toolbox en Marshable.com

Vía Thinkwasabi.com

Estos días Adobe ha publicado una versión de prueba de 30 días de Photoshop CS3 Extended (descargable desde aquí), una versión que de manera sorprendente anunció en marzo con capacidades ampliadas de vídeo, animación, medición y 3D. Estos días estamos presentando esta versión en un seminario de dos jornadas.

Entre las cosas que más me gustan son las funciones para abrir un vídeo y aplicarle capas de ajuste como si de una capa normal de Photoshop se tratara, o la manera sencilla de abrir un objeto 3D y colocarlo como una capa más en la composición, moviéndolo, integrándolo con el diseño y hasta modificando las texturas (una gozada). Hay un tour de funcionalidades para ver todo esto en el link anterior de la web de Adobe, junto con un tour de las de Photoshop CS3 “estándar”, que la versión Extended incluye. Ahora lo venden para profesionales no sólo del diseño y la fotografía, sino para gente de producción audiovisual, ingenieros y arquitectos, médicos y artistas 3D (Véase esta página en la sección de “View Stories”).

Hasta finales de este mes no es de prever una versión en español, y de todos modos la versión de prueba no la van a traducir al castellano. Pero ya hay sitios de Internet (como este enlace) donde se pueden descargar unos archivitos para hacerlo funcionar al 85% en nuestro idioma. Para descargarlo escribid las letras que os muestran en la página a la izquierda de la casilla de “eingeben:” y pulsad en Download. (Aviso a navegantes: Adobe considera una violación de sus acuerdos de licencia de software realizar esta operación, o sea que mejor realizarla en versiones de prueba pero no en software con licencia).
Nota para usar la traducción para los usuarios de Mac: podéis encontrar la carpeta Required haciendo Control+clic sobre el icono del programa (no de la carpeta) y usando “Mostrar contenido del paquete” para ver sus contenidos. Además, es conveniente cambiar el nombre de la carpeta “Plug-Ins” a “Plugins” y la de “Presets” por “Preajustes Establecidos” dentro de la de Photoshop para que no dejen de funcionar los plugins y los scripts. Con esas directrices podéis probar Photoshop con más facilidad lo que no os manejéis bien en la lengua de Shakespeare….

Ah, y unas páginas interesantes con videotutoriales sobre la nueva versión (desgraciadamente sólo en inglés):

-un taller online que Adobe ha montado sobre Creative Suite, con vídeos, tutoriales y archivos de ejemplo descargable, la CS3 Workshop

-la web del gurú del Photoshop Russelll Brown