building a better web with html5 and css3
TRANSCRIPT
Building a Better Webwith 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
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
HTML5 ???● It is next version of HTML ● Work started in 2008 ● 1st working draft released in June
2011 ● Is expected to completed in 2012
Question arises
What so peculiar about HTML5?
Reasons● Accessibility● Video & Audio Support● DocType● Smarter Storage● Better Interactions● Legacy/Cross Browser support● Mobile● Canvas● WebGL● GeoLocation
Accessibility
More Semantic HTML tags
Cleaner Code
Earlier
<div id="header">
<div id="nav">
<div id="footer">
<div id="article"> <div id="sidebar">
Now
<header>
<nav>
<footer>
<section> <aside>
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//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> now: <!DOCTYPE HTML>
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
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.
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 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] -->
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.
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
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.
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.
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.
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.
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
Native GeoLocation navigator.geolocation.getCurrentPosition(function(position){position.coords.latitude,position.coords.longitude}); and you are can access the location of user.
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.org/specs/web-
apps/current-work/multipage/ ● http://diveintohtml5.org/
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
Community● http://html5doctor.com/ ● http://blog.whatwg.org/ ● http://ajaxian.com/ ● http://www.chromeexperiments.com/ ● http://hacks.mozilla.org/
Books● http://www.amazon.com/HTML5-Up-
Running-Mark-Pilgrim/dp/0596806027 ● http://introducinghtml5.com/
Thank You