01 how the web works


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

01 how the web works

  1. 1. HTML IntroductionHow the web works
  2. 2. Installed programs run on your machine.—  When you install a program on your machine, it uses the resources of that machine.—  Called "Thick client"
  3. 3. The web uses a thin client architecture—  The intelligence is running on the web server.
  4. 4. Typical scenario1. Browser 2. Serverrequests a respondspage with that page3.Browserrendersthe page
  5. 5. Different browsers lead to differentrenderings
  6. 6. How do the browser manufacturersknow what to draw?—  Answer: The World Wide Web Consortium—  Thestandards-setters—  No one is required to comply
  7. 7. How a standard is created1.  Developers unofficially come to a consensus2.  Someone ships code that works3.  Other browsers implement that same tag4.  The W3C makes the tag official5.  All browsers support it
  8. 8. HTML4 is the current standard—  No video, audio—  Dynamic capabilities are limited to JavaScript and some XHTML.—  Needed Flash or Silverlight to do RIA—  Text is just … uh … text—  Works when youre connected to the web
  9. 9. HTML5 really refers to the new featuresin HTML, CSS, and JavaScript —  Geolocation —  Semantic elements —  Video —  Audio —  Offline apps —  File access —  Local storage —  WebSockets —  Server push —  More
  10. 10. No browser fully supports HTML5because …—  It hasnt been fully defined yet—  It is still relatively new
  11. 11. So if we use HTML5 features in oursites, it wont work in some browsers Firefox Chrome IE Safari OperaCanvas 2.0+ 4.0+ 9.0+ 3.1+ 9.0+Video 3.5+ 4.0+ 9.0+ 4.0+ 10.5+Local 3.6+ 17.0+ 8.0+ 5.0+ 11.6+storageSemantic 4.0+ 6.0+ 9.0+ 5.0+ 11.1+elementsCSS 3.6+ 17.0+ 9.0+ 5.0+ 11.6+transforms
  12. 12. Hands-on compatibility tests
  13. 13. You can make older browsers behavewith the help of Modernizr.js1.  Create and download your detector at modernizr.com2.  Include it in the head of your page3.  Add class="no-js" to your <html> tag4.  Test to see if a feature is supported and if not, provide a graceful fallback
  14. 14. What Modernizr isnt—  polyfill (n): a JavaScript shim that replicates the standard API for older browsers—  It doesnt fix anything for you—  It merely detects
  15. 15. Hands-on ModernizrDemo of modernizr
  16. 16. Conclusion—  Browsers dont conform to a universal standard but that doesnt stop the W3C from making one—  HTML5, the latest standard is rapidly being implemented by all browsers
  17. 17. Further study—  HTML5 compatibility and support by browser ◦  caniuse.com—  Rundown and scoring of your current browser ◦  http://html5test.com/