Can HTML5 and CSS3 Replace Flash

CAN NEW WEB TECHNOLOGIES
HTML5 AND CSS3
KILL FLASH?

MSc Computer Science
Dissertation

Jérémie Charlet

CW002436@student.staffs.ac.uk

A thesis submitted in partial fulfilment of the requirements of
Staffordshire University for the degree of Master of Science

December 2010

Supervised by Alastair Dawes

Abstract

This dissertation investigates the new web technologies Hypertext Mark-up Language
5 (HTML5) and Cascading Style Sheet 3 (CSS3) that are still in development and
aims at establishing whether they are able to replace Adobe Flash.
The objectives are first to investigate what are the graphic capabilities of the three
mentioned technologies. Then it is intended to learn and practice them to finally
implement identical animations in HTML5, CSS3 and Flash and compare their
performances. From that study a set of guidelines sets what technical solutions are
best to be used.
The research first concentrates on the HTML5 and CSS3 technologies, then on Flash.
On both of them, their availability is determined; many samples of web applications
or websites are organized in a set of categories and are analysed; and their strengths
are presented. A concluding chapter to this research compares HTML5, CSS3 and
Flash and states, according to the literature, what are their potential future and impact.
The artefact consists of an HTML5 and CSS3 website and of two sets of animations
built in HTML5, CSS3 and Flash. The website was created to learn and practice the
technologies covered while the animations served the benchmarking stages.
The first set of implementation and benchmarking involved a simple animation of a
solar system involving two planets; the second set involved an enhanced version of
this animation with forty planets to push the rendering engines of the web browsers to
their limits. The aim was to define whether those animations were quick to load, their
rendering smooth and their processing low consuming to save battery life of mobile
devices; hence they were benchmarked on their load time, their frame rate and their
Memory and Central Processing Unit (CPU) usages.
The study shows that HTML5 and CSS3 are at the moment not mature enough to be
globally used in businesses but still have the potential to replace Flash in animation,
video and web applications that do not involve high interactivity in a very close future.
The solution shows that animations can already be made in HTML5 and CSS3;
however the testing confirms the current superiority of Flash in terms of performances.

MSc Dissertation - Jérémie Charlet – CW002436 0

1
INTRODUCTION
CHAPTER ....................................................................................................4

1.1
AIMS
AND
OBJECTIVES ...........................................................................................................................4

1.1.1
Aims ..................................................................................................................................................... 4

1.1.2
Objectives .......................................................................................................................................... 4

1.2
RESEARCH
APPROACH ...........................................................................................................................5

1.2.1
Planned
research
Approach...................................................................................................... 5

1.2.2
Differences
with
the
planned
schedule................................................................................. 8

1.3
INTELLECTUAL
CHALLENGE .................................................................................................................9

1.4
PRESENTATION
OF
THE
FOLLOWING
CHAPTERS ...............................................................................9

2
LITERATURE
REVIEW
CHAPTER ...................................................................................... 10

2.1
PRESENTATION
OF
CONFERENCE
VIDEOS........................................................................................10

2.1.1
“Features
you
want
desperately
but
still
can’t
use” .................................................... 10

2.1.2
“Google’s
HTML
5
Work:
What’s
next?”............................................................................ 10

2.1.3
“The
future
of
HTML
5”............................................................................................................ 11

2.2
OVERVIEW
OF
THE
NEW
FEATURES..................................................................................................12

2.2.1
New
elements ............................................................................................................................... 12

2.2.2
Multimedia .................................................................................................................................... 13

2.2.3
Browser
Storage
and
others
offline
applications
support........................................ 15

2.2.4
Features
to
build
better
web
applications....................................................................... 15

2.2.5
Forms
and
text
editing ............................................................................................................. 16

2.2.6
Other
gadgets............................................................................................................................... 16

3
RESEARCH
ON
HTML
5
&
CSS3 .......................................................................................... 17

3.1
HTML5
&
CSS3
AVAILABILITY .......................................................................................................17

3.1.1
HTML5
&
CSS3
are
conquering
the
Desktop
and
the
mobile
Web........................ 17

3.1.2
Availability
on
computers....................................................................................................... 18

3.1.3
Availability
on
mobile
phones............................................................................................... 21

3.2
WHAT
IS
HTML5
&
CSS3
USED
FOR
(AT
THE
MOMENT
OF
THIS
WRITING)?.........................25

3.2.1
Integrated
Music
&
Video ....................................................................................................... 25

3.2.2
Cartoons ......................................................................................................................................... 27

3.2.3
Games .............................................................................................................................................. 29

3.2.4
Web
applications ........................................................................................................................ 32

3.3
STRENGTHS
OF
HTML5
AND
CSS3.................................................................................................35

3.3.1
Cross
platform
technology...................................................................................................... 35

3.3.2
Saved
bandwidth:
vital
for
the
mobile
web..................................................................... 35

3.3.3
Rich
media
without
plug-‐ins.................................................................................................. 35

3.3.4
RIA
features................................................................................................................................... 35

4
RESEARCH
ON
FLASH ........................................................................................................... 36

4.1
FLASH
AVAILABILITY
ON
COMPUTERS ............................................................................................36

4.2
FLASH
AVAILABILITY
ON
MOBILE
PHONES .....................................................................................37

4.3
WHAT
IS
FLASH
USED
FOR? ...............................................................................................................38

4.3.1
Integrated
Music
&
Video ....................................................................................................... 38

4.3.2
Cartoons ......................................................................................................................................... 40

4.3.3
Games .............................................................................................................................................. 42

4.3.4
Advertisements ............................................................................................................................ 44

4.3.5
Custom
Navigation
/
Full
Flash
Website.......................................................................... 44

4.4
IMPACT
OF
FLASH
ON
THE
WEB .......................................................................................................48

4.4.1
Origins
of
Flash
and
its
evolution........................................................................................ 48

4.4.2
Strengths
of
Flash....................................................................................................................... 48

4.4.3
A
big
contributor
to
the
web ................................................................................................. 49

5
HTML5,
CSS3
AND
FLASH.
COMPARISON
AND
POTENTIAL
IMPACT.................... 51


5.1
COMPARISON
OF
HTML5,
CSS3
AND
FLASH ................................................................................51

5.1.1
Availability .................................................................................................................................... 51

5.1.2
Integrated
Music
and
Video................................................................................................... 52

5.1.3
2D
Animation ............................................................................................................................... 52

5.1.4
Games .............................................................................................................................................. 52

5.1.5
Advertisements ............................................................................................................................ 53

5.1.6
Web
Applications........................................................................................................................ 53

5.2
POTENTIAL
IMPACT ............................................................................................................................53

5.2.1
Shift
from
the
ubiquitous
platform
Flash
to
the
new
web
standards.................. 53

5.2.2
The
future
of
HTML5,
CSS3
and
Flash ............................................................................... 54

5.2.3
A
debate
driven
by
interests
of
giants ............................................................................... 55

6
PRELIMINARIES
TO
IMPLEMENTATION
AND
BENCHMARKS ................................. 57

6.1
EXPERIMENTS
WEBSITE
AND
LEARNING .........................................................................................57

6.1.1
Experiments.jcharlet.com:
an
HTML5
and
CSS3
website.......................................... 58

6.1.2
Tutorials
on
HTML5
Canvas .................................................................................................. 61

6.1.3
Tutorials
on
CSS3 ....................................................................................................................... 66

6.1.4
Tutorials
on
Flash ...................................................................................................................... 69

6.1.5
Creation
of
a
common
animation:
solar
system ........................................................... 69

6.2
INTRODUCTION
TO
BENCHMARKS.....................................................................................................70

6.2.1
Guidelines
to
ensure
that
benchmarking
of
a
website
are
done
in
the
best

conditions ...................................................................................................................................................... 70

6.2.2
Where
to
do
the
benchmarking:
on
the
most
popular
platforms.......................... 70

6.2.3
What
to
benchmark................................................................................................................... 71

7
IMPLEMENTATION
&
BENCHMARKS
1 ........................................................................... 72

7.1
IMPLEMENTATION:
SOLAR
SYSTEM .................................................................................................72

7.1.1
Profile .............................................................................................................................................. 72

7.1.2
HTML
5
Canvas’s
Implementation ...................................................................................... 73

7.1.3
CSS3’s
Implementation ............................................................................................................ 73

7.1.4
Flash’s
Implementation ........................................................................................................... 74

7.2
BENCHMARKING
ENVIRONMENT
AND
PROCESS ............................................................................75

7.2.1
Browsers
and
Tools ................................................................................................................... 75

7.2.2
Process............................................................................................................................................. 75

7.2.3
Updates
and
quick
findings
while
benchmarking ........................................................ 76

7.3
BENCHMARKS
AND
FINDINGS............................................................................................................76

7.3.1
Loading
Process
and
GET
Requests
handling ................................................................ 76

7.3.2
Randomness
of
results.............................................................................................................. 77

7.3.3
Tendencies
observed
despite
the
inequality
of
animations...................................... 78

7.3.4
These
first
benchmarks
involved
simplistic
animations............................................ 79

7.3.5
Next
Benchmarks........................................................................................................................ 79

8
IMPLEMENTATION
AND
BENCHMARKS
2 ..................................................................... 80

8.1
OBJECT:
ENHANCED
SOLAR
SYSTEM ................................................................................................80

8.1.1
What
is
new
in
this
second
set
of
animations? .............................................................. 80

8.1.2
HTML
5
Canvas’s
Implementation ...................................................................................... 81

8.1.3
CSS3’s
Implementations .......................................................................................................... 82

8.1.4
FLASH’s
Implementation......................................................................................................... 83

8.2
BENCHMARKING
ENVIRONMENT
AND
PROCESS ............................................................................84

8.2.1
Process............................................................................................................................................. 84

8.2.2
Browsers
and
Tools ................................................................................................................... 84

8.2.3
quick
findings
while
benchmarking ................................................................................... 86

8.3
BENCHMARKS
AND
FINDINGS............................................................................................................86

8.3.1
Load
Time:
several
findings ................................................................................................... 86

8.3.2
Frame
Rate:
Flash
largely
wins
but
there
is
hope
for
Canvas................................. 87


8.3.3
CPU
Usage:
as
above,
Flash
wins
and
Canvas
needs
to
get
improved ................. 88

8.3.4
Memory
Usage ............................................................................................................................. 88

8.3.5
Unsuitable
CSS3
design
on
animation............................................................................... 92

9
CONCLUSION ........................................................................................................................... 94

9.1
SUMMARY
OF
THE
FINDINGS ..............................................................................................................94

9.1.1
Research
on
HTML5,
CSS3
and
Flash................................................................................. 94

9.1.2
Implementation........................................................................................................................... 94

9.1.3
Benchmarks .................................................................................................................................. 95

9.2
GUIDELINES
FOR
DEVELOPERS ..........................................................................................................96

9.2.1
Start
using
HTML5
and
CSS3 ................................................................................................ 96

9.2.2
Use
HTML5
and
CSS3
for
simple
HTML/CSS
websites ............................................... 96

9.2.3
Carry
on
using
Flash
for
animation,
video,
high
interactivity
and
RIA .............. 96

9.2.4
Check
HTML5
and
CSS3
evolution ...................................................................................... 96

9.3
THE
FUTURE
OF
HTML5,
CSS3
AND
FLASH
IN
FIVE
YEARS
TIME .............................................97

9.4
EVALUATION
OF
THIS
STUDY .............................................................................................................97

9.4.1
Weaknesses
of
this
work.......................................................................................................... 97

9.4.2
Strengths ........................................................................................................................................ 98

9.4.3
Difficulties
of
this
dissertation
subject .............................................................................. 98

9.4.4
Personal
learning
(answer
to
Introduction’s
Intellectual
Challenge)................. 99

10
BIBLIOGRAPHY ................................................................. ERREUR
!
SIGNET
NON
DÉFINI.

11
THANKS ............................................................................... ERREUR
!
SIGNET
NON
DÉFINI.

12
APPENDIXES....................................................................... ERREUR
!
SIGNET
NON
DÉFINI.

12.1
APPENDIXES
OF
RESEARCH
ON
HTML5
AND
CSS3 ................. ERREUR
!
SIGNET
NON
DÉFINI.

12.1.1
HTML5
and
CSS3
Availability:
Complete
HTML5
&
CSS3
Availability
tables

(Deep
Blue
Sky,
2010) ..........................................................................Erreur
!
Signet
non
défini.

12.1.2
Cartoons:
CSS3
SPIDERMAN
Code ..................................Erreur
!
Signet
non
défini.

12.1.3
Games:
3D
Samples................................................................Erreur
!
Signet
non
défini.

12.1.4
Web
Applications....................................................................Erreur
!
Signet
non
défini.

12.2
APPENDIX
OF
RESEARCH
ON
FLASH ............................................. ERREUR
!
SIGNET
NON
DÉFINI.

12.2.1
What
is
Flash
used
for:
Full-‐flash
website
samples .Erreur
!
Signet
non
défini.

12.3
APPENDIX
OF
PRELIMINARIES
TO
IMPLEMENTATION
AND
BENCHMARKSERREUR
!
SIGNET

NON
DÉFINI.

12.3.1
Canvas
graphic
API................................................................Erreur
!
Signet
non
défini.

12.3.2
SYSTEM .......................................................................................Erreur
!
Signet
non
défini.

12.3.3
DRAWING
SHAPES.................................................................Erreur
!
Signet
non
défini.

12.3.4
APPLYING
STYLES
&
COLORS...........................................Erreur
!
Signet
non
défini.

12.3.5
PATTERNS .................................................................................Erreur
!
Signet
non
défini.

12.3.6
USING
IMAGES.........................................................................Erreur
!
Signet
non
défini.

12.3.7
TEXT.............................................................................................Erreur
!
Signet
non
défini.

12.3.8
ANIMATION ..............................................................................Erreur
!
Signet
non
défini.


1 Introduction chapter
1.1 Aims and Objectives
1.1.1 Aims
Figure out whether the new web technologies: Hyper Text Markup Language 5
(HTML5) and Cascading Style Sheet 3 (CSS3) may totally replace Flash, and if not
define a set of guidelines to indicate in which condition why one should be picked
instead of the other.

1.1.2 Objectives
1. know
what
could
be
done
in
2D
graphic
animations
with
HTML
5,
CSS3

and
Flash

o Research
on
HTML
5

§ get
a
quick
overview
of
the
new
features

§ write
literature
review
on
HTML
5
new
features

o Research
on
HTML
5
Canvas
and
CSS3
graphic
capabilities

§ Write
a
table
displaying
the
Availability
of
HMTL5
and
CSS3

graphic
features
in
the
different
main
browsers
(Chrome,

Opera,
Safari,
Firefox,
Internet
Explorer)

§ Search
for
Canvas
and
CSS3
demos
and
look
at
the
code

§ List
existing
Canvas
Graphic
libraries.
Study
their

availability
in
different
browsers

o Research
on
Flash

§ Search
for
different
sorts
of
demonstrations

§ Explain
how
Flash
became
a
leader
on
the
web

o Write
reports
on
the
research
on
HTML
5,
CSS3
and
Flash
and

compare
them

2. know
when
to
use
HTML
5
or
CSS3
instead
of
Flash

o Learn
and
practice
HTML5
and
CSS3

o Learn
Adobe
Flash
using
Adobe
Learning
centre
(Adobe
2009)

§ Learn
the
basics
by
doing
some
of
the
“getting
started”

tutorials
of
the
adobe
flash
developer
centre
(I
have
already

done
some
tutorials
in
the
module
Web
Multimedia)

§ Practice
the
tutorials
on
Action
Script

§ Practice
the
tutorials
on
Animation

§ Practice
the
advanced
tutorials
on
video,
graphic
effects
and

components
(they
should
be
very
useful
for
the

development)

o Design
a
set
of
animations
to
implement
in
HTML
5,
CSS3
and

Flash
and
to
test

§ Research
and
List
the
different
kinds
of
animations
which

could
designed
for
the
web


§Select
animations
from
the
above
list
and
develop
for
each
a

sample
in
Flash
and
another
in
HTML
5

§ Test
the
animations
in
both
versions
and
analyse
their

performances

o Conclude
on
the
analysis
performed
and
write
a
set
of
guidelines

for
developers
to
advice
them
on
what
technology
to
use
in

different
cases

At first, when the proposal was written for the Personal Development and Research
Methods module, only HTML5 was taken into account; however CSS3 presenting
also graphic capabilities was also integrated to the research.
Finally, only one animation was created in the three technologies and tested.

1.2 Research Approach
1.2.1 Planned research Approach
Here is presented the research approach as it was stated in the proposal (at the start of
the dissertation).

1.2.1.1 Research on HTML 5 Canvas
First the literature review will give an overview of the features of HTML 5: since half
of the implementation will be made in HTML 5, it is a must to know about this
language.
(Deliverable :)
Literature Review
Then begins the proper research on Canvas. The Specifications draft of HTML
5 (W3C 2009) will be a start point and is a display of all the methods available to
draw graphics in JavaScript.
The Canvas API has not been implemented yet in every browser. In 6 months,
when the research project will start, progress would have been made, and it could
even evolve during the 24 weeks research. Hence to keep up to date the knowledge of
the advancement of each feature in every browser is a must. Developers shall not be
advised to start using methods which are not still implemented and available to every
one.
Showcase websites (Sharp 2009) (Deutsch 2009) are emerging and display
different sort of animation developed directly with the native canvas JavaScript code.
To look at these animations and their codes will help to become aware of what can be
done with the canvas and to start learning how to use it.
Groups of developers started to implement JavaScript libraries to allow other
developers to create specific animations by writing much simpler code. Use of their
work might help saving time but it needs to be checked to insure that there is no
compatibility issue.

While pursuing on this research, the outcomes will be included in a report on Canvas
so that this report will be the reference on HTML 5’s canvas for the rest of the project.


HTML 5 Canvas Report

1.2.1.2 Learn Flash
3 to 4 weeks
The flash section of the developer centre from adobe website is a rich portal of
resources and tutorials on flash (Adobe 2009).
Since I have only been introduced to it in the Web Multimedia tutorial, I will
need to spend time learning about Action Script and Animation and learn what is
needed about the most advanced subjects on Video, graphic effects and components.
To conclude this learning, a complex animation in Flash will be developed as
a showcase including action script, animation, video, etc.
Flash Prototype

1.2.1.3 Research and Design of the 10 animations and their analysis
3 weeks
This stage will affect the next two stages; in this stage there will be designed the
process to answer the research question, and there are two possible ways which will
be defined later.
Whatever path is chosen, research must be made about the different cases
where animation and/or interactivity is/are used in Web: Flash is not only used to
create cartoon animation but also to create interactive menus, galleries, games,
animated web-designs, etc. However, the progress of implementation of HTML 5
needs to be taken into account: for instance, the handling of events is quite blurred in
HTML 5, so if nothing comes out on this subject (but it SHOULD), the scope will be
reduced.
After this research, 10 different and popular kinds of animation will be chosen
and specifications will be written for each.
10 animations Specifications
Afterwards a choice will need to be made:
• Either
I

only
decide
at
this
stage
what
animations
to
implement
and
then,

after
having
implemented
the
10
chosen
ones,
design
and
analysis
will
be

done

• Or
I
design
here
the
implementation
and
the
analysis
so
that
once
an

animation
has
been
developed
in
both
technologies,
performances
are

tested
and
animations’
codes
are
improved
if
needed.
This
would
help
to

make
sure
that
things
are
well
done,
right
from
the
start.
But
on
the
other

hand,
time
could
be
wasted
trying
to
improve
the
code.

I will discuss on this issue in time with my supervisor.

1.2.1.4 Implementation Flash/html5
7 weeks


In this stage comes the development of the chosen 10 animations in both
technologies: HTML 5’s canvas with JavaScript and Flash with action script
Website including the 10 animations and their code

1.2.1.5 Testing and Benchmarks
2 to 3 weeks
In this stage comes the analysis to evaluate each animation and their performances in
both technologies.
Many criteria will be considered, such as the download time, the ratio size/quality of
the files, the proper display on the different browsers, etc. The factors to study will be
defined in the designing stage.
Analysis Process & Results

1.2.1.6 Evaluation and Conclusions
2 weeks
To conclude the research, a set of guidelines for developers will be written using the
results of the benchmarks.
It will explain in which cases they should design their animations with HTML 5, and
in which cases they should keep to Flash.
Beyond this advice, these guidelines should recommend that developers start working
with HTML 5 by:
• making
them
aware
of
what
they
are
able
to
create
for
instance
with

HTML
5

• Saving
their
time:
they
will
not
risk
to
start
developing
an
animation
that

could
end
in
a
failure
because
of
incompatibility,
because
of
bad

performances
or
even
because
some
tools/methods
are
still
missing
and

need
to
be
implemented.

More than a set of guidelines for initiated developers, this could be well introduced by
explaining some basic concepts of HTML 5 and promoting the advantages of
choosing an open standard solution. It could be a way to persuade developers to join
in the community working on HTML 5, use it, promote it, and help it to progress.
Guidelines Report
Remaining time spent on improving and re-improving


Figure 1 - Gantt Chart

1.2.2 Differences with the planned schedule
Finally as stated in “Aims and Objectives”, a new technology, CSS3, was taken into
account and integrated to the research. The differences related to each part are
described below.

1.2.2.1 Research
It was planned to make a research report on HTML5 (and CSS3); a similar report was
also written on Flash to identify the graphic capabilities of each technology and make
a comparison afterwards.

1.2.2.2 Learning
The HTML5 and CSS3 technologies required also to be learned. So a website
gathering the work done on HTML5 and CSS3 was created. Since the learning on
Flash was quick and only done to get back used to it, only the final animation created
in Flash and used in the testing part was published.

1.2.2.3 Implementation and Testing
Only one animation was in the end implemented in all three technologies and tested.
Creating ten animations was a too ambitious task for a 6-months project.
HTML5 and CSS3 offer features to draw and animate graphics on the web. However
the new web technologies investigated do not include new specific APIs to manage
interactivity in particular so only animation was looked at. Besides, since a unique
animation had already been developed in all three technologies in the learning part
and was suitable for the next parts, this animation was kept and removed the need to
design the animations to test.
However the first animation was after a first set of benchmarks enhanced and re-
tested to push the web browsers rendering it to their limits.


1.3 Intellectual Challenge
This work is my first personal research and is similar to my previous internship in
Web Developments: I will need to get some implementation skills. However I will
have more responsibilities and autonomy than I used to since I must organise my own
learning and manage my work.
Project planning is one of my weaknesses because I struggle to plan on mid or long
term and I am also used to putting off work until the last minute. Hence I will define
clearly deliverables at the end of each stage to make sure that my advance is regular.

Collecting valuable resources on a new technology is complicated. For example, I
found no research paper on the HTML 5’s canvas.

As I said, I will have to organise my own learning in both HTML 5 and Flash.
HTML is an easy language and I have already developed websites but HTML 5 has a
new syntax I must get used to. Besides there is no tool to draw graphics in canvas so I
will have to learn coding graphics with JavaScript.
I have been introduced to Flash in the Web Multimedia Module but I am missing
experience and I will practice many tutorials to create the artefact.

English is not my mother tongue. Writing is difficult because my grammar and my
vocabulary are poor and I spend much time looking for words in dictionaries.

Finally, my last internship and this course semester proved me that Web Development
was my vocation; the next step is to figure out whether I should go on studying in
research or if I should start working right after this MSc; the way I handle this
research project will answer it.

1.4 Presentation of the following chapters
The literature review chapter globally introduces and presents HTML5.

Two chapters of research look in depth on graphic capabilities of HTML5 and
CSS3 on one hand, and of Flash on the other hand. A third chapter compares
them and discusses their future.

Preliminaries to implementation and Benchmarks show the practical learning
and introduce the testing. Implementation and Benchmarks 1 and its
continuation (2) both present the artefacts created and their analysis.

Finally the conclusions summarize the findings and this work is evaluated.


2 Literature review chapter
2.1 Presentation of conference videos
The overview will be made with these 3 conference videos:
• “Features
you
want
desperately
but
still
can’t
use”
was
published
in

September
2008
and
is
presented
by
the
editor
of
HTML
5,
Ian
Hickson,

who
is
also
a
Google
employee.

• “Google’s
HTML
5
Work:
What’s
next?”
took
place
at
the
Google
I/O

Developer
Conference
in
May
2009
and
was
presented
by
Matthew

Papakipos,
director
of
HTML
5
Open
Web
Platform
efforts
at
Google.

• “The
future
of
HTML
5”
took
place
at
FOWA
London
in
October
2009
and

was
presented
by
Bruce
Lawson,
an
employee
of
Opera.

All of these have in common to present HTML 5 and its new features; but they
explain different features and by different manners so that these videos supplement
each other.
In this part, first, every video will be introduced by explaining what they are mainly
about and how they are handled.

2.1.1 “Features you want desperately but still can’t use”
The presentation from Hickson only presents the features that were already working at
this time. It looks like a prototype presentation for underground developers, his author
discovered a few times that some features were not implemented in a particular
browser, and he needed to debug his own samples he was coding in-live to make them
work. But he goes straightly to the point, by developing html files in live, viewers see
how it easy to develop with HTML 5. While the results are watched in different
browsers, it can be figured out that browsers had implemented at this time only a few
features and independently from the others.
The features Hickson presents in his samples are:
• video
tag
• local
and
session
storage

• drag
and
drop
API
• Form
Controls
• Canvas

Some pieces of code and demos of Hickson will be displayed to give some concrete
illustrations to the features presented.

2.1.2 “Google’s HTML 5 Work: What’s next?”
In the second presentation, first the speaker presents the new needs of web
applications and declares than most of them are being becoming web standards:
playing videos, giving access to webcam/microphone for video conferences, offering
offline abilities, etc. He expresses then Google’s main goal: fill in the gap between
native and web applications.


Web applications are still missing important capabilities like security and privacy but
they have great advantages: no installation required and always updated.
It is actually not only Google’s goal, but the whole IT world’s goal: Google offered a
web alternative to office (Google, 2009), adobe developed a web version of
Photoshop (Adobe, 2009), and Microsoft joins the movement with its Microsoft
Office Web Apps (Redmont, W 2009). Hence there is a war between heavyweights to
get their products monopolize the World Wide Web and this a new area where
Microsoft is not the certain winner in a competition which hopefully favors open
standards, standardization, etc. HTML 5 offers the tools to open the competition, to
provide less influent companies with means to create quickly efficient RIA.

After this introduction, Papakipos presents 9 features of HTML 5:

• Canvas
• Local
Storage
• Workers

• Application
Cache
• Video
• Rich
Text
Editing

• Notifications
• Web
Sockets
• 3D
APIs

• A
list
of
other
future
features

Some of them, like the Canvas, video and local storage, were already introduced by
Hickson ; but progress was made in the 9 months between the 2 conferences so the
speaker adds information without going in depth in the code like Hickson did.
Actually most of the features presented answered Google’s will explained in the
introduction: build more efficient web applications and therefore this conference is
not intended to individual web developers but to companies, communities of
professionals.

2.1.3 “The future of HTML 5”
Bruce Lawson goes further and not only presents some of the new features of HTML
5 but stressed on the importance of open web: HTML 5 is not just a new tool which
allows to develop pretty websites or better RIA (Rich Internet Application), Lawson
states HTML 5 as a new (free) challenger to Flash and Silverlight and he even
declares: “The web is too vital a platform for business for society to be in the hands of
any one vendor” and was applauded by his beholders.
Besides he states that HTML 5 does not replace HTML 4. To develop websites
consisting of static WebPages embedding images, keep working with HTML 4. Most
of the features that HTML 5 is bringing were already performed by using JavaScript
or Flash. With HTML 5 these animations, these scripts become Web Standards.
Then Bruce Lawson presents these features:

• Canvas

• Web
forms
• Geolocation

• browser
storage
• video

Here the most interesting is the presentation of the canvas where Lawson is the first to
speak about accessibility and Internet Explorer compatibility.


2.2 Overview of the new features
To get a better understanding of what HTML 5 is bringing to the web, instead of
being given as a very long list of features, features will be ranked among 5 main
categories:
• New
elements

• Multimedia

• Browser
Storage
and
others
offline
features

• Features
to
build
better
web
applications

• Forms
and
text
editing

• Other
gadget
features

2.2.1 New elements
HTML 5 was designed so that older browsers would be able to display it (Lawson,
2009). They would not be able to recognize the new elements but they would still
display the content. Anyway, many elements have been added in this new version of
HTML and here are they presented, ordered according to their function.
This part has been made using “New elements in HTML 5, Structure and semantics”
(Harold 2007).This article describes exhaustively the elements of HTML 5 and gives
samples of code to illustrate each of them. In this literature review will only be
summed the most important new elements of HTML 5.

2.2.1.1 Structural elements
In previous HTML, all developers used to assign id to their div elements to recognize
their functions like header, footer, main content, sidebar, etc. <div
id=”header”></div>
HTML 5 brings these new elements to replace div tags and propose a structure
common to all websites:

2.2.1.1.1 <header>
This corresponds to the head of the Web Page and includes usually the logo of the
company, an animation displaying the services, a menu, etc.

2.2.1.1.2 <section>
This is where the content of the Web Page is written, it might be a chapter in a book
or a section in a book.

2.2.1.1.3 <article>
The article should be included in a section and here would be written an independent
article for a blog, magazine, journal, etc.

2.2.1.1.4 <nav>
This is usually the sidebar, and here should be included a collection of links to other
Web Pages.

2.2.1.1.5 <footer>


This represents the end of the Web Page with usually copyrights, a link to contact the
owner of the Web Site, the Web Master, etc.
This is how the page should be displayed:

HEADER

SECTION <body>
<header></header>
NAV
ARTICLE <section>
<article></article>

ARTICLE <article></article>
</section>
<nav></nav>
FOOTER <footer></footer>
</body>
As well HTML 5 brings purely block semantic elements:

2.2.1.1.6 <aside>
It usually represents a tip, a note, a hint, a sidebar, something out the main content.

2.2.1.1.7 <figure>
This really useful element permits to add caption to a video, an image or any other multimedia content

2.2.1.2 Embedding Elements

2.2.1.2.1 Video
Embedding videos in the WebPages becomes as simple as embedding images. This
video tag is used in the webpage and define the source of the video to display. More is
explained in the 3rd part about new features.

2.2.1.2.2 Audio
It is just the same to embed audio files

2.2.2 Multimedia

2.2.2.1 Canvas
The Canvas, originally introduced by Apple in Safari, allows developers to draw
graphics with JavaScript code and does not require the user to download a plug-in to
visualize the graphics. Precisely, the canvas is a surface on which 2D pixilated images
can be drawn.


To get a sample of how it works, here is a preview of Hickson’s code and it draws a
line whose origins are random, in the canvas:
You need to add a canvas tag:

<canvas width="800" height="450"></canvas>

and this script in JavaScript:

<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
context.beginPath();
context.moveTo(context.canvas.width * Math.random(), context.canvas.height *
Math.random());
context.lineTo(context.canvas.width * Math.random(), context.canvas.height *
Math.random());
context.stroke();
</script>

To draw more complex shapes, a bunch of functions can be created, variables and
uses some of the methods created for the canvas (like the function fillRect() which
will draw and fill a rectangle according to the attributes defined).

At the moment there are 3 main issues:
• There is no accessibility in Canvas for the moment. Everything is pixilated by
script inside the canvas, even the text.
• This API is not implemented in IE (Internet Explorer) so an extra JavaScript
library is needed to enable canvas in IE: ExplorerCanvas (Google, 2009).
• There is no DOM (Document Object Model) presence. So elements cannot be
accessed and manipulated since shapes are drawn in the canvas like they
would be in Microsoft Paint. However this absence of DOM allows the canvas
to have huge performance and there are other ways to access some elements,
by using “labels”.
There is an alternative to canvas: SVG (Scalable Vector Graphics) but its spec is six
years old and its performance much lower. Like XAML for Silverlight or Action
Script for Flash, it draws vector graphics. More other text remains here and is
accessible. Many articles can be found on the web explaining in which case Canvas or
SVG should be chosen for instance but this literature review will not go further and
more information about it will be given in the dissertation. (Vukicevic, V 2006)

2.2.2.2 Video
Embedding videos in the WebPages becomes as simple as embedding images. The
video tag is used in the webpage and visitors can watch it without using any plug-in:

<video src="firefox.ogg" controls></video>


It has built-in playback controls and they can be added by simply including the
“controls” attribute. Filters can even be added to the video (like black & white or
blurry rendering).

However there is a disagreement between browser manufacturers on the video codec
to use. All of them would like to use only one standard video codec but Apple and
Google support H.264 while Opera and Mozilla support Ogg Vorbis. Hence there is
no standard codec defined in the specifications for instance and it is up to the actors to
find an agreement.
Besides there is no support for any streaming protocol and developers are looking at it.

2.2.2.3 Drag and drop
It gives the ability to drag and drop photos, texts, urls, etc into a canvas.

2.2.2.4 3D APIs
You can even draw 3D with JavaScript, and developers are wondering about
implementing into html 5. They are providing basic fundamental APIs to allow people
to use it.

2.2.3 Browser Storage and others offline applications support

2.2.3.1 Local Storage and Session Storage
Their purpose is to store data client side. Developers are no more restricted by the
limitations of cookies (in storage size, etc).
2 main APIs are provided:

• The
database
API
which
is
made
of
a
SQLite
database.
It
is
quite
easy
to

use
for
a
developer
if
he
is
familiar
with
server
side
programming

• the
structure
storage
API
(local
storage)
which
consists
in
key/value
pairs

2.2.3.2 Application Cache
It provides a mechanism that allows web pages to ask the browser to cache locally a
list, a “manifest” of files they need to work locally. It enables users to visit websites
without being connected to the cloud.

2.2.4 Features to build better web applications

2.2.4.1 Workers
It offers web applications a way to compete with native applications which use
threads and processors. Web apps can run threads in background to do complex
calculations without locking the browser’s display.

2.2.4.2 Web Sockets
“Allows bi-directional communication between client and server in a cleaner, more
efficient form than hanging post/get requests”

Goal is to get persistence over communication with the server much simpler.


2.2.4.3 Notifications
Notifications would like to provide less intrusive event notification mechanism than
the common alert() method which locks up browsers. They need to be editable, give
more information, work regardless of what tab or window the user is focusing on, etc.
They are currently being prototyped.

2.2.5 Forms and text editing

2.2.5.1 Web Forms
Not only coding forms is easier with HTML 5 but developers care no more about
validation. By defining a type for each input, the browser will check its validity.
Some of the types supported for instance are: email, date, files, range, pattern etc.
Web Forms provides also other useful attributes.

2.2.5.2 Rich text editing
How tags behave when they are included in content editable varies from a browser to
another because content editable is implemented for instance in different ways.
In web services like Google Docs, users have to download JavaScript handling with
compatibility between different browsers and this is a critical waste when they are
using their mobile phone or accessing the web with a bad connection. Hence this must
be directly implemented in every browser the same way. Companies are working on
this issue.

2.2.6 Other gadgets
There are plenty of other features that need to be implemented but that are not
priorities for the moment and being postponed like:

2.2.6.1 Geolocation
Using Google Maps to define where the user are and propose them services.

2.2.6.2 Webcam and microphone access
To allow video conferences.

2.2.6.3 Uploads
To make them easier to use.


3 Research on HTML 5 & CSS3
Hyper Text Markup Language 5 (HTML5) and Cascading Style Sheet 3 (CSS3) are
new web technologies that aim at building Rich Internet Applications (RIA) directly
in the browser, using HTML, CSS and JavaScript. These technologies’ specifications
are not finished but their implementation in web browsers has already started; hence
in the first part, their availability on computers and on mobile phones will be looked
at. Many developers have already developed websites to try the new features of
HTML5 and CSS3; their work is presented in the second part according to their
category: Music and video, Cartoons, Games and Web applications. Finally the
potential impact of HTML5 and CSS3 on the web will be investigated.

3.1 HTML5 & CSS3 Availability
HTML5 and CSS3 have made a real buzz in the IT world since their first drafts were
officially presented. This enthusiasm can be demonstrated by the investment of web
giants (Google, Apple, Mozilla) and the speed of their implementation of HTML5 and
CSS3 in their own web browsers; this is presented in the first part. Then the
availability of HTML5 and CSS3 are presented both on computers and mobile phones.

3.1.1 HTML5 & CSS3 are conquering the Desktop and the mobile Web.
Sundar Pichai presented at Google I/O 2010 graphs of the evolution of the adoption of
HTML5 features in most popular web browsers (Pichai, 2010):
The web browsers concerned are:
• Internet
Explorer
(IE)
(displayed
in
purple)

• Opera
(red)

• Chrome
(orange)

• Safari
(green)

• Firefox
(blue).

The HTML5 features covered are:
• Video
(first
column)

• Canvas
(second
column)

• SVG
(and
so
on…)

• WebGL

• Application
Cache

• Geo-‐Location

• Web
Workers

• Web
Sockets

• Web
Storage.

Figure 2 - HTML5 Availability in may 2008
(Google, 2010)


Figure 4 - HTML5 Availibility by the end of
Figure 3 - HTML5 Availability in May 2009
2010 (Google, 2010)
(Google, 2010)

These graphs illustrate the rapid implementation of the HTML5 features. Such graph
presenting the implementation of CSS3 features was not found, but considering that
its conception started roughly at the same time that HTML5 and that its current
implementation is as advanced as HTML5, the same observation could be made about
it.
From these graphs, it seems that all browsers but Internet Explorer will have fully
implemented all HTML5 features. This is unlikely as other more accurate sources
presented below suggest it, but most of the features will be indeed available.
Besides it is clearly observable that Microsoft started to implement HTML5 features
in its web browser very lately but Microsoft also did not take part early and fully in
the development of their specification (Hickson, 2009). This is a curb to HTML5
because despite the continual decrease of Internet Explorer’s popularity, Microsoft
still controls a big part of the Web-browsers share (nearly 30%) (refsnes Data, 2010).

3.1.2 Availability on computers
HTML5 and CSS3’s availability on a web browser depends on its level of
implementation; every web vendor manages the implementation of the features on its
own.
To define the availability of HTML5 and CSS3 on computers, you also need to
consider the popularity of the web-browsers that implement those features. The next
figure “Browser Statistics (October 2010)” shows the percentage of worldwide web
users per web-browser. Firefox is leading the market with 44,10%, Chrome is second
with 29,70% and Internet Explorer is third with 19,20%. Safari and Opera are behind
and gather about 6% of all web users.


Figure 5 - Browser Statistics (refsnes, 2010)

It is also necessary to consider the trends because the availability of HTML5 in the
next year will also depend of the popularity of the different web-browsers though they
are expected to move. In the last year, according to the graph of browser statistics
from October 2009 to October 2010 (refsnes, 2010), Chrome’s web usage increased
by 11%, Internet explorer decreased by 8% and Firefox by 3%; Opera and Safari are
stable. If the trends go on this way, Internet Explorer could loose more market share
and get behind Chrome and Firefox.

Figure 6 - Browser Statistics (from october 2009 to October 2010) (Refsnes, 2010)

Not only the current percentages but also the trends show that Internet Explorer is no
more leading the market of web-browsers as it used to (resfnes,2010), but its
importance is also decreasing. Despite the fact that Internet Explorer is the least
advanced web browser in HTML5 and CSS3 implementation, its inferiority in market


share could lead developers to start using the new web technologies even though they
are not fully available and particularly on Internet Explorer.
On Microsoft operating system (Windows), only the web browser corresponding to
the Microsoft brand is installed: Internet Explorer. Hence, Firefox and Chrome need
to be installed manually by the user. This shows that users deliberately choose to use
Firefox or Chrome instead of Internet Explorer and this suggest that web users may
prefer web browsers that are favourable to new technologies.
This study also shows that Safari and Opera apparently play a minor role in the
market share in comparison with the other ones. Hence it is necessary to look more
carefully at the implementation of features in the three giants that are Firefox, Internet
Explorer and Chrome.

3.1.2.1 Current availability of HTML5 & CSS3 features
A few websites keep up to date the availability of HTML5 and CSS3 features in all
modern browsers; the aim is to present the advance in their implementation and
inform developers of what features they can use in what browsers. Alexis Deveria
(2010) created one of those useful websites and the summaries for HTML5 and CSS3
are displayed below.
These two below figures present the percentage of HTML5 and CSS3 features
developed for the same web browsers as presented on the Google I/O: Internet
Explorer, Firefox, Safari, Chrome and Opera. The different versions of these web
browsers are also taken into account and show the advance of the implementation
(from the two version back to the next version planned for late 2011). With the
HTML5 features is also integrated its JavaScript Application Programming Interface
(API); an API consists of a set of objects and functions that developers can use to
perform complicated tasks (Wannemacher, 2007).

Figure 7 - HTML5 and ITS Javascript API Availability (DEVERIA, A 2010)

Figure 8 - CSS3 API Availability (DEVERIA, A 2010)


While Internet Explorer’s advance is very poor (only 28% of all HTML5 features,
27% of all CSS3 features), all other browsers already implemented more than half of
all features. The two other giants in terms of web-usage implemented 69% (Firefox)
and 86% (Chrome) of HTML5 features, 74% (Firefox) and 89% (Chrome) of CSS3
features.
This current implementation on Internet Explorer 8 is a brake to HTML5 and CSS3
and is very too low for developers to dare using it to develop business websites. The
current implementations on all other browsers are however enough, and considering
that all browsers did not implement the same features, this means that developers can
already experiment all planned features on HTML5 and CSS3. Many websites, as
presented in the next part, show HTML5 and CSS3 potential, but very few used them
for business driven websites.
The next version of all web-browsers (IE 9, FF 4, Chrome 8) for the upcoming year is
however more promising and will put the HTML5 and CSS3 implementation to a
further step: IE will have 54% of HTML5 features and 71% of CSS3 features
implemented. Firefox and Chrome will have 94% of HTML5 features and 89% of
CSS3 features. Considering the trends in Web Usage, the importance of IE will be
even lower. Besides according to Jeffrey Zeldman, the mentality in development
evolved and developers now prefer to use the new features brought by the most
advanced web-browsers while they ensure that the websites are still usable in other
web browsers, and among them IE (Zeldman, 2010). For all those reasons, in the next
year it is very probable that more and more business websites will be developed with
HTML5 and CSS3, even if they do not present the high level of interactivity of Flash.

3.1.2.2 Libraries dedicated to availability
To compensate the heterogeneous implementation of HTML5 and CSS3 features
among brothers, and especially the late investment of Microsoft on IE, developers
created very useful libraries:
Modernizr (Ates, 2010) provides functions to evaluate the implementation of a feature
on the user’s web browser and act consequently. HTML5 shiv (Sharp, not dated)
renders properly the new elements in HTML5 on IE even if they are not implemented
yet. ExplorerCanvas (Arvidsson, 2010) renders the HTML5 canvas on IE although it
is not implemented yet. Google Chrome Frame (Russel, 2009) embeds the Chrome
JavaScript engine within Internet Explorer: whatever HTML5 feature Chrome
implemented, it is made accessible in IE.
If features are not developed in all web browsers, developers can define behaviours
according to the web browser’s implementation. Some HTML5 features not natively
implemented in IE can be turned on due to libraries; however the performances might
be lower.

3.1.3 Availability on mobile phones
Jason Grigsby (2009) thinks that some features are critical for the mobile web and
therefore the development of HTML5 will be driven not by computer needs but by
mobile needs; the offline support, canvas & video, and the geolocation API are some
of these features.


The next two figures represent the worldwide sales of smartphones by operating
system in the third quarter of 2009 and 2010 (Gartner, 2010).

Figure 9 - Worldwide smartphones sales to end users by operating system in third quarter 2009
(gartner, 2010)

The four leaders in 2009 are Symbian (45%) owned by Nokia, Research in Motion
(RIM) (21%) the manufacturer of Blackberry smartphones, iOS by Apple used on
iphones and ipads (17%) and Microsoft Windows Mobile (8%) (Gartner, 2010).

Figure 10 - Worldwide Smartphones sales to end users by operating system in Third quarter
2010 (Gartner, 2010)

In 2010, Google conquers the market and comes second (25%), after Symbian (37%)
and before iOS (17%) and RIM (15%); Microsoft decreases by 5% (Gartner, 2010).
These trends seem to demonstrate that users are favouring companies that focus on
new technologies as Google (who won a big marketshare) and Apple (who owns an
important market share and keeps it while its products are among the most expensive
devices) do.
Currently the incorporated web browsers of the apple, nokia, palm-pre and android
devices are based on the webkit engine (that is also the engine of the Chrome and


Safari web-browsers) and are implementing the HTML5 and CSS3 features (Grisby, J
2009). This statement is demonstrated by the following graph that shows the HTML5
Mobile browser support for 20 popular smartphones. The nine smartphones that
support the most HTML5 are using Symbian, Android and iOS.
The two other major mobile device platforms are Windows Mobile and Rim’s
Blackberry. However the Windows Mobile platform, as seen on the previous graphs
lose market share, mostly because of its principal manufacturer HTC that is
incorporating Android OS on its mobile phones instead. RIM has its own mobile web
browser that is not based upon any major web vendor’s engine and is buggy in
comparison with its competitors. However on these platforms, the Opera mobile web
browser is popular and should compensate those weaknesses (Grisby, J 2009).

Figure 11 - HTML5 Mobile browser Support (Rutgers, A nd)

3.1.3.1 Current availability of HTML5 & CSS3 features
There are very few statistics on the availability of HTML5 and CSS3 features on
mobile devices and they are not as complete as figures that can be found for the
desktop environment.


The two next figures show the percentage of HTML5 and CSS3 features implemented
on iOS Safari that is used on all Apple devices (iphone, ipad) and on Opera Mobile
and Mini. The expected percentages of availability of the upcoming versions of these
mobile web browsers are missing but they can be compared with the forecast for the
web browsers of the same companies on the desktop environment, since they use the
same engines as their “older brothers”.
The iOS Safari for mobile devices has currently implemented only half of HTML5
features but the browser for computers is expected to increase by 14%, so a similar
increase could happen on the mobile version.
The Opera web browser on Desktop however is not expected to implement many
other features. However Opera probably owns a bigger market share on mobile
devices than on computers since its web browsers have 50millions users on the
mobile version and 50 millions on the desktop version (Opera, 2010), while there are
nearly two billions of total Internet users on computers (Miniwatts Marketing Group,
2010), and less than one billion of total smartphone users (Middleton, 2010).
However if Jason Grigsby (2009) is right about the fact that HTML5 is going to be
driven by mobile phones, the implementation on mobile phones should be expected to
rise dramatically.

Figure 12 - HTML5 and ITS JAvascript API Availability on mobile web browsers (deveria, a
2010)

Figure 13 - CSS3 aPI Availability on Mobile web browsers (Deveria, A 2010)

HTML5 and CSS3 features are expected to get much more accessible on mobile
devices and especially on iOS and Android platforms that are leading its development
with the webkit engine. However companies using the Symbian OS and RIM still
need to show their investment.


3.2 What is HTML5 & CSS3 used for (at the moment of this
writing)?
Many developers have already developed websites to try the new features of HTML5
and CSS3; their work is presented according to their category: Music and video,
Cartoons, Games and Web applications. Even if this dissertation is focusing on the
graphic capabilities of new technologies competing with Flash, and therefore on the
HTML5 Canvas and CSS3 new properties dedicated to animation, its scope is a little
bit widened to introduce other HTML5 features that are necessary to build Rich
Internet Applications (RIA) or multimedia websites (while those new features in
HTML5 are already provided by Flash). Hence Music and Video introduces the
HTML5 music and video features; cartoons, Games and web Applications are mainly
about the HTML5 and CSS3 graphic features but also mention offline and other
HTML5 features.
Since these technologies are new and mainly experimental, most of the works done
are focusing only on specific features and there are not very complete web
applications using all new features. For that matter, websites are also organized
according to the specific features concerned: for example, for the Games main
category there is a 3D sub category.
This research on HTML5 and CSS3 was the very first part of the report written so the
samples of HTML5 and CSS3 websites that were studied here are at least five months
old. New animations and applications were developed ever since but the 5 next
months were dedicated to the rest of the dissertation: research on Flash, learning,
implementation and benchmarks. This situation is discussed in the Conclusion.
There is no “advertisement” sub chapter, contrary to the research on Flash because
there are not such samples of HTML5 or CSS3 websites. These technologies are still
not mature enough to be used in businesses, and this is as a matter of fact one of the
purposes of this research: to find out whether HTML5 and CSS3 can now be safely
used in businesses, instead of Flash.

3.2.1 Integrated Music & Video
Audio and video are fields that Flash made accessible on the web and now leads (see
next chapter: research on Flash). But some HTML5 features cover those fields and
offer an alternative to Flash. Hence the audio and video HTML5 features are
presented below.

3.2.1.1 Audio
The audio element is currently implemented on all web browsers but IE and is as
simple to use as the image tag: indeed to insert an audio file on a web page you need
to write this code:
<audio src="myAudioFile.ogg" controls="controls">

Your browser does not support the audio element.

</audio>


However there are still debates on the codecs to use and the below figure shows what
codec can be read on every web browser. In fact the different web vendors did not
agree on a unique codec to use. Most of them can read the wav format but there is a
need for a compressed format otherwise embedding audio on the web with HTML5
will require to load huge files and such a solution cannot be accepted on mobile
phones for example where users may not access broadband connections. Otherwise
some web browsers only read the OGG format while others only read the MP3 or
AAC format (Deep Blue Sky, 2010).

Figure 14 - HTML5 Audio Codecs (Deep Blue Sky, 2010)

Most samples involving sound, and which are described in this research, are only
embedding a song and are not playing it as an event though this is necessary in games
for example. However the audio HTML5 API provides functions as “play”, “pause”
and should allow developers to use sounds how they want. No study has been made
up to now to measure the performances of HTML5 audio.

3.2.1.2 Video
A video can be inserted on a web page using this code:
<video src="movie.ogg" width="320" height="240" controls="controls">

Your browser does not support the video tag.

</video>

There is the same problem as for the audio element: the video element is currently
available on all web browsers but IE, and web leaders are debating on the codec to
use; however this situation is more critical:
• The
Ogg
Theora
codec
is
not
accepted
by
Apple
for
hardware
issues

• The
H264
codec
is
not
supported
by
Opera
and
FF
for
licenses
issues

(Pilgrim, 2010)

Recently Google apparently brought a solution: WebM is royalty free. FF, Opera,
Chrome and IE announced their support for the VP8 Codec and WebM. Only Apple
did not make such announcement (Mediati, 2010).


Many video players are already implemented, and even video streaming leaders are
using HTML5, among them Youtube and Vimeo (templates blog, 2010). It shows that
developers can use HTML5 Video.
Besides video can be embedded in a canvas and manipulated in many ways: split in
slices, explosions, integrated in a sort of 3D Movie Theater, applied with filters (black
and white filter for example). Nonetheless, such effects may involve high processing
and require hardware acceleration. On this field, Flash uses the potential of users’
graphic cards to display efficiently its animation or video but HTML5 does not use
hardware acceleration natively. The WebGL project is focusing on this matter but this
is still experimental (Khronos Group, 2010).

Figure 15 - HTML5 Video CODECS (Deep Blue Sky, 2010)

Hence for both video and audio, either developers should wait for web giants to agree
on a single codec to use, or they can start using html5 video but should provide two
different versions of their content to ensure that all web browsers can read them.

3.2.2 Cartoons
HTML5 Canvas and new CSS3 properties bring new APIs to draw graphics on the
web and animate them. These APIs provide simple functions to draw specific shapes,
import images, modify the appearance of already drawn shapes or images and animate
them (translate and rotate). On the other hand, Flash provides a complete authoring
tool to create quickly complex shapes, integrate them on a canvas, handle their
behaviour and animation, manage scenes, etc.
To draw a character is obviously easier by using a painting application than by typing
lines of code. To animate it is even worse. So Flash will certainly always be easier
and more efficient to use than these new web technologies until an equivalent
authoring tool is provided for HTML5 or CSS3.
The purpose of this study here is to see if HTML5 and CSS3 provide sufficient APIs
to create cartoons by ensuring that cartoons built with them exist. Then it investigates
how difficult it is to write code to create a cartoon to ensure whether designers could
afford the time to make animations with it. Finally the study aims at looking whether
web-browsers could display these animations smoothly.


Two animations are presented, the first built with HTML5 and the second with CSS3.

3.2.2.1 HTML5 Tomte & Goat

Figure 16 Tomte and goat (2009)

“Tomte and Goat” is at the moment of writing the only HTML5 animation. It
presents two characters walking and chatting on a static background. It is very basic:
they walk, move their arms, grab an object and their speech is displayed in bubbles
(tomteAndGoat, 2009).
It is developed entirely with canvas + JavaScript (JS) and consists of 2000 lines of
code. The code presents scores of functions: “say”, “walkright”, “runleft”, “goto” for
actions for example, and “angry”, “shock”, “horror”, “smile” for expression.
This is the only HTML5 Canvas attempt to create a cartoon and this is not thrilling
because:

• The
graphics
are
childish

• The
animation
is
basic:
it
only
consists
of
objects
translating
and
rotating

• There
is
only
one
scene.

Nonetheless the basics for creating an animation are available here with HTML5 and
JS:
• You
can
import
images
or
draw
images
on
a
canvas.

• You
can
rotate
or
translate
objects

The amount of work produced is not worth the results in comparison to the next
animation presented.

3.2.2.2 CSS3 Spiderman

Figure 17 CSS3 Spiderman (CALZADILLA, 2010)


This animation is developed with HTML5, CSS3 and jQuery. The animation is much
more complex than on the previous one, backgrounds are moving, there are several
short and different scenes (being “shot” from different angles). The animation
involves also music and this is an HTML5 audio tag. The overall quality of graphics
is much better. The code, inserted in the appendixes, is much easier to read
(CALZADILLA, 2010).
The process for creating this animation was:
1. Character
and
background
art
(photoshop/illustrator)

2. Character
rigging:
assemble
the
parts
of
the
body
(photoshop/illustrator

then
HTML5)

3. Animate
the
character
(CSS3)

4. Assemble
the
different
scenes:
make
the
transitions
(jQuery)

Although there is this only Goate and Tomte animation in JS + canvas, there are
already many attempts in CSS3, it must be then more convenient if developers choose
CSS3.
Rotation, scaling and movements are enough to create simple animations. However
shape transformation is also necessary: for example, the progressive transformation of
a square into a circle as it is possible in Flash. But it cannot be handled in CSS3 for
the moment.
As a conclusion to this Cartoon part, it seems that CSS3 has more potential to create
cartoons than HTML5. The samples in CSS3 are promising. But it is still tough to
create animation only by coding and unless an efficient authoring tool is available,
Flash will stay as a leader on this field.
As far as the performances are concerned, both animations could be displayed in web
browsers and present a decent frame rate so that they are played smoothly.

3.2.3 Games
Cartoons involve drawing graphics and animating them. Games may involve drawing
graphics, animating them, doing calculations, storing data, managing input controllers,
etc. In such a complex deal of requirements, the graphic engine must be efficient
enough to support the extra processing dedicated to other tasks.
The 3D feature may be about to be democratized on the web. Up to now, it was hard
to embed 3D graphics in websites without plug-ins because web browsers could not
access the capability of the hardware, and above all, the users’ graphic cards. Not only
HTML5 and CSS3 bring APIs to render 3D graphics but also once fully implemented
by web browsers, they will be able to access hardware acceleration and render very
complex 3D graphics with reasonable performances. Since 3D seems nowadays
mostly used in games, its part dedicated is inserted here.
Developers already started to use HTML5 to develop games. Some of these games
were studied and their analysis is presented.

3.2.3.1 3D
3 dimensional elements (3D) can be used to display products and make them
interactive: by moving the mouse around the object, a user can change the angle of


view. But if 3D is on the contrary almost ubiquitous in video games for desktop, this
is less common in online games and even seldom on commercial websites.
The biggest constraint is because of the performances: to display dynamically an
environment composed of dozens of models consisting of hundreds of polygons, the
game needs to be able to access the processing power of the player’s graphic card. Up
to now, this could be done in Flash but there was no native 3D API in HTML or
JavaScript. Hopefully, HTML5 brought its own 3D Canvas API to create 3D models
in JavaScript with the HTML5 Canvas. Other groups are working on providing a
more complete API for developers and integrating the hardware acceleration: X3D or
WebGL (W3D Consortium, 2010).
The following samples show the first attempts to use HTML5 to create 3D graphics.
Their screenshots and the resulting analysis are presented while a deeper description
is inserted in the appendixes.

Figure 20 - Javascript WOLFenstein
Figure 18 - MOnk Head Figure 19 - Interactive
3D (Seidelin, 2008)
(Toxicgonzo, not dated) Towel (Gyulabo, not
dated)

Figure 21 - 3D Walker (Joffe,
Figure 23 - Quake 2 WEBGL
Canvascape - "3D Walker",
Figure 22 - Earth 3D (Haustein, 2010)
2005)
Canvas(Joffe, Earth 3D
Canvas, not dated)

The monk head is a 3D model rotating on himself. The interactive towel is a 3d model
of a towel that swings when clicked. The JS Wolfenstein 3D is a port of the classic
first person shooter (fps) on JavaScript and uses the canvas to be displayed. The 3d
Walker is another FPS created with HTML5. The 3D earth is a model of the Earth
that you can rotate and zoom. And Quake 2 WebGL is the port of the classic FPS to
web-browser and using the library WebGL.


The performances of the monk head in frame rate are very disparate according to the
different browsers: 40fps in Opera, 30 in Chrome and 15 in Firefox (Toxicgonzo, not
dated). So it shows that they depend on the advancement of the implementation of
HTML5 in each of those browsers (which are –for the moment, in 3D- at their very
beginning); these performances are therefore expected to increase greatly in the future.
However with the hardware capability increasing, we might see much more complex
applications taking benefit of the Central Processing Unit (CPU) and Graphic
Processing Unit (GPU) usages through hardware acceleration. Anyway 3D animation
by software rendering (only canvas + JS) cannot present high performances and will
be used only on simple animations. Quake 2, presented below, is an example of these
complex games that take benefit of the hardware acceleration.
The Wolfenstein 3D game uses “ray casting” to simulate 3D space with good
performances on modest hardware: the intersections between a ray and a surface are
calculated; since the camera angles of the shooter are locked, for each representation
of an object (according to a defined angle) can be presented an image, therefore
according to your position in the space, while looking to an object, its right
representation is displayed to you (Seidelin, 2008). This technique can be used to
create games that can be rendered directly in the web browser and do not need
hardware acceleration. However the resulting graphics are far less appealing though
nowadays players may expect good graphics.
The Earth animation is the first of this list to be done with the 3D Canvas API.
However this 3D Canvas API is still experimental and requires to use special builds of
web browsers.
It seems like you can create simplistic 3D apps/games with the canvas but you do not
get great performances: either animations display a very limited number of simplistic
3D models, or the animation presents a poor frame rate and looks laggy. The Quake 2
port is the first ever example of a very complex video game directly embedded in a
web browser and uses WebGL (Haustein, 2010). It is still complicated to manage to
play it because users need to rebuild the whole game with a developer tool, download
a special build of their web browser and even install special plug-ins. But this sort of
game intends to be in term directly accessible in a web browser without the need of
installing any other plug in or software. However no one know when such feature will
be integrated in web browsers.

3.2.3.2 HTML5 Canvas games
To promote HTML5 and CSS3 new technologies, some websites list all web
applications or animations that are created using those technologies. CanvasDemo is
one of them and organises the existing demonstrations of HTML5 Canvas into
categories. Hence the games listed in the categories “Shooting”, “Puzzle”, “Platform”
and “Strategy” were observed and their conclusions are presented here (Smith, not
dated).
All shooting games involved very basic 3D graphics with low resolutions. The only
exception is Quake 2, but as it has been stated previously, this game cannot be played
natively in the browser for the moment.
The other games generally involve poor graphics, simplistic interactivity and had a
very low frame rate unless they involved very few elements.


Hence at the moment, all sorts of games can be developed with HTML5 canvas, but
they cannot compete with Flash games in terms of graphical aspect, interactivity and
performances (frame rate and load time).
By the way, while there are about 50 HTML5 games listed on CanvasDemo, CSS3-
only games are very rare and hard to find; CSS3 can style the layout, draw graphics, is
starting to provide animation, but to develop a game, it requires using a programming
language as JavaScript.

3.2.4 Web applications
Some libraries were developed to enhance the HTML5 API and are exhibited here. It
might be useful for developers to have a look at them before they start to develop with
HTML5 because these libraries can both save them time and make easier to develop
complex graphics or web applications.
Many websites or web applications were developed using HTML5 and CSS3. Some
of them are introduced and analysed; they are organized according to the following
categories:

• User
Interface

• Utility,
analytic
and
content
applications

• Painting
and
photo
editing
applications

3.2.4.1 JavaScript Libraries
In this part are presented libraries that can save developers a lot of time and especially
in game development.
Physics are an essential part of games. Either it involves gravity, collision detection,
reactions, or other interaction with the environment or an object, calculations must be
performed to handle the situation. So here were studied two physics libraries, one for
2D graphics: Box 2D JS (Yasushi, 2008), and another for 3D graphics: Bullet.js
(pl4n3, 2010).
The third library, Processing.js (Resig, 2010), offers a complete API based on the
HTML5 2D Canvas to create web applications, animations and video games.
The fourth library is RGraph (RGraph, 2010) focus on creating graphs and charts.
These four libraries are presented with more depth in the appendixes.
The existence of these libraries proves that there are already complete sets of
functions for developers to quickly create web applications. It requires for developers
deciding what libraries to consider and whether their use is really worthy for a project.
These libraries offer also many samples and they can be used whether to learn how to
use the API or to benchmark the engine and approximate whether it is performing
enough for a specified type of application.
These libraries also use the HTML5 graphic APIs so their performances are expected
to improve since web-browsers are implementing HTML5 features and improving
their rendering.
Besides, libraries and


3.2.4.2 User Interface
3 HTML5 examples of user interface were observed and are described with more
depth in the appendixes: the digital comic app Website (MadCap Studios, Inc, 2010),
a User Interface (UI) dial with snaps created with processing.js (F1LT3R, not dated),
Momoflow (Momolog, 2009) that is a mac coverflow created with jQuery. The fourth
example, Photo transitions (Apple, not dated), is animated with 2D and 3D CSS3
transitions.
Their aim is to add animation or special interactivity to the UI but the HTML5
websites are not built only with HTML5 Canvas and its graphic JS API but also with
extra libraries (jQuery, processing.js). Hence the development of the UI animation is
too complicated here and requires loading extra libraries, which increase the load time
of the websites. Finally the last example in CSS3 presents the most simplistic code
and is both smooth and beautiful.
The CSS3 properties are a better solution to enhance the interface of a website with
animation:
• It
requires
far
less
code
and
is
easier
to
create
the
animation.

• If
the
web-‐browser
did
not
implement
the
CSS3
feature,
it
does
not

change
the
website
aspect,
it
just
does
not
apply
the
animation
and
the

website
is
still
accessible.

• It
does
not
require
an
extra
JavaScript
library
so
it
does
not
process
extra

code
nor
download
extra
file.

3.2.4.3 Utility, analytic and content Applications
Some web applications were created and used the HTML5 canvas for their graphic
user interface (GUI). The samples used for this study are quickly presented here with
their analysis. They are described with more depth in the appendixes.
• Slippy
map
draws
a
map
of
the
world
and
the
user
can
grab,
slide
and

zoom
it
(Hutt, not dated).

• CloudKick
displays
in
real
time
a
cloud
monitoring
system
on
a
3d
space

with
processing.js
(Team Cloudkick, 2010).

• Comments
show
when
comments
were
posted
on
a
blog
using
a
graph

with
processing.js
(Ryall, 2008).

• ThinkApp
is
a
tool
to
create
personalised
mind
maps
(Sands, not dated).

• Graph.tk
is
a
math
tool
that
draws
functions
and
resolves
differential

equations
(graph.tk, not dated).

All these samples show that developers can use the HTML5 canvas to create
graphical web applications. Some of them load content from other web services
(twitter, blogs, data servers) and present it on graphs in real time with a very good
latency. The performances with the Canvas are here very good: the applications are
smooth to use and do not lag because, contrary to HTML5 games, the graphics here
are simplistic and the required processing power to display them is quite low.
As stated before, libraries exist and provide complete APIs to create graphs for
analytic web applications.


However care must be taken when implementing text/content based applications
concerning availability. The text must be accessible, this means that it should appear
in the code source of the web page for two reasons:
• It
needs
to
be
readable
by
impaired
people
that
use
screen
readers.

• For
Search
Engine
Optimization
(SEO)
and
this
is
one
of
Flash
biggest

weaknesses:
the
content
needs
to
be
available
and
analyzed
by
Search

engine
bots
so
that
the
website
is
well
referenced.

The group working on the HTML5 specifications is working on a canvas availability
API to make content inserted inside the canvas accessible; but they are still working
on its specification so the API will not be implemented soon. Hence developers must
not insert the content in the Canvas. They must use the canvas as dynamic
background but the text must be inserted outside the canvas.

3.2.4.4 Painting and photo editing applications
The most impressive Rich Internet Applications (RIA) that take large benefit of
HTML5 capabilities are painting and photo editing applications. Three great
applications were looked at. They are described in more depth in the appendixes but
their analysis is explained here.
• Sketchpad
(Orange Honey, not dated)
and
ChromaBrush
(Google, 2010)
are

two
painting
web
applications
and
use
Canvas
2D,
Canvas
2D
SVG,
jQuery

and
JavaScript.

• Darkroom
(Orange Honey, not dated)
is
a
photo
editing
web
application

that
uses
canvas
2D
and
jQuery.

Figure 24 - Chromabrush (Google, 2010) Figure 25 - Sketchpad (Orange Honey, not dated)

Figure 26 - Darkroom (Orange Honey, not dated)


Can HTML5 and CSS3 Replace Flash

Can HTML5 and CSS3 Replace Flash

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (16)

Semelhante a Can HTML5 and CSS3 Replace Flash

Semelhante a Can HTML5 and CSS3 Replace Flash (20)

Mais de Jeremie Charlet

Mais de Jeremie Charlet (10)

Último

Último (20)

Can HTML5 and CSS3 Replace Flash