Everything you need to know to get you started. By Kevin DeRudder

Size: px

Start display at page:

Download "Everything you need to know to get you started. By Kevin DeRudder"

Giles McCarthy
6 years ago
Views:

1 Everything you need to know to get you started with HTML5 By Kevin DeRudder

2 @kevinderudder working for eguidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be

4 Agenda About HTML5 Structure of an HTML5 page 30 new tags Forms Video and audio Canvas Workers If we have time: Data Storage

5 Thing s you ll have to find on your own If we didn t have the time: Data Storage WebSockets Drag and Drop Geolocation Offline Messaging

6 OK, so what is HTML 5

7 Thx to Osher Partovi

8 Thx to Aleksander Smid

9 WHY HTML5

12 The question is: when is HTML5 done?

14 For now, just USE HTML5 IT S READY

18 if(modernizr.canvas){ alert('you can use the element');} else{ alert('not supported');} if(modernizr.inputtypes.date){ alert('you can use the element'); } else{ alert('not supported');}

20 HTML5 and compatibility

21 HTML5 idea on compatibility Support existing content Degrade gracefully <canvas>fallback</canvas> <video>fallback</video> <datalist> can take a hidden select Do not reinvent the wheel contenteditable= was already used and implemented Adopt widespread practices

22 STRUCTURE

23 DocType Xmlns Meta charset Link Types

24 Classic <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>hello World!</p> </body> </html>

DocType <!DOCTYPE html> <html xmlns="http://www.w3.

25 DocType <!DOCTYPE html> <html xmlns=" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>hello World!</p> </body> </html>

26 xmlns <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>hello World!</p> </body> </html>

27 Meta charset <!DOCTYPE html> <html> <head> <meta charset= utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title> </head> <body> <p>hello World!</p> </body> </html>

28 Link type <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <link rel="stylesheet" href="styles.css" /> <title></title> </head> <body> <p>hello World!</p> </body> </html>

29 NEW TAGS

30 Article Aside Audio Canvas Command Datalist Details Embed Figcaption figure Footer Header Hgroup Keygen Mark Meter Nav Output Progress rp rt Ruby Section Source Summary Time Video wbr Bdi track

31 div id= header div id= topmenu div id= page div id= sidebar div class= post div class= post div id= footer

33 footer menu title small text content header nav copyright button main search msonormal date smalltext body style1 top white link

34 Opera MAMA Crawler Class names IDs

35 <header> <nav> <section> <aside> <article> <article> <footer>

38 Absent presentational elements <center><font><big> Also align on <img> <table> etc background on <body> bgcolor on <table>

39 Forms

40 HTML4 exists out of dumb fields

42 New attributes and input types available

43 <input type=" " />

44 <input type="url" />

45 <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime" /> <input type="datetime-local" />

46 <input type="number" />

47 <input type="range" />

48 <input type="tel" />

49 <input type="color" />

50 <input type="text" id="languagetext" list="languagelist" /> <datalist id="languagelist"> <option value="en" label="english" /> <option value="nl" label="nederlands" /> <option value="fr" label="français" /> </datalist>

51 <input id="firstname" required />

52 <input id="firstname" placeholder= your firstname />

53 <input id="firstname" autofocus />

54 <input id="firstname" pattern= [a-za-z] />

55 Use novalidate on form if you want to skip validation use Form Validation API if you want to check valildity yourself

56 Validation API willvalidate Validity checkvalidity() validationmessage setcustomvalidity()

57 Things that can go wrong valuemissing typemismatch patternmismatch toolong rangeunderflow rangeoverflow stepmismatch

59 Geolocation

60 Share your location with trusted sites

62 Video and Audio

63 Why do we need a video element???

64 When you wanted to use video, you needed to use the <object/> tag. The <object/> tag is for foreign objects and the video is not foreign

65 <video src="boringvideo.ogg" autoplay controls height width poster loop />

66 Video - width - height - poster == Audio

68 Specifications said: all browsers should at least have built-in support for Ogg Vorbis for audio and Ogg Theora for movies

69 Apple and Nokia said NO

70 So there is no specification for audio and video

71 And so the developer-browser story continues

72 H.264, Theora and VP8 are the most relevant video codecs For audio we use MP3, AAC and Vorbis

73 Theora and Vorbis in an Ogg container Firefox 4 supports also WebM

74 Theora and Vorbis in an Ogg container Opera 10.6 supports also WebM

75 Theora and Vorbis in an Ogg container Chrome 6 supports also WebM

76 Anything that Quicktime supports, which is a long list, but no WebM, Theora, Vorbis H.264 video and AAC audio supported

77 Supports all profiles of H.264 and AAC in an MP4 container >= IE9

78 What to do

79 Check with JavaScript or Use multiple sources

81 Check with JavaScript or Use multiple sources

82 <video id="thevideo" autoplay controls width="500"> <source src="../videos/big_buck_bunny.mp4" /> <source src="../videos/big_buck_bunny.ogv" /> <source src="../videos/big_buck_bunny.webm" /> <p>your browser doesn't support video</p> </video>

83 Control video with JavaScript

84 function playpausevideo(sender) { if (video.paused video.ended) { if (video.ended) { video.currenttime = 0; } } } else { } sender.innerhtml = ' '; sender.title = 'play'; video.play(); sender.innerhtml = ' '; sender.title = 'pause'; video.pause();

85 video.addeventlistener('play', function () { ;}, false), video.addeventlistener('pause', function () { ; }, false)

86 Canvas

90 Instead of drawing with a brush, use JavaScript

91 <canvas width="100" height="100"> <p>your browser does not support the canvas</p> </canvas>

92 Grab the context var canvas = document.getelementbyid('thecanvas'); var ctx = canvas.getcontext("2d");

94 ctx.beginpath(); ctx.moveto(75, 50); ctx.lineto(75, 100); ctx.lineto(25, 100); ctx.fill();

95 context.beginpath(); context.moveto(100, 100); context.lineto(100, 300); context.lineto(150, 300); context.lineto(150, 155); context.lineto(205, 155); context.lineto(205, 100); context.closepath(); context.fillstyle = "#0099ff"; context.fill(); context.linewidth = 6; context.linejoin = "round"; context.strokestyle = "#cccccc"; context.stroke();

96 context.beginpath(); context.arc(100, 50, 30, 0, Math.PI * 2, true); context.fill();

97 var context = canvas.getcontext("2d"); var img = new Image(); img.onload = function () { alert('loaded'); context.drawimage(img, 0, 0, 250, 375); } img.src = '../images/soldier_stub.png';

98 Lot s of possibilities Transformations settransform Rotate, scale, skew, pan, Run over Pixels Save canvas content

100 HTML5 Web Workers API for background scripts Don t block the UI Thread Not supported in IE But in IE10 (thx for feedback)

101 Restrictions No access to DOM No access to the window No access to the host page

102

103

104 Your storage options in HTML5 Web Storage Web SQL IndexedDB Cookies

105 Web Storage Session Storage Temporary key/value pairs One session per tab/window Local Storage Same as session storage Persitant Global

106

107

108

109 IndexedDB Object based data store Like a database without SQL Only vendor prefixed implementations Not ready

110

111

112

113 Thank you for listening Contact me on

114 Resources

115

116

New Media Production HTML5

New Media Production HTML5 Modernizr, an HTML5 Detection Library Modernizr is an open source, MIT-licensed JavaScript library that detects support