Embed Size (px)
DESCRIPTION
Part 2 in Neudesic's series on the Modern Web. This installment focuses on HTML5.
Citation preview
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://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://www.romancortes.com/blog/pure-css-coke-can/
@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!
