HTML5 and CSS3How it could help you?

Dhruva Krishnan

So what is HTML5 all about

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).

It is one big thing You don’t need to throw away what you’ve done

It’s easy to get started It already works

It is here to stay• An announcement from W3C says that “when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.” - W3C on future of web in July 2009

Lets Dive in

How can I start using HTML5 if older browsers

don’t support it? Wrong Question.

You check support for individual

features. (Quoting “HTML5 support” is

a strict no no)

What’s new?

GeolocationCanvas

Canvas TextHTML5 videoHTML5 audio

Local Storage

Webworkers Offline Web Applications Input types Placeholder Text

Form Autofocus Microdata

What is Microdata?

Microdata is a standardized way to provide additional semantics in your web pages.

Microdata annotates the DOM with scoped name/value pairs from custom vocabularies

Stuff you should know about Microdata

Annotates the DOM with scoped key/value pairs from custom vocabularies

Provides capability to create custom vocabularies

Re-uses the hierarchical structure of the DOM itself to provide a way to say “all the properties within this element are taken from this vocabulary.”

is about applying additional semantics to data that’s already visible on your web page. Microdata is not designed to be a standalone data format.

Microdata is mainly consumed by Search engines and Web browsers(through Microdata DOM APIs)

What made these?

What makes CSS3 awesome?

Border

border-color

border-image

border-radius

box-shadow

Backgrounds

background-origin and background-

clip

background-size

multiple backgroun

ds

Color

HSL colors

HSLA colors

opacity

RGBA colors

Text effects

text-shadow

text-overflow

word-wrap

User-interface

box-sizing

resize

outline

nav-top, nav-right, nav-bottom, nav-

left

Selectors

attribute selectors

Other modules

media queries

multi-column layout

Web fonts

speech

How would HTML5+CSS3 change the world?

You could do more with less

Enhance customizability

Improve user experience

More intelligent websites

Faster load times

Offline access to online content

Better Visibility on search engines

Lighter websites

Visually appealing web sites

How do you detect support for HTML5 and CSS3

You can use the native DOM API

Use Modernizr

ModernizrModernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies.

Reference Modernizr http://modernizr.com Dive Into HTML5 http://diveintohtml5.com CSS3 Info http://css3info.com WHATWG HTML5 Page

http://www.whatwg.org/specs/web-apps/current-work/multipage/

HTML5 Demos http://html5demos.com Live Microdata http://foolip.org/microdatajs/live/ HTML5 Boilerplate http://html5boilerplate.com/

OR

Follow me on Twitter @dkris