0. HTML5 Interactive Web Sites CS 50.12 :: Fall 2013 Instructor: Corrine Haverinen Santa Rosa Junior College Slideshow template and some content adapted from Tantek Çelik 1. Why HTML5? We're betting big on HTML 5. Vic Gundotra, Google The world is moving to HTML5. Steve Jobs, Apple The future of the web is HTML5. Dean Hachamovitch, Microsoft 2. What is HTML5? new features added to HTML markup new tags, new attributes, new ways of using them other elements on the page implemented in js, other languages interactive sites Web Applications Adobe Kuler 3. Go Beyond Just Creating Web Pages build rich, interactive web pages APIs for creating powerful web apps integration with JavaScript to make cool interfaces and animation 2D drawing with the Canvas element offline support programmable vector graphics - SVG can make use of Geolocation
4. More Advantages of HTML5 native support for video and audio - no need for plug-ins new forms capabilities store a lot of data locally in the browser adds structure to pages - helps with accessibility, syndication error handling is improved simplification, cleanup and fixes to HTML4 and XHTML new CSS 3 used with HTML5 - advanced selectors, animations, drop shadows, rounded corners 5. Switch to HTML5 NOW take advantage of new features increased connection between JavaScript and the browser brings much more functionality to the browser reduces need for 3rd party plugins more capable mobile authoring tool browser support is improving quickly, solutions for older browsers 6. HTML5 Adoption in Browsers August 2012-75% of users in North America and 83% in Europe running HTML5-enabled Web browsers IE 10 released in 2012 supporting most HTML5 features HTML5test.com - browser support of HTML5 Caniuse.com - browser support of HTML5, CSS3 by feature 7. HTML5 Standards HTML: The Living Standard HTML5 is on track to be a recommendation by end of 2014 W3C HTML5 2014 Delivery Plan HTML 5.0 HTML 5.1 HTML 5.2 2012 2013 2014 2015 2016 Candidate Rec 1st Working Draft Call for Review Recommendation Last Call Candidate Rec 1st Working Draft Recommendation
8. Examples (earlier) molecules edge detection Tron The Shodo Endless Mural Hands-on: border radius 9. Examples (more recent) Top 10 Best HTML5 Websites of 2013 The top 20 HTML5 sites of 2012 2011 in review: 20 HTML5 sites that changed the game 10. Evolution of HTML5 Over 20 years of evolution since 1990 HTML 2 3 3.2 4 4.01 XML XHTML1 1.1 1SE 2 Web Forms 2 Web Apps 1 HTML5 XHTML 2 diverged from the Web 11. HTML5 is Born Great Web Schism of 2004 microformats and WHATWG standards groups 5 recent years of heated divergence HTML4 + XHTML1 evolved into Web Apps / HTML5 2009 W3C dropped XHTML2 to focus on HTML5
12. What HTML5 can I use? Parts of HTML5 are: dependable now roughly usable unfortunately awkward interesting but ignorable worthy of web application experiments 13. HTML5: DOCTYPE - Dependable XHTML 1.0 STRICT DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> HTML5 DOCTYPE <!DOCTYPE html> 14. HTML5: meta charset Old meta http-equiv charset <meta http-equiv="content-type" content="text/html; charset=utf-8"> Simpler meta charset <meta charset="utf-8"> 15. HTML5: stylesheet declaration Old version <link rel="stylesheet" href="css/content.css" type="text/css" media="screen" /> HTML5 version, do not need a type attribute <link rel="stylesheet" href="css/content.css" media="screen" />
16. Simple HTML5 Document <!DOCTYPE html> <meta charset="utf-8"> <title>always Title Your Documents</title> <p>your exciting new stuff</p> That's it! What about <html> <head> <body> tags? 17. Dependable: XHTML compatibility Self-close empty HTML4 tags, e.g. <br/> <embed/> <hr/> <img/> <input/> <link/> <meta/> Always use quoted attribute values <img src=photo1.jpg> <img src="photo1.jpg"/> Explicit tags for a consistent DOM <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>... </title> </head> <body>... </body> </html> <table> <tbody> <tr> <td>... </td> </tr> </tbody> </table> 18. To Remain Strict or Not? It's Up to You
19. What Else is New Error handling - 900 pages Semantics & Structure New structural elements to section documents section article aside header hgroup nav footer 20. More New Elements <audio> <video> <source> <canvas> <command> <datagrid> <datatemplate> <details> <dialog> <embed> <figcaption> <figure> <keygen> <mark> <meter> <nest> <output> <progress> <ruby> <rb> <rt> <rule> <summary> <time> 21. Dependable HTML5: New Semantics <section> - thematic grouping of content <header> - intro/nav/headings <nav> - navigation links <footer> - info about section, author, copyright 22. Dependable HTML5: New Semantics <article> - self-contained post, news, comment also a special type of <section> <aside> - tangential content, side comments <hgroup> - related multilevel headings
23. Outline Model Viewing web page as an outline Use header tags to add structure H1 tags for articles - use more than one H1 tag on a page 24. DOM - Document Object Model A map of all the elements that make up your Web page. An interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. 25. How HTML5 Works HTML = structure, defines objects CSS = presentation, styles objects JavaScript = behavior, changes objects browser loads a document (HTML, CSS) creates DOM JS interacts with the page through the DOM makes use of APIs audio, video, etc.
26. Remove Presentational Markup PRESENTATIONAL MARKUP <basefont> <big> <font> <tt> <s> <strike> <u> <center> and align=center align=left, right or justify on <div> align=left or align=right on <img> <body text link alink vlink> <body background> bgcolor attribute border attribute adn <table frame rules> CSS REPLACEMENT font properties text-decoraton text-align:center and margin:auto text-align:left, right, justify float:left and float:right color property and :link, :visited, :active psuedo classes background-image background-color border properties 27. Remove Presentational Markup PRESENTATIONAL MARKUP <table cellspacing> <table cellpadding> <br clear> hspace, vspace, marginheight, margin width <hr noshade size> nowrap attribute valign attribute height and width attributes <plaintext> CSS REPLACEMENT border-spacing padding on the table cells (<th> and <td>) themselves clear margin properties border-style:sold and border-width white-space:nowrap vertical-align height and width properties No CSS for this. Use <pre>
28. Remove Failed Features FAILED HTML 4 FEATURE <img longdesc> <frameset> <frame> <html version> <meta scheme> rev attribute USE THIS INSTEAD use a visible description or link to one <iframe> nothing, just drop the version attribute avoid all invisible metadata, add microformats to visible content use rel microformats instead 29. Obsolete Markup REMOVED HTML 4 FEATURE HTML5 REPLACEMENT <acronym> <abbbr> <applet> <object> <dir> <ul> <a name="top"></a> <div id="top">... </div> <img name="i1"> <img id="i1" />