Part 2 in Neudesic's series on the Modern Web. This installment focuses on HTML5.

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

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

3. 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

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

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

10. Front-End Back-End

11. HTML5
Lingua franca Mobility
for desktop & Front-End Tablets and
mobile web phones
applications
Power
Experiences
More capable
Compelling,
devices &
touch-oriented
browser h/w
experiences
acceleration

12. Social
Cloud Computing
Social network
Elastic scale, Back-End
content,
consumption-
interactions &
based pricing
web identity
CDNs
Marketplaces
Content
App stores,
Delivery
data
Networks
marketplaces

14. HTML5
CSS3
JavaScript
SVG
100+!

15. Source: Shutterstock.com #86494345
Source: Shutterstock.com #72009739

18. 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

19. HIGH-END MARKET
VALUE
LOW-END MARKET
TIME
The Innovator’s Dilemma

20. FRONT END OPEN BACK END MICROSOFT PLATFORM
BROWSER SERVER
Windows
Server
HTML
ASP.NET
CSS
WCF
Java
Script
SQL
Server

21. FRONT END OPEN BACK END MICROSOFT PLATFORM
BROWSER SERVER
Windows
Server
Silverlight
ASP.NET
.NET
WCF
XAML
SQL
Server

22. FRONT END OPEN BACK END MICROSOFT PLATFORM
BROWSER SERVER
Same app can
run on PC HTML5
Windows
Browsers and Server
touch devices
like tablets
CSS3 ASP.NET
JavaScript &
open source
libraries SVG WCF
Much more of
the application Java SQL
Script Server
is here now!

23. 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)

24. 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

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

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

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

28. http://chrome.angrybirds.com

29. http://lucidchart.com

30. http://alteredqualia.com/canvasmol/

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

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

33. 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
?

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

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

38. http://responsive-tours.com

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

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

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

42. @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;
}
}

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

44. 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

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

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

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

48. <!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>

49. <!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">

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

51. Raw site with content
"

52. .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;
}

53. 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;
}

54. Site with Conditional CSS Styling
 @font-face
 CSS Columns
 CSS Animation
"  CSS 2D Transform
 Border Radius
 Box Shadow

55. Site with Conditional CSS Styling
 @font-face
 CSS Columns
 CSS Animation
"  CSS 2D Transform
 Border Radius
 Box Shadow

56. Site with Conditional CSS Styling
 @font-face
 CSS Columns
X CSS Animation
"  CSS 2D Transform
 Border Radius
 Box Shadow

57. Site with Conditional CSS Styling
 @font-face
 CSS Columns
X CSS Animation
" X CSS 2D Transform
 Border Radius
 Box Shadow

58. Site with Conditional CSS Styling
X @font-face
 CSS Columns
X CSS Animation
" X CSS 2D Transform
X Border Radius
X Box Shadow

62. 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

63. HOMOGENOUS FRONT END DEDICATED BACK END
WEB SERVER DATABASE SERVER
Web
Application
SQL
DESKTOP Web Services
Server
BROWSER
IIS
Windows
Server

64. HETEROGENEOUS FRONT END DECENTRALIZED BACK END
Platform
DESKTOP Application
Services
BROWSER
CLOUD
Business
Data Stores
Services
TABLET
Identity
IP
Directories
Services
PHONE
PARTNER
Partner
Data Stores
Services

65. “Connected Devices, Continuous Services”
The Front End The Back End
Open Standards Microsoft Web Platform
HTML5 IIS, ASP.NET, MVC
CSS Microsoft Cloud Platform
JavaScript Windows Azure Compute
Modernizr Windows Azure Storage
JQuery SQL Azure
No plug-ins or proprietary Service Bus
web technologies Access Control Service
Cache Service
CDN
Traffic Manager

66. HTML5
Mobile
Social
Cloud
8-Part Tutorial on David
Pallmann’s Blog
davidpallmann.blogspot.com
Source code at
http://responsivetours.code
plex.com

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

68. HTML5
Mobile
Social
Cloud
Look for upcoming blog
series on how this
application was built

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