Desarrollando una Mejor
Experiencia de Usuario con
ASP.NET Ajax
Julio Casal
Software Developer
John Galt Solutions
julio_c...
Agenda
 Vista rápida de ASP.NET Ajax
 Areas a mostrar:
   Enriquecimiento de páginas ASP.NET con
   Ajax
   Usando servici...
Ajax-ificando un Sitio
 Mejorar las características del sitio/aplicación
   Rendimiento: menores
   actualizaciones, reque...
Qué es ASP.NET Ajax?
 Un framework de punto-a-punto para construir experiencias y
 aplicaciones Web interactivas y enrique...
Diagrama de la Arquitectura
 HTML markup,      “Atlas”
   CSS, and        Service                      Web Services
      ...
“ASP.NET Ajax”


Lista de Tareas
Controles de Servidor “Atlas”
Reduciendo viajes de ida y vuelta
 control <Asp:UpdatePanel>
   Defina fácilmente regiones “...
Qué Escenarios Cubre ASP.NET Ajax?
 Enriquecer aplicaciones ASP.NET
   No se require scripting
   Habilitar actualizacione...
ASP.NET Ajax en Acción:
Photo SlideShow Ajaxificado
Esquema de la Demo
                     ScriptManager   HistoryControl




UP1
                         OverlayExtender
  ...
Recapitulación de la Demo
 Ciertas porciones de la página se actualizan vía
 UpdatePanel
 El comportamiento básico del Upd...
Notas de la Demo
Renderizado Parcial vs. Servicios Web
  Dos modelos para actualizar la UI incrementalmente
  Renderizado ...
Squeet.com
Squeet.com



“Atlas” les ha brindado una rica
experiencia de usuario a los
usuarios de Squeet…No puedes
pedir una API más...
www.TitleZ.com
www.TitleZ.com

  “Considerando lo demorado
  que es implementar AJAX
  tradicional, „Atlas‟ casi
  parece magia!”
  Arthu...
www.PageFlakes.com
Vendedores de Componentes




http://blogs.msdn.com/brada/archive/2006/05/06/AtlasControlVendors.aspx
“Atlas”


Control ToolKit
En Resumen…
ASP.NET Ajax es simple pero poderoso
Habilita el “Ajax-ificar” las aplicaciones ASP.NET
con facilidad
Permite ...
Recursos Adicionales
 El sitio de ASP.NET Ajax
   http://ajax.asp.net
   Descargas, control
   toolkit, foros, videos, doc...
El Futuro de ASP.NET Ajax
 Estarán disponibles nuevos Community Tech
 Preview (CTP)
   Licencia Go Live con soporte de la ...
Gracias!
© 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Desarrollando Una Mejor Experiencia De Usuario Con Ajax

1,237

Published on

General overview of ASP.NET Ajax and how to use its basic features in .NET Websites.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,237
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Desarrollando Una Mejor Experiencia De Usuario Con Ajax"

  1. 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. 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. 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. 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. 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. 6. “ASP.NET Ajax” Lista de Tareas
  7. 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. 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. 9. ASP.NET Ajax en Acción: Photo SlideShow Ajaxificado
  10. 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. 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. 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. 13. Squeet.com
  14. 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. 15. www.TitleZ.com
  16. 16. www.TitleZ.com “Considerando lo demorado que es implementar AJAX tradicional, „Atlas‟ casi parece magia!” Arthur Wait, Dev Manager, TitleZ
  17. 17. www.PageFlakes.com
  18. 18. Vendedores de Componentes http://blogs.msdn.com/brada/archive/2006/05/06/AtlasControlVendors.aspx
  19. 19. “Atlas” Control ToolKit
  20. 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. 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. 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. 23. Gracias!
  24. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×