Your SlideShare is downloading. ×
CAN NEW WEB TECHNOLOGIES            HTML5 AND CSS3                 KILL FLASH?                   MSc Computer Science     ...
AbstractThis dissertation investigates the new web technologies Hypertext Mark-up Language5 (HTML5) and Cascading Style Sh...
 1	   INTRODUCTION	  CHAPTER ................................................................................................
5.1	   COMPARISON	  OF	  HTML5,	  CSS3	  AND	  FLASH ........................................................................
8.3.3	   CPU	  Usage:	  as	  above,	  Flash	  wins	  and	  Canvas	  needs	  to	  get	  improved ................. 88	     ...
1 Introduction chapter1.1 Aims and Objectives1.1.1 AimsFigure out whether the new web technologies: Hyper Text Markup Lang...
§Select	  animations	  from	  the	  above	  list	  and	  develop	  for	  each	  a	                            sample	  in...
HTML 5 Canvas Report1.2.1.2 Learn Flash3 to 4 weeksThe flash section of the developer centre from adobe website is a rich ...
In this stage comes the development of the chosen 10 animations in bothtechnologies: HTML 5’s canvas with JavaScript and F...
Figure 1 - Gantt Chart1.2.2 Differences with the planned scheduleFinally as stated in “Aims and Objectives”, a new technol...
1.3 Intellectual ChallengeThis work is my first personal research and is similar to my previous internship inWeb Developme...
2 Literature review chapter2.1 Presentation of conference videosThe overview will be made with these 3 conference videos: ...
Web applications are still missing important capabilities like security and privacy butthey have great advantages: no inst...
2.2 Overview of the new featuresTo get a better understanding of what HTML 5 is bringing to the web, instead ofbeing given...
This represents the end of the Web Page with usually copyrights, a link to contact the owner of the Web Site, the Web Mast...
To get a sample of how it works, here is a preview of Hickson’s code and it draws aline whose origins are random, in the c...
It has built-in playback controls and they can be added by simply including the“controls” attribute. Filters can even be a...
2.2.4.3 NotificationsNotifications would like to provide less intrusive event notification mechanism thanthe common alert(...
3 Research on HTML 5 & CSS3Hyper Text Markup Language 5 (HTML5) and Cascading Style Sheet 3 (CSS3) arenew web technologies...
Figure 4 - HTML5 Availibility by the end ofFigure 3 - HTML5 Availability in May 2009                                      ...
Figure 5 - Browser Statistics (refsnes, 2010)It is also necessary to consider the trends because the availability of HTML5...
share could lead developers to start using the new web technologies even though theyare not fully available and particular...
While Internet Explorer’s advance is very poor (only 28% of all HTML5 features,27% of all CSS3 features), all other browse...
The next two figures represent the worldwide sales of smartphones by operatingsystem in the third quarter of 2009 and 2010...
Safari web-browsers) and are implementing the HTML5 and CSS3 features (Grisby, J2009). This statement is demonstrated by t...
The two next figures show the percentage of HTML5 and CSS3 features implementedon iOS Safari that is used on all Apple dev...
3.2 What is HTML5 & CSS3 used for (at the moment of this    writing)?Many developers have already developed websites to tr...
However there are still debates on the codecs to use and the below figure shows whatcodec can be read on every web browser...
Many video players are already implemented, and even video streaming leaders areusing HTML5, among them Youtube and Vimeo ...
Two animations are presented, the first built with HTML5 and the second with CSS3.3.2.2.1 HTML5 Tomte & Goat              ...
This animation is developed with HTML5, CSS3 and jQuery. The animation is muchmore complex than on the previous one, backg...
view. But if 3D is on the contrary almost ubiquitous in video games for desktop, thisis less common in online games and ev...
The performances of the monk head in frame rate are very disparate according to thedifferent browsers: 40fps in Opera, 30 ...
Hence at the moment, all sorts of games can be developed with HTML5 canvas, butthey cannot compete with Flash games in ter...
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010
Upcoming SlideShare
Loading in...5
×

Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010

8,029

Published on

Dissertation on HTML5, CSS3 and Adobe Flash performed from July to December 2010 while doing an MSc in Computer Science at Staffordshire University, England

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.



Bibliography and appendixes available here: http://www.slideshare.net/charlet_jeremie/bibliography-appendixes-can-new-web-technologies-html5-css3-kill-flash-dissertation-by-jeremie-charlet-122010

If you would like to make any remark or ask me any question, you can contact me at: charlet.jeremie (at) gmail.com

Published in: Education, Technology, Design
8 Comments
3 Likes
Statistics
Notes
  • Splendid...!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • amazing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/i7K0s4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • outstanding
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very nice
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,029
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
145
Comments
8
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010"

  1. 1. 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
  2. 2. AbstractThis dissertation investigates the new web technologies Hypertext Mark-up Language5 (HTML5) and Cascading Style Sheet 3 (CSS3) that are still in development andaims at establishing whether they are able to replace Adobe Flash.The objectives are first to investigate what are the graphic capabilities of the threementioned technologies. Then it is intended to learn and practice them to finallyimplement identical animations in HTML5, CSS3 and Flash and compare theirperformances. From that study a set of guidelines sets what technical solutions arebest 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 applicationsor websites are organized in a set of categories and are analysed; and their strengthsare presented. A concluding chapter to this research compares HTML5, CSS3 andFlash 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 animationsbuilt in HTML5, CSS3 and Flash. The website was created to learn and practice thetechnologies covered while the animations served the benchmarking stages.The first set of implementation and benchmarking involved a simple animation of asolar system involving two planets; the second set involved an enhanced version ofthis animation with forty planets to push the rendering engines of the web browsers totheir limits. The aim was to define whether those animations were quick to load, theirrendering smooth and their processing low consuming to save battery life of mobiledevices; hence they were benchmarked on their load time, their frame rate and theirMemory and Central Processing Unit (CPU) usages.The study shows that HTML5 and CSS3 are at the moment not mature enough to beglobally 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
  3. 3.  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  MSc Dissertation - Jérémie Charlet – CW002436 1
  4. 4. 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  MSc Dissertation - Jérémie Charlet – CW002436 2
  5. 5. 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.  MSc Dissertation - Jérémie Charlet – CW002436 3
  6. 6. 1 Introduction chapter1.1 Aims and Objectives1.1.1 AimsFigure out whether the new web technologies: Hyper Text Markup Language 5(HTML5) and Cascading Style Sheet 3 (CSS3) may totally replace Flash, and if notdefine a set of guidelines to indicate in which condition why one should be pickedinstead 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  MSc Dissertation - Jérémie Charlet – CW002436 4
  7. 7. §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 ResearchMethods module, only HTML5 was taken into account; however CSS3 presentingalso graphic capabilities was also integrated to the research.Finally, only one animation was created in the three technologies and tested.1.2 Research Approach1.2.1 Planned research ApproachHere is presented the research approach as it was stated in the proposal (at the start ofthe dissertation).1.2.1.1 Research on HTML 5 CanvasFirst the literature review will give an overview of the features of HTML 5: since halfof the implementation will be made in HTML 5, it is a must to know about thislanguage. (Deliverable :) Literature Review Then begins the proper research on Canvas. The Specifications draft of HTML5 (W3C 2009) will be a start point and is a display of all the methods available todraw 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 couldeven evolve during the 24 weeks research. Hence to keep up to date the knowledge ofthe advancement of each feature in every browser is a must. Developers shall not beadvised to start using methods which are not still implemented and available to everyone. Showcase websites (Sharp 2009) (Deutsch 2009) are emerging and displaydifferent 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 bedone with the canvas and to start learning how to use it. Groups of developers started to implement JavaScript libraries to allow otherdevelopers to create specific animations by writing much simpler code. Use of theirwork might help saving time but it needs to be checked to insure that there is nocompatibility issue.While pursuing on this research, the outcomes will be included in a report on Canvasso that this report will be the reference on HTML 5’s canvas for the rest of the project.MSc Dissertation - Jérémie Charlet – CW002436 5
  8. 8. HTML 5 Canvas Report1.2.1.2 Learn Flash3 to 4 weeksThe flash section of the developer centre from adobe website is a rich portal ofresources and tutorials on flash (Adobe 2009). Since I have only been introduced to it in the Web Multimedia tutorial, I willneed to spend time learning about Action Script and Animation and learn what isneeded about the most advanced subjects on Video, graphic effects and components. To conclude this learning, a complex animation in Flash will be developed asa showcase including action script, animation, video, etc. Flash Prototype1.2.1.3 Research and Design of the 10 animations and their analysis3 weeksThis stage will affect the next two stages; in this stage there will be designed theprocess to answer the research question, and there are two possible ways which willbe defined later. Whatever path is chosen, research must be made about the different caseswhere animation and/or interactivity is/are used in Web: Flash is not only used tocreate cartoon animation but also to create interactive menus, galleries, games,animated web-designs, etc. However, the progress of implementation of HTML 5needs to be taken into account: for instance, the handling of events is quite blurred inHTML 5, so if nothing comes out on this subject (but it SHOULD), the scope will bereduced. After this research, 10 different and popular kinds of animation will be chosenand specifications will be written for each. 10 animations SpecificationsAfterwards 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/html57 weeksMSc Dissertation - Jérémie Charlet – CW002436 6
  9. 9. In this stage comes the development of the chosen 10 animations in bothtechnologies: HTML 5’s canvas with JavaScript and Flash with action script Website including the 10 animations and their code1.2.1.5 Testing and Benchmarks2 to 3 weeksIn this stage comes the analysis to evaluate each animation and their performances inboth technologies.Many criteria will be considered, such as the download time, the ratio size/quality ofthe files, the proper display on the different browsers, etc. The factors to study will bedefined in the designing stage. Analysis Process & Results1.2.1.6 Evaluation and Conclusions2 weeksTo conclude the research, a set of guidelines for developers will be written using theresults of the benchmarks.It will explain in which cases they should design their animations with HTML 5, andin which cases they should keep to Flash.Beyond this advice, these guidelines should recommend that developers start workingwith 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 byexplaining some basic concepts of HTML 5 and promoting the advantages ofchoosing an open standard solution. It could be a way to persuade developers to joinin the community working on HTML 5, use it, promote it, and help it to progress. Guidelines ReportRemaining time spent on improving and re-improvingMSc Dissertation - Jérémie Charlet – CW002436 7
  10. 10. Figure 1 - Gantt Chart1.2.2 Differences with the planned scheduleFinally as stated in “Aims and Objectives”, a new technology, CSS3, was taken intoaccount and integrated to the research. The differences related to each part aredescribed below.1.2.2.1 ResearchIt was planned to make a research report on HTML5 (and CSS3); a similar report wasalso written on Flash to identify the graphic capabilities of each technology and makea comparison afterwards.1.2.2.2 LearningThe HTML5 and CSS3 technologies required also to be learned. So a websitegathering the work done on HTML5 and CSS3 was created. Since the learning onFlash was quick and only done to get back used to it, only the final animation createdin Flash and used in the testing part was published.1.2.2.3 Implementation and TestingOnly 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. Howeverthe new web technologies investigated do not include new specific APIs to manageinteractivity in particular so only animation was looked at. Besides, since a uniqueanimation had already been developed in all three technologies in the learning partand was suitable for the next parts, this animation was kept and removed the need todesign 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.MSc Dissertation - Jérémie Charlet – CW002436 8
  11. 11. 1.3 Intellectual ChallengeThis work is my first personal research and is similar to my previous internship inWeb Developments: I will need to get some implementation skills. However I willhave more responsibilities and autonomy than I used to since I must organise my ownlearning and manage my work.Project planning is one of my weaknesses because I struggle to plan on mid or longterm and I am also used to putting off work until the last minute. Hence I will defineclearly 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, Ifound 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 anew syntax I must get used to. Besides there is no tool to draw graphics in canvas so Iwill have to learn coding graphics with JavaScript.I have been introduced to Flash in the Web Multimedia Module but I am missingexperience and I will practice many tutorials to create the artefact.English is not my mother tongue. Writing is difficult because my grammar and myvocabulary are poor and I spend much time looking for words in dictionaries.Finally, my last internship and this course semester proved me that Web Developmentwas my vocation; the next step is to figure out whether I should go on studying inresearch or if I should start working right after this MSc; the way I handle thisresearch project will answer it.1.4 Presentation of the following chaptersThe literature review chapter globally introduces and presents HTML5.Two chapters of research look in depth on graphic capabilities of HTML5 andCSS3 on one hand, and of Flash on the other hand. A third chapter comparesthem and discusses their future.Preliminaries to implementation and Benchmarks show the practical learningand introduce the testing. Implementation and Benchmarks 1 and itscontinuation (2) both present the artefacts created and their analysis.Finally the conclusions summarize the findings and this work is evaluated.MSc Dissertation - Jérémie Charlet – CW002436 9
  12. 12. 2 Literature review chapter2.1 Presentation of conference videosThe 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 theyexplain different features and by different manners so that these videos supplementeach other.In this part, first, every video will be introduced by explaining what they are mainlyabout 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 atthis time. It looks like a prototype presentation for underground developers, his authordiscovered a few times that some features were not implemented in a particularbrowser, and he needed to debug his own samples he was coding in-live to make themwork. But he goes straightly to the point, by developing html files in live, viewers seehow it easy to develop with HTML 5. While the results are watched in differentbrowsers, it can be figured out that browsers had implemented at this time only a fewfeatures 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 concreteillustrations 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 webapplications and declares than most of them are being becoming web standards:playing videos, giving access to webcam/microphone for video conferences, offeringoffline abilities, etc. He expresses then Google’s main goal: fill in the gap betweennative and web applications.MSc Dissertation - Jérémie Charlet – CW002436 10
  13. 13. Web applications are still missing important capabilities like security and privacy butthey 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 aweb alternative to office (Google, 2009), adobe developed a web version ofPhotoshop (Adobe, 2009), and Microsoft joins the movement with its MicrosoftOffice Web Apps (Redmont, W 2009). Hence there is a war between heavyweights toget their products monopolize the World Wide Web and this a new area whereMicrosoft is not the certain winner in a competition which hopefully favors openstandards, standardization, etc. HTML 5 offers the tools to open the competition, toprovide 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 byHickson ; but progress was made in the 9 months between the 2 conferences so thespeaker adds information without going in depth in the code like Hickson did.Actually most of the features presented answered Google’s will explained in theintroduction: build more efficient web applications and therefore this conference isnot intended to individual web developers but to companies, communities ofprofessionals.2.1.3 “The future of HTML 5”Bruce Lawson goes further and not only presents some of the new features of HTML5 but stressed on the importance of open web: HTML 5 is not just a new tool whichallows to develop pretty websites or better RIA (Rich Internet Application), Lawsonstates HTML 5 as a new (free) challenger to Flash and Silverlight and he evendeclares: “The web is too vital a platform for business for society to be in the hands ofany one vendor” and was applauded by his beholders.Besides he states that HTML 5 does not replace HTML 4. To develop websitesconsisting of static WebPages embedding images, keep working with HTML 4. Mostof the features that HTML 5 is bringing were already performed by using JavaScriptor 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 tospeak about accessibility and Internet Explorer compatibility.MSc Dissertation - Jérémie Charlet – CW002436 11
  14. 14. 2.2 Overview of the new featuresTo get a better understanding of what HTML 5 is bringing to the web, instead ofbeing given as a very long list of features, features will be ranked among 5 maincategories: • 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 elementsHTML 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 stilldisplay the content. Anyway, many elements have been added in this new version ofHTML 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 givessamples of code to illustrate each of them. In this literature review will only besummed the most important new elements of HTML 5.2.2.1.1 Structural elementsIn previous HTML, all developers used to assign id to their div elements to recognizetheir functions like header, footer, main content, sidebar, etc. <divid=”header”></div>HTML 5 brings these new elements to replace div tags and propose a structurecommon to all websites:2.2.1.1.1 <header>This corresponds to the head of the Web Page and includes usually the logo of thecompany, 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 bookor 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 independentarticle 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 otherWeb Pages.2.2.1.1.5 <footer>MSc Dissertation - Jérémie Charlet – CW002436 12
  15. 15. 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. MSc Dissertation - Jérémie Charlet – CW002436 13
  16. 16. To get a sample of how it works, here is a preview of Hickson’s code and it draws aline 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 anduses some of the methods created for the canvas (like the function fillRect() whichwill 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 sixyears old and its performance much lower. Like XAML for Silverlight or ActionScript for Flash, it draws vector graphics. More other text remains here and isaccessible. Many articles can be found on the web explaining in which case Canvas orSVG should be chosen for instance but this literature review will not go further andmore information about it will be given in the dissertation. (Vukicevic, V 2006)2.2.2.2 VideoEmbedding videos in the WebPages becomes as simple as embedding images. Thevideo tag is used in the webpage and visitors can watch it without using any plug-in:<video src="firefox.ogg" controls></video>MSc Dissertation - Jérémie Charlet – CW002436 14
  17. 17. 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 orblurry rendering).However there is a disagreement between browser manufacturers on the video codecto use. All of them would like to use only one standard video codec but Apple andGoogle support H.264 while Opera and Mozilla support Ogg Vorbis. Hence there isno standard codec defined in the specifications for instance and it is up to the actors tofind an agreement.Besides there is no support for any streaming protocol and developers are looking at it.2.2.2.3 Drag and dropIt gives the ability to drag and drop photos, texts, urls, etc into a canvas.2.2.2.4 3D APIsYou can even draw 3D with JavaScript, and developers are wondering aboutimplementing into html 5. They are providing basic fundamental APIs to allow peopleto use it.2.2.3 Browser Storage and others offline applications support2.2.3.1 Local Storage and Session StorageTheir purpose is to store data client side. Developers are no more restricted by thelimitations 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 CacheIt provides a mechanism that allows web pages to ask the browser to cache locally alist, a “manifest” of files they need to work locally. It enables users to visit websiteswithout being connected to the cloud.2.2.4 Features to build better web applications2.2.4.1 WorkersIt offers web applications a way to compete with native applications which usethreads and processors. Web apps can run threads in background to do complexcalculations without locking the browser’s display.2.2.4.2 Web Sockets“Allows bi-directional communication between client and server in a cleaner, moreefficient form than hanging post/get requests”Goal is to get persistence over communication with the server much simpler.MSc Dissertation - Jérémie Charlet – CW002436 15
  18. 18. 2.2.4.3 NotificationsNotifications would like to provide less intrusive event notification mechanism thanthe common alert() method which locks up browsers. They need to be editable, givemore 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 editing2.2.5.1 Web FormsNot only coding forms is easier with HTML 5 but developers care no more aboutvalidation. 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 editingHow tags behave when they are included in content editable varies from a browser toanother because content editable is implemented for instance in different ways.In web services like Google Docs, users have to download JavaScript handling withcompatibility between different browsers and this is a critical waste when they areusing their mobile phone or accessing the web with a bad connection. Hence this mustbe directly implemented in every browser the same way. Companies are working onthis issue.2.2.6 Other gadgetsThere are plenty of other features that need to be implemented but that are notpriorities for the moment and being postponed like:2.2.6.1 GeolocationUsing Google Maps to define where the user are and propose them services.2.2.6.2 Webcam and microphone accessTo allow video conferences.2.2.6.3 UploadsTo make them easier to use.MSc Dissertation - Jérémie Charlet – CW002436 16
  19. 19. 3 Research on HTML 5 & CSS3Hyper Text Markup Language 5 (HTML5) and Cascading Style Sheet 3 (CSS3) arenew web technologies that aim at building Rich Internet Applications (RIA) directlyin the browser, using HTML, CSS and JavaScript. These technologies’ specificationsare not finished but their implementation in web browsers has already started; hencein the first part, their availability on computers and on mobile phones will be lookedat. Many developers have already developed websites to try the new features ofHTML5 and CSS3; their work is presented in the second part according to theircategory: Music and video, Cartoons, Games and Web applications. Finally thepotential impact of HTML5 and CSS3 on the web will be investigated.3.1 HTML5 & CSS3 AvailabilityHTML5 and CSS3 have made a real buzz in the IT world since their first drafts wereofficially presented. This enthusiasm can be demonstrated by the investment of webgiants (Google, Apple, Mozilla) and the speed of their implementation of HTML5 andCSS3 in their own web browsers; this is presented in the first part. Then theavailability 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 ofHTML5 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)MSc Dissertation - Jérémie Charlet – CW002436 17
  20. 20. Figure 4 - HTML5 Availibility by the end ofFigure 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. MSc Dissertation - Jérémie Charlet – CW002436 18
  21. 21. Figure 5 - Browser Statistics (refsnes, 2010)It is also necessary to consider the trends because the availability of HTML5 in thenext year will also depend of the popularity of the different web-browsers though theyare expected to move. In the last year, according to the graph of browser statisticsfrom October 2009 to October 2010 (refsnes, 2010), Chrome’s web usage increasedby 11%, Internet explorer decreased by 8% and Firefox by 3%; Opera and Safari arestable. If the trends go on this way, Internet Explorer could loose more market shareand 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 nomore leading the market of web-browsers as it used to (resfnes,2010), but itsimportance is also decreasing. Despite the fact that Internet Explorer is the leastadvanced web browser in HTML5 and CSS3 implementation, its inferiority in marketMSc Dissertation - Jérémie Charlet – CW002436 19
  22. 22. share could lead developers to start using the new web technologies even though theyare not fully available and particularly on Internet Explorer.On Microsoft operating system (Windows), only the web browser corresponding tothe Microsoft brand is installed: Internet Explorer. Hence, Firefox and Chrome needto be installed manually by the user. This shows that users deliberately choose to useFirefox or Chrome instead of Internet Explorer and this suggest that web users mayprefer web browsers that are favourable to new technologies.This study also shows that Safari and Opera apparently play a minor role in themarket share in comparison with the other ones. Hence it is necessary to look morecarefully at the implementation of features in the three giants that are Firefox, InternetExplorer and Chrome.3.1.2.1 Current availability of HTML5 & CSS3 featuresA few websites keep up to date the availability of HTML5 and CSS3 features in allmodern browsers; the aim is to present the advance in their implementation andinform 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 CSS3are displayed below.These two below figures present the percentage of HTML5 and CSS3 featuresdeveloped for the same web browsers as presented on the Google I/O: InternetExplorer, Firefox, Safari, Chrome and Opera. The different versions of these webbrowsers 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 theHTML5 features is also integrated its JavaScript Application Programming Interface(API); an API consists of a set of objects and functions that developers can use toperform complicated tasks (Wannemacher, 2007). Figure 7 - HTML5 and ITS Javascript API Availability (DEVERIA, A 2010) Figure 8 - CSS3 API Availability (DEVERIA, A 2010)MSc Dissertation - Jérémie Charlet – CW002436 20
  23. 23. 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 ofall 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 CSS3features.This current implementation on Internet Explorer 8 is a brake to HTML5 and CSS3and is very too low for developers to dare using it to develop business websites. Thecurrent implementations on all other browsers are however enough, and consideringthat all browsers did not implement the same features, this means that developers canalready experiment all planned features on HTML5 and CSS3. Many websites, aspresented in the next part, show HTML5 and CSS3 potential, but very few used themfor business driven websites.The next version of all web-browsers (IE 9, FF 4, Chrome 8) for the upcoming year ishowever more promising and will put the HTML5 and CSS3 implementation to afurther step: IE will have 54% of HTML5 features and 71% of CSS3 featuresimplemented. Firefox and Chrome will have 94% of HTML5 features and 89% ofCSS3 features. Considering the trends in Web Usage, the importance of IE will beeven lower. Besides according to Jeffrey Zeldman, the mentality in developmentevolved and developers now prefer to use the new features brought by the mostadvanced web-browsers while they ensure that the websites are still usable in otherweb browsers, and among them IE (Zeldman, 2010). For all those reasons, in the nextyear it is very probable that more and more business websites will be developed withHTML5 and CSS3, even if they do not present the high level of interactivity of Flash.3.1.2.2 Libraries dedicated to availabilityTo compensate the heterogeneous implementation of HTML5 and CSS3 featuresamong brothers, and especially the late investment of Microsoft on IE, developerscreated very useful libraries:Modernizr (Ates, 2010) provides functions to evaluate the implementation of a featureon 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 implementedyet. ExplorerCanvas (Arvidsson, 2010) renders the HTML5 canvas on IE although itis not implemented yet. Google Chrome Frame (Russel, 2009) embeds the ChromeJavaScript engine within Internet Explorer: whatever HTML5 feature Chromeimplemented, it is made accessible in IE.If features are not developed in all web browsers, developers can define behavioursaccording to the web browser’s implementation. Some HTML5 features not nativelyimplemented in IE can be turned on due to libraries; however the performances mightbe lower.3.1.3 Availability on mobile phonesJason Grigsby (2009) thinks that some features are critical for the mobile web andtherefore the development of HTML5 will be driven not by computer needs but bymobile needs; the offline support, canvas & video, and the geolocation API are someof these features.MSc Dissertation - Jérémie Charlet – CW002436 21
  24. 24. The next two figures represent the worldwide sales of smartphones by operatingsystem 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 oniphones 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 onnew technologies as Google (who won a big marketshare) and Apple (who owns animportant market share and keeps it while its products are among the most expensivedevices) do.Currently the incorporated web browsers of the apple, nokia, palm-pre and androiddevices are based on the webkit engine (that is also the engine of the Chrome andMSc Dissertation - Jérémie Charlet – CW002436 22
  25. 25. Safari web-browsers) and are implementing the HTML5 and CSS3 features (Grisby, J2009). This statement is demonstrated by the following graph that shows the HTML5Mobile browser support for 20 popular smartphones. The nine smartphones thatsupport the most HTML5 are using Symbian, Android and iOS.The two other major mobile device platforms are Windows Mobile and Rim’sBlackberry. However the Windows Mobile platform, as seen on the previous graphslose market share, mostly because of its principal manufacturer HTC that isincorporating Android OS on its mobile phones instead. RIM has its own mobile webbrowser that is not based upon any major web vendor’s engine and is buggy incomparison with its competitors. However on these platforms, the Opera mobile webbrowser 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 featuresThere are very few statistics on the availability of HTML5 and CSS3 features onmobile devices and they are not as complete as figures that can be found for thedesktop environment.MSc Dissertation - Jérémie Charlet – CW002436 23
  26. 26. The two next figures show the percentage of HTML5 and CSS3 features implementedon iOS Safari that is used on all Apple devices (iphone, ipad) and on Opera Mobileand Mini. The expected percentages of availability of the upcoming versions of thesemobile web browsers are missing but they can be compared with the forecast for theweb browsers of the same companies on the desktop environment, since they use thesame engines as their “older brothers”.The iOS Safari for mobile devices has currently implemented only half of HTML5features but the browser for computers is expected to increase by 14%, so a similarincrease could happen on the mobile version.The Opera web browser on Desktop however is not expected to implement manyother features. However Opera probably owns a bigger market share on mobiledevices than on computers since its web browsers have 50millions users on themobile version and 50 millions on the desktop version (Opera, 2010), while there arenearly 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 bedriven by mobile phones, the implementation on mobile phones should be expected torise 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 mobiledevices and especially on iOS and Android platforms that are leading its developmentwith the webkit engine. However companies using the Symbian OS and RIM stillneed to show their investment.MSc Dissertation - Jérémie Charlet – CW002436 24
  27. 27. 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 HTML5and CSS3; their work is presented according to their category: Music and video,Cartoons, Games and Web applications. Even if this dissertation is focusing on thegraphic capabilities of new technologies competing with Flash, and therefore on theHTML5 Canvas and CSS3 new properties dedicated to animation, its scope is a littlebit widened to introduce other HTML5 features that are necessary to build RichInternet Applications (RIA) or multimedia websites (while those new features inHTML5 are already provided by Flash). Hence Music and Video introduces theHTML5 music and video features; cartoons, Games and web Applications are mainlyabout the HTML5 and CSS3 graphic features but also mention offline and otherHTML5 features.Since these technologies are new and mainly experimental, most of the works doneare focusing only on specific features and there are not very complete webapplications using all new features. For that matter, websites are also organizedaccording to the specific features concerned: for example, for the Games maincategory there is a 3D sub category.This research on HTML5 and CSS3 was the very first part of the report written so thesamples of HTML5 and CSS3 websites that were studied here are at least five monthsold. New animations and applications were developed ever since but the 5 nextmonths 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 becausethere are not such samples of HTML5 or CSS3 websites. These technologies are stillnot mature enough to be used in businesses, and this is as a matter of fact one of thepurposes of this research: to find out whether HTML5 and CSS3 can now be safelyused in businesses, instead of Flash.3.2.1 Integrated Music & VideoAudio and video are fields that Flash made accessible on the web and now leads (seenext chapter: research on Flash). But some HTML5 features cover those fields andoffer an alternative to Flash. Hence the audio and video HTML5 features arepresented below.3.2.1.1 AudioThe audio element is currently implemented on all web browsers but IE and is assimple to use as the image tag: indeed to insert an audio file on a web page you needto write this code:<audio src="myAudioFile.ogg" controls="controls">Your browser does not support the audio element.</audio>MSc Dissertation - Jérémie Charlet – CW002436 25
  28. 28. However there are still debates on the codecs to use and the below figure shows whatcodec can be read on every web browser. In fact the different web vendors did notagree on a unique codec to use. Most of them can read the wav format but there is aneed for a compressed format otherwise embedding audio on the web with HTML5will require to load huge files and such a solution cannot be accepted on mobilephones for example where users may not access broadband connections. Otherwisesome web browsers only read the OGG format while others only read the MP3 orAAC 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 onlyembedding a song and are not playing it as an event though this is necessary in gamesfor 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 madeup to now to measure the performances of HTML5 audio.3.2.1.2 VideoA 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 currentlyavailable on all web browsers but IE, and web leaders are debating on the codec touse; 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 Appledid not make such announcement (Mediati, 2010).MSc Dissertation - Jérémie Charlet – CW002436 26
  29. 29. Many video players are already implemented, and even video streaming leaders areusing HTML5, among them Youtube and Vimeo (templates blog, 2010). It shows thatdevelopers can use HTML5 Video.Besides video can be embedded in a canvas and manipulated in many ways: split inslices, explosions, integrated in a sort of 3D Movie Theater, applied with filters (blackand white filter for example). Nonetheless, such effects may involve high processingand 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 usehardware acceleration natively. The WebGL project is focusing on this matter but thisis 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 agreeon a single codec to use, or they can start using html5 video but should provide twodifferent versions of their content to ensure that all web browsers can read them.3.2.2 CartoonsHTML5 Canvas and new CSS3 properties bring new APIs to draw graphics on theweb and animate them. These APIs provide simple functions to draw specific shapes,import images, modify the appearance of already drawn shapes or images and animatethem (translate and rotate). On the other hand, Flash provides a complete authoringtool to create quickly complex shapes, integrate them on a canvas, handle theirbehaviour and animation, manage scenes, etc.To draw a character is obviously easier by using a painting application than by typinglines of code. To animate it is even worse. So Flash will certainly always be easierand more efficient to use than these new web technologies until an equivalentauthoring tool is provided for HTML5 or CSS3.The purpose of this study here is to see if HTML5 and CSS3 provide sufficient APIsto create cartoons by ensuring that cartoons built with them exist. Then it investigateshow difficult it is to write code to create a cartoon to ensure whether designers couldafford the time to make animations with it. Finally the study aims at looking whetherweb-browsers could display these animations smoothly.MSc Dissertation - Jérémie Charlet – CW002436 27
  30. 30. 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. Itpresents 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 ofcode. The code presents scores of functions: “say”, “walkright”, “runleft”, “goto” foractions for example, and “angry”, “shock”, “horror”, “smile” for expression.This is the only HTML5 Canvas attempt to create a cartoon and this is not thrillingbecause: • 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 andJS: • 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 nextanimation presented.3.2.2.2 CSS3 Spiderman Figure 17 CSS3 Spiderman (CALZADILLA, 2010)MSc Dissertation - Jérémie Charlet – CW002436 28
  31. 31. This animation is developed with HTML5, CSS3 and jQuery. The animation is muchmore complex than on the previous one, backgrounds are moving, there are severalshort and different scenes (being “shot” from different angles). The animationinvolves also music and this is an HTML5 audio tag. The overall quality of graphicsis 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 arealready many attempts in CSS3, it must be then more convenient if developers chooseCSS3.Rotation, scaling and movements are enough to create simple animations. Howevershape transformation is also necessary: for example, the progressive transformation ofa square into a circle as it is possible in Flash. But it cannot be handled in CSS3 forthe moment.As a conclusion to this Cartoon part, it seems that CSS3 has more potential to createcartoons than HTML5. The samples in CSS3 are promising. But it is still tough tocreate 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 webbrowsers and present a decent frame rate so that they are played smoothly.3.2.3 GamesCartoons involve drawing graphics and animating them. Games may involve drawinggraphics, animating them, doing calculations, storing data, managing input controllers,etc. In such a complex deal of requirements, the graphic engine must be efficientenough 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 hardto embed 3D graphics in websites without plug-ins because web browsers could notaccess the capability of the hardware, and above all, the users’ graphic cards. Not onlyHTML5 and CSS3 bring APIs to render 3D graphics but also once fully implementedby web browsers, they will be able to access hardware acceleration and render verycomplex 3D graphics with reasonable performances. Since 3D seems nowadaysmostly used in games, its part dedicated is inserted here.Developers already started to use HTML5 to develop games. Some of these gameswere studied and their analysis is presented.3.2.3.1 3D3 dimensional elements (3D) can be used to display products and make theminteractive: by moving the mouse around the object, a user can change the angle ofMSc Dissertation - Jérémie Charlet – CW002436 29
  32. 32. view. But if 3D is on the contrary almost ubiquitous in video games for desktop, thisis less common in online games and even seldom on commercial websites.The biggest constraint is because of the performances: to display dynamically anenvironment composed of dozens of models consisting of hundreds of polygons, thegame needs to be able to access the processing power of the player’s graphic card. Upto now, this could be done in Flash but there was no native 3D API in HTML orJavaScript. Hopefully, HTML5 brought its own 3D Canvas API to create 3D modelsin JavaScript with the HTML5 Canvas. Other groups are working on providing amore complete API for developers and integrating the hardware acceleration: X3D orWebGL (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 descriptionis 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 modelof a towel that swings when clicked. The JS Wolfenstein 3D is a port of the classicfirst person shooter (fps) on JavaScript and uses the canvas to be displayed. The 3dWalker is another FPS created with HTML5. The 3D earth is a model of the Earththat you can rotate and zoom. And Quake 2 WebGL is the port of the classic FPS toweb-browser and using the library WebGL.MSc Dissertation - Jérémie Charlet – CW002436 30
  33. 33. The performances of the monk head in frame rate are very disparate according to thedifferent browsers: 40fps in Opera, 30 in Chrome and 15 in Firefox (Toxicgonzo, notdated). So it shows that they depend on the advancement of the implementation ofHTML5 in each of those browsers (which are –for the moment, in 3D- at their verybeginning); these performances are therefore expected to increase greatly in the future.However with the hardware capability increasing, we might see much more complexapplications taking benefit of the Central Processing Unit (CPU) and GraphicProcessing Unit (GPU) usages through hardware acceleration. Anyway 3D animationby software rendering (only canvas + JS) cannot present high performances and willbe used only on simple animations. Quake 2, presented below, is an example of thesecomplex games that take benefit of the hardware acceleration.The Wolfenstein 3D game uses “ray casting” to simulate 3D space with goodperformances on modest hardware: the intersections between a ray and a surface arecalculated; since the camera angles of the shooter are locked, for each representationof an object (according to a defined angle) can be presented an image, thereforeaccording to your position in the space, while looking to an object, its rightrepresentation is displayed to you (Seidelin, 2008). This technique can be used tocreate games that can be rendered directly in the web browser and do not needhardware acceleration. However the resulting graphics are far less appealing thoughnowadays 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 ofweb browsers.It seems like you can create simplistic 3D apps/games with the canvas but you do notget great performances: either animations display a very limited number of simplistic3D models, or the animation presents a poor frame rate and looks laggy. The Quake 2port is the first ever example of a very complex video game directly embedded in aweb browser and uses WebGL (Haustein, 2010). It is still complicated to manage toplay it because users need to rebuild the whole game with a developer tool, downloada special build of their web browser and even install special plug-ins. But this sort ofgame intends to be in term directly accessible in a web browser without the need ofinstalling any other plug in or software. However no one know when such feature willbe integrated in web browsers.3.2.3.2 HTML5 Canvas gamesTo promote HTML5 and CSS3 new technologies, some websites list all webapplications or animations that are created using those technologies. CanvasDemo isone of them and organises the existing demonstrations of HTML5 Canvas intocategories. Hence the games listed in the categories “Shooting”, “Puzzle”, “Platform”and “Strategy” were observed and their conclusions are presented here (Smith, notdated).All shooting games involved very basic 3D graphics with low resolutions. The onlyexception is Quake 2, but as it has been stated previously, this game cannot be playednatively in the browser for the moment.The other games generally involve poor graphics, simplistic interactivity and had avery low frame rate unless they involved very few elements.MSc Dissertation - Jérémie Charlet – CW002436 31
  34. 34. Hence at the moment, all sorts of games can be developed with HTML5 canvas, butthey cannot compete with Flash games in terms of graphical aspect, interactivity andperformances (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, isstarting to provide animation, but to develop a game, it requires using a programminglanguage as JavaScript.3.2.4 Web applicationsSome libraries were developed to enhance the HTML5 API and are exhibited here. Itmight be useful for developers to have a look at them before they start to develop withHTML5 because these libraries can both save them time and make easier to developcomplex graphics or web applications.Many websites or web applications were developed using HTML5 and CSS3. Someof them are introduced and analysed; they are organized according to the followingcategories: • User  Interface   • Utility,  analytic  and  content  applications   • Painting  and  photo  editing  applications  3.2.4.1 JavaScript LibrariesIn this part are presented libraries that can save developers a lot of time and especiallyin 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 beperformed to handle the situation. So here were studied two physics libraries, one for2D 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 theHTML5 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 offunctions for developers to quickly create web applications. It requires for developersdeciding 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 touse the API or to benchmark the engine and approximate whether it is performingenough for a specified type of application.These libraries also use the HTML5 graphic APIs so their performances are expectedto improve since web-browsers are implementing HTML5 features and improvingtheir rendering.Besides, libraries andMSc Dissertation - Jérémie Charlet – CW002436 32

×