Download - An Intro to HTML5 and CSS3
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