Dissertation on HTML5, CSS3 and Adobe Flash performed from July to December 2010 while doing an MSc in Computer Science at Staffordshire University, England this pdf includes the bibliography and appendixes missing in the main report available here: http://www.slideshare.net/charlet_jeremie/can-html5-css3-kill-flash/

1. 1 Bibliography
.Net
Magazine
2010,
‘Web
Design
for
mobile!
.
Net
Magazine,
01
September,
pp.47-­‐51.
Abhijeet
Bhattacharya,
K,
S
2007,
‘Memory
leak
patterns
in
JavaScript
,
From
IBM
DeveloperWorks
<http://www.ibm.com/developerworks/web/library/wa-­‐
memleak/>
Adobe
nd,
‘Products’,
accessed
15
October
2010
from
Adobe
<http://www.adobe.com/products/>
ADOBE 2009, ‘Photoshop online’, accessed 15 December 2009 from
<www.photoshop.com>
ADOBE 2009, ‘Learn Flash CS4 Professional’, in Adobe Developer Connection,
accessed 15 December 2009 from
<http://www.adobe.com/devnet/flash/learning.html>
Adobe
2010,
‘Flash
penetration
Rate,
From
Adobe
products
<http://www.adobe.com/products/player_census/flashplayer/>
Adobe
2010,
‘Flash
platform
Runtimes,
From
Adobe
products
<http://www.adobe.com/products/flashplatformruntimes/>
Alexa
2010,
‘Youtube’,
accessed
23-­‐09
from
Alexa
<http://www.alexa.com/siteinfo/youtube.com>
Allaire,
J
2010,
‘The
Future
of
Web
Content
–
HTML5,
Flash
&
Mobile
Apps,
From
Tech
Crunch
<http://techcrunch.com/2010/02/05/the-­‐future-­‐of-­‐web-­‐content-­‐
html5-­‐flash-­‐mobile-­‐apps/>
Apple nd, ‘Photo Transitions’, accessed 15 October 2010 from Safari Technology
Demos <http://developer.apple.com/safaridemos/photo-transitions.php>
Arah,
T
2009,
‘Flash
penetration
<the
truth,
From
PC
Pro
<http://www.pcpro.co.uk/blogs/2009/02/27/flash-­‐penetration-­‐the-­‐truth/>
Arvidsson,
E
2010,
‘Explorer
Canvas
Overview’,
accessed
14
October
2010
from
Explorer
Canvas
<http://excanvas.sourceforge.net/>
Ates,
F
2010,
‘Modernizr’,
accessed
28
October
2010
from
Modernizr
<http://www.modernizr.com/>
CALZADILLA,
A
2010,
‘Pure
CSS3
Spiderman
Cartoon
w/
jQuery
and
HTML5
–
Look
Ma,
No
Flash!
Accessed
15
October
2010
from
Optimum
7
<http://www.optimum7.com/internet-­‐marketing/web-­‐development/pure-­‐css3-­‐
spiderman-­‐ipad-­‐cartoon-­‐jquery-­‐html5-­‐no-­‐flash.html>
MSc Dissertation - Jérémie Charlet – CW002436 0

2. Charlet,
J
2010,
‘Canvas
<Solar
System’,
accessed
15
October
2010
from
HTML5
and
CSS3
Experiments
<http://experiments.jcharlet.com/pages/test/solarSystem_Canvas.html>
Charlet,
J
2010,
‘Home’,
accessed
15
October
2010
from
HTML5
and
CSS3
Experiments
<experiments.jcharlet.com>
CHERNY, R 2009, ‘HTML 5 starts looking real’, InformationWeek <analytics, 31
August, pp.35-38.
Chewing
Com
2010,
‘BMW
Cinetique’,
accessed
15
October
2010
from
TheFWA
<http://www.thefwa.com/site/bmw-­‐cin-­‐tique-­‐/c=SOTM>
Cold
Hard
Flash
2005,
‘The
Kenn
Commandments,
Part
1,
An
interview
with
Kenn
Navarro,
co-­‐creator
of
"Happy
Tree
Friends",
From
Cold
Hard
Flash
<http://coldhardflash.com/2005/04/kenn-­‐commandments-­‐part-­‐1.html>
Cold
Hard
Flash
2005,
‘The
Kenn
Commandments,
Part
2,
An
interview
with
Kenn
Navarro,
co-­‐creator
of
"Happy
Tree
Friends",
From
Cold
Hard
Flash
<http://coldhardflash.com/2005/04/kenn-­‐commandments-­‐part-­‐2.html>
Computer
Literacy
nd,
‘Macromedia
Flash
Version
Release
History’,
accessed
15
October
2010
from
Computer
Literacy
<http://www.computerliteracy.co.uk/flash_versions.htm>
David,
M
2003,
‘Online
Games
Development
in
Flash
-­‐
A
Brief
History’,
accessed
15
October
2010
from
Sitepoint
<http://articles.sitepoint.com/article/flash-­‐
brief-­‐history>
Deep
Blue
Sky
2010,
‘HTML5
AND
CSS3
SUPPORT’,
accessed
13
November
2010
2010
from
findmebyip
<http://www.findmebyip.com/litmus/>
Dreamingwell.com
2010,
‘Rich
Internet
Applications
Statistics’,
accessed
13-­‐08
from
RiaStats
<www.riastats.com>
DEUTSCH, S 2009, ‘HTML5 Canvas Experiment’, in IO.9elements.com, accessed
15 December 2009 from <http://9elements.com/io/?p=153>
Deveria,
A
2010,
‘Compatibility
tables
for
support
of
HTML5,
CSS3,
SVG
and
more
in
desktop
and
mobile
browsers’,
accessed
20
October
2010
from
When
can
I
use...
<http://caniuse.com/>
Enjin
Inc
2008,
‘The
eco
zoo’,
accessed
15
October
2010
from
The
FWA
<http://www.thefwa.com/site/the-­‐eco-­‐zoo/c=SOTYPCA>
F1LT3R
nd,
‘UI
Dial
With
Snaps’,
accessed
12
October
2010
from
Processing.js
Samples
<http://bocoup.com/processing-­‐
js/docs/?page=UI%20Dial%20with%20Snaps>
Firth,
D
nd,
‘Interview
with
Salad
Fingers
Creator
David
Firth’,
accessed
15
October
2010
from
Semantikon
<http://www.semantikon.com/RESaladFingers.htm>

3. FWA
2010,
‘Introduction’,
accessed
14
October
2010
from
the
FWA
<http://www.thefwa.com/about>
Gallagher,
N
nd,
‘Pure
CSS
speech
bubbles’,
accessed
15
October
2010
from
Pure
CSS
speech
bubbles
<http://nicolasgallagher.com/pure-­‐css-­‐speech-­‐
bubbles/demo/>
gartner
2010,
‘Gartner
Says
Worldwide
Mobile
Phone
Sales
Grew
35
Percent
in
Third
Quarter
2010;
Smartphone
Sales
Increased
96
Percent’,
accessed
20
November
2010
from
gartner
<http://www.gartner.com/it/page.jsp?id=1466313>
Gaudino,
E
2005,
‘Salad
Fingers’
Stream
Of
Consciousness
Entertains
Viewers’,
accessed
15
October
2010
from
The
daily
Campus
<http://www.dailycampus.com/2.7437/salad-­‐fingers-­‐stream-­‐of-­‐consciousness-­‐
entertains-­‐viewers-­‐1.1062606>
Gay,
J
nd,
‘The
history
of
Flash’,
accessed
15
October
2010
from
Adobe
showcase
<http://www.adobe.com/macromedia/events/john_gay/index.html>
Goodby
2010,
‘Battle
of
Cheetos’,
accessed
15
October
2010
from
theFWA
<http://www.thefwa.com/site/battle-­‐of-­‐the-­‐cheetos/c=SOTM>
Goodby
2007
20-­‐03,
‘Get
the
glass’,
accessed
15
October
2010
from
The
FWA
<http://www.thefwa.com/site/get-­‐the-­‐glass-­‐/c=SOTYPCA>
Google
2008,
‘Multi
Process
Architecture,
From
The
Chromium
Projects
<http://dev.chromium.org/developers/design-­‐documents/multi-­‐process-­‐
architecture>
GOOGLE 2009, Google Docs’, accessed 15 December 2009 from
<http://docs.google.com>
GOOGLE 2009, ‘Explorer Canvas’, in Google Code, accessed 15 December 2009
from <http://excanvas.sourceforge.net/ >
Google
2010,
‘Chromabrush’,
accessed
16
October
2010
from
Chromabrush
<http://www.chromabrush.com/>
graph.tk
nd,
‘graphtk
an
online
and
open-­‐source
graphing
utilli’,
accessed
15
October
2010
from
graph.tk
<http://graph.tk/>
Grigsby,
J
2009,
‘HTML5
from
a
mobile
perspective’,
accessed
13
November
2010
from
Cloud
Four
<http://www.cloudfour.com/html5-­‐from-­‐a-­‐mobile-­‐
perspective/>
Gyulabo
nd,
‘3D
on
2D
Canvas
Demo’,
accessed
12
October
2010
from
Gyulabo
<http://gyu.que.jp/jscloth/>
HAROLD, E 2007, ‘New elements in HTML 5’, in IBM Developer Works, accessed
15 December 2009 from < http://www.ibm.com/developerworks/library/x-html5/ >
Haustein,
S
2010,
‘Quake
2
WGT
Port’,
accessed
21
November
2010
from
Google
Code
<http://code.google.com/p/quake2-­‐gwt-­‐port/>

4. Hickson,
I
2009,
‘Interview
with
Ian
Hickson,
editor
of
the
HTML5
specification’,
accessed
09
October
2010
from
Web
Standards
<http://www.webstandards.org/2009/05/13/interview-­‐with-­‐ian-­‐hickson-­‐
editor-­‐of-­‐the-­‐html-­‐5-­‐specification/>
HICKSON, I 2008, ‘HTML 5 Demos from September 2008’, in WHATWG Website,
accessed 15 December 2009 from <http://www.whatwg.org/demos/2008-sept/>
Hutt,
T
nd,
‘a
canvas
slippy
map’,
accessed
14
October
2010
from
Concentric
Livers
<http://concentriclivers.com/slippymap.html>
ICO
partners
2009
04-­‐10,
‘KGC09
Online
Games
market
in
Europe
‘,
accessed
15
October
2010
from
Slideshare
<http://www.slideshare.net/ICOPartners/kgc09-­‐
online-­‐games-­‐market-­‐in-­‐europe>
Jobs,
S
2010,
‘Thoughts
on
Flash,
From
Apple
hotnews
<http://www.apple.com/hotnews/thoughts-­‐on-­‐flash/>
Joffe,
B
2005,
‘Canvascape
-­‐
"3D
Walker"‘,
accessed
14
October
2010
from
Ben
Joffe
<http://www.benjoffe.com/code/demos/canvascape/>
Joffe,
B
nd,
‘Earth
3D
Canvas’,
accessed
13
October
2010
from
Ben
Joffe
<http://www.benjoffe.com/code/demos/earth/>
Jobs,
S
2010
04,
‘Thoughts
on
Flash,
From
Apple
hotnews
<http://www.apple.com/hotnews/thoughts-­‐on-­‐flash/>
Kjaer,
M
2009,
‘HTML
5
and
CSS
3
<The
Techniques
You’ll
Soon
Be
Using’,
accessed
15
October
2010
from
nets
tuts+
<http://net.tutsplus.com/tutorials/html-­‐css-­‐techniques/html-­‐5-­‐and-­‐css-­‐3-­‐the-­‐
techniques-­‐youll-­‐soon-­‐be-­‐using/>
Kokokaka
2010,
‘Blue
Bell
Jeans’,
accessed
15
October
2010
from
TheFWA
<http://www.thefwa.com/site/wrangler-­‐blue-­‐bell-­‐spring-­‐summer/c=SOTM>
Khronos
Group
2010,
‘WebGL
-­‐
OpenGL
ES
2.0
for
the
Web’,
accessed
14
October
2010
from
Khronos
Group
<http://www.khronos.org/webgl/>
KRILL, P 2009, ‘HTML 5 <Could it kill Flash and Silverlight’, in Computer World
Develoment, accessed 15 December 2009 from
<http://www.computerworld.com/s/article/9134422/HTML_5_Could_it_kill_Flash_a
nd_Silverlight_?taxonomyId=11&intsrc=kc_feat&taxonomyName=development>
Lawson,
B
2010,
‘A
minimal
HTML5
document’,
accessed
15
October
2010
from
Bruce
Lawson's
personal
Site
<http://www.brucelawson.co.uk/2010/a-­‐
minimal-­‐html5-­‐document/>
LAWSON, B 2009, ‘Archive for the HTML 5 Category’, in Bruce Lawson Blog,
accessed 15 December 2009 from
<http://www.brucelawson.co.uk/category/accessibility-web-standards/html5/>
LAWSON, B 2009,’The future of HTML 5’, in Vimeo, accessed 15 December 2009
from <http://www.brucelawson.co.uk/category/accessibility-web-standards/html5/>

5. Lipsman,
A
2010,
‘Flash
and
Rich
Media
Ads
Represent
40
Percent
of
U.S,
Online
Display
Ad
Impressions
‘,
accessed
15
October
2010
from
comScore
<http://www.comscore.com/Press_Events/Press_Releases/2010/6/Flash_and_
Rich_Media_Ads_Represent_40_Percent_of_U.S._Online_Display_Ad_Impressions>
Lovell,
N
2010,
‘ARROGANT,
SNOBBISH
AND
ELITIST
–
WHY
ATTITUDES
TO
ZYNGA
SUCK’,
accessed
15
October
2010
from
Gamesbrief
<http://www.gamesbrief.com/2010/09/arrogant-­‐snobbish-­‐and-­‐elitist-­‐why-­‐
attitudes-­‐to-­‐zynga-­‐suck/
>
Lovell,
N
2009,
‘SIX
SECRETS
OF
FARMVILLE’S
SUCCESS
–
AND
33
MILLION
PEOPLE
AGREE’,
accessed
15
October
2010
from
GamesBrief
<http://www.gamesbrief.com/2009/09/six-­‐secrets-­‐of-­‐farmvilles-­‐success-­‐and-­‐
33-­‐million-­‐people-­‐agree/>
MadCap
Studios,
Inc
2010,
‘Home’,
accessed
13
October
2010
from
Digital
Comics
for
ipad
and
iphone
<http://www.digitalcomicsapp.com/#!home
Media
College
nd,
‘Flash
Player
Version
History
‘,
accessed
15
October
2010
from
Media
College
<http://www.computerliteracy.co.uk/flash_versions.htm
>
Mediati,
N
2010,
‘Google
anouces
webm
video
format
<the
future
of
html5
video?
Accessed
14
October
2010
from
PC
World
<http://www.pcworld.com/article/196670/google_announces_webm_video_for
mat_the_future_of_html5_video.html>
Microsoft
2006,
‘How
to
identify
memory
leaks
in
the
common
language
runtime
,
From
Microsoft
Support
<http://support.microsoft.com/kb/318263>
Middleton,
J
2010,
‘As
smartphone
users
rocket,
Android
ousts
Symbian
‘,
accessed
16
October
2010
from
telecoms
<http://www.telecoms.com/22493/as-­‐smartphone-­‐users-­‐rocket-­‐android-­‐ousts-­‐
symbian/>
Mill,
B
nd,
‘Introduction’,
accessed
15
October
2010
from
Canvas
Tutorial
<http://billmill.org/static/canvastutorial/index.html
>
Miniwatts
Marketing
Group
2010,
‘TOP
20
COUNTRIES
WITH
THE
HIGHEST
NUMBER
OF
INTERNET
USERS’,
accessed
14
October
2010
from
Internet
World
Stats
<http://www.internetworldstats.com/top20.htm>
Mitchell,
A
2010,
‘an
introduction
to
CSS3’,
accessed
15
October
2010
from
Zen
elements
<http://www.zenelements.com/blog/css3-­‐introduction/>
Momolog
2009,
‘Momoflow’,
accessed
15
October
2010
from
Momolog
<http://flow.momolog.info/>
Mozilla
nd,
‘Basic
Usage’,
accessed
15
October
2010
from
Mozilla
Developer
Network
<https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage>
Mozilla
nd,
‘Canvas
Tutorial’,
accessed
15
October
2010
from
Mozilla
Developer
Network
<https://developer.mozilla.org/en/Canvas_tutorial>

6. MOZILLA 2009, ‘HTML 5 Support in Mozilla’, in Mozilla developer Center,
accessed 15 December 2009 from
<https://developer.mozilla.org/en/HTML5_support_in_Mozilla>
Odvarko,
J
2009,
‘Introduction
to
Firebug
<Net
Panel,
Consulté
le
10
15,
2010,
sur
Software
is
hard
<http://www.softwareishard.com/blog/firebug/introduction-­‐to-­‐firebug-­‐net-­‐
panel/>
Office of Communications 2010, ‘The Ofcom Broadcasting Code - Section 1
Protecting the Under-Eighteen, From Ofcom
<http://stakeholders.ofcom.org.uk/broadcasting/broadcast-codes/broadcast-
code/protecting-under-18s/>
Ogilvy
2010,
‘An
encounter
with
greatness’,
accessed
15
October
2010
from
theFWA
<http://www.thefwa.com/site/an-­‐encounter-­‐with-­‐greatness/c=SOTM>
Ogilvy
2010,
‘Perrier
by
Dita’,
accessed
15
October
2010
from
theFWA
<http://www.thefwa.com/site/the-­‐perrier-­‐mansion/c=SOTM>
Oldrin,
E
nd,
‘Zynga
and
the
rise
of
social
gaming
on
the
web’,
accessed
15
October
2010
from
Edge
<http://www.adobe.com/newsletters/edge/august2009/articles/article2/index
.html>
Opera
2010,
‘Opera
browsers
exceed
100
million
users
‘,
accessed
15
October
2010
from
Opera
Press
Releases
<http://www.opera.com/press/releases/2010/04/12/>
Orange
Honey
nd,
‘Darkroom’,
accessed
22
October
2010
from
Mugtug
<http://mugtug.com/darkroom/>
Orange
Honey
nd,
‘Sketchpad’,
accessed
21
October
2010
from
Mugtug
<http://mugtug.com/sketchpad/>
Owen,
R
2010,
‘A
Very
Very
Brief
History
of
Flash
and
the
Open
Web
‘,
accessed
15
October
2010
from
Inside
RIA
<http://insideria.com/2010/04/a-­‐very-­‐very-­‐
brief-­‐history-­‐of-­‐f.html>
PAPAKIPOS, M 2009, ‘Google's HTML 5 Work <What's Next?’, in Google I/O
Developer Conference, accessed 15 December 2009 from
<http://code.google.com/events/io/2009/sessions/GoogleHTML5Work.html>
Peachpite 2006, ‘A Brief History of Flash’, accessed 15 October 2010 from Flash
Reference Guide
<http://www.peachpit.com/guides/content.aspx?g=flash&seqNum=397>
Perkins,
T
2010,
‘Learn
Flash
Professional
CS5,
From
Adobe
TV
<http://tv.adobe.com/show/learn-­‐flash-­‐professional-­‐cs5/>
Pichai,
S
2010,
‘Google
I/O
May
19
-­‐
20,
2010,
From
Google
I/O
Day
1
keynote
<http://www.google.com/intl/fr-­‐FR/events/io/2010/>

7. Pilgrim,
M
2010,
‘Video
on
the
web’,
accessed
13
October
2010
from
Dive
into
HTML5
<http://diveintohtml5.org/video.html>
pl4n3
2010,
‘bullet.js
-­‐
Javascript
Physics
Engin’,
accessed
13
October
2010
from
Planes
World
<http://pl4n3.blogspot.com/2010/07/bulletjs-­‐javascript-­‐physics-­‐
engine.html>
Quick.tv
2009,
‘A
Quick
History
of
Web
Video,
From
Quick.tv
<http://blog.quick.tv/commentary/a-­‐quick-­‐history-­‐of-­‐web-­‐video/>
RAGGETT, D 1998, Raggett on HTML 4, Addison Wesley, Harlow, England.
REDMOND, W 2009, ‘Microsoft Web Apps <Office Goes to the Web’, in Microsoft
PressPass, accessed 15 December 2009 from <
http://www.microsoft.com/presspass/features/2009/sep09/09-17officewebapps.mspx>
refsnes
Data
2010,
‘Browser
Statistics’,
accessed
25
October
2010
from
w3Schools
<http://www.w3schools.com/browsers/browsers_stats.asp>
Resig,
J
2010,
‘About
Processing.js’,
accessed
19
November
2010
from
processing.js
<http://processingjs.org/>
RGraph
2010,
‘RGraph
<HTML5
canvas
graph
library
based
on
the
HTML5
canvas
tag’,
accessed
27
November
2010
from
RGraph
<http://www.rgraph.net/>
Russel,
A
2009,
‘Google
Chrome
Frame’,
accessed
15
October
2010
from
Google
Code
<http://code.google.com/chrome/chromeframe/>
Rutgers,
A
n.d.,
‘HTML5,
A
GREAT
MOBILE
INTERNET
CATALYST?
From
Momac.net
<http://www.momac.net/html5/html5_article_en.pdf>
Ryall,
M
2008,
‘comments’,
accessed
16
October
2010
from
matt
ryall’s
weblog
<http://www.mattryall.net/demo/atlassian-­‐vis/comments/>
Sands,
A
nd,
‘Think
-­‐
a
Free
Mind
Mapping
Web
App’,
accessed
16
October
2010
from
Think
<http://think-­‐app.appspot.com/>
Seidelin,
J
2008,
‘Javascript
Wolfenstein
3D’,
accessed
12
October
2010
from
Nihilogic
<http://blog.nihilogic.dk/2008/04/javascript-­‐wolfenstein-­‐3d.html>
Shankland,
Stephen
2010,
‘Why
Apple
Banned
Flash’,
accessed
15
October
2010
from
<http://www.cbsnews.com/8301-­‐501465_162-­‐20003744-­‐501465.html>
SHARP, R 2009, ‘HTML 5 Demos and Examples’, in HTML 5 Demos, accessed 15
December 2009 from <http://html5demos.com/>
Sharp,
R
nd,
‘HTML5
shiv’,
accessed
16
October
2010
from
HTML5
shiv
<http://code.google.com/p/html5shiv/>
Sharp,
R,
P
2007,
‘Interaction
Design
beyond
human-­‐computer
Interaction
2nd
Edition’,
Chichester,
England
John
Wiley
&
Sons
Ltd.Silk
Tricky
2010,
‘Bank
Run
Game’,
accessed
15
October
2010
from
The
FWA
<http://www.thefwa.com/site/bank-­‐run-­‐game/c=SOTM>

8. Smith,
A
nd,
‘Canvas
Games’,
accessed
13
October
2010
from
Canvas
Demos
<http://www.canvasdemos.com/type/games/>
Stewart,
R
2008,
‘Flash
Gaming
Summit
<Ryan
Stewart
on
The
Future
of
Flash,
From
Slideshare
<http://www.slideshare.net/mochimedia/test-­‐1245617>
Stink
Digital
2010,
‘Lexus
Dark
Ride’,
accessed
15
October
2010
from
theFWA
<http://www.thefwa.com/site/lexus-­‐dark-­‐ride/c=SOTM>
Sucan,
M
2009,
‘HTML
5
canvas
-­‐
the
basics’,
accessed
15
October
2010
from
Dev
Opera
<http://dev.opera.com/articles/view/html-­‐5-­‐canvas-­‐the-­‐basics/>
Team
Cloudkick
2010,
‘Real-­‐time
server
visualization
with
canvas
and
processing.js’,
accessed
14
October
2010
from
Cloud
Click
<https://www.cloudkick.com/viz/mozilla/>
templates
blog
2010,
‘10
html5
video
players’,
accessed
10
October
2010
from
templates
blog
<http://www.templates.com/blog/10-­‐html5-­‐video-­‐players/>
The
Martin
Agency
2009,
‘We
choose
the
moon’,
accessed
15
October
2010
from
The
FWA
<http://www.thefwa.com/soty>
tomteAndGoat
2009,
‘Canvas
Animation’,
accessed
12
October
2010
from
Tomte
and
Goat
<http://www.cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.
html>
Toxicgonzo
nd,
‘User
Demos
-­‐
3D
.OBJ
Viewer’,
accessed
12
October
2010
from
Canvas
Demos
<http://www.canvasdemos.com/userdemos/toxicgonzo/3dobjviewer.html>
Triolo,
H
2006,
‘Flash,
what
and
how,
From
Flash
creations
<http://flash-­‐
creations.com/notes/intro_whatisflash.php>
Valdes,
Ray
2010,
‘HTML5
and
the
future
of
Adobe
Flash’,
accessed
15
October
2010
from
<http://blogs.gartner.com/ray_valdes/2010/02/10/html5-­‐and-­‐
flash/>
VUKICEVIC, V 2006, ‘SVG and Canvas <Graphics for Web Apps’, in XTech 2006,
accessed 15 December 2009 from < http://people.mozilla.com/~vladimir/xtech2006/
>
W3D
Consortium
2010,
‘X3D
and
HTML5’,
accessed
13
October
2010
from
W3D
Consortium
<http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5>
Wannemacher,
W
2007,
‘Terms
and
Definitions’,
accessed
13
October
2010
from
Wantii
<http://www.wantii.com/wordpress/?p=7>
Webflux
nd,
‘CSS3
Previews’,
accessed
15
October
2010
from
CSS3.info
<http://www.css3.info/preview/>
Winnie,
D
2010,
‘Actionscript
1:1
with
Doug
Winnie’,
accessed
15
October
2010
from
Adobe
TV
<http://tv.adobe.com/show/actionscript-­‐11-­‐with-­‐doug-­‐
winnie/>

9. Yasushi,
A
2008,
‘Box2D
JS’,
accessed
13
October
2010
from
Box2D
JS
<http://box2d-­‐js.sourceforge.net/index2.html>
ZDNet
Research
2004,
‘Macromedia
Flash
market
penetration,
From
ZDNet
<http://www.zdnet.com/blog/itfacts/macromedia-­‐flash-­‐market-­‐
penetration/6005>
Zeldman, J 2010, ‘The future of Web Standards’, Net Magazine, 01 September,
pp.41-45.

10. 2 Appendixes
2.1 Appendixes of Research on HTML5 and CSS3
2.1.1 HTML5 and CSS3 Availability: Complete HTML5 & CSS3
Availability tables (Deep Blue Sky, 2010)

12. 2.1.2 Cartoons: CSS3 SPIDERMAN Code
CSS3 SPIDERMAN: HTML5 code (CALZADILLA 2010)
<div id="screen-02">
<div class="spiderman-complete" style="opacity: 1; ">
<div class="web-shot" style="opacity: 1; ">
<img src="img/02-spiderman-web.png" width="30" alt="02 Spiderman Web"/>
</div>
<div class="spiderman-torso" style="opacity: 1; ">
<img src="img/02-spiderman-torso.png" width="25" alt="02 Spiderman Torso"/>
<div class="spiderman-legs" style="opacity: 1; ">
<div class="spiderman-leg-02" style="opacity: 1; ">
<img src="img/02-spiderman-thigh.png" width="20" alt="02 Spiderman
Thigh"/>
<div class="spiderman-shin-02" style="opacity: 1; ">
<img src="img/02-spiderman-foot.png" width="20" alt="02 Spiderman
Foot"/>
</div>
</div>
<div class="spiderman-leg-01" style="opacity: 1; ">

13. CSS3 SPIDERMAN: CSS3 code (CALZADILLA 2010)
the-screen #screen-02 {
-webkit-animation-delay:10s;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:1;
-webkit-animation-name:screen_two_city;
-webkit-animation-timing-function:ease-in-out;
}
#the-screen #screen-02 .spiderman-complete {
-webkit-animation-delay:10s;
-webkit-animation-duration:7s;
-webkit-animation-iteration-count:1;
-webkit-animation-name:spiderman_complete;
-webkit-animation-timing-function:ease-in-out;
-webkit-transform-origin-x:50%;
-webkit-transform-origin-y:0;
}
#the-screen #screen-02 .spiderman-legs {
left:-1px;
position:relative;
top:-10px;
width:26px;
}
#the-screen #screen-02 .spiderman-legs .spiderman-leg-01, #the-screen #screen-02
.spiderman-legs .spiderman-leg-02 {
left:6px;
position:absolute;
top:0;
}
2.1.3 Games: 3D Samples
2.1.3.1.1 Monk head
Figure 1 - MOnk Head (Toxicgonzo not dated)
This shows a 3D Model consisting of hundreds of triangles and drawn on a 640*480
2D Canvas. The model represents a rotating monk head whose surfaces are filled with
random transparent and flat colours (Toxicgonzo not dated).
The 3d .obj object is stored in a string in the JS file, informs about the vertex positions
and which vertices form the polygons; the polygons are then drawn on the canvas
with JS.

14. This 3D animation is done through software rendering, which means that it is done
inside the browser due to canvas + JS and it does not require any hardware
acceleration.
2.1.3.1.2 JS Cloth
Figure 2 - Interactive Towel (Gyulabo not dated)
This other animation presents a towel textured with an image that you can swing by
clicking on it. Hence this is a 3D demo where you can interact with the model and
modify its shape in real time (Gyulabo not dated).
It is probably done with 2D Canvas + JS, the canvas size is small, less than
100polygons used, it is as complex as the previous 3D model and its animation is
smooth.
2.1.3.1.3 Wolf 3D
Figure 3 - Javascript WOLFenstein 3D (Seidelin 2008)
It is a JS port of the original Wolfenstein 3D (basic demo). It is developed with JS,
canvas and Ajax (Seidelin 2008).
The demo is basic: you can move in the map, open doors, get weapons and life on the
ground and shoot; there is no artificial Intelligence, soldiers stand, do not move and
can be killed; no collision detection (you can walk through soldiers). Still the game is
smooth, big screen (640*480), software rendered, include textures and interaction. Its
frame rate varies according to the web-browser. It also includes music and sound
(when you shoot, when a guard is killed).
2.1.3.1.4 3D Shooter from Ben Joff

15. Figure 4 - 3D SHOOTER (Joffe, Canvascape - "3D Walker" 2005)
It has less features (only a map, no GUI) but higher quality and bigger resolution. It
has only 400lines of code (Joffe, Canvascape - "3D Walker" 2005).
2.1.3.1.5 Earth Demo for special build of Opera
Figure 5 - Earth 3D Canvas(Joffe, Earth 3D Canvas not dated)
This is the first of this list to be done with the 3D Canvas API. Very smooth, big
screen size, you can zoom in and out the surface.
2.1.3.1.6 Quake 2
Figure 6 - Quake 2 WEBGL (Haustein 2010)
Quake2 sample from Google Team is a very impressive sample of what can be done
with WebGL in a browser (Haustein 2010).

16. 2.1.4 Web Applications
2.1.4.1 JavaScript Libraries
2.1.4.1.1 Box 2D JS: 2D physics
BOX 2D JS is the JS port of the physics engine BOX 2D. There are basic samples on
its website, and a more complex sample of balls fallings on a random terrain. It
handles collision detection, body joints, contact, friction, attraction, reaction forces,
etc (Yasushi 2008).
Its original engine has ports to Java, Flash, C#, Delphi, etc. So if this is a popular
engine among developers, they should have no difficulty to move to this web Based
port on HTML5.
2.1.4.1.2 Bullet.js: 3D physics
This is a 3D physics engine that should be probably used with the 3D graphic engine
for HTML5: WebGL (pl4n3 2010).
A benchmark of this engine on Firefox and Chrome shows that its performances are
still very low since it presents a very poor frame rate while displaying simplistic 3D
elements. But browsers have not fully implemented 3D graphics in HTML5 yet so
these results are expected to improve.
2.1.4.1.3 Processing.js: drawing, animation & interaction
Processing.js uses the canvas to draw shapes, create animation & interaction. It offers
a complete environment to visualize data, create graphic user interface and develop
web-based games (Resig 2010).
The following reference commands are implemented and might be organized as it
follows:
1. Development/Organization
• To
structure
and
organize
the
application
(statements,
setup,
draw,
loop,
functions)
• To
handles
data,
objects
• To
control
functions
(for,
if,
while,
&&,
or)
• To
do
calculations
2. Interaction/events
• To
listen
to
input
events
(mouse
pressed,
keyboard)
• Time
and
space
(day,
hour,
coordinates)
3. Graphics
• To
create
shapes
• To
transform
shapes
(rotate,
scale)
• To
handle
images
(loadimage,
updatepixels)
• To
manipulate
fonts
2.1.4.1.4 rGraph library
This is a canvas graph library. You can create line charts, pie charts, rose charts,
meters, gantt charts, progress bar, etc (RGraph 2010).

17. To present a data analysis with HTML5 and the Canvas, there are already many
libraries that offer all tools needed to perform charts and graphs. There also many
samples of analytical applications and you can use their source code.
2.1.4.2 User Interface
2.1.4.2.1 Digital comic app Website
Its user interface (MadCap Studios, Inc 2010) is created with canvas to create
animated transitions and Ajax to load dynamically the content:
• animated
buttons,
• once
a
page
is
selected,
the
size
of
the
content
panel
adapts
dynamically
to
the
text,
• the
text
and
images
fade
in
and
out
to
create
nice
transitions
This website is the first attempt to create a full User Interface with canvas, as many
Flash websites exist, and is more other still accessible since the text loaded with Ajax
is embedded in div tags and not in the canvas.
This website still presents some drawbacks concerning Search Engine Optimization
(SEO): pages linked in the nav-bar are anchors. And some inner links (in the feature
page) make some div including text and image visible or not.
Here the background of every button is animated with a Canvas, but text is inserted
with Ajax. It is very complicated to create simple animated transitions this way. In
that case, CSS3 should be used instead.
2.1.4.2.2 UI Dial with snaps
This UI dial is more a gadget/experiment and is not practically useful. It is developed
with processing.js and it attempts to offer an original UI element both graphical and
interactive (canvas for graphics and physics for a magnetic feel) that loads content
with Ajax and jQuery (F1LT3R not dated).
It is a dial where you snap to markers by simulating a magnetic field; buttons are
linked to markers and bip regularly. Once you snap to a marker, content is loaded next
to the dial.
Here are used two other technologies (jQuery and Ajax) though developers should
only need to use the native HTML5 and CSS3 APIs to work simply on the user
interface.
2.1.4.2.3 Momo Flow
This is a Mac Coverflow using jQuery and Canvas 2D that simulates 3D transitions
(Momolog 2009). It works smoothly even when zoomed in. Many coverflows were
created in pure JS but this is the only one being both smooth and beautiful. However
it is not created with JS only but jQuery.
2.1.4.2.4 Photo Transition on Safari
This demonstration for Safari shows how you can make transitions between photos
with CSS3 2D & 3D transforms and CSS3 transitions (Apple not dated). These
transitions are worth a desktop slideshow. CSS3 animations can use hardware

18. acceleration, which means that the complexity and the quality of animations can be
better than with JS.
In photo transitions, the best choice to make is using CSS3; almost all attempts in
pure JS with canvas are not convincing at all.
2.1.4.3 Utility, analytic and content Applications
2.1.4.3.1 Slippy Map
Like Google Map, this web application dynamically downloads content (pieces of
map – tiles) from openStreetMap and displays it with HTML5 canvas (Hutt not dated).
It is very smooth, works like GoogleMap: grab and slide the map + zoom in and out,
statically here. But there is no other interaction: the user cannot look at a store, get
additional information on a place, etc.
2.1.4.3.2 CloudKick
This application displays in real time a cloud monitoring system (Team Cloudkick
2010). It intends to help administrators to manage server infrastructure and check the
state of their servers. It uses Canvas, JS & processing.js.
It consists of a 3D space where servers are plotted in real time and are coloured or
blink according to their status. You can click on them to get specific information of
the selected server.
This application is very smooth, the information is readable and accessible, and the
only drawback is the hardness to move in the 3D space.
2.1.4.3.3 Comments on a blog
This graph shows dynamically when comments were posted on a blog (Ryall 2008).
The HTML5 Canvas is used to display it dynamically. It uses processing.js library.
2.1.4.3.4 Think App
It is a real big web app allowing users to create and customize their mind maps (Sands
not dated). It uses HTML5 canvas for the graphic interface and Django and Google
App Engine for the rest.
The interface is very usable due to canvas, you can manipulate it graphically: drag
your spots, create links between them, etc. However its drawback is accessibility, no
text even appears in the source code.
2.1.4.3.5 Graph.tk Math tool
It draws all sorts of mathematic functions, solve differential equations; you can
dynamically resize the grid, grab and slide it. Its libraries are available and it uses JS
& JSON (graph.tk not dated).
This application is the best of its kind (draw mathematic functions) but is not
extraordinary, it just shows that it can perform complex calculations and draws any
sort of functions.

19. 2.1.4.4 Painting applications
Sketchpad (Orange Honey not dated) and Chromabrush (Google 2010) are two rich
painting web applications and use Canvas 2D + Canvas 2D SVG + jQuery + JS .
Sketchpad intends to offer a real painting web apps with many tools (brush, pencil,
gradient, fill, textures, different shapes, text, color picker), customization of tools
(size, hardness, opacity, flow), includes libraries of gradients, patterns and has also an
history.
Although Chromabrush is more a demonstration of HTML5 features (presented at
Google I/O 2010) with less depth in the features offered (fewer customization, tiny
libraries) but other interesting features for web apps: it includes audio, embedded
video, the notification API, photo edition (blurr), layers management (draw on a layer,
define its order according to the others).
Their source code is clearly readable and arises this question (heard at the Google I/O
Conference): how do you protect the source code of a web app? Although a Flash file
compiled cannot be studied nor copied.
If drawing apps can be developed in HTML5 (+ other technologies) to offer a very
complete drawing experience, how big is the step to get the same sort of designer’s
application for animation?
Those applications (and the following Darkroom for photo editing) being opensource
provide moreothers many libraries to develop and their code is very clear and highly
usable.
Note from the Google I/O conference: up to that point, SVG graphics were not
pointed out though there is a Canvas 2D SVG API under development. Before
HTML5, SVG graphics were the solution to create vector graphics in JS for the web,
but their performances were terrible: for an animation developed in SVG, HTML5
Canvas and Flash, SVG presented the lowest frame rate. Canvas is presented as the
new solution from HTML5, consists of pixel graphics and has indeed much better
performances than former SVG attempts. However with SVG taking part in the
HTML5 specs, its advancement should be followed.
2.1.4.5 Photo Editing
2.1.4.5.1 Darkroom from MugTug
DarkRoom is a photo editing application implemented with jQuery and Canvas 2D
(Orange Honey not dated).
Upload an image, change its levels, white balance, exposure, enhance its contrast or
saturation or even apply preloaded filters (black and white, sharpen angles …). It
includes a full spectrum analyzer and crop/rotate functions. It is intended to
photographers who want to adjust their photos quickly on a web app.
As said above, the source code is accessible and many libraries are available.
Darkroom uses Application Cache & local storage. This means that once loaded, it
can be used offline. The offline feature is necessary to get those web apps on the
desktop and for the mobile web.

20. Suffer of a laggy experience in full screen, it is required to reduce the window size to
get it smooth.
2.1.4.5.2 Canvas pixel Manipulation for Safari
http://developer.apple.com/safaridemos/canvas-pixel.php
This web app is developed with Canvas 2D + JS. This web app allows you to apply
various effects to photography (color effects, edge detection, and image
transformation: distort). You cannot customize the effects, just basically apply them
so it is more a demonstration of JS coding than a practical application.
Another feature is “export as a PNG/GIF/JPG to the hard disk”. You can therefore
save the image file under different file types.
2.1.4.5.3 Radikal fx Collage demo
http://radikalfx.com/files/collage/demo.html
It gets photos from Flicker and allows you to select the ones you want and to position
them on the canvas and set their opacity to create a photo collage. This application is
basic: images are identified as different layers but you cannot change their position.
These painting and photo editing applications made of HTML5, Canvas 2D + JS (at
least) cover altogether most of the features of Photoshop.
2.2 Appendix of Research on Flash
2.2.1 What is Flash used for: Full-flash website samples
perrier by dita (Ogilvy 2010)
Purpose: promote Perrier drinks
Type: Interactive Movie
Key features: HQ Video; filtered Video; Interactive Video
User Interaction Type: Explore an environment; Instructing (select an
option); Manipulating: Interact with the video with the mouse (enlight, avoid
touching, take photo)
Battle of Cheetos (Goodby 2010)
Purpose: promote the Cheetos cereals
Type: Game
Key features: dynamic 3D environment; multiplayer; ranking system
User Interaction Type: Instructing (Customize player’s army; browse
multiplayer ranking and select opponent player); Manipulating (play against a
player)
Louis Vuitton Journey: Legends (Ogilvy 2010)
Purpose: discover and learn about famous celebrities
Type: Interactive Video Interview
Key features: HQ Video; Accessible Video (captions); Interactive Video;
Social Network embedded; Post comments
User Interaction Type: Instructing with mouse or keyboard; Conversing
(post comments on some video clips)

21. Lexus Dark Ride (Stink Digital 2010)
Purpose: promote the Lexus car
Type: Interactive Movie
Key features: HQ Video; Interactive Video; 360° Video; Social Network
embedded
User Interaction Type: Instructing; Exploring: Interact with the mouse
(choose where to look)
BMW cinétique (Chewing Com 2010)
Purpose: promote BMW cars
Type: Artistic authoring tool
Key features: dynamic 3D environment; libraries of patterns; galleries; HQ
Video; Animation
User Interaction Type: Manipulate (move nodes to shape your own 3D
model)
Bank Run Game (Silk Tricky 2010)
Purpose: promote a game sold on the app store (apple)
Type: Interactive movie
Key features: HQ Video, Interactive Video
User Interaction Type: Instructing
Blue Bell Jeans (Kokokaka 2010)
Purpose: promote jeans
Type: Multimedia website: embeds text, video transitions
Key features: HQ Video, Interactive Video
User Interaction Type: Manipulate (play forward and backward in the
video), Exploring (look at the different jeans )
We choose the moon (The Martin Agency 2009)
Purpose: Educative
Type: Multimedia website: embeds text, video, audio, 3D animation
Key features: HQ Video, video/audio/text gallery
User Interaction Type:exploring
Ecodazo (Enjin Inc 2008)
Purpose: Educative
Type: 3D educational application for young people
Key features: 3D Animation, HQ Video
User Interaction Type: exploring
Get the glass (Goodby 2007)
Purpose: promote a brand
Type: Board Game
Key features: 3D, HQ Video, Mini games
User Interaction Type: Manipulate (dices, mini games)

22. 2.3 Appendix of Preliminaries to Implementation and
Benchmarks
2.3.1 Canvas graphic API
2.3.2 SYSTEM
2.3.2.1 SAVING & RESTORING STATE
save()
restore()
2.3.2.2 COMPOSITING
globalCompositeOperation = type
https://developer.mozilla.org/en/Canvas_tutorial/Compositing to see clear definitions
of different types
type: "source-over, source-in, source-out, source-atop
destination-over, destination-in, destination-out, destination-
atop
lighter, darker
xor,copy"
clip()
2.3.2.3 TRANSFORMATIONS
translate(x, y)
rotate(angle)
scale(x, y)
transform(m11, m12, m21, m22, dx, dy)
2.3.3 DRAWING SHAPES
2.3.3.1 MAIN FUNCTIONS
stroke()
fill()
clip()
2.3.3.2 DRAWING RECTANGLES
fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it
fully transparent
2.3.3.3 DRAWING PATHS
beginPath()

23. closePath()
2.3.3.4 LINES
lineTo(x, y)
2.3.3.5 ARCS
arc(x, y, radius, startAngle, endAngle, anticlockwise)
2.3.3.6 BESIER AND QUADRATIC CURVES
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
2.3.3.7 RECTANGLES
rect(x, y, width, height)
2.3.4 APPLYING STYLES & COLORS
2.3.4.1 COLORS
fillStyle = color
strokeStyle = color
The valid strings developers can enter should, according to the spec, be CSS3 color
Values
2.3.4.1.1 HTML4 color keywords
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.
2.3.4.1.2 RGB Color values
em { color: #f00 } #rgb
em { color: #ff0000 } #rrggbb
em { color: rgb(255,0,0) } integer range 0 - 255
em { color: rgb(100%, 0%, 0%) } float range 0.0% - 100.0%
2.3.4.1.3 RGBA Color values (with opacity)
em { color: rgba(255,0,0,1) the same, with explicit opacity
of 1
em { color: rgba(100%,0%,0%,1) } the same, with explicit opacity
of 1
2.3.4.1.4 HSL Color values
em { color: hsl(0, 100%, 50%) } red
em { color: hsl(120, 100%, 50%) } green

24. em { color: hsl(120, 100%, 25%) } light green
em { color: hsl(120, 100%, 75%) } dark green
em { color: hsl(120, 50%, 50%) } pastel green, and so on
Note: Currently not all CSS 3 color values are supported in the Gecko engine. For
instance the color values hsl(100%,25%,0) or rgb(0,100%,0) are not allowed. If
developers stick to the ones above, they won't run into any problems.
Note: If developers set the strokeStyle and/or fillStyle property, the new value
becomes the default for all shapes being drawn from then on. For every shape
developers want in a different color, they will need to reassign the fillStyle or
strokeStyle property.
2.3.4.2 TRANSPARENCY
globalAlpha = O.O to 1.O;
2.3.4.3 LINE STYLES
lineWidth = value 1 (px) by default
lineCap = type "butt", round or square
lineJoin = type round, bevel and "miter".
miterLimit = value
2.3.4.4 GRADIENTS
createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)
The createLinearGradient method takes four arguments representing the starting point
(x1,y1) and end point (x2,y2) of the gradient.
The createRadialGradient method takes six arguments. The first three arguments
define a circle with coordinates (x1,y1) and radius r1 and the second a circle with
coordinates (x2,y2) and radius r2.
addColorStop(position, color)
This method takes two arguments. The position must be a number between 0.0 and
1.0 and defines the relative position of the color in the gradient. Setting this to 0.5 for
instance would place the color precisely in the middle of the gradient. The color
argument must be a string representing a CSS color (ie #FFF, rgba(0,0,0,1),etc).
2.3.5 PATTERNS
/*createPattern(image,type) type: repeat, repeat-x,
repeat-y and no-repeat.*/

25. 2.3.6 USING IMAGES
2.3.6.1 GET THE IMG SOURCE
var img = new Image(); // Create new Image object
img.onload = function(){
// execute drawImage statements here
}
img.src = 'myImage.png'; // Set source path
2.3.6.2 GET IMAGES ON THE SAME PAGE OR OTHER CANVAS
ELEMENTS
document.images collection
document.getElementsByTagName(name)
document.getElementById(id name)
2.3.6.3 DRAW IMAGES
drawImage(image, x, y)
drawImage(image, x, y, width, height) //to scale it
2.3.6.4 SLICING IMAGES
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
//s for Slicing Image & d for Destination Image
2.3.7 TEXT
http://dev.opera.com/articles/view/html-5-canvas-the-basics/#text
2.3.7.1 TEXT PROPERTIES ON THE CONTEXT OBJECT
font: Specifies the font of the text, in the same manner as the CSS
font-family property)
textAlign: Specifies the horizontal alignment of the text. Values:
start, end, left, right, center. Default value: start.
textBaseline: Specifies the vertical alignment of the text. Values:
top, hanging, middle, alphabetic, ideographic, bottom. Default value:
alphabetic.*/
2.3.7.2 TEXT METHODS
fillText("text to draw", x, y)
strokeText("text to draw", x, y)
2.3.8 ANIMATION
2.3.8.1 4 BASIC ANIMATION STEPS
clearRect(0,0,width of canvas,height of canvas) //clear the
canvas
save() //save the canvas state

26. //draw animated shapes of the actual frame
restore() //restore the canvas before drawing a new frame
2.3.8.2 CONTROLLING AN ANIMATION
Shapes (and their animation) are rendered once the script finished its execution.
Hence for instance no way to do an animation within a loop
setInterval(animateShape,500); // the function executes every
500ms
setTimeout(animateShape,500); // the function exectutes after
500ms