html5 & webmaker
Dr. B. C. Roy Engineering College
13th February 2013
Sayan Chowdhury
About me
sayanchowdhury@fedoraproject.org
@chowdhury_sayan at Twitter
@sayan at irc.mozilla.org
http://github.com/sayanchowdhury
http://sayanchowdhury.dgplug.org
HTML5 & the future of the web
SIMPLIFIED DOCTYPE DECLARATION
HTML 5
<!DOCTYPE html>
XHTML 1.0 TRANSITIONAL
<! DOCTYPE html PUBLIC "=//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
/xhtml-transitional.dtd>
SIMPLIFIED JAVASCRIPT EMBEDDING
HTML5
<script>
// code here
</script>
XHTML 1.0 Transitional
<script type="text/javascript">
// code here.
</script>
SIMPLIFIED EMBEDDED STYLES
HTML5
<style>
// code here
</style>
XHTML 1.0 TRANSITIONAL
<style type="text/css">
// code here.
</style>
SIMPLIFIED STYLESHEET LINKING
HTML5
<link rel="stylesheet" href="style.css">
XHTML 1.0 TRANSITIONAL
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
NEW HTML5 <form> elements
<input type="search"> for search boxes
<input type="date"> for calender date pickers
<input type="datetime"> for precise date+time stamps
<input type="month"> for months
<input type="week"> for weeks
<input type="month"> for months
<input type="email"> for email addresses
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="tel"> for telephone numbers
<input type="time"> for timestamps
<input type="url"> for web addresses
<input type="color"> for color pickers
intelligent iPhone
<input type="email">
<input type="url">
<input type="number">
HTML5 OFFLINE SUPPORT
CACHE MANIFEST
<!DOCTYPE html>
<html manifest="/cache.manifest">
........
</html>
CACHE MANIFEST
/clock.css
/clock.js
/clock.face.jpg
/index.html
NEW HTML5 <div> class NAMES
HTML5 GEOLOCATION SUPPORT
Jump to https://webmaker.org/en-US/
THIMBLE
Start building your own customized webpages
X-RAY GOGGLES
Put on the goggles to explore and remix webpaGEs
POPCORN MAKER
ENHANCE, REMIX AND SHARE WEB VIDEO
CONTRIBUTING
Interested in contributing to Mozilla webmaker
THIMBLE - https://github.com/mozilla/webpagemaker
HACKASAURUS - https://github.com/hackasaurus
POPCORN MAKER - https://github.com/mozilla/butter
QUESTIONS?
HTML5 Resources
-
http://fortuito.us/diveintohtml5/
-
http://html5please.com
-
http://html5.org
-
http://html5demos.com
-
http://html5doctor.com
REFERENCES
THANK YOU
html5 and webmaker
By sayanchowdhury
