×
Namespaces

Variants
Actions

Technology behind Web 2.0

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: yndurain (29 Jun 2007)
Last edited: hamishwillee (31 Jul 2012)

Most of the technologies behind internet are still used for Web 2.0: XHTML standards, style sheets, content syndication, AJAX, flash, dynamic pages, URLs among others [Van Der Henst, 2005]. According to Wikipedia, the technology infrastructure of Web 2.0 includes “server-software, content-syndication, messaging-protocols, standards-based browsers with plug-in and extensions, and various client applications”. All these technologies enable web 2.0 to offer capabilities different from traditional web sites offer, such as information-storage, creation, and dissemination capabilities.

Technology behind Web 2.0 is more about how “technologies are being used by people all over the world, and how rapidly many of them are embraced” according to Cavanaugh [2002]. There are a set of technologies that allow a large number of people to connect, communicate, collaborate and create [Cavanaugh, 2002] as we have seen when analyzing the different type of services that compose Web 2.0 concept. We now have heavy users of technology that seem to have a technology device always with them as an attachment to their body (a personal digital agenda, or a cell phone, a laptop, a beeper, a digital music player…): this is what empowers users.


Technology overview

According to Roy Fielding the World Wide Web is the world's largest distributed application. In order to understand how this application has evolved to the Web 2.0 it is necessary to understand the key architectural principle which leads to create light business models. The key architectural principle of the web according to its creator, Tim Berners Lee [1991], is that “the Web is by design and philosophy a decentralized system” which allows more freedom when designing web based applications although it also adds a chaos component to the whole system.

According to Wikipedia and to my personal insight, a Web 2.0 website may typically feature a number of the following techniques:

1)Content Syndication: Syndication and aggregation of data in RSS/Atom

2)Ajax-based rich Internet application techniques: improve user experience.

3)CSS style sheets for adding style to the web pages.

4)DOM representation of HTML and XTML in tree structures.

5)REST approach for getting information content from a Web page.

6)XML system for constructing custom markup languages that can be used to describe data types.

7)Mashups which combine applications to create new services.


1) Content syndication

RSS history goes back to 1997 and the creation of RDF, it was first invented by Netscape who wanted to use an XML format to distribute information. Later Userland Software took control of the specifications and continued to develop it launching RSS V2 which is the current existing one nowadays [1].

Content syndication such as RSS, Atom, RDF are used for the creation of web 2.0 services, for example RSS protocol is used for syndicating news and exchanging headlines between content-prone websites [Schwall, 2003]. I will focus on RSS technology since it seems to be the most popular and accepted choice for delivering syndicated web content; it is known as the internet pipe or the glue ”to create services”, according to Gomero [2006]. RSS can be used to deliver any type of content: text or multimedia. For example, podcasting is music delivered over RSS.

RSS is an acronym for Really Simple Syndication and Rich Site Summary. It is an XML-based format used for content distribution; moreover it is a defined standard based on XML in order to deliver updates to web-based content. Webmasters use it to provide fresh content in a concise way while users consume RSS readers and news aggregators to collect their favorite feeds in a centralized way. [2]. According to wikipedia, RSS is a family of web feed formats used to publish frequently updated digital content, such as blogs, news feeds or podcasts.


SW for RSS can be divided into two main groups according to how it will be used: content providing and content reading, RSS Creation Software for the former and RSS Reader for the later. [3]

In order to read syndicated content, users must select RSS feeders from the website.

RSSFeed.gif

RSS Creation Software: it creates RSS feeds that are compliant with the RSS specifications. An example of SW that appears in the RSS specification webpage is “FeedForAll” which is a desktop applications that creates, edits and publishes RSS feeds

RSS Reader To view RSS feeds from specified sources. There are two different types of readers, self contained program or readers using a web browser. The program is also called news aggregators. Information is automatically updated and displayed in reverse chronological order. There is an add-on SW available for internet browsers that allows users to view RSS feeds in their own browsers.


2) Ajax-based rich Internet application techniques

Web 2.0’s success is mostly due to the use of light technologies such as AJAX that allow developers to create Light web interfaces for these new services. These interfaces optimize transactions between browser and server [4]. Ajax programmers must know how each browser interacts with applications when programming, how it changes the interaction on that page [Malik, 2006].

According to wikipedia, Ajax means Asynchronous JavaScript and XML; it is “a web development technique for creating interactive web applications”. The goal is to make web pages more dynamic by exchanging small amount of data within the client and the server. The consequence of this procedure is to reduce the amount of web page that needs to be reloaded each time there is a request from the user; hence the page’s interactivity is higher, faster and easier to use. Ajax is not a technology in itself, but a term that refers to the use of a group of technologies [5]. Technologies such as JavaScript are changing the way we interact with content online [Malik, 2006].

According to wikipedia “The Ajax technique uses a combination of XHTML (or HTML) and CSS, for marking up and styling information.” Garrett [2005] in his definition about Ajax defines exactly what web technologies are behind it and how they interact between each other:

•standards-based presentation using XHTML and CSS;

•dynamic display and interaction using the Document Object Model;

•data interchange and manipulation using XML and XSLT;

•asynchronous data retrieval using XMLHttpRequest;

•JavaScript binding everything together.

In addition to the regular web architecture, in the front end there is an extra layer in addition to the HTML and CSS ones for JavaScript to manipulate XML files [6]

AjaxArchitecture.gif


According to Garret [2005] “Ajax applications eliminate the start-stop-start-stop nature of interaction on the Web by introducing an intermediary between the user and the server.” It would seem like adding an extra layer to the application would slow its responsiveness but it is actually the opposite.

The way it works is that at the start of the session the browser loads an Ajax engine which renders the user interface and communicating with the server. Ajax takes charge of all HTTP requests between the user and the server, the engine makes the requests in an asynchronous way using XML without delaying user’s interaction with the application [Garret, 2005].


3) CSS

According to the W3C, CSS (Cascading Style Sheets) is defined as “a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” It is a style sheet language used to describe the presentation of a document written in a markup language, and it is generally used on pages written in HTML and XHTML or any kind of XML document. The CSS specifications are maintained by the W3C [7]. Style sheets are a very useful mechanism for designing accessible web pages, in Walsh’s words “supplying presentational information to a user agent displaying structured documents.” CSS is described formally by the W3C in two specifications: CSS1 and CSS2

A style sheet is a set of one or more rules that apply to a web markup document, the rules are statements about one stylistic aspect of one (or more) elements. CSS can be created in two different ways; (1) programming by hand in a normal text editor defining the style sheets and (2)use a special dedicated tool such as a Web page design application that supports CSS [Wium Lie and Bos, 1999]. In order for the Style Sheet to affect the document it must be combined with it; this can be done in four ways described by Wium Lie and Bos [1999] on their book “Cascading Style Sheets, designing for the Web”.

Ways to use CSS:

•Applying it to the whole document scope by using the element style of mark-up languages.

•Applying it only to an individual element by using the attribute style mark-up languages.

•Linking an external Style Sheet to the document by using element link.

•Import a Style Sheet by using notationCSS @import.


An important issue that must not be forgotten is that there might be a conflict on publication guidelines between the publisher and the reader (if the later has some interface restrictions for example). Moreover, using modular style sheets is bound to generate conflicts. The way to solve these issues is defined in CSS1 by a scheme for assigning priority to each style element; the style with the highest priority always wins [Walsh, 1996-7].


4) DOM

As defined in Wikipedia, “Document Object Model is a description of how an HTML or XML document is represented in a tree structure.” It was first created in 1998 and it has been updated on 2005 by W3C. It provides a structure that facilitates access to the elements of web documents such as HTML or XML by scripting languages with object oriented features (e.g., JavaScript). DOM is created to ensure there is a common standard for animated web pages that are created with technologies that combine HTML, style sheets and scripting since they are various options in the market. [8] According to W3C, DOM is both a platform and a language that can be seen as an interface that allow programs and scripts to access in a dynamic way content, structure, and style of documents and update it.

The document can be processed further on and these results can be fed into the page. The tree-based implementation that is created by DOM requires that the entire content of a document is parsed and stored in memory. According to wikipedia 'This is why DOM is best used for applications where the document elements have to be accessed and manipulated in an unpredictable sequence and repeatedly.' DOM specifications according to the W3C are divided into levels which are composed by modules. Applications must implement all requirements of a level, and the ones below it, to fully support it as defined by the W3C levels.

DOM's layers are the following ones:

0-It is not a formal specification published by the W3C but a shorthand that refers to what existed before the standardization process. The application supports an intermediate DOM,

1-Navigation of DOM (HTML and XML) document (tree structure) and content manipulation (includes adding elements). HTML-specific elements are included as well.

2-XML namespace support, filtered views and events.

3-Consists of 6 different specifications. DOM Level 3: Core; Load and Save; XPath; Views and Formatting; Requirements; and 3 Validation, which further enhances the DOM.


5) REST

According to the definition given in whatis.com, Representational State Transfer (REST) is an approach for getting information content from a Web site by reading a designated Web page that contains an XML file that describes and includes the desired content. It was created in 2000. As its own author (Fielding, 2000) states, it is an "architectural style" which exists with web technologies such as HTTP and XML. The goal behind REST is to create an image of how a Web application which is well defined should behave.

Fielding states that REST is a definition of architecture constraints to improve network communications in terms of speed while “maximizing the independence and scalability of component implementations”. He claims that this goal is achieved by placing constraints on connector semantics rather than on component ones. “REST enables the caching and reuse of interactions, dynamic substitutability of components, and processing of actions by intermediaries, thereby meeting the needs of an Internet-scale distributed hypermedia system.” People that favour REST claim that both scalability and growth of the Web is due to these key design principles [9].

Design principles behind REST are the following:

•Division into resources of application (state and functionality) re divided into resources

•Every resource is uniquely addressable using a universal syntax for use in hypermedia links

•Uniform interface for transfer state between client and resource shared by all consisting of a constrained set of : well defined operations and of content types that can support code-on-demand

•A protocol that is client/server, stateless, cacheable and layered.


Its functionality is similar to that of SOAP, in favor we can say that it is easier to use since it requires less programming although against we can say that it has less capability since it has less interaction between server and client. It requires that SOAP be used, which allows a greater amount of program interaction between client and server [whatis.com].

6) XML

XML is a very powerful system for managing information. It is a grammatical system for constructing custom markup languages which can be used to describe any type of data: mathematical, business, chemical, etc [Castro, 2001]. The first draft was published on 1996 and it did not become a W3C recommendation until 1998 [wikipedia] it is a subset from SGML. According to W3C XML has been created to facilitate implementation and interoperability within SGML and HTML. XML lets everyone create their own tags which are hidden labels that annotate the Web so that scripts, or programs, can use them in advanced ways [Berners-Lee et al, 2001].

XML is based on the same technology as HTML although it is designed to better handle information management [Castro, 2001]. It is different from HTML according to Wikipedia HTML has an 'inflexible single-purpose vocabulary of elements and attributes that, in general, cannot be repurposed.' XML and HTML are very similar looking, both with tags, attributes and values, however XML allows you to design your own markup languages [Castro, 2001] it is also easier to write software to access document’s information because data structures are represented in a formal and easy way [wikipedia].

XML provides a way to describe and apply a tree-based structure to information. This information is represented as text with markup to indicate how it is separated into a hierarchy. XML’s fundamental unit is the character which is combined in an XML document, which in turn is made of one or more entities, each of which is typically stored in a text file. XML files do not carry information about how to display the data on the web. This is why it needs CSS or XSL [wikipedia]; otherwise it would be seen through web browsers as simple text with no layout whatsoever.

In addition to being well-formed, an XML document needs to comply with a particular schema which is a description of a type of XML document in order for the browser to display its layout and style. A sentence should be included at the beginning of each XML document that references either the CSS or XSL style sheets [wikipedia].

CSS include style sheet: <?xml-stylesheet type="text/css" href="myStyleSheet.css"?>

XSL specify client-side XSLT: <?xml-stylesheet type="text/xsl" href="myTransform.xslt"?>

All the end-user sees is displayable data and does not know what goes behind the scenes. XML has three basic building blocks used for programming.

XMLBlocks.gif


Each XML document has one single root element which encloses the rest of the elements and is the parent element to all the other elements. Elements may contain other elements which are called nested elements [wikipedia]. All elements must be properly nested, i.e. must have an opening tag (<>) and closing tag (</>) only comments and processing instructions can be placed outside the root element. Entity references to create specific signs must be declared, except the default five special symbols: ampersand, less and greater signs, double and single quotation marks [Castro, 2001].


7) Mashup

According to wikipedia, mashup is a web application hybrid, a web based application which integrates content from many sources in a unique place by picking bits and pieces from different places. It is originally a Jamaican term which means to break something which then evolved to mixes in music. Mashups offer a challenge for service creation to SW engineers. These services are created by mixing existing applications rather than by an overall design. This means that the development methodology is more of a bottom-up as than a top-down like it has been done traditionally. In order to design new services, programmers analyze what are the current functionalities of existing applications and think of ways in which they can combine them to create new ones. Technologically, the concept is similar to the Enterprise Application Integration SW and it faces the same issues: data integration, connectivity, communication, compatibility, design, etc. There is also a major challenge associated to the service maintenance due to the existing SW obsoleteness risk.


Mashups are driven by the Web’s own culture; barriers to re-use and mix are extremely low since the SW y open source plus there is not much intellectual property protection in place either. The own browser's "View Source" option makes it possible for users/programmers to copy other pages, RSS is designed to empower the user to mix the content he/she wants creating a new one [O’Reilly, 2005]. Google maps can be seen as a good example of Web 2.0 Mashup service mixing places information with maps. Consequences of mashup services are a lack of a clear business model associated to the new service

This page was last modified on 31 July 2012, at 13:27.
114 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×