Desarrollando Una Mejor Experiencia De Usuario Con Ajax
- 1. Desarrollando una Mejor Experiencia de Usuario con ASP.NET Ajax Julio Casal Software Developer John Galt Solutions julio_casal@hotmail.com http://msguayaquil.com/blogs/jcasal
- 2. Agenda Vista rápida de ASP.NET Ajax Areas a mostrar: Enriquecimiento de páginas ASP.NET con Ajax Usando servicios Web desde JavaScript Creación de controles que soporten Ajax y scripts Objetivo: Demonstrar la amplitud, simplicidad y extensibilidad de ASP.NET Ajax
- 3. Ajax-ificando un Sitio Mejorar las características del sitio/aplicación Rendimiento: menores actualizaciones, requests/responses Percepción del Usuario-final: interacciones fluídas; no hay cortes bruscos Usabilidad: notificaciones visuales Mejorar la apariencia visual: animaciones Proveer funcionalidad adicional: auto- actualizaciones, trabajo en background, etc. Por qué Ajax-ificar? No solo porque es la moda! Experiencias diferenciadas son clave para el nuevo éxito con clientes y alcanzar expectativas crecientes
- 4. Qué es ASP.NET Ajax? Un framework de punto-a-punto para construir experiencias y aplicaciones Web interactivas y enriquecidas Extensiones de ASP.NET 2.0 Ajax Controles de servidor que habilitan AJAX en cualquier aplicación ASP.NET Librería de Microsoft Ajax Framework de scripts de cliente que trabaja en varios navegadores y servidores de back-end ASP.NET Ajax Control Toolkit Conjunto de controles enriquecido y funcionalidad de scripts en el cliente Modelo de desarrollo comunitario Objetivos Principales Simple, pero Poderoso Feeling de tipo .NET con el framework de scripts Reduce la necesidad de que cada desarrollador tenga que usar scripting en escenarios clave
- 5. Diagrama de la Arquitectura HTML markup, “Atlas” CSS, and Service Web Services ASP.NET Pages Proxies (ASMX or WCF) Script Librería Microsoft Ajax Extensiones ASP.NET 2.0 Ajax Controls, Components App Services Ajax-Enabled Bridge Component Model and Server Controls Web Services UI Framework Bridge Base Class Library ASP.NET 2.0 Script Core Page Application Framework, Browser Compatibility Services Server Controls Framework de Framework de Cliente Servidor
- 6. “ASP.NET Ajax” Lista de Tareas
- 7. Controles de Servidor “Atlas” Reduciendo viajes de ida y vuelta control <Asp:UpdatePanel> Defina fácilmente regiones “actualizables” de una página Los viajes de ida y vuelta al servidor se vuelven asíncronos “Atlas” maneja toda la infraestructura <atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> <!– Este contenido puede ser actualizado dinámicamente! -> <asp:GridView> ... </asp:GridView> <ContentTemplate> </atlas:UpdatePanel>
- 8. Qué Escenarios Cubre ASP.NET Ajax? Enriquecer aplicaciones ASP.NET No se require scripting Habilitar actualizaciones con menos postbacks y renderizado parcializado de porciones de páginas Controles habilitados con Ajax o extensores para escenarios más allá de las actualizaciones de páginas Uso de servicios Web desde script cliente Algo de scripting Abstracción basada en métodos sobre XMLHttp para servicios .asmx/.svc Soporte para servicios JSON, RESTful Construcción de Componentes Ajax reutilizables Requiere scripting para el modelo “page por ver” El framework de scripts provee un modelo más robusto y productivo de desarrollo Soporte para extensibilidad tanto en el servidor como en el cliente
- 9. ASP.NET Ajax en Acción: Photo SlideShow Ajaxificado
- 10. Esquema de la Demo ScriptManager HistoryControl UP1 OverlayExtender UP3 FormView Forma para Comentarios FormView Foto + Título UP4 DataList UpdateProgress Lista de Comentarios FadeHighlight CrossFadeExtende UP2 DataList: PhotoList r ThumbnailExtender EXIF Métodos Web via XMLHttp Servic e
- 11. Recapitulación de la Demo Ciertas porciones de la página se actualizan vía UpdatePanel El comportamiento básico del UpdatePanel es extendido con patrones Ajax usando controles Extender Progress, Notificaciones Visuales (efectos fade) Otros patrones Ajax implementados Despliegue de información (overlay + thumbnails) Pedir datos adicionales de un servicio Web Información EXIF Script empaquetado en clases del lado cliente y funcionalidad expuesta vía controles de servidor
- 12. Notas de la Demo Renderizado Parcial vs. Servicios Web Dos modelos para actualizar la UI incrementalmente Renderizado Parcial – cuando necesita mantener el estado de la página, controles, etc, en lógica de servidor Pros: Simple de incorporar, use propiedades de los controles, estado de la página Cons: Full-postback, un request a la vez Servicios Web – cuando su lógica del lado del servidor no mantiene estado Pros: Liviano, mútiples requests en paralelo Cons: Se necesita escribir un poco de script cliente para extraer datos de la UI y empaquetarlos como parámetros para llamar al servicio web Ambos son herramientas últiles ASP.NET Ajax provee ambos modelos UpdatePanel Modelo de programación .asmx/.svc; proxies de script cliente proveen un mayor nivel de abstracción en requests XMLHttpRequest
- 13. Squeet.com
- 14. Squeet.com “Atlas” les ha brindado una rica experiencia de usuario a los usuarios de Squeet…No puedes pedir una API más poderosa y fácil de usar. --Hamid Shojaee, Presidente, Axosoft, LLC
- 15. www.TitleZ.com
- 16. www.TitleZ.com “Considerando lo demorado que es implementar AJAX tradicional, „Atlas‟ casi parece magia!” Arthur Wait, Dev Manager, TitleZ
- 20. En Resumen… ASP.NET Ajax es simple pero poderoso Habilita el “Ajax-ificar” las aplicaciones ASP.NET con facilidad Permite incorporar varios patrones Ajax Plataforma extensible para escenarios más avanzados Framework de punto a punto Soporta y aprovecha el modelo .NET
- 21. Recursos Adicionales El sitio de ASP.NET Ajax http://ajax.asp.net Descargas, control toolkit, foros, videos, docs, información en general Web Development Helper http://projects.nikhilk.net Blogs http://www.nikhilk.net http://weblogs.asp.net/scottgu http://weblogs.asp.net/bleroy
- 22. El Futuro de ASP.NET Ajax Estarán disponibles nuevos Community Tech Preview (CTP) Licencia Go Live con soporte de la comunidad Fin de Año: ASP.NET Ajax 1.0 Liberado Soporte completo Incorporará el feedback obtenido de los builds CTP Corre sobre ASP.NET 2.0 Incluido en el release “Orcas” del .NET framework Se seguirá el modelo CTP para incorporar funcionalidad adicional sobre 1.0
- 23. Gracias!
- 24. © 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.