Your SlideShare is downloading. ×
The Modern Web, Part 2: HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Modern Web, Part 2: HTML5

2,556
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,556
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann
  • 2. Part 1: MobilityPart 2: HTML5Part 3: Social NetworkingPart 4: Cloud Computing
  • 3. Some Opening QuestionsThe Modern WebWhy All The Excitement?Impact on DevelopersHTML5 in ActionWalk-through: HTML5 & ModernizrHTML5 + MicrosoftSome Closing Questions
  • 4. Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our lifestyle
  • 5. Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our your customers’ & employees’ lifestyle RELEVANCE
  • 6. Front-End Back-End
  • 7. HTML5Lingua franca Mobilityfor desktop & Front-End Tablets and mobile web phones applications Power ExperiencesMore capable Compelling, devices & touch-orientedbrowser h/w experiences acceleration
  • 8. SocialCloud Computing Social network Elastic scale, Back-End content, consumption- interactions & based pricing web identity CDNs Marketplaces Content App stores, Delivery data Networks marketplaces
  • 9. HTML5CSS3JavaScriptSVG100+!
  • 10. Source: Shutterstock.com #86494345 Source: Shutterstock.com #72009739
  • 11. Video & Audio without pluginsScalable Vector Graphics w/o pluginsNew semantic tagsGeolocationCSS3, including custom fonts, rounded cornersDrag and dropCanvas – 2D drawing, WebGL – 3D graphicsNew form elements, input types & validationHTML manifest (app caching) & offline storageHardware acceleration in modern browsers
  • 12. HIGH-END MARKET VALUE LOW-END MARKET TIMEThe Innovator’s Dilemma
  • 13. FRONT END OPEN BACK END MICROSOFT PLATFORM BROWSER SERVER Windows Server HTML ASP.NET CSS WCF Java Script SQL Server
  • 14. FRONT END OPEN BACK END MICROSOFT PLATFORM BROWSER SERVER Windows Server Silverlight ASP.NET .NET WCF XAML SQL Server
  • 15. 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!
  • 16. We need to learn web development over againWe’re used to doing advanced UI in proprietarytechnologies, not HTML + CSS + JavaScriptNeed JavaScript mastery to equal what we useon the back-end (e.g. C#, PHP, …)State of tooling, controls, templatesBrowser/version/feature compatibilityProjects will take longer – estimation dangerNot unusual to implement UI more than once inorder for it to work everywhere (for example,HTML5 as well as Silverlight)
  • 17. There’s still a place for your favorite web platformWorldwide pool of online resources & code sharinghttp://html5test.com/ http://findmebyIP.comhttp://caniuse.com http://css3maker.com
  • 18. HTML5 GRIEF PROCESS1. SHOCK & DENIAL2. PAIN & GUILT3. ANGER & BARGAINING4. DEPRESSION5. UPWARD TURN6. WORKING THROUGH7. ACCEPTANCE & HOPE
  • 19. http://www.cake23.de/traveling-wavefronts-lit-up.html
  • 20. http://madebyevan.com/webgl-water/
  • 21. http://chrome.angrybirds.com
  • 22. http://lucidchart.com
  • 23. http://alteredqualia.com/canvasmol/
  • 24. http://www.craftymind.com/factory/html5video/CanvasVideo.html
  • 25. http://www.craftymind.com/factory/html5video/CanvasVideo.html
  • 26. It isn’t going to “land”, it’s going to come closerHTML5 standards won’t finalize till 2014-2020As individual features become widely supportedin current browsers, we can use them ?
  • 27. No plug-ins needed for video and audioMedia controls built into browserTry it on w3schools.comDemo – Tron Legacy (apple.com/html5)
  • 28. Web fontsFont effectsGoogle Web FontsDemo – OutsideTheBoxPizza.com
  • 29. http://responsive-tours.com
  • 30. http://www.romancortes.com/blog/pure-css-coke-can/
  • 31. http://animatable.com/demos/madmanimation/
  • 32. http://www.apple.com/html5/showcase/transitions/
  • 33. @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; }}
  • 34. Responsive Web DesignEthan Marcottehttp://ABookApart.com
  • 35. 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
  • 36. Taking Advantage of HTML5 and CSS3 withModernizrby Faruk Ateşhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
  • 37. 1. Create web site foundation with Modernizr2. Add content3. Add styling – including conditional styling
  • 38. <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js"> </script> </head> …</html>
  • 39. <!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>
  • 40. <!DOCTYPE html><html class="js canvas canvastextno-geolocation rgba hsla multiplebgsborderimage borderradius boxshadow opacitycssanimations csscolumns cssgradients "cssreflections csstransformscsstransforms3d csstransitions video audiolocalstorage sessionstorage webworkersapplicationcache fontface"> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js">
  • 41. <script>...if (Modernizr.touch) { " // bind to touchstart, touchmove, etc.}else { // bind to normal click, mousemove, etc.}...</script>
  • 42. Raw site with content "
  • 43. .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;}
  • 44. h1 { color: #e33a89; font: 27px/27pxBaskerville, 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;}
  • 45. Site with Conditional CSS Styling  @font-face  CSS Columns  CSS Animation "  CSS 2D Transform  Border Radius  Box Shadow
  • 46. Site with Conditional CSS Styling  @font-face  CSS Columns  CSS Animation "  CSS 2D Transform  Border Radius  Box Shadow
  • 47. Site with Conditional CSS Styling  @font-face  CSS Columns X CSS Animation "  CSS 2D Transform  Border Radius  Box Shadow
  • 48. Site with Conditional CSS Styling  @font-face  CSS Columns X CSS Animation " X CSS 2D Transform  Border Radius  Box Shadow
  • 49. Site with Conditional CSS Styling X @font-face  CSS Columns X CSS Animation " X CSS 2D Transform X Border Radius X Box Shadow
  • 50. Microsoft Web Platform strongly supportsHTML5, CSS3, and JavaScript ASP.NET 4.5 MVC4 Visual Studio 11 Expression SuiteWindows Azure is the perfect platform forsupporting HTML5 web / mobile / socialBest of breed: open front end + MS back end
  • 51. HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application SQL DESKTOP Web Services Server BROWSER IIS Windows Server
  • 52. 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
  • 53. “Connected Devices, Continuous Services” The Front End The Back EndOpen 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
  • 54. HTML5 Mobile Social Cloud8-Part Tutorial on DavidPallmann’s Blogdavidpallmann.blogspot.comSource code athttp://responsivetours.codeplex.com
  • 55. 8-Part Tutorialhttp://davidpallmann.blogspot.com/2011/12/mobile-global-in-7-steps-with-html5-mvc.htmlSource Code on CodePlexhttp://responsivetours.codeplex.comOnline Demohttp://responsive-tours.com
  • 56. HTML5 Mobile Social CloudLook for upcoming blogseries on how thisapplication was built
  • 57. Thanks! David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

×