MSDN Seminar : The Next Web NOW! Better User Experience ...€¦ · Better User Experience with ASP.NET AJAX Smith Suksmith MVP - Solutions Architect Director - Office of Computer

MSDN The Next Web NOW! 11/22/2006

Better User Experience with ASP.NET AJAX

Smith Suksmith

MVP - Solutions ArchitectDirector - Office of Computer Clustering Promotion

MSDN Seminar : The Next Web NOW!


Is this the right direction?



Web 2.0 Overview

GET REMIX DELIVER

Official Data

Census, Government,

Traditional media

User Data

Blogs, Social software,

Photos, Audio, Video

Aggregated Data

Ranking, Public calendar

Metadata

Tags, geourl, Links,

trackback, session

Source: Peter Forret

Population stats,

Satellite maps,

TV programs, iTunes,

ISBN, Trailers

Blogs, Wikipedia,

Amazon review,

IMDB feedback,

podcasts, Flickr

Google Search,

Technorati Cosmos,

PageRank, SplogSpot,

Amazon Top Sellers,

Ebay reputation

Del.icio.us,

Flickr tags,

Technorati Cosmos,

Plazes geo-location

Aggregate

Annotate

Convert

Filter

Index

Map

Rank

Transform

Creative Commons,

Perpetual Beta,

Release early,

Release often,

Hacking is OK,

Trust your users,

Service –No software

Interface- REST

- RPC

- SOAP

Format- RSS

- Atom

- KML

- JSON

- iCal/hCal

- BitTorrent

Address- Permalink

- Granular

- Loosely

joined

Rich UI- AJAX

- DHTML

- Flash

VISUALIZE- Maps

- Calendar

SELF-SERVICE- Contextual

- Advertising

- Payment

DEVICES- PDA

- Phone

- Everywhere

mm

mm


Web 2.0 vs SOA

Software as a service

Interoperability based on Web principles

Applications are platforms

Encourages unintended uses

Mashups

Rich user interface

Architecture of participation

Software as services

Interoperability based on Web standards

Applications are platforms

Permits unintended uses

Composite Applications

Little user interface guidance

Little prescription of user participation

Web 2.0 SOA

Source: Dion Hinchcliffe - http://web2.wsj2.com/continuing_an_industry_discussion_the_coevolution_of_soa_and.htm


2.0 Model





What’s else?


User Experience



What is user experience?

Coffee? Entertainment? Transportation?

Windows Vista Office 2007


User Experience


The first human-computer

interfaces were strictly

utilitarian.

UI Trends / The Early Years


The next wave of computer

interfaces focused on

increasing productivity for

expert users.

UI Trends / The Command Line


Graphical User Interface

(GUI)-based operating

systems strived for system-

wide consistency.

UI Trends / Dawn of the GUI


..then the Web happened.

In the evolutionary history of

software user interfaces, the

advent of the World Wide Web

began a Cambrian explosion

of UI diversity.

Certain conventions such as:

- the shopping cart,

- tabs,

- navigation bars, and

- search boxes

catch on and are nearly

universally adopted.

UI Trends / The Web


Operating systems respond to

user demand for compelling

user experience.

UI Trends / The Desktop


While the web was influencing

operating system and

application user interfaces,

web applications were

becoming more robust and

desktop-like.

UI Trends / Blurring the Web/Desktop Boundary


As web and desktop

technologies become more

intermingled, the distinction

between “web app” and

“desktop app” is becoming

less and less clear.

- iTunes Music store

- Google Desktop Search

- Dashboard Widgets built with

web technologies

UI Trends / Convergence


Presentation Roadmap

HTM

L

ease-of-use, personalization, differentiation, richness

HTML + JScript

ASP.NET AJAX

WPF•the “Media Web”•unprecedented branding,

differentiation and personalization

•improved responsiveness and ease-of-use•Improved customization

•improved navigation•user tracking and customization

•greatest reach

Better user experience leads

to increased revenues

reven

ue/u

ser


4 more Major releases this year

IIS 7.0 on Windows Vista

Unified configuration, administration, extensibility

SharePoint 2007

Collaboration, document management, portal, business intelligence, content management

Built on ASP.NET 2.0 with deep customization

Expression Web Designer

Rich HTML/ASP.NET web design tool

ASP.NET AJAX V1.0


XmlHttp JavaScript


ASP.NET AJAX

A framework for building next generation, cross-platform, browsing experiences

Ubiquitous, cross-platform, browser support

Most-productive framework for building AJAX-enabled web applications

Integrated with ASP.NET 2.0 and VS 2005

No cost, free tool support, easy to use

Fully supported Microsoft product


Things we’ve learned along the way…

JavaScript is super flexible…

But not everyone likes JavaScript…

JavaScript becomes exponentially harder as the # of lines of JavaScript code increases

Solid JavaScript framework architecture critical to building real-world AJAX solutions

Infinite number of cool features to implement

But people want a stable, fully supported, API that they can use immediately…


Introducing ASP.NET AJAX 1.0

Works on top of ASP.NET 2.0 and VS 2005

Delivers ASP.NET AJAX foundation “core”:

JavaScript type-system

JavaScript<->.NET Networking Serialization

JavaScript library of common routines

ASP.NET Server Control Integration

Fully supported Microsoft product

Standard 10 year product support lifecycle


Server Side

Client Side Microsoft

AJAX Library

ASP.NET

AJAX

Extensions

ASP.NET

AJAX

Extensions

Value-Add

CTP

ASP.NET

AJAX

Toolkit

ASP.NET AJAX Extensions


ASP.NET AJAX Web Server

IE

Firefox

Safari

Browser

ClientsMicrosoft AJAX

Library

PreviewGlitz.js

PreviewDragDrop.js

PreviewScript.js

AjaxWebForms.js

AjaxRuntime.js

JSON Bridge Support

Membership and

Personalization Support

ASP.NET Server Control

Integration

IIS and ASP.NET

Apache and PHP

ColdFusion

ASP.NET 2.0 AJAX

Extensions

ASP.NET AJAX

Control Toolkit


Microsoft AJAX Library

Compatibility layer for browsers and platforms

Support for Windows Internet Explorer, Firefox/Mozilla, Safari

Script core runtime: a rich type system for JScript

Classes, namespaces, inheritance, interfaces

Event handlers

Object serialization

Base class library and networking services

Helper classes for developers (subset of .NET BCL)

Management of asynchronous network operations

Component model and UI framework

Declarative scripting (XML script definitions)

Extensible component and control model

Data binding, presentation, and validation

Client components for common scenarios –examples:

TextBox, Panel, Label, etc.

ListView and DataView for rendering templated data

UI behaviors such as drag and drop, tooltips, auto-completion


Controls and Components

Script Core

Base Class Library

Component Model and

UI Framework

Browser Compatibility


ASP.NET 2.0 AJAX Extensions(Server-Centric Programming Model)

ASP.NET

Application

Services

Page

Framework,

Server Controls


Client

Application

Services

Component/UI

Framework,

Controls

Browser

Presentation

(HTML/CSS)

ASP.NET Application

Pages

UI Behavior

(Managed

Code)

Input Data

Updated UI + Behavior

Initial Rendering

(UI + Behavior)


Client-Centric Programming Model

Browser

Presentation

(HTML/CSS)

ASP.NET AJAX

Service

ProxiesUI Behavior

(Script)

ASP.NET

Application

Services

Page

Framework,

Server Controls

ASP.NET Application

Pages

Web

Services


Client

Application

Services

Component/UI

Framework,

Controls

Initial Rendering

(UI + Behavior)

Data

Data


ASP.NET AJAX 1.0


ASP.NET AJAX Control Toolkit

Separate download from core ASP.NET AJAX

Great library of free ASP.NET AJAX enabled controls

Download from http://ajax.asp.net/

Developed using a collaborative source model

All source freely available with modification license

Both Microsoft & non-Microsoft developers can contribute

Already contains 30 really cool controls

Goal is to get 50-100 great controls over the next months


AJAX Control Extenders

Controls that can AJAX-enable existing HTML UI and ASP.NET Server Controls

<asp:LinkButtonID=“ShowHideBtn" runat="server">Details...</asp:LinkButton>

<asp:Panel ID="detailsPanel" runat="server" CssClass="DetailsPanel">

Blah, Blah, Blah

<br />

Blah, Blah, Blah

<br />

Blah, Blah, Blah

</asp:Panel>

<ajaxToolkit:CollapsiblePanelExtender TargetControlID="detailsPanel“

CollapseControlID="ShowHideBtn"

ExpandControlID="ShowHideBtn"

Collapsed="true"

SuppressPostBack="true"

runat="server“ />


Using Extender Controls


Some of the AJAX Control Toolkit Extenders

AutoCompleteTextBoxExtender

CollapsablePanelExtender

AnimationExtender

ConfirmButtonExtender

DragPanelExtender

DropShadowExtender

AlwaysVisibleExtender

DynamicPopulateExtender

FilteredTextBoxExtender

HoverMenuExtender

•ModalPopupExtender

•MutuallyExclusiveCheckboxExtender

•NumericUpDownExtender

•PasswordStrengthExtender

•PopUpControlExtender

•ResizableControlExtender

•RoundedCornersExtender

•SliderExtender

•TextBoxWaterMarkExtender

•UpdatePanelAnimationExtender

•ValidatorCalloutExtender


AJAX Control Toolkit Extenders


How Do I Get Started?

ASP.NET AJAX Community Technology PreviewReleases every 6-8 weeks

Installs on Microsoft® Visual Web Developer™ 2005 Express Edition and ASP.NET 2.0 (both available for free)

Go Live CTP –build live sites with ASP.NET AJAX today!

ASP.NET AJAX community site: http://ajax.asp.netDownload the latest bits

Tutorials, samples, forums, resources

Download the ASP.NET AJAX Control Toolkit

We want your feedback!


Additional Resources

Client-Centric Programming Using the “Atlas” Client Script Library

http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032302261&Culture=en-US

ASP.NET AJAX Web site

http://ajax.asp.net

Blogs

http://ajax.asp.net/Roller/default.aspx?tabindex=0&mid=474

Nikhil’s Web Development Helper

http://projects.nikhilk.net/Projects/WebDevHelper.aspx







http://ajax.asp.net/

http://atlas.asp.net/Roller/default.aspx?tabindex=0&mid=474





http://projects.nikhilk.net/Projects/WebDevHelper.aspx


Documents

MSDN Seminar : The Next Web NOW! Better User Experience ...€¦ · Better User Experience with ASP.NET AJAX Smith Suksmith MVP - Solutions Architect Director - Office of Computer