Designing and developing compelling sites and applications

Mike Ormondmike.ormond@microsoft.com

http://blogs.msdn.com/mikeormond 12th December 2006

Agenda

Outline

Web Experiences – Importance of standards

Tools – Expression Web Designer

Media rich web experiences – “WPF/E”

! DESIGN

= STANDARDS

Outline The importance of standards?

Outline The importance of standards?

Outline The importance of standards?

Microsoft Expression Web

The professional design tool to create high-quality, standards-

based web sites.

Generate modern CSS page layouts using powerful design surface tools and direct manipulation of

positioning, sizing, setting margins, and padding.

Develop dynamic Web sites and applications by taking full advantage of the power of ASP.NET 2.0

Expression Web Professional Design Experience

• Task Panes and panels

• Other UI Elements

• The New… Dialog

• Site Templates

• Dynamic Web Templates

Expression Web Standards based websites

• XHTML

• Browser specific schemas

• Rendering

• Schema Errors

• Code Snippets

Expression Web CSS Based Layout

• Master pages

• Layer Taskpane

• Visual Margins and Padding

• Properties Taskpanes

• Toolbox

• Code IntelliSense

Expression Web CSS Layout and Management

• Code Formatting

• Auto/Manual control

• Typographical control

• Style Redundancy

• Manage Styles Taskpane

• CSS dialog

• Apply Styles Taskpane

Expression Web Rich Data Presentation

• XML

• XSLT

• XSLT Processing

• RSS

• Other data sources

Expression Web ASP.NET Support

• ASP.NET 2.0

• Development Server

• Drag and Drop controls

• Design time rendering

• Common Tasks menu

Expression Web Reporting and Deployment

• Introduction

• CSS Reporting

• Accessibility Reporting

• Compatibility Reporting

• Site Deployment

NOW FOR SOMETHING COMPLETELY DIFFERENT...

http://www.youtube.com/

http://finance.google.com/finance?cid=358464

http://www.nike.com/

CREATING NEXT GENERATIONMEDIA RICH SITES WITH “WPF/E”

Expression Web Introduction

• Subset of WPF focused on interactive content

• Great integration with web

– Cross platform and cross browser

– Supports JavaScript

• XAML is the enabling technology

• Available Soon

– Customer preview – Now!

– Web release in first half of 2007

– Device release in second half of 2007

Expression Web Architecture

Browser Application / OS

ContentPackage XAML

ProgrammingModel

“WPF/E” Runtime

Plug-ins Platform SpecificHosting Model

JavaScript Native API

XML - DataFonts Video/AudioImages

Native “WPF/E” API

UI & Rendering Core

Platform Abstraction Layer

C# / VB.NET

Expression Web Platforms

• Operating Systems

– Win XP, Win2K, Win2K3, Vista> Considering Win9X

– Mac OS X 10.*

– Considering Linux and Solaris

• Browsers

– IE 5.5+

– Mozilla 1+, Firefox 1+

– Opera 7+

– Safari 1+

Expression Web Features

Core Runtime

Media Integration Layer

Audio Video

Composition Engine

Base Services

XML/XAML Parser

Accessibility

Property System

Input and Eventing

Text

Imaging

2D

Animation

Other Services

Core Controls

Basic Layout

Container Controls

Expression Web Increased Developer Productivity

• Integrated Platform for UI, Text, and Media

• Declarative Programming (XAML)

• Bringing Designers Into the Application Development Process

– Tools for Designers: Microsoft Expression

– Tools for Developers: Visual Studio

– 3rd Party Support: Mobiform, Electric Rain

Expression Web Unifying the designer-developer workflow

Designer

Emotional ConnectionLook, behavior, data visualization,

usability, brand impact

Developer

Functional CapabilitiesDeployment, function, data connection

and integrity, IT process, security

C++C#

VB.NET

PaperJPG / TIFF

MOV / WMV PSDPPT

XAML

Expression Web Programming Model

• XAML and JavaScript in a web page

– Access "WPF/E" via JavaScript

– Support inline and external XAML/script

• XAML and .NET Framework code

– "WPF/E" hosts an x-platform .NET runtime> Code (C#/VB.NET) is compiled into an intermediate language (IL)> IL is run in a secure and “managed” environment

– "WPF/E" loads external package containing IL and XAML

DEMO

Expression Web Resources

Expression Web

• Microsoft Expression public site

– www.microsoft.com/expression

• CSS sites

– www.csszengarden.com

– http://meyerweb.com/eric/css

– www.alistapart.com

• Beta download

– http://www.microsoft.com/products/expression/en/web_designer/wd_free_trial.aspx

WPF/E

• WPF/E @ Mix06

• http://sessions.mix06.com/view.asp?pid=NGW036

• Blogs

– http://blogs.msdn.com/mharsh

– http://blogs.msdn.com/jstegman

• Community Technology Preview

– http://www.microsoft.com/wpfe