HTML5 and Designing a Rich Internet Experience

(1)

HTML5 and Designing a Rich Internet Experience

Garth Colasurdo

HSLIC Web and Applications Group

gcolasurdo@salud.unm.edu

(2)

•

Garth Colasurdo

•

HSLIC Web and Applications Group

•

gcolasurdo@salud.unm.edu

HTML5 and Designing a

Rich Internet Experience

(3)

•

HTML5 ≈ HTML 5 + CSS 3 + JavaScript

•

Rich Internet Applications (RIA)

•

^{HTML5 x 5}

•

Caution and Progress

•

Example and Reference Sites

In This Presentation

(4)

(5)

•

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

HTML5 ≈ HTML 5 + CSS 3 + JavaScript

http://slides.html5rocks.com/

(6)

91-

92 93-

94 95-

96 97-

98 99-

00 01-

02 03-

04 05-

06 07-

08 09-

10 11-

12 13- 14

HTML 1 HTML 2 HTML 4 XHTML

1 HTML 5

CSS 1 CSS 2 T-less D Web

2.0 CSS3

JS ECMA,

DOM DOM 2 Ajax DOM,

APIs

A Rough History of Web Standards

2004 WHATWG started 2008 W3C Working Draf 2012 (2010) W3C Candidate Rec

2022 W3C Rec

1996 – CSS 1 W3C Rec 1998 – CSS 2 W3C Rec 1999 – CSS 3 Proposed

2005 – CSS 2.1 W3C Candidate Rec 2001 – CSS 3 W3C Working Draf

HTML 5 CSS

(7)

•

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

Rich Internet Applications

(RIA)

(8)

RIA Examples

(9)

•

^HTML

•

^Forms

•

^CSS

•

Offline applications

•

Local storage

5 HTML Enhancements

(10)

•

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 Extended

(11)

HTML

Header Navigation

Aside

Footer

Section Article

Footer

Article

Footer

Article

Footer

Figure

Image, Video, Quote, Table, etc…

Legend

(12)

</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);

} }

Canva

s

(13)

•

Placeholder text

•

Specific text input: email, URL, number, search

•

Slider

•

Date picker

•

User Agent validation

Form Enhancements

(14)

• 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

Effects

(15)

.amazing {

border: 1px solid blue;

color: red;

background-color: gold;

-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);

}

CSS Effect Example

Amazing Amazing CSS Effects CSS Effects

http://css3generator.com/

(16)

CSS Timelines

http://mattbango.com/notebook/web-development/pure-css-timeline/

(17)

• Offline Applications

• ^Storage

• Communication

– Web Workers – Web Sockets

• Desktop experience

– Drag and Drop – Notifications

• Geolocation

Programmer Tools

(18)

…

</html>

Offline Applications

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

(19)

• 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

(20)

• 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) { …

});

Local Storage

http://dev.w3.org/html5/webstorage/

(21)

User Agent Storage

(22)

• Browser implementation is fragmented

• Standards are in development

– HTML Candidate Recommendation is scheduled for 2012

– CSS3 is in multiple drafs and proposals – ECMA-262 (edition 3) (or JavaScript 1.5)

• New markup and architecture design

Cautions

(23)

• 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

Progress

(24)

•

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

Advocacy Sites

(25)

• 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

https://www.optimum7.com/internet-marketing/design/pure- css3-animated-at-at-walker-from-star-wars.html

Demos and Experiments

(26)

• 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/

Developer Reference Sites

(27)

HTML5 and Designing a Rich Internet Experience

HTML5 and Designing a Rich Internet Experience

Garth Colasurdo

HSLIC Web and Applications Group

gcolasurdo@salud.unm.edu

•

•

•

HTML5 and Designing a

Rich Internet Experience

•

•

•

•

•

In This Presentation

•

– Markup (HTML 5) – Presentation (CSS 3)

– Interaction (DOM, Ajax, APIs)

•

HTML5 ≈ HTML 5 + CSS 3 + JavaScript

A Rough History of Web Standards

•

•

•

•

– Anywhere a web browser is available – As a desktop widget or application – Part of a mobile application store

Rich Internet Applications

(RIA)

RIA Examples

•

•

•

•

•

5 HTML Enhancements

•

•

•

•

HTML Extended

HTML

Canva

s

•

•

•

•

•

Form Enhancements

CSS

Effects

CSS Effect Example

Amazing Amazing CSS Effects CSS Effects

Amazing Amazing CSS Effects CSS Effects

CSS Timelines

• Offline Applications

• Storage

• Communication

• Desktop experience

• Geolocation

Programmer Tools

Offline Applications

• Beyond cookies- local storage

• Session storage

• Browser based SQLite or IndexedDB

Local Storage

Local Storage

User Agent Storage

• Browser implementation is fragmented

• Standards are in development

– HTML Candidate Recommendation is scheduled for 2012

– CSS3 is in multiple drafs and proposals – ECMA-262 (edition 3) (or JavaScript 1.5)

• New markup and architecture design

Cautions

Progress

•

•

•

Advocacy Sites

• ^Storage