new web revolution - html5 and css3

• http://art.yale.edu/

• http://www.juxtinteractive.com

Websites

HTML5 CSS3

NEW WEB REVOLUTION

HTML5

•What is HTML5 ?•Rise of HTML5 ?•Browser Compatibility ?•Details about Features ?

HTML5

•It is being developed as the next major revision of HTML.•It is still under construction.•It introduce the a number of new elements and attributes.•You can have a rich experience on a light, portable, universal platform.

HTML5

•What is HTML5 ?•Rise of HTML5 ?•Browser Compatibility ?•Details about Features ?

WHATWG New Working Group Stop XHTML 2.0 Public Interest

2004 2007 2009 2010

Revolution Of HTML 5

HTML5

HTML5

•What is HTML5 ?•Rise of HTML5 ?•Browser Compatibility ?•Details about Features ?

HTML5

•IE 8

•Firefox 8

•Chrome 5.0

•Safari 4.0

•Opera 10.5

•Ask Web Designer How Much They Love Internet Explorer ?

HTML5

•What is HTML5 ?•Rise of HTML5 ?•Browser Compatibility ?•Details about Features ?

HTML5

• Access email without having internet connection.

• HTML5 will detect your Geo Location by using the nearer tower or GPS.

• Video and Audio elements with out flash.

• It can be used for rendering graphs and game or visual images on fly.

Canvas New API

OfflineGeo

By using CSS3 can speed the rendering time by 12 percent.

Quotes

CSS3

•What is CSS3 ?•CSS3 splits in to module ?•CSS Specification ?•Can we use it now ?•Features ?

CSS3

• It’s not the following version 2.1 or latest version of CSS. Because there does not exists exact specification. CSS3 has been split into modules.

CSS3

•What is CSS3 ?•CSS3 splits in to module ?•CSS Specification ?•Can we use it now ?•Features ?

CSS3

• The rapid evolution of the web makes large CSS specifications unwieldy.• CSS3 has been split into multiple modules.• Modules can evolve independently of each other.• All modules will update the CSS 2.1 modules and by adding some bit of

new modules.

• Modules:– WD : Working Draft– LC : Last Call– CR : Candidate Recommendation– PR : Proposed Recommendation– REC : Recommendation

CSS3

CSS3

•What is CSS3 ?•CSS3 splits in to module ?•CSS Specification ?•Can we use it now ?•Features ?

CSS3

CSS Level 2 Revision 1

CSS Style Attributes

Media Queries Level 3

CSS Namespaces

Selectors Level 3

CSS Color Level 3

CSS3

•What is CSS3 ?•CSS3 splits in to module ?•CSS Specification ?•Can we use it now ?•Features ?

CSS3

• Yes, because many of the features of CSS3 will boost your website design.

• Don’t drive CSS3, just enhance your site.• For IE, there are many ways to use the CSS3.

• Use CSS3 PIE to add limited CSS3 functionality to IE. http://www.css3pie.com

• Use Modernizr for CSS3 feature detection. http://www.modernizr.com { for CSS3 and HTML5 }

CSS3

•What is CSS3 ?•CSS3 splits in to module ?•CSS Specification ?•Can we use it now ?•Features ?

CSS3

1. Selectors2. New Colour format in CSS3:

• RGB [ Old ] [ Red, Blue, Green ]• RGBA [ Red, Blue, Green, Alpha ]• HSL [ hue, saturation, lightness ]• HSLA [ hue, saturation, lightness, Alpha ]• CMYK [ in generated paged media module ] [ Cyan, Magenta, Yellow,

Black ]

3. Media Queries

Disadvantages

HTML5 CSS3

• Only Draft• Media Licensing Issue

• Collapsing Margin• No Expression• Vertical Control

Limitation

BROWSR

THANK YOU

Any Questions can be asked on : nitishsurelia@gmail.com

Any Suggestions ?