SOFTWARE ARCHITECTURES
1
Chapter 1 – HTML5
Anh Au
Summary
In this chapter, we cover HTML5 and the specifications of HTML5. HTML takes a major part
in defining the Web platform. We will cover high level concepts, the history of HTML, and
famous HTML implementations. This chapter also covers how this system fits into a larger
application architecture. Lastly, we will go over the high level architecture of HTML5 and cover
HTML5 structures and technologies.
Introduction
High level concepts – what is the basic functionality of this system
HyperText Markup Language (HTML) is the markup language used by to create, interpret, and
annotate hypertext documents on any platform. HTML5 is the fifth and latest standard for
HTML. It is enhanced to provide multimedia and interactive content without needing additional
plug-ins.1 The current version more easily and effectively supports the creation of web
applications that are able to work with the user, the user’s local data, and server.
Glossary
CERN European Organization for Nuclear Research
CSS Cascading Style Sheets
A style sheet language used for describing the look and formatting of
a document written in a markup language
DOM Document Object Model
A cross-platform and language-independent convention for
representing and interacting with objects in HTML, XHTML, and
XML documents
DTD Document Type Definition
A set of markup declarations that define a document type for an
SGML-family markup language
GPU Graphics Processing Unit
HyperText Text displayed on a computer display with hyperlinks to other text
which the reader can immediately access
IETF Internet Engineering Task Force
Develops and promotes Internet standards
Internet A global system of interconnected computer networks that use the
standard Internet protocol suite to link several billion devices
worldwide
JS JavaScript
The scripting language of the Web
Markup
language
Modern system for annotating a document in a way that is
syntactically distinguishable from the text
PHP PHP: Hypertext Preprocessor
SOFTWARE ARCHITECTURES
2
A server-side scripting language designed for web development
RTC Real-Time Communication
SGML Standard Generalized Markup Language
Used for defining generalized markup languages for documents
W3C World Wide Web Consortium
The main international standards organization for the World Wide
Web
WHATWG Web Hypertext Application Technology Working Group
A community of people interested in evolving HTML
XHTM L Extensible HyperText Markup Language
A family of XML markup languages that extends versions of HTML
XML Extensible Markup Language
A markup language that defines a set of rules for encoding documents
in a format that is both human-readable and machine-readable
SOFTWARE ARCHITECTURES
3
History
Although the origin of the Internet began around the 1960s, the field of academia began to utilize
the Internet in the 1980s. Progressing into the 1990s, the increasing popularity of the Internet
had created an impact on cultures and businesses everywhere.
CERN researchers were
looking for a system that would
the central location where
documents could be created
and shared. The idea came to
be ENQUIRE in 1980. In
1989, physicist and CERN
contractor Tim Berners-Lee
incorporated the ever-growing
Internet into the ENQUIRE
system. He suggested a
hypertext system that would
use hyperlinks connecting to
the Internet. By late 1990,
Berners-Lee created HTML
and the browser and server
software. 2
Figure 1. ENQUIRE Proposal9
In late 1991, Berners-Lee first publicly defined HTML on the Internet. At the time, HTML
contained only 18 elements. He stated that HTML was an application of the Standard
Generalized Markup Language (SGML). Several concepts were borrowed from SGML such as
element types formatting with a start tag, content, and an end tag, element attributes, character
references, and comments.
Figure 2a. Sample SGML markup 10 Figure 2b. Sample HTML markup 12
SOFTWARE ARCHITECTURES
4
Because of the widespread
usage of HTML, an IETF
working group was formed to
develop IETF specifications
for HTML. In 1995, HTML
2.0 was released as the
suggested standard for future
HTML uses. The HTML 2.0
specification formalized
HTML capabilities and
introduced new features like
form-based file upload, tables,
client-side image maps, and
internationalization. 3
Figure 3. Sample of HTML 2.0 13
HTML 3.0 was drafted and proposed in April 1995. The HTML 3.0 proposal expired without
approval from the IETF. The increase in web browser development contributed to the failure of
the HTML 3.0 proposal. 22 Since the IETF working group for HTML 2.0 closed in September
1996, HTML 3.2 was released by W3C in January 1997. Features that were added in HTML 3.2
specification were tables, applets, and text flow around images. Mathematical formulas were
purposely not included in this version. 23
Figure 4. Sample of HTML 3.2 11
SOFTWARE ARCHITECTURES
5
In December 1997, HTML 4.0 was released as a W3C recommendation. HTML 4.0 featured
more multimedia options, scripting languages, style sheets, and documents were made to be
more accessible to users with disabilities. This version began specifying <!DOCTYPE>
declarations that were to be included at the beginning of each HTML document. This
declaration is an instruction for the web browser indicating which version of HTML the page is
written in. The three document type definitions were strict, transitional, and frameset. Users
were recommended to use the Strict DTD whenever possible since the Strict DTD excluded
presentation attributes and elements, but users could use the Transitional DTD when support for
the presentation attributes and elements were required. The Frameset DTD was similar to the
Transitional DTD except that the “FRAMESET” element was used in place of the “BODY”
element. 24
The subversion HTML 4.01 was released in 1999. Some errata were changes to the DTDs, new
style sheets, document scripts, and global structure of a HTML document. 25
Figure 5. Sample of HTML 4.01
In 2004, the Web Hypertext Application Technology Working Group (WHATWG) began
developing HTML5. With the collaboration with the W3C, HTML5 was completed in 2008. 1
HTML5 was designed to replace HTML4, XHTML, and the HTML Dom Level 2. New features
included new elements, new attributes, full CSS4 support, video and audio, 2D/3D graphics,
local storage, local SQL database, and web applications. HTML5 is also cross-platform.
Figure 6. HTML5 is designed to be supported on PCs, tablets, and smartphones 16
SOFTWARE ARCHITECTURES
6
Famous system implementations
Since every browser vendor provides HTML5 support and HTML5 has become the only truly
cross-platform application environment, there are billions of examples of HTML.
Open source blogging tools, such as WordPress, are an example of HTML implementations. In
conjunction with CSS and PHP, WordPress themes and posts use these languages to change the
aesthetics and functionality of a WordPress website.
In 2011, Facebook had two focuses - HTML5 and mobile. Facebook’s Chief Technology
Officer, Bret Taylor, saw the two focuses as very interrelated concepts. Taylor claimed
HTML5 as the future of mobile. Since it was ideal to keep Facebook consistent on desktop site
and on mobile, Facebook took after the HTML5 trend. There were even internal teams devoted
to creating HTML5 Facebook games! 5
RuneScape, one of the most famous massively multiplayer online role-playing games, developed
an HTML5 version in 2012. Originally written in an interpreted domain-specific scripting
language, the makers of Runescape transitioned the game to have the ability to be played on
“your favourite tablets, platforms and even smart TVs.” The decade-old browser game
experimented with the HTML5 graphics engine that provided impressive visuals. 6
Figure 7. RuneScape HTML5 comparison 20
How does this system fit into a larger application architecture?
Since the beginning of software development, the application’s function and experience versus
the application’s distribution and access have been on opposite ends of the software development
spectrum. The perfect software application model would maximize both of these two features.
As shown in the figure below, multiple generations of different software architecture have passed
as the ideal software architecture generation is in the near future.
Mainframe marked the beginning of the software architecture evolution with the server,
keyboard, and monochrome screen. Mainframe had a low user experience but a high application
access. In the second generation, the Client/Server model increased the user experience
significantly by moving all of the application logic to the client side but decreased application
distribution. By the third generation, instant access and an update of a server-driven application
with better user interfaces was granted by the Web.
SOFTWARE ARCHITECTURES
7
In the current generation, the Mobile Apps model acted as the successor to the Client/Server
model. This model is successful for games and other consumer applications. Although this
model is a more efficient platform for users to use their applications, limitations such as platform
dependency were still inherited by its predecessor. Therefore, some aspects of the Mobile Apps
model still lose to the Web model.
While the current mobile apps market trend is taking up society’s attention, the biggest Internet
providers are competing to master HTML5. In the present, the latest version of every browser
has complete HTML5 support. Even though the number of devices being introduced is always
increasing, HTML5 has been proven to be the cross-platform application environment. If
executed correctly, a HTML5 application code can be distributed on the Web or by mobile apps.
As the impending fifth generation of the software architecture evolution, HTML5 will provide a
rich user experience and high instant deployment. 14
Figure 8. Software Architecture Evolution 14
Also as shown in the figure below, HTML fits in the SGML architecture. SGML and XML are
considered to be meta-languages - languages that are used to mark up languages. XML is a more
restricted subset of SGML. As discussed before, HTML was derived from SGML and is an
SGML vocabulary of SGML. XHTML is an application of XML and, hence, is a part of the
XML family.
SOFTWARE ARCHITECTURES
8
Figure 9. Relationship between SGML, HTML, XML, and XHTML 15
High Level Architecture
HTML5 is a large set of technologies that give users the ability to create more rich and powerful
web sites and applications. The high level structures of HTML5 include semantics,
connectivity, storage, multimedia, graphics, performance and integration, device access, and
styling.4 These structures contain different software elements and the relationship of the entities
make up the HTML5 software architecture.
Figure 10. HTML5 Enterprise Application Architecture 21
SOFTWARE ARCHITECTURES
9
Semantics 4
Semantics allows the user to describe more precisely what the content of the application is.
A semantic element describes its meaning to both the browser and the developer.
Figure 11. HTML5 Semantic Elements 8
Section and outlines 26
New elements were introduced to allow web developers to describe the web document structure
with standard semantics. By using the more precise HTML5 semantics, a web document outline
is more predictable and easier for the browser to comprehend.
Defining sections in HTML5 can be done in the main <body> element. Sections can be nested.
Headings ( <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) have increasing rank and are used to define
the heading of the current section.
Four new outlining and sectioning element in HTML5: <aside>, <nav>, <header>, and <footer>.
The Aside section element defines a section that doesn’t belong to the main <body> flow and has
its own outline. The Navigational section element is also not part of the main <body> flow and
defines a section that contains navigation links (such as table of contents or site navigation). The
header and footer section elements define the page’s header and footer where logos or copyright
notices may be placed.
Forms 27
Web forms improvements were made in HTML5. Form elements and attributes provide a more
uniform experience for users that wish to make forms.
New value types for the <input> element were added - search (for search entry), tel (for editing a
telephone number), url (for editing a URL), and email (for entering an email address). Users can
further specify what type of control to display. The default type remained to be text if no
specific attribute was specified.
SOFTWARE ARCHITECTURES
10
Figure 12. Example form showing new value type: tel, email, url, and search 17
The <output> element was a new element added in HTML5. This element displayed the result
of a calculation based on the inputs or parameters of other elements in the document.
Connectivity 4
Connectivity allows the user to communicate with the server in more advanced ways.
Web Sockets 28
WebSockets API has the ability to create a permanent connection between the page and the
server. Non-HTML data can be exchanged without requesting the server for a response.
Server-Sent Events 29
The Server-Sent Event API allows a server to push events to a client instead of sending data only
when the server received a client request. Through Server-Sent Events, a web page can
automatically get updates from a server. Examples of this are social media updates, stock price
updates, sports results, etc.
Multimedia 4
HTML5 provides multimedia support with the <video> and <audio> elements. With the media
elements attributes, media can be easily embedded into web documents. The attributes check to
see if the media type is compatible with the browsers capabilities.
WebRTC 30
WebRTC allows audio and video streaming and data sharing between browser clients. This
SOFTWARE ARCHITECTURES
11
application is plugin-free and is used for teleconferencing. WebRTC components can be used
via JavaScript APIs and HTML5.
Figure 13. How WebRTC transfers voice, video, and data during teleconferencing 18
Graphics 4
2D and 3D graphics and effects allow a diverse range of presentation options. The new
<canvas> element can draw graphics through scripting.
WebGL 31
The Web Graphics Library (WebGL) brings 3D graphics to the Web by introducing an
JavaScript API that can be used in HTML5 <canvas> elements. Interactive 2D and 3D graphics
can be drawn with supported web browsers without the need of plug-ins. WebGL programs run
from control and special effects code that is executed on the computer’s GPU.
SVG 32
Scalable Vector Graphics (SVG) is an XML-based format of vectorial images that can directly
be embedded in the HTML. To provide enhanced HTML pages or web applications, SVG works
together with HTML, CSS, and JavaScript.
Data Format & Web Storage 4
In earlier versions of HTML, cookies were used to store data locally. With HTML5, web pages
can store data on the client-side locally within the user’s browser and operate offline more
efficiently. Web Storage is more secure and faster since data is used only when requested by the
server. Large amounts of data can be stored without affecting the web page’s performance.
Application Caching 33
Application caching allows applications to become an offline resource. The AppCache interface
specifies what the browser should cache in order to make the data available to offline users. The
benefits of application caching are offline browsing, speed, and reduced server load.
SOFTWARE ARCHITECTURES
12
Figure 14. Offline experience with AppCache 19
DOM Storage 34
Client-side session and persistent storage allows web applications to store structured data on the
client side. DOM Storage is designed to provide a larger storage limit, a more secure storage,
and an alternate information storage rather than cookies. Data is stored in name/value pairs and
can only be accessed by the web page that stored the data.
IndexedDB 35
IndexedDB is a web standard for the storage and high performance searches of large amounts of
structured data in the browser. IndexedDB is a transactional database system which lets the user
store and retrieves objects that are indexed with a key. The user then needs to specify the
database schema, open a connection to the user’s database, and then retrieve and update data
within a series of transactions. While a user can access stored data within a domain, the user
cannot access data across different domains. There is not a limit on an item’s size within the
database, but each IndexedDB database may be limited in total size.
Using files from web apps 36
The new HTML5 File API support makes it possible for web applications to access local files
selected by the user and read the files contents. This includes support for selecting multiple files
using the <input> element's new multiple attributes.
Performance and integration 4
The goal of performance and integration is providing greater speed optimization and better usage
of computer hardware.
Web Workers 37
Usually when scripts are executed in an HTML page, the page is unresponsive until the
SOFTWARE ARCHITECTURES
13
script is done. With web workers, the performance of the page is not affected. Web
workers are JavaScript evaluations to background threads and runs independently of
other scripts. Web workers actually prevent the threads from slowing down interactive
events.
Device Access 4
Device access allows for the usage of various input and output hardware devices through device
APIs. A common example of this is the Camera API. After the user activates the <input>
element with type = “file” and chooses the device camera, this allows the device’s camera to take
and upload pictures to the current web page.
Geolocation 38
The Geolocation API lets browsers locate the position of the user using their provided location.
To ensure privacy, users are asked for permission before reporting their location information.
Touch Events 39
Touch events are handlers to react to events created by a user pressing touch screens or
trackpads. A surface is considered a touch-sensitive surface. A touch point is a point of contact
with the surface. Touch events have several interfaces from Touch (a single point of contact),
TouchEvent (an event when the state of touches on the surface changes), TouchList (a group of
touches), and DocumentTouch (contains methods for creating Touch and TouchList objects).
Styling (Templating) 4
Styling allows authors to create more sophisticated themes. CSS has been improved to be able to
style more complex elements. With HTML5, CSS has new background styling features, more
fancy borders, animations, and new presentational layouts.
HTML5 For Applications 7
According to “Understanding HTML5 for Applications” by Jeremy Chone, any Web user
interface has the following HTML flow.
First, data exists in databases, file systems, or even Web services.
Upon a specific request, data logic extracts and organizes the data needed to serve the
request into a data model to be rendered to the user.
Then, the model is combined with a template to generate the HTML that the browser will
ultimately display to the user.
Before and/or after the content is displayed, behavior logic is "attached" to the HTML
document.
Upon user interaction, the behavior logic handles the interaction by eventually updating
all or part of the application by restarting the flow entirely or partially.
SOFTWARE ARCHITECTURES
14
Figure 15. HTML Application Flow Chart 7
HTML5 capability to interact with the client versus the server has evolutionized since the Web
model. Although using client and server produces the best results, it is now possible to create
full applications with the DOM without a server if needed.
Because of the iterative and dynamic nature of Web specifications, Web specifications have
become implementation-driven.
Figure 16. What makes up HTML5 and what features it has 7
SOFTWARE ARCHITECTURES
15
References
[1] http://www.w3schools.com/html/html5_intro.asp
[2] http://www.w3.org/History/1989/proposal.html
[3] https://tools.ietf.org/html/rfc1866
[4] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
[5] http://techcrunch.com/2011/01/27/facebook-bret-taylor/
[6] http://www.eurogamer.net/articles/2012-08-30-mmo-runescape-being-developed-for-tablets-
smart-tvs-and-other-platforms
[7] http://britesnow.com/blog/understanding-html5-for-applications
[8] http://www.w3schools.com/html/img_sem_elements.gif
[9] http://www.w3.org/History/1989/proposal-msw.html
[10] http://en.wikipedia.org/wiki/File:OED-LEXX-Bungler.jpg
[11] http://www.irt.org/articles/js148/723x387xmodule.gif.pagespeed.ic.YO23tRb60b.png
[12] http://www.radford.edu/~rstepno/coms326/picoclip400w.png
[13] http://www.w3.org/MarkUp/html-spec/html-spec.txt
[14] http://britesnow.com/blog/software-architecture-evolution-mobile-apps-to-html5
[15] http://www.uni-potsdam.de/u/zeik/kurse/HTML-Tutorial/beziehungen.htm
[16] http://canvaskite.com/wp-content/uploads/2014/02/crossp-platform-mobile-app-
development-company1.png
[17] http://developersmix.files.wordpress.com/2011/08/html5-form.jpg
[18] http://twimgs.com/nojitter/ehk/13may/Kelly_webrtc_F1.png
[19] http://vincenthomedev.files.wordpress.com/2011/12/image1.png
[20] http://www.dpsvip.com/images/news/picture%20comparison.jpg
[21] http://britesnow.com/html5/html5-application-architecture
[22] http://www.w3.org/MarkUp/html3/CoverPage
[23] http://www.w3.org/TR/REC-html32
[24] http://www.w3.org/TR/REC-html40-971218/
[25] http://www.w3.org/TR/html401/
[26] https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document
[27] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML
[28] https://developer.mozilla.org/en-US/docs/WebSockets
[29] https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events
[30] https://developer.mozilla.org/en-US/docs/WebRTC
[31] https://developer.mozilla.org/en-US/docs/Web/WebGL
[32] https://developer.mozilla.org/en-US/docs/Web/SVG
[33] https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache
[34] https://developer.mozilla.org/en-US/docs/DOM/Storage
[35] https://developer.mozilla.org/en-US/docs/IndexedDB
[36] https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
[37] https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers
[38] https://developer.mozilla.org/en-US/docs/Using_geolocation
[39] https://developer.mozilla.org/en-US/docs/DOM/Touch_events