KIM PAANANEN
COMPARISON OF FLASH, SILVERLIGHT AND HTML5 TECHNICS
Bachelor of Science Thesis
Examiner: Jari Seppälä
6 October 2011
i
ABSTRACT
TAMPERE UNIVERSITY OF TECHNOLOGY
Bachelor’s Degree Programme in Automation Science
PAANANEN, KIM: Comparison of Flash, Silverlight and HTML5 technics
Bachelor of Science Thesis, 26 pages
September 2011
Major: ICT in Automation
Examiner: Researcher Jari Seppälä
Keywords: Flash, Silverlight, HTML5, rich internet applications
This thesis studies and compares three different technologies of creating rich websites
and applications. Two of these technologies are runtime-plugins – Adobe Flash and
Microsoft Silverlight – and one merely a new upcoming standard – HTML5. The comparison between these technologies is difficult as HTML5 is still on progress. However,
some comparison is sensible to do even now, as these technologies have their own
“comfort-zones”; each technology is in its best in certain situations. As a conclusion, it
may very well be that especially Flash and Silverlight are going to compete severely. In
this battle features like multithreading may become a crucial factor. On the other hand,
the market-share and moreover, the Internet are big enough for both of them. Thus, all
three technologies can co-exist.
As a part of the thesis a Web application was made using HTML5 standard, AJAX,
SVG and JavaScript. The point of the Web application is to be manual for the ROSA –
weather service system, which is engineering’s laboratory equipment of TUT department of Automation Science and Engineering.
ii
CONTENTS
Terms and symbols ..........................................................................................................iii
1
Introduction ............................................................................................................... 1
2
Adobe Flash .............................................................................................................. 2
2.1 The main principles ........................................................................................... 2
2.2 Requirements and compatibility ....................................................................... 4
3
Microsoft Silverlight ................................................................................................. 5
3.1 The main principles ........................................................................................... 5
3.2 Requirements and compatibility ....................................................................... 7
4
HTML5 ..................................................................................................................... 9
4.1 New features...................................................................................................... 9
4.2 Compatibility and requirements ...................................................................... 10
5
Comparison ............................................................................................................. 12
5.1 Plugin based versus browser based ................................................................. 12
5.2 Between the plugins ........................................................................................ 13
5.3 Between different Web sites ........................................................................... 13
6
Weather service system demo ................................................................................. 16
6.1 System description .......................................................................................... 16
6.1.1 Navigation and user interface ............................................................ 16
6.1.2 The SVG animation ........................................................................... 18
7
Conclusion .............................................................................................................. 20
Preferences ...................................................................................................................... 21
A. Appendix ................................................................................................................. 25
iii
TERMS AND SYMBOLS
Action Script
An open-source object-oriented programming language that
is used primarily for Web site animations. It is an eventbased language and based on EMACScript. It is mainly
used by Adobe Flash.
Adobe Air
A runtime that lets applications to run as standalone client
applications without the browser.
Adobe Flash Player
A browser plugin runtime that executes and plays back
Flash content, like animations and movies.
AJAX
Synchronous JavaScript and XML is a group of methods
used on the client-side to build interactive and dynamic applications for the Web.
API
Application Programming Interface is a language and message format that software programs can use to communicate
with the operating system or some other program. It is an
interface between different software programs.
CIL
Common Intermediate Language is an object-oriented assembly language used by the .NET framework.
CLR
The Common Language Runtime is a runtime for Microsoft’s .NET framework. The source code of an application
is compiled into an intermediate language called CIL.
CSS
Cascading Style Sheets is a simple style sheet language for
adding style to Web documents.
DOM
Document Object Model is a cross-platform and languageindependent programming interface specification that is
meant for handling HTML and XML documents. It defines
the logical structure of the document and how to access and
modify the document. DOM enables to create and modify
HTML, XHTML and XML documents as program objects.
Dynamic site
A type of WWW- site that has frequently changing information or interacts with the user.
iv
ECMAScripts
European Computer Manufacturers Association Script is a
scripting language that is standardized by ECMA International.
FLV
FLV is one of the two file formats known as Flash Video. It
is a container file format used by Adobe Flash to deliver
video over Internet.
F4V
F4V is one of the two file formats known as Flash Video. It
is a container file format used by Adobe Flash to deliver
video over Internet. F4V is based on the ISO base media
file format.
HD video
High Definition video is any video of resolution 720p or
higher.
HTML
HyperText Markup Language is a markup language used
for creating WWW- documents. It consists of tags and attributes which defines the layout and structure of a WWWdocument.
HTTP
Hypertext Transfer Protocol is a networking protocol used
by the WWW for the data communication. It defines how
Web servers and browsers should response to various commands and how messages are formatted and transmitted.
JavaScript
A script language that enables creating interactive and dynamic sites
MXML
A programming language used typically for making visual
layout of SWF applications. MXML is an XML-based interface markup language.
.NET Framework
A software framework that supports several programming
languages, and includes a library available for these supported languages. Each language can use code written with
other languages. .NET Framework runs mainly on Microsoft Windows and it uses CLR to compile .NET applications into machine language before executing them.
v
OOP
Open source
Object-oriented programming is a programming method
that uses objects, which contain information and functionality related logically to each other.
A philosophy believing that by allowing anyone to modify
the source code and thus the application will be more useful
and error-free in a long run. The principles also include that
open source applications can be used to any practise and
they are allowed to be copied and distributed.
Plugin
A software (or hardware) module that adds specific abilities
to a larger software application. For example, Web browser
can use plugin to handle files, that it cannot execute itself.
Plugins are integrated as a part of Web browsers.
RIA
Rich Internet Applications are Web applications that have
desktop like features. They provide advanced user interfaces and minimize the traffic between the client and server.
RTMP
Real Time Messaging Protocol is a open specification that
enables delivery of audio, video and data in the open formats compatible with Adobe Flash Player.
Runtime
A software that certain applications need to run in the computer.
Script language
A high level programming language that can be used for
manipulating, customizing and automatizing already existing system. Rather than being compiled, it is interpreted by
another program.
SVG
Scalable Vector Graphics is a vector graphics format expressed in XML.
SWF
Small Web Format is an open specification file format used
to deliver vector graphics, text, video and sound. SWF files
can be played by for example, the Adobe Flash Player or
Gnash.
Web browser
A software application used for accessing the information
on the WWW. It works as a user interface of a rich Internet
application.
vi
Web client
The client side of the Web usually referring to the Web
browser or plug-ins.
WWW
World Wide Web, commonly shortened as Web, is the
common name for all of hypertext-based HTML documents
on the Internet using HTTP protocol.
XML
Extensible Markup Language is an open standard used for
defining data elements on a WWW- document. Whereas
HTML defines how elements are displayed, XML defines
what elements contain.
YouTube
A Web site for sharing videos: it lets anyone to upload videos.
1
1
INTRODUCTION
Web pages have changed a lot over the years and become much more complex; when
there used to be plain text and few funny pictures now there are HD videos and interactive applications. The trend of the applications and websites nowadays is that they are
getting richer, and closer to desktop like features. These kinds of web applications are
called Rich Internet Applications, short RIA [1]. For a long period of time browser
based runtime plugins such as Adobe Flash or Microsoft Silverlight were mandatory for
a more complex web browsing. However, the situation has changed as the new wave of
web technologies has come in to the picture.
There are several different technologies that can be used in order to make rich
web sites. However, it is not commonly agreed what technique can be called RIA techniques. In this thesis the techniques for creating RIAs are divided into two: plugin based
and built-in browser-based techniques. The most spread and used technology for making RIAs is Adobe Flash, but Microsoft’s Silverlight is slowly narrowing the gap between them [2]. These two technologies have a lot in common and thus, are competing.
HTML5 is the newest of these technologies and probably the most discussed one. Along
the new features that this new standard brings it steps right in the middle of the battle of
the RIA.
The main goal of this thesis is to gain understanding of Flash, Silverlight and
HTML5 techniques, compare them and develop example application using HTML5
technique. In chapters 2, 3 and 4 each of these three techniques are described and examined. In chapter 5 these techniques are compared to each other, and in chapter 7 there is
a shot conclusion summering most significant remarks. In chapter 6 there is a short depiction of the HTML5 example application: ROSA – weather service system Web application manual.
2
2
ADOBE FLASH
Adobe Flash is a multimedia graphics program that can be used to add interactivity and
multimedia on the Web. Flash is also a tool for delivering RIAs. In fact, it has become
somewhat a standard for delivering RIAs covering a huge market share, being nowadays the most used platform [4]. For example, YouTube uses Flash as their default
video player. However, people have very contradictory feelings about flash and some
are ready abandon it, especially due to performance concerns in mobile environments.
Flash is not a new thing and it has become the de-facto way of showing videos
in the web site. The newest version of runtime environment Adobe Flash Player supports hardware-accelerated decoding of h.264 video on both Windows and Mac computers [5]. Flash can be used in many different platforms from web browsers to mobile
devices. For developers Adobe offers tools to build and deploy Flash.
However, there are some drawbacks in flash which makes many users to turn it
off. The usability of flash can be really bad as it is included in the web browser as a
complete stand-alone runtime. This creates an annoying problem when all web browser
shortcuts and focus are lost when playing flash movie.
2.1
The main principles
Flash is a vector-based graphics format which means that instead of animating each
frame it has instructions to move the graphics from point a to point b [6]. As a result the
graphics can be scaled to any size without losing quality. This also saves disk-space as
the graphics put into library can be used again. Therefore, Flash animations can be small
in size and thus quick to download and display.
The Adobe Flash platform consists of different components including client runtimes, tools, frameworks, services and servers. These technologies are integrated and
provide tools to deliver applications, content, and HD video. The following Figure 3-1
represents the components of the Adobe Flash platform. [31]
3
Figure 2-1. The components of the Adobe Flash Platform. [33]
The file formats that Flash uses are called Flash Video (FLV and F4V) and
Small Web Format (SWF). Flash Video is a container format used strictly for delivering
video whereas SWF format is used for delivering vector graphics, text, video, and
sound. A container format contains several types of data, such as audio and video, and
defines how the data is stored within the container [29]. As the SWF file´s video content
is not compressed but lossless, high quality videos are be rather big of a size. More efficient way would be embedding Flash video into SWF file. In 2009 Adobe removed the
restrictions on the use of the SWF and FLV formats as an act to answer the thread of
open-standards [8]. [7] [30]
The programming languages used for making SWF applications are ActionScript and MXML. MXML is used typically, creating visual layout of applications and
ActionScript for the logic. MXML is an XML-based interface markup language and a
part of Flex framework. When the application is compiled, the MXML is first converted
to ActionScript and then into a SWF file. ActionScript is open-source object-oriented
programming (OOP) language based on ECMAScripts meaning it has the same semantics and syntax as JavaScript. ActionScript is a language for Adobe Flash Player and
Adobe Air runtime-environments. [10] [31]
In order to view Flash content, a client must first have a plugin installed. Clients
can be using different kind of platforms or software, such as web browsers (Flash
Player, Open source Gnash), mobile devices (Flash Lite) or desktop applications
(Adobe Air). The Flash Video can be delivered in several ways; as a standalone FLV
file, embedded in an SWF file, using progressive download via HTTP or streamed via
Real Time Messaging Protocol (RTMP) using Flash Media Server (FMS). [32]
Adobe Flash Platform offers also tools for creating SWF files. Adobe Flash Professional offers drawing tools to create content whereas Adobe Flash Builder offers
more code-based approach. In addition, to create more quickly robust applications with
rich functionality Adobe introduces frameworks, such as Flex framework. In order to
4
deliver media and data to SWF files, The Flash Platform introduces servers, like Adobe
Flash Media Server, ColdFusion and J2EE. The first one is used for delivering media
and the two last ones for delivering data and integration with IT system. The client runtimes such as Adobe Flash Player, Adobe AIR and Open source plugins Gnash are
software used for viewing Flash content like animations in the form of SWF files. [31]
2.2
Requirements and compatibility
In order to use plug-ins and view flash content, one’s computer has to fill certain requirements. The table that contains the minimum hardware requirements for the Adobe
Flash Player version 10.3 is presented in the appendix A. It also includes a table describing how the minimum requirement of the processor grows along with the growing
resolution of the video.
Adobe makes players for most used operating systems such as Windows, Mac,
Linux and Solaris. According to Adobe, in mature markets 99.3 % of all browsers have
Flash Player 8 or better [4]. The table illustrating which operating systems and browsers
support the latest version of the Flash Player is presented in appendix A.
Flash has also penetrated into the mobile world and it has been estimated that by
the end of 2011, about 36% of all Smart phones will support Flash. Such operating systems as Android, Blackberry and HP are supporting flash now [12]. However, Apple
has informed that it will not support Flash and instead is focussing into HTML5 support
[13].
5
3
MICROSOFT SILVERLIGHT
Microsoft Silverlight is, just like Adobe Flash, a tool for creating and delivering RIAs
and media on the web. Providing same functionalities as Flash, Silverlight is a competitor. In 2010 NBC choose Silverlight to be the technique used in the Olympics instead of
Flash [14].
Silverlight is a rather new technology; the first version of Silverlight was released in 2007 and during 2011 Microsoft will release the fifth version. The Silverlight
framework is based on Windows Presentation Foundation, short WPF, which is the latest .NET user interface technology. Silverlight is cross-platform, cross-browser plugin
and thus, runs in most Web browsers and should also work on either PCs or Mac computers. With open-source implementation called Moonlight, Silverlight works also with
Linux devices. In order to view Silverlight content, the browser must have the plugin
installed, which is available free of charges. However, Windows Phone 7 and most
likely, Windows Phone 8 too, have native support for Silverlight. Silverlight applications can be developed using Microsoft Visual Studio. [15]
Being rather new technology and providing pretty much same functionality than
Flash, the future of the Silverlight is not guaranteed. According to statics, Silverlight has
been able to increase the number of the RIA usages by five percentages in the last six
months [2]. This can be seen as a positive sign that Silverlight has been able to provide
something new to developers. Probably the most crucial factor of the competition between Flash and Silverlight is the successfulness in mobile platforms.
3.1
The main principles
The Silverlight content downloaded from the server is packaged into a XAP file format
which is basically a ZIP file format that has been renamed. Therefore, files contained
within a Silverlight applet can be accessed by any standard ZIP reader. Silverlight uses
the human-readable Extensible Application Markup Language (XAML) for declaring
user interfaces (UI). XAML is XML-based and it consists of elements and attributes.
All text in an XAML file can be parsed as plain text as it is in standard Unicode format.
[15]
There are two different models for creating a Silverlight application: the managed API and the JavaScript API. These models are distinct for they cannot be used
both at the same time. Most of the applications are written in managed code as it provides a great deal more functionality than the JavaScript API. There are also development tools, like Visual Studio, that can be used to create Silverlight applications more
quickly. [15]
6
Silverlight applications that use the managed API have an access to a lightweight version of the .NET Framework. This means that the Silverlight applications can
be created using dynamic languages like Iron Python and Ruby. A dynamic language is
a high-level programming language that enables runtime flexibility by executing common behaviours at runtime, such as adding new code during program execution. Silverlight can be used quite like AJAX as it is possible to dynamically load Extensible
Markup Language (XML) content and manipulate it through a Document Object Model
(DOM) interface. DOM is an API for HTML and XML documents defining the logical
structure of documents and the way a document is accessed and manipulated [34]. [15]
The Silverlight Platform consists of core presentation framework, .NET Framework for Silverlight, and installer and updater. The presentation framework has components and services, which are oriented towards the UI and user interaction, like user
input, media playback, digital right management and so forth. It also includes XAML
for specifying the layout of the application. The .NET Framework for Silverlight is
really a subset of the .NET Framework. It contains components, like Windows Presentation Foundation (WPF), libraries, networking, the common language runtime (CLR) and
so forth. An installation and update control eases the installation process and provides
automatic updates. The Silverlight Platform is described in the following Figure 4-1.
[15]
Figure 3-1. The components of the Microsoft Silverlight [15].
7
The functionality of Silverlight is totally encapsulated within the plugin. Silverlight applications can be hosted at any Web server. When a user attempts to run Silverlight content, the application will detect if the Silverlight plugin is installed. If the
plugin is not installed, client can allow the plugin to be installed. After this, the Silverlight application is then hosted on the Web client machine. The application instantiates
on the client machine and make requests for resources from the server. The Silverlight
plugin contains only classes and functionalities of .NET Framework that are needed to a
Silverlight Web client. Those classes and functionalities are also, streamlined and optimized for use on the Web client machine. [35]
3.2
Requirements and compatibility
Just like Flash, Silverlight needs proper runtime environment in order to work. Microsoft has released a beta version of the Silverlight 5, but the minimum system requirements are still a question for that version. Moreover, Microsoft has not released more
specific system requirements for displaying HD – video format unlike Adobe – and just
states:” Microsoft designed Silverlight with the ability to deliver high-fidelity experiences on the broadest set of system configurations. Some features, such as HD video,
may benefit from the power contained in newer personal computers.” The minimum
system requirements for Silverlight 4 and Moonlight are listed below [16] [17]:
Windows



Operating System: Windows 7, Windows Vista, Windows XP SP 2
Intel Pentium III 450 MHz or faster processor
128 MB of RAM
MAC



Operating System: Apple Mac OS X 10.4.8 or above
Intel Core Duo 1.83 GHz or faster processor
128 MB of RAM
Linux (Moonlight)



Any modern 32 bit and 64 bit Linux
An x86 or x86-64 computer
128 MB of RAM
As Silverlight is a plugin, the support of the Web browser is a key feature. The table
describing which operating systems and browsers support the latest stable version of
Silverlight is presented in appendix A.
8
Silverlight has also a runtime that is optimized to display content on memory
constrained devices like Windows Phone 7. Silverlight for Windows Phone, also known
as Silverlight mobile, runs on the managed .NET code with XAML. Although the
Silverlight mobile supports core Silverlight capabilities, it lacks many artefacts, classes
and constructs. Silverlight is hosted on the client device and does not support applications that are hosted in a browser. This means that in Windows Phone 7 there is no
Silverlight browser plugin, but instead a native support for Silverlight. [15]
9
4
HTML5
HTML5 is the newest draft of the specification for Hyper Text Markup Language (short
HTML) which is the language of the web. It is currently under development but many
browsers are already supporting it. HTML5 specification includes new features such as
support of video. As a prominent sign that this new standard is being taken seriously,
YouTube has already begun supporting HTML5 videos [18]. Because of these new media features of HTML5, a lot of discussion has risen about the necessity for proprietary
plugin- based RIA technologies such as Flash and Silverlight.
HTML is the milestone of Web programming and the first standard was originally created in 1990. The predecessor of HTML5, HTML4 was standardized as early
as 1997. The new specification is designed to be backward compatible. Thus, everything that worked in previous versions of HTML should work also in HTML5. [19]
Upgrading an HTML page to HTML5 page is easy. This is due the fact that the
HTML5 is a markup language on its own, and not based on SGML anymore. Simply
changing the document type to
<!doctype html>
will do it [20].
4.1
New features
HTML5 adds new features by introducing a number of new elements and attributes.
One of the new features is that HTML5 recognizes that Web pages have a structure.
New structure tags, such as aside, navigation and article are introduced in order to simplify and clarify the structure. The structural difference between HTML4 and HTML5
page is shown in Figure 5-1.
Figure 4-1: The structure of the Web page in HTML4 and HTML5 [21].
10
Some of the new features are semantic replacements and some provide new functionality. Most significant new features are [19] [20]:
 For 2D graphics a <canvas> element
 Local storage
 Web Worker – technique that enable multi-threaded capabilities
 Web Sockets for bi-directional communication
 Multimedia tags to add multimedia to web pages, such as video and audio
4.2
Compatibility and requirements
HTML5 has not yet been standardized, but there are already several browsers supporting it. Different features have different support. For example canvas is rather widely
supported whereas Web Worker is not. The most capable HTML5 browsers at the time
written are:





Google Chrome 10.0.648 and Google Chromium 11.0.690
Apple Safari 5.0.3 and 5.1
Mozilla Firefox 4.0
Opera 11.10
Webkit Nightly 79987
Nightly builds programs are created automatically each night using the latest revisions
of the source code. Additions to this list are Microsoft Internet Explorer 9 and Internet
Explorer 10 Platform Preview 1 (IE 10 PP 1), which support HTML5 but distinctly
fewer features in comparison. The IE 10 PP 1 is a light-weight frame around IE platform and is used to try out the platform and speed up the feedback loop between developers and the IE platform. [22]
The system requirements of HTML5 are those of the HTML5 capable browser. For example Mozilla Firefox 4.0 system requirements are following [23]:
Windows
 Operating system: Windows 2000, Windows XP, Windows Server 2003,
Windows Vista and Windows 7
 Hardware: Pentium 4 or newer that supports SSE2 and 512 MB of RAM
Mac


Operating System: Mac OS X 10.5 and 10.6
Hardware: Intel x86 processor and 512 MB of RAM
11
Linux
 Software requirements: Firefox will not run at all without the following
libraries or packages:
o GTK+ 2.10 or higher
o GLib 2.12 or higher
o Pango 1.14 or higher
o X.Org 1.0 or higher
o libstdc++ 4.3 or higher
12
5
COMPARISON
The comparison of these three technologies is not as straightforward as it might seem to
be. HTML 5 is still in progress whereas Flash has been out in the Web more than ten
years and Silverlight being somewhere in between. In this thesis the comparison is made
strictly based on the specifications of each technique leaving out things such as usability.
5.1
Plugin based versus browser based
The browser, whichever it might be, is able to do certain things such as executing
JavaScript. With plugins, functionality that is beyond the capability of the browser is
provided. Such functionality might be for example streaming a video. RIA techniques
that are based on plugins are for example, Adobe Flash and Flex applications and Microsoft Silverlight applications. However, unlike HTML5, plugin based technologies are
not platform independent, but depend on operating system.
Built-in browser based techniques do not need any plugins and most of modern
browsers are able to run them without any extra downloads. Built-in browser techniques
are based on Script language such as JavaScript. User interfaces are based on the combination of HTML and CSS. More commonly, these techniques are called AJAX techniques. With these techniques it is possible to create RIA from the scratch. There are
also lots of different kinds of implementations of AJAX that ease the use of it, like
jQuery’s AJAX implementation. [3]
The major difference between these three technologies is the plugin, which gives
Silverlight and Flash a huge advantage as they are free from the browser itself; plugin is
a predictable runtime and can be upgraded. On the other hand, HTML5 does not need
any plugin and thus, does not have to count on the end user on that matter. On the end
user’s point of view, this also saves some trouble and speeds up the load times. [24]
Another thing is the security issues. With the new tags and file format that
comes with HTML5, also comes new vulnerabilities and the attack surface grows.
Methods like cross-document messaging could be unsafe if not used properly. The security of HTML5 depends on the used browser as well. However, out of these three technologies, HTML5 can be considered most secure one, as more severe and problematic
are the security issues of the plugins. For example, applications can read and write any
files when the Silverlight is running as an out-of-browser process. Moreover, through
COM+ automation, Silverlight can also run a file or any executable command in the
user´s computer. Not to mention the vast number of security issues in Flash that has
13
caused several security experts to recommend not to install Flash at all, or to block it.
[36] [37]
The future of the HTML5 is secured as HTML is the predominant markup language for web pages. Thus, in the future it is plausible that HTML5 has the widest distribution of these three technologies. Also, with HTML5 there is no problem with
mixed-content sites in otherwise static page. On the other hand, HTML5 still has major
problems with audio and video media as there is no standard formats, no effective and
reliable means of delivering media to the browser, no full screen video display with
JavaScript and content protection issues. [20] [37]
5.2
Between the plugins
As Silverlight and Flash are very much similar technologies with same sort of capabilities and experiences, they are the worst competitors of each others.
Flash having somewhat a ubiquitous status has better future proof than Silverlight and is thus, a step or two ahead of Silverlight. Also, having a long development
history, Flash is a mature technology that has been used widely over years. Silverlight,
on the other hand, is still a rather new technology and it is predicted that the adoption
figure will be 76% by the end of 2011 [25]. The things that speak on behalf of Silverlight are .NET framework and slightly better capabilities; multithreaded, powerful styling and easier learning curve. The multi-threading capability may indeed become a
great advantage of Silverlight as more dynamic, full fledged applications can be created
with it [38]. [26]
5.3
Between different Web sites
One way to compare these three different technologies is to think about their usage in
different Web sites. This new perspective opens also interesting point of views about the
future of these technologies. [27]
Static Web site
Although, Web sites have evolved greatly in recent years and become more dynamic,
there are still lots of static Web sites. Even more, not all Web sites need to have dynamic in them. A static Web site is simple website design having somewhat a fixed content. For example, a simple homepage of individuals or even companies containing basic information about them are often static. Using Flash or Silverlight in static Web sites
would be in vain as they do not give any extra value. HTML5 instead, with all new features and more powerful CSS techniques adds lots of value to static Web sites. [25]
Dynamic Web sites
Dynamic Web sites adds more interaction by for example, enabling posting comments
without having to refresh the whole page. In other words, the information in the Web
14
site is not constant and changes over time. These kind of application have been made for
some time with AJAX, for example Google Maps. The new features of HTML5 such
support this evolution. On the other hand, Flash and Silverlight also provide good
means to create dynamic and interactive Web sites. [25]
Interactive Web pages
Interactive Web sites interact with the user through usually either text-based or graphical user interface. These sites usually have higher level user interface including charting, diagrams etc. For example, Web sites that have Web games are interactive ones. All
three technologies have what it takes to make such a Web site. However with Flash or
Silverlight the development would take most probably less time as they are pluginbased and thus have predictable and consistent runtime environment. [25]
Full-fledged Web applications
Full-fledged Web applications are those of developed ones. As they are highly complex
application, Flash and Silverlight with development environments and other features
offers an easier task to create such applications [27]. However, one must bear in mind
that HTML5 is also capable of creating highly developed Web applications, for example
Google documents [28].
In the end, the developers will choose the technique that will provide them the
features that they desire. The following Table 6-1 presets the core features of each technique.
Table 5-1. The core features of Flash, Silverlight and HTML5. [39] [40] [41]








Flash
High-quality audio
and video codec
Hardware acceleration
Audio and video
hardware decoding
Binary sockets
Support for mobile
platforms
Multitouch and gestures
Image support
3d effects








Silverlight
Hardware accelerated 3d graphics
Multi-thredding
Video hardware decoding
Trickplay
Deep zoom
Out-of-browser
Text and printing
Databinding









HTML5
Audio and video
tags
2d graphics, canvas
tag
Improved forms
Offline access
Web workers, multi-thredding
WebSockets
Geolocation
WebGL
Hardware accelerated graphics
15
As it can be seen, Silverlight and Flash have very similar features concentrating
on delivering high quality media. HTML5, instead, having some problems with delivering audio and video, concentrates more on lower-level applications.
16
6
WEATHER SERVICE SYSTEM DEMO
As a part of this thesis, a web application was made by using HTML5 specification,
SVG, AJAX and JavaScript. Out of the compared technologies, HTML5 was chosen
because it is the newest one, which makes it interesting to see how well it works and
what kind of applications can be made using it. The purpose of this application is to be a
manual of the ROSA – weather service system of the Department of Automation Science and Engineering. The application is made for Mozilla Firefox 4 or never and it is
also tested in Firefox 5. Firefox was chosen, because it supported a variety of HTML5
features. Moreover, the Web applications written to Firefox, do not work properly in
other Web browsers like Internet Explorer and would require more coding in order to
make them work in other browsers too. This however, is not the point of the demonstration and thus, it has been made to work only in Firefox.
6.1
System description
HTML5 is the core of the application. It can be thought of as a roof specification where
other techniques are. Where HTML5 defines the structure of the application, CSS3 defines the style of the application. It is thus used for creating easily changeable style to
the Web page. The user interface, such as pop-ups for example, of the application is
made by using JavaScript and jQuery. However, the main picture of the system that is
used for navigation is SVG and was created by using software called CorelDraw X5
(version 15.2.0.661). The application also contains a SVG animation to illustrate the
functionality of the system, and uses AJAX to get weather information from the server
asynchronously.
6.1.1
Navigation and user interface
Figure 7.1 is a description of the system and it is used to navigate in the application.
Each shown component is actually a link and when user moves the cursor over any of
the components, the cursor changes to click-able. When clicked, a pop-up window
emerges, showing relevant information of the clicked component. The components of
the system are following:
- Client
- Server
- Round Robin Database (RRD)
- MySQL
- ROSA – weather service
- Embedded system
17
-
(satellite and radio-link are also click-able)
Figure 6-1. An applied screenshot from the Web application showing the components of the ROSA –
weather service system.
The UI of the application is made using free JavaScript library called jQuery. In
this case, the UI is not that complex and jQuery is only used for creating pop-ups. As
shown in the Figure 7-2, the pop-ups have the same style that the main layer, are modal,
re-sizeable and dragable.
Figure 6-2. A screenshot showing the pop-up windows of the application.
To add little dynamic nuance to the application, AJAX is used to get certain information from the server asynchronously. Figure 7-3 illustrates one example how
AJAX is used in this application: when user moves the cursor over the “GPSinformation”- link, the GPS- information is then automatically uploaded below the link.
18
Figure 6-3. A screenshot from the pop-up window describing AJAX feature with GPS-information.
The main purpose and asset of using AJAX is that only necessary parts are being updated. This makes Web pages more dynamic and smooth.
6.1.2
The SVG animation
The Web application also contains a short SVG animation of the functionality of the
system. The main parts of the animation are shown in the Figures 7-4 and 7-5. The dots
in these figures represent information flow; red balls represent requirements and blue
balls responses. The purpose of this animation is to illustrate how the system works:
- Server gets information from Rosa via embedded system every one minute.
- The connection between server and embedded system can be any wireless connection: WLAN, GPRS are supported now.
- Server then puts the information to database: RRD is a database for short time
usage, about one day’s weather information and MySQL is long-term database.
Figure 6-4. Screenshots from the SVG animation: 1) getting weather information from ROSA, 2) storing
the information to databases. Red dots represent requirements.
-
When client asks weather information, the request is sent to server, which gets
the information from the database and sends it to back the client.
19
Figure 6-5. A screenshot from SVG where Client asks information from Server. Red dot represents requirement and blue dot response.
Depending on how old weather information is required, Server chooses between RRD
and MySQL databases. Clients can connect to Server both with wired or wireless connection.
20
7
CONCLUSION
This thesis took a small dive into the world of three different Web technologies – Flash,
Silverlight and HTML5 – and compared these to each other. These three technologies
are generally thought to be competitors of each others, especially in the dominance of
the RIAs. Flash and Silverlight are plug-in based technologies and HTML5 is browserbased. Flash has gained somewhat a ubiquitous status and is dominating the markets.
However, it seems that Silverlight is slowly narrowing the gap between them.
All compared technologies enable creating web sites from static Web sites to
full-fledged applications. In some cases using HTML5 is more rational than using Flash
or Silverlight and vice versa. This is because each technique has its’ own “comfort
zone” and works best inside that area; In static, dynamic and maybe even in some interactive Web sites it is more reasonable to use HTML5. Instead, in complex full-fledged
applications it is clever to use Flash or Silverlight. Of course this does not always apply,
but gives a harsh idea.
The conclusion is that HTML5 will most likely take some of the Silverlight´s
and Flash´s market-share. However, all three technologies can thrive at the same time.
Certainly, this means, that Silverlight has to conquer some of Flash’s market-share.
The thesis also included the Web application made by using HTML5 technique.
This part of the Bachelor´s thesis was most interesting and challenging as I did not have
any previous experience about used programming languages. However, especially after
the beginning, coding with HTML5 was rather straightforward. The parts that did cause
a little frustration were including the SVG picture into HTML5 code and getting the
AJAX calls right. I think that the Web application fills up the given objectives and can
be used as a manual to the ROSA Weather service system presenting the main components and functionality of the system. Also, the application proves that HTML5 can
already be used to create Web sites with interactivity.
21
PREFERENCES
[1] SearchSOA – Rich Internet Application (RIA), 2007 [WWW]. [referred 10.4.2011].
Accessible from: http://searchsoa.techtarget.com/definition/Rich-Internet-ApplicationRIA.
[2] StatOwl – Rich Internet Application Market Share [WWW]. [referred 10.4.2011].
Accessible from: http://www.statowl.com/custom_ria_market_penetration.php.
[3] jQuery – AJAX [WWW].
http://api.jquery.com/category/ajax/.
[referred
15.4.2011].
Accessible
from:
[4] Adobe – Flash Player penetration [WWW]. [referred 17.4.2011]. Accessible from:
http://www.adobe.com/products/player_census/flashplayer/.
[5] Adobe – System requirements, Flash Player 10.3 [WWW]. [referred 18.4.2011].
Accessible from: http://www.adobe.com/products/flashplayer/systemreqs/.
[6] Adobe – About drawing [WWW]. [referred 19.4.2011]. Accessible from:
http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af67e89a.html#WSd60f23110762d6b883b18f10cb1fe1af6-7e88a.
[7] Reelseo – Understanding FLV and SWF - The Basic of Flash Video [WWW]. [referred 19.4.2011]. Accessible from: http://www.reelseo.com/flv-vs-swf-the-basics-offlash-video-player/#ixzz1Mi3PnqzW.
[8] Open screen project – Frequently asked questions [WWW]. [referred 20.4.2011].
Accessible from: http://www.openscreenproject.org/about/faq.html.
[9] Marcellus – How does Flash Work [WWW]. [referred 20.4.2011]. Accessible from:
http://blog.marcellus.tv/the-anatomy-of-flash/.
[10] Adobe Developer Connection – ActionScript Technology Center [WWW]. [referred 21.4.2011]. Accessible from: http://www.adobe.com/devnet/actionscript.html.
[11] Adobe Flash Player 10.3 – System requirements [WWW]. [referred 21.4.2011].
Accessible from: http://www.adobe.com/products/flashplayer/systemreqs/
[12] Adobe – Flash Platform runtime penetration [WWW]. [referred 21.4.2011]. Accessible
22
from:http://www.adobe.com/products/player_census/flashplayer/mobile_penetration.ht
ml.
[13] Tietokone – Suuret mediayhtiöt eivät halua vaihtaa Flashista html5-videoon
[WWW].
[referred
21.4.2011].
Accessible
from:
http://www.tietokone.fi/uutiset/lehti_suuret_mediayhtiot_eivat_halua_vaihtaa_flashista_
html5_videoon.
[14] Business insider, sports page – Microsoft Wins The 2010 Olympics For Silverlight
[WWW].
[referred
25.4.2011].
Accessible
from:
http://www.businessinsider.com/microsoft-wins-the-2010-olympics-for-silverlight2009-3.
[15] Microsoft Silverlight – Library, Silverlight [WWW]. [referred 26.4.2011]. Accessible from: http://msdn.microsoft.com/en-us/library/cc838158%28v=VS.95%29.aspx.
[16] Microsoft Silverlight – About Silverlight, frequently asked questions [WWW].
[referred 28.4.2011]. Accessible from: http://www.microsoft.com/silverlight/what-issilverlight/.
[17] Mono – MoonlightSupportedPlatforms [WWW]. [referred 28.4.2011]. Accessible
from: http://www.mono-project.com/MoonlightSupportedPlatforms.
[18] YouTube – YouTube HTML5 Video Player [WWW]. [referred 5.5.2011]. Accessible from: http://www.youtube.com/html5.
[19] W3C – HTML5 [WWW]. [referred
http://dev.w3.org/html5/spec/Overview.html.
5.5.2011].
Accessible
from:
[20] Mark Pilgrim – Dive into HTML5 [WWW]. [referred 6.5.2011]. Accessible from:
http://diveintohtml5.org/.
[21] HTML5 Tuturial – HTML structure [WWW]. [referred 8.5.2011]. Accessible from:
http://html5tutorial.net/general/html-structure.html.
[22] The HTML5 Test [WWW].
http://html5test.com/index.html.
[referred
8.5.2011].
Accessible
from:
[23] Mozilla Firefox – System Requiremetns, Firefox 4 [WWW]. [referred 10.5.2011].
Accessible from: http://www.mozilla.com/en-US/firefox/4.0/system-requirements/.
23
[24] Scott Logic, Colin Eberhardt – Flex, Silverlight or HTML5 [WWW]. [referred
12.5.2011]. Accessible from: http://www.scottlogic.co.uk/blog/colin/2011/05/flexsilverlight-html5-time-to-decide/.
[25] Scott Logic – Silverlight 5 Adoption Predictions [WWW]. [referred 15.5.2011].
Accessible from: http://www.scottlogic.co.uk/blog/colin/2010/12/silverlight-5-adoptionpredictions/.
[26] HTMLGOODIES, Adam Nathan – Getting Started with Silverlight [WWW]. [referred
15.5.2011].
Accessible
from:
http://www.htmlgoodies.com/beyond/article.php/3748171/Getting-Started-withSilverlight.htm.
[27] Identitymine, Jason Cook – Are Flash and Silverlight Dying? [WWW]. [referred
15.5.2011]. Accessible from: http://www.identitymine.com/forward/2010/03/are-flashand-silverlight-dying/.
[28]
Google
docs
[WWW].
[referred
http://www.google.com/google-d-s/tour1.html.
15.5.2011].
Accessible
from:
[29] Webopedia – container format [WWW]. [referred 24.8.2011]. Accessible from:
http://www.webopedia.com/TERM/C/container_format.html.
[30] Difference Between.net – Difference Between FLV and SWF [WWW]. [referred
24.8.2011]. Accessible from: http://www.differencebetween.net/technology/differencebetween-flv-and-swf/.
[31] Adove Developer Connection – Introducing the Adobe Flash Platform [WWW].
[referred
24.8.2011].
Accessible
from:
http://www.adobe.com/devnet/flashplatform/articles/flashplatform_overview.html.
[32] Adove Developer Connection – Overview of sreaming with Flash Media Server 3
[WWW].
[referred
24.8.2011].
Accessible
from:
http://www.adobe.com/devnet/flashmediaserver/articles/overview_streaming_fms3.html
.
[33] Macromedia – Delivering Enterprise Applications, Content, and Communication
with the Flash Platform [.PDF]. [referred 24.8.2011]. Accessible from:
http://www.adobe.com/platform/whitepapers/architecture_tier.pdf.
[34] w3.org – What is the Document Object Model [WWW]. [referred 24.8.2011]. Accessible from: http://www.w3.org/TR/DOM-Level-1/introduction.html.
24
[35] Webucator – Silverlight Tutorial [WWW]. [referred 24.8.2011]. Accessible from:
http://www.learn-silverlight-tutorial.com/.
[36] Veracode – HTML5 Security in a Nutshell [WWW]. [referred 25.8.2011]. Accessible from: http://www.veracode.com/blog/2010/05/html5-security-in-a-nutshell/.
[37] eHow – Security Concerns With Silverlight [WWW]. [referred 25.8.2011]. Accessible
from:
http://www.ehow.com/list_6950877_security-concernssilverlight.html#ixzz1VYaYgHtG.
[37] YouTube API Blog – Flash and the HTML5 <video> tag [WWW]. [referred
25.8.2011]. Accessible from: http://apiblog.youtube.com/2010/06/flash-and-html5tag.html.
[38] The Effect Generator – Flex vs. Silverlight: The Elephant in the Room [WWW].
[referred 25.8.2011]. Accessible from: http://effectgenerator.com/blog/?p=35.
[39] Adobe – Flash Player features [WWW]. [referred 25.8.2011]. Accessible from:
http://www.adobe.com/products/flashplayer/features/.
[40] Silverlight – Top Silverlight Features [WWW]. [referred 25.8.2011]. Accessible
from: http://www.microsoft.com/silverlight/features/.
[41] The 7 most Important HTML5 Features [WWW]. [referred 25.8.2011]. Accessible
from: http://blog.elemdage.com/technology/the-7-most-important-html5-features.
25
A. APPENDIX
Table A.7-1. The minimum hardware requirements for Adobe Flash Player version 10.3 [11].
Table A.7-2. The minimum hardware requirements for SD and HD video playback [11].
Table A.7-3. Supported operating systems and browsers for Flash Player version 10.3 [11].
26
Table A.4. Platforms and browsers that supports Silverlight 4 [16].
As an addition to this list Moonlight should work in Linux and other Unix/X11 based
operating systems in browsers Firefox 2.0, 3.0, and 3.5 and Chrome 4.x or later [17].