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.html 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/html5.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 javascript 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 Opera proposal from Mozilla 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 (Document Object Model)
• 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, Google 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. Web storage 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 web browser 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 • Flow 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 CSS presentation style
Document structure semantic markup
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
http://www.csszengarden.com/ HTML5: Evolution or Revolution?
Document structure related elements
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 links 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?
Document structure—grouping content
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
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?
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?
Document structure elements support
http://caniuse.com/#search=section HTML5: Evolution or Revolution?
Sample HTML5—semantics by structure
HTML5 document structure elements
HTML document
A few sample videos and audio
headerNothing too serious!
A few of the not so obvious reasons for having an iPhone
And some good old Drive-By Truckers music
Simple structured web page
http://html5.netskills.biz/html5/static/samples/structure.html HTML5: Evolution or Revolution?
Pleasing presentation is a bonus
Use of
http://developers.whatwg.org/urls.html#urls HTML5: Evolution or Revolution?
Best practice guidelines
http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf single platform for app match hardware and network development and deployment capabilities
Why? more accessible web pages
more functional web pages HTML5: Evolution or Revolution?
Semantics related to HTML5 elements
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.
http://developers.whatwg.org/elements.html#elements HTML5: Evolution or Revolution?
Accessibility
• 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
http://www.w3.org/WAI/intro/aria.php http://www.w3.org/TR/wai-aria-primer/ HTML5: Evolution or Revolution?
WAI ARIA landmark role attribute values
• 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
http://www.w3.org/WAI/PF/aria-practices/ http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/ HTML5: Evolution or Revolution?
Sample HTML5—semantics with ARIA role
HTML5 accessibility support
• 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
http://html5accessibility.com/ http://developers.whatwg.org/content-models.html#wai-aria HTML5: Evolution or Revolution?
New form controls
• 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?
Forms related elements
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
http://dev.w3.org/html5/markup/input.html http://developers.whatwg.org/the-input-element.html#the-input-element HTML5: Evolution or Revolution?
Sample HTML5—smarter forms
Date of birth:
Email address:
And at what time today did you realise that:
HTML5: Evolution or Revolution?
Sample HTML5—smarter forms
Estimate the percentage probability of anyone being an HTML5 expert:
HTML5: Evolution or Revolution?Form validation with HTML5
http://html5.netskills.biz/html5/static/samples/forms.html HTML5: Evolution or Revolution?
Forms related HTML5 support
http://caniuse.com/#search=input HTML5: Evolution or Revolution?
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?
Sample HTML5—simple offline storage
HTML5: Evolution or Revolution?
Sample HTML5—simple offline storage
function updatePageReport () { var footerText = '
Total pagecounts since we started: '; footerText += localStorage.pageCount + '
'; footerText += 'Total pagecounts this session: '; footerText += sessionStorage.pageCount + '
'; footerText += 'Message from last visitor: '; footerText += ''; footerText += localStorage.lastVisitorSaid + '
'; document.getElementById ('report').innerHTML = footerText; } HTML5: Evolution or Revolution?Simple offline storage
http://html5.netskills.biz/html5/static/samples/storage.html HTML5: Evolution or Revolution?
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
• 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
• 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
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?
Useful built in SQL database tools
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 programmer.
http://html5sql.com/guide.html HTML5: Evolution or Revolution?
Local offline storage HTML5 support
http://caniuse.com/#search=storage http://www.w3.org/TR/webdatabase/ HTML5: Evolution or Revolution?
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?
Summary and review
Session 2 Semantic content structure + accessibility + new form controls + local storage HTML5: Evolution or Revolution?
Session 3 Dealing with older browsers + media playback and the canvas element for drawing + practical change! HTML5 versus “native” app Issues?
security browser compatibility maturity of standard HTML5: Evolution or Revolution?
Browser HTML5 readiness tests
• 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
http://html5test.com/results.html HTML5: Evolution or Revolution?
Browser HTML5 readiness and more
• 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
http://caniuse.com/ HTML5: Evolution or Revolution?
Browser HTML5 readiness results
http://www.browserscope.org/ HTML5: Evolution or Revolution?
Using HTML5 with older browsers
• Google Chrome Frame is an Internet Explorer plug in (for versions 6–9) that renders web pages using the Google Chrome browser engine • 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
http://en.wikipedia.org/wiki/Google_Chrome_Frame http://www.google.com/chromeframe?prefersystemlevel=true HTML5: Evolution or Revolution?
HTML5 audio and video with any browser
• 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
of the web page documenthttps://github.com/etianen/html5media/wiki HTML5: Evolution or Revolution?
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
http://www.webdesigncreare.co.uk/blog/videos/cross-browser-html5.html http://www.modernizr.com/docs/ HTML5: Evolution or Revolution?
Identifying supported HTML5
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?
Definition
polyfill (n): a JavaScript shim that replicates the standard (HTML5) application programmer’s interface (API) for older browsers (http://www.modernizr.com/docs/)
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills HTML5: Evolution or Revolution?
Developing for all browsers?
• 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?
Including different content media
• 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?
Embedded content related elements
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?
Simple audio and video
http://html5.netskills.biz/html5/static/samples/media.html HTML5: Evolution or Revolution?
Sample HTML5—media playback
Example using Captionator polyfill
WEBVTT FILE
1 00:00:03.500 --> 00:00:05.000 A:start Nothing like a life on the ocean wave
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 it's lumpy
http://www.whatwg.org/specs/web-apps/current-work/webvtt.html https://github.com/cgiffard/Captionator/ HTML5: Evolution or Revolution?
Example using Captionator polyfill
Example using Captionator polyfill
Example using Captionator polyfill
http://html5.netskills.biz/html5/static/samples/track.html http://html5.netskills.biz/html5/static/samples/boat.vtt HTML5: Evolution or Revolution?
Audio and video related HTML5 support
http://caniuse.com/#search=audio http://caniuse.com/#search=video HTML5: Evolution or Revolution?
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)
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?
Sample HTML5—canvas template
HTML5: Evolution or Revolution?
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?
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?
Further visual controls
• 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?
Playing with canvas