WebGL Es una especificación estándar en desarrollo que permite mostrar gráficos tridimensionales acelerados por hardware en navegadores web sin necesidad de instalar software adicional al navegador (plug-ins).

En realidad es una API para javascript que permite usar OpengGL incorporado en los navegadores.[1]

WebGL utiliza un elemento de HTML5 llamado Canvas el cual permite mostrar gráficos 2D e imágenes de una manera dinámica, canvas consiste de una región dibujable definida en código HTML con los atributos de altura y espesor, el código javascript permite acceder a esa región a través de un conjunto completo de funciones de dibujo 2D, esto es lo que permite generar los gráficos dinámicamente. [2]

Esta especificación es gestionada por el consorcio de tecnología Kronos Group.

http://www.khronos.org/webgl/

Para comenzar hay unos muy buenos tutoriales para aprender a usar WebGL [3], que son referencia obligada para entender como funciona esta tecnología.

Para acelerar las cosas existe una biblioteca 3D en javascript llamada three.js, la biblioteca provee <canvas>, <svg> y render WebGL.[4] creada por mrdoob : https://github.com/mrdoob

Demos de mrdoob

En esta biblioteca se incluyen funcionalidades para manejo de camaras (ortografica y perspectiva), funciones para manejar la geometria, el color, vertices, splines, matrices, luces, materiales, objetos (esqueletos, modelos, modelos animados, particulas, etc), renders (canvas, dom, svg, webgl), escenas, texturas y muchas otras mas : http://mrdoob.github.com/three.js/docs/48/#Camera

Y este es un ejemplo de un trabajo muy bueno usando esta tecnología Web3D.

http://www.ro.me/

Una cuestión interesante sobre WebGL es que es un estandar que ha sido adoptado para integrarlo en las nuevas versiones de los navegadores web de Google (chrome) y Mozilla (firefox) incluso de Apple (safari) pero no así en internet explorer de Microsoft pues menciona cuestiones de seguridad para no hacerlo. Por el momento WebGL sigue avanzado.

Nota:

“Los gráficos vectoriales escalables (svg) es una especificación para describir gráficos vectoriales bidimensionales estáticos o anímados en formato xml.” [5] 

Referencias:

[1]http://en.wikipedia.org/wiki/Canvas_element

[2]http://en.wikipedia.org/wiki/WebGL

[3]http://learningwebgl.com/blog/?page_id=1217

[4]https://github.com/mrdoob/three.js/

[5]http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

[6]http://es.wikipedia.org/wiki/Khronos_Group

Imagen y demos:

http://mrdoob.github.com/three.js/

http://mrdoob.com/

http://alteredqualia.com/

Compartir y Disfrutar

Entradas Relacionadas:

1. Mundos Virtuales
2. Frameworks, como elegirlos
3. Invocando un método de un objeto especifico usando Quartz .NET y Spring .NET

Desde hace mucho tiempo me interesa el desarrollo de aplicaciones 3D supongo que fue por ver muchas peliculas de ciencia ficción en especial “El jardinero, asesino inocente” y Tron, también creo que por leer artículos de una revista que colecciono de hace mas tiempo, en especial un número de 1995 que habla sobre los próximos 100 años de la tecnología. En este número mencionan “En la sociedad del conocimiento, buena parte de nuestra vida transcurrirá en mundos sintéticos y hasta buscaremos pareja en ellos. Las computadoras imitarán el cerebro humano, habrá granjas moléculares, llevaremos tarjetas de crédito bajo la piel y unos microrrobots se encargarán de quitar el polvo a la computadora cuando la apaguemos” [1]

Los primeros acercamientos a esta area que tuve fue con un libro de 1997 llamado Realidad Virtual. Construcción de Proyectos de Joe Gradecki.

“Los mundos virtuales son lugares donde experimentamos nuevas realidades. Contienen todos los objetos que podemos ver y manejar. Nos permiten además, experimentar cosas que no son posibles en el mundo real” [2]

“Un verdadero programa de realidad virtual debe contener dos componentes:

1. El punto de vista de un usuario en primera persona que debe realizar movimientos completos a voluntad en tiempo real.
2. La capacidad de visualizar y modificar el entorno virtual en tiempo real” [3]

Con el tiempo pude realizar algo relacionado con los objetos virtuales cuando conocí VRML (Virtual Reality Modeling Language)

En español “Lenguaje para Modelado de Realidad Virtual” curiosamente su primera especificación fue publicada en 1995.

http://en.wikipedia.org/wiki/VRML

Primer acercamiento a web 3d con vrml 1999

Después vinieron los Proyectos 3D con OpenGL , Mesa,  Blender, Maya y mas recientemente

3D Studio,  GLScene y actualmente NeoAxis pero afortunada o desafortunadamente en desarrollos de escritorio.

Los primeros mundos virtuales que conocí vivian en la web, en internet, así que va siendo hora que

continuemos con el principio. “El final es en donde parti” dice una canción de La Renga.

http://www.youtube.com/watch?v=ozC9hETOt2I

Así que desde hace tiempo he estado aprendiendo un poco sobre WebGL y en un futuro no muy lejano espero tener algunas aplicaciones.

WebGL: Es una especificación estándar que está siendo desarrollada actualmente para mostrar gráficos en 3D en navegadores Web.

Los mejores ejemplos en Chrome Experiments http://www.chromeexperiments.com/tag/webgl/

Referencias :

[1]: Muy Interesante Especial Los próximos 100 Años. P 27.
[2,3]: Realidad Virtual Construcción de Proyectos. Joe Gradecki. 1997 AlfaOmega. P 2. y P 3

Mas Info : http://www.popsci.com/archive-viewer?id=S812DHiH7dUC

Bonus :   The Popular Science Archive Explorer

Compartir y Disfrutar

Entradas Relacionadas:

1. Probador virtual, el futuro de las compras
2. Frameworks, como elegirlos
3. Desarrollo de aplicaciones para ambientes tridimensionales

Aplicaciones nativas vs aplicaciones web moviles

Ya desde el año pasado había estado dando pequeños pasos y haciendo pruebas de desarrollo para iPhone y Android, tratando de conocer las fuerzas y debilidades de estas plataformas, conociendo el flujo de trabajo y tiempos que podría tomar desarrollar una aplicación. Después de mis pruebas obtuve resultados y en la comparación fue cuando noté que es realmente caro desarrollar aplicaciones nativas para cada plataforma (iOS, Android, BlackBerry o Windows Phone).

Ahora con el auge de las aplicaciones web, el uso extensivo de javascript, css y estándares web.. veo una gran ventaja el desarrollar aplicaciones móviles web en lugar de aplicaciones nativas. Sé que este tema en la red es un debate de nunca terminar, pero no se trata de comparar ambas formas de desarrollo diciendo que una es mejor que otra.. Algunas aplicaciones hechas específicamente para los dispositivos móviles podrían portarse a una aplicación web y otras quizás no.. todo depende de la naturaleza de la aplicación y si o no debe de interactuar con el hardware.

Entonces que diferencias existen entre una aplicación nativa y una aplicacion web móvil ?

Las aplicaciones nativas realizan tareas específicas que podrían ser el uso de la agenda, grabar o reproducir música, tomar fotografías o utilizar el hardware del equipo al máximo para tener el mejor rendimiento en una aplicación.. como por ejemplo los juegos que necesitan muchos recursos para ejecutarse y disponen en su totalidad del procesamiento del equipo para funcionar. En cambio una aplicación web móvil es una pieza de software que simplemente dá acceso a herramientas de seguimiento visual, donde no es necesario interactuar con el equipo, por ejemplo los manejadores de tareas o aplicaciones donde solo se necesite ingresar información y ver resultados.

Y que tan fácil puede ser desarrollar una aplicación web para los móviles que sea compatible con cualquier dispositivo ?

Existen aplicaciones tales como Sencha, PhoneGap, Titanium, Rhomobile, ParticleCode, CoronaSDK, Mosync, etc… que se desarrollan como aplicaciones web o con una sintaxis muy similar y que al final se traducen las diferentes plataformas móviles.. claro, esto con algunas diferencias porque mientras unas aplicaciones traducen todo el código a código nativo, otras simplemente  crean una aplicación web y la dejan en un contenedor nativo que sería casi un browser personalizado. Este tipo de aplicaciones se conocen como aplicaciones Híbridas ya que utilizan ciertas características físicas de los equipos pero son básicamente aplicaciones web.

A su vez, existen frameworks para desarrollo de aplicaciones web que igualmente emulan apariencia y comportamiento de las aplicaciones nativas, tales como son: The-M-Project, jQuery Mobile, Sencha Touch, jQTouch, DHTMLX touch, SproutCore, etc.. solo que este tipo de herramientas no nos permiten utilizar las características del equipo y son aplicaciones netamente web que se montan en un servidor de aplicaciones y se sirven como sitios web.

En cuanto a las dificultades que podemos tener al desarrollar aplicaciones móviles con estas herramientas, pues para empezar es difícil que  existe una curva de aprendizaje que quizás será menos pronunciada que aprender el lenguaje nativo para desarrollar aplicaciones pero es tiempo al final de cuentas, fácil hasta el punto en que se comienza a pensar en componentes o funcionalidades específicas que aunque se pueden desarrollar en las aplicaciones web, puede que sea más complicado hacerlo o adaptarlo para todos los dispositivos y es ahí donde esta el reto (pensando en equipos móviles o tablets).

Que forma para desarrollar aplicaciones es más segura ?

Definitivamente contestaría que las aplicaciones nativas son más seguras ya que la información nunca es enviada a través de internet y siempre se mantiene en el dispositivo.. aunque también pensando de otra manera diría que una aplicación que funciona local no almacena respaldos por lo que la información esta propensa a dañarse..

Y que puede ser más costoso mantener ?

Igualmente ambos tipos de aplicaciones tienen sus pros y sus contras.. por un lado las aplicaciones nativas viven en los dispositivos móviles lo cual no genera ningún tipo de costo adicional al desarrollo.. Mantener este tipo de aplicaciones implicaría que quienes hayan descargado una versión, vuelvan a descargar la actualización.. Por otro lado, las aplicaciones móviles tienen un costo de mantenimiento para quienes las desarrollan ya que por su naturaleza deben vivir en un servidor en internet lo cual genera un costo anual.. En cuanto a las actualizaciones es mucho más fácil para quienes las utilizan ya que no necesitan descargar nada adicional, ya que todo ocurre de manera centralizada.

Aplicaciones nativas, híbridas o web para móviles compiten actualmente en el mercado.. cada una con sus puntos en contra y a favor.. yo recomendaría siempre evaluar los alcances, los recursos, los costos y tomar como punto de partida una aplicación web que es multiplataforma, en caso de que los requerimientos sean superiores o se tenga dificultades para utilizar este tipo de aplicación.. entonces lo mejor es dar el salto hacia aplicaciones nativas.

Compartir y Disfrutar

Entradas Relacionadas:

1. jQuery Mobile lo bueno y lo malo
2. Habilidades a desarrollar en el 2012
3. Desarrollo de aplicaciones para ambientes tridimensionales

Los dispositivos moviles como teléfonos inteligentes y “tables” han hecho popular el uso de atractivas interfaces “multitouch”, este tipo de interfaces estan extendiendose a otros dispositivos como mesas interactivas, cristales inteligentes y otros tipos de superficies, para permitir interactuar de una manera mas natural a las personas con la información. Con la aparición de Wii y Kinect que ha agregado el lenguaje corporal, los diseñadores y programadores han pensado en una gran cantidad de aplicaciones que en los próximos años cambiaran la manera en que nos comunicamos con las computadoras.

“En computación, una interfaz natural de usuario o NUI, es el termino comun usado por diseñadores y desarrolladores de interfaces de computadora para referirse a una interfaz de usuario que es efectivamente invisible, o se vuelve invisible con las intereacciones aprendidas sucesivamente por sus usuarios. La palabra natural se utiliza porque la mayoría de las interfaces de computadora utilizan
dispositivos artificiales de control, cuyo funcionamiento se tiene que aprender. una NUI se basa en que un usuario puede rapidamente hacer la transición de principiante a experto. Mientras que la interfaz requiere de aprendizaje, por lo tanto, “Natural” se refiere a un objetivo en la experiencia del usuario, que un usuario siente “como algo natural” mientras interactua con la tecnología” [1].

Evolución de las interfaces. [2

“En los años 1970s,80s y 90s Steve Mann desarrollo una serie de estrategias de interfaz de usuario utilizando la interacción natural con el mundo real como una alternativa a una interfaz de línea de comandos (CLI) o a la interfaz gráfica de usuario (GUI). Mann se refiere a esta obra como “interfaces naturales de usuario”, “Interfaces de usuario directas”, y ”Computación Libre de Metaforas” [1].

Evolución de las interfaces. [2

Referencias :

[1].http://en.wikipedia.org/wiki/Natural_user_interface

[2].http://channel9.msdn.com/Events/MIX/MIX09/C15F

Mas información

http://channel9.msdn.com/Events/MIX/MIX09/C13F
http://nuigroup.com/log/P8/
http://nuigroup.com/tv/P75/
http://channel9.msdn.com/blogs/larrylarsen/ces-2010-nui-with-bill-buxton

Compartir y Disfrutar

Entradas Relacionadas:

1. Frameworks, como elegirlos
2. Arreglando compatibilidad IIS6 y reporviewer con IIS7 Windows Server 2008
3. Desarrollo de aplicaciones para ambientes tridimensionales

Framework como elegirlos

He pensado en esto unas mil veces y siempre llego a la conclusión de que aunque los frameworks hacen la vida más fácil (en algunos casos), el proceso de desarrollo más rápido y mejora las capacidades de trabajo en equipo, es necesario siempre considerar el uso o no de este tipo de herramientas. Desde mi punto de vista, trataré de explicar que se necesita para elegir un framework.

Características

Basándose en una lista de características del software a desarrollar, un framework debería de cumplir con dicha lista sin agregar complejidad al desarrollo mismo (también conocido como código extra). Suponiendo que quiero desarrollar una aplicación donde básicamente quiero tener usuarios y cada usuario tenga una lista de tareas, pues bien asumo que utilizaré un módulo de usuarios y otro para creación de tareas. Hasta este punto el framework no es necesario.. pero que tal si en mis previsiones esta el realizar funciones más complejas como agregar un calendario para tener un registro de eventos, tomados segun se fueron escribiendo las tareas.. todo esto de forma social y abierta a los demás usuarios .. ok, ya se empieza a complicar y seguro algunos dirían que el framework no se necesita.. pero lo que puede aportar el framework es que aparte de cubrir las características básicas, también se puede adaptar a las características futuras, manteniendo siempre una línea de desarrollo relativamente sencilla de mantener.

Extensible

Con un framework se resuelve más de un problema, de hecho se resuelven problemas que posiblemente no sabías que existian en tu código y eso antes de que te sentaras a codificar. La gran mayoría de frameworks cuentan con repositorios de extensiones mantenidas por la comunidad que extienden funciones y componentes de sus funcionalidades básicas. Es necesario mencionar que extensible no se refiere solamente a la cantidad de extensiones, sino también a la calidad y facilidad con que se pueden mantener y crear tus propias extensiones.

Prototipos que determinen su uso

Creo que experimentar con nuevas tecnologías te hace entender en que momento utilizarlas. Si no has experimentado con nuevas opciones de desarrollo, entonces cada vez que necesites utilizar una nueva herramienta tendrás que gastar algo de tiempo y esfuerzo extra para aprender. Una práctica recomendable es siempre construir un pequeño prototipo donde trates de agrupar por ejemplo interacciones con formularios, almacenamiento en BD y uso de javascript. Me refiero a algo muy simple que quizás con algo de documentación puedas construir en un solo día.

Ayuda

Los frameworks con más tiempo de vida suelen tener muy buena documentación en comparación con los nuevos. Foros, listas de correo, blogs, e incluso sitios como StackOverflow proporcionan una gran cantidad de información. Si hay poca actividad en los foros o listas de correo, definitivamente no es una buena opción la que has elegido por lo que una buena idea sería abandonar ese framework. Encontrar ayuda o ejemplos de código es muy importante en el proceso de aprendizaje de nuevas herramientas. En cuanto a los blogs no dejan de ser útiles porque te dicen que esta pasando alrededor de un framework.

Hay que recordar que el framework aporta agilidad y orden al desarrollo de software, si hace todo lo contrario es porque has metido la pata y debes buscar una mejor herramienta.

Compartir y Disfrutar

Entradas Relacionadas:

1. Desarrollo de aplicaciones para ambientes tridimensionales
2. Invocando un método de un objeto especifico usando Quartz .NET y Spring .NET
3. RESTful API Frameworks en PHP

Una de las aplicaciones que hemos desarrollado tiene que ver con la visualizacion de ambientes tridimensionales, y realiza entre otras cosas navegación, despieces y simulaciones y permite el control documental de proyectos, este desarrollo es una segunda versión mejorada de otro sistema que anteriormente hicimos con un motor gráfico llamado Glscene, para Delphi.

Para mejorar la nueva versión recurrimos a un motor gráfico con mejores caracteristicas (NeoAxis) y nos trasladamos a Visual Studio para desarrollar con C#, el motor gráfico que utilizamos cumplió con las espectativas, se mejoró el tiempo de carga de los modelos 3d al utilizar un formato más compacto en los modelos, permitió tener mayor cantidad de objetos y escenarios en una misma escena, además de otras caracteristicas que el anterior motor no tenia.

“NeoAxis Game Engine” es un moderno motor grafico 3D para simulaciones 3D, visualizaciones y juegos.

Este motor que utilizamos es una excelente herramienta para desarrollar aplicaciones 3d de alto impacto.

Algunas de sus caracteristicas son :

• Las aplicaciones creadas con NeoAxis pueden correr en Windows, Mac y Linux
• Tiene varias herramientas tales como Editores : Objetos, de GUI, de Mapas,
• de Modelo Físico, de Terreno,de Sistema de Partículas, para calcular Luces Estaticas.
• Importa modelos y texturas de 3D Studio Max, Maya, Softimage, XSI, Blender.
• API de programación basada en .Net y lenguaje C#
• Efectos especiales (efectos de partículas, Animación, etc)
• Manejo de Luces, manejo de materiales, efecto de agua
• Efectos de Física ( Cuerpos rigidos, Uniones, Vehículos, soporta NVIDIA PhysX y ODE)
• Soporte para Red(Multijugador, Servidor dedicado)
• Manejo de dispositivos de entrada
• Como joysticks, Kinect, controladores Xbox 360 .
• Desarrollo Web (a través de NeoAxos Wen Player) usando los navegadores web mas conocidos
• Lo más importante, cuenta con un desarrollo constante y el soporte del equipo de desarrollo y muy buena documentación.

http://www.neoaxis.com/

Esta imagen  del sitio de NeoAxis muestra una aplicación para la simulación de accidentes en fábricas (un ejemplo de lo que se puede hacer con el motor), este ejemplo es un poco similar a lo que hemos estado desarrollando.

Compartir y Disfrutar

Entradas Relacionadas:

1. Una nueva herramienta en desarrollo SICAP
2. Certificaciones de Calidad en Desarrollo de Software
3. Frameworks, como elegirlos

Es una visión de Michell Zappa que aparecio a principios del 2011, “Zappa es un tecnólogo y diseñador originario de estocolmo, quien reside en Londres, su interés principal es pensar sobre el futuro de la tecnología y como la sociedad se adapta a los cambios de esta. “Envision Technology” es un panel de tiempo para visualizar este futuro tratando de demostrar las diferentes áreas de grupos de investigación, y especular sobre cuales de las tecnologias mensionadas serán aceptadas por la sociedad.“

La visión de su proyecto es ayudar a las personas encargadas de diseñar nuestro futuro a que tomen mejores decisiones.

El cree que debe haber tres principales actores en este cambio:

“Emprendedores : Quienes estan ocupados construyendo las herramientas y servicios del futuro…

Políticos : Quienes estan ocupados resolviendo las crisis nacionales e internacionales y los problemas que enfrenta la sociedad a diario.

Ciudadanos: Quienes estan ocupados ganándose la vida y sufriendo cada vez más las consecuencias del impacto del futuro.”

El panel muestra diferentes tendencias que van desde 2012 a 2040 (al momento de escribir este post) y estan agrupadas en los temas : Inteligencia Artificial, Internet, Interfaces, Sensores, Computo Ubicuo, Robotica, Biotecnología, Materiales, Energía, Espacio y GeoTecnología. Cada mención en el panel al seleccionarla muestra una descripcion breve y un enlace hacia wikipedia con información mas detallada.

“Envision Technology” es una excelente guía para preparar el camino al desarrollo de nuevas ideas en esas areas y contruir las aplicaciones y herramientas del futuro.

http://envisioningtech.com/

http://envisioningtech.com/presentations/

Tal vez la tecnología del futuro se parezca un poco más a esto:

http://www.youtube.com/watch?v=a6cNdhOKwi0

http://www.youtube.com/watch?v=nWk8aAOdw7s

Compartir y Disfrutar

Entradas Relacionadas:

1. Instituto para el futuro
2. Google y el futuro de Android
3. NUI (Natural User Interface)

http://centro.us.es/facpsi/accesibilidad/

Durante la vida de este blog, más de una vez he tratado de explicar que significa la accesibilidad en un sitio web o algunos puntos importantes que se deben de tomar en cuenta.. esta vez en este post quiero extender esos puntos y dejar claro cuales son las reglas a seguir y el porque son importantes seguirlas.

Codificación válida = codigo válido [por aquí se debe de empezar]

Recuerda que muchos intérpretes de páginas verifican la codificación y estructura del código para poderlo entender y traducir de manera correcta el contenido de la página a las personas con discapacidades, muchas veces obviamos este punto y desarrollamos aplicaciones pensando en que todas las personas que la utilizarán no tienen ninguna discapacidad.

Nunca olvides ponerle un título a tus páginas

Para algunos quizás no parezca importante como sucede con muchas cosas relacionadas con la accesibilidad, pero el título es el primer paso para saber a que lugar he llegado. Debe existir un título para la página, a través del elemento <title>, este debe ser claro, descriptivo y conciso.

Siempre que utilices dentro del cuerpo el tag <script> trata de poner seguido el tag <noscript>

Los scripts incluidos en el cuerpo del documento deben llevar contenidos alternativos en <noscript> que describan su acción o reemplacen su funcionalidad, esto porque quizás algunos navegadores no se encuentran actualizados o no soportan las características del script que se esta usando.

Recuerda poner la propiedad alt cada vez que incluyas una imagen

Cada imagen debe llevar el atributo “alt” con un texto que describa su contenido o la función que cumple. Si la imagen es muy compleja debe llevar también “longdesc”. Es muy importante el atributo alt ya que navegadores muchas veces no interpretan el contenido binario de las imagenes (razones pueden haber pocas, pero suele suceder), algunas personas con discapacidades físicas o motoras tienen intérpretes que por decirlo de cierta manera traducen el contenido de esta propiedad para ser entendido por ellos.

Si creas eventos, recuerda que estos no sean exclusivamente disparados por el mouse

Los eventos deben poder activarse con cualquier dispositivo porque hay usuarios que no pueden, por ejemplo, usar un ratón. Por tanto se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes. Ahora con la difusión de los frameworks de javascript es muy fácil crear porciones de código que envian el evento a funciones específicas, lo que significa que se pueden utilizar globalmente através del código script.

La etiqueta <label> fue desarrollada para que la utilices siempre junta a una etiqueta de formulario

La etiqueta <label> contiene una propiedad llamada “for” la cual debe coincidir con el atributo “id” del control de formulario al que identifica. Esto es especialmente útil para los usuarios que utilizan lectores de pantalla para navegar.

Los enlaces deben de contener la propiedad target y la propiedad title

Verifique que siempre exista la propiedad target y la propiedad title dentro de la etiqueta <a>, en caso de que el target abra una ventana emergente se debe de dar aviso al usuario. El title generalmente siempre muestra el contenido que se encuentra dentro de la etiqueta <a>.

Mantener una aplicación actualizada no solamente significa librarla de errores

Es importante usar las tecnologías del W3C cuando se encuentren disponibles y sean soportadas. Entre otros motivos porque cada vez se tienen más en cuenta las cuestiones relacionadas con la accesibilidad. Algunos me odiaran, pero flash no es accesible para nada, hay que aceptarlo, la plataforma no fue desarrollada pensando en la accesibilidad.

Escribe en pequeños bloques de información

Se debe de estructurar y segmentar los textos incluidos organizándolos mediante títulos, subtítulos, párrafos y listas. Recuerda que los bloques de información demasiado largos dificultan su comprensión.

Maquetar sitios web con tablas no es una opción válida para desarrollas sitios ni aplicaciones web

Las tablas son elementos utilizados para presentar contenido tabular y no deben utilizarse para presentar otro tipo de contenido. Esto es especialmente importante para quienes utilizan navegadores sólo texto o lectores que leen línea a línea los datos en pantalla.

No olvides específicar el idioma de tu página

En todas las páginas debe indicarse el idioma principal del documento. Si el documento es XHTML, debe verificarse que, además del atributo “lang”, se debe de utilizar “xml:lang”.

Las listas deben de estar organizadas mediante etiquetas estándares

Se deben proporcionar barras de navegación constituidas por listas de enlaces para agruparlos y facilitar su localización. Recuerda que las listas no se definen por su aspecto sino por el uso de elementos <ol>, <ul> y <dl>.

Utiliza enlaces directos mediante teclas específicas

Los atajos de teclado permiten a quienes utilizan el teclado para navegar, acceder rápidamente a los elementos más importantes de la página. La propiedad accesskey es utilizada en etiquetas tipo <input> y etiquetas tipo <a>, al momento de presionar una tecla enlazada a un control o link esta envía el foco hacia el control.

La mayoría de esta información muchas veces no es tomada en cuenta y validando estos puntos o no haciéndolo, las páginas siguen funcionando aparentemente bien para aquellos que no tienen discapacidades o quienes no utilizan dispositivos traductores de páginas web. La meta de la accesibilidad es lograr que personas con discapacidades motoras o físicas puedan tener acceso a la web.

Fuentes y Sitios Relacionados

Importancia de la accesibilidad

Introduccion a la accesibilidad

Porque es importante la accesibilidad

La importancia de la creciente accesibilidad

Porque la web debe de ser accesible

Compartir y Disfrutar

Entradas Relacionadas:

1. Asp.net MVC 2 Model List<> DropdownListFor
2. Implementando un ToDo con jQuery para tu aplicacion Web
3. Sitio Web, correcciones y recepción de mensajes sms

jQuery ToDo

Antes que nada quiero decir que al escribir este pequeño tutorial me siento muy mal porque estoy traicionando a mi comunidad.. Soy mootools-cista pero en vías de que el framework (Yii Framework) que estoy utilizando a implementado jQuery tuve que cambiarlo de momento.

Esto sería el equivalente a la usabilidad de los usuarios pero exclusivamente para los desarrolladores de aplicaciones web, a continuación describiré como aplicar un widget a tu aplicación web desde el cual podrás mantener registro de las tareas pendientes o realizadas. Y hablo de usabilidad porque la lista siempre se mantiene a la vista del desarrollador.

Normalmente siempre utilizamos una aplicación para llevar el rastreo de tareas y seguimiento de errores cuando trabajamos en grupo con otras personas (por ejemplo en Qbit Mexhico utilizamos Solar Bugs Report), pero algunas veces cuando trabajamos solos es un poco más difícil ya que entra en juego la decídia y que por comodidad decidimos no llevar control de tareas pendientes desde una aplicación externa.

Mi propuesta para llevar una organización alternativa al seguimiento de errores y tareas pendientes es implementar mediante jQuery, CSS y HTML una especie de widget que se debe de pegar en cada página de la aplicación de la cual se desea realizar seguimiento.

1. La definición del código CSS

.popNotification {
   border:3px solid red;
   padding:15px;
   position:fixed;
   right:0;
   width:480;
   bottom:0;
   z-index:1400;
   background-color:#000;
   color:#fff;
   filter:alpha(opacity=4);
   -moz-opacity:0.4;
   -khtml-opacity:0.4;
   opacity: 0.4;
}

2. Definición del Código Javascript con jQuery

$(document).ready(function() {
   $('.popNotification').css('opacity',0.4).hover(function(){
      $(this).fadeTo(200,1);
   }, function(){
      $(this).fadeTo(200,0.4);
   });
});

3. Definición del Código HTML

La idea es pegar este código antes del la etiqueta <body> y escribir la lista de tareas que se necesitan realizar.

<div class="popNotification">
   <h2>ToDo</h2>
   <ul>
      <li>Esta puede ser la tarea #1</li>
      <li>Esta puede ser la tarea #2</li>
      <li>Esta puede ser la tarea #n</li>
      <li>Y asi podemos definir nuestras tareas</li>
   </ul>
</div>

El widget se puede mejorar o extender su funcionalidad, yo cuando una de las tareas la he realizado lo que hago no es borrar la tarea de la lista, sino que incluyo la imagen de un check al inicio de esa tarea.. Con eso me doy cuenta de si o no una tarea ya fue realizada. [muchas veces repetí la palabra tarea ¬¬]

Compartir y Disfrutar

Entradas Relacionadas:

1. jQuery Mobile lo bueno y lo malo
2. Ajax loading css (indicadores de carga)
3. Aplicaciones moviles – nativas vs web

Patrones de Diseño Web

Llevo mucho tiempo desarrollando aplicaciones web, durante todo este tiempo he aprendido mucho sobre usabilidad, interfaces y diseño. Cada proyecto de desarrollo es todo un reto y cada cliente tiene diferentes necesidades y diferente enfoque a como desea ver su aplicación. Lo que no saben y que es parte de la educación y comunicación que debe de mantenerse entre clientes y desarrolladores es que hay subvenciones y patrones que se deben de seguir para lograr una mejor interacción entre la aplicación y los usuarios, esto es lo que se le conoce como patrones de diseño.

Un patrón de diseño o interfaz (creo que así se entiende mejor), es la conexión física y hasta emocional entre dos aparatos, entidades o sistemas (Traduzcamos esto como la capacidad que tiene el usuario de comunicarse con una aplicación).

El desarrollo de interfaces para aplicaciones web esta basado en una serie de reglas que ya han sido definidas, todas o una mayoría adoptadas por la experiencia de muchos desarrolladores, diseñadores y psicológos que han analizado la manera en que las aplicaciones son utilizadas por los usuarios.

Pues resulta que para lograr una buena interfaz se necesita siempre el trabajo coordinado entre diseñadores y programadores (la discusión que nunca termina) y aunque cada uno tiene una percepción mental diferente de lo que puede ser una interfaz, una buena comunicación pueden ayudar a mejorar enormemente una aplicación consiguiendo interfaces atractivas, por eso es bueno que ambas personas aunque trabajan en diferentes partes del desarrollo de una aplicación web tengan similitud de conocimientos en cuanto a lo que es estandar y se necesita tener como base en una aplicación.

No hay que olvidar que los usuarios también han adquirido cierto grado de experiencia en cuanto a la navegación por la web y fácilmente reconocen elementos ubicados en lugares ya definidos por estos patrones, por eso es la importancia de seguir estos estándares de diseño, algunos ejemplos por citar algunos son los siguientes:

Localización de Perfil y Salida de la aplicación

Definido en la parte superior derecha de la página, es un pequeño cuadro desde el cual podemos tener acceso a nuestro perfil mediante un enlace, ahí mismo se encuentra un enlace que nos lleva a abandonar la aplicación de manera segura. Los estilos y la información contenida en este contenedor varian, pero es normal encontrarse al menos un enlace para ver/modificar el perfil del usuario y otro para salir de la aplicación.

Resultados de búsqueda

Los resultados de búsqueda por comodidad y facilidad a encontrar la información de manera rápida, se implementan mediante un cuadro de texto desde el cual se realiza la búsqueda, una vez que la búsqueda se ha realizado, el resultado aparece en forma de cascada donde se muestra información relacionada a la búsqueda. De manera predeterminada sabemos que cada resultado mostrado al hacer click nos debe de mostrar mucho más detalle.

Filtros de búsqueda

Al igual que los resultados de búsqueda, los filtros de búsqueda es una agrupación de términos de búsqueda generados a partir de la información más relevante, estos filtros sirven para indexar y obtener una muestra de resultados más específica, muy útiles para agilizar consultas de datos. De igual manera los resultados son mostrados en forma de cascada donde se muestra la información relacionada a la búsqueda.

Vistas Maestro – detalle

Las vistas maestro-detalle comunmente utilizada en diferentes tipos de aplicaciones no solamente web’s, definen la vista preliminar de un conjunto de datos, los grids o rejillas de resultados utilizan mucho este tipo de vistas para mostrar información relacionada a la fila que se ha seleccionado.

Generalmente la simplicidad será la mejor manera de representar una buena interfaz, muchas veces los usuarios no tienen el suficiente tiempo para darse a la búsqueda de un enlace o información específica, por lo que es muy recomendable enfocarse en no hacer perder el tiempo a los usuarios desarrollando interfaces limpia y sencillas. El diseño web y el contenido de este forman una estructura visual que debe de ser atractiva a la vista y gusto de un usuario.

Existe una ley muy clara, básica y aplicable al diseño de las interfaces (Ley de Fitt) que dice que mientras más grande y próximo al puntero del ratón este un objeto, mucho más sencillo será hacer click sobre él.

Adicionalmente al tema de las interfaces es bueno aplicar todos aquellos consejos que nos hacen mejorar nuestras aplicaciones para ofrecer una mejor experiencia de navegación a los usuarios.

Algunos consejos extras escenciales para mejorar la usabilidad

20 consejos de usabilidad esenciales para proyectos web c62550l

Consejos para mejorar la usabilidad de un blog

Usabilidad para principiantes

Fuentes:

http://designinginterfaces.com/
http://www.rosenfeldmedia.com/books/webforms/

Compartir y Disfrutar

Entradas Relacionadas:

1. Implementando un ToDo con jQuery para tu aplicacion Web
2. Desarrollo de aplicaciones para ambientes tridimensionales
3. Sesion caducada, una regla de la usabilidad