Desarrollando una Mejor Experiencia de Usuario con ASP.NET Ajax

Desarrollando una Mejor Experiencia de Usuario con ASP.NET AjaxJulio CasalSoftware DeveloperJohn Galt Solutionsjulio_casal@hotmail.comhttp://msguayaquil.com/blogs/jcasal

Julio CasalSoftware DeveloperJohn Galt Solutionsjulio_casal@hotmail.comhttp://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.