Desarrollo Web

La importancia del Head

2011-10-28T00:56:00.000-07:00

Muchos diseñadores suelen pasar por alto la importancia de tres etiquetas del <head> de cara a posicionar nuestra web en servidores:

- title: se recomienda poner el nombre seguido de un guión y el apartado en el que nos encontremos
- meta name="description": aquí pondremos el texto que aparecerá como resultado en las búsquedas realizadas en cualquier buscador
- meta name="keywords": son las palabras clave, es decir aquellas por las que queremos que nos encuentren los usuarios

Crear una hoja de estilo desde Dreamweaver

2011-01-19T22:24:00.000-08:00

El procedimiento para crear hojas de estilo, es bastante sencillo, aunque al principio pudiera parecer complicado.

En un primer momento, en el panel CSS, nos pedirá crear una regla CSS, ( es decir, aplicar por ejemplo estilos a una etiqueta html como puede ser <body> ).
En ese momento, si no tenemos ninguna hoja de estilo creada, nos preguntará si queremos guardar la hoja de estilo en una hoja nueva.

Untitled from Jose Balaguer on Vimeo.

Tecnología Flash vs HTML

2010-11-10T11:02:00.000-08:00

A la hora de desarrollar páginas web, deberemos tener muy claro, en que momento nos interesará desarrollar una página por ejemplo completamente con Flash, o con HTML ( aunque pueda llevar algún contenido de Flash ).

Como un primer criterio práctico deberíamos tener en cuenta la cantidad de información de la página, y si vamos a tener que actualizarla muy a menudo.

Este criterio suele estar estrechamente ligado con el objetivo de la web, es decir, normalmente las webs informativas, en las que lo que predomina es el contenido textual suelen desarrollarse en HTML y con CSS. Una web con un contenido más visual, o promocional puede ser interesante desarrollarla en Flash.

Si por ejemplo nos planteamos que de vez en cuando tendremos que cambiar contenidos o aspectos determinados de la web, pero que pueden repetirse en varias páginas, el echo de trabajar con HTML y CSS nos ahorrará mucho trabajo. Supongamos que debemos cambiar el tamaño y el color de la tipografía de todos los títulos, y en nuestra página gestionamos 200 archivos html. Con un diseño en HTML, lo único que deberíamos cambiar es la parte del archivo de hoja de estilo que afecta a ese punto en concreto:

h1{
font-size:30px;
color: #0188a6;
}

continuará...

Crear una aplicación autoejecutable en Flash CS5

2010-11-02T15:04:00.000-07:00

Adobe Flash, es hoy en día un programa lo suficientemente robusto como para crear aplicaciones profesionales para ejecutar por ejemplo en cd-rom y con autoarranque en Windows.

Lo mínimo que necesitaremos es un archivo con la extensión .exe y un archivo especial llamado autorun.inf. Los grabamos en un cd-rom y nuestra aplicación desarrollada en Flash se ejecutará a pantalla completa al insertar el cd-rom en Windows.

En éste tutorial, veremos los pasos necesarios, y el software de terceros para ampliar el potencial de Flash

leer más...

Opciones de Publicación

Por defecto, flash está programado para generar un archivo html, y un archivo .swf ( small web format ). En principio es normal, puesto que es un programa pensado inicialmente para crear archivos para la web.

Necesitaremos cambiar estas opciones, mediante el menú File > Publish Settings

A partir de este momento, cada vez que publiquemos nuestra película ( File > Publish ) Flash generará un archivo .exe, que es el que necesitaremos para ejecutar en windows.

Principales diferencias respecto al formato web

A la hora de trabajar, por un lado, no vamos a estar tan condicionados por el peso de nuestro archivo, puesto que no dependemos de la velocidad de transmisión de datos de internet.

Por otro lado, el autoejecutable podrá visualizarse en cualquier ordenador con Windows, sin necesidad de que tenga instalado el flash player, puesto que el ejecutable no lo va a pedir.

Tamaño y formato de reproducción del ejecutable

Cuando creamos un archivo para web, siempre deberemos restar el espacio físico que pueda ocupar el navegador, sin embargo, un autoejecutable, lo podemos ejecutar a pantalla completa.

El tamaño dependerá por tanto de la resolución de pantalla que estimemos más apropiada, y para ello podemos servirnos de estadísticas y de páginas como la siguiente:

http://www.w3schools.com/browsers/browsers_display.asp

Reproducir nuestra aplicación a pantalla completa y sin escalado

Normalmente será la mejor opción. No aparecerá ninguna ventana, y el escritorio de nuestra aplicación no será reescalado, de tal manera que mantenemos el control sobre la calidad de las imágenes.

Para conseguir ésto deberemos introducir dos instrucciones en el primer fotograma:

fscommand("fullscreen","true");

fscommand("allowscale","false");

Mucha gente sabe que para salir de una aplicación se puede utilizar la tecla "esc", pero es probable que otra gran parte de nuestro público no lo sepa, por lo tanto es imprescindible poner un botón para salir de la aplicación.

Botón para cerrar la aplicación

La sintaxis de ActionScript es la misma que en versiones anteriores:

fscommand("quit");

Pero deberemos tener en cuenta que ActionScript 3.0 utiliza un nuevo sistema de asignación de eventos, así que si por ejemplo nuestro botón tiene asignado el nombre de instancia cerrar_btn, el código sería el siguiente:

function cerrar(e:MouseEvent):void{

fscommand("quit");

}

cerrar_btn.addEventListener(MouseEvent.CLICK, cerrar);

El código puede ir a continuación de los dos primero fscommand, y como lo normal es que el botón salir esté presente a lo largo de toda la aplicación, podemos ponerlo en una capa justo debajo de la capa Acciones,y con un único fotograma clave, puesto que sólo necesitaremos una instancia.

Crear un archivo autorun.inf

Es el último paso, y necesitaremos un editor de texto plano ( el bloc de notas de Windows es ideal, y en Mac, si utilizamos TextEdit, tendremos que indicarle que sea "texto sin formato" en el menú Format > Make Plain Text )

El archivo autorun es necesario para que al introducir el cd-rom donde tenemos grabada nuestra aplicación, ésta se ejecute. Es un archivo que leerá el sistema operativo y ejecutará las órdenes que contiene, que por otro lado son bien pocas:

[autorun]

open = miAplicacion.exe

icon = miIcono.ico

Una vez escrito esto, lo guardamos con la extensión .inf ( no txt ).

Grabar el cd-rom

Una vez tenemos los archivos, lo único que nos queda es grabarlos en un cd, sin añadir ningún directorio, salvo que por el volúmen de nuestra aplicación tengamos que cargar más archivos.

Si por ejemplo tenemos varios videos para reproducir, lo normal es que en Flash tengamos el reproductor que los cargue directamente. En éste sentido, los podemos tener en la misma carpeta que el ejecutable, y simplemente tendremos que poner el nombre del archivo de video como ruta: ej miVideo.flv

como mínimo tendremos que grabar estos dos archivos en nuestro cd-rom

Aplicaciones de terceros

Si necesitamos algo un poco más completo y profesional, podemos recurrir a las diferentes aplicaciones de terceros que existen en el mercado.

Por ejemplo, cuando una aplicación pesa mucho, tardará en ejecutarse. En éste sentido es interesante añadir un "splash screen" o imágen que nos indica que la aplicación se está cargando ( lo mismo que ocurre cuando ejecutamos Photoshop o Flash ).

Dos programas que pueden resultar interesantes son:

mprojector

Zinc 3

Éste último amplia de forma considerable la funcionalidad de Flash a la hora de realizar aplicaciones. Por ejemplo nos permite conectar con bases de datos, ejecutar archivos en el disco duro, etc.

Objetos según el inspector de propiedades en Flash CS5

2010-11-01T16:04:00.000-07:00

Cuando animamos un objeto en Flash, en realidad lo que hacemos es modificar sus propiedades ( posición en el eje x, canal alpha, rotación, modo de fusión, filtros, etc ).

Por lo tanto, una forma clara de entender todo aquello que podemos modificar en Flash de cara a crear una animación es ver cómo nos los muestra el inspector de propiedades.

Veremos por ejemplo que para poder animar una imagen deberemos incorporarla dentro de un MovieClip o un botón para poder acceder a las propiedades de éstos símbolos que afectarán a todo aquello que contengan.

leer más...

1. Forma vectorial

Existe una animación específica para animar los vectores: la interpolación de forma

En el ejemplo vemos, que Flash distingue entre lo que es el contorno y el relleno ( por ejemplo para hacer máscaras, el contorno no se utiliza.

2. Drawing Object ( Objeto de Dibujo )

Apareció hace unas pocas versiones, para solucionar el problema del solapamiento de formas. En flash por defecto, si dos rellenos vectoriales se solapan, se cortarán ( si tienen diferente color ) o se unirán ( si tienen el mismo.

Cuando tienen contorno, se cortarán aunque tengan el mismo color.

Se puede animar exactamente igual que un vector, con la interpolación de forma o Shape Tween.

Lo único que deberemos tener en cuenta es que si hacemos doble click, entraremos en el modo edición, que puede parecer un poco confuso, puesto que no tiene línea de tiempo propia, como los símbolos, pero la línea de tiempo principal no desaparece.

3. Grupos

Es un tipo de contenedor, que no tiene línea de tiempo ni propiedades. Por ejemplo si queremos realizar una interpolación de forma con un vector agrupado, deberemos eliminar el grupo ( CTRL+B ). Y si queremos realizar una interpolación de movimiento, deberemos convertirlo en símbolo.

Como podemos ver, el inspector de propiedades no nos ofrece ningún parámetro para modificar en un grupo.

Para agrupar uno o varios objetos, podemos utilizar el atajo de teclado ( CTRL+G ). En la práctica, un grupo puede resultar útil para dibujar y evitar el solapamiento de formas, pero igual que con los objetos de dibujo deberemos tener cuidado al hacer doble click, puesto que al no tener línea de tiempo propia, nos puede confundir.

edición de un vector agrupado

4. Texto

En Flash CS5 encontraremos 4 tipos de texto diferentes: Texto clásico, Texto dinámico, Texto de entrada y Texto TLF ( Text Layout Format ). Este último es una de las grandes novedades de la versión CS5 de flash. Ofrece más posibilidades a la hora de maquetar, como por ejemplo la posibilidad de conectar cajas de texto como en Illustrator, o la de crear diferentes columnas dentro de una misma caja de texto

texto clásico

texto dinámico

texto de entrada

Como podemos ver, el texto TLF permite modificar más propiedades que el resto. Al igual que el texto dinámico y el texto de entrada, permite asignarle un nombre de instancia.

5. Símbolos Gráficos

Este tipo de símbolo ofrece más limitaciones que los botones y los Movie Clips o clips de película.

Eso sí, al tratarse de un símbolo, tiene su propia línea de tiempo, y podemos añadirle capas.

En la última versión se le han añadido algunas características como la posibilidad de hacer loop. Pero como podemos observar en el inspector de propiedades, no permite asignarle un nombre de instancia, y por lo tanto no podremos utilizarlo en programación.

6. Botones

Conservan la misma esencia que en las primeras versiones, si bien ahora han aumentado el número de propiedades, y por ejemplo les podemos aplicar filtros y transformaciones 3D. La posibilidad de utilizar MovieClips como botones les ha restado cierto protagonismo a la hora de animar.

Son una buena solución para aplicar una interactividad sencilla de manera rápida.

7. MovieClips

Tienen mayor número de propiedades para animar, y por ejemplo dentro de los filtros, el ajuste de color, nos permitirá variar el color de las diferentes instancias de una manera más efectiva que la antigua opción tinta.

Diferentes instancias de un mismo MovieClip con un filtro de ajuste de color, modificando el valor hue.

Podemos aplicarle las propiedades "useHandCursor" y "buttonMode" para utilizarlos como botones en programación.

8. Imagenes Bitmap

Como podemos ver en el inspector de propiedades, no podemos modificar nada de una imagen, a no ser que la introduzcamos dentro de un símbolo.

9. Fotogramas

El inspector de propiedades también nos permite modificar propiedades de los fotogramas y acceder a los archivos de audio. Desde las primeras versiones de Flash, para acceder a un archivo de audio, debemos seleccionar el fotograma.

Es importante tener en cuenta que si el archivo es grande y queremos reproducirlo en una web, deberemos cargarlo externamente y no incorporarlo a la línea de tiempo.

Un error común es confundir el input de etiqueta de fotograma, con el nombre de instancia

fotograma con un sonido seleccionado. Podemos modificar varias propiedades

10. Motion Tween

Si seleccionamos un fotograma que tenga aplicada una interpolación del tipo Motion Tween, el inspector de propiedades nos mostrará diferentes opciones como por ejemplo el "easing" o velocidad de aceleración o deceleración.

También nos ofrece la posibilidad de rotar el objeto un número determinado de veces, o de grados

11. Clasic Tween

En el caso de la interpolación de movimiento clásica, resulta un poco engañoso, puesto que el inspector de propiedades no nos lo indica, como en el caso anterior, pero si que nos ofrece la posibilidad de modificar diferentes propiedades de la animación.

12. Shape Tween ( interpolación de forma )

Lo mismo ocurre con la interpolación de forma, como podemos observar en el inspector de propiedades, nos indica que tenemos seleccionado un frame, pero nos ofrece la posibilidad de cambiar el easing y el tipo de morphing.

13. Video

El caso del video, también es peculiar, puesto que en realidad lo que nos muestra el inspector de propiedades, son los parámetros del componente FLV Playback, pero lo llama SWF ( la extensión de un archivo de flash publicado, "small web format" ).

Una novedad importante, es que desde el fla, podemos visualizar el video e introducir "cue points".

Material para trabajar en Flash CS5

2010-11-01T14:23:00.000-07:00

Flash nació como una herramienta de animación vectorial para la web, y como tal, las herramientas de creación que ofrecía eran simplemente para dibujar vectores.

Con las últimas versiones y la adquisición por parte de Adobe, vemos que aunque las herramientas de creación vectorial siguen permitiéndonos hacer prácticamente lo mismo que en las primeras versiones, en lo que respecta a las imágenes bitmap y al material importado de otros programas el programa ha mejorado muchísimo.

leer más...

Vectores:

Podemos crearlos directamente con las herramientas de dibujo de Flash, o importarlos de otros programas como Adobe Illustrator, Corel o Freehand.

Si necesitamos un nivel más preciso a la hora de trabajar con vectores podemos crearlos en Illustrator y después importarlos desde Flash, o incluso copiar y pegar.

Con los vectores importados deberemos tener más cuidado, puesto que si se trata de una animación compleja, puede que el peso se dispare. Normalmente para dibujos sencillos un vector pesa menos que una imagen bitmap, pero si la ilustración es compleja, ésta relación se invierte, y puede incluso interesarnos importarla como imagen bitmap

pincha en la imágen para ver a tamaño completo

Cuando importamos un archivo de Illustrator, nos aparecerá un cuadro de menú que nos permite seleccionar aquellas capas, subcapas o grupos que queramos, e incluso importarlos directamente como un símbolo con su nombre de instancia y todo.

Imágenes:

También podemos copiar y pegar, o importar formatos de baja compresión y alta calidad ( TIFF, PSD ) que es lo más recomendable si queremos obtener un resultado final óptimo.

Igual que con Illustrator, al importar archivos .psd, flash nos ofrece un menú con varias posibilidades, como importar las capas que queramos, darle compresión a cada una, e incluso convertirlas en MovieClip.

Tipografías

Es un recurso realmente interesante, puesto que flash nos ofrece la ventaja, de poder mostrar cualquier tipografía, aunque el usuario no la tenga instalada en su sistema ( a diferencia del html ), y por otro lado nos permite aplicarle filtros y otras modificaciones, directamente a la tipografía

Las tipografías, se pueden reducir a vectores ( CTRL + B dos veces si es más de una letra ), con lo que dejarán de ser editables como tales, pero podremos trabajar su diseño de la misma forma que si la hubiéramos dibujado desde Flash.

a la izda tenemos una tipografía y a la derecha, la misma rasterizada

En éste caso, editamos la forma vectorial de la derecha con los puntos de anclaje.

Tipografías Dingbat

Son aquellas tipografías que se componen de símbolos y por tanto un gran recurso a la hora de diseñar, puesto que siempre las podremos pasar a vectoriales.

Hay una gran cantidad de webs donde podemos obtener dingbats gratuitas, y entre ellas:

http://www.dafont.com

Merece la pena darle un vistazo.

Vídeo

Lo habitual en Flash es que el vídeo se reproduzca como un archivo externo, de tal manera que nuestra película llamará al vídeo para que se reproduzca en descarga progresiva.

En algunos casos, como por ejemplo vídeos cortos para reproducir en un ejecutable, podemos importarlo dentro de la línea de tiempo, pero siempre será recomendable testear la aplicación para asegurarnos de que el tiempo de arranque es aceptable.

Símbolos

Flash utiliza 3 tipos de símbolos: gráficos, botones y MovieClips. Respecto a los dos últimos podemos modificar sus propiedades, aplicarles filtros, modos de fusión de capa, transformación en 3D, etc.

De esta forma, si queremos por ejemplo aplicar un filtro de color a una imagen bitmap, sólo tendremos que introducirla dentro de un MovieClip y aplicarle un filtro. Lo mismo sería aplicable a un vídeo, aunque lo reproduzcamos de forma externa en descarga progresiva o en streaming.

Si nos fijamos en el inspector de propiedades, veremos que no hay filtros que aplicar ni propiedades que podamos modificar en una imagen.

Sin embargo, si introducimos la imagen en un símbolo ( F8 - Modificar > Convertir en Símbolo ), el inspector de propiedades mostrará el siguiente aspecto:

Como se puede observar, ahora si que podemos modificar la posición 3D, el efecto de color que incluye el canal alfa ( transparencia ), el modo display, que incluye los modos de fusión de capa ( igual que en Photoshop ) y los filtros.

En el ejemplo vemos una imagen bitmap ( en concreto formato TIFF con canal alfa importado a Flash ) y a la derecha, la misma imagen dentro de un MovieClip. Esto nos ha permitido aplicarle un filtro Glow, otro de Sombra y otro de ajuste de Color.

Como se puede observar, los filtros en Flash tienen muy buena calidad. Por otro lado hay que tener en cuenta que podremos animar los diferentes parámetros del filtro.

Pinceles y otros recursos de diseño gratis

2010-06-30T05:17:00.000-07:00

En Fudge Graphics, podemos encontrar, además de unos estupendos diseños para inspirarnos, pinceles, vectores, texturas y una serie de tutoriales interesantes, como por ejemplo cómo obtener el esquema de color de una fotografía

http://www.fudgegraphics.com

Brush Pilot, visualiza pinceles de Photoshop sin cargarlos

2010-06-30T03:14:00.000-07:00

Aplicación muy interesante, que nos permite hacer un preview de nuestros pinceles sin tener que cargarlos.
Otra función interesante que tiene, es que cuando lo cargamos encuentra de forma automática todos los archivos de pincel ( .abr ) que tengamos en el sistema.

http://www.brushpilotapp.com/

Por otro lado aunque es un software barato, en The Mac Bundles podemos comprarlo por 4.40 €, o dentro de algún paquete de aplicaciones que suelen ofrecer de vez en cuando.

Introducción a Papervision 3D

2010-05-10T04:55:00.000-07:00

Papervision 3D empezó como un paquete de clases ( creado por Carlos Ulloa ) que nos permitían crear objetos 3D para visualizarlos en flash player. El proyecto pronto captó el interés de otros desarrolladores y empresas. Hoy en día ya tenemos varios programas de modelado 3D que nos permiten exportar con la extensión .DAE ( collada ) para luego poder importar el objeto directamente en flash mediante el componente que se ha creado a tal efecto.

Por otro lado, empresas como electric rain, y freeSpin3D están avanzando en el tema y ya podemos sacar algunas cosas interesantes.

i tenemos en cuenta otros antecedentes de visualización de 3D en la web como lo fué en su día el formato VRML, personalmente opino que como desarrolladores de flash deberíamos centrarnos en dominar la interactividad, puesto que el modelado ya lo podemos desarrollar en programas destinados a tal efecto. Eso no impide que para proyectos con primitivas sencillas, las creemos directamente mediante código.

leer más...

A la hora de trabajar con PaperVision 3D, lo primero que deberemos hacer es descargarnos los archivos fuente, que podemos encontrar en la página de google code: http://code.google.com/p/papervision3d/.

También podemos descargar el componente para flash, que nos permitirá importar archivos en formato .DAE.

Elementos principales usados en Papervision

1. SCENE: contiene todos los objetos que queremos que ser rendericen en pantalla, los elementos se posicionan en la escena de la misma manera que lo harían en el Stage, pero estableciendo las propiedades x, y, z.

2. VIEWPORT: es una región rectangular donde se dibuja todo el contenido. Es esencialmente la ventana a nuestro mundo 3D. En Papervision, el viewPort es un Sprite donde todo el contenido de la escena se dibuja. Por defecto tendrá el tamaño del escenario, pero se puede redimensionar, e incluso tener varios en una misma escena ( por ejemplo para juegos multiusuario )

3. RENDERER: es el encargado de dibujar los datos del ViewPort, según la perspectiva de la cámara.

4. CAMERA: básicamente el ojo del usuario. A efectos de interactividad nos interesa que se puede manipular la rotación, la posición el zoom y el focus, para crear varios elementos visuales. Podemos trabajar al igual que con otros objetos del tipo DisplayObject3D con las propiedades x, y, z.

Objetos en Papervision 3D

Son del tipo DisplayObject3D, y van desde simples primitivas hasta campos de partículas.

1. PRIMITIVAS: Cube, Plane, Sphere, Cone, Cylinder

2. COLLADA: Es un estándar xml utilizado para compartir datos entre aplicaciones 3D. En Papervision se ha escogido este formato por su compatibilidad con diferentes softwares de modelado 3D que tienen la posibilidad de exportarlo.

3. MATERIALES: necesarios para mapear texturas. Se pueden obtener desde el propio escenario de Flash, la biblioteca o incluso podemos cargar archivos externos.

- ColorMaterial
-BitmapMaterial
- MovieMaterial
- ShadedMaterials ( Flat, Gouraud, Phong, Cell )
- Interactivity: InteractiveSceneManager utiliza un Mouse virtual que lanza eventos a los objetos MovieMaterial, esto permite añadir botones, componenetes, etc.

Interactividad

Añadiendo un InteractiveScene3DEvent y un PV3D handler a un objeto, lo podemos dotar de interactividad.

Crear una primitiva simple

Utilizaremos un archivo de clase, para crear una esfera. En primer lugar nombraremos a nuestra clase PV3DSphere, y haremos que extienda a la clase Sprite para ponerla como clase base de nuestro fla.

public class PV3DSphere extends Sprite

Como vimos antes, hay una serie de elementos que nunca pueden faltar en nuestra escena de papervision, así que tendremos que importarlos antes de la declaración de clase:

import org.papervision3d.view.Viewport3D;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.cameras.Camera3D;

import org.papervision3d.materials.WireframeMaterial;

import org.papervision3d.objects.primitives.*;

import org.papervision3d.render.BasicRenderEngine;

Una vez importados, después de la declaración de clase, y antes de la función constructora, creamos las diferentes instancias

private var viewport: Viewport3D;

private var scene: Scene3D;

private var camera: Camera3D;

private var wireframeMaterial: WireframeMaterial;

private var sphere: Sphere;

private var renderer: BasicRenderEngine;

Y, por último en la función constructora vamos creando los diferentes elementos:

//viewport = new BasicRenderEngine(width, height, scaleToStage, interactive);

viewport = new Viewport3D(550, 400, false, true);

addChild(viewport);

//instanciamos una escena 3D

scene = new Scene3D();

//creamos también una instancia de camera 3D

camera = new Camera3D();

//el renderer será el encargado de dibujar los objetos en la escena

renderer = new BasicRenderEngine();

//es el material más básico. La propiedad dobuleSided nos permitirá que se dibuje en las dos caras

wireframeMaterial = new WireframeMaterial(0x333333);

wireframeMaterial.doubleSided = true;

//sphere = new Sphere(material applied to object, radius, wSegments, hSegments);

sphere = new Sphere(wireframeMaterial, 250, 12, 12);

scene.addChild(sphere);

Por último para que se renderice, necesitamos aplicar la acción dentro de un evento ENTER_FRAME, puesto que continuamente se tiene que estar redibujando. Aprovechamos el mismo evento para dar movimiento a la esfera

//añadimos en EventListener para el EnterFrame

addEventListener(Event.ENTER_FRAME, onEnterFrame);

//La función que se ejecute con el ENTER_FRAME, nos servirá para hacer el render ( esto siempre ) y dar un poco de interactividad o movimiento

function onEnterFrame(e:Event):void

{

sphere.rotationY += 2;

renderer.renderScene(scene, camera, viewport);

}

Código final

package{

import flash.display.Sprite;

import flash.events.Event;

import org.papervision3d.view.Viewport3D;

import org.papervision3d.scenes.Scene3D;

import org.papervision3d.cameras.Camera3D;

import org.papervision3d.materials.WireframeMaterial;

import org.papervision3d.objects.primitives.*;

import org.papervision3d.render.BasicRenderEngine;

public class PV3DSphere extends Sprite

{

private var viewport: Viewport3D;

private var scene: Scene3D;

private var camera: Camera3D;

private var wireframeMaterial: WireframeMaterial;

private var sphere: Sphere;

private var renderer: BasicRenderEngine;

public function PV3DSphere():void

{

//viewport = new BasicRenderEngine(width, height, scaleToStage, interactive);

viewport = new Viewport3D(550, 400, false, true);

addChild(viewport);

//instantiates a Scene3D instance

scene = new Scene3D();

//instantiates a Camera3D instance

camera = new Camera3D();

//renderer draws the scene to the stage

renderer = new BasicRenderEngine();

//WireframeMaterial, doubleSided draws the color on both sides of the geometry normals

wireframeMaterial = new WireframeMaterial(0x333333);

wireframeMaterial.doubleSided = true;

//sphere = new Sphere(material applied to object, radius, wSegments, hSegments);

sphere = new Sphere(wireframeMaterial, 250, 12, 12);

scene.addChild(sphere);

//añadimos en EventListener para el EnterFrame

addEventListener(Event.ENTER_FRAME, onEnterFrame);

//La función que se ejecute con el ENTER_FRAME, nos servirá para hacer el render ( esto siempre ) y dar un poco de interactividad o movimiento

function onEnterFrame(e:Event):void

{

sphere.rotationY += 2;

renderer.renderScene(scene, camera, viewport);

}

Las propiedades target y currentTarget en ActionScript 3.0

2010-05-06T03:29:00.000-07:00

Con el nuevo sistema de gestión de eventos que incorpora AS 3.0, tenemos acceso a una serie de propiedades que nos pueden hacer la vida mucho más fácil.

Los eventos tienen entre sus propiedades, la propiedad target, y currentTarget. De ésta manera cuando creamos una función para que sea ejecutada mediante un evento, siempre nos pide un único parámetro, que es el tipo de evento ante la que se va a ejecturar. Por ejemplo

function avanzar(e:MouseEvent):void{
play();
}
play_btn.addEventListener(MouseEvent.CLICK, avanzar );

A través del parámetro que hemos introducido ( en nuestro caso lo hemos llamado "e" pero encontraréis muchos casos en los que se le llama "evt" o incluso "event" ), podemos conseguir diversos objetivos.

leer más...

Utilizar la propiedad target para escribir menos código

supongamos que tenemos diez MovieClip en escena, y queremos que al hacer "click" en cada uno de ellos su propiedad visible se ponga en false.

En lugar de crear 10 funciones, podemos crear una, que utilice la propiedad target:

function desactivar(e:MouseEvent):void{
e.target.visible = false;
}
conatiner.addEventListener(MouseEvent.CLICK, desactivar);

Para ello, lo que hemos hecho es meter los diez MovieClips dentro de otro MovieClip que se llama container. El eventListener se lo asignamos a container, pero la propiedad target apuntará a cualquier objeto clicable que esté dentro de container.

Si por ejemplo añadimos dos vectores dentro del MovieClip container, el resultado cambiará:

Si ahora hacemos click en alguna de las bolas azules, el que se volverá invisible será todo el MovieClip container, puesto que las bolas azules son vectores ( por lo tanto no son susceptibles de ser target ) y se considerará que estamos clickando en un área de container.

e.target as MovieClip

Podemos utilizar también esta expresión, en la que especificaremos el tipo de objeto que será el target, para el ejemplo convertimos una de las bolas azules en botón, y veremos que funciona con todos menos con el botón

function desactivar(e:MouseEvent):void{
( e.target as MovieClip).alpha = .5;
}
container.addEventListener(MouseEvent.CLICK, desactivar);

Al clicar en el botón nos dará el siguiente error: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo.

Para este caso, podríamos utilizar la siguiente solución:

function desactivar(e:MouseEvent):void{
( e.target as MovieClip || e.target as SimpleButton).alpha = .5;
}
container.addEventListener(MouseEvent.CLICK, desactivar);

Esta propiedad es más fácil de entender, puesto que siempre se va a referir al objeto al que le asignamos el addEventListener. Utilizando la propiedad target y currentTarget, con una sola función podríamos estar ejecutando acciones para varios objetos.

e.currentTarget

Siguiendo con el ejemplo si provamos la siguiente función veremos que todos los MovieClips reducen su alfa al 50%, pero sólo aquel en el que clicamos se hace invisible

function desactivar(e:MouseEvent):void{
e.currentTarget.alpha = .5;
e.target.visible = false;
}
container.addEventListener(MouseEvent.CLICK, desactivar);

Particularidades

Debemos tener en cuenta, que según el tipo de evento que tengamos, estas dos propiedades pueden responder de manera distinta. No es lo mismo hacer un CLICK que asignar un evento mediante la función COMPLETE. Por ejemplo si cargamos una foto con un Loader, el evento se lo asignamos a la propiedad contentLoaderInfo:

var ld:Loader = new Loader();
var req:URLRequest = new URLRequest("target2.jpeg");
ld.load(req);

function completado(e:Event):void{
trace(e.target);
trace(e.currentTarget);
}
ld.contentLoaderInfo.addEventListener(Event.COMPLETE, completado );

En éste caso el resultado será el mismo

Para un CLICK o un MOUSE_DOWN, la respuesta cambia, como podemos ver en el gráfico:

Aplicar acciones a diversos símbolos

Para el caso de que queramos aprovechar la propiedad target, pero aplicar diferentes acciones según el típo de símbolo que tengamos, la solución pasaría por introducir un condicional:

function esconder(e:MouseEvent):void{

if(e.target as MovieClip){
e.target.visible = false;
}else{
e.target.rotation = 40;
}
}

contenedor.addEventListener(MouseEvent.CLICK,esconder);

Video en Flash CS5

2010-05-05T09:00:00.000-07:00

Una de las novedades que aporta Flash CS5, es la posibilidad de editar video directamente en el escenario de nuestra película.

Por otro lado, mediante la introducción de los "code snippets" tendremos a mano las acciones básicas para reproducir un vídeo.

Si necesitamos transcodificar el vídeo a formato flv, f4v o H.264 lo haremos igual que siempre mediante el Adobe Media Encoder CS5

leer más...

En primer lugar seleccionamos nuestro archivo fuente

Respecto a los parámetros de codificación del vídeo, para la mayoría de los casos, con los Ajustes predeterminados que trae el programa, tendremos de sobra

De todas maneras, si queremos personalizar cualquier ajuste, o añadir "cue points" o puntos de navegación activaremos la ventana con el botón Ajustes situado en la parte derecha

Una vez dentro, nos saldrá una ventana como ésta

La parte de la izquierda está destinada a los cue points y a algún ajuste adicional como por ejemplo recortar el vídeo ( sólo se me ocurre para el caso de las bandas negras ), y la parte derecha a los diferentes ajustes de video y audio.

Añadir Cue Points

Los Cue Point son como marcadores para la navegación, supongamos que yo quiero que mi película tenga 3 escenas, como si de un DVD se tratase, pues en ese caso añadiré un cue point en cada punto inicial de la escena .

Una vez añadidos, todos los skins del FLVPlayback tienen botones para navegar entre los cue points, y por otro lado, mediante ActionScript también lo podremos hacer

Una vez tenemos nuestro vídeo, lo importamos a Flash, y la primera diferencia que notaremos es que el vídeo se puede visualizar en modo de edición desde el propio fla.

Por otro lado, en el panel de propiedades tenemos toda la información referente al video. No hace falta el inspector de componentes, puesto que ahora toda la información relativa al video la podemos modificar desde aquí.

Por ejemplo podemos añadir cue points de ActionScript desde el mismo inspector de propiedades. En nuesto video hemos añadido uno que se llama esquiador. Ahora lo que haremos es crear un botón para que nos lleve a ese punto concreto.

Para añadir un cue point, basta con movernos con la barra de tiempo del reproductor e irnos al punto donde queremos insertarlo. Una vez allí le damos al botón más de la parte inferior del inspector de propiedades

Ahora, la gran novedad, es que no necesitamos escribir mucho código para crear la navegación por los diferentes cue points. Simplemente nos vamos a ventana > Code Snippets y una de las carpetas contiene las acciones básicas para trabajar con audio y video.

Para aplicar un snippet de código simplemente seleccionamos la instancia a la que se lo queremos aplicar, y hacemos doble cick en el nombre de la acción. El resultado es el siguiente:

/* Click to Seek to Cue Point (Requires FLVPlayback component)
Clicking on the specified symbol instance seeks to a cue point of the video in the specified FLVPlayback component instance.

Instructions:
1. Replace video_instance_name below with the instance name of the FLVPlayback component that you want to seek.
2. Replace "Cue Point 1" below with the name of the cue point to seek to. Keep the quotation marks ("").
*/

button_1.addEventListener(MouseEvent.CLICK, fl_ClickToSeekToCuePoint);

function fl_ClickToSeekToCuePoint(event:MouseEvent):void
{
    // Replace video_instance_name with the instance name of the video component.
    // Replace "Cue Point 1" with the name of the cue point to seek to.
    var cuePointInstance:Object = myVideo.findCuePoint("esquiador");
    myVideo.seek(cuePointInstance.time);
}

Como podemos observar, nos vienen unas instrucciones bastante bien detalladas, simplemente deberemos cambiar el nombre de instancia "video_instance_name" por el que le hayamos puesto a nuestro FLVPlayback, y poner el nombre del cue point en lugar de "Cue Point 1"

Crear un control de volúmen en ActionScript 3.0

2010-05-05T08:06:00.000-07:00

Veíamos en un post anterior, que mediante el objeto SoundTransform controlamos el volúmen de un sonido. Para hacer una barra de volúmen como en la mayoría de players, lo que haremos es asociar la propiedad x del objeto que haga de pestaña deslizante, con la propiedad volume del objeto SoundTransform.

El único problema, es que por motivos de diseño, la barra deslizante puede tener un recorrido de 100 o 200 píxeles, y el volúmen en AS3 tiene un valor que va de 0 a 1

Crear una barra deslizadora

Para crear una barra deslizadora, utilizaremos la función startDrag, pero con todos sus parámetros: en primer lugar nos pide si queremos bloquear el objeto en el centro, normalmente pondremos "false", porque esto nos permite que funcione si arrastramos desde una esquina de la pestaña y el objeto no coloque su centro de coordenadas en el punto del mouse.

En segundo lugar nos pide que le indiquemos los límites, pero se los debemos proporcionar en el formato Rectangle que es una clase dentro de la ruta flash.geom. En realidad no es nada complicado, puesto que la clase rectangle se utiliza para almacenar cuatro coordenadas ( x, y, anchura y altura ).

var rect:Rectangle = new Rectangle(0,0,200,0);

e.target.startDrag(false, rect);

Para que nos funcione la barra deslizadora, la pestaña debe estar dentro de un MovieClip, para así aprovechar las coordenadas locales del MovieClip y no las del Stage. Así que creamos un MovieClip que se llame pestaña, y luego lo metemos dentro de otro que se llame por ejemplo slider.

El MovieClip Slider está compuesto de una línea horizontal ( un vector ) y de un MovieClip ( pestaña ) que queremos que se pueda arrastrar en horizontal durante 200 píxeles. La acción se la podemos asignar tranquilamente a slider, y usar la propiedad e.target ( que en éste caso será "pestaña" puesto que es el único que hay ).

function arrastrar(e:MouseEvent):void{

var rect:Rectangle = new Rectangle(0,0,200,0);

e.target.startDrag(false,rect);

}

slider.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);

Para que funcione correctamente tenemos que crear el símbolo slider con el punto de registro en la izquierda. Esto hará que el valor 0 del eje de coordenadas esté en la izquierda.

Asociar la propiedad x con la propiedad volume

Una vez tenemos la pestaña con la función startDrag, ésta se podrá arrastrar de tal manera que su propiedad x tendrá un valor que irá entre 0 y 200, para poder aplicarlo al volúmen lo dividiremos entre 200 para obtener un valor que va de 0 a 1. Podemos crear un campo de texto para visualizar el volúmen:

nuevoVolumen = slider.pt.x/200; // la pestaña tiene el nombre de instancia pt

info_txt.text = String(nuevoVolumen);

myTransform.volume = nuevoVolumen;

sch.soundTransform = myTransform;

Como comentaba anteriormente, una vez cambiamos la propiedad volume, deberemos volver a asignar el objeto SoundTransform a la propiedad soundTransform del objeto SoundChannel como hacemos el la última línea.

Por último deberemos tener en cuenta, que para que esté continuamente funcionando, estas acciones deberán ejecutarse mediante un ENTER_FRAME

A continuación os dejo el código completo del ejercicio

var so:Sound = new Sound();
var sch:SoundChannel = new SoundChannel();
var myTransform = new SoundTransform();
var req:URLRequest = new URLRequest("bomb.mp3");
so.load(req);

sch = so.play();
myTransform.volume = 0.2;
sch.soundTransform = myTransform;

var posicion:Number = 0;
function mute(e:MouseEvent):void{
posicion = sch.position;
sch.stop();
}

mute_btn.addEventListener(MouseEvent.CLICK, mute);

function reproducir(e:MouseEvent):void{
sch = so.play(posicion);
}

play_btn.addEventListener(MouseEvent.CLICK, reproducir);
function volumenTope(e:MouseEvent):void{
myTransform.volume = 1;
sch.soundTransform = myTransform;
}

stage.addEventListener(MouseEvent.CLICK, volumenTope);

// sound complete

sch.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
function soundCompleteHandler(e:Event):void {
trace("ya está");
posicion = 0;
sch = so.play(posicion);
}

var tiempo:Number = 0;
function tempo(e:Event):void{
tiempo = (Math.round(sch.position));
tiempo = tiempo/1000;
time_txt.text = String(tiempo);
}

stage.addEventListener(Event.ENTER_FRAME, tempo);

function arrastrar(e:MouseEvent):void{
var rect:Rectangle = new Rectangle(0,0,200,0);
e.target.startDrag(false,rect);
}

function soltar(e:MouseEvent):void{
stopDrag();
}

slider.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);
slider.addEventListener(MouseEvent.MOUSE_UP, soltar);

var nuevoVolumen:Number = 0;
function modificarSonido(e:Event):void{
nuevoVolumen = slider.pt.x/200;
info_txt.text = String(nuevoVolumen);
myTransform.volume = nuevoVolumen;
sch.soundTransform = myTransform;

}

stage.addEventListener(Event.ENTER_FRAME, modificarSonido);

Reproducir Sonidos en ActionScript 3.0

2010-05-04T09:23:00.000-07:00

Cuando reproducimos sonido en la web, la idea que debemos tener clara, es que normalmente el archivo de sonido se cargará externamente ( nunca lo incorporaremos a la línea de tiempo, salvo que sea un efecto de sonido muy corto, y que pese poco ).

Al cargarse externamente, el archivo de audio se reproducirá por descarga progresiva, es decir que no hará falta que se haya descargado totalmente el archivo para que podamos empezar a escucharlo. El formato será mp3.

En la última versión de ActionScript, el tema del sonido se ha modificado bastante. Los que recuerden AS 2.0 estarán familiarizados con la clase Sound, que era la que nos permitía hacer todas las operaciones básicas con sonidos.

En la última versión de ActionScript, se han creado varias clases que complementan a la clase Sound. Por un lado esto hace que sea más complicado reproducir un archivo de audio, pero por el otro nos da muchas más posibilidades, como por ejemplo hacer un espectro de sonido, cosa impensable en la versión anterior de ActionScript

leer más...

Las clases relacionadas con el sonido

Los sonidos en AS 3.0 se manipulan mediante varias clases que trabajará juntas, esto nos dará mayor control y habilidad para manejar sonidos. Las clases más relevantes para trabajar con sonido son:

Sound: es la clase principal y el punto de partida para reproducir un archivo de audio.

SoundChannel: un archivo de audio se podrá reproducir a través de esta clase, lo que nos permitirá proporcionar controles adicionales, como por ej. detener y continuar la reproducción

SoundTransform: esta clase se utiliza para controlar el sonido y el balance ( propiedad pan )

SoundMixer: esta clase tiene un control global sobre todos los sonidos que se reproducen en flash. Su función más básica es la de detener todos los sonidos independientemente de la fuente de donde vengan.

SoundLoaderContext: básicamente tiene la función de establecer el "buffer time" o número de milisegundos que se tarda en precargar un flujo de sonido en un buffer

A continuación veremos ejemplos para cargar y reproducir un sonido.

Reproducir un sonido importado en Flash

Aunque no es lo recomendable, puede haber casos en los que nos interese importar un sonido aunque estemos trabajando para web ( por ejemplo un efecto de sonido corto, un sonido de disparo para un juego, una explosión, etc ), y puede haber otros casos en los que estemos desarrollando un cd y nos interese incorporarlo en la línea de tiempo para que no se pueda tener acceso a él desde fuera.

Lo primero que haremos es importar el sonido a la bibliotecca

Una vez importado, nos aparecerá en la biblioteca, y podremos reproducirlo y ver el espectro de sonido

Si hacemos click con el botón derecho, accederemos a un desplegable; hacemos click en la última opción que es propiedades, y nos aparecerá un cuadro de menú como el siguiente:

Igual que para importar otros objetos desde la biblioteca, activamos la opción exportar para ActionScript, y ponemos un nombre de clase. Este nombre nos servirá para crear instancias de ese sonido. Si nos fijamos la clase base seguirá siendo flash.media.Sound. Al darle a aceptar nos saldrá un mensaje de advertencia que simplemente nos informa de que va a crear la clase MiSonido, le damos a ok

var so:Sound = new MiSonido();

so.play();

Si nos fijamos al crear una instancia, la sintaxis varía un poco respecto a la regla general, en la parte de la izquierda indicamos como tipo de datos Sound, pero en la derecha especificamos el nombre de nuestra clase, en éste caso MiSonido();

Reproducir un archivo de audio externo

En muchos casos será la opción más apropiada para la web. Lo que haremos es cargar el sonido mediante el método load que incorpora la clase Sound.

var mySound:Sound = new Sound();
var req:URLRequest = new URLRequest("elfari.mp3");
mySound.load(req);
mySound.play();

Como en todos los casos en los que hacemos un load, la ruta la debemos incluir en una instancia del objeto URLRequest ( la única excepción es la propiedad source de algunos componentes, que nos permite poner directamente la ruta ).

Detener un sonido

Esta sería otra de las tareas básicas a la hora de trabajar con audio, pues bien, la clase Sound no tiene ningún método para detener un sonido.

Deberemos usar la clase SoundChannel para hacer un stop(). Los métodos y propiedades más interesantes de esta clase son:

stop( )
position( ): nos da el tiempo de reproducción en el que se encuentra
soundTransform: la usaremos para poder manipular el volumen y el balance

Por lo tanto, ahora modificaremos un poco el código anterior, para dar cabida al nuevo objeto:

var mySound:Sound = new Sound();

var myChannel:SoundChannel = new SoundChannel();

var req:URLRequest = new URLRequest("Thunderstruck.mp3");

mySound.load(req);

myChannel = mySound.play();

La instancia de SoundChannel se crea igual que cualquier otra clase. Lo más importante en éste caso es la última línea, en la que en vez de poner mySoundPlay, éste método lo incorporamos dentro de la instancia que hemos creado de SoundChannel.

Ahora para detener el sonido, haremos como si el sonido fuese la instancia de SoundChannel

function pararSonido(e:MouseEvent):void{

myChannel.stop();

}

parar_btn.addEventListener(MouseEvent.CLICK, pararSonido );

y para volver a reproducir, simplemente tendremos que volver a ejecutar la línea en la que ejectuábamos el método play, pero dentro de una función para asignársela a un botón.

function reproducir(e:MouseEvent):void{

myChannel = mySound.play();

}

reproducir_btn.addEventListener(MouseEvent.CLICK, reproducir );

Pero como podemos ver, el problema es que siempre que detenemos un sonido, vuelve al principio

Pausar un sonido

Para solucionar este tema, utilizaremos la propiedad position del objeto SoundChannel y la guardaremos en una variable. Cuando ejecutamos el método play, como primer parámetro le podemos indicar el punto donde queremos que empiece la reproducción.

var mySound:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();
var req:URLRequest = new URLRequest("Thunderstruck.mp3");
mySound.load(req);
myChannel = mySound.play();

var posicion:Number = 0;
function pausar(e:MouseEvent):void{
posicion = myChannel.position;
myChannel.stop();

}
parar_btn.addEventListener(MouseEvent.CLICK, pausar );

function reproducir(e:MouseEvent):void{
myChannel = mySound.play(posicion);
}
reproducir_btn.addEventListener(MouseEvent.CLICK, reproducir );

Cambiar el volumen

Para este caso ya deberemos utilizar el objeto SoundTransform, y lo asignaremos a la propiedad soundTransform del objeto SoundChannel.

El objeto SoundTransform tiene la propiedad volume cuyo valor va de 0 a 1 como en la mayoría de los casos. Para modificar el volúmen, simplemente asignaremos un valor a ésta propiedad, y luego asignaremos la instancia de SoundTransform a la propiedad soundTransform del objeto SoundChannel.

Es algo parecido a la relación que hay entre el objeto TextField y el objeto TextFormat. Siempre que modificamos una propiedad de TextFormat, tenemos que volver a asignársela al campo de texto:
myTextField.setTextFormat(TextFormat). Con el volúmen pasaría algo parecido:

myTransform.volume = 0.5;

myChannel.soundTransform = myTransform;

var mySound:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();
var myTransform = new SoundTransform();
var lastPosition:Number = 0;
mySound.load(new URLRequest("myFavSong.mp3"));
myChannel = mySound.play();
myTransform.volume = 0.5;
myChannel.soundTransform = myTransform;

pause_btn.addEventListener(MouseEvent.CLICK, onClickPause);

function onClickPause(e:MouseEvent):void{
lastPosition = myChannel.position;
myChannel.stop();
}

play_btn.addEventListener(MouseEvent.CLICK, onClickPlay);

function onClickPlay(e:MouseEvent):void{
myChannel = mySound.play(lastPosition);
myChannel.soundTransform = myTransform;
}

Adobe Creatvie Suite 5 disponible para descarga

2010-05-03T03:41:00.000-07:00

Ya podemos descargar Adobe Creative Suite 5 ( en inglés )

Además de las mejoras de rendimiento y el soporte nativo de 64 bits en Photoshop por primera vez en Mac (para ello Adobe ha tenido que rehacer la aplicación desde cero en Cocoa), las aplicaciones de la CS5 cuentan con más de 250 nuevas características que nos harán la vida más facil a diseñadores, creativos y demás profesionales del mundo de la imagen y el vídeo profesional.

Las versiones de prueba pueden descargarse desde la propia web de Adobe aunque en este momento solo están disponibles en inglés. Así, encontraréis enlaces para descargar la Creative Suite 5 Design Premium (3,5 GB en Mac, 2,84 en Windows) y la Master Collection (5,62 GB frente a 4,45 GB) junto a descargas de aplicaciones individuales como Photoshop CS5 Extended (1,14 GB frente a 979,9 MB), la versión con capacidad para trabajar con imágenes 3D y contenido de vídeo.

Descarga | Adobe Creative Suite 5

Flash Bookmarks. Toda la información sobre tecnologías flash en una web

2010-04-28T10:48:00.000-07:00

Adobe Flash hoy en día más que un programa es una tecnología que incluye varios programas o disciplinas, desde la animación al estilo "cartoooning, a la interactividad mediante trigonometría, pasando por clases de terceros, papervision, Flex, etc.

En esta web tenemos a nuestra disposición toda la información y más sobre los diferentes temas de los que hablamos, en el desplegable de la derecha, justo debajo del logo tenemos acceso a los diferentes apartados:
3d, papervision, blogs, air, premios, inspiración, motores de partículas, clases de terceros, etc.

Clases principales de visualización

2010-04-27T04:45:00.000-07:00

En la versión 3.0 de ActionScript aparecen nuevos objetos ( clases ) que antes no existían. Básicamente en lo que respecta a aquellos objetos que podemos crear en entorno de edición, no cambia mucho: Movie Clips, botones, símbolos gráficos ( con alguna novedad pero de poca relevancia ) y campos de texto.

Donde realmente cambia la cosa es en lo que respecta a los objetos que podemos crear por programación. El Display List o lista de visualización quedaría configurado de la siguiente manera:

pincha en el gráfico para verlo a tamaño completo

Puede resultar un poco confuso, pero a continuación ofrecemos un listado de cada uno de esos objetos.

En la ilustración se muestra la herencia de clases de las clases principales de visualización. Debe tenerse en cuenta que algunas de estas clases, en concreto, StaticText, TextField y Video, no se encuentran en el paquete flash.display pero también heredan de la clase DisplayObject.

Todas las clases que amplían la clase DisplayObject heredan sus métodos y propiedades.

Pueden crearse instancias de las siguientes clases contenidas en el paquete flash.display

Bitmap: la clase Bitmap se usa para definir objetos de mapa de bits cargados de archivos externos o representados a través de ActionScript. Para cargar mapas de bits de archivos externos, se puede usar la clase Loader. Se pueden cargar archivos GIF, JPG o PNG. También es posible crear un objeto BitmapData con datos personalizados y crear a continuación un objeto Bitmap que utilice dichos datos. Se pueden usar los métodos de la clase BitmapData para modificar mapas de bits, tanto si se cargan como si se crean en ActionScript.

Loader: la clase Loader se usa para cargar activos externos (archivos SWF o gráficos).

Shape: la clase Shape se usa para crear gráficos vectoriales como rectángulos, líneas, círculos, etc. Para obtener más información, hay que mirar la documentación de la API de dibujo.

SimpleButton. Un objeto SimpleButton es la representación de ActionScript de un símbolo de botón creado en la herramienta de edición de Flash. Una instancia de SimpleButton dispone de cuatro estados de botón: up (arriba), down (abajo), over (sobre) y hit test (prueba de zona activa) (el área que responde a eventos de teclado y ratón).

Sprite: un objeto Sprite puede contener gráficos propios y también objetos de visualización secundarios. La clase Sprite amplía la clase DisplayObjectContainer.

MovieClip: un objeto MovieClip es la representación en ActionScript de un símbolo de clip de película creado en la herramienta de edición de Flash. En la práctica, un MovieClip es similar a un objeto Sprite, excepto en que tiene además una línea de tiempo.

Las siguientes clases, que no se encuentran en el paquete flash.display, son subclases de la clase DisplayObject:

La clase TextField, incluida en el paquete flash.text, es un objeto de visualización para mostrar e introducir texto.

La clase Video, incluida en el paquete flash.media, es el objeto de visualización que se utiliza para mostrar archivos de vídeo.

Otras clases del paquete flash.display pero que no se pueden instanciar

Las siguientes clases del paquete flash.display amplían la clase DisplayObject, pero no es posible crear instancias de las mismas. En lugar de eso, actúan como clases principales de otros objetos de visualización y combinan la funcionalidad común en una sola clase.

AVM1Movie: la clase AVM1Movie se usa para representar los archivos SWF cargados que se crearon en ActionScript 1.0 y 2.0.

DisplayObjectContainer: las clases Loader, Stage, Sprite y MovieClip amplían la clase DisplayObjectContainer.

InteractiveObject: InteractiveObject es la clase base de todos los objetos y se utiliza para interactuar con el ratón y el teclado. Los objetos SimpleButton, TextField, Loader, Sprite, Stage y MovieClip son subclases de la clase InteractiveObject. Para obtener más información sobre la creación de interacción de teclado y ratón, consultar Captura de entradas del usuario, en la ayuda de Flash.

MorphShape: estos objetos se crean al crear una interpolación de forma en la herramienta de edición de Flash. No es posible crear instancias de estos objetos con ActionScript pero se puede acceder a ellos desde la lista de visualización.

Stage: la clase Stage amplía la clase DisplayObjectContainer. Hay una instancia de Stage por aplicación y se sitúa en lo más alto de la jerarquía de la lista de visualización. Para acceder a Stage, debe usarse la propiedad stage de cualquier instancia de DisplayObject.

Además, la clase StaticText del paquete flash.text amplía la clase DisplayObject, pero no es posible crear una instancia de ella en el código. Los campos de texto estático se crean únicamente en Flash.

En resumen en ActionScript 3.0 está todo documentado en clases, aunque en algunos casos son clases a las que no vamos a poder acceder por programación, pero que sin embargo nos van a permitir crear objetos en modo de edición, o simplemente se han creado para que alguna clase que podamos utilizar, herede sus funciones o métodos ( así queda todo más organizado ). Esta es la filosofía de la programación orientada a objetos.

FUENTE: ADOBE

addChild y removeChild con ActionScript 3.0

2010-04-25T12:29:00.000-07:00

Siguiendo el ejercicio del post anterior, lo que haremos es mostrar tres listados de información diferentes. Cada vez que cliquemos a un botón, aparecerán en pantalla, tantas instancias como datos tenga el Array correspondiente.

Para esto es necesario conocer las funciones addChild y removeChild, y saber añadir un MovieClip al escenario desde la biblioteca.

Por tanto crearemos tres botones que ejecutarán una función cuando cliquemos: la función recorrerá el array correspondiente y añadirá al escenario tantas instancias como datos tenga el array, mostrando también la información en un campo de texto que hemos añadido al MovieClip exportable.

leer más...

Recorrer el array y crear las instancias

Con un bucle for, recorremos el array que corresponda con cada botón, y añadimos las instancias necesarias. Como veíamos en el anteior post,

En AS 3 no hay problema en crear instancias con el mismo nombre, puesto que el método addChild añadirá cada una en un nivel diferente, y le asignará un nombre de instancia por defecto.

De esta forma, el bucle nos quedaría así:

for( var i:Number = 0; i<noticias.length; i++){
var rss:Rss = new Rss();
rss.info_txt.text = noticias[i];
rss.info_txt.mouseEnabled = false;
rss.y = (rss.height+10)*i;
contenedor.addChild(rss);//añadimos las instancias al Movie Clip contenedor que previamente hemos añadido al escenario
}

No añadir las instancias directamente al escenario

Si vamos a trabajar con datos dinámicos, una solución cómoda es utilizar un MovieClip como contenedor, para ir añadiéndole las diferentes instancias. De ésta manera, luego podemos utilizar la siguiente función cuando necesitemos limpiar la información:

function vaciar():void{
while(contenedor.numChildren>0){
contenedor.removeChild(contenedor.getChildAt(0));
}
}

Para ir mostrando las diferentes fuentes de información el resultado nos quedaría así:

Por lo tanto cada vez que seleccionemos un tema, deberá vaciarse el MovieClip contenedor, y añadirle nuevas instancias según el array seleccionado. La solución pasa por juntar en una misma función el bucle for y la función vaciar.

Por ejemplo el botón cine_btn, ejecutará la siguiente función:

function mostrarCine(e:MouseEvent):void{

vaciar();

for( var i:Number = 0; i<cine.length; i++){

var rss:Rss = new Rss();

rss.info_txt.text = cine[i];

rss.info_txt.mouseEnabled = false;

rss.y = (rss.height+10)*i;

contenedor.addChild(rss);

}

cine_btn.addEventListener(MouseEvent.CLICK, mostrarCine);

En primer lugar llama a la función vaciar. Ésta, si contenedor.numChildren > 0, o lo que es lo mismo, si hay algún clip dentro de contenedor, lo quitará, y una vez ejecutada, añadimos el bucle for, que recorre el array cine, crea tantas instancias como datos tenga el array y las añade de nuevo a contenedor.

A continuación os dejo el código completo, para que funcione, deberéis crear un MovieClip con un icono y un campo de texto dinámico, y activar la opción exportar, poniéndole como nombre de clase Rss, luego los tres botones del escenario y con eso ya está

var noticias:Array = new Array();

noticias[0] = "Liga de fútbol";

noticias[1] = "Liga de baloncesto";

noticias[2] = "noticias de automovilismo";

noticias[3] = "noticias de waterpolo";

var musica:Array = new Array();

musica[0] = "Canal clásico";

musica[1] = "Canal pop-rock";

musica[2] = "Canal countrie";

var cine:Array = new Array();

cine[0] = "Canal comedia";

cine[1] = "Canal clásicos";

var contenedor:MovieClip = new MovieClip();

addChild(contenedor);

contenedor.x = 50;

contenedor.y = 70;

var sombra:DropShadowFilter = new DropShadowFilter();

contenedor.filters = [sombra];

function mostrarNoticias(e:MouseEvent):void{

vaciar();

for( var i:Number = 0; i<noticias.length; i++){

var rss:Rss = new Rss();

rss.info_txt.text = noticias[i];

rss.info_txt.mouseEnabled = false;

rss.y = (rss.height+10)*i;

contenedor.addChild(rss);

}

noticias_btn.addEventListener(MouseEvent.CLICK, mostrarNoticias);

function mostrarMusica(e:MouseEvent):void{

vaciar();

for( var i:Number = 0; i<musica.length; i++){

var rss:Rss = new Rss();

rss.info_txt.text = musica[i];

rss.info_txt.mouseEnabled = false;

rss.y = (rss.height+10)*i;

contenedor.addChild(rss);

}

musica_btn.addEventListener(MouseEvent.CLICK, mostrarMusica);

function mostrarCine(e:MouseEvent):void{

vaciar();

for( var i:Number = 0; i<cine.length; i++){

var rss:Rss = new Rss();

rss.info_txt.text = cine[i];

rss.info_txt.mouseEnabled = false;

rss.y = (rss.height+10)*i;

contenedor.addChild(rss);

}

cine_btn.addEventListener(MouseEvent.CLICK, mostrarCine);

var glow:GlowFilter = new GlowFilter(0X0000ff);

function over(e:MouseEvent):void{

e.target.filters = [glow];

}

function out(e:MouseEvent):void{

e.target.filters = [];

}

contenedor.addEventListener(MouseEvent.MOUSE_OVER, over);

contenedor.addEventListener(MouseEvent.MOUSE_OUT, out);

contenedor.useHandCursor = true;

contenedor.buttonMode = true;

function vaciar():void{

while(contenedor.numChildren>0){

contenedor.removeChild(contenedor.getChildAt(0));

}

Atachar símbolos de la biblioteca en AS 3.0

2010-04-24T17:26:00.000-07:00

Una opción que nos puede resultar útil, es tener símbolos en la librería que podamos añadir al escenario por programación. En versiones anteriores de ActionScript existía el método "attachMovieClip". Ahora es diferente en algunos aspectos, pero más fácil e intuitivo.

leer más.

Supongamos que tenemos un proyecto donde mostraremos fuentes de RSS según temática. Esto normalmente se haría trabajando con datos dinámicos, es decir haciendo una consulta a una base de datos, y recibiendo los datos en flash, por ejemplo mediante XML.

En nuestro caso lo haremos con Arrays que simularán los resultados obtenidos.

Preparar el símbolo

Lo primero que haremos es darle un nombre a nuestro símbolo para que pueda ser "exportable". En realidad flash creará una clase con el nombre que le asignemos, así que por similitud es recomendable poner el nombre en mayúsculas, como lo tienen todas las clases en Flash

Una vez le damos a OK, aparece un mensaje que puede parecer de error, pero en realidad lo que nos dice es que "flash creará una clase con el nombre que hemos puesto", así que le damo a ok otra vez.

Ahora si nos fijamos en la librería, aparecerá nuestro símbolo, y en el campo "linkage" nos dirá que está preparado para exportación y el nombre que debemos usar.

El siguiente paso es muy fácil. En realidad debemos crear una instancia de ese símbolo del mismo modo que crearíamos una instancia de cualquier objeto de ActionScript, como por ejemplo un Movie Clip, y utilizar el método addChild para visualizarlo en el escenario.

var mirss:Rss = new Rss( );

addChild(mirss);

mirss.x = 100;

mirss.y = 100;

En este punto ya tenemos el Movie Clip en el escenario, y lo podemos modificar sus propiedades de la misma manera que haríamos con cualquier otro mc.

Añadirle elementos al símbolo

Para este ejercicio nos interesará que muestre un texto, así que editaremos el símbolo y le añadiremos un campo de texto dinámico, por ejemplo "info_txt", asegurándonos de incorporar los caracteres básicos

Si tuviéramos problemas con los acentos, una buena solución es añadirlos manualmente como en la imágen

Ahora, cada vez que creemos una instancia de nuestro símbolo podremos añadirle el texto que queramos

var mirss:Rss = new Rss( );

mirss.info_txt.text = "Primer canal de noticias";

addChild(mirss);

mirss.x = 100;

mirss.y = 100;

Añadir varias instancias a la vez

Supongamos que queremos mostrar los canales de noticias deportivas que hay disponibles. En éste caso para el ejemplo creamos un array:

var noticias:Array = new Array();
noticias[0] = "Liga de fútbol";
noticias[1] = "Liga de baloncesto";
noticias[2] = "noticias de automovilismo";
noticias[3] = "noticias de waterpolo";

Como vamos a añadir más de una instancia, siempre nos resultará más práctico añadirlas dentro de un MovieClip, así que creamos uno por programación y lo colocamos donde nos interese

var contenedor:MovieClip = new MovieClip();
addChild(contenedor);
contenedor.x = 100;
contenedor.y = 100;

Y por último mediante un bucle, recorremos el Array usando como límite su longitud, y creamos tantas instancias como elementos tenga el Array. Añadimos la información al campo de texto de nuestro símbolo.

La ventaja es que no tenemos que preocuparnos del nombre, podemos crear todas las instancias con el mismo nombre, ya que flash las irá almacenando dentro del MovieClip por niveles, la primera en el nivel 0, y así sucesivamente, de esta forma no se produce conflicto de nombres.

for( var i:Number = 0; i<noticias.length; i++){

var rss:Rss = new Rss();

rss.info_txt.text = noticias[i];

rss.y = (rss.height+10)*i;

contenedor.addChild(rss);

}

El resultado sería el siguiente:

Ventajas de añadir las instancias dentro de un símbolo

Entre otras ventajas, tenemos que si por ejemplo queremos añadirles un EventListener para que ejecuten una acción se lo podemos añadir al MovieClip contenedor aprovechando la propiedad e.target, y así nos ahorramos código.

Por otro lado, como son MovieClips por defecto no mostrarán la mano, así que podemos añadírselo también al MovieClip contenedor, con las propiedades useHandCursor y buttonMode

function nombrarNoticia(e:MouseEvent):void{
trace(e.target.info_txt.text);
}
contenedor.addEventListener(MouseEvent.CLICK, nombrarNoticia);
contenedor.useHandCursor = true;
contenedor.buttonMode = true;

Para crear un efecto de Roll Over, podemos utilizar el mismo sistema, añadiéndole los eventListeners al mismo contenedor ( ojo porque funciona con el MOUSE_OVER, y no con el ROLL_OVER )

var glow:GlowFilter = new GlowFilter(0XFF0000);

function over(e:MouseEvent):void{
e.target.filters = [glow];
}
function out(e:MouseEvent):void{
e.target.filters = [];
}
contenedor.addEventListener(MouseEvent.MOUSE_OVER, over);
contenedor.addEventListener(MouseEvent.MOUSE_OUT, out);

Cómo eliminar las instancias de la pantalla

Supongamos que necesitamos mostrar otra información, por ejemplo canales de noticias de política, y en éste caso sólo tenemos dos. Pues bien, para poder añadirlos, primero tendremos que quitar los que hay en el escenario.

El sistema resulta fácil puesto que todo MovieClip tiene una propiedad numChildren que nos indica los MovieClips que le hemos añadido, y otras funciones como removeChild( ) y getChildAt( )

De ésta manera con un bucle while, podemos vaciar rápidamente un MovieClip de contenido:

function vaciar(e:MouseEvent):void{
while(contenedor.numChildren>0){
contenedor.removeChild(contenedor.getChildAt(0));
}
}
vaciar_btn.addEventListener(MouseEvent.CLICK, vaciar);

El sistema funciona porque siempre que retiramos un MovieClip del nivel cero, todos los que hubieran encima descienden un nivel, pasando el siguiente a ocupar el nivel 0, así hasta que ya no queden instancias, o lo que es lo mismo, que contenedor.numChildren no sea mayor que cero

De esta manera, podemos utilizar el MovieClip contenedor, para ir añadiendo y quitando instancias, según se reciba una u otra información. Siempre que vayamos a añadir nueva información ejecutaremos la función limpiar, para asegurarnos de que no se solapen las instancias anteriores con las nuevas.

Leer RSS con Flash

2010-04-21T08:54:00.000-07:00

ActionScript 3.0 nos proporciona dos objetos para trabajar con XML. En primer lugar tenemos al igual que en versiones anteriores el propio objeto XML, que utilizaremos para almacenar los datos cargados y que ActionScript los reconozca como xml.

En segundo lugar, y como novedad tenemos el objeto XMLList, que nos servirá para almacenar los nodos que contiene el objeto xml una vez ha cargado los datos, y poder tratarlos como si de uno o varios arrays se tratara.

Como ejemplo vamos a ver como cargar un feed RSS

leer más...

Una vez tenemos una fuente de RSS, lo que haremos es cargarla como si de cualquier archivo de texto se tratara, es decir utilizaremos el objeto URLLoader, y le pasaremos la ruta en formato URLRequest, y le daremos la orden load.

nota: en AS3 siempre que queramos cargar o linkar a un archivo externo, la ruta la deberemos meter dentro de una instancia del objeto URLRequest como un parámetro, así por ejemplo para linkar a productos.html deberemos poner: var req:URLRequest = new URLRequest("productos.html")

var rssURL:String = "http://diariodigital.ujaen.es/rss_general/";

var req:URLRequest = new URLRequest(rssURL);

var uld:URLLoader = new URLLoader();
uld.load(req);

Hasta aquí no cambia respecto a lo que sería cargar un texto cualquiera. Los datos se van a quedar almacenados en la propiedad data de la instancia de URLLoader.

Para trabajar correctamente con datos externos, lo que debemos hacer es asegurarnos de que éstos se han cargado, antes de pasar a procesarlos ( por ejemplo mostrarlos en un campo de texto ). Y para esto, utilizaremos el evento COMPLETE, que se lo añadiremos a la propia instancia del URLLoader.

var rss:XML;
var listado:XMLList;

function procesarDatos(e:Event) {
         
   rss = new XML(uld.data);
   listado = new XMLList(rss.*);
   titulo_txt.htmlText = (listado[0].item[0].title);
   texto_txt.htmlText = (listado[0].item[0].description);

}

uld.addEventListener(Event.COMPLETE, procesarDatos);

Lo que hacemos es crear las instancias del objeto XML y el objeto XMLList fuera de la función por si necesitáramos usarlas desde cualquier otro lado.

El objeto XML almacenará todos los datos del xml, y el objeto XMLList, almacenará los diferentes nodos. Utilizamos el asterisco para entrar dentro del nodo padre ( en AS3 el asterisco es como un comodín y se refiere al primer nodo que tenga el XML ). De ésta manera conseguimos que el objeto XMLList, contenga un listado de nodos xml, que es de lo que se trata.

Creamos dos campos de texto en el escenario, uno para el título y otro para el texto, y lo que hacemos es pasarle ( en éste caso ) el título del primer item de listado, y el nodo descripción. Para que salga bien formateado, utilizaremos la propiedad htmlText, puesto que el feed RSS nos pasa los datos en html.

Para pasar el título y la descripción del primer nodo, el objeto XMLList, nos permite trabajar como si fuera un array, por lo tanto, el título del primer nodo sería:

listado[0].item[0].title

Al tener varios nodos <item> el primero siempre estará con el índice 0, igual que si trabajáramos con un Array. Esta es la utilidad que nos ofrece el objeto XMLList.

Cómo sabemos que nodos hay que cargar?

Para conocer como está estructurado el XML del rss, lo que haremos en un primer momento es un trace de uld.data, o de la instancia del XML, en éste caso rss.

El resultado que nos da es el siguiente, ( muestro sólo el primer nodo ):

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xml:base="http://diariodigital.ujaen.es" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>Diario Digital de la UJA</title>
<link>http://diariodigital.ujaen.es/rss_general</link>
<description></description>
<language>es</language>
<item>
<title>BIÓPTIMA 2010</title>
<link>http://diariodigital.ujaen.es/node/15333</link>
<description><p><span class="inline inline-left"><a href="http://diariodigital.ujaen.es/files_viccom/images/147x120.gif" onclick="launch_popup(15332, 147, 120); return false;" target="_blank"><img src="http://diariodigital.ujaen.es/files_viccom/images/147x120.thumbnail.gif" alt="" title="" class="image image-thumbnail" width="100" height="82" /></a></span>La Universidad de Jaén participa en la III Feria Internacional de la Biomasa y Servicios Energéticos BIÓPTIMA 2010, que se celebra en el Recinto de Ferias y Congresos de Jaén del 22 al 24 de abril. </p>
<p><a href="http://www.bioptima.es/">Más información</a><br />
<div class="image-clear"></div>
</description>
<category domain="http://diariodigital.ujaen.es/taxonomy/term/2">Actualidad universitaria</category>
<category domain="http://diariodigital.ujaen.es/taxonomy/term/1">General</category>
<pubDate>Wed, 21 Apr 2010 13:50:03 +0200</pubDate>
<dc:creator>gprensa</dc:creator>
<guid isPermaLink="false">15333 at http://diariodigital.ujaen.es</guid>
</item>

Se trataría por tanto de identificar los nodos de información principales, y por lo que vemos, el título de esos nodos es <item>.
Dentro de cada nodo <item> vemos que podemos accedera <title>, <link>, <description>, etc.

Por último, el resultado que os debería salir, sería el siguiente

y al hacer click en más información, os debería llevar a la página.

La diagramación. Checklist

2010-04-16T01:48:00.001-07:00

La diagramación busca identificar las partes principales de la aplicación, presentándolo en una herramienta diferente. Se centra principalmente en la funcionalidad, como por ejemplo que una página tendrá tres cajas de texto y 5 botones. No se tocará el diseño. Esto se denomina una aproximación austera, puesto que los diagramas se basan en elementos funcionales e ignoran cualquier aspecto relacionado con el diseño.

A continuación mostramos un checklist que debería seguir el proceso de diseño de un diagrama

leer más...

Experimental

El proceso de diseño de un diagrama no requiere unas habilidades extraordinarias; Sólo se necesita una buena experiencia usando las aplicaciones adecuadas. Evidentemente cuanta más experiencia se tiene mejor, pero no se necesita dominar las bases de datos relacionales para realizar un diagrama.

Quién es el jefe?

Es crítico tener a alguien a cargo de todo el proceso de diagramación. Será responsable de estar al día y gestionará los cambios y el feedback de manera consistente. En muchos casos puede llegar a ser el diseñador web el que se encarge del proyecto.

Trabajo en equipo

Durante la fase de desarrollo es mejor involucrar a todo el equipo en su desarrollo. El trabajo en equipo hará que se aceleren un poco las cosas. Si por ejemplo estás integrando una aplicación con bases de datos que ya existen asegurare de coordinarte bien con el gestor de la base de datos para asegurarte por ejemplo que todos los campos existen en la base de datos antes de integrarlos en el diagrama. Los diseñadores tienen buena mano a la hora de entender la experiencia de ususario y pueden anticiparse a potenciales problemas.

Deadline

Igual que en otros trabajos, un periodo de tiempo predefinido es importante para el proyecto. La diagramación puede llevar un día o más dependiendo del tamaño de la aplicación, por lo tanto es importante establecer un deadline y ajustarse a el

Evitar sobrecargar el diagrama

Hay que tener en cuenta que la diagramación no tiene fines estéticos, es simplemente sobre funcionalidad. Debemos evitar centrarnos en el diseño para evitar tiempo y esfuerzos. Lo que en principio puede ser la idea de añadir un color azul puede llevar a horas de discusión sobre que azul poner. Es más fácil dejar los aspectos del diseño a los diseñadores.

Con el usuario en mente

A pesar de que la diagramación trata sobre la funcionalidad, debemos tener siempre en mente la experiencia de usuario mientras desarrollamos la funcionalidad. Por ejemplo en los formularios de registro. Puede que nos resulte satisfactorio crear un formulario de tres páginas, pero ten en cuenta que probablemente ningún usuario gastará su tiempo en rellenarlo.

No excluir obviedades

Hay que asegurarse que incluimos todo en el diagrama, y no nos olvidamos de aquellas cosas que creemos que son obvias. Todo cuenta y al final del proceso deberemos tene algo parecido a un storyboard

Organizar el diagrama

Organizar las tareas de desarrollo también cuenta. Debemos desglosar nuestro diagrama de tal manera que por ejemplo para una web separemos secciones como productos, noticias y cuentas de usuario. De esta manera desarrollaremos un buen workflow dejando poco espacio para los errores

Numerar las páginas

Por ejemplo en un checkout, a pesar de la naturaleza lineal del proceso algunos usuarios pueden decidir saltarse un paso. Etiqueta tus documentos y cada página, indicando por ejemplo acciones como que al clickar un boton el usuario avanzará un paso.

Repetición

Consistencia y repetición en una aplicación está demostrado que ayuda a los usuarios, diseñadores y desarrolladores. La repetición en grupos de elementos por tanto es una buena cosa. Por ejemplo siempre que el usuario introduzca una dirección, los campos deberían estar en el mismo orden. Debemos indicar estas repeticiones durante el proceso de diagramación para conseguir un trabajo de calidad.

Revisa tu documento

El documento final debe ser fácil de seguir y de entender. Si un desarrollador encuentra algo incomprensible, es señal de que algo nos ha fallado durante el proceso. Podemos testearlo preguntando a una persona externa al proyecto si lo puede comprender.

Datos no públicos

La sección de administración o back-end contiene datos más privados que no se muestran al público, como respetar passwords, ver el perfil de los usuarios registrados, etc. A pesar de que no sean de importancia para el público, la importancia de esta sección estará a disposición del desarrollador.

Pisar el freno

No excederse con los borradores. Normalmente se aconseja no hacer más de tres. El primero debería plasmar la idea sobre el papel, el segundo obtener el feedback de los diseñadores y desarrolladores, y el tercero debería ser el resultado final.

Utilizar las herramientas adecuadas.

Herramientas tradicionales como papel y lápiz son muy útiles para plasmar ideas al vuelo. Es mucho más rapido que encender el ordenador. Normalmente van apareciendo ideas según va evolucionando el proyecto. Pero una vez empezamos a trabajar, es mejor tener una herramienta adecuada como un gestor de proyectos tipo Microsoft Visio, PowerPoint o Adobe Fireworks. Aunque hay que tener en cuenta que el proceso de diagramación de lo que trata es de documentar más que de diseñar, por lo que lo ideal es utilizar una herramienta diseñada para éste propósito.

Ejemplo de web accesible: www.downs-syndrome.org.uk

2010-04-15T04:04:00.000-07:00

Esta web se ha diseñado ajustándose a los estándares de W3C para XHTML y CSS. La web se muestra correctamente en los navegadores más populares, y el echo de cumplir los estándares XHTML/CSS significa que futuros navegadores la mostraran correctamente.

Las páginas de esta web están validadas como XHTML 1.0 Transitional.

Siempre que es posible el sistema de navegación se desarrolla mediante links de texto formateados con CSS, de tal forma que la navegación es accesible para sistemas alternativos de hardware.

http://www.downs-syndrome.org.uk

Talklets de rok talk probablemente sea uno de los aspectos más interesantes de este sitio. Un sistema de lectura de pantalla al que merece la pena darle un vistazo

Herramientas de diagramación on-line

2010-04-15T02:40:00.000-07:00

A la hora de planificar, estructurar o bocetar un sitio web o una aplicación, tenemos a nuestra disposición muchas herramientas que nos permitirán plasmar nuesta idea en un formato gráfico que luego podamos enviar al cliente o a otros colaboradores.

Normalmente se puede utilizar cualquier aplicación de escritorio, ya sea Illustrator, Photoshop, Power Point, herramientas de gestión de proyectos de Microsoft, etc. Sin embargo tenemos a nuestra disposición una serie de aplicaciones web gratuítas, que además nos permitirán colaborar on-line y mostrar nuestros bocetos al cliente

leer más...

JumpChart

Jumpchart nos ofrece la ventaja de poder trabajar on-line para crear diagramas de nuestros proyectos, y poder compartirlos de manera sencilla.

http://www.jumpchart.com/

Podemos crear una cuenta gratuita que nos servirá para hacernos una idea de su funcionamiento y considerar si merece la pena.

Ofrecen diferentes planes a diferentes precios como podréis observar aquí

Lumzy

http://www.lumzy.com/

Con una interfaz muy intuitiva, no sólo nos permite crear bocetos y diagramas, sino que además podemos asignar determinados enventos y disparar acciones preestablecidas, como mensajes de alerta, navegar entre diferentes páginas, etc.

Nos permite exportar los bocetos a JPEG y a PDF ofreciéndonos además la posibilidad de escoger plantillas e incorporar nuestro logo.

Realmente es un programa muy intuitivo, por lo que no necesitamos seguir ningún tutorial para empezar a trabajar con el.

Viene con una serie de elementos gráficos preestablecidos, como calendarios, tablas, gráficos de barras, etc. ( sistema drag and drop ).

Incorpora también un sistema de chat, y posibilidad de editar las imágenes. Nos permite también colaboración en tiempo real, de tal manera que mientras añadimos algún control, los demás participantes pueden ver los cambios.

MockFlow

http://www.mockflow.com/

Parecido al anterior, una aplicación desarrollada en flash, que nos permitirá colaboración on line, y añadir interactividad a nuestros bocetos. No es tan intuitiva como la anterior y por eso incluye un video tutorial en la home

Nos permitirá exportar los bocetos a pdf y a power point. Tiene una opción interesante que nos permite visualizar el mapa del sitio/aplicación y exportarlo en png.

Cacoo

http://cacoo.com/

Otra herramienta útil, parecida a las anteriores, y que además nos ofrece una serie de iconos que nos pueden servir para realizar presentaciones.

Por otro lado nos permite generar un mapa web de forma manual.

En este caso sólo nos permite exportar a .png.

MockingBird

En la misma línea que las anteriores. Nos ofrece una serie de widgets como los que vemos en la imágen, iconos, gráficos, etc.

Permite compartir, y exportar a pdf.

Pencil

Uno de los aspectos más interesantes de esta aplicación es que se puede obtener como una extensión de firefox. Es una de las herramientas más mencionadas en los blogs sobre esta temática.

http://www.evolus.vn/Pencil/

Recursos de diagramación para el diseñador web

2010-04-15T02:12:00.000-07:00

Poco a poco, el diseño web se va profesionalizando y dándole importancia a disciplinas que en un principio incluso se desconocían, como por ejemplo la arquitectura de la información, la usabilidad, accesibilidad, etc.

A la hora de afrontar un proyecto web una de las partes a la que nunca debemos restar importancia es a la diagramación del proyecto, entendiendo ésta como:

El resultado de un estudio de objetivos del proyecto, análisis funcional, de arquitectura y de contenidos del mismo, estableciendo un esquema visual que nos permita tener una idea clara de la estructura y alcance del proyecto. Lo que coloquialmente se ha entendido como "hacer un mapa web".

Un buen estudio de todos estos aspectos, previo incluso al diseño gráfico, puede ahorrarnos mucho tiempo pero también nos va a facilitar otros aspectos como por ejemplo presupuestar nuestro proyecto o valorar los recursos necesarios para acometer el proyecto.

A continuación se ofrecen una serie de artículos y herramientas que nos facilitarán el trabajo

Artículos

A continuación se ofrecen una serie de artículos, guías y tutoriales que nos ayudarán a mejorar el proceso de diagramación

Wireframes Magazine

Nos ofrece ejemplos, herramientas, plantillas, un apartado llamado "inspiración" y la posibilidad de compartir ideas con otros diseñadores.

Wire frame your site

Artículos útiles y tutoriales. Un acercamiento en tres pasos a la diagramación, aparte de explicar los beneficios de éste procedimiento, entre otros la posibilidad de anticiparnos a problemas potenciales que puedan surgir en el desarrollo antes de comenzar siquiera con el diseño.

Particle Tree

Página muy interesante que se centra en el desarrollo con AJAX. Nos ofrece buenos trucos tanto para XHTLM como para CSS, y en definitiva como mostrar contenidos dinámicos.

Onextrapixel

Esta página nos ofrece un muy buen artículo sobre la importancia de la diagramación en el diseño web y 9 herramientas para crear diagramas.

20 pasos para hacer mejores diagramas de Carsonified

Entre los consejos que propones incluye: ser claro sobre los objetivos del proyecto, involucrar a todo el equipo dentro de éste proceso, centrase en su funcionalidad más que en su diseño, e intentar mantenerlo claro y conciso.

Get Wireframing. The All-in-one guide

Guía muy completa sobre la diagramación que incluye técnicas, herramientas, ejemplos, artículos de interés etc.

Paper Wireframing

Una alternativa interesante. Merce la pena darle un vistazo.

Semantic Foundry

Nos ofrece ejemplos sobre proyectos reales como el de Global Cruises donde podemos ver el proceso de diagramación desde un inicio y el diseño final del proyecto.

90 percent of everything

Nos ofrece un excelente artículo con un video que muestra las variaciones de la home page de Yahoo desde 1996 a 2009.

Por otro lado nos habla sobre Pidoco, una herramienta para hacer prototipos que incluye un test de usabilidad on-line.

SEO Wireframing ( diagramación enfocada a la optimización en buscadores ).

Spyrestudios

Nos ofrece imágenes, videos y ejemplos y lo más importante, 15 herramientas web de calidad

Videos

Wireframing Over the Shoulder Un video que nos muestra un proceso de desarrollo completo
How to Wireframe: video tutorial
Speed Wireframing

Herramientas de diagramación

Axure

Pidoco

Pencil Project
Podemos usarlo como un plug-in de Firefox, o como una aplicación independiente.

Web Design: Top 5 Wireframing Tools
Cinco herramientas para diagramar sistemas de gestión de contenidos. Las herramientas que comenta son

Omnigrafe
MockupScreens
iRise
Axure
MindJet MindManager

iPlotz
Una herramienta para crear maquetas web clicables y navegables. Incluye servicios gratuítos y de pago

Jumpchart
Herramienta parecida a la anterior

Wireframes
wireframing software, tanto herramientas on-line como de escritorio

Hot Gloo
Una aplicación de diagramación enfocada a diseñadores y programadores. La versión beta es gratuíta

Building a Website Wireframe in Illustrator
Un tutorial completo sobre como usar Adobe Illustrator para diagramar

Balsamiq Mockups
Otra herramienta web. Ofrece versión gratuíta y de pago.

Wireframing Web Applications
Un artículo que nos compara tres herramientas diferentes para diagramar y maquetar. Incluye Gliffy Online y Balsamiq Mockups.

Templatr
Aunque originariamente se creó como generador de plantillas, puede funcionar perfectamente como herramienta de diagramación, simplemente escogemos la maquetación que nos guste y la adaptamos a nuestras necesidades.

uitest.com el mejor servicio de validación on-line

2010-04-14T06:31:00.000-07:00

Desde esta página podemos acceder a los mejores validadores de diferentes aspectos de la web, desde tiempos de carga, accesibilidad, navegadores, contraste de colores, etc.

http://uitest.com/

Simplemente introduciendo la url de nuestra web, nos llevará a las páginas de los diferentes validadores, donde podremos chequear aquellos aspectos más relevantes de nuestra web.

Pautas para Evaluación Heurística de Sitios

2010-04-14T04:39:00.000-07:00

La heurística es una forma de revisión de sitios web basada en la experiencia de quienrealiza la evaluación. Consiste en comprobar diferentes aspectos, desde diseño ynavegación hasta operación y utilidad.

La evaluación a través de este sistema permite la generación de un informe que al menosdebería incluir los siguientes aspectos:

• Descripción de la forma de trabajo: En esta parte de la evaluación se debe dejarconstancia de las características del proceso realizado. Entre los elementosconcretos a citar se incluyen los siguientes:

- Fecha y hora de la evaluación;
- Tipo de conexión a Internet, para descartar problemas debido a la velocidad;
- Datos generales sobre la forma en que se realiza la evaluación.
- Información acerca de la forma en que se asigna la puntuación de la evaluación.
- Información acerca de los principales ítems evaluados.

• Principales Hallazgos: en esta parte del informe se hace un resumen de lasprincipales características evaluadas, indicando los aspectos positivos y negativosencontrados.

• Conclusión Final: en esta parte se entrega la recomendación final respecto de losproblemas encontrados y se detallan los elementos positivos encontrados en laevaluación.

leer más...

Cómo hacer la evaluación

Al desarrollar una Evaluación Heurística, es importante que los expertos que la lleven acabo tengan algún sistema común de evaluación, con el objetivo de homologar y reunir suscomentarios de manera similar.

Una fórmula para hacerlo es definir una serie de preguntas respecto del sitio web que seevalúa y para cada una de ellas, poner una nota que luego pueda ser tabulada. En estesentido, una escala habitual puede ser la siguiente:

Esta escala de evaluación va a de 1 a 5 con los siguientes valores:

1 - Muy malo o no funciona: lo evaluado no realiza la actividad o no muestra el contenido que ofrece.

2 - Funciona pero no sirve: lo evaluado desarrolla la actividad o muestra un contenido,pero en general, lo recibido por el evaluador no aporta a la experiencia general delsitio.

3 - Funciona pero debe mejorar: lo evaluado desarrolla la actividad o muestra uncontenido relativamente útil, pero podría ser mejor. Al respecto el evaluador debeaportar información para hacer mejoras al sitio.

4 - Cumple: lo evaluado desarrolla la actividad o muestra un contenido útil. El evaluadordebe aportar información para hacer mejoras al sitio.

5 - Es lo que el usuario busca: lo evaluado desarrolla la actividad o muestra uncontenido útil que cumple o excede la expectativa del usuario.

Dichas notas deben ser puestas a una serie de preguntas que se van generando en torno a lasáreas más importantes del sitio web; en todo caso, lo interesante de este tipo de evaluaciónes que las preguntas se relacionan directamente con lo que se desea evaluar.

Ejemplo de test de Evaluación Heurística

Identidad

• El sitio web ofrece información corporativa de la organización
• Informa de datos relevantes para quien “no navega"
• Entrega información para hacer consultas web o no-web (Ej.: Ns. de teléfono)

Diseño

• El diseño es consistente en todas las pantallas del sitio?
• Se adapta adecuadamente a las resoluciones de pantalla más comunes?
• Las páginas tienen scroll adecuado?

Tiempo de Acceso

• Tiempo de acceso de la portada menor de 15” en conexión de baja velocidad?
• Permite ver lo más importante el primer momento de cargarse las páginas?
• Ofrece alternativas de texto cuando se trata de interfaces gráficas?

Accesibilidad

• Existe texto alternativo (Alt) en las imágenes?
• Cuenta con Flash o Plug-ins e informa de su existencia?
• Tamaño de letra es adecuado? Se pueden agrandar?

Navegación

• Los enlaces son claramente visibles?
• Se notan los enlaces visitados?
• El menú del sitio es consistente en todo el sitio?
• Todos los vínculos funcionan?

Operación

• Presenta fallos de sistema?
• Se administra el error 404?
• Existe seguridad adecuada para el tipo de sitio?
• Si es relevante para el sitio, se explica la seguridad ofrecida?

Utilidad

• Tiene Buscador? Funciona OK?
• Permite hacer lo mismo o más que lo que podría hacer la institución física?
• Permite resolver las dudas básicas que el usuario tenga sobre sus contenidos?
• El sitio genera una experiencia de usuario que a uno llevaría a recomendarlo a otros?

Claramente se buscará reunir en el documento tanto los aspectos positivos como losnegativos del sitio evaluado, para cada una de las áreas (es decir, Identidad, Diseño,Tiempo de Acceso, Accesibilidad Navegación, Operación y Utilidad). Con estoscomentarios será posible encauzar el trabajo posterior para buscar mejoras en el sitio web.

El test de usabilidad

2010-04-14T02:48:00.000-07:00

Las Pruebas de Usabilidad, se enfocan en medir la manera en que el usuario se relaciona con las interfaces ofrecidas por el sitio web en estudio y en su capacidad para cumplir con las metas que haya tenido al momento de visitarlo.

A continuación veremos un modelo de aplicación de un test de usuario que permitecomprobar el grado de usabilidad que tiene la interfaz de un sitio web de Internet.

Consiste en la aplicación de una prueba en la que se le hace una serie de preguntas a un usuario y de acuerdo a sus respuestas y a las acciones que realice ante el computador, se determinan las características usables de la interfaz que se esté probando.

leer más...
El documento de ejemplo se enfoca en medir la usabilidad de sitios del tipo de una biblioteca.

NOTA para el responsable de la prueba:

• Entregar todas las instrucciones de forma simple y repetitiva.
• Mantener una actitud pasiva, paciente con el usuario, evitando “caras” de impaciencia,
enojo, preocupación o cualquier gesto que haga sentir mal al usuario
• Anotar todo lo posible
• Aparte de las instrucciones necesarias para completar la prueba, no se deben entregar
pistas al usuario de lo que tiene que hacer cuando navegue el sitio web.
• Grabar la prueba en video de la cara y de lo que hace en pantalla.
• Acompañar al usuario el encargado de la prueba y, a lo más, 1 asistente que toma
notas.

Presentación del usuario

1.- ¿Cual es su nombre?

2.- ¿A qué se dedica [Profesión, Actividad]?

3.- ¿Qué experiencia tiene en Internet?

4.- ¿Navega habitualmente?, ¿Cuantas horas navega al día, a la semana? Incluya el número de
horas que utiliza el correo electrónico.

5.- ¿Qué sitios visita habitualmente?

6.- ¿Cuáles son sus sitios preferidos?

7.- Cuando desea encontrar algo en Internet, ¿cómo llega a un sitio que pueda tener esa
información? ¿Usa un Buscador? ¿Cuál? Si no usa un buscador, ¿cómo lo hace?

Secciones de preguntas

<Nombre usuario>: Queremos comentarle antes de comenzar con las preguntas sobre el sitio mismo, que lo más probable es que en la prueba que hagamos, haya ciertas acciones que no podrácompletar. Si eso ocurre, significará que el sitio debe ser perfeccionado y la prueba será exitosa. Si todo sale bien, significará que el sitio fue diseñado pensando en el usuario y también significará que esta prueba alcanzó el éxito. La prueba tiene una duración máxima de 30 minutos aproximadamente.

Le vamos a pedir que durante las acciones que desarrolle, vaya manifestando en voz alta lo que vaya pensando con el fin de que podamos entender qué le sugiere lo que va mostrando cada pantalla.

Las preguntas que le surjan en la navegación sólo las podremos responder al final de la prueba.
Una vez agradecemos su ayuda.

Identidad

Estas preguntas se deben hacer cuando el usuario está mirando la pantalla inicial y antes de
comenzar a navegar o hacer “clic” sobre algún contenido.

1.- ¿Con la información que se ofrece en pantalla, es posible saber a qué institución o
empresa corresponde el sitio? ¿Cómo lo sabe?

2.- ¿Hay algún elemento gráfico o de texto que le haya ayudado a entender más claramente
a que institución o empresa pertenece el sitio?

3.- <Sólo si no fue mencionado antes> ¿Relaciona los colores predominantes en el sitio web
con la institución? ¿Relaciona la dirección del sitio web con la institución?

4.- <Sólo si no fue mencionado antes> ¿De los elementos que muestra esta pantalla, hay
algo que usted crea que está fuera de lugar, porque no pertenece a la institución o empresa
que usted identifica como propietaria?

5.- ¿Distingue alguna imagen que represente (logotipo) a la institución? ¿Cree que aparece
en un lugar importante dentro de la página? ¿Puede leer el nombre de la institución? ¿Es
claro?

6.- ¿Hacia qué tipo de audiencia cree usted que está dirigido este sitio? ¿Por qué?

7.- Si tuviera que tomar contacto telefónico o enviar una carta tradicional a la institución o
empresa propietaria del sitio web, ¿se ofrece información de números o direcciones? ¿Son
útiles como para hacer esa tarea? ¿Le costó encontrar esa información?

Contenido

1.- ¿Le parece adecuada la selección de contenidos destacados en la portada o usted echó de
menos otras áreas de información que le habría gustado ver destacadas?

2.- ¿Al ver la portada del sitio, pudo distinguir de una sola mirada cuál era el contenido más
relevante que se ofrecía? ¿Cómo logró hacer esa distinción?

3.- ¿Es fácil distinguir los nuevos contenidos que presenta el sitio web? ¿Por ejemplo, es
posible saber cuándo fue la última actualización del sitio?

4.- ¿Los textos usados en los contenidos de los enlaces son suficientemente descriptivos de
lo que se ofrece en las páginas hacia las cuales se accede a través de ellos?

5.- ¿En caso de que los contenidos ofrecieran archivos adjuntos, fue fácil saber su peso o si
eran de un formato diferente al de una página web? ¿Le ayudó la información ofrecida por
el sitio sobre dichos archivos? ¿O no recibió ninguna información?

6.- En caso de haber información relacionada con la que estaba viendo, ¿se le ofreció de
manera simple? ¿O tuvo que volver a navegar para encontrarla?

Navegación

1.- ¿Puede ver en la portada y las demás páginas, la forma en que se navega por el sitio? ¿
Se distingue fácilmente?

2.- ¿Existen elementos dentro de las páginas, que le permitan saber exactamente dónde se
encuentra dentro de este sitio y cómo volver atrás sin usar los botones del programa
navegador?

3.- ¿Cómo vuelve desde cualquier página del sitio a la página de inicio? ¿Ve alguna forma
de hacerlo, que no sea presionando el botón del buscador? ¿Le parece claro?

4.- ¿Habitualmente, cómo logra acceder directamente a los contenidos sin tener que
navegar? ¿Usa el buscador? ¿Usa el Mapa del Sitio? ¿Los puede ver en este sitio? ¿Echa de
menos alguno?

5.- ¿Logra distinguir gráficamente los enlaces visitados de aquellos que no ha visitado aún?
<Si existe esa diferencia de colores>¿Le ayuda esa diferencia?

6.- El sitio tiene varios niveles de navegación y Usted ha ingresado y salido de varios de
ellos. ¿La información que se le ofrece en pantalla le parece adecuada para entender dónde
está ubicado en cualquier momento? ¿Se ha sentido perdido dentro del sitio? ¿Si lo ha
sentido, recuerda en qué área fue? ¿Si no lo ha sentido, qué elemento del sitio cree que le
ayudó más a orientarse?

Gráfica Web

1.- ¿Le pareció adecuada la forma en que se muestran las imágenes en el sitio web? ¿Son
nítidas? ¿Son adecuadas para representar el contenido del que trata el sitio?

2.- ¿Las imágenes grandes se demoraron más de lo esperado? ¿Tuvo que seguir navegando
sin que llegaran a mostrarse completamente? ¿Cree que el sitio es muy lento?

3.- ¿Se fijó si el sitio tenía gráficas con animaciones? ¿Hay alguna que le haya llamado la
atención? ¿Ninguna?

4.- ¿Considera que gráficamente el sitio está equilibrado, muy simple o
recargado?

5.- ¿Recuerda si el sitio tenía banners (avisos) publicitarios? ¿Tuvo intención o llegó a hacer
clic sobre alguno? ¿Por qué le hizo clic? ¿Qué le llamó la atención?

Búsqueda

1.- ¿Utiliza normalmente un buscador al acceder a un sitio web? ¿Distinguió si en este sitio
se ofrecía un buscador? ¿Dónde está?

2.- <antes de usar el buscador> ¿Cómo haría la operación de buscar? ¿Qué escribiría?
¿Dónde lo escribiría?

3.- <antes de presionar el botón Buscar > ¿Qué espera encontrar?
<al ver la página de resultados> ¿Ese es lo que esperaba encontrar?, ¿Le sirve?

Feedback

1.- ¿Encuentra alguna forma online y offline de ponerse en contacto con la empresa o
institución, para hacer sugerencias o comentarios? <ver pregunta similar en la parte de
Identidad>

2.- <Tras la operación de enviar algún formulario vía web> ¿Al mandar datos mediante un
formulario, el web le avisa si los recibió correctamente o no?

Utilidad

1.- ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio? ¿Qué contenidos y
servicios ofrece? ¿Los puede enumerar?

2.- ¿Cree que los contenidos y servicios que se ofrecen en este sitio son de utilidad para su
caso personal?

3.- ¿Qué es lo que más te llamó la atención positivamente o negativamente de la utilidad que
ofrece el sitio web?

Cómo medir la usabilidad: La evaluación heurística

2010-04-14T02:14:00.000-07:00

Los métodos de inspección de la usabilidad de un sitio web son aquellos realizados por el experto en usabilidad, y que se basan en el recorrido y análisis del sitio identificando errores y problemas de diseño.

La Evaluación Heurística es un tipo de método de inspección, que tiene como ventaja la facilidad y rapidez con la que se puede llevar a cabo.

Este tipo de evaluación normalmente la lleva a cabo un grupo reducido de evaluadores que, en base a su propia experiencia, fundamentándose en reconocidos principios de usabilidad (heurísticos), y apoyándose en guías elaboradas para tal fin, evalúan de forma independiente el sitio web, contrastando finalmente los resultados con el resto de evaluadores.

Diversos autores han propuesto diferentes conjuntos de heurísticos o principios de usabilidad a través de los cuales evaluar la usabilidad.

Modelo de Jackob Nielsen

Visibilidad del estado del sistema : El sistema (o sitio web) siempre debe informar al usuario acerca de lo que está sucediendo. Por ejemplo, cuando en una interfaz tipo webmail se adjuntan ficheros a un mensaje, el sistema debe informar del hecho mostrando un mensaje de espera.
Lenguaje común entre sistema y usuario : El sistema debe hablar el lenguaje del usuario, huyendo de tecnicismos incomprensibles o mensajes crípticos.
Libertad y control por parte del usuario : El usuario debe tener el control del sistema, no se puede limitar su actuación. Se debe ofrecer siempre al usuario una forma de "salida de emergencia", como por ejemplo la representada por la opción para "saltar" animaciones de introducción (normalmente Flash).
Consistencia y estándares : La consistencia se refiere a, por ejemplo, no utilizar dos rótulos distintos para referirse a un mismo contenido, o no usar estilos diferentes dentro de un mismo sitio. Además el sitio web debe seguir estándares o convenciones de diseño ampliamente aceptados. Cuanto más se parezca un diseño y su funcionamiento al resto de sitios web, más familiar y fácil de usar resultará para el usuario.
Prevención de errores : Mejor que un buen mensaje de error es un diseño que prevenga que ocurra el error.
Es mejor reconocer que recordar : Este principio hace mención a la visibilidad de las diferentes opciones, enlaces y objetos. El usuario no tiene por qué recordar dónde se encontraba cierta información, o cómo se llegaba a determinada página.
Flexibilidad y eficiencia de uso : El sitio debe ser fácil de usar para usuarios novatos, pero también proporcionar atajos o aceleradores para usuarios avanzados.
Diseño minimalista : Cualquier tipo de información que no sea relevante para el usuario y que sobrecargue la interfaz debe ser eliminada.
Permitir al usuario solucionar el error : Por ejemplo, cuando un usuario introduce una consulta en un buscador y no obtiene ningún resultado, se debe informar al usuario sobre cómo solucionar el problema, por ejemplo con mensajes del tipo "introduzca algún sinónimo" o "quiso Ud. decir...". Además no se debe borrar el contenido de la caja de búsqueda para que el usuario pueda rehacer la consulta.
Ayuda y Documentación : Siempre es mejor que un sitio web se pueda utilizar sin necesidad de ayuda o documentación, aunque en sitios web extensos o en procesos de interacción complejos (como el rellenado de un formulario), se debe proporcionar información de ayuda al usuario.

Modelo según Hassan Montero y Martín Fernández

Aspectos generales : Objetivos, look & feel, coherencia y nivel de actualización de contenidos.
Identidad e Información : Identidad del sitio e información proporcionada sobre el proveedor y la autoría de los contenidos.
Lenguaje y redacción : Calidad de los contenidos textuales.
Rotulado : Significación y familiaridad del rotulado de los contenidos.
Estructura y Navegación : Idoneidad de la arquitectura de información y navegación del sitio.
Layout de la página : Distribución y aspecto de los elementos de navegación e información en la interfaz.
Búsqueda : Buscador interno del sitio.
Elementos multimedia : Grado de adecuación de los contenidos multimedia al medio web.
Ayuda : Documentación y ayuda contextual ofrecida al usuario para la navegación.
Accesibilidad : Cumplimiento de directrices de accesibilidad.
Control y retroalimentación : Libertad del usuario en la navegación.

Criterios de usabilidad en webs de universidades españolas

2010-04-13T05:20:00.000-07:00

Durante el mes de septiembre de 2006 se recogieron los datos referidos a estos 26 indicadores en cada una de las 73 universidades españolas, tanto públicas como privadas, entre las que se pudo observar significativas diferencias en algunos aspectos.

Los indicadores se podrían agrupar en cuatro apartados:

Criterio político en el diseño
Legibilidad
Diseño
Ayuda al acceso a la información

Teniendo en cuenta que según Jackob Nielsen, los hábitos de navegación de los usuarios durante los últimos diez años no han cambiado considerablemente, podemos considerar este estudio como una referencia a tener en cuenta

Estos son los 26 indicadores y los enlaces a los detalles sobre cada uno de ellos:

Criterio político en el diseño:

Organizar según el organigrama jerárquico ordenación de los contenidos no en base a clasificaciones temáticas que puedan ser útiles o entendibles por los usuarios, sino las que se basan en el organigrama jerárquico de la institución, o la Relación de Puestos de Trabajo

Fragmentación del site (diferentes unidades con diferentes webs) Ofrecer un diseño homogéneo en todo un mismo sitio web contribuye a que el usuario tenga claro en todo momento que permanece en el mismo sitio. Para ello no hace falta que las páginas sean prácticamente idénticas, basta con que se repitan una serie de patrones comunes en todas las páginas secundarias, como puede ser una misma barra de navegación o encabezado y el logotipo de la universidad (arriba a la izquierda, por favor), mantener la misma paleta de colores, etc.Según el estudio, apenas el 13% de las universidades privadas cometían este fallo, y que nada menos que el 80% de las públicas sí fallaba en dicho aspecto.

“Saludo del Rector”. ej. www.unex.es

Webs bilingües y páginas intermedias. Según Nielsen, y el sentido común, crear una página intermedia sólo para que el usuario elija en qué idioma quiere interactuar es hacerle perder el tiempo.
Lo ideal es decidir cuál es el la lengua del público mayoritario del sitio y, a partir de ahí, hacer la página en el idioma mayoritario, dejando bien visibles e identificables en la página principal los enlaces para el cambio de idioma.

Webs ‘unilingües’(universidades bilingües con web unilingües). Si mal está ofrecer una página intermedia sólo para elegir el idioma, tan mal o peor es usar un idioma por defecto pero escondiendo el enlace al resto de idiomas supuestamente disponibles (sea o no una decisión política).

Información no relevante en la principal. La página principal es un lugar valiosísimo, el más importante de un sitio web. Se considera mala práctica el amontonar contenido en ella sin dejar espacio en blanco para que la información que hay pueda ser legible. Es preciso, por tanto, seleccionar bien los contenidos que irán en dicha página principal y darles suficiente espacio para facilitar su legibilidad y visibilidad.

Regalar/vender PageRank a Universia. El truco está en que Universia se supone que pide un intercambio de enlaces, pero se lo pide a todas las universidades, es decir, ella recibe centenares de enlaces desde universidades pero sólo aporta un enlace a cada universidad, y nunca desde su página principal.

El resultado de esta práctica es que si, por ejemplo, estamos interesados en realizar un curso de verano en Málaga y usamos Google para localizarlo, llegaremos antes a la página de Universia que a la de la Universidad de Málaga, que es la que organiza los cursos que nos interesaban.

Legibilidad:

Abusar del lenguaje administrativo. Aquí tenemos dos ejemplos

PRESENTACIÓN [utilizando una imagen sin texto alternativo para mostrar ese título, ambiguo y poco informativo]
Recientemente ha comenzado, un año más, el proceso de preparación de la convocatoria de 2005 de las PAU, cuyos primeros signos han sido las reuniones de los Coordinadores (de la Universidad y de Enseñanza Secundaria) con los profesores de los Centros con alumnos que concurrirán al examen.
No parece necesario poner especial énfasis en resaltar la importancia que tienen las pruebas de aptitud para los estudiantes que pretenden el acceso a la Universidad, y también para sus familias por ello, las personas e instituciones encargadas de su elaboración, organización y evaluación realizan un esfuerzo máximo para garantizar su correcta realización.

Admision de Nuevos Alumnos

(excepto Enfermeria)
Curso 2006/2007

DÓNDE
Si quieres cursar una carrera en la UPSA puedes solicitar plaza, que te otorga un derecho de acceso preferente, en el Servicio de Atención al Alumno, donde te explicarán las condiciones de acceso, las ventajas educativas y profesionales y los planes de estudio de cada titulación.

Documentos poco escaneables. Para crear páginas que le faciliten el trabajo al ojo humano se deben emplear párrafos cortos, renglones de ancho medio (60 cpl), listas, negrita, encabezados, tablas de resumen…

Contenido con poco ‘aire’ / Colapso informacional (saturación de contenido). / No dejar respirar a la página. La página principal es la más importante de una página web. El espacio en blanco resulta vital para contribuir a la visibilidad de los elementos y su comprensión. Por tanto, saturar la página principal de contenidos propicia que éstos, o buena parte de ellos, resulten invisibles al lector, que se ve desbordado, sobreestimulado, y termina por no poder rastrear fácilmente sus contenidos.

Diseño:

Pop ups.

Abuso de menús desplegables. Un menú desplegable que aún no se ha desplegado no muestra información alguna. Si, además, no queda claro a simple vista que se trata de un menú desplegable no sólo no se muestra la información en ese momento, sino que puede que mucha gente se quede sin ver nunca los enlaces del menú desplegable, simplemente porque no cayeron en la cuenta de que lo era y que debían pinchar o aproximar el ratón para que se pudiera ver el contenido de éste.

Olvidar la finalidad de servicio (abuso de color, flash y multimedia). ej http://www.umh.es/

Transmitir información sólo con imágenes. No se debe emplear imágenes para mostrar texto, por la sencilla razón de que no todo el mundo puede verlas, en unos casos porque se trata de personas con discapacidad visual, en otros por motivos técnicos, tales como la configuración del ordenador del usuario, una conexión lenta, que el propio usuario desactiva las imágenes o porque utiliza un navegador sólo texto.Por otro lado, si se muestran imágenes que tienen una razón de ser ha de proveerse una alternativa textual para esas imágenes. Si se trata de una imagen meramente decorativa debe mostrarse desde la CSS. Lo que no se debe hacer, en ningún caso, es ofrecer una página llena de imágenes que contienen información sin proveer la citada alternativa textual (la etiqueta “alt” o “longdesc” en su caso).

Tiempos de descarga excesivos (más de 100 kb).

Mala gestión de enlaces (color visitados) .

Uso de frames

No hacer diseño líquido: El problema que suelen ofrecer los renglones cortos es que la vista debe realizar frecuentes saltos de línea y eso resulta cansado. El problema para los renglones largos, en cambio, es que el ojo debe realizar un recorrido excesivamente largo y también termina por hacerse pesado.

Diseño impactante pero despistante

No tener claro cuál es la página principal (redirecciones). El problema de esta acción es doble. Por un lado, puede despistar al usuario, pues él tecleó una dirección y termina en otra distinta. También es posible que si el usuario tiene desactivado el javascript termine sin ver nada. Por si eso fuera poco, si se usa un ‘redirect’ es muy probable que buscadores como Google no se enteren de qué hay en esa página.

Falsa Accesibilidad (Ayudas al tipo de letra y contraste). En nuestra modesta opinión, con este tipo de prácticas, en realidad, se cometen dos errores encadenados. El primero es saturar la página con elementos superfluos, en lugar de destinar esa superfice a contenidos o, mejor, a espacio en blanco para que la página “respire”. El segundo error es presuponer que la página, por defecto, no es lo suficientemente Accesible, y que por ello son necesarias esas ayudas especiales.
Los navegadores ya incluyen la opción de cambiar el tamaño del texto y los diseñadores deberían limitarse a utilizar unidades de medida escalables (%, em…).

ej: http://www.url.edu/

Ayuda al acceso a la información:

Buscadores perdidos o inexistentes. Las web universitarias son, por lo general, muy grandes. Estos sitios web pueden llegar a tener más de 10.000 páginas activas. Además de una buena Arquitectura de la Información, un buen buscador es fundamental para facilitar el acceso a la información, especialmente en los niveles más bajos del sitio.

No tener buscador o esconderlo en las páginas secundarias dificulta el acceso a la información. El buscador debería estar en la página principal, bien visible y, a ser posible, ubicado arriba a la derecha y con un ancho para teclear de más de 20 caracteres.
Ausencia de Teléfono y dir. Postal. Pese a estar en un entorno cada vez más supeditado a la telemática como herramienta de comunicación, la gente común cuando ha de hacer una gestión que considera importante(tal como elegir universidad o matricularse) aún gusta de usar el teléfono o ir personalmente a hacer la gestión o a informarse de la misma.

Ausencia de Rastro de migas de pan o simil El rastro de migas de pan o "bread crumbs" es una de las ayudas a la navegación más útiles y fáciles de entender por el usuario, ya que le facilita ubicarse en la jerarquía del web, brindándole enlaces directos a cada uno de los niveles jerárquicos superiores.

Ausencia de RSS: Básicamente RSS, Really Simple Syndication (Sindicación realmente simple), es un formato basado en el lenguaje XML que permite el acceso a contenidos mediante lectores de RSS, unas herramientas expresamente desarrolladas para este fin.

No utilizar RSS en webs informativas priva a los usuarios de poder enterarse de forma inmediata de los nuevos contenidos de un modo muy simple y cómodo para él.

No diferenciar la intranet del resto: Debe separarse los contenidos que son exclusivos para miembros, que requieren acceso identificado, del resto. Mezclar unos enlaces con otros puede producir molestias y desconcierto en los no miembros.

El 11% de las universidades españolas no diferencia la zona restringida del resto, si bien no detectamos este fallo en ninguna de las privadas (16% en las públicas, 0% en las privadas).

fuente: úsalo

Usabilidad en el color y rotulación de los links

2010-04-13T05:18:00.000-07:00

Según un estudio reciente, El 84% de las universidades hace una mala gestión de los enlaces

Cuando se inventó la web ésta venía con unos cuántos signos distintivos que ayudaban al usuario en su navegación por la red. Uno de ellos era que los enlaces aparecían de color azul y subrayados y que, cuando el usuario pinchaba en ellos, pasaban a tener color morado. Así, además de distiguir lo que era un enlace de lo que no lo era se diferenciaba fácilmente entre los que uno ya había visitado y los que no.

Con el paso del tiempo los diseñadores web descubrieron que era posible manipular ese aspecto y muchos pensaron que no era tan importante el que la gente se las manejara bien en la navegación como que el aspecto de SU página fuera especial, distinto al resto y más atractivo que ninguno. De hecho, en la actualidad son más las páginas que no utilizan el estándar en relación a los enlaces que las que sí lo hacen.

leer más...

La rotulación en los enlaces

A nivel de usabilidad es muy importante que la rotulación de los enlaces sea la correcta. El texto elegido para utilizar como enlace debe describir el contenido de la página que se abrirá al pinchar, incluso si éste se tiene que leer fuera de contexto.

Por ello, jamás deberíamos utilizar la tan extendida práctica de rotular un enlace con un “pinche aquí”, mucho mejor hacerlo con un, por ejemplo, “Imágenes de la Catedral de Burgos”. Ello debe ser así por varios motivos:

Hay herramientas que descontextualizan los enlaces que aparecen en una página y pueden, por ejemplo, agrupar todos los enlaces y luego leerlos todos juntos mediante un sintetizador de voz. Imagínense una de estas herramientas leyendo una sucesión de enlaces de la forma: pinche aquí, pinche aquí, pinche aquí…

Facilita la identificación visual de los enlaces de una página y el contenido que éstos pueden mostrar

Los principales buscadores (vamos, Google) hacen un tratamiento especial de los rótulos de los enlaces. Aunque puede que Google en su lucha contra el google bombing haga perder relevancia al contenido de los enlaces, aún sigue tratando a los rótulos de los enlaces de forma especial.

Ejemplos de malas prácticas

Universidad de León

Universidad de Córdoba

Universidad de Santiago

Posición	Universidad	Fallos
1	Universidad de Córdoba	5
	Universidad de Santiago	5
	Universidad Francisco Vitoria	5
	Universidad Mondragón	5
5	Universitat Jaume I	6
	Universitat Politécnica de Catalunya	6
7	Universidad de la Rioja	7
	Universidad de las Palmas de Gran Canaria	7
	Universidad de Málaga	7
	Universidad de Sevilla	7
	Universidad Camilo José Cela	7
	Universidad de Deusto	7
	Universidad SEK	7
	…/…
63	Universidad de Almería	13
	Universidad de Cádiz	13
	Universidad Internacional de Andalucía	13
	Universidad de Vigo	13
67	Universidad de Cantabria	14
	Universidad Miguel Hernández	14
	Universidad Pablo Olavide	14
	Universidad Rey Juan Carlos	14
	Universidad de Salamanca	14
72	Universidad de Barcelona	15
	Universidad Católica de Murcia	15

Estudio de usabilidad de un site

2010-04-13T03:27:00.000-07:00

Una de las mejores maneras de entender la usabilidad, es viendo o detectando aquellos aspectos de una web que pueden suponer un problema o que en todo caso se podrían mejorar.

Para poder tener una idea clara, he escogido este artículo en el que se analiza una determinada página web y se detallan los defectos de usabilidad

http://www.bilbaobasket.biz/

leer más...

Comenzando por la página de inicio, nos muestra unas banderitas para seleccionar el idioma, al seleccionar uno, se nos abre una ventana nueva, ni siquiera una pestaña nueva. Primer error. ¿Por qué se abre una ventana nueva sin avisar, si el usuario no lo ha solicitado? Esto puede provocar que esa ventana sea bloqueada por el navegador o que se abra en un segundo plano y no nos enteremos.

Una vez abierta, tarda casi 13 segundos en cargar todos los elementos de la página por culpa de las animaciones y transiciones que tiene. Esto es de todo menos usable. A una página web informativa se le pide velocidad y facilidad para encontrar lo que se busca, pero si cada vez que entras tienes que esperar 13 segundos para empezar a buscar lo que interesa, pues lo normal es que te vayas a otra página a buscar esa misma información.

Flash. ¿Por qué se ha elegido el Flash para una web de estas características? Obliga a tener navegadores que soporten flash. No es accesible. No se verá bien en cualquier tipo de dispositivo, habrá que ver cuantos móviles o PDAs pueden cargarla. No deja que los buscadores indexen su contenido. No se puede Avanzar o Retroceder en la navegación y no se puede acceder a una parte en concreto. Estas son solo unas pocas razones para no usar Flash en este tipo de Webs. Pero es que además no permite navegar usando el teclado (Tabulador, Flechas, Enter, etc...)

Sonido. Hay miles de soniditos incómodos mientras navegas por el sitio en menús y botones. Y eso que han mejorado este aspecto, supongo que por las críticas. Cuando la inauguraron, según entrabas empezaban a sonar 2 músicas diferentes, una de fondo y otra de un vídeo, y además los sonidos citados. Ahora han quitado las dos músicas pero siguen los sonidos. Es curioso que tengan un botón de audio para iniciar la música de fondo, no creo que a nadie le interese. Creo que no soy el único que odia estar escuchando música y de repente, al abrir una web, empezar a oir otra música o sonidos raros.

El diseño es estático, no es líquido. Un diseño líquido permite que el contendio se adapte y acople a diferentes resoluciones y tamaños de la ventana del navegador.

No permite aumentar el tamaño de la fuente. Esto se podría haber solucionado facilmente si la web estuviese diseñada en HTML.

Luego hay otros errores no tan de bulto y más rebuscados como que los buscadores no son permisivos con errores tipográficos, es decir, no es lo mismo buscar "Mumbrú" que "Mumbru";

La validación de los datos en los formularios de entrada no es eficiente ni informa de cuales son los problemas;

Cada sección tiene un diseño diferente dificultando al usuario el recordar las interfaces y localizar la información fácilmente;

Existen demasiados elementos gráficos visibles dificultando la focalización del usuario en un solo tema;

Cada vez que se quiere ir a alguna parte hay una transición o loader que ralentiza la navegación exageradamente;

Pese a que se usa un lenguaje directo y no impersonal en unos sitios se nos trata de usted y en otros se nos tutea, etc ...

fuente: http://pitxiflu.blogspot.com

Técnicas para conocer a nuestra audiencia. Web Mining

2010-04-13T02:48:00.000-07:00

El web mining es una técnica de análisis para webs que deriva del data mining. Se usa para el estudio de varios aspectos esenciales de un sitio y ayuda a descubrir tendencias y relaciones en el comportamiento de los usuarios que sirven como pistas para, por ejemplo, mejorar la usabilidad de un sitio.

El data mining se usa para descubrir información, conocimiento disponible pero no visible en documentos de una organización. Se asocia con la minería por la idea de excavar en busca de los datos.

Generalmente se analizan grandes volúmenes de información, utilizando algoritmos y luego se los representa en modelos para que puedan ser analizados. El web mining(minería web) traslada este modelo al análisis de sitios, procesando los datos disponibles para su posterior examen.

leer más...

Como funciona el Web Mining

Cuando un sitio es navegado por los usuarios, los logs de los servidores que lo alojan van guardando información acerca de esa visita:

Qué día y a qué hora un usuario navega por el sitio,
Si es la primera vez que visita el sitio o si es reincidente,
Por qué archivo entra a visitar el sitio y por cual sale,
Cuánto dura la visita y cuanto tiempo pasa en cada página,
De qué país es, qué navegador usa, qué sistema operativo,
Desde donde llega a nuestra página,
Si llegó a través de un buscador, cuáles fueron las palabras clave usadas,
etc.

Los datos almacenados en los logs siguen un formato standard. Una entrada en el log siguiendo este formato contiene entre otras cosas, lo siguiente: dirección IP del cliente, identificación del usuario, fecha y hora de acceso, requerimiento, URL de la página accedida, el protocolo utilizado para la transmisión de los datos, un código de error, agente que realizó el requerimiento, y el número de bytes transmitidos. Esto es almacenado en un archivo de texto separando cada campo por comas (",") y cada acceso es un renglón distinto

Esta información puede ser procesada por programas de estadísticas como awstats, logaholic, webtrends o lyris

awstats

webtrends

logaholic

lyris

Estos programas nos brindan pistas para mejorar un sitio, ya que devuelven información estructurada y significativa acerca de la navegación, por ejemplo:

Cantidad de visitas por hora, por día, por mes, etc.,
horas pico y horas de baja audiencia,
páginas más visitadas,
páginas de entrada y salida más frecuentes del sitio,
uso del buscador, ranking de palabras clave usadas para llegar,
Etc.

Ej. con awstats
demo de webtracks de Lyrics

Entre las técnicas de data mining que más se utilizan en web mining tenemos:

las reglas de clasificación y agrupamiento,
las de asociación y
los sucesos frecuentes

que nos permiten por ejemplo clasificar y agrupar a nuestros usuarios y asignarles patrones de comportamientos según la reiteración de acciones que se detecten como clave y así poder ofrecerles productos o servicios acordes a sus perfiles.

Áreas del Web Mining

El web mining. para mejorar su efectividad, se subdivide en áreas que abarcan el contenido del sitio,
la estructura de navegación y el
comportamiento de los usuarios ante los dos primeros:

Web Content Mining (minería de contenido web). Se centra en el contenido, y podemos obtener datos que acerca de la forma de escribir que es más atractiva para el usuario, de si la catalogación que usamos sirve para mejorar un ranking, si los temas que se tratan interesan o no.

Web Structure Mining (minería de estructura web). Obtenemos información acerca de si los usuarios encuentran la información, si la estructura de sitio es demasiado ancha o demasiado profunda, si los elementos están colocados en los lugares adecuados dentro de la página, si la navegación se entiende, cuáles son las secciones menos visitadas y su relación con el lugar que ocupan en la página central.

Web Usage Mining (minería de uso web). Esta extracción se refiere a patrones de navegación que podemos descubrir en nuestros usuarios y nos pueden servir para mejorar la misma, por ejemplo si el 80 % de nuestros usuarios recurren al campo de búsqueda cuando entran a nuestro sitio es que deberemos poner énfasis en la mejora de esa interfaz y que el motor que se encuentre detrás devuelva la información deseada.

El web mining es en definitiva un análisis significativo de los logs (registros que guardan los servidores) cuyo proceso genera información de valor acerca del sitio y sus usuarios, tales como: patrones de navegación, comportamiento de los usuarios ante cierta indexación de contenidos o estructuras de texto, preferencias del usuario, inconsistencias, etc.

Uso del color en el diseño web

2010-04-12T05:18:00.000-07:00

Los colores nos provocan diferentes sensaciones de las que no somos conscientes.

De una u otra manera nos afectan, pues vivimos rodeados de ellos, y culturalmente se han ido idenficando con muchas de las cosas que nos pasan. Por ejemplo en nuestra cultura el matrimonio o el luto se han asociado siempre a los mismos colores. Desde pequeños los sexos han ido diferenciados por colores.

A continuación veremos una breve explicación de que connotaciones pueden tener los colores en el diseño web.

leer más...

El Blanco

El blanco es luz, bondad, inocencia, pureza y virginidad. Se le considera el color de la perfección.

En publicidad el blanco es asociado con la frescura y la limpieza. En publicidad se utiliza en la promoción de productos de alta tecnología. Puede utilizarse también para comunicar simplicidad

El negro

Representa el poder, la elegancia, la formalidad, la muerte o el misterio.

En una página web puede dar imágen de sofisticación y elegancia, y aumenta la sensación de profundidad y perspectiva.
Sin embargo no es muy recomendable su utilización como fondo de pantalla ya que disminuye la legibilidad.

El azul

Es el color del cielo y del mar, con lo que se lo suele asociar con estabilidad y profundidad.

En publicidad es muy adecuado para presentar productos relacionados con la limpieza y todo aquello que tenga que ver con el cielo, el aire el mar o el agua.

El Rojo

Es el color del fuego y de la sangre, por lo que se asocia al peligro, la guerra, la energía, la fortaleza, la determinación, así como a la pasión, al deseo y al amor.

En publicidad es apropiado para anunciar coches, motos, bebidas energéticas, juegos, deportes de riesgo, etc.

El Naranja

Combina la energía del rojo con la felicidad del amarillo. Es acogedor, cálido, estimulante y muestra una cualidad dinámica, muy positiva y energética.

El color naranja tiene una visibilidad muy alta, por lo que es adecuado para captar la atención y subrayar los aspectos más destacables de una página web.

El verde

Es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.

Ideal para promocionar productos de jardinería, turismo, actividades al aire libre o productos ecológicos.

El púrpura

Aporta la estabilidad del azul, y la energía del rojo. En la antigüedad era considerado el color más bello.

Es un color bastante contradictorio. Sugiere abundancia, sofisticación, inteligencia, espiritualidad, religiosidad, dignidad, pero también puede evocar frivolidad, artificialidad y pomposidad.

El púrpura brillante es ideal para productos dirigidos a la mujer, y también es adecuado para productos infantiles.

Rosa

Utilizado universalmente para el romance y presencia femenina porque sugiere calma y serenidad.

Muy útil para crear una atmósfera relajada, reflejar diversión o mostrar un lado creativo.

El marrón

Puede ofrecer una gran variedad de significados, desde la asociación con la naturaleza, parque u hogar, hasta la vejez.

Tiene connotaciones de calidad, comodidad, es conservador y natural.

En páginas web se utiliza para demostrar formalidad, honradez y experiencia.

Gris

El color gris es un excelente acompañante que ayuda a resaltar los demás colores.

Connotaciones del gris: elegante, fresco, innovador, moderno, futurista, tecnología, espacioso, suave, neutral.

El arco iris

Representa la diversidad y la cultura. Muchos sitios lo utilizan para simbolizar amistad y alegría.

Diverso, multicultural, fantástico, ligero, feliz, amistoso alegre. Puede transmitir también fantasía, orgullo, energía y promesa.

La relatividad de las connotaciones del color

Puesto que el color no será el único elemento del diseño web, debemos considerar estas connotaciones relativas a los demás elementos del diseño, poniendo también especial interés en el significado y la fuerza de las imágenes o de la tipografía.

Si por ejemplo querermos transmitir seriedad o elegancia, podemos aprovechar también una cuadrícula clásica o utilizar una "Times New Roman" en las cabeceras.

Las connotaciones culturales e internacionales del color

Es otro aspecto que deberemos tener en cuenta si se da el caso, por ejemplo en nuestra cultura el color negro se asocia al luto, mientras que en otras se asocia el blanco.

Diferencias por edades

Los niños prefieren colores más brillantes, más sólidos mientras que los adultos prefieren colores más sutiles y complejos. Si estamos diseñando una pagina para ulna audiencia infantil y usamos pasteles o diferentes escalas de grises, puede que les guste más a los padres que a los hijos.

Diferencias culturales o de clases

Estudios de marketing en Estados Unidos han mostrado que las clases trabajadores prefieren colores que se puedan nombrar: azul, rojo, verde. Mientras que clases con un nivel cultural elevado prefieren colores más complejos.

Diferencias de género

En muchas culturas los hombres prefieren colores más fríos ( verdes y azules ) mientras que las mujeres prefieren colores cálidos ( rojos y naranjas ).

Tendencias y modas

Los colores, como cualquier otro elemento del diseño, suben y bajan en popularidad. Las páginas negras estaban de moda hace unos pocos años y ahora es raro ver alguna. El color también cambia según las estaciones, en otras palabras, los diseños reflejan la estación en la que se ha creado el diseño. En invierno negros, blancos y grises, en primavera verdes y colores brillantes, en verano amarillos y en otoño marrones y dorados.

La usabilidad como criterio en premios web

2010-04-08T05:52:00.000-07:00

Una de las webs más reconocidas de premios de sitios web es CSS AWARDS. Nos ofrece una galería con el "site of the day". Se trata de webs diseñadas con hojas de estilo. Para el caso de Flash tenemos otra web no menos buena The FWA.

Dentro del sistema de valoración, una cosa que nos puede interesar es que uno de sus criterios es la usabilidad, esto nos permitirá cotejar y hacernos una idea sobre este aspecto tan importante hoy en día en el diseño web.

¿Cómo podemos ver los diferentes criterios?

leer más...
Según entramos en la home, nos encontraremos con thumbnails que muestran los diferentes sitios del día

Haciendo rollOver sobre cada uno de ellos nos mostrará información sobre el día en que se eligió y la puntuación globla del site.

Haciendo click entramos en la página de valoración del site donde encontraremos los diferentes parámetros que utilizan. Haciendo click en el icono de color rojo, nos mostrará la puntuación que ha recibido el site a nivel de usabilidad, según cada miembro del jurado

Justo antes de la cuadrícula con las diferentes puntuaciones, tenemos una opción que es "select a criteria". Aquí es donde podemos seleccionar entre diseño, creatividad, usabilidad y contenidos.

Está claro que a la hora de aprender usabilidad web, aparte de conocernos la teoría, definiciones, características, etc, otro de los aspectos que nos pueden resultar de gran utilidad es ver aplicaciones reales.

En la foto del ejemplo, la usabilidad es uno de los criterios mejor valorados.

500 iconos gratuitos para web

2010-04-08T05:04:00.000-07:00

Desde el blog de CSS AWARDS nos ofrecen diferentes sets de iconos gratuitos para descargar

http://www.thecssawards.com/blog/free-icons-for-your-web-apps.html