1 1 /46 Ajax... un camino hacia la construcción de aplicaciones web usables Ing. W. Libardo Pantoja - [email protected]@unicauca.edu.co Grupo de Inv. y Desarrollo en Ing. Software - IDIS Grupo Linux Unicauca – GLUC Universidad del Cauca-Colombia

2 Usted es libre de: Copiar, distribuir y comunicar públicamente la obra Hacer obras derivadas Bajo las condiciones siguientes: Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador. No comercial. No puede utilizar esta obra para fines comerciales. Compartir bajo la misma licencia. Si altera o transforma esta obra, o genera una obra derivada, solo puede distribuir la obra derivada bajo una licencia idéntica a ésta.

3 3 /46 Agenda 1. Acerca de IDIS 2. Ingeniería de la usabilidad y accesibilidad 3. Objetivos de la usabilidad 4. Ajax –Qué es Ajax –Qué se puede Hacer con Ajax –Hola Mundo en Ajax –Demostración

4 Grupo IDIS : Investigación y Desarrollo en Ingeniería del Software Lineas de Investigación: Ingeniería de la Colaboración. Calidad del Software: Productos y Procesos. Tecnologías de soporte: métodos, arquitecturas, enfoques y especificaciones.

5 ¿Que es HCI o IPO? HCI Vs Ingeniería Software

6 ¿Fueron ambas disciplinas fueron concebidas desde la misma perspectiva? Ancestro en común: la computación. La IS fue concebida a mediados de 1950 La IPO en los comienzos de 1960 [Glass, L. R., In the beginning: Personal recollections of software pioneers] Evolución muy distinta, pero  la complejidad de los productos software que actualmente se desarrollan requieren la participación de ambas disciplinas

7 Algunas aproximaciones Cooperación a través de test de usabilidad dentro de las fases más importantes del proceso de desarrollo de software [Coutaz, J. - Exploring the intersection of HCI and Software engineering, 1994] Modelo para incorporar IPO dentro de la Arquitectura conducida por el Modelo [Jespersen & Linvald- Interact 2003 Workshop on Software Engineering and HCI] Patrones de usabilidad dentro de la Arquitectura de Software [Folmer, E. et al., Usability patterns in Software Architecture, HCI International 2003] Relacionar la IS e IPO extendiendo UML con un lenguaje de modelamiento de la interacción (MoLIC) [Paula, M., et al., Towards Extending UML Through an Interaction Modeling Language. Closing he Gaps: Software Engineering and Human-Computer Interaction’, IFIP, 2003] Mejorar la práctica del desarrollo de software incluyendo aspectos de IPO [Ferré, X., Integration of Usability Techniques into the Software Development Process. ICSE Workshop on SE-HCI 2003 ]

8 Algunas aproximaciones Human-Centered Software Engineering - Integrating Usability in the Software Development Lifecycle (2005) Engineering Human Computer Interaction and Interactive Systems (2005) Software Engineering and Human-Computer Interaction (2004) Human Aspects of Software Engineering (2004) Universal Access in the Information Society (desde 2001, 3 ediciones/año) HCI related papers of Interacción 2004 (2006)

9 ¿Qué es la ingeniería de la usabilidad?

10 La ingeniería de la usabilidad La ingeniería de usabilidad se puede definir como el proceso por el cual la usabilidad de un producto se especifica cuantitativamente. Después de que se construya el producto puede ser demostrado que alcanza, o no, los niveles requeridos de usabilidad.

11 USABILIDAD EN LA WEB

12 ● Internet basada en texto ● HTML lenguaje estático ● WWW permite documentos multimedia ● WWW con contenidos dinámicos ● Aplicaciones web Antecedentes

13 Situación Actual ● La Web ha cambiado mucho ● Tenemos necesidad de llevar nuestros sistemas de información hacia internet ● Estándares ● Mucha diversidad de plataformas

14 Principios Generales de la Usabilidad ● Facilidad de aprendizaje ● Consistencia ● Flexibilidad ● Robustez ● Recuperabilidad ● Tiempo de respuesta ● Adecuación de las tareas ● Disminución de la carga cognitiva

15 ¿Por qué es importante la usabilidad? El establecimiento de unos principios de diseño en ingeniería basados en la usabilidad han tenido como consecuencia probada: una reducción de los costos de producción una reducción de los costos de mantenimiento y apoyo una mejora en la calidad del producto

16 16 /46 ¿Qué es Ajax? Asynchronous JavaScript and XML Componentes: Browser (presentación) utilizando HTML y Cascading Style Sheets(CSS) Datos almacenados en formato XML y traídos desde el servidor Datos Behind-the-scenes traidos utilizando objetos XMLHttpRequest en el browser JavaScript

17 17 /46 Ajax y la Web 2.0 El término Web 2.0 fue acuñado por O'Reilly Media en 2004 para referirse a una segunda generación de Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, los wikis o las folcsonomías, que fomentan la colaboración y el intercambio ágil de información entre los usuarios. Tecnologías: CSS, marcado XHTML, AJAX,Java Web Start, Sindicación/Agregación de datos en RSS/ATOM, URLs sencillas y con significado, JCC y APIs REST o XML

18 18 /46 ¿Cómo funciona la web tradicional? Las personas hacen click en links (botones y enlaces) y espera un tiempo a que aparezca una nueva página...

19 19 /46 ¿Cómo funciona la web con Ajax? Permite que el Software en la web actúe como software de escritorio Ajax trae los datos desde el servidor sin recargar nuevas páginas desde servidor

20 20 /46 ¿Qué es JavaScript? JavaScript es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C. El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la que fabricó los primeros navegadores web comerciales. Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0. Los autores inicialmente lo llamaron Mocha y más tarde LiveScript pero fue rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems y Netscape, el 4 de diciembre de 1995.

21 21 /46 ¿Qué es XML? Es un popular lenguaje que permite almacenar datos en un formato fácil XML, sigla en inglés de eXtensible Markup Language («lenguaje de marcas extensible»), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C) Tiene un papel muy importante en la actualidad ya que permite la compatibilidad entre sistemas para compartir la información de una manera segura, fiable y fácil.

22 22 /46 ¿Qué se puede hacer con Ajax? Live Searching. Buscando datos en tiempo real con búsquedas sobre el servidor. http://www.google.com/webhp?complete=1&hl=en http://localhost/apache2-default/ajax/ejemplo3/ejemplo3.html

23 23 /46 ¿Qué se puede hacer con Ajax? Obteniendo las respuestas con autocompletado www.papermountain.org/demos/live

24 24 /46 ¿Qué se puede hacer con Ajax? Chateando con amigos... www.plasticshore.com/projects/chat http://treehouse.ofb.net/chat/?lang=en

25 25 /46 ¿Qué se puede hacer con Ajax? Dragging and dropping con Ajax Carro de compras

26 26 /46 ¿Qué se puede hacer con Ajax? Jugando con Ajax http://pandorabots.com/pandora/talk?botid=c96f911b3e35f9e1 www.jesperolsen.net/PChess

27 27 /46 ¿Qué se puede hacer con Ajax? Obteniendo feedback instantánea de un login de usuario http://localhost/apache2-default/ajax/ejemplo4_1/ejemplo4_1.html

28 28 /46 ¿Qué se puede hacer con Ajax? Activando menús pop-up con Ajax

29 29 /46 ¿Qué se puede hacer con Ajax? Modificando Páginas web con Ajax http://digg.com/spy

30 30 /46 ¿Qué se puede hacer con Ajax? gmail: Calendario: http://www.gmail.comhttp://www.gmail.com Demostración

31 31 /46 ¿Qué se puede hacer con Ajax? Gmail: Hojas de cálculo Demostración

32 32 /46 ¿Qué se puede hacer con Ajax? gmail: presentaciones Demostración

33 33 /46 ¿Qué se puede hacer con Ajax? Gmail: procesadores de texto

34 34 /46 ¿Qué se puede hacer con Ajax? google maps: http://maps.google.es/http://maps.google.es/

35 35 /46 ¿Cómo trabaja Ajax?

36 36 /46 ¿Cómo trabaja Ajax? 1. El usuario genera un evento, por ejemplo, un click sobre un botón. Esto desencadena una llamada a JavaScript. 2. Un objeto XMLHttpRequest es creado y configurado con un parámetro de solicitud que incluye el ID del componente que generó el evento y cualquier valor que el usuario pudo haber entrado. 3. El objeto XMLHttpRequest hace una solicitud asíncrona al servidor web. Un objeto (tal como un servlet o un listener) recibe la solicitud, la procesa, y puede almacenar datos en un almacén de datos. 4. El objeto que procesó la solicitud retorna un documento XML que contiene la actualización que viaja al cliente. 5. El objetos XMLHttpRequest recibe los datos XML, los procesa, y acualiza el DOM HTML DOM que representa los datos de la nueva página.

37 37 /46 ¿Ajax Vs usabilidad? Ajax puede ayudar a incrementar la velocidad y la usabilidad de una aplicación web actualizando solamente una parte de ésta.

38 38 /46 El “Hola Mundo” con Ajax http://localhost/apache2- default/ajax/ejemplo2/reloj.html

39 39 /46 El Hola Mundo con Ajax var xmlHttp; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Su navegador no soporta Ajax"); return false; }

40 40 /46 El Hola Mundo con Ajax xmlHttp.onreadystatechange = processPage;

41 41 /46 El Hola Mundo con Ajax Ahora la instrucción XMLHttpRequest que hace la solicitud. xmlHttp.open("GET","time.php",true); xmlHttp.send("");

42 42 /46 El Hola Mundo con Ajax La función que procesa la solicitud es la siguiente: function processPage() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } xmlHttp.readyState == 4: indica que hemos recibido datos back desde la página solicitada xmlHttp.status == 200: nos indica que fue exitoso xmlHttp.responseText: es lo que actualmente se ha devuelto.

43 43 /46 El Hola Mundo con Ajax El formulario HTML que invoca y muestra los datos es el siguiente: Name: Date/Time:

44 44 /46 El Hola Mundo con Ajax El script php del servidor que captura la fecha del sistema es:

45 45 /46 Frameworks y Ajax

46 46 /46 Bibliografía ● Presentación de HCI. Cesar Collazos. Unicauca ● http://es.wikipedia.org/wiki/Web_2.0 http://es.wikipedia.org/wiki/Web_2.0 ● http://es.wikipedia.org/wiki/JavaScript http://es.wikipedia.org/wiki/JavaScript ● http://es.wikipedia.org/wiki/XML http://es.wikipedia.org/wiki/XML ● http://www.phpit.net/article/ten-different-php-frameworks/ http://www.phpit.net/article/ten-different-php-frameworks/ ¿ PREGUNTAS ?