Download - UX-Technologien out-of-the-box:
![Page 1: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/1.jpg)
UX-Technologien out-of-the-box: AJAX, WPF, Silverlight
Oliver ScheerEvangelist / Microsoft Deutschland
![Page 2: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/2.jpg)
ASP.NET AJAX
• ASP.NET AJAX Library
– Only scripts for the client (browser)
– Can be used from PHP
• ASP.NET AJAX Extensions
– Client- and server-side Extensions
– ASP.NET 2.0 integration
• ASP.NET AJAX Control Toolkit
– Community Driven
– 34 Controls
![Page 3: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/3.jpg)
ASP.NET AJAX Architecture
Microsoft AJAX Library
Browsers (IE, Firefox, Safari, others)
Browser Compatibility
Asynchronous Communications
Script Core Library
Base Class Library
XHTML/CSS Server Scripts
Client Server
ASP.NET 2.0
PageFramework andServer Controls
ApplicationServices
ASP.NET AJAX Extensions
AJAXServer Controls
AsynchronousCommunications
ApplicationServices Bridge
ASPX ASMX
![Page 4: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/4.jpg)
Level 1 – ASP.NET AJAX Extensions
4
![Page 5: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/5.jpg)
ASP.NET AJAX
UpdatePanel, Toolkit
![Page 6: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/6.jpg)
More Information
• http://ajax.asp.net
• http://ajax.asp.net/ajaxtoolkit
![Page 7: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/7.jpg)
WPF = Windows Presentation Foundation
• 1 – Engine
– Draws „Pixel“ on desktop
– Convergence of media (2D, 3D, Video, Audio, Vektor, Bitmap)
• 2 – Framework based on this engine
– C#, VB, etc.
– XAML !!!!
– Enables interop between designer and Developer
• 3 – Part of .NET Framework 3.0
– Access to all elements of the class library
![Page 8: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/8.jpg)
Excursion: XAML
• XAML = eXtensible Application Markup Language
– XML File, describes the UI, Look & Feel
– Can be created with Notepad
– Many 3rd Party Tools
– Expression Studio 1st Choice-Format XAML
<Canvas xmlns=„…" xmlns:x=„…" ><Rectangle Width="200" Height="100" Fill="Black" /><Ellipse Width="200" Height="100" Stroke="Orange" />
</Canvas>
<Canvas xmlns=„…" xmlns:x=„…" >
</Canvas>
<Canvas xmlns=„…" xmlns:x=„…" ><Rectangle Width="200" Height="100" Fill="Black" />
</Canvas>
![Page 9: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/9.jpg)
Segoe UIConvergence
![Page 10: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/10.jpg)
Windows Presentation Foundation
Designer & Developer Workflow with WPF
![Page 12: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/12.jpg)
Cross Platform
Cross Browser
Media Experiences
.NET
Plug-In
RIA
![Page 13: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/13.jpg)
Legend
V1.1
Legend
V1.0
.NET for Silverlight
XAML
Pre
sen
tati
on
Co
reNetworking
JSON
RESTPOX
RSS
Data
LINQ XLINQ
DLR
Ruby Python
WPF
Extensible Controls
BCL
Generics Collections
Inputs
KeyboardMouse Ink
Media
VC1 WMA MP3
Browser Host
MS AJAX
Library
DOM
Integration
UI Core
Images
Vector Text
Animation
DRM
Media
Controls
Layout Editing
CLR Execution Engine
Deploy
Friction-Free
Installer
Auto-
Updater
Application
Services
SOAP
![Page 14: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/14.jpg)
Silverlight
• Version 1.0 Beta
– JavaScript
• Version 1.1 Alpha
– JavaScript
– .NET CLR
![Page 15: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/15.jpg)
Why Silverlight V1.0?
Richer Media(WMV
Investments)
Broad Reach
Visual Studio
Expression Studio
![Page 16: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/16.jpg)
Silverlight development with JavaScript
• Silverlight development is similar to HTML devevelopment
– Presentation format for Silverlight is XAML> XAML is XML (markup)
– Silverlight V1.0 programming language is JavaScript
• AJAX tricks work with Silverlight
• Minimum tools are a text editor and a web browser
![Page 17: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/17.jpg)
Designer and Development Tools
• Developers (focus of this session)
– Visual Studio 2005 and Orcas
– Firebug
– Any text editor
• Designers
– Expression Blend and Design> DES02: Building Rich Web Experiences (4/30, 15:00)
– XAML exporters> Adobe Illustrator, Office (good for font subsetting), Others…
![Page 18: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/18.jpg)
Silverlight V1.0 Components
• Key Components in Silverlight V1.0
– 2D Grapics (shapes, transformations, cliping, masking)
– Animations
– Input: Mouse and Keyboard
– Media (WMV, WMA, MP3)
– Imaging (JPG, PNG)
– Text (static and flow)
– HTTP downloader
– XAML Parser (includes CreateFromXAML API)
– JavaScript DOM
![Page 19: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/19.jpg)
Media
• Media Features
– Video: WMV V7, V8, V9, VC-1
– Audio: WMA V7, V8, V9 (standard), MP3
– Multiple options for deploying media> HTTP progressive download> Integration with Windows Media Server
– Extensive WMV eco-system
![Page 20: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/20.jpg)
Silverlight JavaScript Basics
• Silverlight XAML elements are scriptable via the browser script engine (JavaScript)
• Scriptable objects are obtained via findName
– Scriptable objects (elements) can be controlled via properties andmethods
– Models JavaScript and HTML DOM interaction
– findName is equivalent to document.getElementById()
– Supports tree walking via children collection
• Position set using "Canvas.Top" and "Canvas.Left"
Size can be scaled or set via Height/Width
![Page 21: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/21.jpg)
Silverlight
Media Integration
![Page 22: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/22.jpg)
More Information
• All Alphas, Betas, SDKs, Trials, Samples
• www.silverlight.net
![Page 24: UX-Technologien out-of-the-box:](https://reader034.vdocuments.net/reader034/viewer/2022042614/55589df0d8b42aa6708b4ce9/html5/thumbnails/24.jpg)