HTML5 and Designing a Rich Internet Experience

1
HTML5 and Designing a Rich Internet Experience

• Garth Colasurdo
• HSLIC Web and Applications Group
• gcolasurdo_at_salud.unm.edu

2
In This Presentation

• HTML5 HTML 5 CSS 3 JavaScript
• Rich Internet Applications (RIA)
• HTML5 x 5
• Caution and Progress
• Example and Reference Sites

3
(No Transcript)
4
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/
5
A Rough History of Web Standards
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
HTML 5
CSS
2004 WHATWG started
2008 W3C Working Draft
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 Draft
6
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

7
RIA Examples
8
5 HTML Enhancements

• HTML
• Forms
• CSS
• Offline applications
• Local storage

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

10
HTML
Header
Figure
Navigation
Image, Video, Quote, Table, etc
Aside
Section
Article
Footer
Article
Footer
Article
Footer
Legend
Footer
11
Canvas

• ltcanvas idcanvas width150 height150gt
• lt/canvasgt
• 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)

12
Form Enhancements

• Placeholder text
• Specific text input email, URL, number, search
• Slider
• Date picker
• User Agent validation

13
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

14
CSS Effect Example

• .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(color595959, offx8,
  offy8)

Amazing CSS Effects
http//css3generator.com/
15
CSS Timelines
http//mattbango.com/notebook/web-development/pure
-css-timeline/
16
Programmer Tools

• Offline Applications
• Storage
• Communication
• Web Workers
• Web Sockets
• Desktop experience
• Drag and Drop
• Notifications
• Geolocation

17
Offline Applications

• lthtml mainfesthttp//m.health.unm.edu/someapp.ma
  nifestgt
• lt/htmlgt

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
someapp.manifest
http//www.whatwg.org/specs/web-apps/current-work/
multipage/offline.html
18
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

19
Local Storage

• Web storagewindow.localStoragevalue Save
  this!
• Session storagesessionStorage.useLater(fullname
  , Garth Colasurdo)alert(Hello
  sessionStorage.fullname)
• Database storagevar database
  openDatabase(Database Name, Database
  Version)database.executeSql(SELECT FROM
  test, function(result1) )

http//dev.w3.org/html5/webstorage/
20
User Agent Storage
21
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

22
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

23
Advocacy Sites

• Total clearing house of HTML5 (start with the
  presentation)http//html5rocks.com
• HTML5 Watch is a list of interesting RIA
  advanceshttp//html5watch.tumblr.com
• CSS3 Bloghttp//www.css3.info

24
Demos and Experiments

• Chrome Experimentshttp//www.chromeexperiments.co
  m
• Apple HTML5 Showcase http//www.apple.com/html5/
• Canvas Demoshttp//www.canvasdemos.com
• RIA Demos with browser support listedhttp//html5
  demos.com
• Our Solar Systemhttp//neography.com/experiment/c
  ircles/solarsystem/
• Pure CSS3 Animated AT-AT Walker from Star Wars
  http//blog.optimum7.com/anthony/website-design/pu
  re-css3-animated-at-at-walker-from-star-wars-2.htm
  l

25
Developer Reference Sites

• W3Chttp//dev.w3.org/html5/html-author/http//w3
  .org/TR/css3-roadmap/
• W3Schools HTML 5 Referencehttp//www.w3schools.co
  m/html5/
• Dive Into HTML 5 (prerelease site for an OReilly
  book)http//diveintohtml5.org
• WebKit (Safari and Chromium)http//developer.appl
  e.com/safari/library/navigation/http//www.chromi
  um/home/
• Mozillahttp//developer.mozilla.org/en/html/html5
  /
• IE 8 9http//msdn.microsoft.com/en-us/library/a
  a737439.aspxhttp//ie.microsoft.com/testdrive/