Download - Building a Better Web with HTML5 and CSS3
![Page 1: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/1.jpg)
Building a Better Webwith HTML5 and CSS3
By:Karambir Singh Nain
![Page 2: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/2.jpg)
How web works today
● HTML - Matter on the page ● CSS - Appearance of elements ● Javascript - Add interavtivity to Page
![Page 3: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/3.jpg)
19961999
20012002
20032005
20072009
20111997
19982000
1995
4.0
2.0
4.01
3.0
XHTML 4.0
HTML5XHTML 4.01
Evolution of HTML Markups
![Page 4: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/4.jpg)
HTML5 ???● It is next version of HTML ● Work started in 2008 ● 1st working draft released in June
2011 ● Is expected to completed in 2012
![Page 5: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/5.jpg)
Question arises
What so peculiar about HTML5?
![Page 6: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/6.jpg)
Reasons● Accessibility● Video & Audio Support● DocType● Smarter Storage● Better Interactions● Legacy/Cross Browser support● Mobile● Canvas● WebGL● GeoLocation
![Page 7: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/7.jpg)
Accessibility
More Semantic HTML tags
Cleaner Code
![Page 8: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/8.jpg)
Earlier
![Page 9: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/9.jpg)
<div id="header">
<div id="nav">
<div id="footer">
<div id="article"> <div id="sidebar">
![Page 10: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/10.jpg)
Now
![Page 11: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/11.jpg)
<header>
<nav>
<footer>
<section> <aside>
![Page 12: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/12.jpg)
Video & Audio Support
● Forget Flash ● No <embed> and <object> tags ● Inbuilt Media tags
![Page 13: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/13.jpg)
example
<video src="url" width="640px" height="380px" autoplay />
![Page 14: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/14.jpg)
DocTypeearlier: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> now: <!DOCTYPE HTML>
![Page 15: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/15.jpg)
Local Storage 1. 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 windowsb. it has better security and performancec. 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
![Page 16: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/16.jpg)
Local Storage - great
1. 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.
![Page 17: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/17.jpg)
Better Interactions
● Drag and Drop (DnD)
● Browser history management
● Document editing
● Timed media playback
![Page 18: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/18.jpg)
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] -->
![Page 19: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/19.jpg)
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.
![Page 20: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/20.jpg)
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
![Page 21: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/21.jpg)
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.
![Page 22: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/22.jpg)
The following code creates a Canvas element in an HTML page: <canvas id="example" width="200" height="200">This text is displayed if your browser does not support 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); This code draws a red rectangle on the screen.
![Page 23: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/23.jpg)
Canvas vs SVG● Earlier standard for
drawing shapes in browsers.
● It is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM
● If attributes of an SVG object are changed, the browser can automatically re-render the scene.
● Once the figure is drawn, the fact that it was drawn is forgotten by the system.
● If its position were to be changed, the entire scene would need to be redrawn.
● It is also possible to paint a canvas in layers and then recreate specific layers.
![Page 24: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/24.jpg)
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 card's Graphics Processing Unit (GPU), which must support shader rendering.
![Page 25: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/25.jpg)
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
![Page 26: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/26.jpg)
Native GeoLocation navigator.geolocation.getCurrentPosition(function(position){position.coords.latitude,position.coords.longitude}); and you are can access the location of user.
![Page 27: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/27.jpg)
Reference● http://html5readiness.com/ ● http://caniuse.com/ ● http://beta.html5test.com/
![Page 28: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/28.jpg)
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/
![Page 29: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/29.jpg)
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
![Page 30: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/30.jpg)
Community● http://html5doctor.com/ ● http://blog.whatwg.org/ ● http://ajaxian.com/ ● http://www.chromeexperiments.com/ ● http://hacks.mozilla.org/
![Page 31: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/31.jpg)
Books● http://www.amazon.com/HTML5-Up-
Running-Mark-Pilgrim/dp/0596806027 ● http://introducinghtml5.com/
![Page 32: Building a Better Web with HTML5 and CSS3](https://reader034.vdocuments.net/reader034/viewer/2022052619/55514f64b4c905bd1c8b5614/html5/thumbnails/32.jpg)
Thank You