Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
 
 HTML5 Design Principles
 HTML5 Feature Detection and Modernizer.js
 HTML 5 new elements and attributes
 Media
 Drawi...
 Compatibiliy:
o Support existing content
o Degrade gracefully
o Do not reinvent the wheel
o Pave the cowpaths
o Evolutio...
if (navigator.geolocation){
//supported
} else{
//not supported
}
 Modernizr is an open source, MIT-licensed JavaScript
library that detects support for many HTML5 & CSS3
features.
 Crea...
 <section> is a sematic grouping of content, typically with
a heading.
o Web site's home page introduction, news items, ...
 <section id="main">
o <article> <!-- first blog post content goes here --> </article>
o <article> <!-- second blog post ...
 <article>
o <section id="introduction"> </section>
o <section id="content"> </section>
o <section id="summary"> </sectio...
 <time> represents either a time on a 24 hour clock, or a
precise date
 <mark> represents text marked or highlighted
 <...
 <hgroup> to group a set of h1–h6 elements when the
heading has multiple levels.
 <header> contain the section’s heading...
<header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
</hgroup>
<nav>
<ul>
<li><...
<header>
<hgroup>
<h1>My Weblog</h1>
<h2>A lot of effort went into making this effortless.</h2>
</hgroup>
<nav>
<ul>
<li><...
<article>
<header>
<time datetime="2009-10-22" pubdate>October 22, 2009</time>
<h1>
<a href="../semantics.html" title="lin...
<input list="browsers">
<datalist id="browsers">
<option value="Others">
<option value="Internet Explorer">
<option value=...
<input type="color" >
<input type=“date" >
 email  contain an e-mail address, the e-mail address will be
automatically validated when submitted.
 month  to selec...
 range  contain a value within a range, the input field will be
displayed as a slider control. The default values from 0...
 New graphic elements:
o <svg> and <canvas>.
 New multimedia elements:
o <audio> and <video>.
 <video src="url/video.ogg" controls>
o Your browser does not support the <code>video</code>
element.
 </video>
 <audio...
 Multiple Sources
 <video width="320" height="240" controls autoplay
loop >
o <source src="movie.mp4" type="video/mp4”>
...
 video/audio element methods:
o canPlayType() Checks if the browser can play the specified
audio/video type
o load() Re-l...
 video/audio element properties
o autoplay Sets/Gets whether the audio/video should start playing when loaded
o buffered ...
 video/audio element events
o abort Fires when the loading is aborted
o canplay Fires when the browser can start playing
...
 loadstart 
o durationchange 
• loadedmetadata 
• loadeddata 
• progress 
• canplay 
• canplaythrough
 Canvas:
“a strong, coarse unbleached cloth used to make items such as sails and tents and as a
surface for oil painting....
 Color
o ctx.fillStyle = "green";
o ctx.strokeStyle = "green”;
o fillStyle and strokeStyle sets the colors used for rende...
 Line:
o to move to the starting point, Set the endpoint,
o Draw a line between them
• ctx.moveTo(60,0);
• ctx.lineTo(60,...
 Rectangle
o ctx.fillRect(10, 10, 100, 100); // x, y, width, height
o ctx.strokeRect(10,10,100,100) // only edges , no fi...
 Read more on Bezier and quadratic curves in
o https://developer.mozilla.org/en-
US/docs/web/api/canvas_api/tutorial/draw...
 Scalable Vector Graphics
o Describes 2D graphics in XML
o Ideal for handling different screen sizes
o Resolution indepen...

The QUESTION is:
 navigator.geolocation object
 Getting the current position
o getCurrentPosition( sucesscallback, errorcallback, geo_opt...
 Steps:
o Define a draggable target using draggable attribute
o Define data to be dragged (ondragstart)
• Text, Links, HT...
 Drag Events
o dragstart
o dragenter
o dragover
o dragleave
o drag
o drop
o dragend
 Default drag behaviour
o text selection
o Images
o links
 To make other elements draggable
o Set draggable=true
o Add a...
 dragstart event used to:
o Specify drag data
• Drag event has property dataTransfer contains format and value
o Feedback...
 dragenter/dragover event for drop target elements
o Can be used to check whether drop is allowed to be dropped by
checki...
 dragstart event used to:
o Specify drag data
• Drag event has property dataTransfer contains format and value
o Feedback...
 Dropping
o Handle Drop event
• Prevent browser default behavior (redirection)
 First there were cookies
o Included in each request
o Max 4KB
o Can be turned off
 HTML5 Web Storage:
o Local Storage
o...
 Persist data for the duration of the page session.
o As long as browser is open, survive reloads
o New tab/ new window ...
 Persist data until history cleared
 Add/edit/delete the localStorage object
 Saved in a key/value pair
o localStorage....
 Serialize them into JSON string then save them
o JSON.stringify(jsobject)  json string
 When retrieving deserialize th...
 What is HTML 5 Microdata?
 What is Web Worker API?
 What is Application Cache?
 What is IndexedDB?
HTML 5
Upcoming SlideShare
Loading in …5
×

HTML 5

425 views

Published on

HTML5 is the buz word nowadays.

Published in: Software
  • Be the first to comment

  • Be the first to like this

HTML 5

  1. 1.  
  2. 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. 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. 4. if (navigator.geolocation){ //supported } else{ //not supported }
  5. 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. 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. 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. 8.  <article> o <section id="introduction"> </section> o <section id="content"> </section> o <section id="summary"> </section>  </article>
  9. 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. 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. 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. 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. 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. 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. 15. <input type="color" >
  16. 16. <input type=“date" >
  17. 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. 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. 19.  New graphic elements: o <svg> and <canvas>.  New multimedia elements: o <audio> and <video>.
  20. 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. 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. 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. 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. 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. 25.  loadstart  o durationchange  • loadedmetadata  • loadeddata  • progress  • canplay  • canplaythrough
  26. 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. 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. 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. 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. 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. 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. 32.  The QUESTION is:
  33. 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. 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. 35.  Drag Events o dragstart o dragenter o dragover o dragleave o drag o drop o dragend
  36. 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. 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. 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. 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. 40.  Dropping o Handle Drop event • Prevent browser default behavior (redirection)
  41. 41.  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
  42. 42.  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();
  43. 43.  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();
  44. 44.  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
  45. 45.  What is HTML 5 Microdata?  What is Web Worker API?  What is Application Cache?  What is IndexedDB?

×