Building a BetterWebwith HTML5 and CSS3                      By:                            Karambir Singh Nain
How web works today● HTML - Matter on the page● CSS - Appearance of elements● Javascript - Add interavtivity to Page
XHTML 4.0                                                          XHTML 4.01                  HTML5                      ...
HTML5 ???● It is next version of HTML● Work started in 2008● 1st working draft released in June  2011● Is expected to comp...
Question arisesWhat so peculiar aboutHTML5?
Reasons●   Accessibility●   Video & Audio Support●   DocType●   Smarter Storage●   Better Interactions●   Legacy/Cross Bro...
Accessibility More Semantic HTML tags      Cleaner Code
Earlier
<div id="header">            <div id="nav"><div id="article">   <div id="sidebar">           <div id="footer">
Now
<header>             <nav><section>              <aside>            <footer>
Video & Audio Support● Forget Flash● No <embed> and <object> tags● Inbuilt Media tags
example<video src="url" width="640px"height="380px"autoplay />
DocTypeearlier:<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans...
Local Storage1. Little bit of a cross between regular old cookies   and a client-side database2. Better than cookies becau...
Local Storage - great1. It is making web apps possible without third   party plugins.2. Being able to store data in the us...
Better Interactions●   Drag and Drop (DnD)●   Browser history management●   Document editing●   Timed media playback
Cross Browser Support● Modern, popular browsers all support HTML5 (Chrome,    Firefox, Safari IE9 and Opera)●   Even the r...
Mobile Friendly● Mobile devices are taking over the world● HTML5 is the most mobile ready tool for  developing mobile site...
Some Great meta tags:● Viewport: allows you to define viewport  widths and zoom settings● Full screen browsing: IOS specif...
Canvas● Canvas consists of a drawable region  defined in HTML code with height and width  attributes.● JavaScript code may...
The following code creates a Canvas element inan HTML page:<canvas id="example" width="200" height="200">This text is disp...
Canvas vs SVG● Earlier standard for         ● Once the figure is    drawing shapes in              drawn, the fact that it...
WebGL● Web-based Graphics Library is a software  library that extends the capability of the  JavaScript programming langua...
Applicaions in HTML5● HTML5 syntax and related Web-GL  technology can help us build and play HD  games using Graphics Card...
Native GeoLocationnavigator.geolocation.getCurrentPosition(function(position){position.coords.latitude,position.coords.lon...
Reference● http://html5readiness.com/● http://caniuse.com/● http://beta.html5test.com/
Documentation● http://dev.w3.org/html5/spec-author-view/● https://developer.mozilla.org/en/HTML/HTML5● http://www.whatwg.o...
Tools● http://www.modernizr.com/● http://code.google.com/p/html5shiv/● http://html5boilerplate.com● /http://gradients.glrz...
Community● http://html5doctor.com/● http://blog.whatwg.org/● http://ajaxian.com/● http://www.chromeexperiments.com/● http:...
Books● http://www.amazon.com/HTML5-Up-  Running-Mark-Pilgrim/dp/0596806027● http://introducinghtml5.com/
Thank You
Upcoming SlideShare
Loading in...5
×

Building a Better Web with HTML5 and CSS3

969

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
969
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Building a Better Web with HTML5 and CSS3"

  1. 1. Building a BetterWebwith HTML5 and CSS3 By: Karambir Singh Nain
  2. 2. How web works today● HTML - Matter on the page● CSS - Appearance of elements● Javascript - Add interavtivity to Page
  3. 3. XHTML 4.0 XHTML 4.01 HTML5 4.01 2.0 3.0 4.0 95 96 97 9 8 9 9 00 01 02 03 05 07 09 1119 19 19 19 19 20 20 20 20 20 20 20 20 Evolution of HTML Markups
  4. 4. HTML5 ???● It is next version of HTML● Work started in 2008● 1st working draft released in June 2011● Is expected to completed in 2012
  5. 5. Question arisesWhat so peculiar aboutHTML5?
  6. 6. Reasons● Accessibility● Video & Audio Support● DocType● Smarter Storage● Better Interactions● Legacy/Cross Browser support● Mobile● Canvas● WebGL● GeoLocation
  7. 7. Accessibility More Semantic HTML tags Cleaner Code
  8. 8. Earlier
  9. 9. <div id="header"> <div id="nav"><div id="article"> <div id="sidebar"> <div id="footer">
  10. 10. Now
  11. 11. <header> <nav><section> <aside> <footer>
  12. 12. Video & Audio Support● Forget Flash● No <embed> and <object> tags● Inbuilt Media tags
  13. 13. example<video src="url" width="640px"height="380px"autoplay />
  14. 14. DocTypeearlier:<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">now:<!DOCTYPE HTML>
  15. 15. Local Storage1. Little bit of a cross between regular old cookies and a client-side database2. Better than cookies because a. it allows for storage across multiple windows b. it has better security and performance c. data will persist even after the browser is closed3. Because it is stored at client-side we don’t have to worry about the user deleting cookies
  16. 16. Local Storage - great1. It is making web apps possible without third party plugins.2. Being able to store data in the user’s browser allows you to easily create those app features like: ○ storing user information ○ the ability to cache data ○ the ability to load the user’s previous application state.
  17. 17. Better Interactions● Drag and Drop (DnD)● Browser history management● Document editing● Timed media playback
  18. 18. Cross Browser Support● Modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera)● Even the really old and annoying ones, er, IE6 can use it. We can just simply add a Javascript shiv that will allow them to use the new elements:<! --[if it IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"><! [endif] -->
  19. 19. Mobile Friendly● Mobile devices are taking over the world● HTML5 is the most mobile ready tool for developing mobile sites and apps● Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design.
  20. 20. Some Great meta tags:● Viewport: allows you to define viewport widths and zoom settings● Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode● Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device
  21. 21. Canvas● Canvas consists of a drawable region defined in HTML code with height and width attributes.● JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics.● uses of canvas include building graphs, animations, games, and image composition.
  22. 22. The following code creates a Canvas element inan HTML page:<canvas id="example" width="200" height="200">This text is displayed if your browser does notsupport HTML5 Canvas.</canvas>Using JavaScript, you can draw on the canvas:var example = document.getElementById(example);var context = example.getContext(2d);context.fillStyle = "rgb(255,0,0)";context.fillRect(30, 30, 50, 50);
  23. 23. Canvas vs SVG● Earlier standard for ● Once the figure is drawing shapes in drawn, the fact that it browsers. was drawn is forgotten● It is at a fundamentally by the system. higher level because ● If its position were to be each drawn shape is changed, the entire remembered as an scene would need to be object in a scene graph redrawn. or DOM ● It is also possible to● If attributes of an SVG paint a canvas in layers object are changed, the and then recreate browser can specific layers. automatically re-render the scene.
  24. 24. WebGL● Web-based Graphics Library is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser.● WebGL code executes on a computer display cards Graphics Processing Unit (GPU), which must support shader rendering.
  25. 25. Applicaions in HTML5● HTML5 syntax and related Web-GL technology can help us build and play HD games using Graphics Card of Computer● Will increase usage of web and cloud computing● No need of increased Hard Disk Space
  26. 26. Native GeoLocationnavigator.geolocation.getCurrentPosition(function(position){position.coords.latitude,position.coords.longitude});and you are can access the location of user.
  27. 27. Reference● http://html5readiness.com/● http://caniuse.com/● http://beta.html5test.com/
  28. 28. Documentation● http://dev.w3.org/html5/spec-author-view/● https://developer.mozilla.org/en/HTML/HTML5● http://www.whatwg.org/specs/web- apps/current-work/multipage/● http://diveintohtml5.org/
  29. 29. Tools● http://www.modernizr.com/● http://code.google.com/p/html5shiv/● http://html5boilerplate.com● /http://gradients.glrzad.com/● http://code.google.com/speed/tools.html
  30. 30. Community● http://html5doctor.com/● http://blog.whatwg.org/● http://ajaxian.com/● http://www.chromeexperiments.com/● http://hacks.mozilla.org/
  31. 31. Books● http://www.amazon.com/HTML5-Up- Running-Mark-Pilgrim/dp/0596806027● http://introducinghtml5.com/
  32. 32. Thank You
  1. A particular slide catching your eye?

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

×