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.