Transcript HTML5
HTML5 and Designing a Rich Internet Experience Garth Colasurdo HSLIC Web and Applications Group [email protected] In This Presentation • • • • • HTML5 ≈ HTML 5 + CSS 3 + JavaScript Rich Internet Applications (RIA) HTML5 x 5 Caution and Progress Example and Reference Sites HTML5 ≈ HTML 5 + CSS 3 + JavaScript • HTML5 is a suite of tools for: – Markup (HTML 5) – Presentation (CSS 3) – Interaction (DOM, Ajax, APIs) • Brought on by the evolving use of the web http://slides.html5rocks.com/ A Rough History of Web Standards 91-92 93-94 HTML 1 HTML 2 95-96 97-98 99-00 HTML 4 XHTML 1 CSS 1 CSS 2 JS ECMA, DOM 01-02 05-06 07-08 09-10 11-12 13-14 HTML 5 T-less D DOM 2 03-04 Web 2.0 CSS3 Ajax HTML 5 DOM, APIs CSS 2004 WHATWG started 1996 – CSS 1 W3C Rec 2008 W3C Working Draft 1998 – CSS 2 W3C Rec 2012 (2010) W3C Candidate Rec 1999 – CSS 3 Proposed 2022 W3C Rec 2005 – CSS 2.1 W3C Candidate Rec 2001 – CSS 3 W3C Working Draft Rich Internet Applications (RIA) • • • • Space between the internet and the desktop Apps that look good and behave well Adobe Air/Flash, Java, Silverlight, Gears Availability – Anywhere a web browser is available – As a desktop widget or application – Part of a mobile application store RIA Examples 5 HTML Enhancements • • • • • HTML Forms CSS Offline applications Local storage HTML Extended • Document Flow: div, section, article, nav, aside, header, footer • Audio, Video and Embed • Canvas: paths, gradients, image manipulation, events • Microdata for semantics and enhanced search engine results (Google Rich Snippets) HTML Header Figure Navigation Section Article Footer Article Aside Image, Video, Quote, Table, etc… Footer Article Footer Legend Footer Canvas <canvas id=“canvas” width=“150” height=“150”> </canvas> function draw() { var canvas = document.getElementById(“canvas”); if (canvas.getContext) { var ctx = canvas.getContext(“2d”); ctx.fillStyle = “rgb(200,0,0)”; ctx.fillRect (10,10,55,50); ctx.fillStyle = “rgb(0,0,200)”; ctx.fillRect (30,30,55,50); } } Form Enhancements • • • • • Placeholder text Specific text input: email, URL, number, search Slider Date picker User Agent validation CSS Effects • • • • • • • • • • • Rounded corners Gradients Box and text shadows Fonts Transparencies Multiple background images and border images Multiple columns and grid layout Box sizing Stroke and outlines Animation, movement and rotation Improved selectors CSS Effect Example .amazing { border: 1px solid blue; color: red; background-color: gold; Amazing CSS Effects -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; -webkit-box-shadow: 8px 8px 6px #474747; -moz-box-shadow: 8px 8px 6px #474747; box-shadow: 8px 8px 6px #474747; text-shadow: 8px 8px 2px #595959; filter: dropshadow(color=#595959, offx=8, offy=8); } http://css3generator.com/ CSS Timelines http://mattbango.com/notebook/web-development/pure-css-timeline/ Programmer Tools • Offline Applications • Storage • Communication – Web Workers – Web Sockets • Desktop experience – Drag and Drop – Notifications • Geolocation Offline Applications <html mainfest=“http://m.health.unm.edu/someapp.manifest”> … </html> someapp.manifest CACHE MANIFEST #v1.01 #Explicitly cached files CACHE: index.html Stylesheet.css Images/logo.png NETWORK: Search.cfm Login.cfm /dynamicpages FALLBACK: /dynamicpage.cfm /static.html http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html Local Storage • Beyond cookies- local storage – – – – Manipulated by JavaScript Persistent 5MB storage per “origin” Secure (no communication out of the browser) • Session storage – Lasts as long as the browser is open – Each page and tab is a new session • Browser based SQLite or IndexedDB Local Storage • Web storage window.localStorage[‘value’] = ‘Save this!’; • Session storage sessionStorage.useLater(‘fullname’, ‘Garth Colasurdo’); alert(“Hello ” + sessionStorage.fullname); • Database storage var database = openDatabase(“Database Name”, “Database Version”); database.executeSql(“SELECT * FROM test”, function(result1) { … }); http://dev.w3.org/html5/webstorage/ User Agent Storage Cautions • Browser implementation is fragmented • Standards are in development – HTML Candidate Recommendation is scheduled for 2012 – CSS3 is in multiple drafts and proposals – ECMA-262 (edition 3) (or JavaScript 1.5) • New markup and architecture design Progress • Multiple support levels – HTML editors – CSS editors and frameworks – JavaScript libraries and frameworks • Astounding user agent development – – – – – JavaScript engines Rendering engines Device awareness Widget adoption Robust vendor competition and cooperation • Continue with progressive enhancement/graceful failure methods Advocacy Sites • Total clearing house of HTML5 (start with the presentation) http://html5rocks.com • HTML5 Watch is a list of interesting RIA advances http://html5watch.tumblr.com • CSS3 Blog http://www.css3.info Demos and Experiments • • Chrome Experiments http://www.chromeexperiments.com Apple HTML5 Showcase http://www.apple.com/html5/ • • • Canvas Demos http://www.canvasdemos.com RIA Demos with browser support listed http://html5demos.com Our Solar System http://neography.com/experiment/circles/solarsystem/ • Pure CSS3 Animated AT-AT Walker from Star Wars http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-atwalker-from-star-wars-2.html Developer Reference Sites • • • • • • W3C http://dev.w3.org/html5/html-author/ http://w3.org/TR/css3-roadmap/ W3Schools HTML 5 Reference http://www.w3schools.com/html5/ Dive Into HTML 5 (prerelease site for an O’Reilly book) http://diveintohtml5.org WebKit (Safari and Chromium) http://developer.apple.com/safari/library/navigation/ http://www.chromium/home/ Mozilla http://developer.mozilla.org/en/html/html5/ IE 8 & 9 http://msdn.microsoft.com/en-us/library/aa737439.aspx http://ie.microsoft.com/testdrive/