The Modern Web, Part 2: HTML5

David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

Part 1: Mobility Part 2: HTML5 Part 3: Social Networking Part 4: Cloud Computing

Some Opening Questions The Modern Web Why All The Excitement? Impact on Developers HTML5 in Action Walk-through: HTML5 & Modernizr HTML5 + Microsoft Some Closing Questions

Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our lifestyle

Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our your customers’ & employees’ lifestyle

RELEVANCE

Front-End Back-End

Front-End

HTML5 Lingua franca for desktop &

mobile web applications

Mobility Tablets and phones

Power More capable

devices & browser h/w acceleration

Experiences Compelling, touch-oriented experiences

Cloud Computing Elastic scale,

consumption-based pricing

Social Social network content, interactions & web identity

CDNs Content Delivery

Networks

Marketplaces App stores, data marketplaces

Back-End

HTML5 CSS3 JavaScript SVG 100+!

Source: Shutterstock.com #86494345

Source: Shutterstock.com #72009739

Video & Audio without plugins Scalable Vector Graphics w/o plugins New semantic tags Geolocation CSS3, including custom fonts, rounded corners Drag and drop Canvas – 2D drawing, WebGL – 3D graphics New form elements, input types & validation HTML manifest (app caching) & offline storage Hardware acceleration in modern browsers

VALU

E

TIME

HIGH-END MARKET

LOW-END MARKET

The Innovator’s Dilemma

FRONT END OPEN BACK END MICROSOFT PLATFORM

CSS

HTML

Java Script

ASP.NET

Windows Server

WCF

SQL Server

BROWSER SERVER

FRONT END OPEN BACK END MICROSOFT PLATFORM

.NET

ASP.NET

Windows Server

WCF

SQL Server

BROWSER SERVER

Silverlight

XAML

FRONT END OPEN BACK END MICROSOFT PLATFORM

CSS3

HTML5

SVG

Java Script

ASP.NET

Windows Server

WCF

SQL Server

BROWSER SERVER

Much more of the application is here now!

Same app can run on PC Browsers and touch devices like tablets

JavaScript & open source libraries

We need to learn web development over again We’re used to doing advanced UI in proprietary technologies, not HTML + CSS + JavaScript Need JavaScript mastery to equal what we use on the back-end (e.g. C#, PHP, …) State of tooling, controls, templates Browser/version/feature compatibility Projects will take longer – estimation danger Not unusual to implement UI more than once in order for it to work everywhere (for example, HTML5 as well as Silverlight)

There’s still a place for your favorite web platform Worldwide pool of online resources & code sharing http://html5test.com/ http://findmebyIP.com http://caniuse.com http://css3maker.com

HTML5 GRIEF PROCESS 1. SHOCK & DENIAL 2. PAIN & GUILT 3. ANGER & BARGAINING 4. DEPRESSION 5. UPWARD TURN 6. WORKING THROUGH 7. ACCEPTANCE & HOPE

http://www.cake23.de/traveling-wavefronts-lit-up.html

http://madebyevan.com/webgl-water/

http://chrome.angrybirds.com

http://lucidchart.com

http://alteredqualia.com/canvasmol/

http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo.html

?

It isn’t going to “land”, it’s going to come closer HTML5 standards won’t finalize till 2014-2020 As individual features become widely supported in current browsers, we can use them

No plug-ins needed for video and audio Media controls built into browser Try it on w3schools.com Demo – Tron Legacy (apple.com/html5)

Web fonts Font effects Google Web Fonts Demo – OutsideTheBoxPizza.com

http://responsive-tours.com

http://www.romancortes.com/blog/pure-css-coke-can/

http://animatable.com/demos/madmanimation/

http://www.apple.com/html5/showcase/transitions/

@media all and (max-width: 800px) { #nav { border: 5px solid #131e31; position: fixed; top: 75px; left: 10px; height: auto; } #main { margin-left: 0px; } .saveSpace { display: none; } }

Responsive Web Design Ethan Marcotte http://ABookApart.com

Make Intentional Decisions: What browsers and devices to support? How many versions back? Do you need to implement fallback behaviors?

Highly useful tools in browser compatibility: Shims / polyfills Modernizr / html5shiv Multi-browser testing tools Mobile device emulators

Taking Advantage of HTML5 and CSS3 with Modernizr by Faruk Ateş http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

1. Create web site foundation with Modernizr 2. Add content 3. Add styling – including conditional styling

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js"> </script> </head> … </html>

<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js"> </script> </head> … </html>

"

<!DOCTYPE html> <html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface"> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js"> </script>

"

<script> ... if (Modernizr.touch) { // bind to touchstart, touchmove, etc. } else { // bind to normal click, mousemove, etc. } ... </script>

"

Raw site with content

"

"

.borderradius #content { border: 1px solid #141414; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } boxshadow #content { border: none; -webkit-box-shadow:rgba(0,0,0,.5) 3px 3px 6px; -moz-box-shadow: rgba(0,0,0,.5) 3px 3px 6px; box-shadow: rgba(0,0,0, .5) 3px 3px 6px; }

"

h1 { color: #e33a89; font: 27px/27px Baskerville, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; margin: 0; text-shadow: #aaa 5px 5px 5px; } @font-face { src: url(Beautiful-ES.ttf); font-family: "Beautiful"; } .fontface h1 { font: 42px/50px Beautiful; text-shadow: none; }

Site with Conditional CSS Styling

"

@font-face CSS Columns CSS Animation CSS 2D Transform Border Radius Box Shadow

Site with Conditional CSS Styling

"

@font-face CSS Columns CSS Animation CSS 2D Transform Border Radius Box Shadow

Site with Conditional CSS Styling

"

@font-face CSS Columns X CSS Animation CSS 2D Transform Border Radius Box Shadow

Site with Conditional CSS Styling

"

@font-face CSS Columns X CSS Animation X CSS 2D Transform Border Radius Box Shadow

Site with Conditional CSS Styling

"

X @font-face CSS Columns X CSS Animation X CSS 2D Transform X Border Radius X Box Shadow

Microsoft Web Platform strongly supports HTML5, CSS3, and JavaScript

ASP.NET 4.5 MVC4 Visual Studio 11 Expression Suite

Windows Azure is the perfect platform for supporting HTML5 web / mobile / social Best of breed: open front end + MS back end

DEDICATED BACK END

Web Services

Web Application

IIS

SQL Server DESKTOP

BROWSER

WEB SERVER

Windows Server

DATABASE SERVER

HOMOGENOUS FRONT END

DECENTRALIZED BACK END

Business Services

Application

TABLET

CLOU

D

HETEROGENEOUS FRONT END

DESKTOP BROWSER

PHONE

Identity Services

IP

Data Stores

Platform Services

Directories

Partner Services

PARTNER

Data Stores

The Front End Open Standards

HTML5 CSS JavaScript Modernizr JQuery No plug-ins or proprietary web technologies

The Back End Microsoft Web Platform

IIS, ASP.NET, MVC Microsoft Cloud Platform

Windows Azure Compute Windows Azure Storage SQL Azure Service Bus Access Control Service Cache Service CDN Traffic Manager

“Connected Devices, Continuous Services”

HTML5 Mobile Social Cloud

8-Part Tutorial on David Pallmann’s Blog davidpallmann.blogspot.com Source code at http://responsivetours.codeplex.com

8-Part Tutorial http://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.html Source Code on CodePlex http://responsivetours.codeplex.com Online Demo http://responsive-tours.com

HTML5 Mobile Social Cloud

Look for upcoming blog series on how this application was built

David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

Thanks!