Techniques and Tools for Building Web 2.0 Services - DocsLib

sign in sign up

<<

Home , Google Gadgets, HCard, Microformat, OpenSocial, Semantic HTML, Webnode

MASARYK UNIVERSITY

FACULTY OF INFORMATICS

Æ

Techniques and Tools for Building Web 2.0 Services

BACHELOR’S THESIS

Jaroslav Tesaˇr´ık

Brno, 2008 Declaration

Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source.

Advisor: RNDr. Tom´aˇsPitner PhD.

ii Acknowledgement

I would like to thank my advisor, RNDr. TomáˇsPitner PhD., for his worth advice and lots of incentive comments while working on this thesis. I am also much obliged to my parents for their support and encouragement during my studies. And, last but not least, I do appreciate my fiancée Pavl´ına.

iii Abstract

Web 2.0 is a broadly discussed term at this time. Nowadays, the Internet is passing through a trasformation showing its new capabilities and web applications design concepts. Many Web 2.0 services are presently considered as platforms designed to support creating new ones – the so called mashups. Instruments like open APIs and algorithmic data management form a quite new kind of web applications, sometimes titled infoware. The bulk of social sites has turned the Internet into a main market for processing applications. This thesis is mainly focused on the analysis of the Web 2.0 and the steps leading to the current situation. It presents the principles the current Web stands on both from the view of a Web 2.0 service structure and technologies it is built on. Finally, based on these principles, general rules for Web 2.0 service development are proposed.

iv Keywords

The Internet, web, Web 2.0, web service, Web 2.0 service, web application, user, content, data, Google, widget, mashup, open API

v Contents

1 Introduction ...... 1 1.1 Thesis Structure ...... 2 2 The Way towards The Web 2.0 ...... 4 2.1 The Beginning ...... 4 2.2 The Server Side Scripting ...... 5 2.3 The Client Side Scripting ...... 5 2.3.1 JavaScript ...... 5 2.3.2 DynamicHTML ...... 6 2.3.3 DOMScripting ...... 6 2.4 AJAX ...... 7 2.4.1 History...... 7 2.4.2 BasicPrinciples ...... 7 2.4.3 XMLHttpRequest Object...... 8 2.4.4 HowAJAXWorks ...... 8 2.4.5 Disadvantages ...... 10 3 The Web 2.0 Principles ...... 11 3.1 Step by Step: Talking about the Web 2.0 Core Principles ...... 11 3.1.1 TheWebasPlatform ...... 11 3.1.2 HarnessingCollectiveInteligence ...... 12 3.1.2.1Hyperlinking ...... 13 3.1.2.2Blogging...... 13 3.1.3 Creating Data-driven Applications ...... 13 3.1.4 ThePerpetualBeta ...... 14 3.1.5 Cooperate,Don’tControl ...... 14 3.1.6 SomeRightsReserved ...... 15 3.2 The Web 2.0 – The Most General Principle ...... 15 3.3 The Web 2.0 and SOA ...... 15 3.3.1 BrieﬂyaboutSOA ...... 15 3.3.2 Comparison...... 16 4 Advanced Techniques for the Web 2.0 Development ...... 17 4.1 Widget ...... 18 4.1.1 HowWidgetsWorks ...... 18 4.1.2 DesigningWidgets ...... 18

vi 4.1.3 PlatformsforBuildingWidgets ...... 19 4.1.3.1Widgetbox ...... 20 4.1.3.2Googlegadgets...... 20 4.1.3.3Comparison...... 21 4.2 Mashup ...... 21 4.2.1 MashingProblems ...... 22 4.2.2 LayeredModelofaWebService ...... 23 4.3 Microformats ...... 24 4.3.1 POSH...... 24 4.3.2 MicroformatPrinciples...... 25 4.3.3 MicroformatExample ...... 25 4.4 Web Content Syndication ...... 26 4.5 Tagging ...... 26 4.5.1 TagCloud ...... 27 4.6 Infrastructural Web 2.0 Services ...... 27 4.6.1 GoogleMaps ...... 28 4.6.2 GoogleAnalytics ...... 28 4.6.3 MediaWiki...... 29 4.6.4 OpenID ...... 29 4.6.5 AmazonWebServices ...... 30 5 The Web 2.0 in Practice ...... 31 5.1 Content Sharing ...... 31 5.2 Web Application Building Tools ...... 32 5.3 Social Sites ...... 32 5.4 Social Bookmarking ...... 33 5.5 Content Creating ...... 33 5.6 Overview ...... 34 6 General Rules for Web 2.0 Services Development ...... 35 6.1 General Recommendation ...... 36 7 Conclusion ...... 39 ListofFigures ...... 40 Bibliography...... 42

vii Chapter 1 Introduction

Like many things, the Internet has been evolving since it arose. The times when it was a thing only for exchanging academic information are irrevocably gone. Nowadays, the Internet is different and provides a wide variety of services for its users. It has become a lucrative field for all kinds of business. It offers many people entertainment at arm’s length and is a free place for presenting opinions. Along with evolving services, which the Internet provides, the application framework for supporting these services and its development is also changing both on the client-side and the server-side. The rapid spread of broadband internet connections has enabled many people to use the Web in another way: as an instrument for their everyday life. And there is just one important thing which has lately emerged and turned the Internet into the new dimension: social networks. So- cial networks join people who are interested in similar or the same things and offer them services to fill their needs – for each other’s communication, presenting their opinions and so on. So that the users themselves have become contributors and formers of the web site they want to contribute to. A good example of such a service, still favourite at this time, is the personal blog. These events have slowly led to transformation of the Web from the relatively simple system of hypertext links to the new Web, today titled Web 2.0. In his famous Web 2.0 article, Tim O’Reilly said Web 2.0 is “the network as platform, spanning all connected de- vices” or “software as a continually-updated service that gets better the more people use it, ...” And a way of “creating network effects through an architecture of participation” is one of the key principles of Web 2.0 ([16], 2005). The Internet has turned into a serious platform for developing applications based upon entirely new concepts distinct from ordinary desktop applications. The Web 2.0 brings many new capabilities and web application design concepts. A user is not only a pedestrian in the Internet’s field any more, he is becoming a contributor by his own intention. Foremost, The Web 2.0 revolution is powered by users themselves. There are many web services called Web 2.0 at this time. Along with the growing use of such services it is quite useful to describe their offers and facilities and show their possibilities for further usage.

1 1. INTRODUCTION

1.1 Thesis Structure

This thesis is divided into four main chapters, not including the introduction and conclusion. Only general knowledge of web-related technologies is expected. However, the reader should also be familiar with HTTP, HTML, XML, CSS, JavaScript and AJAX for successful understanding of this thesis. Before having a closer look at this thesis structure, we need to show the basic structure of the Web 2.0 in general. There is a concise description of the Web 2.0 structure in the picture below. Relations to appropriate chapters are marked so that we can better understand the thesis structure. The chapter titled The Way towards the Web 2.0 brieﬂy describes

Figure 1.1: Basic Web 2.0 structure

the technologies and events which led to the current situation in the ﬁeld of the Internet, such as AJAX or Dynamic HTML. Likewise, it presents actual principles which creates a face of the Web 2.0 services. In the next chapter, The Web 2.0 Principles, main features of a web 2.0-based sevice are introduced. This chapter covers each of the possible ways of creating a content of the Web 2.0 services as well. The keystone is to encourage users in creating content. The following chapter titled Advanced Techniques for the Web 2.0 Development presents several useful kinds of techniques for building Web 2.0 services in general and shows how to realize the principles introduced in chapter 2. These techniques are also very worthwhile if there is a need to spread content of a web site over a wide range of other web sites. The goal of the chapter called The Web 2.0 in Practice is to compare the Web 2.0 services

2 1. INTRODUCTION offered by two present large companies – Google1 and Yahoo!2. In the chapter General Rules for Web 2.0 Services Development, the several useful points for successful building Web 2.0 service are proposed.

1. http://www.google.com 2. http://www.yahoo.com

3 Chapter 2 The Way towards The Web 2.0

To understand some circumstances around the evolution of the Web 2.0 phenomenon, the following several sub-chapters concisely summarize some software techniques which have innovated web services. These techniques branched out capabilities of the Internet and helped to start the Web 2.0 revolution. This chapter also brieﬂy enlightens us about technologies which currently form a face of the Web 2.0. Furthemore, they aid us to make the content of any web service as well. However, we will quietly omit one essential fact – the user and methods of how to involve them in creating a useful content of any web service. However, remember that the use of the following technologies does not automatically make any web service the Web 2.0 service. As we will see in the chapter 3, the Web 2.0 is more than a collection of various web technologies used together.

2.1 The Beginning

HyperText Markup Language1 – HTML – is the ﬁrst basic structure used to build the Internet and its content. It provides a straightforward functionality based on the simple principle of hypertext links which enables us to bind and to navigate between particular information sources. The essential feature of HTML is the passivity: users are only readers and a creator of the content is a remote authority burdened with complicated administration and updating content. Because of this, there are natural tendencies to reach certain parts of interactivity on the Internet. HTML has gone through several revisions since it set in. The version 4.01 was re- placed by XHTML nowadays in version 1.1. Togetherwith CSS2 (Cascading Style Sheets), XHTML creates the footstone of any web page layout (both content and visual components). But there are many useful technologies for the web devolopment which have appeared during the Internet’s life. They add a dynamic behaviour to web pages both on the server and the client side.

1. For more information about HTML, see http://www.w3.org/html/ 2. To ﬁnd out more about CSS, see http://www.w3.org/Style/CSS/

4 2. THE WAY TOWARDS THE WEB 2.0

2.2 The Server Side Scripting

The ﬁrst technology which enabled us to respond to users’ requests dynamically was the Commonn Gateway Interface (CGI) in 1995. A web server processed a user’s requests by executing the service script and the result was sent to the user via HTML. It was possible to generate a unique web page depending upon the user’s request. The connection to a database provided a way to separate data itself from the way of its presentation. The service script could be written in any programming language, such as C, C++, Fortran or Perl. The only disadvantage of CGI was the execution speed – the one user’s request requires to execute just one process on the server. Despite this drawback, the Commont Gateway Interface brought an essential improvement and created the support for the efﬁcient management of large data systems presentation. CGI made it possible to originate miscellaneous on-line discussion forums and groups.And as we will see below, the opportunity for a user to participate in creating web service content is the motivating power of the Web 2.0 revolution. However, there are many server side technologies which have appeared since CGI, such as Microsoft’s engine Active Server Pages (ASP), Java Server Pages (JSP) or PHP. All of these work in the same way more or less. There is no need to discuss them more for our purposes.

2.3 The Client Side Scripting

The technologies for the client side scripting have been continuously evolving all the time of the Internet’s life together with improving the server side ones. The effort to achieve a more piece of interactivity and a faster response while the user is operating a web page led to the creation of the relevant technologies. These techniques enable us to change a face of a web page without reloading the whole page.

2.3.1 JavaScript

JavaScript was the first browser-based scripting language for client-side web development. It is a dialect of ECMAScript standard, weakly-typed, object oriented and inter- preted language having syntax similar to C/C++. It is not important to discuss the details of Javascript for our purposes. It is enough to have an idea about the possibilities to use it for the inovation of web services. To find out more about JavaScript, see e.g. [3]. At first, JavaScript was mainly used to

• check data that a user had put into a webform • open pop-up windows • create dynamic menus

5 2. THE WAY TOWARDS THE WEB 2.0

It can be seen JavaScript itself is not as powerful as we may have expected. However, the cooperation of JavaScript and Document Object Model (DOM) ﬁnally brought the real break-trough in client-side scripting.

2.3.2 Dynamic HTML Dynamic HTML is a collection of technologies for creating animated and user-interactive web pages. The main feature is its ability to response to user’s events by changing the face of a web page directly without reloading all the page. In order to attain this, Dynamic HTML incorporates:

• the static part of a document (represented by HTML) • the presentation part of a document (almost always represented by CSS) • the structure of a document – Document Object Model (DOM) and JavaScript binds them all together. DOM is the programmable document structure. Each HTML element is considered as a node within the tree strucuture of a web page. DOM offers a functionality which provides a means to access, change and create or even delete these nodes. In this way it is possible to work with the DOM structure of any web page and modify it so that its face can be dynamically changed. The whole page then looks more lively and attracts more people to use it. More about DOM can be found in [7]. Dynamic HTML was ﬁrst introduced in the Microsoft Internet Explorer 4 web browser. Because of this, DHTML became a sacriﬁce of the browser war in the end. There are serveral facts which swept the classical DHTML away below:

• script dependence (merely JavaScript could be used) • mixing presentation and functionality • mixing HTML and JavaScript • DHTML scripts do not play well with other scripts

Different implementations by different browsers caused Dynamic HTML to be re- placed by more progressive methods.

2.3.3 DOM Scripting

DOM Scripting has its roots in Dynamic HTML. In the same way as DHTML, it enables developers to access nodes of DOM structure of any valid HTML, XHTML or XML document. DOM Scripting is not limited by the browser’s implementation (in contrast to DHTML) and is not bound to a particular scripting or programming language. In this it exceed DHTML and offers the equivalent functionality. In order to achieve this, DOM

6 2. THE WAY TOWARDS THE WEB 2.0

Scripting works with the standardized DOM model (the W3C recommendation, see [7] for more). It is important to note that DOM Scripting and the programmable access to the structure of a web page in general is the integral part of current Web 2.0 services when we refer to their face and layout.

2.4 AJAX

The next kind of a technology (it is not a technology in the common sense) which greatly increased the facilities of web pages is AJAX – Asynchronous JavaScript and XML. AJAX stands between server-side and client-side scripting – AJAX script is executed on the client side, but it can communicate with a server-side script by means of the HTTP protocol and allow users to exchange data with the server. Thereby, it makes possible a quite new thing – to update part of a web page dynamically as a reaction to users’ events without reloading the whole web page. This essential improvement is the key to the Web 2.0 revolution. That’s why we will describe AJAX in detail.

2.4.1 History

The term AJAX was the ﬁrst used by Jesse James Garrett in February 2005 (see [13]) as the abbreviation for Asynchronous JavaScript and XML. AJAX itself as a new way of web development was the ﬁrst used by Google (in Google Maps and Google Suggest) in 2005. When AJAX was issued, facilities of web services approached common desktop applications.

2.4.2 Basic Principles

For a better idea, we will show what AJAX incorporates:

• presentation by XHTML and CSS • exchanging data by using XML • interaction with the DOM structure • usage of XMLHttpRequest object • any clone of ECMAScript like JavaScript binding them all together

As mentioned above, AJAX itself is not a technology. It binds existing technologies together in a new powerful way and brings many new capabilities for web development. It looks like DHTML or DOM Scripting, but there is something new – XMLHttpRequest object. Let’s have a closer look at what it is.

7 2. THE WAY TOWARDS THE WEB 2.0

2.4.3 XMLHttpRequest Object

This object is the core of AJAX. It behaves as an inter-layer between client and server side and transforms JavaScript calls into HTTP requests (or responses). It enables a client- side script (e.g. JavaScript) to communicate with a server-side script (e.g. PHP). When getting a request, a server is able to send data back to a client in various formats, such as XML, (X)HTML or plain text. To attain this, XMLHttpRequest involves a support for processing HTTP requests of all possible methods like POST or GET. The speciﬁcation of XMLHttpRequest object is controlled by the W3C recommendation and it is perfecly covered in [4].

2.4.4 How AJAX Works

We will show how AJAX works in the following piece of JavaScript code. We will omit differences in implementation of the XMLHttpRequest object by various web browsers and checking AJAX availability. This is our example below: function foo() { var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState == 4) { // the request is complete // by calling xmlHttp.responseText you can // process content you have recieved from server } } xmlHttp.open("GET", "some.file", true); xmlHttp.send(null); } // do other things

The function foo() can be called as a reaction to a user’s event. We will brieﬂy explain how this function works in the following steps:

1. The variable xmlHttp refers to an instance of XMLHttpRequest object by which we can process HTTP requests and communicate with a server-side script.

2. Theproperty xmlHttp.onreadystatechange speciﬁes the function which will be accomplished when we have received the response from the server we called. In this function we can handle the recieved data and do what we need, e.g. to update a node of the DOM structure.

3. Theproperty xmlHttp.readyState indicates a state that the current request is in.

4. Themethod xmlHttp.open()returns the data received from the server. We could also receive thedata in XML format. In thiscase we have to usethe JavaScript func-

8 2. THE WAY TOWARDS THE WEB 2.0

tions to parse the XML document represented by the xmlhttp.responseXML property.

5. The xmlHttp.open() performs the request. The parameters have the following meaning:

• The first argument is the HTTP request method, such as GET or POST. • The next parameter specifies the name of the server-side script we call. It is not possible to use 3rd party domain names. • The last argument is true if we require asynchronous processing, i. e. the JavaScript function we defined above is working although we have not received any response from the server.

6. The xmlHttp.send() method sends the server any data if the HTTP request we used is POST.

Apparently, AJAX is the powerful tool increasing interoperability with a user’s activity. However, keep in mind the use of AJAX does not make any web site the Web 2.0 site. To ﬁnd out more about AJAX and some more examples of how it works, please see [13] or [2]

Figure 2.1: How AJAX works

9 2. THE WAY TOWARDS THE WEB 2.0

2.4.5 Disadvantages Having many advantages and technical innovations, AJAX has several drawbacks as well. We will mention just one main disadvatage because it is important for our purposes (others you might ﬁnd in [2]). The search engines cannot effectively index web pages that use AJAX (and as we will see in the following chapter, this might be a possible problem). This entails some web pages may be inaccesible and web servers have to issue the sitemap – the ﬁle in XML format informing the search engine about URLs on that server being available for crawling.

Note: The Web 1.0 Term

The Web 1.0 term retroactively originated as the title for a period before 2004. It involves a use of plain HTML, frames, animated GIF buttons and various HTML extensions (such as the marquee tag) in the so-called ﬁrst browser war.

10 Chapter 3 The Web 2.0 Principles

In this chapter we will explain the meaning of the Web 2.0 term. We will summarize several features and principles by which we can make any web service be more like the Web 2.0 service. Althought this chapter covers most of the typical Web 2.0 principles, the web service need not have each of these to be considered as the Web 2.0 service. We deal with the issue of how to build a structure of the web service. Furthermore, we show how to interest users in creating content of the web service because data is an inseparable part of the Web 2.0 application functionality. Omitting little technical details, we only track the philosophy of the Web 2.0 services and their connection with the user- generated content. At this time the Web 2.0 term is well-known by many people in spite of the fact that it is very loosely deﬁned and has not got any exact boundaries. Rather it has a compact core and the more a Web 2.0 service holds these principles, the better it is. In other words, the core of the Web 2.0 involves a set of design patterns used for the effective building of the Web 2.0 service structure. That is what we try to discuss in the next parts of this chapter.

3.1 Step by Step: Talking about the Web 2.0 Core Principles

The following parts of this section explains the core properties of the Web 2.0 in general. These properties was formulated a posteriori and we should understand them as the outcome of innovations in the ﬁeld of the Internet which led to a success. In other words, these principles are the consequences of better understanding the capabilities of the In- ternet and their massive re-usage is simply called the Web 2.0. A good example is the transformation of common personal web pages into dynamical personal blogs. Another one is using SEO (Service Engine Optimalization) instead of the domain name specula- tion. The following principles are perfectly covered and broadly discussed in [17].

3.1.1 The Web as Platform Previously (in the Web 1.0 era), the web as platform was limited by the facilities of browsers and server-side technologies. The browser war (Netscape versus Microsoft In-

11 3. THE WEB 2.0 PRINCIPLES ternet Explorer) was waged so the leading companies (like Microsoft) could deﬁne trends for better web development. The web browser was only a market for services offered by various companies. It was the key element in the Web 1.0 era. The essential fact is that regular software updates both browser and server-side application frameworks were the only innovations moving web services on. By contrast, Google started its life as a native web application. It is not updated regularly, but it is the continuously expanding service. A user is not bound by the platform they work on so that they can use it anywhere. The user is not required to keep any li- cence agreement. The only thing they can do is to use Google and its service as much as he want. And there is another important fact – Google is not just the web application, it is a database as well. Data itself without a corresponding application is unmanageable, the application without the data is useless. This fact is the essential distinction between the Web 1.0 and the Web 2.0. Services must only be performed and without data are of little use. The data is one of the key parts of any Web 2.0 service. It can also be seen how it is important to involve the users in creating content. The value of the web application is proportional to the size of data it keeps. This is the master feature of the Web 2.0 as platform – its power lies within the inner web structure, not only on the client or server side. Its power dwells on the way by which web software is built and administered. Software is not a product any more, it is a service. Google is the great example of this approach.

The Web 2.0 principle #1: Treat with the web as platform, build your web applications so that they can be considered as another platform. This should be the base of every web application development process.

3.1.2 Harnessing Collective Inteligence Harnessing collective inteligence is a way of generating unique masses of data. A typical example of such a service using this principle is the online encyclopedia Wikipedia 1. It beneﬁts from the user’s activity and the result is the large information database being broadly available. Another good illustration is Panoramio2 – the service for photo management connected with Google Maps. When a user adds a photo, anyone in the world can see it by using Google Maps. The basic scheme of Web 2.0 services to encourage users to create content is sketched out in the following two points: • It is useful to offer a user a beneﬁt in return for performing a web service. • The user generates unique data by which they increase the competitive advantage and the functionality of this service.

1. http://www.wikipedia.org 2. http://www.panoramio.com

12 3. THE WEB 2.0 PRINCIPLES

Therefore, the user is the essential element in the Web 2.0 game. So we could say that the service automatically gets better the more people use it (see [17]). The web is becoming a kind of the global brain. Let’s show yet another examples of harnessing collective inteligence in practice.

3.1.2.1 Hyperlinking

Hyperlinks still are (and it seems they will also be) the basic structure of the whole web. When we allow the user to make a hyperlink (on their personal blog or anything else) whenever they are participating in creating content (e. g. when they are making a reply to a post in someone’s blog), we strengthen the growth of the web at the lowest level. The web thus branches organically in reaction to users’ activity.

3.1.2.2 Blogging

The blogging phenomenon exempliﬁes the consequences of the approach when users add a value. Bloggers makes the huge amount of data both by posting their opinions and by reacting to other bloggers’ posts. They are always shaping the results of search engines by increasing the number of hypertext links used by search engines to determine the usefulness of the given page. Because the blogosphere is highly self-referenced, the bloggers amplify their visibility to each other by their activity.

The Web 2.0 principle #2: Allow the users visiting your site to leave feedback at least. The more chances you give the more you can obtain.

3.1.3 Creating Data-driven Applications

This principle results from the one above – data is the inseparable part of the functionality of Web 2.0 services. But it is well-known a small percentage of users participate in creating data. The term data-driven application says we should construct web services so that in the best case, the users produce lots of data as a secondary effect of using the web service. The created data must be unique, hard to recreate, which is the main competitive advantage. In the context of this mechanism we are also talking about the architecture of participation. The key is to let a user participate as much as possible. Therefore, the Web 2.0 as platform gives us a quite new concept of application development. Sometimes we call this way of application development “the infoware”.

The Web 2.0 principle #3: Treat the data as the user event and let it drive growth of your web application.

13 3. THE WEB 2.0 PRINCIPLES

3.1.4 The Perpetual Beta

This term results from the desktop software development process. It is well-known a software product is called beta when it needs to be tested before it is ofﬁcially released. A Web 2.0 service should use this procedure more continually. As we have seen above, the Web 2.0 service is not a product any more, but a service. A service which should be updated constantly at short intervals. The service should hold the motto “often and in small pieces” and be updated as an echo to users’ needs. Therefore, the user is considered as a real-time tester, he is shaping the service just by using it. We can understand this behaviour more widely in the sense of open source software principles – the user can be treated as a co-developer of our web service. Therefore, any Web 2.0 service is bound to the user’s activity. In the picture below we can see the basic components of the Web 2.0 service.

Figure 3.1: Basic Structure of Web 2.0 Service

The Web 2.0 principle #4: Update your web application regularly in small pieces. The label “perpetual beta” refers to the continual development of the web service.

3.1.5 Cooperate, Don’t Control

As we have seen above, data is the inseparable part of any web service. In order to increase the value of this data, it is necessary to design the web service so that they can enable the re-use of the data by 3rd party web services in a simple and lightweight way. To attain this, the web service should issue a public API or a kind of interface by which the 3rd party web services are able to access its data resources. These possibilities will be discussed in chapter 4. A typical example and the ﬁrst pioneer is Google Maps. Its application structure allows users to create the so-called mashups – a kind of the Web 2.0 service built by mixing data resources from other Web 2.0 services so that the outcome service brings something new. Apparently, this perfectly accords with Aristotle’s statement“the whole is more than

14 3. THE WEB 2.0 PRINCIPLES the sum of its parts”. The Web 2.0 is not just about “harnessing collectiove inteligence” but also about “harnessing other services”. A Web 2.0 sevice itself ought to be the platform for developing other web applications and loosely-couple systems.

The Web 2.0 principle #5: Build your web application in a way that anyone can use your data resources in new unintended ways. Do not control, but cooperate.

3.1.6 Some Rights Reserved

This term shows the main issue of the previous mechanism: intelectual possession of data resources. If the limits for re-using the data resources are high, there is the real barrier to the possible adoption by 3rd party services. The solution is plain enough: to reduce this limitation as much as possible. Notice the term “some rights reserved” is the restriction of the well-known phrase “all rights reserved”.

The Web 2.0 principle #6: Make restrictions for re-using your web service as low as possible.

3.2 The Web 2.0 – The Most General Principle

As we can see above, the Web 2.0 and the “web 2.0-ness” property of a web service is not only about improving software tools for web programming though it is also important. The key principle is to understandthe whole potential of the web as platform. We are only limited by our ability to make the best of available resources, to grasp the web platform more fully.

3.3 TheWeb2.0andSOA

The Web 2.0 principles are very close to the model of business applicacations development called SOA – Service Oriented Architecture. At this time these architectures con- verge and that’s why we brieﬂy deal with the comparison between these ones. As we already know, the Web 2.0 principles were formulated as the best worked techniques on the Internet, but SOA is a properly deﬁned standard of developing applications. Both architectures says an application is a part of the system which is bigger than the application itself. The divergence is in understanding the core of either architecture.

3.3.1 Brieﬂy about SOA

The centre of the Web 2.0 architecture is data, but SOA put a service into the centre. SOA deﬁnes the properties of the business application development process in the following

15 3. THE WEB 2.0 PRINCIPLES way:

• an application must be decomposed into small and functional pieces called services • other (business) applications are created by loosely coupling those services

The SOA services cooperate by sending information, which is similar to the object- oriented programming paradigm. SOA is not bound by any explicit programming language. It is not important to describe it in detail for our purposes. To ﬁnd out more about SOA, see the SOA reference in [1].

3.3.2 Comparison In this table below we can see some similarities between the Web 2.0 and Service Oriented Architecture (this table is taken from [14]).

Web 2.0 SOA Software as a service Software as a service Interoperability based on web standars Interoperability based on web standars Applications are platforms Applications are platforms Encourages unintended uses Permits unintended uses Mashups Composite applications Rich user interfaces Little user interface guidance Architecture of participation Little prescription of user participation.

Table 3.1: Differences between Web 2.0 and SOA

So, the Web 2.0 can be considered as a global instance of SOA. In contrast to SOA, the Web 2.0 is free managed and emphasizes the social aspect of its services. It also involves the layer to interact with users, but SOA looks like faceless architecture. We have mentioned SOA because of its similarity to the Web 2.0 and more information can be found in [1].

16 Chapter 4 Advanced Techniques for the Web 2.0 Development

In this chapter, we will meet some ways of implementing the Web 2.0 principles described in the previous chapter. We will show some techniques by which it is possible to make the web a dynamic platform enabling 3rd party services to re-use one’s data resources in new unintended ways. Thus, we will focus on technical issues around the content part of a Web 2.0 service. The picture below recapitulates the Web 2.0 structure in the context of topics we deal with in the following parts of the text.

Figure 4.1: Web 2.0 Story

When being considered as platform, the web brings many services containing useful data. These services may be considered as other platforms used for creating the new ones, e.g. mashup. Mashup consists of various data sources connected by means of miscellaneous techniques. It might be another gate which can be re-used by the rest of the world. We are only limited by our inventions to get something new.

17 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT

4.1 Widget

Widgets are a very simple and widely used mechanism to distribute content and ele- mentary functionality among web pages. The widget is a portable piece of a web page designed to be simply re-used. It is very efﬁcient from the point of view of the user’s adoption – the integration of the widget into one’s web page is of two basic steps only: modifying the web page layout and updating the source code of the web page, in the best way by using cut and paste only. The widgets allow web services to effectively offer the rest of the Internet’s world (and mainly common users) their content and functionality and thus leverage networks effects. Historically, there were already many widgets in the Web 1.0 era. Advertising banners or very popular web counters are very good examples. An idea when a web page uses a snippet of HTML code from another foreign web page to provide added functionality is well-known longer. Internally, the widget is an embedded piece of HTML (or XHTML) code cooperating with a remote web service script providing its functionality and information about its look and feel. The essential feature of the widgets (in contrast to public APIs which are much more richer) is their simplicity – both in the range of functionality and in the way of consumption. There are several kinds of the widgets according to technology by which they are built: • JavaScript/HTML widget, sometimes called gadget (mainly by large web services like Google or Microsoft). Google gadgets are a typical example. • Flash widgets. They are used with HTML tag to incorporate into a web page. YouTube ﬂash widget allowing to share any video content in any other web page is a great example.

4.1.1 How Widgets Works

We can see a simple interaction between a web page and a server offering a piece of its data as a widget in picture 4.2 below. A web page source code contains an embedded link to the remote web service operating a widget. When the request to display the web page (contaning the widget) has been sent, the remote script processing the widget is called. Then the client receives the data necessary for successful rendering and working the widget. One can see the widgets may overload the server processing the widget if it is popular.

4.1.2 Designing Widgets When you are creating a widget, it is recommended you hold a few principles discussed below. Do not forget the widget is the simplest way of spreading content of a web service over a wide range of other web sites (see [15]).

18 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT

Figure 4.2: How Widgets Works

• Security – Prevent your widget from a use which might affect its common nor- mal or make possible accessing someone’s private data (if any exists). Remember, widgets are public.

• Reliability – the popularity of a widget can grow exponentially fast the more people use it. Because the widget is called from a remote web server but not from the web service that uses it, it may overload the parent web server. Be aware of this.

• Intellectual property issues – State clearly the terms of use of your data. Protect your data properly so that no-one can take it out from the widget or you might loose control of this data.

• Easeof consumption– Make usage of yourwidget as easy as possible. The simplest way is to apply mere cut and paste.

• Leveraging network effects – Let users expand your widget on the other web pages. Encourage them in this.

• Motivate users – Motivate users so that they want to use your widget. Offer them a useful functionality or content, enable them to share their private data.

• Make various looks and feels – Enable usersto modify look and feel of your widget so that it can correspond with the face of their blogs or web pages.

4.1.3 Platforms for Building Widgets

Although there are lots of possibilities to build your own widget, there are also platforms and web services dealing with building and managing widgets. They provide us with an interface suited for building and sharing widgets. We will present two of these platforms to illustrate the term web as platform.

19 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT

4.1.3.1 Widgetbox Widgetbox1 is a complex web application for building, sharing and managing widgets. It contains visual tools for creating various kinds of widgets with the possibility to edit the source code. Widgetbox widgets can be integrated with foreign web services such as MySpace2 or Facebook3. One can create various kinds of widgets: • JavaScript and HTML widget • Flash widget. All you have to do is to enter the flash file (source file) URL from which Widgetbox builds up the flash-widget. • Web page widget. It contains widget-sized web page hosted on your server. In order to build it, it is enough to enter the source web page URL. • Blog widget (the so-called blidget). It is build by entering your blog’s RSS or Atom feed source file. It displays actual content of your blog in compact form. • Import Google gadget. Only XML source file of your gadget is needed to make up the Widgetbox widget. After building, the widget is put into the public widget gallery. It is possible to watch the statistics of its use and manage it in other ways. The widget is also assigned a unique URL address within the Widgetbox.com domain by which anyone can access the widget (and then find out how to use it, i. e. how to get HTML code calling the widget script). For more information about Widgetbox, see [9].

4.1.3.2 Google gadgets Google gadgets are widgets built by means of HTML and JavaScript. They can be embedded in any web page within tag. They widely use Google API which involves a quite large set of JavaScript libraries with many useful and sophisticated functions. Gadget itself is an XML file containing data (or URL identificators to source files with this data) necessary for its successful working and rendering. <a href="/tags/Google_Offers/" rel="tag">Google offers</a> two ways to build your own widget: by creating and editing a source XML file in format defined by Google gadgets API, or by using Google Gadget Editor (GGE). GGE allows us to edit the gadget code and to show its preview. Google gadget can be used in any web page, but its primary use is in the iGoogle4 portal. An integesting part of Google gadget API is the so-called Google OpenSocial API by which there is the possibility of accessing data of social networks like MySpace or LinkedIn5 and thus you can create gadgets which are mini social applications.</p><p>1. http://www.widgetbox.com 2. http://www.myspace.com 3. http://www.facebook.com 4. http://www.igoogle.com 5. http://www.linkedin.com</p><p>20 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>As you might see, Google gadgets API is fairly large and supplies a wide scope of possibilities for developers. Its more detailed description is beyond of the scope of this thesis. In order to find out more about this topic, see [5].</p><p>4.1.3.3 Comparison</p><p>In the table below we compare the two discussed platforms for building widgets.</p><p>Widgetbox Google gadgets Several kinds of widgets (and Google JavaScript and HTML widgets gadgets import is possible) A quite poor underlying API A quite rich JavaScript API An easy integration with existing web ser- An integration with iGoogle portal, vices like <a href="/tags/Facebook/" rel="tag">Facebook</a> or MySpace OpenSocial mini applications Visual tools for editing widgets code and Google Gadget Editor WYSIWYG modifying look and feel It is possible to use the widgets in any It is possible to use the widgets in any web page web page</p><p>Table 4.1: Differences between Widgetbox widgets and Google gadgets</p><p>4.2 Mashup</p><p>Nowadays, the term mashup describes a web service built by incorporating several present web services together which provides a new added value. Mashup is thus a specific kind of web service or application based upon mixing the functionality of other web services into new uninteded (and perhaps more useful) web services. A web service designed to be mashed-up should always declare a public API (Ap- plication Programming Interface) by which 3rd party web services can access its data or functionality. Access to this data or functionality could be limited by terms of use, which might influence spreading the web service among the “mashing layer” of the <a href="/tags/World_Wide_Web/" rel="tag">World Wide Web</a>. There are some kinds of web services designed to be mashed-up (more detailed information about this classification can be found in [11]):</p><p>• Content creatin – e.g. Google Docs6 web service</p><p>6. http://documents.google.com</p><p>21 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>• Content sharing – e.g. Panoramio7 for sharing photos with connection to <a href="/tags/Google_Earth/" rel="tag">Google Earth</a> application • Content storing – a very successful web service is Amazon S38 • Content Contextualization, Presentation and Management – e.g. Google Maps9 • Coordination and communication – e.g. Google Mail10 • Comunity – for example the <a href="/tags/Social_network/" rel="tag">social network</a> Facebook</p><p>4.2.1 Mashing Problems In this subsection we briefly summarize issues when designing Web 2.0 services to be re-used by 3rd party web services. As mentioned above, in order to be mashed-up, the web service should declare a public API. And when somebody wants to access its resources through the use of the public API, they need to know how to do this. Thus, it is very important to make public at least a concise documentation of this public API. If not, there is a real barrier to using this API. The next issue we have to deal with is a selection of a technology for building the public API. A support of open technologies (for a programmable access or formats of data representation) may be preferred by lots of web developers but the support of commercial technologies has also its own purpose. Another thing that should be decided is the side in which the API will be processed – on the client or the server side (it depends on the technology in which the API is built). Another question during designing the Web 2.0 service is its messaging model (a way of exchanging <a href="/tags/Messages_(Google)/" rel="tag">messages</a> over the Internet, more often over HTTP protocol). At this time, there are the following most used messaging models:</p><p>• RPC (Remote Procedure Call)</p><p>◦ SOAP (Simple Object Access Protocol) ◦ XML-RPC (Remote Procedure Call using XML to encode its calls) • REST (Representational State Transfer)</p><p>Nowadays, many web services use REST as messaging model because of its simplicity. REST was the first introduced in Roy Fielding’s dissertation thesis (one of the authors of HTTP protocol). REST is a general concept of software architecture for hypermedia systems like the World Wide Web. It outlines how to effectively address the so-called resources (in most cases data) which are the central point of the REST-based systems.</p><p>7. http://www.panoramio.com 8. http://aws.amazon.com/s3 9. http://maps.google.com 10. http://www.gmail.com</p><p>22 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>REST enables users to exchange data in miscellaneous formats, such as XML, JSON11 (JavaScript Object Notation), YAML12 (Yet Another <a href="/tags/Markup_language/" rel="tag">Markup Language</a>) or simply in plain text. A more detailed description of REST and the other messaging models is beyond the scope of this thesis and can be found in [12]. Another issue is to clarify the terms of use of the web service. It should always be clear who possess the data and how the conditions of re-use of the data by 3rd party services are. If the web service stores private data, it shouls always ensure that nobody can access this data without the permission of its owner. The unambiguous policy of data property simplifies its re-usage. It can be seen that the most important thing when you are designing a Web 2.0 service is the flexibility, simplicity and capability to adapt and always bring something new. To find out more about this topic, please see [11]or[18]. A lot of information about mashups, public APIs can also be found in some web services dealing with these issues, one of which is ProgrammableWeb13.</p><p>4.2.2 Layered Model of a Web Service</p><p>Figure 4.3: Layered Model of Web 2.0 Service</p><p>You can see the structure of a Web 2.0 service in the picture above. Each layer describes a sphere which we deal with when designing the Web 2.0 service to be mashed- up. The mashing points (the layer in which the connection with a foreign Web 2.0 service is implemented through the use of its public API) lie either at the top of this structure (the presentation layer) when we use the client-side mashing or at the functionality layer when we use the server-side mashing.</p><p>11. http://www.json.org 12. http://www.yaml.org 13. http://www.programmableweb.com</p><p>23 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>4.3 Microformats</p><p>A <a href="/tags/Microformat/" rel="tag">microformat</a> is a data formatting approach using only HTML, its classes and atributes. The Microformats14 portal says that the microformats are “pieces of HTML code rep- resenting things like people, event, tags etc. in web pages”. Therefore, the use of the microformats enables us to describethe <a href="/tags/Semantics/" rel="tag">semantics</a> of the data, to facilitate searching the data and re-using it. The microformats can be created in the very simple way – only by embedding semantics infromation by means of HTML and this is their main advantage. The microformats are not a new language or <a href="/tags/Meta_(academic_company)/" rel="tag">meta</a>-language, they are only a method to represent the data semantics via existing techniques. They are not a solution to all problems relating to the web ontology or the web content taxonomy. The microformats are just a means to structure the web content better.</p><p>4.3.1 POSH Within the context of the microformats, we mention the so-called POSH (Plain Old Se- mantic HTML). POSH is the subset of HTML 4.01 (or XHTML 1.0) elements and atributes being semantic rather than presentation. With POSH we can create poshformats and microformats. The difference between these is the following: the poshformats are built only by the help of the semantic HTML classes and are bound to the web page (or service) they are designed for. We could label the poshformats as an ad hoc method for better web content structuring. The microformats can be considered as a subset of the poshformats – they are built by the help of POSH as well, but they are properly developed and hold the principles for developing the microformats (which are kept by the Microformats.org portal).</p><p>Figure 4.4: Venn Diagram of Microformats Hierarchy</p><p>14. http://www.microformats.org</p><p>24 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>4.3.2 Microformat Principles When designing your own microformat, you have to hold several rules and principles which distinguish it from a poshformat. The following rules say how to lead the microformat development process so that this microformat could be considered as the official one.</p><p>• If you want to develop your own microformat, be sure that you are trying to solve a problem which has not been solved yet (and thus there is not such a microformat). • Always show an appropriate example of the web content that would be needed to create a new microformat. • Be sure that there is no standard HTML tag or compound of tags that could be used to solve your problem (i.e. you do not have to use a microformat). • Remember that the microformats are designed for human first, machines second. • The data within your microformat has to be parsable and presentable. • Re-use bulding blocks from widely adopted standards: e.g. semantic XHTML, existing microformats. • Meet the use of existing design patterns for building the microformat. • Support the modularity, simple usage, existing microformats and easy embedding to XHTML code. Support the decentralized development process and let other users improve your microformat.</p><p>These points above briefly summarize the basic properties of the microformat development process. Further information about POSH, the microformats and their open standards specifications (like hCard or XOXO) can be found in [6].</p><p>4.3.3 Microformat Example A great microformat example is XFN – XHTML Friends Network. XFN is designed for simple human relationship tagging by using hyperlinks. The origin of XFN was due to the boom of personal blogs in recent years. The use of XFN is very simple – only the addition of the attribute rel to <a href> tag (referencing to some of your friends) is needed. An example of XFN use could be the following line:</p><p><a href="http://vesebt.sblog.cz" rel="friend date sweetheart"></p><p>The attribute rel indicates our relationship to the person whose blog or any other web page is hyperlinked. In order to be recognized, XFN must declare the profile attribute in this way:</p><p>25 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p><head profile="http://gmpg.org/xfn/11"></p><p>Issues how to process these “microformated data” are fully in the hands of application (e.g. web browser) treating with this data. At this time (2008), Microsoft Internet Explorer and Mozilla <a href="/tags/Firefox/" rel="tag">Firefox</a> are expected to include a basic support of the microformats. As you can see, XFN is very simple and the whole specification can be found in [10]. It shows the basic purpose of the microformats: they add a new value to existing data using XHTML modularity and can be considered as a certain kind of a <a href="/tags/Metadata/" rel="tag">metadata</a>. The microformats are not instrumental in categorizing the data but they are the tool for better data structuring.</p><p>4.4 Web Content Syndication</p><p>In general, the term Web Content Syndication refers to the way of distributing information about a website’s (like blogs, newspapers or any other web site) recently added content. The most used kinds of web content syndication are the two main formats: RSS15 (Really Simple Syndication) and Atom16 (Atom Syndication Format). Technically, a <a href="/tags/Web_feed/" rel="tag">web feed</a> is a XML file (in the format given by the RSS or Atom specification) containing headlines of a newly published content (e.g. news, multimedia files, photos etc.) and hyperlinks to this content. The web feeds are primarily designed to be machine readable rather than human readable (in contrast to the microformats). Interestingly, the web feeds work as “live links”. In the previous chapter on the Web 2.0 principles we saw that hyperlinking is the key factor shaping the entire web. The more hyperlinks referring to your web the more useful it is (according to the Google PageRank technique). Hence the web feeds are not just well-known static hyperlinks, but something more – the live hyperlinks constantly shaping the face of the Internet.</p><p>4.5 Tagging</p><p>Through the use of tagging, website’s data can be split into various categories freely created by users. Tagging capability is often implemented as a part of the web service functionality – users are allowed to label their data (such as photos, texts or any other kind). The purpose of tagging is obvious: the users themselves classify the data and therefore simplify its further processing (e.g. by other web applications via public API). The idea of tagging is thus very important in the context of the Web 2.0 principles. Any Web 2.0 service can build a structure over its data by harnessing collective inteligence which provides the next level of its usefulness. There are more terms for the method that we call tagging, such as <a href="/tags/Folksonomy/" rel="tag">folksonomy</a> (in opposition to taxonomy), social tagging etc. At this time (2008), tagging is loosely de-</p><p>15. http://www.rssboard.org/rss-specification 16. http://atomenabled.org 26 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>fined idea not holding any official standard. It is only the tool widely used by many web services these days.</p><p>4.5.1 Tag Cloud</p><p>Many web services today provide the tag cloud – the web page containing hyperlinks to user-defined categories built by social tagging. The size of each hyperlink depends on the size of the represented category. So the tag cloud is a visual tool showing actual data strucure of a web service. The image below displays the tag cloud for the Web 2.0 (it is not a common tag cloud). This picture is taken from [8].</p><p>Figure 4.5: Tag Cloud</p><p>4.6 Infrastructural Web 2.0 Services</p><p>Besides the afore mentioned advanced techniques for Web 2.0 services development, it is also useful to mention some infrastructural Web 2.0 services which are worthwhile when you are trying to design your own Web 2.0 service. These infrastructural services can be considered as tools designed to create a frame for the other Web 2.0 services (not only for mashups). There are many infrastructural Web 2.0 services at this time. We will present some of the most significant services that stand in the background of many present mashups</p><p>27 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT and Web 2.0 services or have a large potential to forward the capabilities of the Web as platform. Much information can be found in ProgrammableWeb portal or WebWare17 server.</p><p>4.6.1 Google Maps</p><p>Google Maps API enable everybody to embed a Google Maps map in their web page for free. This Web 2.0 services is well-known nowadays and many mashups are build on the support of Google Maps API (we could say most of today’s mashups). Google Maps API is relatively simple and it is written in JavaScript. When you want to use Google Maps, it is needed to have an API key (which is available after registration on Google Maps service) by which you can access Google Maps resources. On the Google Maps homepage, there are lots of Google Maps API examples and also a well-arranged API reference. Another interesting feature offered by Google Maps API is the so called mapplet. The mapplets are mini-applications that run within Google Maps. So the mapplets add new features to Google Maps. They are another opportunity for web developers to propagate their web services (and data). Internally, the mapplet is an XML file wrapping mini web page. This file can contain HTML and JavaScript code and use Google API. When taking into account Google Maps is the widespread service, by the power of the mapplets you can leverage network effects in really powerful way.</p><p>4.6.2 <a href="/tags/Google_Analytics/" rel="tag">Google Analytics</a></p><p>Google Analytics18 is a tool built to analyse of your overall web service use. It enables you to trace the usage of each part of your web service and therefore, you can improve this service to make it more effective. Google Analytics shows where users using your web service are coming from and thus you are able to enhance your web service where it is needed. Google Analytics is a very useful tool showing gaps in your Web 2.0 service. By using it, you can make the best of the Web as platform. The usage is simple – after signing up for free, you only choose what you want to track. Then you get a piece of JavaScript code that you have to insert into each tracked web page. The pages without this code are out of Google Analytics tracking. The detailed information can be found in Google Analytics homepage. This service is free and in the basic version is limited to 5 milions viewings of your web page a month. However, the AdWords users can use this service without being limited.</p><p>17. http://www.webware.com 18. http://www.google.com/analytics</p><p>28 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>4.6.3 MediaWiki</p><p>MediaWiki19 is free server-based software lincesed under GNU General Public License. It is a robust and scalable software designed to create collaborative web sites. Everyone who can access this site is allowed to modify its content by means of simplified formatting language (this means without knowledge of HTML and CSS). Such sites are often called “<a href="/tags/Wiki/" rel="tag">wikis</a>” and they are quite widespread today. They enables users to manage web sites for the so called <a href="/tags/Knowledge_management/" rel="tag">knowledge management</a> (i.e. online <a href="/tags/Database/" rel="tag">databases</a>). The typical example of the approach is online encyklopedia Wikipedia. MediaWiki framework is written in PHP and uses MySQL database. It offers sophisticated data management techniques including version management. Nowadays, Medi- aWiki is a widely-adopted part of many web sites dealing with managing collaborative content creation.</p><p>4.6.4 OpenID</p><p>The OpenID20 portal says: “OpenID is an open, decentralized, free framework for user- centric digital identity”. Today version 2.0, OpenID allows anybody to create a simple identity for free which can be used across many web sites requiring authentification. There are lots of web sites containing support for OpenID identity at this time to authenticate their services, such as Yahoo! or WordPress21 and many others. There are also web services implementing OpenID protocol and offering everybody the opportunity to create their own digital identity. Then, it is usable for you to authenticate on websites enabling OpenID support. When your web service decide to support the OpenID digital identity, there are two possibilities how to reach this. Either you could implement the OpenID specification (perhaps by the use of existing frameworks)whereby you have become another OpenID identity provider (identity server), or you could use existing OpenID identities (consumer server – this means to accept OpenID accounts created via other identity servers). The only thing you have to require the user to have is their OpenID URL. It may look like this: http://vesebt.myopenid.com/ where myopenid.com is the OpenID identity server providing data necessary for successful user identification like username (vesebt in this case) and password. Both of the described alternatives can be used for free. These days, there are a lot of OpenID frameworks written in various programming languages, such as .NET, ASP, Perl, PHP, Java, Ruby, C++ etc. Internally, OpenID uses HTTP protocol to communicate and Yadis22 protocol to exchange authentication information. You can find out more in the OpenID server homepage.</p><p>19. http://www.mediawiki.org 20. http://openid.net 21. http://www.wordpress.com 22. http://yadis.org</p><p>29 4. ADVANCED TECHNIQUES FOR THE WEB 2.0 DEVELOPMENT</p><p>4.6.5 Amazon Web Services Amazon Web Services23 is set of infrastructural Web 2.0 services designed to build robust web applications. Amazon Elastic Compute Cloud (EC2) service lets your web application run on Amazon’s proven computing environment. The service Amazon SimpleDB enables you to run queries on structured data in real time. Therefore, this service provide you with the simple functionality of relational database system without the operational complexity and administrative burden. The next service, Amazon Simple Storage Service (Amazon S3) is designed for simple and effective data storing. The other one, Amazon Simple Queue, provides a way to simple exchange data between distributed components of your web application without loosing messages or requiring each component to be always available. All of the services can work together creating a powerful base for a modern Web 2.0 applications. Its use is not free so you have to pay charge for it. Details can be found in AWS web pages.</p><p>23. http://aws.amazon.com</p><p>30 Chapter 5 The Web 2.0 in Practice</p><p>In this chapter, we will compare some practical Web 2.0 services provided by the two largest companies today – Yahoo! and Google. We will divide these service comparisons into categories according to their kind. Both companies offer lots of Web 2.0 services at this time so we will mention the most used or very useful ones. In each category, we will also try to find the equivalent Czech Web 2.0 service.</p><p>5.1 Content Sharing</p><p>A very popular service bought by Yahoo! in 2005 is Flickr1. It is a service designed for sharing photos and videos. Flickr was one of the first Web 2.0 applications. It provides all we could expect from a common Web 2.0 service – widgets and Open API and thus is designed for being mashed-up. It supports tagging and on the whole, it is based on users’ activity. There are many other web services built on the Flickr platform. Flickr API is available in lots of programming languages, primary in PHP but also in Java, .NET or even Lisp. SOAP, XML-RPC and REST request and response methods are supported. When you want to use Flickr API, you have to obtain an API key (by registration). Important note: Flickr uses UTF-8 encoding. Google offers the service Picasa2. It is designed to organize photos as well, but in fact it is an ordinary desktop application (the installation is required) with the possibility to share photos by <a href="/tags/Picasa/" rel="tag">Picasa</a> Web Albums. It is accessible for the 3rd party service via Google <a href="/tags/Picasa_Web_Albums/" rel="tag">Picasa Web Albums</a> Data API which uses the so called GData protocol. GData uses either of two standard XML-based syndication formats: Atom or RSS because either of them is suitable for providing and aggregating content. Client libraries for working with Google Data API are available in various programming languages – Java, .NET, PHP, Objective-C and Python. An API key is also needed to use Picasa API successfully.</p><p>1. http://www.flickr.com 2. http://picasa.google.com</p><p>31 5. THE WEB 2.0 IN PRACTICE</p><p>5.2 Web Application Building Tools</p><p>Yahoo! offers the Yahoo! Pipes3 service. It a the free online service designed for creating web projects without having to write any code. You can remix various data feeds or create mashup by using a visual editor (written in JavaScript). Each pipe consists of two or more modules, which are pre-defined small blocks which have a simple functionality (e.g. Fetch Feed module). After building a pipe, you can use it like any other feed – pipes offers output in RSS 2.0, Atom and JSON format. You can also use your pipe in your web page as a widget (Yahoo calls it badge). Using this service is free. A similar service that is provided by Yahoo! is Yahoo! Gallery4, which provides a sum- mary of plug-ins (for Yahoo! desktop applications), mashups and widgets built on Yahoo! technologies. An alternative Google service is Google Code5. There is no visual editor such as Ya- hoo! Pipes has, but there are lots of APIs suited for almost all Google services. You can use the Google API (by which you are able to access each Google’s web service) to build your own open web application which can be hosted on Google servers. <a href="/tags/Google_App_Engine/" rel="tag">Google App Engine</a> is designed to support web application development by using Google infrastructure. An interesting thing is <a href="/tags/Google_Web_Toolkit/" rel="tag">Google Web Toolkit</a> whereby you can build web services based on AJAX technology (and Google API) through the use of Java programming language. All the APIs are obtainable in JavaScript, PHP, Java, .NET or Python.</p><p>5.3 Social Sites</p><p>Google offers the Orkut6 service, which could be considered as a purely social site. It allows users to create their own profile page, add a few photos and a word or two about them so that they can form relationships with other users of this site. <a href="/tags/Orkut/" rel="tag">Orkut</a> is accessible for 3rd party services via Google OpenSocial API (discussed in chapter 4). In the <a href="/tags/Czech_Republic/" rel="tag">Czech Republic</a>, there are also sites of a similar kind. The best known is probably the web service named Libimseti7, which works just like Google Orkut. It can be regarded as a typical social site, which is fully based upon users’ interaction because of the adding of necessary data. And that is all. This service contains no open API and no instument to be <a href="/tags/Mashable/" rel="tag">mashable</a> or accessible by 3rd party services. Thus it cannot be regarded as a proper Web 2.0 service. It does not hold the term “web as platform”.</p><p>3. http://pipes.yahoo.com 4. http://gallery.yahoo.com 5. http://code.google.com 6. http://www.orkut.com 7. http://libimseti.cz</p><p>32 5. THE WEB 2.0 IN PRACTICE</p><p>5.4 Social Bookmarking</p><p>Yahoo! currently offers the very popular service Del.icio.us8 bought in 2005. By using del.icio.us, your bookmarks become accessible from any computer on the web. So they can be shared with any other del.icio.us user – that’s why this site is called “social bookmarking”. To add a link on a web page to your del.icio.us bookmarks, the web page has to contain the link (which is in fact a kind of del.icio.us widget) and by clicking on it, you simply bookmark the web page. Del.icio.us API is done over https and requires HTTP authentication. There are four methods to access Del.icio.us resources (to make requests) – update (Check to see when a user last posted an item), tags (Get a list of tags, rename them), posts (Get a list of posts, add, delete), bundles (Get bundles, create and delete). Responses are sent via XML or JSON data format. The del.icio.us API is still in development and it is supposed to be improved in the near future. Del.icio.us data are also available by using a HTML feed (e.g. for you blog). Google offers a quite similar service Google Bookmarks9 which is designed to make Google searching more comfortable rather than be of social use. This service directly cooperates with the <a href="/tags/Google_Search/" rel="tag">Google search</a> engine and web search history. These bookmarks can be used via gadget technology on the iGoogle portal. In Czech, there are also similar web services, one of which is Jagg10. It works the same way as Del.icio.us service. It is built on open source project Scuttle11 licensed under the General Public License. Jagg supports most mashups designed to use del.icio.us API.</p><p>5.5 Content Creating</p><p>Yahoo! portal offers Yahoo! 36012, which is a complex web service for blogging and social networking.It is similar to Myspace or google Orkut and in addition has the possibility of blogging. We could say Yahoo 360 incorporates several smaller services which are offered by Google separately. The service allows its users to access data via RSS, but there is probably no public API to re-use this service. Google offers the service called Blogger13 which is fully aimed at blogging (in contrast to Yahoo 360). It provides a lot of various looks and feels and a simple administration interface through the use of which you can manage your blog. The web service is accessible for 3rd party web services by using Google <a href="/tags/Blogger_(service)/" rel="tag">Blogger</a> Data API (or simply by RSS/Atom feeds). It is available in JavaScript, Java, .NET, PHP and Python.</p><p>8. http://del.icio.us 9. http://www.google.com/bookmarks 10. http://www.jagg.cz 11. http://sourceforge.net/projects/scuttle 12. http://360.yahoo.com 13. http://www.blogger.com</p><p>33 5. THE WEB 2.0 IN PRACTICE</p><p>There is also one czech-made Web 2.0 service which is known and quite popular mainly in the USA – WebNode14 publication system. This service allows anybody to make their own web page or personal blog. We could say Webnode is quite universal and sophisticated – it can be regarded as a sort of WYSIWYG editor within the browser’s frame. It offers lots of capabilities such as gadgets and widgets integration (from various sources like Google, YouTube, Flickr etc.), automatic SEO and a number of looks and feels (and you can make your own one). A Webnode-generated page can contain things like polls, dynamic lists, articles, photo galleries or discussion forums. Furthemore, you can use full-text searching, webmail, web site statistics or RSS feed and further things. On the whole, Webnode web page administration consists of the only thing – using drag and drop.</p><p>5.6 Overview</p><p>You can see the overview of web services discussed in this chapter in the table below.</p><p>Google Yahoo! Czech service Content Sharing Picasa Flickr none API GData SOAP, XML-RPC, REST Social Sites Orkut Yahoo! 360 Libimseti API REST, Atom, probably none none GData Social Bookmarking <a href="/tags/Google_Bookmarks/" rel="tag">Google Bookmarks</a> Del.icio.us Jagg API GData REST REST Content Creating Blogger Yahoo! 360 Webnode API GData probably none probably none</p><p>Table 5.1: Differences between Widgetbox widgets and Google gadgets</p><p>14. http://www.webnode.com</p><p>34 Chapter 6 General Rules for Web 2.0 Services Development</p><p>When designing a Web 2.0 service, you should hold several principles. For a start, it is important to decide which kind of web service you want to provide. Lots of present ones are social-based because the model of creating content by users (infoware) is a widely used and effective design pattern today. If you offer the users the possibility to present their data to the rest of the world, if you allow them to form relationships, you may be on the way to success. The key is always an idea, new idea attracting possible consumers. The second option you could choose is to offer an infrastructural Web 2.0 service, i.e. such that it will be useful mainly for designing and improving other web services. As we could see in the chapter 4, these services can provide a very useful functionality facilitating routine working. You can see the simple structure which is helpful when you are designing a Web 2.0 service in the picture below.</p><p>Figure 6.1: Simple Web 2.0 Service Design Tree</p><p>There are a lot of ways to progress when you are building your own Web 2.0 service.</p><p>35 6. GENERAL RULESFOR WEB 2.0 SERVICES DEVELOPMENT</p><p>The design of the Web 2.0 service can be divided into two main parts: the user’s part and the technical part. So, the first thing is the philosophy of the Web 2.0 service, the second thing is its implementation. The best thing you can do is (nearly always) to build up such functionality that needs data to work successfuly because the relation between the data and the functionality is the key element of the Web 2.0 world. A user must be considered as co-developer, it is the “tool” moving your web service forward. To attain this, you can use many mechanisms discussed in this thesis. The picture below shows the simple interaction among the basic components of a Web 2.0 service.</p><p>Figure 6.2: Interaction among Basic Components of Web 2.0 Service</p><p>Internal web service management is a matter for administrators resposible for its flu- ent working. The users’ collaboration contribute to continually increasing the value of the web service. On the whole, the leverage power of the Web 2.0 service is its ability to be mashable or re-usable.</p><p>6.1 General Recommendation</p><p>So, when attempting to build your own Web 2.0 service, you should adhere to the following points (or keep them in mind during building process).</p><p>• Define the main idea of your Web 2.0 service. Its philosophy has to be built on interaction with users. No idea is foolish enough so as not to be adopted by many users. • The implementation has to result from the philosophy. There are lots of technologies, frameworks and infrastructural services at this time which can facilitate your work. There are also many web servers dealing with the Web 2.0 development that contain useful information. Do not invent the wheel again.</p><p>36 6. GENERAL RULESFOR WEB 2.0 SERVICES DEVELOPMENT</p><p>• Abide with the interaction among the basic components of Web 2.0 service presented in the picture above. The “perpetual beta” is the tool to keep up. • Build your service upon user’s interaction, it must be an inseparable part of Web 2.0 service. • Do not underestimate small solutions such as tagging or using microformats. The value of metadate will grow up in proportion to the size of the data. • Enable everyone to re-use your data and functionality – by using widgets, open APIs or by anything else you think will successfuly work in this way. • Watch the actual events on the web technologies field – implement interfaces like OpenSocial (and other available ones), use the newest versions of web technology standards (both on the client and the server side). • Whatever you offer, offer it in a large spectrum of choices (if possible and needed) – look and feel, API technologies, localization etc. • Desktop applications have established a certain standard for their control. Today, there are many frameworks make it easier for your web service to behave in the same way.</p><p>The list of the rules is not quite complete. However, it shows the important points which you should hold when you are designing your Web 2.0 service. A lot of useful information can be found on the specialized servers dealing with these issues, such as ProgrammableWeb, WebWare1 or Web 2.0 Expo2 and many others.</p><p>Figure 6.3: Simple Web 2.0 Service Model</p><p>1. http://www.webware.com 2. http://www.web2expo.com</p><p>37 6. GENERAL RULESFOR WEB 2.0 SERVICES DEVELOPMENT</p><p>In the picture 6.3 above, you can see the basic model of Web 2.0 service. The Web 2.0 service users are its key and an inseparable part. Data and functionality create the core which is accesible by users either directly or by using certain kinds of interface designed to re-use internal resources. By using these interfaces (which results in building a mashup service for example), other users are able to get to know about the Web 2.0 service and thereby you can leverage the network effects better.</p><p>38 Chapter 7 Conclusion</p><p>The aim of this thesis was to outline the basic principles used to build Web 2.0 services. We showed technologies which led to the Web 2.0 revolution and described contempo- rary techniques used to implement the key Web 2.0 principles. The realization of the basic Web 2.0 principle – web as platform – was presented and discussed. In chapter 5, we saw a comparison between Web 2.0 services offered by the two largest companies – Yahoo! and Google. Based on my deeper understanding Web 2.0 design issues, several rules for designing a Web 2.0 service were proposed and a simple Web 2.0 service structure was defined in the last chapter. It can be seen that the Web 2.0 is a powerful concept for building new applications. It harnesses functionality and data and thus creates a new generation of web services. But there are still lots of questions that should be asnwered. What is the future of Web 2.0 software development concepts? Is the present situation sustainable or will we need brand new concepts again in a short time? Furthemore, there is still lack of web services providing us open APIs to be re-usable, mainly in the Czech Republic. How could it be changed? At this time, there are also lots of mashups but no design patterns of how to build them effectively. Into the future, it will be helpful to propose several of them. However, it will require a lot of additional work. Therefore it will be very useful to deal with these issues in a further work.</p><p>39 List of Figures</p><p>1.1 Basic Web 2.0 structure 2 2.1 HowAJAXworks 9 3.1 Basic Structure of Web 2.0 Service 14 4.1 Web2.0Story 17 4.2 HowWidgetsWorks 19 4.3 LayeredModelofWeb2.0 Service 23 4.4 Venn Diagram of Microformats Hierarchy 24 4.5 Tag Cloud 27 6.1 Simple Web 2.0 Service Design Tree 35 6.2 Interaction among Basic Components of Web 2.0 Service 36 6.3 Simple Web 2.0 Service Model 37</p><p>40 Bibliography</p><p>[1] OASIS Reference Model for Service Oriented Architecture V 1.0 – Official Committee Specification (Normative PDF). http://www.oasis-open.org/committees/ download.php/19679/soa-rm-cs.pdf, 2006.</p><p>[2] Mozilla developer center: AJAX. http://developer.mozilla.org/en/docs/ AJAX, 2007.</p><p>[3] Mozilla developer center: JavaScript. http://developer.mozilla.org/en/ docs/JavaScript, 2007.</p><p>[4] The XMLHttpRequest Object, W3C Working Draft. http://www.w3.org/TR/ XMLHttpRequest/, 2007.</p><p>[5] Google Gadgets API. http://code.google.com/apis/gadgets/docs/gs. <a href="/tags/HTML/" rel="tag">html</a>, 2008.</p><p>[6] Microformats <a href="/tags/Wiki/" rel="tag">Wiki</a>. http://microformats.org/wiki/, 2008.</p><p>[7] W3C: Document Object Model (DOM). http://www.w3.org/DOM/, 2008.</p><p>[8] Web 2.0. http://en.wikipedia.org/wiki/Web_2, 2008.</p><p>[9] Widget Developer Guide. http://docs.widgetbox.com/developers/ guide/, 2008.</p><p>[10] XHTML Friends Network Specification. http://www.gmpg.org/xfn/, 2008.</p><p>[11] Dráˇsil, Pavel and Pitner, Tomáˇsand Hampel, Thorsten and Steinbring, Marc. Get Ready for Mashability! – Concepts for Web 2.0 Service Integration. ICEIS, 2008.</p><p>[12] Roy Thomas Fielding. Architectural Styles and the Design of Network- based Software Architectures. http://www.ics.uci.edu/˜fielding/pubs/ dissertation/top.htm, 2000.</p><p>[13] Garrett, Jesse James. Ajax: A New Approach to Web Applications. http://www. adaptivepath.com/ideas/essays/archives/000385.php, 2005.</p><p>[14] Hinchcliffe, Dion. The story of Web 2.0 and SOA continues – Part 1. http:// blogs.zdnet.com/Hinchcliffe/?p=107, 2007.</p><p>41 [15] Hinchcliffe, Dion. Tracking the DIY phenomenon Part 1: Widgets, badges, and gadgets. http://blogs.zdnet.com/Hinchcliffe/?p=80, 2007.</p><p>[16] O’Reilly, Tim. Web 2.0: Compact Definition. http://radar.oreilly.com/ archives/2005/10/web_20_compact_definition.html, 2005.</p><p>[17] O’Reilly, Tim. What Is Web 2.0 – Design Patterns and Business Models for the Next Generation of Software. http://www.oreillynet.com/pub/a/oreilly/ tim/news/2005/09/30/what-is-web-20.html, 2005.</p><p>[18] Pitner, Tomáˇsand Hampel, Thorsten and Schulte, Jonas. Web 2.0 Mashups for Con- textualization, Flexibility, Pragmatism, and Robustness. ICEIS, 2008.</p><p>42</p> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/js/details118.16.js"></script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> <noscript><div class="statcounter"><a title="Web Analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11552861/0/b956b151/1/" alt="Web Analytics"></a></div></noscript> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>