Mehdi Jalal, profile picture
Uploaded byMehdi Jalal
PDF, PPTX409 views

Html5

This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.

Embed presentation

Download as PDF, PPTX
HTML5   Mehdi  Jalal   Trainer:  Cresco  Solu4on   So5ware  Developer:  NETLINKS   Email:  mehdi@netlinks.af             Afghanistan  Workforce   Development  Program      
Agenda   •  HTML5  Introduc4on   •  HTML5  New  Elements   •  HTML5  Canvas   •  HTML5  SVG   •  HTML5  Drag/Drop   •  HTML5  Geoloca4on   •  HTML5  Video   •  HTML5  Audio   •  HTML5  Input  Types  
Agenda   •  HTML5  Form  Elements   •  HTML5  Form  APributes   •  HTML5  Seman4c  Elements   •  HMTL5  Web  Storage   •  HMTL5  Applica4on  Cache   •  HMTL5  Web  Workers  
HTML5  Introduc4on   •  What  is  HTML5?   – HTML5  will  be  the  standard  for  HTML   – HTML  4.01  came  in  1999.  Web  changed  a  lot!   – HTML5  is  s4ll  work  in  progress   – Major  browsers  support  HTML5  elements  &  API   •  How  Did  HTML5  Get  Started?   – Coopera4on  between  World  Wide  Web   Consor4um  (W3C)  and  Web  Hypertext  Applica4on   Technology  Working  Group  (WHATWG)  
HTML5  Introduc4on   •  The  HTML5  <!DOCTYPE>   – There  is  only  one  <!DOCTYPE>  declara4on.  Simple       <!DOCTYPE html>
HTML5  Introduc4on   •  Minimum  HTML5  Document     <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
HTML5  Introduc4on   •  HTML5  New  Features   – The  <canvas>  element  for  2D  drawing   – The  <video>  and  <audio>  elements  for  media   playback   – Support  for  local  storage   – New  content-­‐specific  elements,  like  <ar4cle>,   <footer>,  <header>,  <nav>,  <sec4on>   – New  form  controls,  like  calendar,  date,  4me,   email,  url,  search  
HTML5  Introduc4on   •  Browser  Support  for  HTML5   – Not  full  standard!   – No  browser  has  full  support   – In  a  con4nuous  development  (Chrome,  Safari,   Internet  Explorer,  Firefox,  Opera)    
HTML5  New  Elements   •  Use  of  internet  changed  a  lot  since  HTML  4.01   (1999)   •  Several  HTML  4.01  elements  are  obsolete,  never   used  or  never  used  the  way  they  were  intended   •  To  bePer  handle  todays  internet,  HTML5  brings   new  changes:  New  elements  for  drawing   graphics,  adding  media  content,  bePer  page   structure,  bePer  form  handling,  and  several  APIs   to  drag/drop  elements,  find  Geoloca4on,  include   web  storage,  applica4on  cache,  web  workers,   etc.  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements  
HTML5  New  Elements   •  Removed  Elements   –  <acronym>   –  <applet>   –  <basefont>   –  <big>   –  <center>   –  <dir>   –  <font>   –  <frame>   –  <frameset>   –  <noframes>   –  <strike>   –  <P>  
HTML5  Canvas   •  The  <canvas>  element  is  used  to  draw  graphics,   on  the  fly,  on  a  web  page.   •  What  is  Canvas?   –  The  HTML5  <canvas>  element  is  used  to  draw   graphics,  on  the  fly,  via  scrip4ng  (usually  JavaScript).   –  The  <canvas>  element  is  only  a  container  for  graphics.   You  must  use  a  script  to  actually  draw  the  graphics.   –  Canvas  has  several  methods  for  drawing  paths,  boxes,   circles,  characters,  and  adding  images.  
HTML5  Canvas   •  Browser  Support   – Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and   Safari  support  the  <canvas>  element.   – Note:  Internet  Explorer  8  and  earlier  versions,  do   not  support  the  <canvas>  element.   •  Crea4ng  a  Canvas   <canvas id="myCanvas" width="200" height="100"></canvas>
HTML5  Canvas   •  Tip:  You  can  have  mul4ple  <canvas>  elements   on  one  HTML  page.     •  Canvas  example:     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
HTML5  Canvas   •  Draw  Onto  The  Canvas  With  Javascript     <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
HTML5  Canvas   •  Canvas  Coordinates   •  This  means:  Start  at  the  upper-­‐le5  corner  (0,0)   and  draw  a  150x75  pixels  rectangle.  
HTML5  Canvas   •  Canvas  Paths   – To  draw  straight  lines  on  a  canvas,  we  will  use  the   following  two  methods:   •  moveTo(x,y)  defines  the  star4ng  point  of  the  line   •  lineTo(x,y)  defines  the  ending  point  of  the  line   – To  actually  draw  the  line,  we  must  use  one  of  the   "ink"  methods,  like  stroke().   var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
HTML5  Canvas   •  To  draw  a  circle  on  a  canvas,  we  will  use  the   following  method:   – arc(x,y,r,start,stop)   •  To  actually  draw  the  circle,  we  must  use  one   of  the  "ink"  methods,  like  stroke()  or  fill().    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
HTML5  Canvas   •  To  draw  text  on  a  canvas,  the  most  important   property  and  methods  are:   – font  -­‐  defines  the  font  proper4es  for  text   – fillText(text,x,y)  -­‐  Draws  "filled"  text  on  the  canvas   – strokeText(text,x,y)  -­‐  Draws  text  on  the  canvas  (no   fill)   Using  fillText():    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
HTML5  Canvas   Using  strokeText():     var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
HTML5  SVG   •  HTML5  has  support  for  inline  SVG.   •  What  is  SVG?   –  SVG  stands  for  Scalable  Vector  Graphics   –  SVG  is  used  to  define  vector-­‐based  graphics  for  the   Web   –  SVG  defines  the  graphics  in  XML  format   –  SVG  graphics  do  NOT  lose  any  quality  if  they  are   zoomed  or  resized   –  Every  element  and  every  aPribute  in  SVG  files  can  be   animated   –  SVG  is  a  W3C  recommenda4on  
HTML5  SVG   •  Advantages  of  using  SVG  over  other  image   formats  (like  JPEG  and  GIF)  are:   –  SVG  images  can  be  created  and  edited  with  any  text   editor   –  SVG  images  can  be  searched,  indexed,  scripted,  and   compressed   –  SVG  images  are  scalable   –  SVG  images  can  be  printed  with  high  quality  at  any   resolu4on   –  SVG  images  are  zoomable  (and  the  image  can  be   zoomed  without  degrada4on)  
HTML5  SVG   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  inline  SVG.     •  Embed  SVG  Directly  Into  HTML  Pages    <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke- width:5;fill-rule:evenodd;"> </svg> </body> </html>
HTML5  SVG   •  Differences  Between  SVG  and  Canvas   –  SVG  is  a  language  for  describing  2D  graphics  in  XML.   –  Canvas  draws  2D  graphics,  on  the  fly  (with  a  JavaScript).   –  SVG  is  XML  based,  which  means  that  every  element  is  available   within  the  SVG  DOM.  You  can  aPach  JavaScript  event  handlers   for  an  element.   –  In  SVG,  each  drawn  shape  is  remembered  as  an  object.  If   aPributes  of  an  SVG  object  are  changed,  the  browser  can   automa4cally  re-­‐render  the  shape.   –  Canvas  is  rendered  pixel  by  pixel.  In  canvas,  once  the  graphic  is   drawn,  it  is  forgoPen  by  the  browser.  If  its  posi4on  should  be   changed,  the  en4re  scene  needs  to  be  redrawn,  including  any   objects  that  might  have  been  covered  by  the  graphic.  
HTML5  Canvas  
HTML5  Drag  &  Drop   •  Drag  and  drop  is  a  part  of  the  HTML5   standard.     •  Drag  and  drop  is  a  very  common  feature.  It  is   when  you  "grab"  an  object  and  drag  it  to  a   different  loca4on.   •  In  HTML5,  drag  and  drop  is  part  of  the   standard,  and  any  element  can  be  draggable.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  drag  and  drop.  
HTML5  Drag  &  Drop   <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69”> </body> </html>
HTML5  Geoloca4on   •  HTML5  Geoloca4on  is  used  to  locate  a  user's  posi4on.   •  The  HTML5  Geoloca4on  API  is  used  to  get  the   geographical  posi4on  of  a  user.   •  Since  this  can  compromise  user  privacy,  the  posi4on  is   not  available  unless  the  user  approves  it.   •  Browser  Support   –  Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and  Opera   support  Geoloca4on.   –  Note:  Geoloca4on  is  much  more  accurate  for  devices  with   GPS,  like  iPhone.  
HTML5  Geoloca4on   <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
HTML5  Geoloca4on   function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
HTML5  Geoloca4on   •  Displaying  the  result  in  a  map     function showPosition(position) { var latlon=position.coords.latitude +","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/ staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
HTML5  Video   •  Many  modern  websites  show  videos.  HTML5  provides  a   standard  for  showing  them.     •  Un4l  now,  there  has  not  been  a  standard  for  showing  a   video/movie  on  a  web  page.   •  Today,  most  videos  are  shown  through  a  plug-­‐in  (like  flash).   However,  different  browsers  may  have  different  plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  a  video/movie  on  a  web  page:  the  <video>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <video>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <video>  element.  
HTML5  Video   <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
HTML5  Video   <!DOCTYPE html> <html> <body> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
HTML5  Audio   •  HTML5  provides  a  standard  for  playing  audio  files.   •  Un4l  now,  there  has  not  been  a  standard  for  playing  audio   files  on  a  web  page.   •  Today,  most  audio  files  are  played  through  a  plug-­‐in  (like   flash).  However,  different  browsers  may  have  different   plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  an  audio  file  on  a  web  page:  the  <audio>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <audio>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <audio>  element.  
HTML5  Audio   •  HTML5  Audio  –  How  it  Works     <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/ mpeg"> Your browser does not support the audio element. </audio>
HTML5  Audio  
HTML5  Input  Types   •  HTML5  has  several  new  input  types  for  forms.  These  new  features  allow  bePer   input  control  and  valida4on.   –  color   –  date   –  date4me   –  date4me-­‐local   –  email   –  month   –  number   –  range   –  search   –  tel   –  4me   –  url   –  week   •  Note:  Not  all  major  browsers  support  all  the  new  input  types.  However,  you  can   already  start  using  them;  If  they  are  not  supported,  they  will  behave  as  regular   text  fields.  
HTML5  Form  Elements   •  HTML5  has  the  following  new  form  elements:   – <datalist>   – <keygen>   – <output>   •  Note:  Not  all  major  browsers  support  all  the   new  form  elements.  However,  you  can  already   start  using  them;  If  they  are  not  supported,   they  will  behave  as  regular  text  fields.  
HTML5  Form  Elements   •  <datalist>   – HTML5  <datalist>  Element   – The  <datalist>  element  specifies  a  list  of  pre-­‐ defined  op4ons  for  an  <input>  element.   – The  <datalist>  element  is  used  to  provide  an   "autocomplete"  feature  on  <input>  elements.   Users  will  see  a  drop-­‐down  list  of  pre-­‐defined   op4ons  as  they  input  data.   – Use  the  <input>  element's  list  aPribute  to  bind  it   together  with  a  <datalist>  element.  
HTML5  Form  Elements   <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
HTML5  Form  Elements   •  <keygen>   –  The  purpose  of  the  <keygen>  element  is  to  provide  a   secure  way  to  authen4cate  users.   –  The  <keygen>  tag  specifies  a  key-­‐pair  generator  field   in  a  form.   –  When  the  form  is  submiPed,  two  keys  are  generated,   one  private  and  one  public.   –  The  private  key  is  stored  locally,  and  the  public  key  is   sent  to  the  server.  The  public  key  could  be  used  to   generate  a  client  cer4ficate  to  authen4cate  the  user   in  the  future.  
HTML5  Form  Elements   <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
HTML5  Form  Elements   •  <output>   – The  <output>  element  represents  the  result  of  a   calcula4on  (like  one  performed  by  a  script).       <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
HTML5  New  Form  Elements   •  HTML5  has  several  new  aPributes  for  <form>  and  <input>.   •  New  aPributes  for  <form>:   –  autocomplete   –  Novalidate   •  New  aPributes  for  <input>:   –  autocomplete   –  autofocus   –  form   –  formac4on   –  formenctype   –  formmethod   –  formnovalidate   –  formtarget   –  height  and  width   –  list   –  min  and  max   –  mul4ple   –  paPern  (regexp)   –  placeholder   –  required   –  step  
HTML5  Seman4c  Elements   •  What  Are  Seman4c  Elements?   – A  seman4c  element  clearly  describes  its  meaning   to  both  the  browser  and  the  developer.   – Examples  of  non-­‐seman4c  elements:  <div>  and   <span>  -­‐  Tells  nothing  about  its  content.   – Examples  of  seman4c  elements:  <form>,  <table>,   and  <img>  -­‐  Clearly  defines  its  content.   – Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and   Opera  supports  the  seman4c  elements  described   in  this  chapter.  
HTML5  Seman4c  Elements  
HTML5  Web  Storage   •  What  is  HTML5  Web  Storage?   –  With  HTML5,  web  pages  can  store  data  locally  within  the   user's  browser.   –  Earlier,  this  was  done  with  cookies.  However,  Web  Storage   is  more  secure  and  faster.  The  data  is  not  included  with   every  server  request,  but  used  ONLY  when  asked  for.  It  is   also  possible  to  store  large  amounts  of  data,  without   affec4ng  the  website's  performance.   –  The  data  is  stored  in  key/value  pairs,  and  a  web  page  can   only  access  data  stored  by  itself.   –  Web  storage  is  supported  in  Internet  Explorer  8+,  Firefox,   Opera,  Chrome,  and  Safari.  
HTML5  Web  Storage   •  localStorage  and  sessionStorage   – There  are  two  new  objects  for  storing  data  on  the   client:   •  localStorage  -­‐  stores  data  with  no  expira4on  date   •  sessionStorage  -­‐  stores  data  for  one  session   – Before  using  web  storage,  check  browser  support   for  localStorage  and  sessionStorage:     if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
HTML5  Web  Storage   •  The  localStorage  Object   – The  localStorage  object  stores  the  data  with  no   expira4on  date.  The  data  will  not  be  deleted  when   the  browser  is  closed,  and  will  be  available  the   next  day,  week,  or  year.       localStorage.lastname="Smith"; document.getElementById("result").innerHTML ="Last name: " + localStorage.lastname;
HTML5  Web  Storage   •  The  sessionStorage  Object   – The  sessionStorage  object  is  equal  to  the   localStorage  object,  except  that  it  stores  the  data   for  only  one  session.  The  data  is  deleted  when  the   user  closes  the  browser  window.     if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
HTML5  Applica4on  Cache   •  With  HTML5  it  is  easy  to  make  an  offline  version  of  a   web  applica4on,  by  crea4ng  a  cache  manifest  file.     •  HTML5  introduces  applica4on  cache,  which  means  that   a  web  applica4on  is  cached,  and  accessible  without  an   internet  connec4on.   •  Applica4on  cache  gives  an  applica4on  three   advantages:   –  Offline  browsing  -­‐  users  can  use  the  applica4on  when   they're  offline   –  Speed  -­‐  cached  resources  load  faster   –  Reduced  server  load  -­‐  the  browser  will  only  download   updated/changed  resources  from  the  server  
HTML5  Applica4on  Cache   <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> CACHE MANIFEST /theme.css /logo.gif /main.js CACHE MANIFEST /theme.css /logo.gif /main.js FALLBACK: /html/ /offline.html
HTML5  Web  Workers   •  A  web  worker  is  a  JavaScript  running  in  the   background,  without  affec4ng  the  performance  of  the   page.   •  When  execu4ng  scripts  in  an  HTML  page,  the  page   becomes  unresponsive  un4l  the  script  is  finished.   •  A  web  worker  is  a  JavaScript  that  runs  in  the   background,  independently  of  other  scripts,  without   affec4ng  the  performance  of  the  page.  You  can   con4nue  to  do  whatever  you  want:  clicking,  selec4ng   things,  etc.,  while  the  web  worker  runs  in  the   background.  
HTML5  Web  Workers   <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>
HTML5  Web  Workers   var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Demo_workers.js  
QUESTIONS?  

More Related Content

PDF
Dive into HTML5: SVG and Canvas
byDoris Chen
 
PPTX
HTML5 - A Whirlwind tour
byLohith Goudagere Nagaraj
 
PDF
SVG For Web Designers (and Developers)
bySara Soueidan
 
PDF
Html5
byMehdi Jalal
 
PPTX
Html5 more than just html5 v final
byLohith Goudagere Nagaraj
 
PPTX
Top 10 HTML5 features
byGill Cleeren
 
PPTX
HTML5 and SVG
byyarcub
 
PPTX
HTML5 Essential Training
byKaloyan Kosev
 
Dive into HTML5: SVG and Canvas
byDoris Chen
 
HTML5 - A Whirlwind tour
byLohith Goudagere Nagaraj
 
SVG For Web Designers (and Developers)
bySara Soueidan
 
Html5
byMehdi Jalal
 
Html5 more than just html5 v final
byLohith Goudagere Nagaraj
 
Top 10 HTML5 features
byGill Cleeren
 
HTML5 and SVG
byyarcub
 
HTML5 Essential Training
byKaloyan Kosev
 

What's hot

PPTX
New Elements & Features in HTML5
byJamshid Hashimi
 
PDF
Learn svg
byFitBlar Mit
 
PDF
Next generation Graphics: SVG
byDavid Corbacho Román
 
PPT
Svg
bySteve Fort
 
PDF
HTML 5 - Overview
byMarcelio Leal
 
KEY
WHAT IS HTML5? (at CSS Nite Osaka)
byShumpei Shiraishi
 
KEY
2022 HTML5: The future is now
byGonzalo Cordero
 
ZIP
Html5 public
bydoodlemoonch
 
PDF
JavaONE 2012 Using Java with HTML5 and CSS3
byHelder da Rocha
 
PPTX
SilverlightDevIntro
byPratik Aggarwal
 
PDF
Echo HTML5
byNathan Smith
 
PPTX
Html5 shubelal
byShub
 
ZIP
Vector Graphics on the Web: SVG, Canvas, CSS3
byPascal Rettig
 
PDF
HTML5, just another presentation :)
byFrançois Massart
 
PPTX
Accessibility Hacks version 2
byGraham Armfield
 
PDF
Web Development using Ruby on Rails
byAvi Kedar
 
PDF
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
byEugene Lazutkin
 
PPTX
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
byGuillaume Kossi
 
PDF
Performant, accessible animations with CSS & a dash of JavaScript
bysoyarsauce
 
New Elements & Features in HTML5
byJamshid Hashimi
 
Learn svg
byFitBlar Mit
 
Next generation Graphics: SVG
byDavid Corbacho Román
 
Svg
bySteve Fort
 
HTML 5 - Overview
byMarcelio Leal
 
WHAT IS HTML5? (at CSS Nite Osaka)
byShumpei Shiraishi
 
2022 HTML5: The future is now
byGonzalo Cordero
 
Html5 public
bydoodlemoonch
 
JavaONE 2012 Using Java with HTML5 and CSS3
byHelder da Rocha
 
SilverlightDevIntro
byPratik Aggarwal
 
Echo HTML5
byNathan Smith
 
Html5 shubelal
byShub
 
Vector Graphics on the Web: SVG, Canvas, CSS3
byPascal Rettig
 
HTML5, just another presentation :)
byFrançois Massart
 
Accessibility Hacks version 2
byGraham Armfield
 
Web Development using Ruby on Rails
byAvi Kedar
 
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
byEugene Lazutkin
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
byGuillaume Kossi
 
Performant, accessible animations with CSS & a dash of JavaScript
bysoyarsauce
 

Viewers also liked

PPTX
Food safety and hygiene
byNasreen Begum
 
PPTX
Genres Of Music During Spanish Time
byteruzmo_647
 
PPTX
Role and responsibilities of an allied health professional
byNasreen Begum
 
PPTX
Preparing foods with nutrition and safety in mind
byNasreen Begum
 
PPT
Prospectiva
byjarmendipg
 
PPT
Bahan ajar ii
byT Fachrurrazi Jacob
 
PPTX
Search Engine Optimization
byViplove Saini
 
PPTX
The south after the civil war
byAMSchnur
 
PPTX
Universidad tecnica de ambato
byMoiss Almendariz
 
PPTX
C1 study slides
bylawrencembio
 
PPT
2.ky nang lang nghe hvkt
byThành Bôn
 
PPT
Exportfinancing
byKiruthika Ekambaram
 
PPT
Retirement income
byXin Luo, CFA
 
Food safety and hygiene
byNasreen Begum
 
Genres Of Music During Spanish Time
byteruzmo_647
 
Role and responsibilities of an allied health professional
byNasreen Begum
 
Preparing foods with nutrition and safety in mind
byNasreen Begum
 
Prospectiva
byjarmendipg
 
Bahan ajar ii
byT Fachrurrazi Jacob
 
Search Engine Optimization
byViplove Saini
 
The south after the civil war
byAMSchnur
 
Universidad tecnica de ambato
byMoiss Almendariz
 
C1 study slides
bylawrencembio
 
2.ky nang lang nghe hvkt
byThành Bôn
 
Exportfinancing
byKiruthika Ekambaram
 
Retirement income
byXin Luo, CFA
 

Similar to Html5

PDF
HTML 5 Step By Step - Ebook
byScottperrone
 
PPTX
Html5 tutorial for beginners
bySingsys Pte Ltd
 
PPTX
Top 10 HTML5 features every developer should know!
byGill Cleeren
 
PPTX
Html5
byZeeshan Ahmed
 
PPTX
Html 5
bymanujayarajkm
 
PDF
Html5 Programmers Reference 1st Edition Jonathan Reid
byusijuarain
 
ODP
Html5
byprithag92
 
PPTX
HTML5-Tutorial-For-Beginn.6202488.pptx
byBCAGen
 
PPTX
Html5 Basics
byPankaj Bajaj
 
PPT
Introdution to HTML 5
byonkar_bhosle
 
DOCX
Html viva questions
byVipul Naik
 
PDF
Wordcamp Thessaloniki 2011 The Nextweb
byGeorge Kanellopoulos
 
PDF
Building a Better Web with HTML5 and CSS3
byKarambir Singh Nain
 
PDF
Html5 CSS3 jQuery Basic
byRavi Yelluripati
 
PPTX
Delhi student's day
byAnkur Mishra
 
ODP
Html5
byprithag92
 
PPT
Introduction of html5
bykokila T
 
PDF
HTML 5, CSS3 and ASP.NET Best Practices by Example
byDarren Sim
 
PDF
11 tips to...
byThomas Deceuninck
 
PDF
HTML tips
bydangerdk007
 
HTML 5 Step By Step - Ebook
byScottperrone
 
Html5 tutorial for beginners
bySingsys Pte Ltd
 
Top 10 HTML5 features every developer should know!
byGill Cleeren
 
Html5
byZeeshan Ahmed
 
Html 5
bymanujayarajkm
 
Html5 Programmers Reference 1st Edition Jonathan Reid
byusijuarain
 
Html5
byprithag92
 
HTML5-Tutorial-For-Beginn.6202488.pptx
byBCAGen
 
Html5 Basics
byPankaj Bajaj
 
Introdution to HTML 5
byonkar_bhosle
 
Html viva questions
byVipul Naik
 
Wordcamp Thessaloniki 2011 The Nextweb
byGeorge Kanellopoulos
 
Building a Better Web with HTML5 and CSS3
byKarambir Singh Nain
 
Html5 CSS3 jQuery Basic
byRavi Yelluripati
 
Delhi student's day
byAnkur Mishra
 
Html5
byprithag92
 
Introduction of html5
bykokila T
 
HTML 5, CSS3 and ASP.NET Best Practices by Example
byDarren Sim
 
11 tips to...
byThomas Deceuninck
 
HTML tips
bydangerdk007
 

Recently uploaded

PDF
Master the FME Connector for ArcGIS: Streamlined Data Management & Robust Met...
bySafe Software
 
PPTX
UNIT 1- Introduction to Basic of Computer Fundamentals
bypawarbhaktiit
 
PDF
Using Change Data Capture (CDC) to Ingest Data into Apache Kafka
byGiovanni Marigi
 
PDF
SAP WalkMe Overview.pdf SAP WalkMe Overview.pdf
byMurniatiSimbolon2
 
PDF
Saga: The new era of transactions in a microservices architecture
byGiovanni Marigi
 
PPTX
TechSprint Kickoff - Everything You Need to Know
bygdgcodecellcmpn
 
PPTX
Lecture 05. API Security for DevSecOps Eng.pptx
byvinocol222
 
PDF
Best-Travel-Portal-Development-Solutions-for-Online-Growth
bykashishnagarrajput
 
PDF
A "Kill Switch" (Emergency Off Switch) for AI?
byScott M. Graffius
 
PPTX
Full course that Prymehat uploads for you version 2
byOhenebaManu1
 
PPTX
Building Real-Time Voice AI — Udaiappa Ramachandran
byUdaiappa Ramachandran
 
PDF
The Cost of Missing Critical Connections in Data - Suspicious Behavior Detect...
byEnterprise Knowledge
 
PDF
TrustArc Webinar - Unpacking India’s DPDP Act: What You Should Know
byTrustArc
 
PDF
Digital Transformation Services The Key to Futureproofing Your Business
byQuadrafort Technolgies
 
PDF
Effective Ai powered mock interview .pdf
byamazingnishusingh766
 
PDF
Josh Chu Boston - An Innovative Technology Executive
byJosh Chu Boston
 
PDF
65 AI-related Posts Catalog https://tinyurl.com/mpavkr8z
byBob Marcus
 
PPTX
KTU-PEMET413 -MODULE 2-POLYMER MATRIX COMPOSITES - LECTURE 1.pptx
byVINAY B
 
PPT
Waste water treatment plant operation and maintenance
byDuggineniRamakrishna
 
PDF
Early Signs of Constraint Loss in Modern System Design
byReality Drift Archive
 
Master the FME Connector for ArcGIS: Streamlined Data Management & Robust Met...
bySafe Software
 
UNIT 1- Introduction to Basic of Computer Fundamentals
bypawarbhaktiit
 
Using Change Data Capture (CDC) to Ingest Data into Apache Kafka
byGiovanni Marigi
 
SAP WalkMe Overview.pdf SAP WalkMe Overview.pdf
byMurniatiSimbolon2
 
Saga: The new era of transactions in a microservices architecture
byGiovanni Marigi
 
TechSprint Kickoff - Everything You Need to Know
bygdgcodecellcmpn
 
Lecture 05. API Security for DevSecOps Eng.pptx
byvinocol222
 
Best-Travel-Portal-Development-Solutions-for-Online-Growth
bykashishnagarrajput
 
A "Kill Switch" (Emergency Off Switch) for AI?
byScott M. Graffius
 
Full course that Prymehat uploads for you version 2
byOhenebaManu1
 
Building Real-Time Voice AI — Udaiappa Ramachandran
byUdaiappa Ramachandran
 
The Cost of Missing Critical Connections in Data - Suspicious Behavior Detect...
byEnterprise Knowledge
 
TrustArc Webinar - Unpacking India’s DPDP Act: What You Should Know
byTrustArc
 
Digital Transformation Services The Key to Futureproofing Your Business
byQuadrafort Technolgies
 
Effective Ai powered mock interview .pdf
byamazingnishusingh766
 
Josh Chu Boston - An Innovative Technology Executive
byJosh Chu Boston
 
65 AI-related Posts Catalog https://tinyurl.com/mpavkr8z
byBob Marcus
 
KTU-PEMET413 -MODULE 2-POLYMER MATRIX COMPOSITES - LECTURE 1.pptx
byVINAY B
 
Waste water treatment plant operation and maintenance
byDuggineniRamakrishna
 
Early Signs of Constraint Loss in Modern System Design
byReality Drift Archive
 

Html5

  • 1.
    HTML5   Mehdi  Jalal   Trainer:  Cresco  Solu4on   So5ware  Developer:  NETLINKS   Email:  mehdi@netlinks.af             Afghanistan  Workforce   Development  Program      
  • 3.
    Agenda   •  HTML5  Introduc4on   •  HTML5  New  Elements   •  HTML5  Canvas   •  HTML5  SVG   •  HTML5  Drag/Drop   •  HTML5  Geoloca4on   •  HTML5  Video   •  HTML5  Audio   •  HTML5  Input  Types  
  • 4.
    Agenda   •  HTML5  Form  Elements   •  HTML5  Form  APributes   •  HTML5  Seman4c  Elements   •  HMTL5  Web  Storage   •  HMTL5  Applica4on  Cache   •  HMTL5  Web  Workers  
  • 5.
    HTML5  Introduc4on   • What  is  HTML5?   – HTML5  will  be  the  standard  for  HTML   – HTML  4.01  came  in  1999.  Web  changed  a  lot!   – HTML5  is  s4ll  work  in  progress   – Major  browsers  support  HTML5  elements  &  API   •  How  Did  HTML5  Get  Started?   – Coopera4on  between  World  Wide  Web   Consor4um  (W3C)  and  Web  Hypertext  Applica4on   Technology  Working  Group  (WHATWG)  
  • 6.
    HTML5  Introduc4on   • The  HTML5  <!DOCTYPE>   – There  is  only  one  <!DOCTYPE>  declara4on.  Simple       <!DOCTYPE html>
  • 7.
    HTML5  Introduc4on   • Minimum  HTML5  Document     <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 8.
    HTML5  Introduc4on   • HTML5  New  Features   – The  <canvas>  element  for  2D  drawing   – The  <video>  and  <audio>  elements  for  media   playback   – Support  for  local  storage   – New  content-­‐specific  elements,  like  <ar4cle>,   <footer>,  <header>,  <nav>,  <sec4on>   – New  form  controls,  like  calendar,  date,  4me,   email,  url,  search  
  • 9.
    HTML5  Introduc4on   • Browser  Support  for  HTML5   – Not  full  standard!   – No  browser  has  full  support   – In  a  con4nuous  development  (Chrome,  Safari,   Internet  Explorer,  Firefox,  Opera)    
  • 11.
    HTML5  New  Elements   •  Use  of  internet  changed  a  lot  since  HTML  4.01   (1999)   •  Several  HTML  4.01  elements  are  obsolete,  never   used  or  never  used  the  way  they  were  intended   •  To  bePer  handle  todays  internet,  HTML5  brings   new  changes:  New  elements  for  drawing   graphics,  adding  media  content,  bePer  page   structure,  bePer  form  handling,  and  several  APIs   to  drag/drop  elements,  find  Geoloca4on,  include   web  storage,  applica4on  cache,  web  workers,   etc.  
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
    HTML5  New  Elements   •  Removed  Elements   –  <acronym>   –  <applet>   –  <basefont>   –  <big>   –  <center>   –  <dir>   –  <font>   –  <frame>   –  <frameset>   –  <noframes>   –  <strike>   –  <P>  
  • 18.
    HTML5  Canvas   • The  <canvas>  element  is  used  to  draw  graphics,   on  the  fly,  on  a  web  page.   •  What  is  Canvas?   –  The  HTML5  <canvas>  element  is  used  to  draw   graphics,  on  the  fly,  via  scrip4ng  (usually  JavaScript).   –  The  <canvas>  element  is  only  a  container  for  graphics.   You  must  use  a  script  to  actually  draw  the  graphics.   –  Canvas  has  several  methods  for  drawing  paths,  boxes,   circles,  characters,  and  adding  images.  
  • 19.
    HTML5  Canvas   • Browser  Support   – Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and   Safari  support  the  <canvas>  element.   – Note:  Internet  Explorer  8  and  earlier  versions,  do   not  support  the  <canvas>  element.   •  Crea4ng  a  Canvas   <canvas id="myCanvas" width="200" height="100"></canvas>
  • 20.
    HTML5  Canvas   • Tip:  You  can  have  mul4ple  <canvas>  elements   on  one  HTML  page.     •  Canvas  example:     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
  • 21.
    HTML5  Canvas   • Draw  Onto  The  Canvas  With  Javascript     <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
  • 22.
    HTML5  Canvas   • Canvas  Coordinates   •  This  means:  Start  at  the  upper-­‐le5  corner  (0,0)   and  draw  a  150x75  pixels  rectangle.  
  • 23.
    HTML5  Canvas   • Canvas  Paths   – To  draw  straight  lines  on  a  canvas,  we  will  use  the   following  two  methods:   •  moveTo(x,y)  defines  the  star4ng  point  of  the  line   •  lineTo(x,y)  defines  the  ending  point  of  the  line   – To  actually  draw  the  line,  we  must  use  one  of  the   "ink"  methods,  like  stroke().   var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
  • 24.
    HTML5  Canvas   • To  draw  a  circle  on  a  canvas,  we  will  use  the   following  method:   – arc(x,y,r,start,stop)   •  To  actually  draw  the  circle,  we  must  use  one   of  the  "ink"  methods,  like  stroke()  or  fill().    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
  • 25.
    HTML5  Canvas   • To  draw  text  on  a  canvas,  the  most  important   property  and  methods  are:   – font  -­‐  defines  the  font  proper4es  for  text   – fillText(text,x,y)  -­‐  Draws  "filled"  text  on  the  canvas   – strokeText(text,x,y)  -­‐  Draws  text  on  the  canvas  (no   fill)   Using  fillText():    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50);
  • 26.
    HTML5  Canvas   Using  strokeText():     var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
  • 27.
    HTML5  SVG   • HTML5  has  support  for  inline  SVG.   •  What  is  SVG?   –  SVG  stands  for  Scalable  Vector  Graphics   –  SVG  is  used  to  define  vector-­‐based  graphics  for  the   Web   –  SVG  defines  the  graphics  in  XML  format   –  SVG  graphics  do  NOT  lose  any  quality  if  they  are   zoomed  or  resized   –  Every  element  and  every  aPribute  in  SVG  files  can  be   animated   –  SVG  is  a  W3C  recommenda4on  
  • 28.
    HTML5  SVG   • Advantages  of  using  SVG  over  other  image   formats  (like  JPEG  and  GIF)  are:   –  SVG  images  can  be  created  and  edited  with  any  text   editor   –  SVG  images  can  be  searched,  indexed,  scripted,  and   compressed   –  SVG  images  are  scalable   –  SVG  images  can  be  printed  with  high  quality  at  any   resolu4on   –  SVG  images  are  zoomable  (and  the  image  can  be   zoomed  without  degrada4on)  
  • 29.
    HTML5  SVG   • Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  inline  SVG.     •  Embed  SVG  Directly  Into  HTML  Pages    <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke- width:5;fill-rule:evenodd;"> </svg> </body> </html>
  • 30.
    HTML5  SVG   • Differences  Between  SVG  and  Canvas   –  SVG  is  a  language  for  describing  2D  graphics  in  XML.   –  Canvas  draws  2D  graphics,  on  the  fly  (with  a  JavaScript).   –  SVG  is  XML  based,  which  means  that  every  element  is  available   within  the  SVG  DOM.  You  can  aPach  JavaScript  event  handlers   for  an  element.   –  In  SVG,  each  drawn  shape  is  remembered  as  an  object.  If   aPributes  of  an  SVG  object  are  changed,  the  browser  can   automa4cally  re-­‐render  the  shape.   –  Canvas  is  rendered  pixel  by  pixel.  In  canvas,  once  the  graphic  is   drawn,  it  is  forgoPen  by  the  browser.  If  its  posi4on  should  be   changed,  the  en4re  scene  needs  to  be  redrawn,  including  any   objects  that  might  have  been  covered  by  the  graphic.  
  • 31.
  • 32.
    HTML5  Drag  &  Drop   •  Drag  and  drop  is  a  part  of  the  HTML5   standard.     •  Drag  and  drop  is  a  very  common  feature.  It  is   when  you  "grab"  an  object  and  drag  it  to  a   different  loca4on.   •  In  HTML5,  drag  and  drop  is  part  of  the   standard,  and  any  element  can  be  draggable.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,   and  Safari  support  drag  and  drop.  
  • 33.
    HTML5  Drag  &  Drop   <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69”> </body> </html>
  • 34.
    HTML5  Geoloca4on   • HTML5  Geoloca4on  is  used  to  locate  a  user's  posi4on.   •  The  HTML5  Geoloca4on  API  is  used  to  get  the   geographical  posi4on  of  a  user.   •  Since  this  can  compromise  user  privacy,  the  posi4on  is   not  available  unless  the  user  approves  it.   •  Browser  Support   –  Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and  Opera   support  Geoloca4on.   –  Note:  Geoloca4on  is  much  more  accurate  for  devices  with   GPS,  like  iPhone.  
  • 35.
    HTML5  Geoloca4on   <script> varx=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
  • 36.
    HTML5  Geoloca4on   functionshowError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }
  • 37.
    HTML5  Geoloca4on   • Displaying  the  result  in  a  map     function showPosition(position) { var latlon=position.coords.latitude +","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/ staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
  • 38.
    HTML5  Video   • Many  modern  websites  show  videos.  HTML5  provides  a   standard  for  showing  them.     •  Un4l  now,  there  has  not  been  a  standard  for  showing  a   video/movie  on  a  web  page.   •  Today,  most  videos  are  shown  through  a  plug-­‐in  (like  flash).   However,  different  browsers  may  have  different  plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  a  video/movie  on  a  web  page:  the  <video>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <video>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <video>  element.  
  • 39.
    HTML5  Video   <videowidth="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  • 40.
    HTML5  Video   <!DOCTYPEhtml> <html> <body> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script> </body> </html>
  • 41.
    HTML5  Audio   • HTML5  provides  a  standard  for  playing  audio  files.   •  Un4l  now,  there  has  not  been  a  standard  for  playing  audio   files  on  a  web  page.   •  Today,  most  audio  files  are  played  through  a  plug-­‐in  (like   flash).  However,  different  browsers  may  have  different   plug-­‐ins.   •  HTML5  defines  a  new  element  which  specifies  a  standard   way  to  embed  an  audio  file  on  a  web  page:  the  <audio>   element.   •  Internet  Explorer  9+,  Firefox,  Opera,  Chrome,  and  Safari   support  the  <audio>  element.   –  Note:  Internet  Explorer  8  and  earlier  versions,  do  not  support   the  <audio>  element.  
  • 42.
    HTML5  Audio   • HTML5  Audio  –  How  it  Works     <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/ mpeg"> Your browser does not support the audio element. </audio>
  • 43.
  • 44.
    HTML5  Input  Types   •  HTML5  has  several  new  input  types  for  forms.  These  new  features  allow  bePer   input  control  and  valida4on.   –  color   –  date   –  date4me   –  date4me-­‐local   –  email   –  month   –  number   –  range   –  search   –  tel   –  4me   –  url   –  week   •  Note:  Not  all  major  browsers  support  all  the  new  input  types.  However,  you  can   already  start  using  them;  If  they  are  not  supported,  they  will  behave  as  regular   text  fields.  
  • 45.
    HTML5  Form  Elements   •  HTML5  has  the  following  new  form  elements:   – <datalist>   – <keygen>   – <output>   •  Note:  Not  all  major  browsers  support  all  the   new  form  elements.  However,  you  can  already   start  using  them;  If  they  are  not  supported,   they  will  behave  as  regular  text  fields.  
  • 46.
    HTML5  Form  Elements   •  <datalist>   – HTML5  <datalist>  Element   – The  <datalist>  element  specifies  a  list  of  pre-­‐ defined  op4ons  for  an  <input>  element.   – The  <datalist>  element  is  used  to  provide  an   "autocomplete"  feature  on  <input>  elements.   Users  will  see  a  drop-­‐down  list  of  pre-­‐defined   op4ons  as  they  input  data.   – Use  the  <input>  element's  list  aPribute  to  bind  it   together  with  a  <datalist>  element.  
  • 47.
    HTML5  Form  Elements   <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  • 48.
    HTML5  Form  Elements   •  <keygen>   –  The  purpose  of  the  <keygen>  element  is  to  provide  a   secure  way  to  authen4cate  users.   –  The  <keygen>  tag  specifies  a  key-­‐pair  generator  field   in  a  form.   –  When  the  form  is  submiPed,  two  keys  are  generated,   one  private  and  one  public.   –  The  private  key  is  stored  locally,  and  the  public  key  is   sent  to  the  server.  The  public  key  could  be  used  to   generate  a  client  cer4ficate  to  authen4cate  the  user   in  the  future.  
  • 49.
    HTML5  Form  Elements   <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
  • 50.
    HTML5  Form  Elements   •  <output>   – The  <output>  element  represents  the  result  of  a   calcula4on  (like  one  performed  by  a  script).       <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
  • 51.
    HTML5  New  Form  Elements   •  HTML5  has  several  new  aPributes  for  <form>  and  <input>.   •  New  aPributes  for  <form>:   –  autocomplete   –  Novalidate   •  New  aPributes  for  <input>:   –  autocomplete   –  autofocus   –  form   –  formac4on   –  formenctype   –  formmethod   –  formnovalidate   –  formtarget   –  height  and  width   –  list   –  min  and  max   –  mul4ple   –  paPern  (regexp)   –  placeholder   –  required   –  step  
  • 52.
    HTML5  Seman4c  Elements   •  What  Are  Seman4c  Elements?   – A  seman4c  element  clearly  describes  its  meaning   to  both  the  browser  and  the  developer.   – Examples  of  non-­‐seman4c  elements:  <div>  and   <span>  -­‐  Tells  nothing  about  its  content.   – Examples  of  seman4c  elements:  <form>,  <table>,   and  <img>  -­‐  Clearly  defines  its  content.   – Internet  Explorer  9+,  Firefox,  Chrome,  Safari  and   Opera  supports  the  seman4c  elements  described   in  this  chapter.  
  • 53.
  • 54.
    HTML5  Web  Storage   •  What  is  HTML5  Web  Storage?   –  With  HTML5,  web  pages  can  store  data  locally  within  the   user's  browser.   –  Earlier,  this  was  done  with  cookies.  However,  Web  Storage   is  more  secure  and  faster.  The  data  is  not  included  with   every  server  request,  but  used  ONLY  when  asked  for.  It  is   also  possible  to  store  large  amounts  of  data,  without   affec4ng  the  website's  performance.   –  The  data  is  stored  in  key/value  pairs,  and  a  web  page  can   only  access  data  stored  by  itself.   –  Web  storage  is  supported  in  Internet  Explorer  8+,  Firefox,   Opera,  Chrome,  and  Safari.  
  • 55.
    HTML5  Web  Storage   •  localStorage  and  sessionStorage   – There  are  two  new  objects  for  storing  data  on  the   client:   •  localStorage  -­‐  stores  data  with  no  expira4on  date   •  sessionStorage  -­‐  stores  data  for  one  session   – Before  using  web  storage,  check  browser  support   for  localStorage  and  sessionStorage:     if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
  • 56.
    HTML5  Web  Storage   •  The  localStorage  Object   – The  localStorage  object  stores  the  data  with  no   expira4on  date.  The  data  will  not  be  deleted  when   the  browser  is  closed,  and  will  be  available  the   next  day,  week,  or  year.       localStorage.lastname="Smith"; document.getElementById("result").innerHTML ="Last name: " + localStorage.lastname;
  • 57.
    HTML5  Web  Storage   •  The  sessionStorage  Object   – The  sessionStorage  object  is  equal  to  the   localStorage  object,  except  that  it  stores  the  data   for  only  one  session.  The  data  is  deleted  when  the   user  closes  the  browser  window.     if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  • 58.
    HTML5  Applica4on  Cache   •  With  HTML5  it  is  easy  to  make  an  offline  version  of  a   web  applica4on,  by  crea4ng  a  cache  manifest  file.     •  HTML5  introduces  applica4on  cache,  which  means  that   a  web  applica4on  is  cached,  and  accessible  without  an   internet  connec4on.   •  Applica4on  cache  gives  an  applica4on  three   advantages:   –  Offline  browsing  -­‐  users  can  use  the  applica4on  when   they're  offline   –  Speed  -­‐  cached  resources  load  faster   –  Reduced  server  load  -­‐  the  browser  will  only  download   updated/changed  resources  from  the  server  
  • 59.
    HTML5  Applica4on  Cache   <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> CACHE MANIFEST /theme.css /logo.gif /main.js CACHE MANIFEST /theme.css /logo.gif /main.js FALLBACK: /html/ /offline.html
  • 60.
    HTML5  Web  Workers   •  A  web  worker  is  a  JavaScript  running  in  the   background,  without  affec4ng  the  performance  of  the   page.   •  When  execu4ng  scripts  in  an  HTML  page,  the  page   becomes  unresponsive  un4l  the  script  is  finished.   •  A  web  worker  is  a  JavaScript  that  runs  in  the   background,  independently  of  other  scripts,  without   affec4ng  the  performance  of  the  page.  You  can   con4nue  to  do  whatever  you  want:  clicking,  selec4ng   things,  etc.,  while  the  web  worker  runs  in  the   background.  
  • 61.
    HTML5  Web  Workers   <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script>
  • 62.
    HTML5  Web  Workers   var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Demo_workers.js  
  • 64.