Las interfaces de usuario son muy importantes porque es el medio por el cual se comunican el usuario y la aplicación o dispositivo Jef Raskin comenta “Respecto a lo que concierne al cliente, la interface es el producto”, El usuario ve e interactúa con la interfaz de usuario.

Pero, ¿Que propiedades o características debe de tener una interfaz de usuario?, según [the smashing book] toda interfaz de usuario debe de tener 8 características:

1. Ser Clara. La interfaz evita la ambigüedad haciendo todo claro a través de lenguaje, flujo, jerarquía y metáforas para elementos visuales, las interfaces claras no necesitan manuales y además ayudan a los usuarios a que tengan menos errores mientras las usan.

2. Ser Concisa. Es fácil hacer una interfaz clara etiquetando todo, pero se corre el peligro de poner muchos elementos en la pantalla al mismo tiempo, si hay muchas cosas en la pantalla, es difícil encontrar lo que se busca y la interfaz se vuelve tediosa de usar, el reto real en hacer una gran interfaz es hacerla clara y concisa al mismo tiempo.

3. Ser Familiar. Aunque alguien use una interfaz por primera vez, ciertos elementos pueden ser familiares, se pueden usar metáforas de la vida real para comunicar un significado, por ejemplo, los tabs son comúnmente usados para navegación en los sitios web y en las aplicaciones. Las personas los reconocen como elementos de navegación porque la metáfora del folder es familiar a ellos.

4. Tener buen grado de reacción. Esto significa dos cosas: primero velocidad de respuesta, una buena interfaz no se debe de sentir lenta o pausada, segundo la interfaz debe proporcionar buen nivel de retroalimentación al usuario respecto a lo que está pasando y si el input del usuario ha sido procesado exitosamente.

5. Ser Consistente. Mantener la interfaz consistente a través de las aplicaciones es importante porque permite a los usuarios reconocer patrones. Una vez que los usuarios aprenden como trabajan algunas partes de la interfaz, ellos pueden usar este conocimiento en nuevas áreas porque ellos ya conocen el funcionamiento.

6. Ser Estética. No se necesita hacer una interfaz atractiva para que realice su trabajo, pero haciendo algo que se vea bien, hará que el tiempo que los usuarios gastan usando la aplicación sea más placentero, es bueno tener usuarios felices.

7. Ser Eficiente. Tiempo es dinero y una gran interfaz debe hacer al usuario más productivo por medio de atajos y buen diseño, después de todo este es uno de los principales beneficios de la tecnología, permitir desarrollar tareas con menos tiempo y esfuerzo haciendo gran parte del trabajo por el usuario.

8. Ser Tolerante a fallas. Todos cometemos errores, y él como la interfaz los maneja será un test para la calidad. ¿Es fácil deshacer acciones?, ¿es fácil recuperar archivos borrados? una buena interfaz no debe castigar a los usuarios por sus errores, debe proveer formas para remediarlos.

Diseñar una interfaz que incorpore todas estas características es complicado ya que trabajar en una característica a veces afecta a otra, entre más elementos se agreguen a la interfaz, mas cosas los usuarios tendrán que procesar,  por otro lado no proveer suficiente ayuda y soporte puede hacer que ciertas funciones sean ambiguas, crear algo que sea simple, elegante y al mismo tiempo claro y consistente es la principal  meta para el diseñador de interfaz de usuario.

Existen muchos recursos en línea a continuación listo herramientas, videos y plantillas que pueden ayudar a realizar los prototipos de las interfaces.

Fuentes:

the smashing book

http://speckyboy.com/

Brightcove ofrece la posibilidad de accesar a sus 3 componentes (Media, Pubilshing y Advertising) por medio de API’s.

Una vez creado el player (ver parte uno de este tutorial), lo que debemos hacer es obtener el codigo para publicar el player dentro de nuestra pelicula Flash, La consola de Brightcove ofrece 4 formas distintas para publicar nuestro player:

  • JavaScript, nos genera el codigo javascript necesario para incrustarlo en una pagina html.
  • ActionScript, nos genera codigo actionscript 3.0 para insertarlo en un archivo AS.
  • HTML, nos genera codigo HTML para publicarlo en sitios que no acepten codigo javascript como es el caso de myspace o facebook que tienen sus propias maneras para manejar los escripts.
  • Publishing URL, nos genera la URL para ligar el player desde cualquier sitio, email, blog.

Para mas información acerca de los métodos de publicación y como hacerlo  visitar esta liga.

Una vez que tenemos el codigo de publicación en ActionScript, vamos a crear un arhivo nuevo de tipo AS y lo vamos a pegar ahi,  y lo vamos a guardar con el nombre de BrightcovePlayer.as

La estructura de los movieclips que vamos a utilizar es la siguiente:

Nombres de las instancias (click para ver en grande)

Nombres de las instancias (click para ver en grande)

EL Player API

El Player API se usa para presonalizar, integrar con aplicaciones y agregar funcionalidad a los players de Brightcove, permite accesar y controlar a el player y a sus componentes por medio de JavaScript o ActionScript, utilizando las  propiedades, métodos y eventos con los que podemos manipular los controles del  player,  y los videos que es el tema de este tutorial,  para una referencia completa de los métodos y eventos que soporta cada componente visitar http://help.brightcove.com/developer/docs/playerapi/PlayerAPI/index.html.
*(Hay que recordar que debemos tener activa la casilla del API del player visto en la parte 1 de este tutorial)

El API se divide de módulos para mejor organización de los métodos y eventos, los que vamos a utilizar en este tutorial son:  El módulo de experiencia, el módulo de menu y el módulo de video player.
A continuación listo los  modulos del Player API si quieren conocer mas a fondo cada uno den click:

AdvertisingModule API para manejo de caracteristicas de anuncio.
APIModule Clase abstracta para todos los modulos.
ContentModule API para manejo de la obtención de contenido.
CuePointsModule API para manejo de cue points en el video.
ExperienceModule API para manejo de reproducción del video.
MenuModule API para manejo de la iteracción del menu (controles).
SearchModule API para manejo de métodos de busqueda.
SocialModule API para manejo de características sociales.
VideoPlayerModule API para manejo de reproducción de video.

Entonces recapitulando:

En Brightcove Studio:

  • Obtener el codigo de publicación.
  • Habilitar las APIs
  • Obtener Id de un video.

En Flash/ActionScript

  • Crear BrightcovePlayer.as (en la misma carpeta o en otra pero especificando el classpath en la pelicula)
  • Obtener referencias a los componentes del player.
  • Cargar el contenido.
  • Escuchar por interacciones del usuario.

En la programación para el API

  • Crear el objeto experiencia
  • Escuchar el onTemplateLoaded
  • Escuchar onTemplate Ready
  • Escuchar onContentLoad
  • Escuchar onVideoLoad

A tirar código (por fin)

Para empezar hay que bajar el archivo con el que vamos a trabajar lo pueden bajar de http://www.juan-anzaldo.com/blog/tutorialBCCustomControls/player_a.zip, ya esta estructurado para que solo tengamos que escribir el codigo.

Abrimos el archivo player_a.fla y si se fijan la estructura es igual a la imagen mostrada previamente, vamos a localizar el layer BCPlayer que esta en la siguiente ruta player_mc->videoDisplay_mc y en el primer keyframe vamos a escribir el código necesario para crear los objetos con los que vamos a referenciar a los modulos y luego crearemos una instancia llamada player  de la clase de BrightcovePlayer y despues lo agregaremos al movieclip con el método addChild. Todo esto repito en el keyframe del  layer del movievlip videoDisplay:

var mPlayer:Object;
var mContent:Object;

var mExp:Object;
var mMenu:Object;
var player:BrightcovePlayer = new BrightcovePlayer();
addChild(player);

Una vez escrito esto debemos crear un listener para el primer evento que se dispara cuando instanciamos la clase BrightcovePlayer que es el de templateLoaded. y lo escribimos así:

player.addEventListener(“templateLoaded”, onTemplateCargado);

Este evento es el primero que se dispara cuando creamos la instancia player,   una vez disparado, creamos las referencias a los demas modulos que necesitamos (para controlar los botones y tocar el video) y creamos ademas  otro listener para saber cuando el template esta listo,  templateReady, este evento es disparado cuando el player termina de inicializarse y esta listo para una interacción completa.

function onTemplateCargado(evento:Event):void
{
trace (“01. Se cargo el template”);
mPlayer = player.getModule(“videoPlayer”);
mContent = player.getModule(“content”);
mExp = player.getModule(“experience”);
mMenu = player.getModule(“menu”);
mExp.addEventListener (“templateReady”, onTemplateListo);
}

Despues crearemos la funcion que se ejecuta una vez que el evento templateReady es disparado y crearemos dos listeners una para cuando se carge el contenido y el otro para cuando se carge el video.

function onTemplateListo (evt:Event):void
{
mExp.addEventListener (“contentLoad”, contenidoCargado);
mContent.addEventListener (“mediaLoad”, videoCargado);
}

contentLoad Se dispara cuando el player cargó los metadatos del contenido inicial.

mediaLoad Se dispara cuando el video es cargado por medio del método getMediaAsynch.

Cargar contenido se logra llamando funciones del Content module, el player carga el contenido programado a el, este contenido puede ser obtenido de manera sincrona usando el metodo getMedia. Pero como en este caso queremos obtener contenido de la base de datos que no ha sido cargada al player, debemos hacer una petición asincrona, utilizaremos el método getMediaAsynch y lo utilizaremos dentro de  la función  contenidoCargado (manejadora del evento contentLoad del modulo de experiencia), además agregaremos dos listeners mas que pertenecen al módulo de VideoPlayer:  mediaBufferBegin mediaBufferComplete, el primer evento se va a disparar cuando empieza a guardar en el buffer del video actual pausando la reproducción del video  y el segundo se dispara cuando termina el almacenamiento del  buffer del video y continua la reproducción, estos eventos son importantes para indicar al usuario que esta viendo el video que el contenido se esta cargando y tenga la retroalimentacion adecuda.

function contenidoCargado(evento:Event):void
{

trace (“02. Se cargo el contenido”);
mContent.getMediaAsynch(123456789,”id”);  <—– escribe  el numero de  id de video correcto de tu consola Brightcove
mPlayer.addEventListener(“mediaBufferBegin”,comienzaBuffer);
mPlayer.addEventListener(“mediaBufferComplete”,terminaBuffer);
}

El método getMediaAsynch recibe dos parametros, el primer parametro es el id del video que queremos tocar, y el segundo pueden ser dos valores (“id” ó “referenceId”) depende de como solicitemos el video, aclarando que si es por medio de referenceId entonces el primer parametro debe ser un valor de tipo  texto osea entrecomillado y si es id el valor es numerico.

Y finalmente para esta parte del tutorial escribimos los manejadores para los otros dos eventos que necesitamos mediaBufferBegin y mediaBufferComplete, lo unico que hacen estas funciones es poner visible e invisible el movieclip de buffering. Y tambien escribir el manejador para el evento mediaLoad del modulo de content definido en la funcion  onTemplateListo.

function comienzaBuffer (evt:Event):void
{
trace (“      Comienza el buffering.”);
MovieClip(this.parent).buffering_mc.visible = true;
}
function  terminaBuffer (evt:Event):void
{
trace (“      Termina el buffering.”);
MovieClip(this.parent).buffering_mc.visible = false;
}

function videoCargado(evento:Event):void
{
trace (“03. Se cargo el video.”);
}

El evento mediaLoad sirve para saber cuando  se cargo la DTO del video desde el servidor y esta listo para ser visto.

El player recive los datos desde el servidor en forma de transferencia de objetos de datos (DTOs, Data Transfer Objects). Cada uno de esos objectos contiene una colección de propiedades que tienen los metadatos para el video, playlist u otro objeto. Todos los valores son obtenidos pero no puestos,  para mas información ver esta liga

Bien, si todo está correctamente entonces debe de verse de la siguiente manera (con su video).

http://www.juan-anzaldo.com/blog/tutorialBCCustomControls/tutorialBGCustomControls_parte1.html

Si no, entonces pongan el comentario de cual es su problema y trataré de ayudarlos,

en la siguiente parte de este tutorial mostraré la programación para los botones que van a manipular a el player.

Surviving (and thriving in) the online identity wars fué otra conferencia que asisti en el marco del  Web2.0 expo en esta platica de Joseph Smarr de Plaxo da algunos puntos para lograr un mejor desarrollo de sitios sociales como  por ejemplo:

  • Personalizar la experiencia de usuario para cada proveedor que mejor se adapte al target de usuarios de nuestros sitios  (FB, MySpace,Twitter, linkedin…) dentro de el sitio (como ejemplo plaxo).
  • Utilizar openid para enlazarse con esos proveedores.
  • Implementar FB Connect y Open Stack o utilizar terceros ( RPX, Google Friend Connect)
  • Enfocarse en generar flujos de actividad para correr el virtuoso ciclo de que están haciendo los usuarios en mi sitio.
  • Utilizar todos los medios de distribución posibles, trabajar con la mayoria de los lectores de feed del web.
  • Construir API’s alrededor del contenido único del sitio y servicios y hacerlo con los estandares comunes.
  • Utilizar OAUTH.
  • Poner mucha atención en el Web  que rapidamente evoluciona.

La platica como todas fué  muy interesante, dejo en claro algunos conceptos  y reafirmo como se estan construyendo muchos sitios sociales proveiendo API´s para que los usuarios o desarrolladores puedan utilizar sus objetos sociales en otros sitios web,  Flash lanzo hace poco un API  que se llama AS3 Facebook API para poder construir aplicaciones Flash-Flex-AIR utilizando llamadas directas a Facebook,  soporta 3 API’s (Canvas, Connect, y Desktop). Para mas información pueden ir directo al sitio de adobe donde esta mas detallada la información

http://www.adobe.com/devnet/facebook/

o para  empezar a desarrollar ir a

http://code.google.com/p/facebook-actionscript-api/

La presentación.

Otro taller del que tuve la oportunidad de asistir en el marco del web 2.0 expo  fue el de “Designing Social Web Sites” impartido por Christina Wodtke autora del libro Information Architecture el cual me regaló  una  copia  por una participación que tuve en el taller :) ,  Christina definió web social como un espacio digital en donde los datos acerca de las interacciones humanas son tan importantes como otros tipos de datos.

Mostro una ecuación (Lewin’s Equation)que dice que el comportamiento es una función de una persona y su ambiente (Behavior is a function of a person and his enviroments), el ambiente es la parte que nosotros diseñamos.

B = f(P+E)

Hablando de comportamiento menciono un post de thor muller en donde comenta 13 razones de mal comportamiento según el equipo de facebook y que deshabilita la cuenta.

Recomendo también dos libros:  Made to stick de Chip Heath y Dan Heath y A pattern language de Christopher Alexander los cuales son de gran ayuda para tener un mejor entendimiento y poder conceptualizar mejores sitios web sociales de acuerdo a comportamientos de personas.

Comento que los espacios sociales estan relacionados con tres factores importantes: Identidad, Relaciones y Actividades.

  • Con la identidad estan relacionados tres temas: Perfil, Presencia y Reputación y recomendo leer acerca de Clay Shirky y su plática: A group is its own worst enemy, la dinámica en esta sección fué la de formar un grupo de 3 personas y responder cada uno: que elementos necesito para creare o mejorar la identidad, perfil, presencia y reputación dentro de los sitios en los cuales trabajamos.
  • Con la sección de  relaciones estan agrupados otros tres temas: Atención, Grupos y Contactos. En esta sección la dinámica fué responder dentro del mismo equipo de 3 personas que tipos de relaciones soportan o soportaran los sitios en los que trabajamos. Habló sobre diferentes sitios como  43things o dogster,  en los cuales la gente se relaciona con diferentes temas y se crean grupos relacionados a un mismo interés.
  • Y con la sección de Actividad agrupa otros tres que son compartir, colaborar y comunicar, hablo sobre la identificación de los objetos sociales y actividades que se realizan dentro de un sitio web, la pregunta de la dinámica fué la de identificar quienes eran los usuarios de los sitios que desarrollamos, que es lo que hacen esos usuarios dentro del sitio y definir cuales eran las actividades de estos sitios.

Putualizo que lo mas importante que debemos hacer a la hora de diseñar sitios web sociales es basicamente:

  • Identificar los objetos sociales que van a interactuar con los usuarios del sitio.
  • Seleccionar las caracteristicas del sitio.
  • Crear conexiones emocionales con los usuarios. (tomando en cuenta normas y administración comunitaria)

Un enlace que recomendó y que en lo personal me gustó mucho es el de bokardo.

Christina Wodtke Firmando el libro que me regalo :)

Christina Wodtke Firmando el libro que me regalo :)

Celebrando el regalo con una cervecita en la cantina mas cercana al Moscone West Center

Celebrando el regalo con una cervecita en la cantina mas cercana al Moscone West Center

Presentacion

Acerca de redes sociales y solo por diversión… http://www.youtube.com/watch?v=nrlSkU0TFLs

Dentro del marco del Web2.oExpo, tuve la oportunidad de asistir a el taller de Erin Malone y christian Crumlish que se llamó:

Designing Social Interfaces: Principles, Best Practices and Patterns for Designing the Social Web.

comentaron primeramente las 4 partes para diseñar un patron:

  • Que : Definir el problema, que es lo que el usuario quiere hacer, ejemplos visuales.
  • Cuando: Cuando el usuario  usará la solución, esto es el contexto.
  • Cómo: es la solución detallada que decisiones en la interfaz necesitan hacerse, que elementos necesitan existir, que comportamientos necesitan ser soportados.
  • Porqué: el porque es importante el uso de la solución ó porque es la solución correcta

Un patrón describe una solución optima para un problema común dentro de un contexto específico, un tema bastante importante en estos tiempos de Web 2.0 es el diseño social, ellos hablaron de patrones de diseño social como colaboración, identidad, participacion, reputación, presencia, marketing, social networking por mencionar algunos.

A continuación muestro dos diagramas que mostraron en la presentación que me parecen muy importantes para ejemplificar mas a detalle,  el primero es un ecosistema de media social y el segundo como implementar lo social en las empresas.

 Ecosistema de media social

 

Patrones sociales para las empresas.

Patrones sociales para las empresas.

Ellos estan desarrollando una wiki de patrones para desarrollo social (ir ahora) los cuales estan en un libro que proximamente saldrá a la venta, hablaron de los principios, representaciones del ser (self), actividades que involucran a objetos sociales y dinamicas de grupo.

Dentro de los principios hablaron sobre:

  • Diseñar para todos.
  • Hablar como persona.
  • Ser abierto.
  • Ser un juego.
  • Etica.
  • Email.
  • Cargo Cult antipattern (ver definición)

Dentro de la representación del ser hablaron sobre:

Algunos de los patrones de los que mencionaron en esta parte fueron: Signup, sign in, invitaciónes, profiles, avatar, etiquetas, disponibilidad)

Dentro del tema de  Actividades con objetos sociales hablaron sobre:

  • Colecciones.
  • Publicación y transmición.
  • Comunicación.
  • Retroalimentación.
  • Compartir (sharing).
  • Colaboración.
  • Media Social.

Y sobre dinámicas grupales hablaron sobre:

  • Relaciones.
  • Grupos.
  • Moderadores de comunidades.
  • Lugares, geo-locaciones.

Y finalmente explicaron posibles escenarios y que patrones utilizar en cada caso, un taller bastante interesante muy entretenido y  con mucha nformación útil por parte de los autores, en lo personal creo que es muy importante a los que desempeñan cualquier tipo de actividad para Web, conocer estos patrones ya que nos ayudan bastante para conceptualizar nuevos proyectos orientados a web 2.0.

Ligas:

Sobre los Patrones y los autores. http://www.designingsocialinterfaces.com/patterns.wiki

Presentación: http://www.slideshare.net/emalone/social-patterns-talk-web-20-version

 Ver mas presentaciones de Erin Malone.

En libro de Designing Web Interfaces de Bill Scott y Theresa Neil hablan de 6 Basicos principios cada uno con patrones ejemplificados con explicación e imagenes.

Los Seis principios que hablan son:

1. Ser directo (Make it direct)

El principio de WYSIWYG  -What you see is what you get- (Lo que tu ves es lo que obtienes) ha sido probado una y otra vez a travez del último cuarto de siglo. Los patrones que cubre este principio son:

  • Permitir a los usuarios editar contenido directamente en contexto (Edición en página). ver ejemplos
  • Control de interface con Drag and Drop, ver ejemplos y
  • Manipulación objetos directamente (Selección directa) ver ejemplos

todos estos patrones trabajan hacia la creación de una interface inteligente.

 2. Mantenerlo ligero (Keep it Lightweight)

Respetar el nivel de esfuerzo del usuario es la llave para producir una interfaz sin esfuerzo.
Entender la intención del usuario y proveer solo la cantidad justa de interfaz (Herramientas contextuales) en el contexto actual es critico para proveer una experiencia ligera.

3. Estar en la pagina (Stay on page)

En lugar de quebrar el flujo de trabajo del usuario con refrescamientos repetidos de paginas, podemos crear una experiencia que se acerque mas al flujo del usuario.
El uso correcto de Overlays, Inlays, Virtual Space, y Process Flows es integral a para asimilar la manera que el usuario quiere trabajar – no la manera en que los forzamos a trabajar en el pasado.

 4. Proveer una Invitación (Provide an Invitation)

Con un arreglo de interacciones a nuestra disposicion, es mas facil tener la mayoría de nuestras caracteristicas sin que se noten o sin usarse.
Affordance Invitation, Call to Action Invitation, Blank Slate Invitation, Tour Invitation, Hover invitation, Drag and Drop Invitation, Interface invitation y mas Invitaciones de contexto se invita al usuario a explorar nuevas maneras, mejorando su experiencia promedio.

 5. Usar Transiciones (Use Transitions)

No solo para los banners, las trancisiones son necesarias para crear una mejor comunicación y relación con los usuario, con una gran cantidad de efectos a nuestra disposicion (Brighten and Dim, Expand/Collapse, Self healing, Animation, Spotlight, Lightbox Effect, Face-plate, Flip, Carousel, Accordion, Slide In and Slide Out, ans Zoom), podemos saturar al usuario con animaciones locas o podemos usar estos efectos para explicar comportamientos, mostrar relaciones, obtener la atención del usuario, mejorar el desempeño, y crear la ilusión de un espacio virtual.

6. Ser reactivos (Be reactive)

Para cada acción debe haber una reacción opuesta igual, esa es la física de nuestras interfaces, Proveiendo: Auto Complete, Live Suggest, Live Search, Refining Search, Live Priviews, Progressive Disclosure, Progress Indicators, and Periodic refresh, de herramientas para crear una viva y reactiva interface.

Ejemplos de Lookup Patterns

Ejemplos de Feedback Patterns  

Bien en general esto es lo que cubre el libro explicando a mas detalle cada uno de estos principios, me gusto mucho pueden Ver sitio del libro o pueden ver muchos ejemplos graficos en el sitio de flickr del libro en donde los albums estan organizados por Prinipio y por patron, aparte de que en los albumes finales encontrarán muchos videos adicionales.

Se los recomiendo!

Este tutorial consta de 3 partes.
Brightcove es una plataforma de video que se basa en tres componentes principales:

  • Media que administra los videos crea playlist y los relaciona con los players.
  • Publishing que administra los players (para crear, editarlos o darles un estilo personalizado)
  • Advertising que administra la publicidad en los videos y players(controla, configura y activa)

Este tutorial abarca un poco de BEML y el API del Player de Brightcove

Antes de empezar.

En la consola despues de subir el video, tenemos que crear un playlist y agregar manualmente el video que se desea ver en el playlist esto se hace en el modulo de Media de la consola de Brightcove para mas información sobre como hacer esto pueden visitar el sitio de developer de Brightcove o visitar el getting starter del modulo media.

Creación del player.

A pesar de que Brightcove (BC) maneja la posibilidad de crear diferetnes templates de player y poderles dar estilos de color forma y tamaño, agregar listas (1 o varias), o agregar thumbnails, hay ocasiones en que necesitamos la creacion de un player diferente a lo que las opciones de BC nos ofrecen, en la imagen podemos ver la arquitectura de un player de BC

Elementos que componen a un player de BC

Elementos que componen a un player de BC

  • IMAGE Para la inclusion de un banner publicitario en la parte superior.
  • VIDEOPLAYER es el player y elemento principal se compone del video y los controles
  • TABBAR es en donde apareceran en forma de tabs los playlist relacionados con el player
  • LIST es la lista de videos relacionados al playlist seleccionado
  • LABEL en donde aparece el titulo y descripción del video
  • LINK Liga del video
  • IMAGE Para la inclusion de banner publicitario

ir a la explicacón de los players de Brightcove

como lo que vamos a hacer es crear controles para el manejo de video (play, pause, stop, mute, link, share) personalizados y con diseño diferente a los que trae ya por default BC, entonces crearemos un player template derivado del template videoPlayer el cual solo tiene el vizualizador y los controles. Mas información sobre la creación de templates

Una vez creado el template, necesitamos dejarlo solo con la pura pantalla y quitarle los controles, para esto Brightcove nos ofrece un lenguaje de marcado llamado BEML (Brgightcove experience markup language), BEML es un lenguaje que nos permite especificar los elementos de un playe por marcas o etiquetas, para especificarle la etiqueta seleccionamos el template que acabamos de crear y le damos clic en el boton de editar, al darle click nos aparecerá una ventana en donde esta el nombre, la descripcion, las medidas (alto y ancho) y el codigo fuente del template, en este caso es:

<Runtime>
<Theme name=”Deluxe” style=”Light”>
<Style id=”default”><![CDATA[.titleText {fontSize: 12;}.bodyText {fontSize: 10;}.linkText {fontSize: 10;}]]></Style>
</Theme>
<Labels>
<label key=”controls play”>toca el video!</label>
</Labels>
<Layout id=”application” width=”798″ height=”603″ boxType=”vbox” padding=”6″ gutter=”4″>
<HBox height=”406″ gutter=”6″>
<VideoPlayer id=”videoPlayer” width=”480″ video=”{videoList.selectedItem}”/>
</HBox>
<VBox gutter=”15″>
<HBox height=”32″>
<Spacer width=”6″/>
<VBox>
<TitleLabel height=”24″ width=”765″ id=”videoTitle” text=”{videoPlayer.video.displayName}” selected=”true” size=”18″ truncate=”true”/>
</VBox>
</HBox>
</VBox>
</Layout>
</Runtime>

No voy a entrar en detalles sobre BEML pero para una referencia completa pueden visitar la página de BEML que esta en el centro de ayuda de Brightcove ir ahora

Lo que si voy a cometnar es lo que bamos a cambiar

<Runtime>
<Theme name=”Deluxe” style=”Light”/>
<Layout>
<VBox padding=”3″>
<VideoDisplay id=”videoPlayer”/>
</VBox>
</Layout>
</Runtime>

Como lo unico que necesitamos es el display del video entonces borramos los elementos adicionales y cambiamos la etiqueta

<VideoPlayer id=”videoPlayer” width=”480″ video=”{videoList.selectedItem}”/>

por esta otra

<VideoDisplay id=”videoPlayer”/>

Básicamente la etiqueta VideoPlayer contiene al display y a los controles, como los controles los vamos a hacer personalizados entonces solo necesitamos el player con el display del video.

Una vez creado el template vamos a crear un player que derive de ese template que acabamos de crear.

Configuración del player

Una vez creado el template y el player necesitamos especificar ciertas caracteristicas, Brightcove nos ofrece la posibilidad de accesar a los eventos y propiedades del player por medio del API del Player que podemos programar por medio de ActionScript y Javascript para mas informacion sobre todos los eventos y propiedades del player pueden visitar la pagina del api del player de BC

Entonces seleccionamos el player que acabamos de crear y le damos click en el boton de settings, en la vetnana que nos aparece y en la pestaña de GLOBAL nos aseguramos que este palomeada la opcion de enable ActionScript/JavaScript APIs esto es muy importante ya que si no esta habilitada esta opcion no vamos a poder extraer informacion del player ni disparar eventos (start, pause, stop) que es lo que necesitamos para nuestros controles personalizados.

Despues en la pestaña de VIDEOPLAYER vamos a configurar lo siguiente:

En la parte de Auto play vamos a desactivar la opcion de Automatically page video on page load
En la parte de Brightcove Branding vamos a palomear la opcion de Disable Brightcove menu
En la parte de Overlay menu vamos a palomear la opcion de disavle overlay menu
Y finalmente en la parte de viral promotion tools vamos a palomear las tres opciones que aparecen.

Despues grabamos los cambios.

Bien con esto finalizamos la primer parte que corresponde a la parte de la consola de Brightcove la segunda parte de este tutorial cubrirá todo lo relacionado del lado de la programacion flash, la inclusion del player y el cargado y reproducción del video.

ir a segunda parte

Ladrones contra policias en chihuahua Martes 17 de febrero

Ladrones contra policias en chihuahua Martes 17 de febrero

Saldo

Ladrones 5.

Policias 3.

En este post, incluyo la charla de la conferencia que impartí en el Simposium Internacional de Informática y Computación 2008 (SIINCO 2008) del Instituto Tecnológico de Chihuahua II.

INTRODUCCION

WWW

En La era de la información en que vivimos poco a poco nos hemos ido adaptando al utilizar nuevas tecnologías para mantenernos informados acerca de las circunstancias en que vivimos

En su nivel más básico, todas las actividades que realizamos en esta era de la información son posibles gracias a la generación, procesamiento, transmisión, y obtención de información,  todo esto se hace sobre 5 pilares esenciales según Michael Dertouzos:

1. Toda la información son números.
2. Esos números son unos y ceros.
3. Las computadoras transforman la información ejecutando operaciones aritméticas sobre estos números.
4. Los sistemas de comunicación  transportan la información, moviendo estos números.
5. Las computadoras y los sistemas de comunicación se combinan para formar redes de computadoras, las bases de las infraestructuras de la información.

Conocer esto, es equivalente a saber que las llantas, la gasolina, el motor y el chasis son necesarios para hacer un carro, pero para realmente saber cómo trabaja un carro y cómo podemos hacer uso de él, necesitamos conocer como el motor convierte la gasolina en el poder que rueden las llantas que hace que el chasis se mueva y nos lleve a donde nosotros queramos.

En esta plática conoceremos los pilares del World Wide Web, sus componentes básicos y las tecnologías que se están desarrollando actualmente.

ANTECEDENTES

Hipertexto

El concepto de hipertexto ha sido usado para reagrupar una serie de documentos semejantes sobre la base de semejanzas o diferencias de múltiples maneras

Estudiosos han investigado por milenios la forma para buscar e identificar piezas de información relacionada, con o sin referencias explicitas.
Se han inventado esquemas de referencia como libro/capitulo/numero de verso, también se ha inventado los pies de pagina, índices, tablas de contenido, todos estos inventos han servido como medios  para vincular lugares en un espacio de información.

Hipertexto es la habilidad para expresar relaciones entre lugares en un universo de información, un lugar debe ser una pieza de información o por lo menos cualquier cosa que exista en una forma estable o recuperable.

Vannevar Bush

Un importante científico en la industria militar de los EU en los tiempos de la 2 guerra mundial y la guerra fría, fue un participante importante en la organización del proyecto Manhattan, este proyecto consistió en la elaboración de las bombas atómicas de Nagasaki e Hiroshima.

A VB  se le acredita la noción moderna de hipertexto, en 1945 escribió un artículo llamado As we may think en donde conceptualizó el memex, una maquina fotoelectromecánica  para guardar, consultar y ligar información usando microfilmes y computación análoga. VB,

Doug Engelbart

El primer programa de hipertexto fue NLS (oNLine System) que Doug Engelbart desarrolló en el instituto de Stanford en 1960, la visión de Doug Engelbart era  que las personas utilizáramos el hipertexto como una herramienta de trabajo en grupo, para ayudarse a mover el cursos de la computadora a través de la pantalla y seleccionar las ligas de hipertexto con facilidad invento un bloque de madera con censores y una pelota por dentro el cual hoy en día conocemos como mouse, el fue un gran inventor del siglo pasado algunos de sus inventos fueron el procesador de textos, la primer videoconferencia.
 Sus esfuerzos se centraban en que las personas se  pudieran comunicar con las computadoras de una manera muy natural.

Ted Nelson

Ted Nelson tenia la visión de una sociedad utópica en la cual toda la información del mundo pudiera ser publicada en hipertexto  para que pudiera ser compartida y que toda la gente se comunicara como iguales, a él se le atribuye el termino hipertexto, ha escrito numerosos artículos, también se le atribuye la creación de la disciplina HCI (Interacción Humano-Computadora) y desarrollo Xanadu.  En Xanadu  confluyen las teorías de Vannevar Bush y Douglas Engelbart. Su objetivo es la potenciación del intelecto humano, ser simple y poder ser usado por cualquier ser humano, y además que permita convertirse en programas de gran complejidad.

Por supuesto un gran invento en la conquista por la conectividad global fue el internet, una infraestructura general de comunicaciones  que liga a las computadoras y sobre la cual el web corre, el internet es un conjunto de protocolos estandarizados que dictan como se envían los datos de una PC a otra, estos datos son transmitidos a través de transportadores como líneas de teléfono, cable, canales de satélite.

 

 

 

Tim Berners Lee.

Nació en Londres Inglaterra, graduado del Queens College de la universidad de Oxford, Tim Berners-Lee comenzó con una idea: crear algo para hacer más fácil la vida, y mejorar la manera de compartir ideas entre las personas.  En pocos años esa idea se convirtió en algo indispensable para la mayoría de la gente, que no puede vivir sin ella.  El surgimiento del Web comenzó en 1980 en el CERN, el laboratorio europeo de Física en partículas ubicado en suiza.
En el CERN trabajaban alrededor de 3000 científicos de diferentes nacionalidades, los científicos llegaban al CERN de varias universidades, utilizaban los equipos del CERN y se regresaban a sus laboratorios para analizar los resultados y sacar conclusiones, la primera asignación de Berners Lee en el CERN fue el desarrollo de un sistema para almacenar la información acerca de que computadoras utilizaban cuales científicos y en qué proyectos estaban trabajando, a este sistema lo llamó enquire por una enciclopedia que él veía de niño, y se le conoce como el primer prototipo del web, este sistema no usaba árboles ni estructuras para guardar la información utilizaba ligas de hipertexto.
Las ligas eran de dos tipos internas y externas, la diferencia era que las internas se ligaban a una página (nodo)  dentro de un archivo y las ligas externas se ligaban a otros archivos, otra diferencia era que las ligas internas aparecían en los 2 nodos mientras que las ligas externas solo tenían una dirección.

A Tim Berners Lee, le gustaba la idea de que una pieza de información es realmente definida solo por lo que está relacionado a ella y la manera en cómo está relacionada. Por ejemplo como las neuronas en nuestros cerebros, las neuronas son solo celdas, el cerebro no tiene conocimiento hasta que se forman las conexiones entre nuestras neuronas, todo lo que conocemos y lo que somos viene de la manera en como las neuronas están conectadas.

Posteriormente Berners-Lee termino  su estancia en el CERN pero volvió 4 años después.
En 1989 el CERN era el nodo más grande de internet en Europa y Berners Lee tuvo la visión de unir el Internet con el hipertexto, formuló una propuesta pero no fue muy aceptada, en septiembre de 1990 Berners Lee y su Jefe fueron  a Versalles a una conferencia de tecnologías de hipertexto para conocer los productos que ya estaban en el mercado y se intereso por dos, uno de una compañía llamada OWL LTD un producto que se parecía mucho a lo que TBL había pensado de un navegador Web,  era un programa que abría y desplegaba documentos cuando se le daba clic en una liga de hipertexto, pero la gente de OWL  no se interesó mucho. También le gustó otro de Dynatext Electronic Books ellos tampoco se interesaron en la propuesta de TBL, ellos insistían en una base de datos centralizada de links para asegurarse que no hubiera ligas rotas, aparte querían mandar aplicaciones compiladas en su caso libros completos, cuestión que chocaba con la visión de TBL de un mundo vivo de hipertexto en el cual todas las páginas estuvieran cambiando constantemente, debido a las decepciones decidió crear el Web por sí solo, en octubre de 1990 comenzó a escribir el código para el web.

Lo primero que escribió fue el cliente web, después el protocolo http junto con el URL.

COMPONENTES

URI-URL.

Son cadenas que se utilizan en lugar de instrucciones y contiene todos los detalles esenciales para la obtención de recursos de una manera compacta. En estas cadenas las diagonales son usadas para delimitar sus partes, la primer parte es el esquema o protocolo de comunicación para buscar un documento, la parte siguiente identifica el servidor en donde el documento existe y la siguiente la ubicación del recurso en el servidor.

HTTP  

Es el protocolo para la transferencia de hipertexto y de otro tipo de documentos en el Internet, consiste de un intercambio de mensajes de petición y de respuesta, Los mensajes de petición de un cliente empiezan  con un código de operación (conocido como método) y el URI del objeto. Los mensajes de respuesta de un servidor comienzan con un código de estatus e información acerca del recurso.

HTML

Es una manera sencilla de representar hipertexto, algo importante acerca de HTML es que debe llevar solo la estructura de un documento hipertexto ,  no los detalles de su presentación, esta es la única manera de desplegar razonablemente en cualquier variedad de pantallas diferentes.
HTML está basado en el estándar generalizado de lenguaje de marcado (SGML)  un estándar para publicación de documentos por la comunidad de hipertexto.

HTML está definido como un lenguaje de comunicación el cual corre a través de la red pero no hay un requerimiento de que los archivos sean almacenados en formato HTML. Como los lenguajes dinámicos con otro tipo de formato pero al final convierten su salida a código HTML.

CSS

El principio principal detrás de la independencia de dispositivos y accesibilidad, es la separación entre la forma  en cómo está estructurado un documento y el contenido  del mismo, donde el significado de un documento es guardado por separado de la manera en que debe desplegarse.
La independencia de dispositivos y la accesibilidad son mas fáciles de mantener por medio de las hojas de estilo en cascada o CSS, que son un conjunto de instrucciones de cómo se presenta o transforma la información de una página.

JAVASCRIPT

El primer navegador que existió se llamó otherwise de los estudiantes de la universidad de Helsinki en Finlandia en abril de 1992, después le siguió violaWWW, de la universidad de Berkeley este navegador, podía mostrar HTML con gráficos, animaciones y bajar pequeñas aplicaciones llamadas posteriormente Applets,  después surgió Netscape Navigator y en su versión 2.0 apareció por primera vez javascript, javascript está basado en el estándar ECMAScript.
Una característica muy importante de javascript es su herencia de prototipos, javascript tiene un sistema de objetos libre de clases, en donde los objetos heredan propiedades directamente de otros objetos, esto es realmente poderoso aunque diferente a la programación por clases. Una desventaja muy importante es su dependencia de  variables globales.

DOM

El DOM es un conjunto de estándares para la interfaz de los navegadores.  Define la estructura lógica de los documentos y la manera en que un documento puede ser leído y manipulado. Con el DOM los programadores puede construir documentos, navegar su estructura y agregar, modificar o borrar elementos y contenido. Cualquier elemento (nodo) que esté en un documentos HTML o XML puede ser accesado, cambiado o agregado usando el DOM.
Fue creado como estándar de la W3C para evitar las incompatibilidades de los diferentes navegadores.
Un documento DOM es una colección de nodos, o piezas de información organizada de manera jerárquica. Esta organización permite al desarrollador navegar alrededor del árbol (como esta basado en una estructura jerárquica de información se dice que el DOM es basado en árbol) buscando por información especifica. El DOM es una manera de describir esos nodos, sus métodos y propiedades así como las relaciones que hay entre ellos.

 

XML

XML permite servir, recibir, y procesar SGML genérico  en el Web, de la manera que no es posible con HTML, fue diseñado de una manera en que es sencilla su implementación y para la interoperabilidad entre SGML y HTML.

W3C

Que es

Cuando comenzó la explosión del WWW, Berners Lee se dio cuenta de que se necesitaba de un órgano regulador con el propósito de llevar a el web a su mayor potencial, principalmente desarrollando protocolos comunes para mejorar la interoperabilidad y la evolución del web.

A semejanza del IETF (Internet Enginering Task Force), el W3C desarrollaría especificaciones técnicas abiertas, y a semejanza de un consorcio industrial el W3C representaría el poder y la autoridad de millones de desarrolladores, investigadores, instituciones y usuarios para publicar los más recientes avances en tecnología de información.

Un avance significativo en el desarrollo de internet fue en 1994 cuando Netscape desarrolló SSL un protocolo para proteger las compras con tarjeta de crédito y transacciones electrónicas, y surgió el primer programa que permitió el e-commerce que empezó a ganar credibilidad. Las etapas para crear un estándar son:

1. Proyecto de trabajo
2.Ultima llamada del proyecto de trabajo.
3. Candidato a recomendación.
4. Recomendación propuesta.
5.  Recomendación W3C (Estándar Web)

La w3c define mecanismos no políticas.

 
Quienes pertenecen

La membresía del W3C está abierta a cualquier compañía, DEC, Netscape, HP, IBM, fueron los primeros miembros.
En los inicios del consorcio las cuotas eran de 50 mil dólares para la membresía completa y de 5mil dólares por membresía de afiliado, los beneficios eran los mismos la diferencia es que para la membresía de afiliado tenían que ser una organización sin fines de lucro, gubernamentales o tener ganancias menores a los 50 millones de dólares, los miembros tienen el derecho a asistir gratis a cualquier junta y sentarse a cualquier grupo de trabajo y tener acceso exclusivo a información acerca de todas las actividades del consorcio. Hoy en día las tarifas también consideran la ubicación geográfica del organismo, por ejemplo para México una membresia de  octubre del 2008 a octubre de 2009 es de 68,500 dólares para compañías con ganancias mayores a los 50 millones de dólares anuales,  7,900 dólares para compañías con ganancias entre 30 y 50 millones de dólares, y para todas las demás 3,810 dólares.

USABILIDAD.

Usabilidad.
Todo usuario que accede a un Portal de Internet, esta motivado por una razón específica: buscar, aprender, ejecutar una transacción, monitorear, crear, conversar o simplemente entretenerse.

Estrategias.
Las implicaciones para el diseño de un portal son simples de entender, pero no siempre son fáciles de implementar, reacciones, preferencias, contexto social, creencias, son aspectos generales de los usuarios que se deben de tomar en cuenta para lograr un buen resultado.
Dentro del diseño se deben considerar los indicadores, que son características que ayudan a los usuarios a saber donde están, a donde ir y como llegar de donde esta, o que otras opciones existen dentro del portal, los indicadores mas comunes incluyen páginas y títulos de ventanas, logos, tabs, o indicadores de selección.

Interfaces.
Existen varios temas relacionados con la Usabilidad, patrones de diseño, métodos y procedimientos que requieren de su consideración cuando se desarrolla un Portal de Internet, para asegurar el mayor resultado posible, los desarrolladores deben considerar un rango amplio de temas acerca de interfaces de usuario, y trabajar para crear un Sitio Web que permita el mayor desempeño humano posible.
Las interfaces son muy importantes porque son el medio por el cual los humanos nos comunicamos con las computadoras

HCI
HCI,  es la disciplina que estudia el diseño, implementación, uso y evaluación de los sistemas interactivos, para que los humanos tengamos mejor interacción con las computadoras.
Si ellos no pueden usarlo, no lo usarán.

ACCESIBILIDAD.
Que es
Uno de los principios del web es que las personas puedan enviar o acceder información entre ellas sin importar el sistema operativo, los formatos que las computadoras usen, o las discapacidades de las personas, lo único que tienen que hacer es seguir el mismo esquema simple de direccionamiento de URI, la idea de la universalidad es la llave, no necesariamente se tiene que usar HTTP o HTML pero son herramientas que ayudan a los problemas de incompatibilidad.
Accesibilidad Web significa que gente con discapacidades puedan usar el Web, más específicamente, accesibilidad web significa que la gente con algún tipo de discapacidad, puedan percibir, entender, navegar e interactuar con el web y puedan contribuir al web.

Porque es importante
La interoperabilidad entre dispositivos ha sido una molestia durante mucho tiempo, Como el web se ha convertido en una importante fuente de recursos en diversos aspectos (educación empleo, gobierno, comercio, salud, y más)  Es esencial que el  web sea accesible en orden de proveer  un acceso y oportunidad  equitativo a las personas con discapacidades.

Técnicas
La mayoría de las responsabilidades de la  accesibilidad se centran en los desarrolladores Web.
Hacer un sitio web  accesible puede ser simple o complejo dependiendo de muchos factores tales como el tipo de contenido, el tamaño y la complejidad del sitio, y el desarrollo de herramientas.
Muchas de las características de accesibilidad son fácilmente implementadas si estas son planeadas desde el principio del desarrollo o el rediseño del sitio web, arreglar sitios web inaccesibles  requiere de mucho esfuerzo.

TECNOLOGIAS

Rich Internet Applications.
Del 2001 al 2005 el WWW tuvo un gran crecimiento en términos de tecnologías y metodologías para usarse y cambiar de medios estáticos a contenidos más interactivos.
A medida que los navegadores implementaban innovaciones de tecnología, los desarrolladores web comenzaron a experimentar con nuevas formas de interacción para los usuarios, se acabaron las cargas de páginas completas y se sustituyeron por pequeñas actualizaciones de bloques de información, las primeras compañías que experimentaron con esta nueva forma de desarrollos web, fueron Google,  y Yahoo.

Web Services.
Los web services proveen una manera para intercambiar datos entre aplicaciones y servidores. Para facilitar esta comunicación, los web services usan Internet para mandar mensajes compuestos de datos XML entre un cliente (la aplicación que usa los datos) y un proveedor (el servidor que contiene los datos). SOAP (siglas de Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden comunicarse por medio de intercambio de datos XML. SOAP fue creado por Microsoft, IBM y otros y está actualmente bajo el auspicio de la W3C. Es uno de los protocolos utilizados en los servicios Web.

AJAX.
 En febrero del 2005 Jesse James Garret  de la compañía Adaptive Path, publicó un artículo denominado Un nuevo acercamiento de las aplicaciones Web. En este ensayo explicó como el pensaba como las aplicaciones Web y las aplicaciones de escritorio estaban  acercándose cada vez mas.
AJAX permite comunicarse con el servidor por medio de peticiones más ligeras y especificas, con AJAX no hay necesidad de cargar una página entera solo para actualizar los valores de una determinada sección ya que el cliente es libre de comunicarse con el servidor y obtener información sobre demanda, la ventaja de esto es que los clientes experimentan una mejora de navegación en los sitios o aplicaciones ya que al no tener que cargar todo el contenido nuevamente, las respuestas hacia los usuarios son más rápidas, la desventaja es que debido al incremento de peticiones hacia el servidor se aumenta el desempeño del servidor de aplicación, obviamente este aumento depende del funcionamiento de la aplicación.

FLEX
Flex es un producto de Adobe, para el desarrollo de RIA’s  esta basado en tecnología  Flash, y es una plataforma para las empresas que desean implementar aplicaciones mas interactivas en sus sitios web. Se usa en todo tipo de industria ya que  es muy potente y tiene muy buen manejo de todas las tecnologías web.

Navegadores
Docenas de navegadores web han sido desarrollados por personas  desde hace muchos años, el primer navegador ampliamente utilizado fue NCSA Mosaic que se convirtió en Netscape Navigator, y fue el más utilizado hasta que Microsoft  Internet Explorer tomó el liderato en 1999 debido a la ventaja de distribución. En el 2002 fue liberada una versión de código abierto de Netscape  llamado Mozilla con la idea de que IE era mayor que Netscape pero no mayor que toda la comunidad Web, Mozilla ha ganado mercado particularmente con los usuarios de plataformas que no son Windows, gran parte debido a su fundación abierta, y en 2004 fue liberado FireFox. Amaya es el navegador oficial de el W3C.

WEB SEMANTICA

¿Qué es?
La Web semántica o Web 2.0 es la idea inicial del Web, un ambiente colaborativo en donde se puede publicar información.  La Web Semántica tiene que ver con calidad de la información, privacidad y confianza

WEB ANALITICS

¿Qué es?
Si las ideas de la gente, las interacciones y los patrones de trabajo pudieran ser rastreados usando el web entonces un análisis computarizado nos puede ayudar a ver patrones en nuestro desempeño y de esta manera facilitar nuestro trabajo en grupo.
Las máquinas son capaces de analizar todos los datos del Web, el contenido, ligas y transacciones entre las personas y las computadoras.

AMBIENTES COLABORATIVOS

El web es más una creación social que técnica Berners Lee lo diseñó para un efecto social, para ayudar a la gente a trabajar junta. La esencia de trabajar juntos en una manera de Red, es que nosotros funcionamos en grupos y el Web nos sirve como herramienta para este propósito.

Google

Redes Sociales.
Las redes sociales son la base del Web 2.0 la llave de las redes sociales son la integridad que engloba la privacidad y la confidencialidad. La privacidad envuelve la habilidad de cada persona para dictar que se puede y que no se puede hacer con su propia información personal

CONCLUSIÓN

Para realmente trabajar en el Web, necesitamos de mucho mejores herramientas, mejores formatos para presentar información al usuario, interfaces mas intuitivas  e integración con otros sistemas, poco a poco se están adoptando los sistemas de computación en un mundo de hipertexto global.

 

Todo usuario que accede a un Portal de Internet, esta motivado por una razón específica: buscar, aprender, ejecutar una transacción, monitorear, crear, conversar o simplemente entretenerse.

Al comenzar con el diseño de un portal de Internet podemos imaginar de inicio lo que el usuario realmente trata de ejecutar cuando ingresa al portal y en lugar de pensar en características deseadas y soluciones, pensar en términos de necesidades y problemas.

Las implicaciones para el diseño de un portal son simples de entender, pero no siempre son fáciles de implementar, reacciones, preferencias, contexto social, creencias, son aspectos generales de los usuarios que se deben de tomar en cuenta para lograr un buen resultado.

También es importante definir los objetivos del Portal, los pasos específicos que se necesitan para lograr esos objetivos y el lenguaje que se va a utilizar para describir esos pasos.

Al hablar de Portales Gubernamentales abarcamos un gran numero de usuarios con diferentes características por lo que se debe ser cuidadoso y permitir al visitante explorar el portal sin que se pierda o se meta en problemas, permitiéndole ejecutar lo que quiere de manera instantánea, ahorrándole tiempo con etiquetas de opciones cortas, y bien definidas.

Los Portales Gubernamentales deben de hospedar numerosos sitios internos que pertenecen por ejemplo a las dependencias u organismos descentralizados por lo que es importante mantener la misma disposición de elementos, colores, estilos y al mismo tiempo dar al diseño suficiente flexibilidad para manejar diferentes formas de contenido, señalamientos de “usted esta aquí” y dispositivos de navegación.

Separar el contenido del Portal de su presentación física es una buena practica de diseño, se debe pensar en términos de cómo organizar los elementos y acciones del Portal de la manera mas adecuada a la temática que se esta mostrando. Esta técnica obliga a pensar acerca de las cosas importantes en primer lugar: organización y flujos de acciones, después ya se piensa en cómo presentar la información en páginas, popup y elementos internos de páginas.

Al pensar en términos de cómo estructurar el contenido y organizarlo de acuerdo a su funcionalidad se logra guiar al usuario a través del sitio para obtener lo que necesita, los portales se pueden organizar de acuerdo a objetos, acciones o tareas, categorías o temas, herramientas, o bien combinar los diferentes tipos de organización.

Dentro del diseño se deben considerar los indicadores, que son características que ayudan a los usuarios a saber donde están, a donde ir y como llegar de donde esta, o que otras opciones existen dentro del portal, los indicadores mas comunes incluyen páginas y títulos de ventanas, logos, tabs, o indicadores de selección. Una buena señalización y etiquetas claras (no ambiguas) anticipan lo que se está buscando y especifican como ir, las señales están en donde se supone que deben estar y nunca se debe dejar sin guías un punto en donde el usuario deba decidir.

El ir de una página a otra supone un costo de ancho de banda por eso es importante mantener el numero de esos brincos lo mas bajo posible. La eficiencia real viene de la estructura del Portal una de las peores cosas que encontramos en algunos portales es que obligan al usuario a navegar en múltiples niveles de sub-paginas cada vez que necesita realizar una tarea simple.

La manera en que se colocan los elementos en una página es muy importante, obviamente el contenido más importante debe estar más visible que el menos importante, el usuario debe ser capaz de deducir la estructura de información de la página por la disposición de los elementos, existen algunos mecanismos para presentar la jerarquía visual en una página; preferencia de esquina superior izquierda, espacio en blanco, fuentes contrastantes, fondos contrastantes, posición, alineamiento e indentación, gráficos como líneas, cajas y barras de color.
Luego que se define la jerarquía visual se debe continuar con el flujo visual que son las pistas que los usuarios tienden a seguir mientras escanean la página, esta íntimamente relacionado con la jerarquía visual, ya que una jerarquía visual bien diseñada establece puntos focales en la página cuando se necesita hacer énfasis en los elementos más importantes y el flujo visual guía a los ojos de esos puntos hacia la información de menos relevancia, los puntos focales son los puntos que los ojos no pueden resistirse ver, la tendencia es verlos del mas fuerte al mas débil, y es buena práctica poner pocos porque tener muchos diluye la importancia de cada uno, se pueden configurar por medio de espacios en blanco contrastes altos, fuentes grandes y movimiento.

Existen varios temas relacionados con la Usabilidad, patrones de diseño, métodos y procedimientos que requieren de su consideración cuando se desarrolla un Portal de Internet, para asegurar el mayor resultado posible, los desarrolladores deben considerar un rango amplio de temas acerca de interfaces de usuario, y trabajar para crear un Sitio Web que permita el mayor desempeño humano posible.

Enlaces relacionados

Jakob Nielsen’s Website

Human-Computer Interaction / User Interface Usability

Guias de diseño de interfaces de usuario

Libro Designing interfaces

usabilit.gov

usabilityfirst

Stanford Guidelines for Web Credibility 

Semanticstudios

eFuse

A/B Split Testing

Página siguiente »