The Web: Developing compelling sites and Mark Johnston applications

The Web: Developing compelling sites and Mark Johnston applications 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?

Tool Microsoft Expression Web s 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 Pervasive Top Features: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 Propertie s 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 29 – Customer preview in Q3 2006 – Web release in first half of 2007 – Device release in second half of 2007

“WPF/E” Architecture Browser Application / OS Content Package Images Programming Model JavaScript Plug-ins Fonts Video/Audio XML - Data XAML Native API C# / VB.NET Platform Specific Hosting Model “WPF/E” Runtime Native Native “WPF/E” “WPF/E” API API UI UI & & Rendering Rendering Core Core Platform Platform Abstraction Abstraction Layer Layer 30

“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 Base Services Services Other Other Services Services XML/XAML Parser 2D Text Core Controls Accessibility Audio Video Container Controls Input and Eventing Imaging Animation Basic Layout Property System 32 Media Media Integration Integration Layer 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 External Package Model 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 .NET Web page plug-in loads external package Model Web Page: html !-- -- object/embed source “sample.wpfe” / /html sample.wpfe: sample.xaml sample.il External package contains XAML and IL The container is loaded into the "WPF/E" plug-in 37

“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

Summar Resource y s 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 – Coming soon!