Building a Better Web with HTML5 and CSS3

Building a Better
Web
with 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

4.01

2.0
3.0 4.0

95 96 97 9 8 9 9 00 01 02 03 05 07 09 11
19 19 19 19 19 20 20 20 20 20 20 20 20

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

Video & Audio Support

● Forget Flash

● No <embed> and <object> tags

● Inbuilt Media tags

example

<video src="url" width="
640px"
height="380px"
autoplay />

DocType
earlier:

<!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 database
2. 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
closed
3. 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);

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.

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/

Building a Better Web with HTML5 and CSS3

More Related Content

What's hot (20)

Similar to Building a Better Web with HTML5 and CSS3 (20)

Recently uploaded (20)

Building a Better Web with HTML5 and CSS3