O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

The Modern Web, Part 2: HTML5

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 74 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Quem viu também gostou (20)

Semelhante a The Modern Web, Part 2: HTML5 (20)

Anúncio

Mais recentes (20)

Anúncio

The Modern Web, Part 2: HTML5

  1. 1. David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann
  2. 2. Part 1: Mobility Part 2: HTML5 Part 3: Social Networking Part 4: Cloud Computing
  3. 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
  4. 4. Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our lifestyle
  5. 5. Web just keeps growing in importance Rising experiences & expectations On our devices Social Everywhere Part of our your customers’ & employees’ lifestyle RELEVANCE
  6. 6. Front-End Back-End
  7. 7. 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
  8. 8. 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
  9. 9. HTML5 CSS3 JavaScript SVG 100+!
  10. 10. Source: Shutterstock.com #86494345 Source: Shutterstock.com #72009739
  11. 11. 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
  12. 12. HIGH-END MARKET VALUE LOW-END MARKET TIME The 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 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)
  17. 17. 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
  18. 18. HTML5 GRIEF PROCESS 1. SHOCK & DENIAL 2. PAIN & GUILT 3. ANGER & BARGAINING 4. DEPRESSION 5. UPWARD TURN 6. WORKING THROUGH 7. 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 closer HTML5 standards won’t finalize till 2014-2020 As individual features become widely supported in current browsers, we can use them ?
  27. 27. No plug-ins needed for video and audio Media controls built into browser Try it on w3schools.com Demo – Tron Legacy (apple.com/html5)
  28. 28. Web fonts Font effects Google Web Fonts Demo – 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 Design Ethan Marcotte http://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 with Modernizr by Faruk Ateş http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with-modernizr/
  37. 37. 1. Create web site foundation with Modernizr 2. Add content 3. 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 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">
  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/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; }
  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 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
  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 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
  54. 54. HTML5 Mobile Social Cloud 8-Part Tutorial on David Pallmann’s Blog davidpallmann.blogspot.com Source code at http://responsivetours.code plex.com
  55. 55. 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
  56. 56. HTML5 Mobile Social Cloud Look for upcoming blog series on how this application was built
  57. 57. Thanks! David Pallmann GM Custom App Dev, Neudesic http://davidpallmann.blogspot.com @davidpallmann

×