Desarrollando una Mejor Experiencia de Usuario con ASP.NET Ajax
Desarrollando una Mejor Experiencia de Usuario con ASP.NET AjaxJulio CasalSoftware DeveloperJohn Galt [email protected]://msguayaquil.com/blogs/jcasal
Julio CasalSoftware DeveloperJohn Galt [email protected]://msguayaquil.com/blogs/jcasal
AgendaAgenda
Vista rápida de ASP.NET AjaxVista rápida de ASP.NET Ajax
Areas a mostrar:Areas a mostrar:Enriquecimiento de páginas ASP.NET con Enriquecimiento de páginas ASP.NET con AjaxAjax
Usando servicios Web desde JavaScriptUsando servicios Web desde JavaScript
Creación de controles que soporten Ajax Creación de controles que soporten Ajax y scriptsy scripts
Objetivo:Objetivo:Demonstrar la amplitud, simplicidad y Demonstrar la amplitud, simplicidad y extensibilidad de ASP.NET Ajaxextensibilidad de ASP.NET Ajax
Ajax-ificando un SitioAjax-ificando un Sitio
Mejorar las características del Mejorar las características del sitio/aplicaciónsitio/aplicación
Rendimiento: menores actualizaciones, Rendimiento: menores actualizaciones, requests/responsesrequests/responses
Percepción del Usuario-final: interacciones Percepción del Usuario-final: interacciones fluídas; no hay cortes bruscosfluídas; no hay cortes bruscos
Usabilidad: notificaciones visualesUsabilidad: notificaciones visuales
Mejorar la apariencia visual: animacionesMejorar la apariencia visual: animaciones
Proveer funcionalidad adicional: auto-Proveer funcionalidad adicional: auto-actualizaciones, trabajo en background, etc.actualizaciones, trabajo en background, etc.
Por qué Ajax-ificar?Por qué Ajax-ificar?No solo porque es la moda!No solo porque es la moda!
Experiencias diferenciadas son clave para el Experiencias diferenciadas son clave para el nuevo éxito con clientes y alcanzar nuevo éxito con clientes y alcanzar expectativas crecientesexpectativas crecientes
Qué es ASP.NET Ajax?Qué es ASP.NET Ajax?
Un framework de punto-a-punto para construir experiencias Un framework de punto-a-punto para construir experiencias y aplicaciones Web interactivas y enriquecidasy aplicaciones Web interactivas y enriquecidasExtensiones de ASP.NET 2.0 AjaxExtensiones de ASP.NET 2.0 Ajax
Controles de servidor que habilitan AJAX en cualquier aplicación Controles de servidor que habilitan AJAX en cualquier aplicación ASP.NETASP.NET
Librería de Microsoft AjaxLibrería de Microsoft AjaxFramework de scripts de cliente que trabaja en varios Framework de scripts de cliente que trabaja en varios navegadores y servidores de back-endnavegadores y servidores de back-end
ASP.NET Ajax Control ToolkitASP.NET Ajax Control ToolkitConjunto de controles enriquecido y funcionalidad de scripts en Conjunto de controles enriquecido y funcionalidad de scripts en el clienteel clienteModelo de desarrollo comunitarioModelo de desarrollo comunitario
Objetivos PrincipalesObjetivos PrincipalesSimple, pero PoderosoSimple, pero PoderosoFeeling de tipo .NET con el framework de scriptsFeeling de tipo .NET con el framework de scriptsReduce la necesidad de que cada desarrollador tenga que usar Reduce la necesidad de que cada desarrollador tenga que usar scripting en escenarios clavescripting en escenarios clave
Diagrama de la ArquitecturaDiagrama de la Arquitectura
Extensiones ASP.NET 2.0 AjaxExtensiones ASP.NET 2.0 Ajax
Ajax-Enabled Server
Controls
Ajax-Enabled Server
Controls
App Services Bridge
App Services Bridge
Web Services Bridge
Web Services Bridge
Framework de Framework de ServidorServidor
Framework de Framework de ClienteCliente
Librería Microsoft AjaxLibrería Microsoft Ajax
Controls, Components
Controls, Components
Script CoreScript Core
Base Class LibraryBase Class Library
Component Model and UI FrameworkComponent Model and UI Framework
Browser Compatibility
Browser Compatibility
ASP.NET 2.0ASP.NET 2.0
Application Services
Application Services
Page Framework,
Server Controls
Page Framework,
Server Controls
ASP.NET PagesASP.NET PagesASP.NET PagesASP.NET Pages Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)
Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)
HTML markup,HTML markup,CSS, andCSS, and
ScriptScript
HTML markup,HTML markup,CSS, andCSS, and
ScriptScript
““Atlas”Atlas”ServiceServiceProxiesProxies
““Atlas”Atlas”ServiceServiceProxiesProxies
“ASP.NET Ajax”“ASP.NET Ajax”
Lista de TareasLista de Tareas
Controles de Servidor “Atlas”Reduciendo viajes de ida y vuelta
Controles de Servidor “Atlas”Reduciendo viajes de ida y vueltacontrolcontrol <Asp:UpdatePanel> <Asp:UpdatePanel>
Defina fácilmente regiones Defina fácilmente regiones “actualizables” de una página“actualizables” de una páginaLos viajes de ida y vuelta al servidor Los viajes de ida y vuelta al servidor se vuelven asíncronosse vuelven asíncronos““Atlas” maneja toda la Atlas” maneja toda la infraestructura infraestructura
<atlas:UpdatePanel id=“u1” runat=“server”><atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate><ContentTemplate>
<!– Este contenido puede ser actualizado <!– Este contenido puede ser actualizado dinámicamente! ->dinámicamente! ->
<asp:GridView<asp:GridView>>......
</asp:GridView></asp:GridView> <ContentTemplate><ContentTemplate></atlas:UpdatePanel></atlas:UpdatePanel>
Qué Escenarios Cubre ASP.NET Ajax?Qué Escenarios Cubre ASP.NET Ajax?
Enriquecer aplicaciones ASP.NETEnriquecer aplicaciones ASP.NETNo se require scriptingNo se require scriptingHabilitar actualizaciones con menos postbacks y Habilitar actualizaciones con menos postbacks y renderizado parcializado de porciones de páginasrenderizado parcializado de porciones de páginasControles habilitados con Ajax o extensores para Controles habilitados con Ajax o extensores para escenarios más allá de las actualizaciones de páginasescenarios más allá de las actualizaciones de páginas
Uso de servicios Web desde script clienteUso de servicios Web desde script clienteAlgo de scriptingAlgo de scriptingAbstracción basada en métodos sobre XMLHttp para Abstracción basada en métodos sobre XMLHttp para servicios .asmx/.svcservicios .asmx/.svcSoporte para servicios JSON, RESTfulSoporte para servicios JSON, RESTful
Construcción de Componentes Ajax reutilizablesConstrucción de Componentes Ajax reutilizablesRequiere scripting para el modelo “page por ver”Requiere scripting para el modelo “page por ver”El framework de scripts provee un modelo más robusto y El framework de scripts provee un modelo más robusto y productivo de desarrolloproductivo de desarrolloSoporte para extensibilidad tanto en el servidor como en Soporte para extensibilidad tanto en el servidor como en el clienteel cliente
ASP.NET Ajax en Acción:Photo SlideShow Ajaxificado
ASP.NET Ajax en Acción:Photo SlideShow Ajaxificado
Esquema de la DemoEsquema de la Demo
FormViewFormViewFoto + TítuloFoto + Título
DataList: PhotoListDataList: PhotoList
FormViewFormViewForma para ComentariosForma para Comentarios
DataListDataListLista de Lista de
ComentariosComentarios
UP1UP1
UP2UP2
UP3UP3
UP4UP4
ScriptManagerScriptManager HistoryContrHistoryControlol
UpdateProgresUpdateProgresss
ThumbnailExtendThumbnailExtenderer
OverlayExtendOverlayExtenderer
FadeHighlightFadeHighlightCrossFadeExtenCrossFadeExten
derder
EXIFEXIFServiServi
ceceMétodos Web via XMLHttpMétodos Web via XMLHttp
Recapitulación de la DemoRecapitulación de la Demo
Ciertas porciones de la página se Ciertas porciones de la página se actualizan vía UpdatePanelactualizan vía UpdatePanel
El comportamiento básico del UpdatePanel El comportamiento básico del UpdatePanel es extendido con patrones Ajax usando es extendido con patrones Ajax usando controles Extendercontroles Extender
Progress, Notificaciones Visuales (efectos fade)Progress, Notificaciones Visuales (efectos fade)
Otros patrones Ajax implementadosOtros patrones Ajax implementadosDespliegue de información (overlay + Despliegue de información (overlay + thumbnails)thumbnails)
Pedir datos adicionales de un servicio WebPedir datos adicionales de un servicio WebInformación EXIFInformación EXIF
Script empaquetado en clases del lado Script empaquetado en clases del lado cliente y funcionalidad expuesta vía cliente y funcionalidad expuesta vía controles de servidorcontroles de servidor
Notas de la DemoRenderizado Parcial vs. Servicios WebNotas de la DemoRenderizado Parcial vs. Servicios Web
Dos modelos para actualizar la UI Dos modelos para actualizar la UI incrementalmenteincrementalmenteRenderizado Parcial – cuando necesita mantener Renderizado Parcial – cuando necesita mantener el estado de la página, controles, etc, en lógica de el estado de la página, controles, etc, en lógica de servidorservidor
Pros: Simple de incorporar, use propiedades de los Pros: Simple de incorporar, use propiedades de los controles, estado de la páginacontroles, estado de la páginaCons: Full-postback, un request a la vezCons: Full-postback, un request a la vez
Servicios Web – cuando su lógica del lado del Servicios Web – cuando su lógica del lado del servidor no mantiene estadoservidor no mantiene estado
Pros: Liviano, mútiples requests en paraleloPros: Liviano, mútiples requests en paraleloCons: Se necesita escribir un poco de script cliente para Cons: Se necesita escribir un poco de script cliente para extraer datos de la UI y empaquetarlos como parámetros extraer datos de la UI y empaquetarlos como parámetros para llamar al servicio webpara llamar al servicio web
Ambos son herramientas últilesAmbos son herramientas últilesASP.NET Ajax provee ambos modelosASP.NET Ajax provee ambos modelos
UpdatePanelUpdatePanelModelo de programación .asmx/.svc; proxies de script Modelo de programación .asmx/.svc; proxies de script cliente proveen un mayor nivel de abstracción en cliente proveen un mayor nivel de abstracción en requests XMLHttpRequestrequests XMLHttpRequest
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
Squeet.com
www.TitleZ.com
“Considerando lo demorado que es implementar AJAX tradicional, ‘Atlas’ casi parece magia!”Arthur Wait, Dev Manager, TitleZ
www.TitleZ.comwww.TitleZ.com
www.PageFlakes.com
Vendedores de ComponentesVendedores de Componentes
http://blogs.msdn.com/brada/archive/2006/05/06/AtlasControlVendors.aspx
“Atlas”“Atlas”
Control ToolKitControl ToolKit
En Resumen…En Resumen…
ASP.NET Ajax es simple pero poderosoASP.NET Ajax es simple pero poderoso
Habilita el “Ajax-ificar” las aplicaciones Habilita el “Ajax-ificar” las aplicaciones ASP.NET con facilidadASP.NET con facilidad
Permite incorporar varios patrones AjaxPermite incorporar varios patrones Ajax
Plataforma extensible para escenarios más Plataforma extensible para escenarios más avanzadosavanzados
Framework de punto a puntoFramework de punto a punto
Soporta y aprovecha el modelo .NETSoporta y aprovecha el modelo .NET
Recursos AdicionalesRecursos Adicionales
El sitio de ASP.NET AjaxEl sitio de ASP.NET Ajaxhttp://ajax.asp.nethttp://ajax.asp.net
Descargas, control toolkit, foros, videos, Descargas, control toolkit, foros, videos, docs, información en generaldocs, información en general
Web Development HelperWeb Development Helperhttp://projects.nikhilk.nethttp://projects.nikhilk.net
BlogsBlogshttp://www.nikhilk.nethttp://www.nikhilk.net
http://weblogs.asp.net/scottguhttp://weblogs.asp.net/scottgu
http://weblogs.asp.net/bleroyhttp://weblogs.asp.net/bleroy
El Futuro de ASP.NET AjaxEl Futuro de ASP.NET Ajax
Estarán disponibles nuevos Community Estarán disponibles nuevos Community Tech Preview (CTP)Tech Preview (CTP)
Licencia Go Live con soporte de la comunidadLicencia Go Live con soporte de la comunidad
Fin de Año: ASP.NET Ajax 1.0 LiberadoFin de Año: ASP.NET Ajax 1.0 LiberadoSoporte completoSoporte completoIncorporará el feedback obtenido de los builds Incorporará el feedback obtenido de los builds CTPCTPCorre sobre ASP.NET 2.0Corre sobre ASP.NET 2.0
Incluido en el release “Orcas” del .NET Incluido en el release “Orcas” del .NET frameworkframeworkSe seguirá el modelo CTP para incorporar Se seguirá el modelo CTP para incorporar funcionalidad adicional sobre 1.0funcionalidad adicional sobre 1.0
Gracias!Gracias!
© 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.