HTML5 is the buz word nowadays.

1.  

2.  HTML5 Design Principles
 HTML5 Feature Detection and Modernizer.js
 HTML 5 new elements and attributes
 Media
 Drawing using:
o Canvas
o SVG
 Geolocation

3.  Compatibiliy:
o Support existing content
o Degrade gracefully
o Do not reinvent the wheel
o Pave the cowpaths
o Evolution not revolution
 Utility:
o Separation of concerns
o DOM consistency
 Interoperability
o Well defined behavior
o Avoid needless complexity
o Handles errors

4. if (navigator.geolocation){
//supported
} else{
//not supported
}

5.  Modernizr is an open source, MIT-licensed JavaScript
library that detects support for many HTML5 & CSS3
features.
 Creates a global object called Modernizr
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}

6.  <section> is a sematic grouping of content, typically with
a heading.
o Web site's home page introduction, news items, contact
information.
 <nav> is a section of a page that links to other pages or
to parts within the page
 <article> represents a component of a page that consists
of a self-contained composition
o a forum post, a magazine or newspaper article, a Web log entry,
a user-submitted comment, an interactive widget or gadget
 <aside> Used for advertising, for groups of nav
elements, and for other content that is considered
separate from the main content of the page.

7.  <section id="main">
o <article> <!-- first blog post content goes here --> </article>
o <article> <!-- second blog post content goes here -->
o </article> <article> <!-- third blog post content goes here -->
</article>
 </section>

8.  <article>
o <section id="introduction"> </section>
o <section id="content"> </section>
o <section id="summary"> </section>
 </article>

9.  <time> represents either a time on a 24 hour clock, or a
precise date
 <mark> represents text marked or highlighted
 <figure> and <figcaption> represent an image, chart or
code examples
o <figure>
o <img src="path/to/image" alt="About image" />
o <figcaption>
o <p>This is an image of something interesting. </p>
o </figcaption>
o </figure>

10.  <hgroup> to group a set of h1–h6 elements when the
heading has multiple levels.
 <header> contain the section’s heading (an h1–h6
element or an hgroup element) or section’s table of
contents, a search form, or any relevant logos.
 <footer> represents a footer for a sectioning content or
sectioning root element. A footer typically contains
information about its section such as who wrote it, links
to related documents, copyright data, and the like.

11. <header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
</hgroup>
<nav>
<ul>
<li><a href="../semantics.html">home</a></li>
<li><a href="../semantics.html">blog</a></li>
<li><a href="../semantics.html">gallery</a></li>
<li><a href="../semantics.html">about</a></li>
</ul>
</nav>
</header>

12. <header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
</hgroup>
<nav>
<ul>
<li><a href="../semantics.html">home</a></li>
<li><a href="../semantics.html">blog</a></li>
<li><a href="../semantics.html">gallery</a></li>
<li><a href="../semantics.html">about</a></li>
</ul>
</nav>
</header>

13. <article>
<header>
<time datetime="2009-10-22" pubdate>October 22, 2009</time>
<h1>
<a href="../semantics.html" title="link to this post">Travel day</a>
</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut
euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla
sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at
odio dui, sit amet congue sapien.
</p >
</article>

14. <input list="browsers">
<datalist id="browsers">
<option value="Others">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Chrome Mobile">
<option value="Opera">
<option value="Safari">
</datalist>

15. <input type="color" >

16. <input type=“date" >

17.  email  contain an e-mail address, the e-mail address will be
automatically validated when submitted.
 month  to select a month and year, a date picker will show
up in the input field.
 number  contain a numeric value.
o .max Specifies the maximum value for an input field
o .min Specifies the minimum value for an input field
o .pattern Specifies a regular exp to check the input value against
o .step Specifies the legal number intervals for an input field
o .stepUp(n) increases the field’s value by n.
o .stepDown(n) decreases the field’s value by n.
o .valueAsNumber returns the current value as a floating point
number.
o <input type="number" name="points" min="0" max="100" step
="10" value="30">

18.  range  contain a value within a range, the input field will be
displayed as a slider control. The default values from 0 to 100
 <input type="range" name="points" min="0" max="10">
 Some useful attributes: min, max, step.
 search  search fields (behaves like a regular text field).
Except that when you start typing in it a small cross appears
on the right side of the field. This helps clear the content fast.
 time  to select a time , a time picker can show up in the
input field.
 url  contain a URL address, the url field will be
automatically validated when submitted
 week  to select a week and year, a date picker will show up
in the input field.``

19.  New graphic elements:
o <svg> and <canvas>.
 New multimedia elements:
o <audio> and <video>.

20.  <video src="url/video.ogg" controls>
o Your browser does not support the <code>video</code>
element.
 </video>
 <audio src="/test/audio.ogg">
o <p>Your browser does not support the audio element.</p>
 </audio>

21.  Multiple Sources
 <video width="320" height="240" controls autoplay
loop >
o <source src="movie.mp4" type="video/mp4”>
o <source src="movie.ogg" type="video/ogg">
o Your browser does not support the video tag.
 </video>

22.  video/audio element methods:
o canPlayType() Checks if the browser can play the specified
audio/video type
o load() Re-loads the audio/video element
o play() Starts playing the audio/video
o pause() Pauses the currently playing audio/video

23.  video/audio element properties
o autoplay Sets/Gets whether the audio/video should start playing when loaded
o buffered Gets a TimeRanges of the buffered parts of the audio/video
o controls Sets/Gets whether the audio/video display controls
o currentSrc Gets the URL of the current audio/video
o currentTime Sets/Gets the current playback position (in seconds)
o defaultMuted Sets/Gets whether the audio/video should be muted by default
o defaultPlaybackRate Sets/Gets the default speed of the audio/video playback
o duration Gets the length of the current audio/video (in seconds)
o ended Gets whether the playback of the audio/video has ended or not
o error Gets a MediaError object, the error state of the audio/video
o loop Sets/Gets whether the audio/video automatically start over again
o muted Sets/Gets whether the audio/video is muted or not
o networkState Gets the current network state of the audio/video
o paused Gets whether the audio/video is paused or not
o playbackRate Sets/Gets the speed of the audio/video playback
o played Gets a TimeRanges object of the played parts of the audio/video
o preload Sets/Gets whether audio/video is loaded on page load
o readyState Gets the current ready state of the audio/video
o seekable Gets a TimeRanges object, the seekable parts of the audio/video
o seeking Gets whether the user is currently seeking in the audio/video
o src Sets/Gets the current source of the audio/video element
o startDate Gets a Date object representing the current time offset
o volume Sets/Gets the volume of the audio/video

24.  video/audio element events
o abort Fires when the loading is aborted
o canplay Fires when the browser can start playing
o canplaythrough Fires when the browser can play without stopping for buffering
o durationchange Fires when the duration is changed (after it is loaded)
o ended Fires when the audio/video has ended
o error Fires when an error occurred during loading
o loadeddata Fires when the browser has loaded the current frame
o loadedmetadata Fires when the browser has loaded meta data
o loadstart Fires when the browser starts looking for the audio/video
o pause Fires when been paused
o play Fires when started or is not paused
o playing Fires when playing after being paused or stopped for
buffering
o progress Fires when downloading the audio/video
o ratechange Fires when the playing speed is changed
o seeked Fires when the user finish moving/skipping to a new position
o seeking Fires when the user starts moving/skipping to a new position
o stalled Fires when browser is trying to get media data, but data is N/A
o suspend Fires when the browser is intentionally not getting media data
o timeupdate Fires when the current playback position has changed
o volumechange Fires when the volume has been changed
o waiting Fires when the video stops to buffer the next frame

25.  loadstart 
o durationchange 
• loadedmetadata 
• loadeddata 
• progress 
• canplay 
• canplaythrough

26.  Canvas:
“a strong, coarse unbleached cloth used to make items such as sails and tents and as a
surface for oil painting.”
 Used to:
o draw graphics,
o make photo compositions, real-time video processing or rendering.
o create animations
 The default size of the canvas is 300 px × 150 px (width × height).
o <canvas id="c1"></canvas>
o <script>
o var canvas = document.getElementById("c1");
o var ctx = canvas.getContext("2d");
o ctx.fillStyle = "green";
o ctx.fillRect(10, 10, 100, 100);
o </script>

27.  Color
o ctx.fillStyle = "green";
o ctx.strokeStyle = "green”;
o fillStyle and strokeStyle sets the colors used for rendering
filled/framed shapes
o Can use gradient object or a pattern
 To clear canvas:
o ctx.clearRect(x,y,width,height);
How to creates
a gradients or
a pattern?

28.  Line:
o to move to the starting point, Set the endpoint,
o Draw a line between them
• ctx.moveTo(60,0);
• ctx.lineTo(60,153);
• ctx.stroke();
 You can set multiple line to be drawn at once instead using path
o ctx.beginPath();
o ctx.strokeStyle="red";
o ctx.moveTo(60,173);
o ctx.lineTo(60,375);
o ctx.moveTo(60,390);
o ctx.lineTo(270,390);
o ctx.moveTo(270,375);
o ctx.lineTo(270,173);
o ctx.stroke();
o ctx.closePath();

29.  Rectangle
o ctx.fillRect(10, 10, 100, 100); // x, y, width, height
o ctx.strokeRect(10,10,100,100) // only edges , no fill
o ctx.clearRect(10,10,100,100) // clear part of the canvas rep.
by the rect
 Arc/Circles
o ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
 Text
o ctx.font=”bold 12px sans-serif”; // CSS font rule
o ctx.textAlign=”center”; //start, end, left, right, center
o ctx.fillText(“str”,x,y); // print str as a text starting from
x and y

30.  Read more on Bezier and quadratic curves in
o https://developer.mozilla.org/en-
US/docs/web/api/canvas_api/tutorial/drawing_shapes#Bezier_an
d_quadratic_curves

31.  Scalable Vector Graphics
o Describes 2D graphics in XML
o Ideal for handling different screen sizes
o Resolution independent
 <svg id=“svgelem” height=“200” xmlns=“”>
o <circle id=“redcircle” cx=“50” cy=“50” r=“50” fill=“red” />
 </svg>
http://www.w3.org/TR/SVG/

32. 
The QUESTION is:

33.  navigator.geolocation object
 Getting the current position
o getCurrentPosition( sucesscallback, errorcallback, geo_options)
o navigator.geolocation.getCurrentPosition(function(position) {
alert(position.coords.latitude+”-”+position.coords.longitude);
});
 Watching the current position
o watchPosition(successcallback, errorcallback, geo_options)
 PositionOptions Object
o var geo_options = {
o enableHighAccuracy: true,
o maximumAge : 30000,
o timeout : 27000
o };

34.  Steps:
o Define a draggable target using draggable attribute
o Define data to be dragged (ondragstart)
• Text, Links, HTML and XML
• Files, Images
• Document Nodes
o Define custom drag feedback image
o Define drag effect
• copy, move, link
o Define Drop area
o Do something when drop occurs
http://html5demos.com/drag

35.  Drag Events
o dragstart
o dragenter
o dragover
o dragleave
o drag
o drop
o dragend

36.  Default drag behaviour
o text selection
o Images
o links
 To make other elements draggable
o Set draggable=true
o Add a listener for the dragstart events
o Set drag data within the listener defined above
 <div draggable="true"
ondragstart="event.dataTransfer.setData('text/plain', 'This text
may be dragged')”>
o This text <strong>may</strong> be dragged.
 </div>

37.  dragstart event used to:
o Specify drag data
• Drag event has property dataTransfer contains format and value
o Feedback image
o Drag effect

38.  dragenter/dragover event for drop target elements
o Can be used to check whether drop is allowed to be dropped by
checking dataTransfer data type/format

39.  dragstart event used to:
o Specify drag data
• Drag event has property dataTransfer contains format and value
o Feedback image
o Drag effect

40.  Dropping
o Handle Drop event
• Prevent browser default behavior (redirection)

42.  First there were cookies
o Included in each request
o Max 4KB
o Can be turned off
 HTML5 Web Storage:
o Local Storage
o Session Storage

43.  Persist data for the duration of the page session.
o As long as browser is open, survive reloads
o New tab/ new window  new session
 Add/edit/delete the sessionStorage object
 Saved in a key/value pair
o sessionStorage.setItem(‘name’,’John’); Or
sessionStorage.name=‘John’
o var item=sessionStorage.getItem(‘name’);
o sessionStorage.removeItem(‘name’);
o sessionStorage.clear();

44.  Persist data until history cleared
 Add/edit/delete the localStorage object
 Saved in a key/value pair
o localStorage.setItem(‘name’,’John’); Or
localStorage.name=‘John’
o var item=localStorage.getItem(‘name’);
o localStorage.removeItem(‘name’);
o localStorage.clear();

45.  Serialize them into JSON string then save them
o JSON.stringify(jsobject)  json string
 When retrieving deserialize the JSON string into an
object
o JSON.parse(jsonstr)  javascript object

46.  What is HTML 5 Microdata?
 What is Web Worker API?
 What is Application Cache?
 What is IndexedDB?