01 how the web works

HTML Introduction How the web works

Installed programs run on your machine.

� When you install a program on your machine, it uses the resources of that machine.

� Called "Thick client"

The web uses a thin client architecture

� The intelligence is running on the web server.

Typical scenario

3. Browser renders the page

2. Server responds with that

page

1. Browser requests a page

Different browsers lead to different renderings

How do the browser manufacturers know what to draw?

� Answer: The World Wide Web Consortium � The standards-setters � No one is required to comply

How a standard is created

1.  Developers unofficially come to a consensus 2.  Someone ships code that works 3.  Other browsers implement that same tag 4.  The W3C makes the tag official 5.  All browsers support it

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 you're connected to the web

HTML5 really refers to the new features in HTML, CSS, and JavaScript

� Geolocation �  Semantic elements �  Video � Audio � Offline apps �  File access �  Local storage � WebSockets �  Server push � More

No browser fully supports HTML5 because … �  It hasn't been fully defined yet �  It is still relatively new

So if we use HTML5 features in our sites, it won't work in some browsers

Firefox Chrome IE Safari Opera

Canvas 2.0+ 4.0+ 9.0+ 3.1+ 9.0+

Video 3.5+ 4.0+ 9.0+ 4.0+ 10.5+

Local storage

3.6+ 17.0+ 8.0+ 5.0+ 11.6+

Semantic elements

4.0+ 6.0+ 9.0+ 5.0+ 11.1+

CSS transforms

3.6+ 17.0+ 9.0+ 5.0+ 11.6+

Hands-on compatibility tests

You can make older browsers behave with the help of Modernizr.js 1.  Create and download your detector at

modernizr.com 2.  Include it in the head of your page 3.  Add class="no-js" to your <html> tag 4.  Test to see if a feature is supported and if

not, provide a graceful fallback

What Modernizr isn't

� polyfill (n): a JavaScript shim that replicates the standard API for older browsers

�  It doesn't fix anything for you �  It merely detects

Demo of modernizr Hands-on Modernizr

Conclusion

� Browsers don't conform to a universal standard but that doesn't stop the W3C from making one

� HTML5, the latest standard is rapidly being implemented by all browsers

Further study

� HTML5 compatibility and support by browser ◦  caniuse.com

� Rundown and scoring of your current browser ◦  http://html5test.com/

01 how the web works

Technology

Transcript of 01 how the web works