Download - 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