Notes 36 - HTML5 2

Notes 36 - HTML5 2 - HTML5 Copyright 2010 Ellis Horowitz...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: HTML5 Copyright 2010 Ellis Horowitz 1 Background HTML5 is being developed as the next major revision of HTML The Web Hypertext ApplicaHon Technology Working Group (WHATWG) started work on the specificaHon in June 2004 • HTML5 supersedes HTML 4.01, XHTML 1.0 and XHTML 1.1 • The current draR specificaHon can be found at hSp://dev.w3.org/html5/markup/ • and associated documents such as an HTML5 vocabulary at hSp://dev.w3.org/html5/spec/ • Presently the latest versions of Safari, Chrome, Firefox, Opera and Internet Explorer all have some support for HTML5, but it varies across the browsers • • – E.g. see hSp://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29 or hSp://molly.com/html5/html5 ­0709.html Copyright 2010 Ellis Horowitz 2 Major New Elements in HTML5 • New semanHc elements like <header>, <footer>, and <secHon> • Canvas, a two ­dimensional drawing surface that you can program with JavaScript • Video that you can embed on your web pages without resorHng to third ­party plug ­ins • GeolocaHon, whereby visitors can choose to share their physical locaHon with your web applicaHon • Persistent local storage without resorHng to third ­party plug ­ins • Offline web applicaHons that work even aRer network access is interrupted • Improvements to HTML web forms • Microdata, which lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semanHcs Copyright 2010 Ellis Horowitz 3 New Markup Elements Summary of new HTML5 Elements New Media, Canvas, Form Elements 4 Copyright 2010 Ellis Horowitz HTML5  ­ Removed Elements • • • • • The following elements are not in HTML 5 because their effect is purely presentaHonal and therefore beSer handled by CSS: basefont, big, center, font, s, strike, 0, u The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negaHve way: frame , frameset, noframes The following elements are not included because they have not been used o:en, created confusion or can be handled by other elements – acronym is not included because it has created lots of confusion. Authors are to use abbr for abbreviaHons. – applet has been obsoleted in favor of object. – isindex usage can be replaced by usage of form controls. – dir has been obsoleted in favor of ul. Copyright 2010 Ellis Horowitz 5 HTML5  ­ Removed A4ributes  ­ Handled by CSS • • • • • • • • • • • • • • • • • • • • • • • align aSribute on capHon, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, ioot, th, thead and tr. alink, link, text and vlink aSributes on body. background aSribute on body. bgcolor aSribute on table, tr, td, th and body. border aSribute on table, img and object. cellpadding and cellspacing aSributes on table. char and charoff aSributes on col, colgroup, tbody, td, ioot, th, thead and tr. clear aSribute on br. compact aSribute on dl, menu, ol and ul. frame aSribute on table. frameborder aSribute on iframe. height aSribute on td and th. hspace and vspace aSributes on img and object. marginheight and marginwidth aSributes on iframe. noshade aSribute on hr. nowrap aSribute on td and th. rules aSribute on table. scrolling aSribute on iframe. size aSribute on hr, input and select. type aSribute on li, ol and ul. valign aSribute on col, colgroup, tbody, td, ioot, th, thead and tr. Width aSribute on hr, table, td, th, col, colgroup and pre . Copyright 2010 Ellis Horowitz 6 Drawing with the <canvas> Element • • • • • the <canvas> element is “a resoluHon ­dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. A <canvas> element has no content and no border of its own. You can have more than one <canvas> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id aSribute, you can access them just like any other element. E.g. If one adds an id aSribute: <canvas id=”mycanvas" width="300" height="225"></canvas> Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById(”mycanvas"); • • • • Copyright 2010 Ellis Horowitz 7 Drawing a Rectangle on Canvas Every canvas has a drawing context. Once you’ve found a <canvas> element in the DOM you call its getContext() method. You must pass the string "2d" to the getContext() method Copyright 2010 Ellis Horowitz 8 Canvas Coordinates • The canvas is a two ­dimensional grid. The coordinate (0, 0) is at the upper ­leR corner of the canvas. Along the X ­axis, values increase towards the right edge of the canvas. Along the Y ­axis, values increase towards the boSom edge of the canvas. To draw straight lines in pencil, you use the following two methods: moveTo(x, y) moves the pencil to the specified starHng point. lineTo(x, y) draws a line to the specified ending point. • • • Copyright 2010 Ellis Horowitz 9 Drawing Context • • • • • • There’s a whole group of properHes and methods devoted to drawing rectangles: The fillStyle property can be a CSS color, a paSern, or a gradient. The default fillStyle is solid black, but you can set it to whatever you like. fillRect(x, y, width, height) draws a rectangle filled with the current fill style. The strokeStyle property is like fillStyle — it can be a CSS color, a paSern, or a gradient. strokeRect(x, y, width, height) draws an rectangle with the current stroke style. strokeRect doesn’t fill in the middle; it just draws the edges. clearRect(x, y, width, height) clears the pixels in the specified rectangle. Copyright 2010 Ellis Horowitz 10 Document Structure Old Way New Way • HTML5 introduces a whole set of new elements that make it much easier to structure pages. • By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. • For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. • Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author. Copyright 2010 Ellis Horowitz 11 • • <secHon>  ­ a grouping of content, e.g. chapters or tabbed pages or a page is divided into IntroducHon, News Items and Contact InformaHon Example of an arHcle about apples with two secHons <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.< /p> </section> Don’t use section just as hook for styling or scripting; That is a </article> Defining SecHons of a Web Page with <secHon> Element div Don’t use it if article, aside or nav is more appropriate Don’t use it unless there is naturally a heading at the start of the section Copyright 2010 Ellis Horowitz 12 Defining SecHons of a Web Page with <nav> Element • • <nav>  ­ a secHon of a page that links to other pages or to parts within the page; a secHon with navigaHon links In the following example, the page has several places where links are present, but only one of those places is considered a navigaHon secHon. <body> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> <a href="blog.html">Blog</a> <a href="forums.html">Forums</a></p> <p>Last Modified: <time>2009-04-01</time></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things needed to wake up for today</a></li> <li><a href="successes.html">Sheep manage to wake</a></li> </ul> </nav> </header> <div> <article> <header> <h1>My Day at the Beach</h1> Copyright 2010 Ellis Horowitz 13 Defining SecHons of a Web Page with <arHcle> Element • <arHcle>  ­ a component of a page that consists of a self ­contained porHon intended to be independently distributable or reusable; This could be a forum post, a magazine or newspaper arHcle, a blog entry, a user ­submiSed comment, an interacHve widget or gadget, or any other independent item of content; Here is an example of a blog post showing some of the comments: <article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article> <footer> <p>Posted by: George Hammond</p> <p><time pubdate datetime="2009-10-10T19:1508:00"></time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article> Copyright 2010 Ellis Horowitz 14 Some Other New SemanHc Elements • • • • • • <aside>  ­ a secHon of a page that consists of content that is tangenHally related to the content around the aside element <hgroup>  ­ heading of a secHon, a group of h1 ­h6 elements <header>  ­ a group of introductory or navigaHonal aids <footer>  ­ a footer for its nearest ancestor secHoning content <Hme>  ­ represents either a Hme on a 24 hour clock, or a precise date <mark>  ­ represents a run of text in one document marked or highlighted for reference Copyright 2010 Ellis Horowitz 15 Dates and Times The <Hme> element is used to encode dates; There are two related aSributes: dateTime and pubDate – The date>me aSribute, if present, gives the date or Hme being specified – The pubdate aSribute is a boolean aSribute and indicates that the date and Hme given by the element is the publicaHon date and Hme of the nearest ancestor arHcle element, or, if the element has no ancestor arHcle element, of the document as a whole • in HTML5 <time datetime="2009-10-22" pubdate>October 22, 2009</time> • • • Or including a Hme <time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time> For a discussion of why the <time> element still needs to be re-defined see: http://www.quirksmode.org/blog/archives/2009/04/making_time_saf.html Copyright 2010 Ellis Horowitz 16 localStorage • localStorage is a client ­side key ­value database, – data is stored in the users browser and remains there – data is only available when on that machine and in that browser. – localStorage is per browser not per computer. – localStorage only supports storing of strings • Below is an example of local storage that counts the number of visits to a page Copyright 2010 Ellis Horowitz 17 Video on the Web • • • HTML5 defines a standard way to embed video in a web page, using a <video> element. Video container files include video and audio files There are lots of video container files, e.g. – MPEG4 (mp4 or m4v) – QuickTime (.mov) – Flash Video (.flv) from Adobe – Ogg (.ogv) open source – WebM, announced by Google – Audio Video Interleave (.avi), invented by MicrosoR Copyright 2010 Ellis Horowitz 18 Video Codecs • There are lossy and lossless video codecs. Lossless video is much too big to be useful on the web. A lossy video codec means that informaHon is being irretrievably lost during encoding. Three popular video codecs are: – H.264 also known as MPEG4 – Theora – VP8 the H.264 standard is split into “profiles,” which each define a set of opHonal features that trade complexity for file size. Higher profiles use more opHonal features, offer beSer visual quality at smaller file sizes, take longer to encode, and require more CPU power to decode in real ­Hme. E.g. Apple’s iPhone supports Baseline profile, the AppleTV set ­top box supports Baseline and Main profiles, and Adobe Flash on a desktop PC supports Baseline, Main, and High profiles. YouTube now uses H.264 to encode high ­definiHon videos, playable through Adobe Flash; YouTube also provides H.264 ­encoded video to mobile devices, including Apple’s iPhone and phones running Google’s Android mobile operaHng system. Copyright 2010 Ellis Horowitz 19 • • • • Audio Codecs • • • And like lossless video, lossless audio is really too big to put on the web. The audio codec specifies how to decode the audio stream and turn it into digital waveforms that your speakers then turn into sound. On the web, there are really only three audio codecs you need to know about: – MP3, • MP3s can contain up to 2 channels of sound. They can be encoded at different bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others from 32 to 320. Higher bitrates mean larger file sizes and beSer quality audio, – Advanced Audio Encoding, AAC, • It is the default format for Apple’s iTunes • It supports up to 48 channels of sound – Vorbis • Usually comes in an Ogg container • Android phones can play Vorbis audio Copyright 2010 Ellis Horowitz 20 HTML MarkUp • • • To insert one video file in a web page <video src="pr6.webm" width="320" height="240"></video> The <video> element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properHes. you can tell the browser to display a built ­in set of controls. To do this, just include the controls aSribute in your <video> tag. <video src="pr6.webm" width="320" height="240" controls></video> The preload aSribute tells the browser that you would like it to start downloading the video file as soon as the page loads. This makes sense if the enHre point of the page is to view the video. On the other hand, if it’s just supplementary material that only a few visitors will watch, then you can set preload to none to tell the browser to minimize network traffic. • • • Copyright 2010 Ellis Horowitz 21 Examples • Here’s an example of a video that will start downloading (but not playing) as soon as the page loads: And here’s an example of a video that will not start downloading as soon as the page loads: The autoplay aSribute tells the browser that you would like it to start downloading the video file as soon as the page loads, and you would like it to start playing the video automaHcally as soon as possible. Here’s an example of a video that will start downloading and playing as soon as possible aRer the page loads: <video src="pr6.webm" width="320" height="240" preload></video> • <video src="pr6.webm" width="320" height="240" preload="none"></video> • • <video src="pr6.webm" width="320" height="240" autoplay></video> Copyright 2010 Ellis Horowitz 22 HTML5 Video Example Copyright 2010 Ellis Horowitz 23 HTML5 Video Example Copyright 2010 Ellis Horowitz 24 Video ASributes Copyright 2010 Ellis Horowitz 25 Audio Copyright 2010 Ellis Horowitz 26 View Some New HTML5 CapabiliHes • Go to hSp://html5demos.com/ and select your favorite browser, e.g. Firefox, and try these examples: – Drag files directly into your browser • Working in FF, Chrome – InteracHve canvas gradients • Working in FF,IE,Safari,Chrome – Content editable • Working in FF,IE,Safari,Chrome – GeolocaHon • Working in FF, Safari, Chrome – Drag and drop – Simple drag and drop – Storage Copyright 2010 Ellis Horowitz 27 Drag an Image from Desktop to drop Zone Image Before After Copyright 2010 Ellis Horowitz 28 Drag to Drop Zone Source <!DOCTYPE html><html lang="en"><head><meta charset=ui ­8 /><meta name="viewport" content="width=620" /> <Htle>HTML5 Demo: File API</Htle> <link rel="stylesheet" href="/css/html5demos.css" type="text/css" /> <script src="/js/h5uHls.js"></script></head><body> <secHon id="wrapper"> <header> <h1>File API</h1> </header> <style> #holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;} #holder.hover { border: 10px dashed #333; } </style> <arHcle> <div id="holder"></div> <p id="status">File API & FileReader API not supported</p> <p>Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background  ­ without uploading the file to any servers.</p></arHcle> <script> var holder = document.getElementById('holder'), state = document.getElementById('status'); if (typeof window.FileReader === 'undefined') { state.className = 'fail'; } else { state.className = 'success'; state.innerHTML = 'File API & FileReader available'; } holder.ondragover = funcHon () { this.className = 'hover'; return false; }; holder.ondragend = funcHon () { this.className = ''; return false; }; Copyright 2010 Ellis Horowitz 29 Drag to Drop Zone Source holder.ondrop = funcHon (e) { this.className = ''; e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = funcHon (event) { holder.style.background = 'url(' + event.target.result + ') no ­repeat center'; }; reader.readAsDataURL(file); return false; }; </script> <footer><a href="/">HTML5 demos</a>/<a id="built" href="hSp://twiSer.com/rem">@rem built this</a>/<a href="#view ­source">view source</a></footer> </secHon> <a href="hSp://github.com/remy/html5demos"><img style="posiHon: absolute; top: 0; leR: 0; border: 0;" src="hSp://s3.amazonaws.com/github/ribbons/forkme_leR_darkblue_121621.png" alt="Fork me on GitHub" /></a> <script src="/js/pre„fy.packed.js"></script> <script> var gaJsHost = (("hSps:" == document.locaHon.protocol) ? "hSps://ssl." : "hSp://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google ­analyHcs.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script> try { var pageTracker = _gat._getTracker("UA ­1656750 ­18"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> Copyright 2010 Ellis Horowitz 30 GeolocaHon Example Chrome Firefox Safari (Not working) Copyright 2010 Ellis Horowitz 31 GeoLocaHon Source Code <!DOCTYPE html> <html lang="en"> <head> <meta charset=ui ­8 /> <meta name="viewport" content="width=620" /> <Htle>HTML5 Demo: geolocaHon</Htle> <link rel="stylesheet" href="/css/html5demos.css" type="text/css" /> <script src="/js/h5uHls.js"></script></head> <body> <secHon id="wrapper"> <header> <h1>geolocaHon</h1> </header><meta name="viewport" content="width=620" /> <script type="text/javascript" src="hSp://maps.google.com/maps/api/js?sensor=false"></script> <arHcle> <p>Finding your locaHon: <span id="status">checking...</span></p> </arHcle> <script> funcHon success(posiHon) { var s = document.querySelector('#status') if (s.className == 'success') { // not sure why we're hi„ng this twice in FF, I think it's to do with a cached result coming back return; } s.innerHTML = "found you!"; s.className = 'success'; var mapcanvas = document.createElement('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '400px'; mapcanvas.style.width = '560px'; document.querySelector('arHcle').appendChild(mapcanvas); var latlng = new google.maps.LatLng(posiHon.coords.laHtude, posiHon.coords.longitude); var myOpHons = { zoom: 15, center: latlng, mapTypeControl: false, navigaHonControlOpHons: {style: google.maps.NavigaHonControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; Copyright 2010 Ellis Horowitz 32 GeoLocaHon Source Code, cont’d var map = new google.maps.Map(document.getElementById("mapcanvas"), myOpHons); var marker = new google.maps.Marker({ posiHon: latlng, map: map, Htle:"You are here!" }); } funcHon error(msg) { var s = document.querySelector('#status'); s.innerHTML = typeof msg == 'string' ? msg : "failed"; s.className = 'fail'; // console.log(arguments); } if (navigator.geolocaHon) { navigator.geolocaHon.getCurrentPosiHon(success, error); } else { error('not supported'); } </script> <footer><a href="/">HTML5 demos</a>/<a id="built" href="hSp://twiSer.com/rem">@rem built this</a>/<a href="#view ­source">view source</a></footer> </secHon> <a href="hSp://github.com/remy/html5demos"><img style="posiHon: absolute; top: 0; leR: 0; border: 0;" src="hSp://s3.amazonaws.com/github/ribbons/forkme_leR_darkblue_121621.png" alt="Fork me on GitHub" /></a> <script src="/js/pre„fy.packed.js"></script> <script> var gaJsHost = (("hSps:" == document.locaHon.protocol) ? "hSps://ssl." : "hSp://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google ­analyHcs.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script> <script> try { var pageTracker = _gat._getTracker("UA ­1656750 ­18"); pageTracker._trackPageview(); } catch(err) {}</script></body></html> Copyright 2010 Ellis Horowitz 33 HTML5 Examples from Apple HTML5 examples of video, typography, gallery, transitions, audio, rotations, and virtual reality Each box describes what features of HTML5 were used to produce the effect 34 Copyright 2010 Ellis Horowitz Some HTML5 Video Examples • Go to hSp://double.co.nz/video_test/ and try – TinyVid, which uses this video element <video src="http://tinyvid.tv/file/1t3x4p1t7w882.ogg" preload="none" width="320px" height="240px" poster="http://tinyvid.tv/poster/1t3x4p1t7w882.png" controls="controls"> – Billy’s Browser, which uses this video element <video src="BillysBrowser480.ogg" id='v1' onHmeupdate="seeking_start(); return false;" onseeked="seeking_stopped(); return false;" ondataunavailable="buffering_start(); return false;" oncanshowcurrenirame="buffering_stop(); return false;" onprogress="Hme_update(document.getElementById('v1'),document.getElementById('t1')); return false;"></video> • Look up the video attributes at http://dev.w3.org/html5/spec/index.html#attributes-1 – E.g. onseeked, is an event that fires when seeking the video to a new position Copyright 2010 Ellis Horowitz 35 More ArHcles on the Flash vs HTML5 Controversy • • Comparison of speed of Flash and HTML5 hSp://www.appleinsider.com/arHcles/10/03/10/flash_html_5_comparison_finds_neither_h as_performance_advantage.html • • SpoutCore: hSp://www.appleinsider.com/arHcles/10/04/19/sproutcore_debuts_new_html5_web_devel opment_tools.html hSp://www.appleinsider.com/arHcles/10/04/01/apple_highlights_ipad_ready_adobe_flash_ free_web_sites.html • • • and this: hSp://www.apple.com/ipad/ready ­for ­ipad/ Copyright 2010 Ellis Horowitz 36 More HTML5 fun.... • • • • • hSp://tech.amikelive.com/wp ­content/uploads/google_pacman_source.txt hSp://tech.amikelive.com/wp ­content/uploads/pacman10 ­hp.2.js.txt hSp://www.chromeexperiments.com/ hSp://www.chromeexperiments.com/detail/browser ­ball/ hSp://newteevee.com/2010/03/25/cbs ­tesHng ­out ­html5 ­for ­ipad ­videos/ hSp://webkit.org/blog/140/html5 ­media ­support/ video element: hSp://www.whatwg.org/specs/web ­apps/current ­work/#video audio element: hSp://www.whatwg.org/specs/web ­apps/current ­work/#audio Copyright 2010 Ellis Horowitz 37 ...
View Full Document

Ask a homework question - tutors are online