Post on 13-Jan-2015
description
HTML5• Less Header Code• More Semantic HTML tags Media Tags• Input Types• Form Validation• Geolocation• Draggable• Local Storage Cross-Domain Messaging Web
Sockets• Canvas
Less Header Code
HTML 4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5<!DOCTYPE HTML><html> <head><meta charset=”utf-8”><title>Page</title> </head>
Less Header Code
HTML 4<script src="jquery.js” type="text/javascript"> </script> <link href="style.css” type="text/css"></link>
HTML 5<script src="jquery.js"> </script> <link href="style.css"></link>
Less Header CodeYou should avoid following tags and attributes in HTML5 <font><center><frame> alignbgcolorheightwidthsizetype
Semantic HTML tags
Semantic HTML tags
Media Tags
AUDIO<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"></audio>
Media TagsVIDEO<video width="320" height="240" controls autoplay><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm"></video>
Input Types
Input Types
Input Types
Input Types
Input Types
Input Types
Form Validation
Placeholder
<input name="q" ” type=“text” placeholder="Go to a Website”>
Form Validation
<form method='post' action=''>Username: <input name="username" type="text" required/>Password: <input name="password" type="password" required/>Email: <input name="email" type="email" required/>
<input type="submit" value=”SAVE"/></form>
Form Validation Support
IE10.0+
FIREFOX4.0+
SAFARI5.0+
CHROME10.0+
OPERA9.0+
Geolocationnavigator.geolocation.getCurrentPosition( function(position){position.coords.latitude,position.coords.longitude });
Local Storage mainfest.appcacheCACHE MANIFESTindex.htmlstyle.csslogo.pngFALLBACK:/ no-internet.htmlNETWORK:*
HTML5 Code<!doctype html><html manifest="mainfest.appcache">
Reference URL http://www.9lessons.info/2013/03/html5-application-cache.html
Canvas
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script><body><canvas id="myCanvas" width="200" height="100" ></canvas></body>http://demos.9lessons.info/game.phphttp://demos.9lessons.info/egg/
HTML5 Demos
Web Sockethttp://demo.kaazing.com/livefeed/
Geo Locationhttp://demos.9lessons.info/geo2.html
Referencehttp://html5demos.com/http://www.html5rocks.com/en/
CSS3
• Responsive Design• Border Radius• Text Effects • Web Fonts• Transitions
Responsive Design@media only screen and (min-width: 480px){
#header{ background-color: red }
}@media only screen and (min-width: 768px){
#header{ background-color: blue }
}
@media only screen and (min-width: 1140px) {
#header{ background-color: green }
}
Responsive DesignDemos
http://www.smashingmagazine.com/
http://demos.9lessons.info/responsive/
Border RadiusCode#button{-moz-border-radius: 15px; // Firefox-webkit-border-radius: 15px; // Safari Crome border-radius: 15px; // IE - 9/10}
Online Tools
http://css3.me/
http://css3generator.com/
Text EffectsCode#Effect{color: #ffffff;text-shadow: 0 1px 0 #999, 0 2px 0 #999, 0 3px 0 #999, 0 4px 0 #999, 0 5px 0 #999, 0 6px 0 #000;}
Text Effects
Online Tools
http://css3.me/
http://css3generator.com/
http://css3gen.com/text-shadow/
Web Fonts
@font-face{font-family: chandy;src: url(’fonts/comesinhandy.ttf') format("opentype"); }.myfont{font-family:”chandy”,arial; font-size:80px}// HTML Code<div class="myfont”>Website Title</div>
Web Fonts
Google Fontshttp://www.google.com/fonts/
Transitions
.ant_left{top: -22px;left: 15px;-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);transform:rotate(-30deg);}
Transitions
Demos
http://jsfiddle.net/MZpgY/3/embedded/result/
http://jsfiddle.net/Z7daH/embedded/result/
<!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9"><![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><title>HTML5 Template</title><link rel="stylesheet" href="style.css"> <script src="modernizr.min.js"></script>
Questions
Thanks
Srinivas Tamadahttp://9lessons.info