Download Microsoft Expression Professional Designer Tools Overview

The Web: Developing compelling
sites and applications
Mark Johnston
19th September
Outline
Agenda
Web Experiences – Importance of standards
Tools – Expression Web Designer
Media rich web experiences – “WPF/E”
Event slides will be posted at:
http://www.msdn.co.uk/postevents
! Design
= Standards
Outline
The importance of standards?
Outline
The importance of standards?
Outline
The importance of standards?
Tools
Microsoft Expression Web
The professional design tool to create highquality, 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
Top Features:
Pervasive Style Control
Design-Oriented UI
Innovative XML Integration
Robust Web Development
Standards-based Design
Expression Web
Professional Design Experience
• Task Panes and panels
• Other UI Elements
• The New… Dialog
• Site Templates
• Dynamic Web Templates
12
Expression Web
Standards based websites
• XHTML
• Browser specific schemas
• Rendering
• Schema Errors
• Code Snippets
13
CSS Intro
Timeout: A quick look at
CSS
CSS Intro
Properties
• background-color
background-image
font-family
font-weight
font-size
margin
padding
height
top
CSS Intro
Syntax
• Property-name : property-value;
• Where?
– Inline
– A <style> block
– An external .css file
CSS Intro
Selectors
• tag selectors
• class selectors
• id selectors
• composite selectors
CSS Intro
Breaking into the Box
• 2 Kinds of HTML elements
– Box elements
>
>
>
>
>
<p>
<div>
<h1>
<table>
<blockquote>
– Inline elements
>
>
>
>
>
<span>
<a>
<strong>
<em>
<img>
Hello World
Expression Web
CSS Based layout
• Master pages
• Layer Taskpane
• Visual Margins and Padding
• Properties Taskpanes
• Toolbox
• Code IntelliSense
19
Expression Web
CSS Layout and Management
• Code Formatting
• Auto/Manual control
• Typographical control
• Style Redundancy
• Manage Styles Taskpane
• CSS dialog
• Apply Styles Taskpane
20
Expression Web
Rich Data Presentation
• XML
• XSLT
• XSLT Processing
• RSS
• Other data sources
21
Expression Web
ASP.NET Support
• ASP.NET 2.0
• Development Server
• Drag and Drop controls
• Design time rendering
• Common Tasks menu
22
Expression Web
Reporting and Deployment
• Introduction
• CSS Reporting
• Accessibility Reporting
• Compatibility Reporting
• Site Deployment
23
Now for something
completely different...
Creating next gen media rich
sites with “WPF/E”
“WPF/E”
Introduction
• Subset of WPF focused on interactive content
• Great integration with web
– Cross platform and cross browser
– Supports JavaScript and C#/VB.Net
• XAML is the enabling technology
• Available Soon
– Customer preview in Q3 2006
– Web release in first half of 2007
– Device release in second half of 2007
29
“WPF/E”
Architecture
Browser
Application / OS
Content
Package
Images
Programming
Model
JavaScript
Plug-ins
Fonts
Video/Audio
XAML
Native API
C# / VB.NET
Platform Specific
Hosting Model
“WPF/E” Runtime
Native “WPF/E” API
UI & Rendering Core
Platform Abstraction Layer
30
XML - Data
“WPF/E”
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+
31
“WPF/E”
Features
Core Runtime
Base Services
Other Services
XML/XAML Parser
2D
Text
Core Controls
Accessibility
Audio
Video
Container Controls
Input and Eventing
Imaging
Animation
Basic Layout
Property System
32
Media Integration Layer
Composition Engine
“WPF/E”
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
33
“WPF/E”
Unifying the designer-developer workflow
Designer
Developer
Emotional Connection
Functional Capabilities
Look, behavior, data visualization,
usability, brand impact
Deployment, function, data connection
and integrity, IT process, security
Paper
JPG / TIFF
MOV / WMV
PSD
PPT
34
XAML
C++
C#
VB.NET
“WPF/E”
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
35
“WPF/E”
Programming Model
External Package
<html>
<body>
<object/embed id=“wpfehost” size=“…”>
<param name=“source” value=“default.wpfe”/>
<param name=“startuppage” value=“default.xaml”/>
</…>
</body>
</html>
default.wpfe contains:
default.xaml (compressed)
It may also contain:
Other XAML files
XAML and script files
Resources (images, media, fonts, others)
36
“WPF/E”
•
Programming Model
.NET
Web page plug-in loads external package
Web Page:
<html>
<!-- … -->
<object/embed source=“sample.wpfe”>…</…>
</html>
sample.wpfe:
>
>
•
•
37
sample.xaml
sample.il
External package contains XAML and IL
The container is loaded into the "WPF/E" plug-in
“WPF/E”
Programming Model
.NET
sample.xaml:
<Page Name=“p1”>
<Button Name=“b1”>Turn Red</Button>
</Page>
sample.cs (becomes sample.il):
b1.Click += new EventHandler(Button1_Click);
void Button1_Click(object sender, EventArgs e) {
p1.Background = Brushes.Red;
}
38
“WPF/E”
Demos
DEMOS
39
“WPF/E"
Controls
• Basic controls
– Input, Button, CheckBox, RadioButton
– Canvas, Grid and Stack
• Rich styles and template support
40
Summary
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_fr
ee_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
– Coming soon!