The Modern Web, Part 2: HTML5

2,687
-1

Published on

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,687
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Modern Web, Part 2: HTML5

  1. 1. David PallmannGM Custom App Dev, Neudesichttp://davidpallmann.blogspot.com@davidpallmann
  2. 2. Part 1: MobilityPart 2: HTML5Part 3: Social NetworkingPart 4: Cloud Computing
  3. 3. Some Opening QuestionsThe Modern WebWhy All The Excitement?Impact on DevelopersHTML5 in ActionWalk-through: HTML5 & ModernizrHTML5 + MicrosoftSome Closing Questions
  4. 4. Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our lifestyle
  5. 5. Web just keeps growing in importanceRising experiences & expectationsOn our devicesSocialEverywherePart of our your customers’ & employees’ lifestyle RELEVANCE
  6. 6. Front-End Back-End
  7. 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. 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. 9. HTML5CSS3JavaScriptSVG100+!
  10. 10. Source: Shutterstock.com #86494345 Source: Shutterstock.com #72009739
  11. 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. 12. HIGH-END MARKET VALUE LOW-END MARKET TIMEThe Innovator’s Dilemma
  13. 13. FRONT END OPEN BACK END MICROSOFT PLATFORM BROWSER SERVER Windows Server HTML ASP.NET CSS WCF Java Script SQL Server
  14. 14. FRONT END OPEN BACK END MICROSOFT PLATFORM BROWSER SERVER Windows Server Silverlight ASP.NET .NET WCF XAML SQL Server
  15. 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. 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. 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. 18. HTML5 GRIEF PROCESS1. SHOCK & DENIAL2. PAIN & GUILT3. ANGER & BARGAINING4. DEPRESSION5. UPWARD TURN6. WORKING THROUGH7. ACCEPTANCE & HOPE
  19. 19. http://www.cake23.de/traveling-wavefronts-lit-up.html
  20. 20. http://madebyevan.com/webgl-water/
  21. 21. http://chrome.angrybirds.com
  22. 22. http://lucidchart.com
  23. 23. http://alteredqualia.com/canvasmol/
  24. 24. http://www.craftymind.com/factory/html5video/CanvasVideo.html
  25. 25. http://www.craftymind.com/factory/html5video/CanvasVideo.html
  26. 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. 27. No plug-ins needed for video and audioMedia controls built into browserTry it on w3schools.comDemo – Tron Legacy (apple.com/html5)
  28. 28. Web fontsFont effectsGoogle Web FontsDemo – OutsideTheBoxPizza.com
  29. 29. http://responsive-tours.com
  30. 30. http://www.romancortes.com/blog/pure-css-coke-can/
  31. 31. http://animatable.com/demos/madmanimation/
  32. 32. http://www.apple.com/html5/showcase/transitions/
  33. 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. 34. Responsive Web DesignEthan Marcottehttp://ABookApart.com
  35. 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. 36. Taking Advantage of HTML5 and CSS3 withModernizrby Faruk Ateşhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
  37. 37. 1. Create web site foundation with Modernizr2. Add content3. Add styling – including conditional styling
  38. 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. 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. 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. 41. <script>...if (Modernizr.touch) { " // bind to touchstart, touchmove, etc.}else { // bind to normal click, mousemove, etc.}...</script>
  42. 42. Raw site with content "
  43. 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. 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. 45. Site with Conditional CSS Styling  @font-face  CSS Columns  CSS Animation "  CSS 2D Transform  Border Radius  Box Shadow
  46. 46. Site with Conditional CSS Styling  @font-face  CSS Columns  CSS Animation "  CSS 2D Transform  Border Radius  Box Shadow
  47. 47. Site with Conditional CSS Styling  @font-face  CSS Columns X CSS Animation "  CSS 2D Transform  Border Radius  Box Shadow
  48. 48. Site with Conditional CSS Styling  @font-face  CSS Columns X CSS Animation " X CSS 2D Transform  Border Radius  Box Shadow
  49. 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. 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. 51. HOMOGENOUS FRONT END DEDICATED BACK END WEB SERVER DATABASE SERVER Web Application SQL DESKTOP Web Services Server BROWSER IIS Windows Server
  52. 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. 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. 54. HTML5 Mobile Social Cloud8-Part Tutorial on DavidPallmann’s Blogdavidpallmann.blogspot.comSource code athttp://responsivetours.codeplex.com
  55. 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. 56. HTML5 Mobile Social CloudLook for upcoming blogseries on how thisapplication was built
  57. 57. Thanks! David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×