You are on page 1of 25

HTML5 and Designing a

Rich Internet Experience
Garth Colasurdo
HSLIC Web and Applications
Group
gcolasurdo@salud.unm.edu

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.com/ . Ajax.html5rocks. APIs) • Brought on by the evolving use of the web http://slides.

0 CSS3 Ajax DOM.1 W3C Candidate Rec 2001 – CSS W3C Working 1314 . APIs CSS 1996 – CSS W3C Rec 1 1998 – CSS 2 W3C Rec 1999 – CSS 3 Proposed 2005 – CSS 2.A Rough History of Web Standards 9192 HTML 1 9394 9596 HTML 2 2004 2008 9798 HTML 4 CSS 1 CSS 2 JS ECMA. DOM 9900 0102 0304 0506 XHTML 1 DOM 2 HTML 5 WHATWG started 2012 (2010) W3C Candidate Rec 2022 W3C Rec 0910 1112 HTML 5 T-less D W3C Working Draft 0708 Web 2.

Gears • Availability – Anywhere a web browser is available – As a desktop widget or application – Part of a mobile application store .Rich Internet Applications (RIA) • Space between the internet and the desktop • Apps that look good and behave well • Adobe Air/Flash. Silverlight. Java.

RIA Examples .

5 HTML Enhancements • • • • • HTML Forms CSS Offline applications Local storage .

header.HTML Extended • Document Flow: div. nav. Video and Embed • Canvas: paths. image manipulation. events • Microdata for semantics and enhanced search engine results (Google Rich Snippets) . footer • Audio. gradients. article. aside. section.

Table.HTML Header Figure Navigation Section Article Footer Asid e Article Image. Video. Quote. etc… Footer Article Footer Legend Footer .

fillRect (30.0. if (canvas.50). } } .getElementById(“canvas”).Canvas <canvas id=“canvas” width=“150” height=“150”> </canvas> function draw() { var canvas = document.fillRect (10.0)”.fillStyle = “rgb(200.55.getContext(“2d”).getContext) { var ctx = canvas.0.55. ctx.10.fillStyle = “rgb(0. ctx.50). ctx.200)”. ctx.30.

number.Form Enhancements • Placeholder text • Specific text input: email. URL. search • Slider • Date picker • User Agent validation .

movement and rotation Improved selectors .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.

-moz-box-shadow: 8px 8px 6px #474747. filter: dropshadow(color=#595959. } http://css3generator. color: red. background-color: gold. offy=8). -webkit-box-shadow: 8px 8px 6px #474747.amazing { border: 1px solid blue. border-radius: 40px. offx=8. -moz-border-radius: 40px. text-shadow: 8px 8px 2px #595959. Amazing Amazing CSS CSS Effects Effects -webkit-border-radius: 40px.com/ . box-shadow: 8px 8px 6px #474747.CSS Effect Example .

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 .

org/specs/web-apps/current-work/multipage/offline.manifest CACHE MANIFEST #v1.cfm Login.whatwg.cfm /dynamicpages FALLBACK: /dynamicpage.css Images/logo.unm.manifest”> … </html> someapp.html .cfm /static.01 #Explicitly cached files CACHE: index.edu/someapp.health.html Stylesheet.Offline Applications <html mainfest=“http://m.png NETWORK: Search.html http://www.

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 • Beyond cookies.

• Session storage sessionStorage.localStorage[‘value’] = ‘Save this!’. function(result1) { … }). • Database storage var database = openDatabase(“Database Name”. “Database Version”). ‘Garth Colasurdo’).w3.useLater(‘fullname’. http://dev. alert(“Hello ” + sessionStorage. database.executeSql(“SELECT * FROM test”.fullname).org/html5/webstorage/ .Local Storage • Web storage window.

User Agent Storage .

5) • New markup and architecture design .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.

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.info .css3.com • CSS3 Blog http://www.com • HTML5 Watch is a list of interesting RIA advances http://html5watch.tumblr.

canvasdemos.com Apple HTML5 Showcase http://www.Demos and Experiments • • Chrome Experiments http://www.com RIA Demos with browser support listed http://html5demos.apple.com/anthony/website-design/pure-css3-anima ted-at-at-walker-from-star-wars-2.com Our Solar System http://neography.html .optimum7.chromeexperiments.com/experiment/circles/solarsystem/ • Pure CSS3 Animated AT-AT Walker from Star Wars http://blog.com/html5/ • • • Canvas Demos http://www.

com/safari/library/navigation/ http://www.com/testdrive/ .com/en-us/library/aa737439.w3schools.chromium/home/ Mozilla http://developer.aspx http://ie.org/html5/html-author/ http://w3.microsoft.com/html5/ Dive Into HTML 5 (prerelease site for an O’Reilly book) http://diveintohtml5.org/TR/css3-roadmap/ W3Schools HTML 5 Reference http://www.mozilla.apple.Developer Reference Sites • • • • • • W3C http://dev.microsoft.org/en/html/html5/ IE 8 & 9 http://msdn.w3.org WebKit (Safari and Chromium) http://developer.