HTML5: Evolution or Revolution?

One day workshop slides with references HTML5: Evolution or Revolution?

Venue

• Emergency procedure • Restrooms • Coffee breaks • Food at lunch time

http://www.netskills.ac.uk/content/products/training/index. HTML5: Evolution or Revolution?

Programme

Session 1 10:00–11:15 Introductions + components of HTML5 + background + reference documents + initial practical Coffee break 15 minutes Session 2 11:30–12:45 Semantic content structure + accessibility + new form controls + local storage + practical Lunch 30 minutes Session 3 13:15–14:30 Dealing with older browsers + media playback and the canvas element for drawing + practical Coffee break 15 minutes Session 4 14:45–16:00 Presentation of practical work + other HTML5 features + resources + workshop summary + Q & A HTML5: Evolution or Revolution?

Session 1 Introductions + components of HTML5 + background + reference documents + initial practical HTML5: Evolution or Revolution?

Workshop leaders

George Munroe Academia and Business—long history of working with internet and web in research and business Christine Cahoon Academia and Business—30 years working with computers and providing related services to users

http://www.platypusconsultancy.com/cgi-bin/generic?instanceID=1 HTML5: Evolution or Revolution?

Target audience

This event is aimed primarily at web developers who have existing experience of web development in HTML but are not currently using HTML5. Participants should have existing experience of web development in HTML. HTML5: Evolution or Revolution?

Participants HTML5: Evolution or Revolution?

Course description

HTML5 is the latest markup language for developing and structuring web content. It allows additional functionality, better SEO and sharing of dynamic content. This workshop will explain the benefits, possibilities and practical implementations of using HTML5 in web development. We will dispel the myths and hype you may have heard about HTML5 and share practical applications and you will be able try out some of the new features of HTML5 for yourself.

http://www.netskills.ac.uk/content/products/workshops/range/.html HTML5: Evolution or Revolution?

Workshop topics

• where HTML5 fits in current web trends • major changes from earlier versions of HTML • the benefits and capabilities of HTML5 • principal elements and attributes • audio and video elements for multimedia • using the canvas element for drawings and interactivity • support for HTML5 in current and older browsers HTML5: Evolution or Revolution?

Workshop web site

http://html5.netskills.biz/ http://www.youtube.com/watch?v=mzPxo7Y6JyA HTML5: Evolution or Revolution?

Skills in high demand for 2013

After years of relative stagnation, HTML has made big advancements in recent years with HTML5, which is now supported by the latest versions of all major Web browsers. Meanwhile, the design options available via CSS3 and the interactivity provided by JavaScript have pushed the Web even further, blurring the line between Web-based and native apps. It's worth noting that when people say "HTML5," they're often referring in part to JavaScript. That's because what makes Web apps look and feel so app-like is CSS and JavaScript, not just the plain HTML itself.

http://www.siliconindia.com/news/technology/7-Tech-Skills-In-High-Demand-For-2013--nid-146619-cid-2.html What? How?

References? Issues?

Examples? Why?

Just do it! What? How?

References? Issues?

Examples? Why?

Just do it! geolocation “Flash beating” web apps

apps video objects

Examples? simple page enhancements canvas HTML5: Evolution or Revolution?

HTML5 graphics

• potential Flash killing applications • wide range from games to art to educational and research tools • what is the limitation of HTML5—at this point we cannot decide

http://www.hongkiat.com/blog/48-excellent-html5-demos/ http://www.1stwebdesigner.com/freebies/html5-demos/ HTML5: Evolution or Revolution?

HTML5 video

• SublimeVideo is a (pay for) HTML5 video provided as online service • enables many elegant effects and simple use of video files

http://sublimevideo.net HTML5: Evolution or Revolution?

HTML5 apps

Making an iPad HTML5 app Thomas Fuchs, June 2010 About a month ago or so, Amy and I released a little (literally, it’s about 5k) HTML5 iPad App for looking up time zones. I don’t mean select-box wasteland like all other time zone sites (who likes select boxes anyway), I mean a nicely polished, touch-enabled UI that works offline, too. The site uses no images, no JavaScript frameworks, and no external CSS, and fits quite comfortably in a few k’s of gzipped HTML.

http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/ HTML5: Evolution or Revolution?

Examples of HTML5 web pages

• http://fff.cmiscm.com/#!/main • http://www.nytimes.com/projects/2012/snow-fall • http://famo.us • http://html5.netskills.biz/html5/static/html5/3d.html • http://html5.netskills.biz/html5/static/html5/iptrace.html • http://html5.netskills.biz/html5/static/html5/timer.html What? fast javascript

graphics local storage device independencegeolocation

better semantics HTML5: Evolution or Revolution?

Tell me something about HTML5 5 >> 4 HTML5: Evolution or Revolution?

Principles

• encompassing HTML4, XHTML, DOM, JavaScript and CSS • improved semantics • reduced need for browser plugins • better error handling • core markup replacing scripting where possible • device independence HTML5: Evolution or Revolution?

HTML5 popular highlights

Evolutionary • semantic content structure elements • new form controls for date, time, email, url... data • increased support for local offline storage • video and audio elements for media playback • canvas element for drawing • geolocation • drag and drop Revolutionary HTML5: Evolution or Revolution?

Developers prefer HTML5

Most developers now prefer HTML5 for cross platform development Frederic Lardinois, 26 February 2013 According to a new survey commissioned by Telerik’s Kendo UI, the majority of developers now prefer to work with HTML5 instead of native apps for their cross-platform development. Half of the 5,000 developers surveyed in the company’s 2013 Global Developer Survey also said that they developed apps using HTML5 in 2012 and 90% of them plan to do so in 2013. Only 15% of developers said they would prefer to use a native-only approach.

http://techcrunch.com/2013/02/26/survey-most-developers-now-prefer-html5-for-cross-platform-development/ http://www.youtube.com/watch?v=_ZkbUX72s_Q WHAT working group

References?

world wide web consortium HTML5: Evolution or Revolution?

Background

1990–1995 HTML revisions based at CERN, IETF 1995 HTML 3.0 W3C 1997 HTML 3.2 W3C 1998 HTML 4.0 W3C, DOM 1.0 browser vendors (API for HTML) 2000 HTML4 in XML = XHTML 1.0 (no new features) W3C focus on XHTML modularisation and XHTML2 2000–2004 DOM 2.0 Core, DOM 2.0 HTML, DOM 3.0 browser vendors XForms 1.0 W3C 2003 realisation that HTML evolution important rather than XML replacement extension of HTML 4.0 to support XForms 1.0 features proposal from and Opera that W3C reopen HTML evolution rejected 2004 Apple, Mozilla and Opera form WHATWG to develop HTML standard for practical use and encompass HTML 4.0, XHTML 1.0, and DOM 2.0 HTML 2006 W3C rejoin HTML development efforts with WHATWG 2007 HTML 5.0 first draft W3C and WHATWG 2011 W3C HTML 5.0 standard draft and extended WHATWG draft

http://en.wikipedia.org/wiki/HTML5 HTML5: Evolution or Revolution?

HTML 4.0 (Hyper Text Markup Language)

• the standard since 1999 • improvements included: more multimedia options scripting languages style sheets better printing facilities accessibility considerations internationalisation

http://www.w3.org/TR/html401/ HTML5: Evolution or Revolution?

XHTML 1.0 (Extensible HTML)

• the reformulation of HTML 4 as an XML 1.0 application • the three HTML 4 related DTDs XHTML-1.0-Strict XHTML-1.0-Transitional XHTML-1.0-Frameset • guidelines for compatibility with HTML user agents

http://www.w3.org/TR/xhtml1/ HTML5: Evolution or Revolution?

DOM ()

• platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ HTML5: Evolution or Revolution?

JavaScript • may accompany an HTML document or be embedded directly in it • triggered on the client machine by a particular event • extends HTML documents in highly active and interactive ways • ECMAScript is the current standard European Computer Manufacturers Association (1960) became European association for standardising information and communication systems (1994) • HTML support for scripts is independent of scripting language

http://www.ecma-international.org/publications/standards/Ecma-262.htm HTML5: Evolution or Revolution?

CSS (Cascading Style Sheets)

• CSS3 is a series of modular specifications • builds on CSS2 module by module, using the CSS2.1 as core • modules add functionality and/or replace part of CSS2.1 specification • as each module is completed, it will be plugged in to the existing system of CSS2.1 • over 50 separate areas of work

http://www.w3.org/Style/CSS/current-work http://www.w3.org/TR/css-2010/ http://www.w3.org/TR/CSS21/ HTML5: Evolution or Revolution?

CSS3 selectors

• the degree to which CSS can control the appearance of a web page depends on how easily different parts of the document can be selected in CSS statements • the latest selectors provide increased access to the document nodes and new selection rule extensions

http://www.w3.org/TR/css3-selectors/ http://www.css3.info/selectors-test/ HTML5: Evolution or Revolution?

Caution

“It must be admitted that many aspects of HTML appear at first glance to be nonsensical and inconsistent” (Design notes, W3C HTML5 working draft, 25 May 2011) HTML5: Evolution or Revolution?

W3C HTML5 reference A vocabulary and associated APIs for HTML and XHTML HTML5 W3C working draft, 25 May 2011 (editor Ian Hickson, Inc.) 1. Common infrastructure 2. Semantics, structure, and APIs of HTML documents 3. The elements of HTML 4. Loading Web pages 5. Web application APIs 6. User interaction 7. The HTML syntax 8. The XHTML syntax 9. Rendering 10. Obsolete features 11. IANA considerations

http://www.w3.org/TR/html5/ http://www.w3.org/html/wg/drafts/html/master/ HTML5: Evolution or Revolution?

WHATWG

http://www.whatwg.org/specs/web-apps/current-work/multipage/ HTML5: Evolution or Revolution?

Warning

“...the novice author is cautioned that this HTML specification, by necessity, defines the language with a level of detail that might be difficult to understand at first” (A quick introduction to HTML, WHATWG living HTML specification) HTML5: Evolution or Revolution?

WHATWG HTML5 reference

HTML Living Standard (editor Ian Hickson, Google Inc.) 1. Common infrastructure 2. Semantics, structure, and APIs of HTML documents 3. The elements of HTML 4. Microdata 5. Loading Web pages 6. Web application APIs 7. User interaction 8. Video conferencing and peer-to-peer communication 9. Web workers 10. Communication 11. 12. The HTML syntax 13. The XHTML syntax 14. Rendering 15. Obsolete features 16. IANA considerations

http://www.whatwg.org/specs/web-apps/current-work/multipage/ HTML5: Evolution or Revolution?

W3C HTML5 related publications

http://www.w3.org/TR/microdata/ http://www.w3.org/2011/04/webrtc-charter.html http://www.w3.org/TR/workers/ http://www.w3.org/TR/websockets/ http://dev.w3.org/html5/webstorage/ HTML5: Evolution or Revolution?

Other HTML5 associated standards

http://www.w3.org/TR/geolocation-API/ http://www.w3.org/TR/webdatabase/ http://www.w3.org/TR/IndexedDB/ HTML5: Evolution or Revolution?

Recent controversial digital rights management (DRM)

W3C's DRM framework— a victory for the open Web, not a defeat Peter Bright, May 10 2013 The World Wide Web Consortium (W3C) has today published a Working Draft for Encrypted Media Extensions (EME), a framework that will allow the delivery of DRM- protected media through the browser. EME does not specify any DRM scheme per se. Rather, it defines a set of APIs that allow JavaScript and HTML to interact with decryption/protection modules. These modules will tend to be platform-specific in one way or another and will contain the core DRM technology.

http://www.w3.org/TR/encrypted-media/ http://arstechnica.com/business/2013/05/drm-in-html5-is-a-victory-for-the-open-web-not-a-defeat/ HTML5: Evolution or Revolution?

Ongoing work at W3C • formally opened 7 March 2007 • chartered to continue its work through 31 December 2014 • work includes: HTML5 specification HTML5 and XHTML compatibility issues RDFa in HTML5 text alternatives for images detailed Canvas 2d specification useful guides for HTML authors

http://www.w3.org/html/wg/ HTML5: Evolution or Revolution?

Differences from HTML4 • compatibility • syntax • language new elements changed elements absent elements new attributes changed attributes absent attributes • APIs

http://dev.w3.org/html5/html4-differences/ HTML5: Evolution or Revolution?

W3C HTML5 markup language reference

• describes the HTML markup language in a complete way identifying HTML5 new features • designed to help authors of HTML content conform to standard • intended to complement the standard specification and related documents • does not include descriptions of related APIs in detail

http://www.w3.org/TR/html-markup/ HTML5: Evolution or Revolution?

Developer’s version of HTML5 standard

• this HTML5 specification is like no other —it has been processed with you, the humble web developer, in mind • the focus of this specification is readability and ease of access • unlike the full HTML specification, this web developer edition removes information that only browser vendors need know

http://developers.whatwg.org/ forms, local storage simple examples audio, video, canvas

validation service interesting new stuff with lots of potential for creativity online resources Just do it! HTML5: Evolution or Revolution?

Defining an HTML5 document

...

... HTML5: Evolution or Revolution?

Simple samples

http://html5.netskills.biz/ HTML5: Evolution or Revolution?

W3C validation service

• checks the markup validity of web documents using: HTML XHTML related web markup languages • validate using: direct input file upload URI reference

http://validator.w3.org/#validate_by_input HTML5: Evolution or Revolution?

Orientation practical • Run the text editor contained in the workshop bundle • Create a basic HTML file—ensure a HTML doctype statement, html element, document head, title, body • Embed a style block in the head with two or three CSS statements relating to the body of your page • Embed a script block in the head with a JavaScript function that runs on page load and alerts with the text “Ready!” • Save your HTML file (extension .html), then open and view with the and correct any problems • Validate your HTML source text using the W3C validator HTML5: Evolution or Revolution?

Summary and review

Session 1 Introductions + components of HTML5 + background + reference documents + initial practical HTML5: Evolution or Revolution?

Session 2 Semantic content structure + accessibility + new form controls + local storage + practical How?

JavaScript

CSS3 semantics new HTML elements

the browser HTML5: Evolution or Revolution?

Formal classification of HTML5 elements • Metadata elements link style meta name meta http-equiv=refresh meta http-equiv=default-style meta charset meta http-equiv=content-type script noscript command • Phrasing elements (inline) a em strong small mark abbr dfn i b s u code var samp kbd sup sub q cite span bdo bdi br wbr ins del img embed object iframe map area script noscript ruby video audio input textarea select button label output datalist keygen progress command canvas time meter • elements (block) phrasing elements a p hr pre ul ol dl div h1 h2 h3 h4 h5 h6 hgroup address blockquote ins del object map noscript section nav article aside header footer video audio figure table form fieldset menu canvas details

http://dev.w3.org/html5/markup/common-models.html#common.elem.flow HTML5: Evolution or Revolution?

Closer look at kinds of content

http://developers.whatwg.org/content-models.html#kinds-of-content HTML5: Evolution or Revolution?

Elements no longer supported in HTML5

use content elements from Separate use use CSS

use CSS presentation style use CSS

use CSS use
    use CSS use
    , , frames not supported <listing> use <code> or <pre> <marquee> use CSS <strike> use <del> <tt> use <pre> <u> use CSS <xmp> use <pre> or <code> http://dev.w3.org/html5/html4-differences/ HTML5: Evolution or Revolution?</p><p>Document structure semantic markup</p><p>Adding meaning and context is important for many reasons • HTML content is structured just as with other systems such as word processors • HTML elements define parts of a web page • defining specific parts also defines relationships between parts of the document, including relative importances • having the parts defined also enables readers (including search engines) to better assess the content in a document • this allows a better match of content to a particular request • so content is more likely to reach and satisfy an intended audience • the document becomes more robust • and parts of the document can be reused more easily • styles can be associated with each part of the document to easily manage appearance • other useful programming can be done with the document</p><p> http://www.csszengarden.com/ HTML5: Evolution or Revolution?</p><p>Document structure related elements</p><p> a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry—may contain flow content and content that is tangentially related to parent can be any element that can contain flow the content that forms the main textual no changeelements changed flownew of a document—may contain flow content and parent can be any element address article that can contain flow elements body aside h1 the footer for the section (flow element) it applies to footer —may contain flow content and parent can be any represents the header of a section— h2 element that can contain flow elements header may contain flow content and parent can be any element that can contain h3 hgroup flow elements h4 Now removed from standard! nav h5 section a section of a document that <a href="/tags/Links_(web_browser)/" rel="tag">links</a> to other documents or to parts within the h6 document itself—may contain flow content and parent can be any element a section of a document, typically with a title or that can contain flow elements heading—may contain flow content and parent can be any element that can contain flow elements HTML5: Evolution or Revolution?</p><p>Document structure—grouping content</p><p> a paragraph-level thematic break (e.g. scene change in a story or transition to a different topic in noa reference change section) changed new the following attributes are now obsolete: alignblockquote, width, noshade, size, color hr figure br figcaption</p><p> dd a unit of content, optionally with a caption, that is self-contained, that is typically div represents a caption or legend for a referenced as a single unit from the main flow figure—parent may only be a figure dl of the document, and that can be moved away from the main flow of the document without dt affecting the document’s meaning li ol p pre ul HTML5: Evolution or Revolution?</p><p>Document structure—text content span of text that is isolated from its the following attributes are now obsolete: name, surroundings for the purposes of coords, shape, urn, charset, methodsno change, rev now solelychanged represents the cited bidirectionalnew text formatting the target attribute is no longer deprecated title of a work abbr a bdi a new media attribute allows specification of intended destination media run of text in one document marked or bdo b mark highlighted for reference purposes code cite only content that is no rp now given the specific semantic purpose of longer accurate or relevant representing textdfn offset from its surrounding content i rt without conveying any extra emphasis or importance, ruby annotations—short runs of text alongside the base text, typically used and for which theem conventional typographic s parts of documents that ruby presentation is bold text in East Asian documents to indicate kbd small are often referred to as the time pronunciation or to provide a short fine print or the small print annotation specific semanticq purpose of representing text offset u from its surrounding content without conveying any extra emphasis sampor importance, and for which the content for which the conventional typographicspan presentation is italic text conventional typographic represents a date and/or time presentation is underlining the datetime attribute provides the actual date/time strong and the pubdate attribute with value “pubdate” sub indicates that the date refers to published date of nearest parent article element or the document sup itself var format: YYYY-MM-DDThh:mm:ssZ HTML5: Evolution or Revolution?</p><p>Document structure elements support</p><p> http://caniuse.com/#search=section HTML5: Evolution or Revolution?</p><p>Sample HTML5—semantics by structure</p><p><body> <header> <nav>...</nav> </header> <article> <section> <aside>...</aside> <figure>... <figcaption>...</figcaption> </figure> </section> <footer>...</footer> </article> </body> HTML5: Evolution or Revolution?</p><p>HTML5 document structure elements</p><p>HTML document <!DOCTYPE html> <html> <head> <title>Demo site for showcasing videos stored elsewhere</title> document head <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="For demonstration purposes only, HTML5 video and audio and more..."> <meta name="keywords" content="demo, HTML5, CSS3, video tag, audio tag"> </head></p><p><body> <article id="home"> document body <header> article <h1>A few sample videos and audio</h1> header <h2>Nothing too serious!</h2> <nav> <a href="#iphone-mp4">An mp4 file on the wonders of iPhone marked up just using &lt;video&gt; tag</a> navigation !<a href="#sagan-utube">An embedded youtube video of scientific slant</a> !<a href="#meyer-vimeo">An embedded vimeo video of a conference talk by Eric Meyer</a> !<a href="#bmw-videojug">An embedded videojug video about the world's best motorcycles</a> !<a href="#walkonthewild-utube">Another embedded youtube video that I coundn't resist</a> !<a href="#drivebytruckers-mp3">Some good music marked up just using &lt;audio&gt; tag</a> </nav> </header></p><p><section id="iphone-mp4"> <p>A few of the not so obvious reasons for having an iPhone</p> section <figure><video src="iphone-magic.mp4" width="478" height="270" controls></video></figure> </section></p><p><section id="drivebytruckers-mp3"> <p>And some good old Drive-By Truckers music</p> section <figure><br /> <audio src="gravity.m4a" controls></audio></figure> </section></p><p><footer> <p>Copyright 2010 SCAMORE</p> footer </footer></p><p></article> </body> </html> HTML5: Evolution or Revolution?</p><p>Simple structured web page</p><p> http://html5.netskills.biz/html5/static/samples/structure.html HTML5: Evolution or Revolution?</p><p>Pleasing presentation is a bonus</p><p>Use of <aside></p><p> http://developers.whatwg.org/urls.html#urls HTML5: Evolution or Revolution?</p><p>Best practice guidelines</p><p> http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf single platform for app match hardware and network development and deployment capabilities</p><p>Why? more accessible web pages</p><p> more functional web pages HTML5: Evolution or Revolution?</p><p>Semantics related to HTML5 elements</p><p>Because HTML conveys meaning, rather than presentation, the same page can be used by a browser on a mobile phone, without changes. Instead of headings being in large letters as on a desktop, for example, the browser on the mobile phone might use the same size text for the whole page, but with headings in bold. But it goes further: the same page could equally be used by a blind user with a browser based around speech synthesis, which instead of displaying the page, reads the page to the user. Instead of large text for the headings, the speech browser might use different volume or slower voice. A browser knows which parts of a page are headings, and can create a document outline for a user to navigate around the document, using keys for "jump to next" or "jump to previous". This is especially common with speech browsers, where users would otherwise find quickly navigating a page quite difficult. Beyond browsers, other software can make use of this information. Search engines use the headings to index a page better, or provide quick links to subsections of the page. Tools can use the headings to create a table of contents, and so on. The same principle applies to all of the semantic elements in HTML5.</p><p> http://developers.whatwg.org/elements.html#elements HTML5: Evolution or Revolution?</p><p>Accessibility</p><p>• better semantic information provided by markup in a web page enables assistive technologies to deliver rich content comparable to the intended content and interface • WAI ARIA attributes can extend semantics further in HTML5 for very effective accessibility solutions • role and ARIA-* attributes can be included in HTML5</p><p> http://www.w3.org/WAI/intro/aria.php http://www.w3.org/TR/wai-aria-primer/ HTML5: Evolution or Revolution?</p><p>WAI ARIA landmark role attribute values</p><p>• landmark roles provide a method to programmatically identify commonly found sections of a web page content in a consistent way • the presence of common, semantic, navigation landmarks allows any site to support the same standard and allows assistive technology to provide a consistent navigation experience</p><p> http://www.w3.org/WAI/PF/aria-practices/ http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/ HTML5: Evolution or Revolution?</p><p>Sample HTML5—semantics with ARIA role</p><p><body> <header role=”banner”> <nav role=”navigation”>...</nav> </header> <article role=”main”> <section> <aside role=”complementary”>...</aside> <figure>... <figcaption>...</figcaption> </figure> </section> <footer role=”infocontent”>...</footer> </article> </body> HTML5: Evolution or Revolution?</p><p>HTML5 accessibility support</p><p>• although HTML5 and ARIA attributes much improve accessibility options, accessibility when using a particular browser depends on the browser • browsers support semantic accessibility aspects of HTML5 differently</p><p> http://html5accessibility.com/ http://developers.whatwg.org/content-models.html#wai-aria HTML5: Evolution or Revolution?</p><p>New form controls</p><p>• the input element has been extended to allow many more types of data input on a form • extensive client side validation of form data can now be implemented without requiring JavaScript using new attributes of the input element, such as required, or by inherent testing of the integrity of the input, as with, for example, email and datetime input types • other responses resulting from user input can now be easily presented to the user with an output element HTML5: Evolution or Revolution?</p><p>Forms related elements</p><p> a set of option elements that the following new input element types have been represent predefined options for added: datetime, datetime-local, date, month, time, other controls week, number, range, email, urlno, search change, tel, color changed new new attributes have been added as follows: form, autocomplete, autofocusbutton, list, pattern, required, input datalist placeholder, dirnamefieldset keygen and (submit, image types) formaction, formenctype, a control for generating a public- a scalar gauge providing a formmethod, formtargetform , formnovalidate private key pair and for submitting meter measurement within a known the public key from that key pair range, or a fractional value and (file, email types)label multiple output and (datetime, datetime-local, date, month, time, legend progress week, number, range types) min, max, step the result of a calculation the following attributes are obsolete: align, usemap the completion progress optgroup of a task option select textarea</p><p> http://dev.w3.org/html5/markup/input.html http://developers.whatwg.org/the-input-element.html#the-input-element HTML5: Evolution or Revolution?</p><p>Sample HTML5—smarter forms</p><p><section id="form" action=”...”> <form name="main"> <p>Your name: <input id="name" autofocus required /></p></p><p><p>Date of birth: <input type="date" id="dob" /></p></p><p><p>Email address: <input type="email" id="email" /></p></p><p><p>And at what time today did you realise that: <input type="time" id="eureka" /></p></p><p><input type="submit" value="Send it on"></p><p></form> </section> HTML5: Evolution or Revolution?</p><p>Sample HTML5—smarter forms</p><p><p>Estimate the percentage probability of anyone being an HTML5 expert: </p><p><input type="range" id="slideValue" value="50" oninput="slideCurrent.value = parseInt (slideValue.value);" /></p><p><output style="font-size: 80%; color: red;" id="slideCurrent"></ output></p> HTML5: Evolution or Revolution?</p><p>Form validation with HTML5</p><p> http://html5.netskills.biz/html5/static/samples/forms.html HTML5: Evolution or Revolution?</p><p>Forms related HTML5 support</p><p> http://caniuse.com/#search=input HTML5: Evolution or Revolution?</p><p>Local offline storage—the new storage API • two related mechanisms have been introduced for storing structured data on the client side, localStorage and sessionStorage attributes of a web storage API • these are similar to cookies, but provide much more storage space, 5–10 Mb compared to 2 Kb with cookies • they also circumvent possible problems with cookies related to conducting a transaction in multiple windows • sites can add to session storage and the content is available to any page from the same site opened in the same window during the same session • local storage remains across windows and sessions http://dev.w3.org/html5/webstorage/ HTML5: Evolution or Revolution?</p><p>Sample HTML5—simple offline storage</p><p><script type="text/JavaScript"> window.onload = function () { if (localStorage.pageCount) { localStorage.pageCount = Number (localStorage.pageCount) + 1; } else { localStorage.pageCount = 1; } if (sessionStorage.pageCount) { sessionStorage.pageCount = Number (sessionStorage.pageCount) + 1; } else { sessionStorage.pageCount = 1; } updatePageReport (); } </script> HTML5: Evolution or Revolution?</p><p>Sample HTML5—simple offline storage</p><p> function updatePageReport () { var footerText = '<p>Total pagecounts since we started: '; footerText += localStorage.pageCount + '</p>'; footerText += '<p>Total pagecounts this session: '; footerText += sessionStorage.pageCount + '</p>'; footerText += '<p>Message from last visitor: '; footerText += '<span style="color: red;"><i>'; footerText += localStorage.lastVisitorSaid + '</i></span></p>'; document.getElementById ('report').innerHTML = footerText; } HTML5: Evolution or Revolution?</p><p>Simple offline storage</p><p> http://html5.netskills.biz/html5/static/samples/storage.html HTML5: Evolution or Revolution?</p><p>Offline storage methods localStorage.pageCount = 1; is the same as • setItem (key, value) localStorage.setItem (‘pageCount’, ‘1’); sets an item (property) of the sessionStorage or localStorage object with name key and value value— both the key and value are always strings </p><p>• getItem (key) var c = localStorage.pageCount; retrieves the value of stored item with name key is the same as var c = localStorage.getItem (‘pageCount’); • removeItem (key) removes the item with name key</p><p>• clear () localStorage.clear (); empties the storage object of all key value pairs wipes all retained information in localStorage • key (n) retrieves the name of the nth key associated with the storage object localStorage.length • length will return 0 after wiping storage provides the number of key value pairs associated with the storage object</p><p> http://www.whatwg.org/specs/web-apps/current-work/multipage/webstorage.html http://www.youtube.com/watch?v=siOHh0uzcuY http://www.youtube.com/watch?v=ceODU6z4-yc HTML5: Evolution or Revolution?</p><p>Useful built in SQL database tools</p><p> html5sql is a light JavaScript module that makes working with the HTML5 Web Database a whole lot easier. Its primary function is to provides a structure for the sequential processing of SQL statements within a single transaction. This alone greatly simplifies the interaction with the database however it doesn't stop there. Many other smaller features have been included to make things easier, more natural and more convenient for the <a href="/tags/Programmer/" rel="tag">programmer</a>.</p><p> http://html5sql.com/guide.html HTML5: Evolution or Revolution?</p><p>Local offline storage HTML5 support</p><p> http://caniuse.com/#search=storage http://www.w3.org/TR/webdatabase/ HTML5: Evolution or Revolution?</p><p>Enhanced markup practical session • Open your web page from earlier with the text editor • Edit your page to include at least one of each of the following elements: article, section, header, footer, nav • Edit your page to include a form with input elements of type range, date, time, email including at least one with a required attribute, also include an output element • Use the localStorage mechanism to include a memo area in your page which can be updated at any time and used to leave a message for the next time you use the page • Load the page in your web browser and check appearance and operation is as expected—amend as required HTML5: Evolution or Revolution?</p><p>Summary and review</p><p>Session 2 Semantic content structure + accessibility + new form controls + local storage HTML5: Evolution or Revolution?</p><p>Session 3 Dealing with older browsers + media playback and the canvas element for drawing + practical change! HTML5 versus “native” app Issues?</p><p> security browser compatibility maturity of standard HTML5: Evolution or Revolution?</p><p>Browser HTML5 readiness tests</p><p>• many conformance tests possible • arbitrary score frameworks • Niels Leenheer’s html5test.com very comprehensive set of tests • desktop browsers • tablets • smart phones • none perfect • trends unmistakable</p><p> http://html5test.com/results.html HTML5: Evolution or Revolution?</p><p>Browser HTML5 readiness and more</p><p>• Alexis Deveria’s When can I use site has a a very extensive range of features compared • includes CSS3 as well as core HTML5 features • many different views possible • search for feature • feature index • compare two browsers</p><p> http://caniuse.com/ HTML5: Evolution or Revolution?</p><p>Browser HTML5 readiness results</p><p> http://www.browserscope.org/ HTML5: Evolution or Revolution?</p><p>Using HTML5 with older browsers</p><p>• <a href="/tags/Google_Chrome/" rel="tag">Google Chrome</a> Frame is an <a href="/tags/Internet_Explorer/" rel="tag">Internet Explorer</a> plug in (for versions 6–9) that renders web pages using the Google Chrome <a href="/tags/Browser_engine/" rel="tag">browser engine</a> • enables use of HTML5 features • speeds up browser • requires web page to contain a meta tag to indicate that Chrome Frame plug in should be used if available <meta http-equiv="X-UA-Compatible" content="chrome=1" /></p><p> http://en.wikipedia.org/wiki/Google_Chrome_Frame http://www.google.com/chromeframe?prefersystemlevel=true HTML5: Evolution or Revolution?</p><p>HTML5 audio and video with any browser</p><p>• html5media is a set of JavaScript functions that can be loaded from a remote server into any web page to enable the current browser to use the audio and video elements • to make HTML5 video and audio tags work in all major browsers, simply add the following line of code somewhere in the <head> of the web page document <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script></p><p> <a href="/tags/HTTPS/" rel="tag">https</a>://github.com/etianen/html5media/wiki HTML5: Evolution or Revolution?</p><p>General HTML5 simulation • JavaScript and CSS can be used to enable the use of new semantic elements in older browsers—known as the Google HTML5 Shiv solution html5shiv.googlecode.com/svn/trunk/html5.js • Modernizr is a set of JavaScript functions that check for HTML5 (and CSS3) features and make that information available to other scripts so that polyfills can be loaded to mitigate the missing functionality</p><p> http://www.webdesigncreare.co.uk/blog/videos/cross-browser-html5.html http://www.modernizr.com/docs/ HTML5: Evolution or Revolution?</p><p>Identifying supported HTML5</p><p><!DOCTYPE HTML> <html class="no-js"></p><p><head> <title>Discovering HTML5 features with modernizr</title> <script type="text/JavaScript" src="http://localhost/js/ modernizr.js"></script> ...</p><p> http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/ http://html5.netskills.biz/html5/static/samples/modernizr.html HTML5: Evolution or Revolution?</p><p>Definition</p><p> polyfill (n): a JavaScript shim that replicates the standard (HTML5) application programmer’s interface (API) for older browsers (http://www.modernizr.com/docs/)</p><p> https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills HTML5: Evolution or Revolution?</p><p>Developing for all browsers?</p><p>• so a variety of simulated HTML5 support can be enabled for older or non compliant browsers using scripting solutions to mimic ranges of specific HTML5 or CSS3 features • an important question is whether it is worth adopting HTML5 if it requires some additional hacking to provide mandatory support for older browsers • suggest some pros and cons... ? HTML5: Evolution or Revolution?</p><p>Including different content media</p><p>• the simplified use of video and audio elements is a popular feature of HTML5 and removes the need for tedious or confusing page source markup a number of additional advantages can also be realised, including providing a mix of formats for different platform compatibility and accommodating varying user accessibility needs or preferences • the canvas element allows graphics within the web page directly • the embed element supports external non-HTML content that can typically be presented using a plugin application, if available HTML5: Evolution or Revolution?</p><p>Embedded content related elements</p><p> represents an a resolution-dependent bitmap audio stream canvas, which can be used for dynamically rendering images no change changed suchnew as game graphics, graphs, or other images area audio iframe canvas img an integration point embed for external content enables multiple media map source sources to be specified for audio and video elements object enables supplementary media track param tracks such as subtitle tracks and video caption tracks to be specified for audio and video elements represents a video or movie HTML5: Evolution or Revolution?</p><p>Simple audio and video</p><p> http://html5.netskills.biz/html5/static/samples/media.html HTML5: Evolution or Revolution?</p><p>Sample HTML5—media playback</p><p><video width="240" height="427" controls autoplay preload=”auto” loop <videoposter=”../image/mungeo.jpg” width="240" height="427"> controls autoplay preload=”auto” loop <video width="240" height="427" controls> poster=”../image/mungeo.jpg”<source src=”../video/boat.mp4”> type=”video/mp4”> <source src=”../video/boat.mp4” type=”video/mp4”> <source src=”../video/boat.mp4”src=”../video/boat.ogg” type=”video/mp4”>type=”video/ogg”> <video<source src="../video/boat.mp4" src=”../video/boat.ogg” width="240" type=”video/ogg”> height="427"> <source<track kind="captions"src=”../video/boat.ogg” src="boat.vtt" type=”video/ogg”> srclang="en" label="Text </video> </video>captions"> </video> <audio controlssrc="../audio/birds.mp3">> <audio controls preload=”auto”> </audio><source src="../audio/birds.mp3" type=”audio/mp3”> <audio<source controls src="../audio/birds.mp3" preload=”auto”> type=”audio/mp3”> <source src="../audio/birds.m4a" type=”audio/m4a”> <source src="../audio/birds.m4a"src="../audio/birds.mp3" type=”audio/m4a”>type=”audio/mp3”> </audio> </audio><source src="../audio/birds.m4a" type=”audio/m4a”> </audio> HTML5: Evolution or Revolution?</p><p>Example using Captionator polyfill</p><p>WEBVTT FILE</p><p>1 00:00:03.500 --> 00:00:05.000 A:start Nothing like a life on the ocean wave</p><p>2 00:00:06.000 --> 00:00:09.000 A:start Especially when there's a bit of a swell... or as some people say <i>it's lumpy</i></p><p> http://www.whatwg.org/specs/web-apps/current-work/webvtt.html https://github.com/cgiffard/Captionator/ HTML5: Evolution or Revolution?</p><p>Example using Captionator polyfill</p><p><!DOCTYPE html> <html></p><p><head> <meta charset="utf-8" /> <title>Demo site for showcasing some structure and video and audio elements</title> <script type="text/JavaScript" src="../js/captionator.js"> </script> <script type="text/JavaScript"> window.addEventListener ("load", function (eventData) { captionator.captionify (); }); </script> <style type="text/css" src="../css/captions.css"></style> </head> HTML5: Evolution or Revolution?</p><p>Example using Captionator polyfill</p><p><section id="video"> <figure> <video width="240" height="427" controls> <source src="../video/boat.mp4" type="video/mp4" /> <track kind="captions" src="boat.vtt" srclang="en" label="Text captions" default> </video> <figcaption>Filmed at Bangor harbour, County Down, 2010 and the first video I shot with my iPhone4—I was impressed</figcaption> </figure> </section> HTML5: Evolution or Revolution?</p><p>Example using Captionator polyfill</p><p> http://html5.netskills.biz/html5/static/samples/track.html http://html5.netskills.biz/html5/static/samples/boat.vtt HTML5: Evolution or Revolution?</p><p>Audio and video related HTML5 support</p><p> http://caniuse.com/#search=audio http://caniuse.com/#search=video HTML5: Evolution or Revolution?</p><p>Canvas • the canvas element identifies an area of a web page as an area of content of a graphical nature (interactive visual media)—it does nothing to populate the area with content until an object is created in scripts using the getContext method with context identifier to access a canvas interface • the 2d context is normally used but others (3d) are possible and currently being developed • content generation within the canvas area is then enacted by methods in the interface—typically using JavaScript • the standards discourage use of the canvas element when a more suitable HTML element is available (semantic structure)</p><p> http://developers.whatwg.org/the-canvas-element.html https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage http://www.youtube.com/watch?v=T2lBVYrtPO8 HTML5: Evolution or Revolution?</p><p>Sample HTML5—canvas template</p><p><script type="text/JavaScript"> function draw () { !var canvas = document.getElementById ('canvasArea'); !if (canvas.getContext ()) { !!var ctx = canvas.getContext ('2d'); !} } window.onload = function () { !draw (); } </script> <style type="text/css"> canvas { !border: 1px solid navy; } </style> <canvas id="canvasArea" width="748" height="200"></canvas> HTML5: Evolution or Revolution?</p><p>Some canvas drawing methods beginPath (); x: horizontal pixels from top left origin of canvas y: vertical pixels from top left origin of canvas moveTo (x, y); r: red value in RGB representation (0–255) lineTo (x, y); g: green value in RGB representation (0–255) closePath (); b: blue value in RGB representation (0–255) stroke (); a: alpha transparency (0–1) fill (); angles measure in radians rotation: anticlockwise = true, clockwise = false fillStyle = “rgba(r, g, b, a)”; cp: control point (curves) fillRect (x, y, width, height); clearRect (x, y, width, height); strokeRect (x, y, width, height); arc (x, y, radius, startAngle, endAngle, rotation); quadraticCurveTo (cp1x, cp1y, x, y); bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y); all invoked as methods of the canvas object created using getContext, e.g. ctx.beginPath () HTML5: Evolution or Revolution?</p><p>Using images with canvas x: horizontal pixels from top left origin of canvas y: vertical pixels from top left origin of canvas sx: x value for top left of image slice sy: y value for top left of image slice sWidth: width of slice sHeight: height of slice dx: x value for top left of slice display var img = new Image (); dy: y value for top left of slice display img.src = '...'; dWidth: width of slice display dHeight: height of slice display img.onload = function () { ctx.drawImage (img, x, y); ctx.drawImage (img, x, y, width, height); drawImage (img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); } HTML5: Evolution or Revolution?</p><p>Further visual controls</p><p>• further options for defining color, line style, gradients, transparency, patterns, shadow • save () and restore () methods for saving and retrieving a snapshot of all styles and transformations done • canvas can be moved to different origin using translate, rotated using rotate, scaled using scale, and transformed using transform • globalCompositeOperation specifies different layering options (composition) and clipping done with clip • animation possible by drawing and clearing and redrawing repeatedly at different positions HTML5: Evolution or Revolution?</p><p>Playing with canvas</p><p><script type="text/JavaScript"> window.onload = function () { !canvas = document.getElementById ('painting'); !ctx = canvas.getContext ('2d'); !img = new Image (); !img.src = '../image/sunflowers.jpg'; !img.onload = function () { !!!ctx.drawImage (img, 0, 0); !} } ... <canvas id="painting" width="798" height="500"></canvas></p><p> http://html5.netskills.biz/html5/static/samples/canvas.html HTML5: Evolution or Revolution?</p><p>Use graphical tools to generate Canvas code</p><p>Introducing WebCode April 8, 2013 PixelCut is proud to announce the release of WebCode, a new vector drawing app that instantly generates JavaScript Canvas, CSS HTML or SVG code. While designers focus on drawing HTML5 games, infographics or web user interfaces, WebCode automatically writes the code. Drawings will be converted to JavaScript code instantly, saving countless hours of tedious work. Most importantly, the generated code is nice, clean and readable. WebCode even lets users conveniently copy small JavaScript snippets just when they need them.</p><p> http://www.webcodeapp.com</p><p>HTML5: Evolution or Revolution?</p><p>Canvas related HTML5 support</p><p> http://caniuse.com/#search=canvas HTML5: Evolution or Revolution?</p><p>Multimedia practical • Open your web page from earlier with the text editor • Include a video element in your page—select a video file from the /video sub directory in the workshop bundle and include a poster frame using any image from the /image sub directory (feel free to experiment with other attributes also) • Include a canvas element in your page, and arrange a simple animation of a circular shape in a vertical direction under control of a button outside the canvas area, or something similar • Prepare the whole page as a simple coherent report on the HTML5 features you have used, ready for brief presentation in the next session</p><p> http://html5.netskills.biz/html5/documents/002536.pdf HTML5: Evolution or Revolution?</p><p>Summary and review</p><p>Session 3 Dealing with older browsers + media playback and the canvas element for drawing HTML5: Evolution or Revolution?</p><p>Session 4 Presentation of practical work + other HTML5 features + resources + workshop summary + Q & A HTML5: Evolution or Revolution?</p><p>Review</p><p>• Comments on anything in workshop so far, or requests for further clarifications/discussion? • What may you adopt in your work, and how useful or otherwise do you feel HTML5 may be for you? HTML5: Evolution or Revolution?</p><p>HTML5 page layout</p><p>• newspaper like page layout using CSS3 to provide multiple columns • simple HTML5 forms elements to control appearance</p><p> http://studio.html5rocks.com/#Columns HTML5: Evolution or Revolution?</p><p>Content editable HTML elements • an attempt to consolidate various proprietary in browser editing approaches over the years • ongoing work, currently option to create basic content management systems • individual elements made editable using the contenteditable attribute—set to true or false • a whole document may be made editable using the designmode document property—on or off</p><p> http://blog.whatwg.org/the-road-to-html-5-contenteditable http://html5.netskills.biz/html5/static/samples/editable.html http://developers.whatwg.org/editing.html#contenteditable HTML5: Evolution or Revolution?</p><p>Drag and drop</p><p>• use draggable attribute (set to true or false) on HTML element to indicate it is draggable • a number of drag related events defined (dragstart, drag, dragenter, dragleave, dragover, drop, dragend) • very easy to build useful interaction within web page—many options for creativity</p><p> http://www.html5rocks.com/en/tutorials/dnd/basics/ HTML5: Evolution or Revolution?</p><p>Geolocation</p><p>• not strictly part of HTML5 specification —separate W3C work • an API that allows identification of a user’s location • different sources used to obtain the user’s location wi-fi, accurate to 20m IP Geolocation, accurate to city level GPS triangulation, accurate to 10m GSM/CDMA cell IDs, accurate to 1000m</p><p> http://html5doctor.com/finding-your-position-with-geolocation/ http://www.w3.org/TR/geolocation-API/ HTML5: Evolution or Revolution?</p><p>Using geolocation with Google’s map API window.onload = function () { !var timeoutVal = 100000; !navigator.geolocation.getCurrentPosition (showPosition, handleError, {enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0}); } function showPosition (position) { !var myLocation = new google.maps.LatLng (position.coords.latitude, position.coords.longitude); !var myOptions = {zoom: 11, center: myLocation, mapTypeId: google.maps.MapTypeId.ROADMAP} !var map = new google.maps.Map (document.getElementById ("mapContainer"), myOptions); !var marker = new google.maps.Marker ({position: myLocation, title: "This is where we're at..."}); !marker.setMap (map); }</p><p> http://code.google.com/apis/maps/documentation/javascript/ HTML5: Evolution or Revolution?</p><p>Key geolocation method</p><p> the geolocation object is used by scripts to programmatically determine the location information associated with the hosting device—it is associated with the application running the scripts which is normally represented by the window.navigator object navigator.geolocation.getCurrentPosition (</p><p> successCallback, getCurrentPosition asynchronously attempts to if position obtained then obtain the current location of the device successCallback function is called errorCallback, if successful it assigns properties of the position to the coords attribute of the position object if position not obtained then options errorCallback function is called (optional) ) enableHighAccuracy attribute provides a hint that the application would like to receive the best possible results, which may result in slower response times or increased power consumption timeout attribute provides the maximum length of time (milliseconds) allowed to obtain position maximumAge attribute indicates that the application is willing to accept a cached position whose age is no greater than the specified time (milliseconds)—0 indicates implementation must immediately attempt to acquire a new position http://www.w3.org/TR/geolocation-API/#geolocation_interface HTML5: Evolution or Revolution?</p><p>CSS three dimensional transitions</p><p>• animation without any javascript—all controlled by CSS • currently available in <a href="/tags/Safari_(software)/" rel="tag">Safari</a>, Chrome, <a href="/tags/Firefox/" rel="tag">Firefox</a> and IE10 • hardware accelerated on IOS, so faster than other methods of animation</p><p> http://css3.bradshawenterprises.com/all/ http://desandro.github.com/3dtransforms/ http://www.webkit.org/blog/386/3d-transforms/ HTML5: Evolution or Revolution?</p><p>Key 3d CSS properties</p><p> distorts the appearance of objects realistically, making nearby things appear larger and distant things look smaller—specified as distance from eye to element perspective X and Y coordinates of perspective origin measured with respect to the element to which this property is assigned perspective-origin determines whether or not the back side of a transformed element is backface-visibility visible when facing the viewer transform-style value of preserve-3d presents all child elements in 3D space transform specifies a list of transformations which are combined into a transformation matrix—2D and 3D functions are available for translation, rotation, scaling animation animation involves transitioning from one CSS property (which may be a transform) to another, with optional steps (or keyframes) in between—the browser automatically interpolates between the from and to property states using supplied qualifiers such as animation-duration, animation-iteration-count, animation-timing-function</p><p> http://www.w3.org/TR/css3-3d-transforms/ http://www.w3.org/TR/css3-transitions/ http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/ HTML5: Evolution or Revolution?</p><p>Introductory tutorials</p><p>W3 schools This web site is very popular (very easily found on Google). It provides an easy to follow HTML5 primer which highlights the main new areas addressed. It has summary information for all HTML5 elements, attributes and events.</p><p> http://www.w3schools.com/html/html5_intro.asp HTML5: Evolution or Revolution?</p><p>Reference material</p><p>HTML5 Doctor This web site has an alphabetically arranged index for all the HTML5 elements. Each description usually contains further links to in depth comments or a tutorial on that element and related issues.</p><p> http://html5doctor.com/element-index/ HTML5: Evolution or Revolution?</p><p>Presentations, sample code and ideas, tutorials</p><p> http://www.html5rocks.com/ HTML5: Evolution or Revolution?</p><p>Vendor support and promotion</p><p>Apple statement relating to HTML5 Every new Apple mobile device and every new Mac—along with the latest version of Apple’s Safari web browser—supports <a href="/tags/Web_standards/" rel="tag">web standards</a> including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards are not add-ons to the web. They are the web.</p><p> http://www.apple.com/search/?q=HTML5&section=mac HTML5: Evolution or Revolution?</p><p>Online book</p><p>Dive into HTML5 Mark Pilgrim Easy to read, attractively written and illustrated and addressing all the most important aspects of HTML5 and closely related standards.</p><p> http://diveintohtml5.info http://diveinto.html5doctor.com HTML5: Evolution or Revolution?</p><p>And don’t forget...</p><p>Google and youtube.com are great sources of information for HTML5 as well as everything else in the known universe!</p><p> http://www.youtube.com/results?search_query=HTML5 HTML5: Evolution or Revolution?</p><p>Summary and review</p><p>Session 4 Review + other HTML5 features + resources + workshop summary + Q & A FormalHTML5: Evolution references or Revolution? Other features multi-column page layout HTML4 + XHTML + DOM + JavaScript + CSS + CSS selectors + content editing microdata + real-time communications + web workers + web storage + web sockets drag and drop + geolocation + indexed database + websql database + digital rights management What this course has included geolocation full W3C and WHATWG HTML5 specification 3D transitions W3C HTML5 markup language reference WHATWG HTML5 web developer edition</p><p>Deployment Basics browser compatibility JavaScript fixes Macro observations simple HTML5 document structure detecting HTML5 features with topical HTML5 validation service modernizer in-demand skill HTML5 new elements JavaScript shim solutions cool web pages including great graphics, semantics Multimedia video and more accessibility and ARIA native audio used for apps Prominent features native video device independence new form controls web video text tracks chosen platform for app development session and local storage canvas app cache helper software utilities Helpful resources client side databases HTML5: Evolution or Revolution?</p><p>Workshop outputs</p><p>• gained an appreciation of what HTML5 is and why it has been developed • understood the possibilities and limitations of HTML5 • acquired practical knowledge of using HTML5 in your own web sites • learnt how to use HTML5 with older web browsers HTML5: Evolution or Revolution?</p><p>Questions and answers ? HTML5: Evolution or Revolution?</p><p>Closing remarks</p><p>• Feedback http://www.netskills.ac.uk/content/products/workshops/feedback/index.html • Online materials http://html5.netskills.biz/ • Thank you!</p> </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = 'ff4a2cd7b4ca3aa58030245214769272'; var endPage = 1; var totalPage = 142; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/ff4a2cd7b4ca3aa58030245214769272-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html>