Introduction
Nowadays in many Web-based system there are many types of the technologies apply and used for the user while designing or developing a web-based system. Therefore, Web-based Technologies are playing a very important role in the web-based system or web page design. It is because to create a dynamic and interactive web-based system there are some techniques needed during the developing of a web-based system. Therefore, Web-based Technologies are the tools to apply in web-based system in order to create a quality web-based system.
There are a number of technologies that are available in the market and the technologies of the web-based are change rapidly in the Information Technology world. There are also numbers of Web-based technology that available for a web-based system such as HTML, XML, JavaScript and etc. According to the journal, "Today's web applications are build using an array of largely independent technologies such as HTML, CSS, XML, and SQL." (Mason Chang, Edwin Smith, Rick Reitmaier, Michael Bebenita, Andreas Gal, Christian Wimmer, Bredan Eich, Michael Franz, 2009, p71). Web-based technology is part of the tools for user used to design an interactive, maintainable, efficient, functional and useful web-based system or websites. For example, Hyper Text Markup Language (HTML) is a common web technology used to construct a web-based system.
Web-based Technologies in web-based system can be categories into two parts which is the technologies for client-side or server-side. Client-side technologies such as HyperText Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript, AJAX and so on. According to the journal, "…a client-side script language like JavaScript, VB Script, etc…" (Xusheng Wang, 2006, p212). Server-side technologies such as ASP, PHP, ASP.net and so on. According to the journal, "…a server-side programming language like PHP (PHP Hypertext Preprocessor), JSP (Java Server Page), ASP(Active Server Page), etc…" (Xusheng Wang, 2006, p212). Client-side technologies which is running on the user machine such as web browser and does not requested the server to process, because it will directly process in the client machine. Therefore, the server would not carry heavily task.
On the other hand, server-side technology will serve by the web server to process the data and return back to the client machine. It will be heavily if every single work needed to perform in the server-side. Therefore, the server will reduce the performance speed and it might not preferable. Nevertheless, both technologies are work together as a designing and developing tools in a dynamic web-based system.
Purpose of Web-Based Technology
The main purpose of the Web-Based Technology is used to manipulate the web based application resources, user interface design, displaying information, processing information and to work across the platform. Besides that, it is also a interactive learning tools in an education firm. According to the journal, "…using web-based technologies in education as a mean of interactive learning…" (Mohamed Hamada, 2007, p60). Therefore, web-based technology is a necessary tool for the developer in order to develop a dynamic web-based system.
Basically Web-Based Technology is a common technique used in a web-based system for developing and designing an interactive web-based system. Example, for the user interface design, developer can code using HTML to create the user interface that interactive enough for the user besides drag and drop using a software tools. Moreover, it is also a tool used to displaying information to the client.
Besides that, it also use to processing and displaying the result to the client. For Example, developer can use the JavaScript or java to perform the functional task such as calculation, action and so on to perform the task that the user requested by using the web-based technology to processing the tasks and return to the user.
There are many web-based technology used in a web-based system and each of the technology have it own characteristic and perform accordingly. Moreover, every single web-based technology can work together in a web-based system to construct a functional and interactive system. Therefore, a web-based technology are formed with a number of technologies apply on it.
Type of Web-Based Technology
HTML
HTML stands for HyperText Markup Language, it is a markup language to work in the web pages. According to the journal, "HTML which is a markup language for a specific kind of hypertext data." (Jun-Ki Min, Myung-Jae Park & Chin-Wan Chung, 2006, p224). HTML files are written in a text-based files and containing elements of the document. An element consisting of a start tag and end tag in the end of the element to specify the start and the end of the element. Tags are a text that inside the angle bracket. Example <title> </title> this is represent the start and the end of the tag call title. It is case sensitive of the text of the tag if the closing and opening are different text it will cause error. Therefore, have to be careful while written HTML code. According to the journal, "Standardization has made HTML slightly harder to write, in that you need to be more careful about items, such as tag names (keeping them lowercase), attributes (because not all are valid in all contexts) and closing tags… "(Reuven M. Lerner, 2009) .Attributes is allowed to define in the starting tag of the element. For example, <image src="image.gif"> this is an element that represent an image attribute with the source and the file name for the image. Examples, of HTML file as below.
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<p>Hello!</p>
</body>
</html>
Figure 1. Example of HTML File.
HTML is a tree-like structure as we can see the Figure 1. It is written from top to bottom to form a tree and opening and closing tags are needed to specify the elements. It is also can defined the data types elements inside the HTML such as JavaScript data and CSS data. According to the journal, "…HTML documents as elements of a specific data type together with a wrapper function that is responsible for the correct textual representation of this data type. Since HTML documents have a tree-like structure,…"(Michael Hanus, 2007, p157).
HTML documents are required declaration for the starting of the documents which is the Document Type Declaration also known as a doctype in other way. Example of an HTML doctype declaration."<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">".
HTML can be supporting the scripting languages such as JavaScript. Besides that, it also can use the Cascading Style Sheets (CSS) to design the appearance of the web-based system layout such as background color, font style, image and so on. According to the journal, "…HTML and it's supporting technologies of scripting and style sheets…"( M.J. Lantis, 2008, p97).
Besides that, HTML can support images files and interaction objects such as text fields, buttons, text areas, check boxes, radio buttons, drop-down lists, and so on. According to journal, "HTML defines several standard interaction objects for forms: check boxes, radio buttons, drop-down lists, text-areas, text fields and buttons." (Ryan Levering & Michal Cutler, 2006, p202). Both images and Objects can be embedded into the web site and to design a dynamic and interactive website. According to journal, "…HTML documents. It then fetches the embedded images and ask the image tagger for appropriate descriptions". (Daniel Keysers, Marius Renn & Thomas M.Breuel, 2007, p249). Which means images can be embedded into the HTML document with written the tagger for the documents inside the HTML files itself.
JavaScript
JavaScript is a scripting language that used to access the objects in the client system. Besides that it is also work together or embedded in HTML documents. JavaScript is allowed the client's-side directly executed and processing the function. According to the journal, "JavaScript [13] is an imperative scripting language that can be embedded in HTML documents. JavaScript programs are executed by the client's web browser and have access,…"(Michael Hanus, 2007, p158).
Moreover, JavaScript can be categorized as an object-oriented language and it is allowed user to use to create a dynamic websites and execute the code on the client-side machine. It is not the same as Java or C#. It does not contain classes, and not encourage encapsulation or structured programming. Therefore, JavaScript is a flexible scripting language to enable user enhancing the application. According to the journal, "JavaScript is an object-oriented language designed in 1995 by Brendan Eich at Netscape to allow non-programmers to extend web sites with client-side executable code. Unlike more traditional languages such as Java, C# or even Smalltalk, it does not have classes, and does not encourage encapsulation or even structured programming. Instead JavaScript strives to maximize flexibility."(Gregor Richards, Sylvain Lebresne, Brain Burg & Jan Vitek, 2010, p1).
In fact, JavaScript is programming languages that work in the client-side machine to enhancing an interactive and dynamic web page interface. Therefore, JavaScript can use to enhancing the dynamic and interactive webpage as it can create function and calling the function on the client-side machine. Moreover, it used to implement part of the web-page documents and the browser windows. Example, create or display a popup windows using JavaScript language. According to the journal, "JavaScript is an interpreted programming language most often used for enhancing webpage interactivity and functionality. It has powerful capabilities to interact with web-page documents and browser windows,…"(Chuan Yue & Haining Wang,2009, p961).
JavaScript is a web browser scripting language and in order to implement JavaScript to communicate in a web-based environment script are needed to import to make used of JavaScript in a HTML file. Therefore, user must declare a <script> tag in the top-level of the HTML document directly or indirectly declare to the sub-level of the document like declare it inside a iFrame document. Attribute of the JavaScript type needed to specify the type of the tag. Example, of attribute <script type = "text/javascript">. According to the journal, "By "directly", we mean that the <script> tag belongs to the top-level document, and by "indirectly", we mean that the <script> tag belongs to a sub-level frame or iframe document whose origin is the same as that of the top-level document." (Chuan Yue & Haining Wang, 2009, p962).
Examples of simple JavaScript code as below.
<script type="text/javascript">
document.write("Hello World!");
</script>
Figure 2. Example of JavaScript.
function testing(){
var x = 1;
}
In JavaScript function is the constructor to replace the class object. As we know JavaScript are not created class but it does created function as a constructor to perform the action task in the document. Function is declared and contains of field, variable, and object inside the function( ). It is similarity with class in Java and C# programming language. According to the journal, "In JavaScript, any function can be a constructor for a "class" of objects, and contains a prototype field, initially referencing an empty object."(Gregor Richards, Sylvain Lebresne, Brain Burg & Jan Vitek, 2010, p2). Examples of simple JavaScript function as below.
Figure 3. Example of JavaScript function.
XML
XML is stands for the eXtensible Markup Language it is a language that well defined, extensible and a machine-readable format. Which is mean XML is a universal language that allowed different machine in different platform to read the XML language without using the standard programming languages. According to the journal, "Publishing data in XML is attractive for organizations that want to easily inter-operate and provide their information in a well-defined, extensible and machine-readable format."(Andrea Tagarelli & Sergio Greco, 2010, p3). XML is defined in 1.0 Specification that produced by the W3C whereas to start a XML element user must apply declaration to make use of XML documents. Example of XML declaration, "<?xml version="1.0" encoding="UTF-8" ?>".
XML model are similar with HTML elements for each of the element is represent as a node and a start and end tag implement in XML element. Therefore, it is a tree structure as HTML file. Nevertheless, XML tree-structured model is a kind of simple format and efficient unlike the complex of the algorithms in other languages. According to the journal, "The basic data model of XML is a labeled tree where each element or attribute is represented as a node in the tree, and its tag corresponds to the label of the corresponding node. This tree-Structured data model is simple enough to devise efficient as well as elegant algorithms for it." (Jun-Ki Min, Myung-Jae Park & Chin-Wan Chung, 2006, p224).
As mentioned above XML is a universal language that support via Unicode for all the programming languages in the Internet Technology world. Therefore, it can be used to represent any of the data structure and it is flexible to work in any other machine. There are many technology widely implement or utilized the XML technology such as web services. Because web services purpose is to communicate with many kind of machine that might using different languages. Therefore, it applies XML to overcome the communication problem among the machine. According to the journal, "Generally, web services are based on extensible markup language (XML) [26]. Web services transfer data in the form of XML documents; by XML abilities, they describe themselves and allow the others to find and access them."(Meisam S.A. Najjar & Mohammad Abdollahi Azgomi, 2010, p240).
XML data is retrievable by using the XML query languages such as XPath and XQuery. These languages are similar purpose to the database SQL language. But XPath and XQuery are based on the path expressions and traverse the tree structure of data. In fact, XML data is mainly focused on the storage, retrieval and publication purposes according to the research, "Currently, a variety of research for XML data has focused on issues related to XML storage [Florescu and Kossman 1999], retrieval [Goldman and Widom 1997; Fernandez and Suciu 1998], and publication [Fernandez et al. 2000; Shanmugasundaram et al.2000]." (Jun-Ki Min, Myung-Jae Park & Chin-Wan Chung, 2006, p224).
AJAX
AJAX known as Asynchronous JavaScript and XML, it is a tool for the web development used technique on the client-side for the purpose to develop an interactive web-based application. AJAX provides an interactive and effective user interface in web-based with combine of data in plain text, XML and JavaScript Object Notation (JSON) format. As mentioned AJAX is a technique use on the client-side, in fact AJAX is act as a middle man between the Server and Client Browser. The benefit of using AJAX is it does not require to refreshing or rebuilding the page even though it requested data in the server-side. Therefore it would not make the server work heavily because the response time to retrieve the data in the server is faster. The data will then updated to the Document Object Model (DOM) and the new JavaScript object is being created based on the data requested. DOM is used to access with JavaScript and for dynamically display and allowed user to interact with the information displayed. According to the journal, "It provides an interactive and effective web-based user interface that used to transport data in plain text, XML, or JavaScript Object Notion (JSON) format. Using the Ajax technology, retrieving the data from server is fast as it is done without refreshing and rebuilding the page repetitivelty. The data is updated on the Document Object Model (DOM) page and new JavaScript objects are created based on those object."(Therese J Albert, Kai Qian & Xiang Fu, 2008, p390).
AJAX is normally retrieved the data from the server using the XMLHttpRequest object. It will send the request from the client machine to the server. Below is a picture to show the working flow of the AJAX work in a web-based application.
C:\Users\Kean\Desktop\AJAX.png
"Asynchoronous Web Application. (Therese J Albert, Kai Qian & Xiang Fu, 2008, p390)"
In the picture we can see there are two processing side client-side and a server-side. On the client browser it using JavaScript to manipulate the loaded page and it deal with the AJAX engine and created XMLHTTPRequest and then send the request from client-side machine to the server. XMLHttpRequest is objects that allow the client-side interact with the server application. Then, on the server processing the request send from the client using languages such as PHP, ASP or JSP to process. After finish process the server send a response to the AJAX engine, then base on the request from the client machine AJAX engine will display the request back to the client machine. Therefore the client page is not required to refresh at the time because the client page is not directly request from the server. It is loaded in the AJAX engine before the response is sending back to the client machine. AJAX is a powerful tool to apply in a multiple pages, because it will make the web-based application more efficient and interactive. The response time is fast when requesting the service from the server and without refreshing the page every time of the request. It is because AJAX provides an engine to serve as a middle man between the client and server side.
One of the famous website that uses the AJAX technology in the web page is Yahoo. Inside Yahoo mail box it applies the AJAX function to make the content display dynamically. For example, once user have click on the mail the content will directly display in the content panel. Therefore, users do not need to load the whole page again but it only load the panel provides in order to display the content to the user.
CSS
CSS stands for Cascading Style Sheets it is known as a style sheet language used to control the formatting and display for the document that are written in a markup language. Usually CSS is commonly used for the web-based application that written in HTML and XHTML. According to the journal, "Cascading Style Sheets (henceforth CSS) is used to express formatting in HTML and XHTML."(Manuel Serrano, 2010, p109).
The purpose of designed CSS is to enable the document content to be separated from the document such as HTML and XHTML file, and it is consists of elements such as layout, color and fonts. CSS is maintained by the World Wide Web Consortium (W3C) and separate from the markup language documents. It will be improving the maintainability by doing this kind of separation and it does not affect the HTML documents if any changes done in the style sheets document. Besides that it is more flexibility and accessibility for user to applies CSS inside the HTML file and allowed multiple pages can applies the same formatting create in a CSS document without design it one by one. Moreover, it also can create a multiple style sheet to control multiple contents in a web-based application. According to the journal, "Cascading style sheets (CSS) [4] were created by the W3C in an attempt to separate the visual representation from the underlying data representation of HTML or other markup languages. Styles sheets can dramatically alter the presentation in client browser affecting visibility, impact and position."(Ryan Levering & Michal Cutler, 2006, p198).
CSS syntax is simple and it using some of the English keywords to defined the names of the style properties. A style sheets declaration is having two parts there is selector and properties. According to the journal, "A CSS file is composed of CSS declarations which have two parts: 1. a pattern, also known as a selector, that distinguishes the nodes on which the declaration applies. 2. a list of properties that express the graphical configuration." (Manuel Serrano, 2010, p110). Example of CSS syntax below: "div.example{ color: red; }".
Web-Based Technology Framework in web development and design field
Web 2.0 Framework
Web 2.0 is a term that work with web applications that allowed the web-based application that achieve interactive information sharing, user-centered design, interoperability and collaboration on the WWW (World Wide Web) architecture. The purpose of the Web 2.0 framework is to provide a clear and concise view of the nature of Web 2.0. Basically, there are three main parts for the Web 2.0 Framework. The first part is Inputs, and Inputs consists three sub-parts there is User Generated Content, opinions and applications. The second part is Mechanisms such as technologies XML, AJAX and so on, recombination, collaborative filtering, structures and syndication. The last part is Emergent outcomes such as easily found the content, enhanced usability and collective intelligence. Web 2.0 also separate to two key domains there is Open Web and the Enterprise. Open Web is the free open source that can access by anyone and Enterprise is developing for the Enterprise level the enhanced version of the open web.
The Web 2.0 framework can make use of web-based application, blogs, video sharing, hosted services, and social networking sites. The type of technologies typically used in Web 2.0 framework developments on the client-side technologies such as AJAX, XML, JavaScript/AJAX, Adobe Flash and Adobe Flex framework. Example of framework that used JavaScript/AJAX to develop is Yahoo! UI Library, jQuery, MooTools, and Dojo Toolkit. On the other hand, the server-side technology of Web 2.0 has applying the same technologies in Web 1.0 and New Languages used such as PHP, JSP, ASP, Python, and Perl are serving as a backend development.
The concepts of Web 2.0 framework are the combination of client and server-side software, content syndication and network protocols. It is also possible to install plug-ins software to work as extensions to handle content for the user interaction.
There are many web-based application are applying the Web 2.0 framework example of web-based application are Youtube, Wikipedia, Blogger and so on. Youtube have applies the content sharing that provides by the Web 2.0 framework such as allowed user to upload the short clip to the web-sites and also provide a search engine for the user to search for the clips they requested. Besides that, Wikipedia also applies the same function as Wikipedia allow the user to publishing the text content on the web-site and it do allowed user to search for the text content they wanted to see. Lastly for the Blogger.com it did applies the Widget such as the page layout, clock that written in Javascript format. It allowed user to adding the widget inside they content and make it more attractive by using the concept of Web 2.0 framework.
In conclusion, Web 2.0 framework technologies can make the Internet world become more attractive and user friendliness. There are many web-sites still applying Web 2.0 framework, in order to create an interactive and useful web-based application.
Web 3.0
Web 3.0 is an enhanced version of Web 2.0, it is also inheritance all the features from the Web 2.0 and applies new technologies such as Artificial intelligence, Automated reason, cognitive architecture, composite application, distributed computing, knowledge representation, Ontology (computer science), recombinant text, scalable vector graphics, Semantic Web, Semantic Wiki and software agents to form a new concept so called Web 3.0. Basically Web 3.0 is defined as a term, but the definition is not defined yet so far. Nevertheless, it is referred to Semantic Web sometime.
According to RoseIndia, 2007. Web 3.0 is an evolving extension of World Wide Web whereby the web-based content can be express not only in natural language, but it do form the content to be understandable, and used by software agents. Moreover, it allowed them to search, share, and manipulate the information more easily.
According to Nova Spivack, the CEO of Radar Networks has proposed that Web 3.0 is a collection of various technology developments that growing to a new level such as Ubiquitous Connectivity, it is known as broadband and mobile Internet access. Secondly, the network computing, it is a software-as-a-service business models, web services, distributed computing, interoperability and cloud computing. Thirdly, the open technologies it is an open APIs, open data formats, and open source software platforms. Forthly, the open identity likes the Open ID, open reputation and personal data. Besides that, the intelligent web, it is the Semantic web technologies for examples RDF (Resource Description Framework, Semantic application platforms, and statement based datastores. Lastly, the distributed databases and the intelligent application such as natural language processing, machine reasoning and autonomous agents. Moreover, the Web 3.0 Framework design technologies used such as AJAX, Silverlight, Widget Enabled, Taggable and so on.
Some of the website have applies in the Web 3.0 framework to develop the interactive website such as Google, Wiki, MySpace and so on. One of the applications that apply Web 3.0 framework concept in Google is the Google Earth. Google Earth allowed the user to have more attractive view, because it did apply the virtual globe that the map is displayed in 3 dimensional views. Besides that, it is having the intelligent search engine, because the Google Earth will base on the destination of the user route out a best way to the users. Moreover, it is obtained the maps from the satellite imagery. Therefore, it is an intelligent application that provides the user interactive maps and a powerful searching and retrieving data engine used.
In conclusion, Web 3.0 framework is the evolution of Web 2.0 and it has inherited all the features from Web 2.0. Moreover, new technology applies to make the web-based application more attractive and much more reality compare to Web 2.0 framework does, because Web 3.0 not only allowed web-based to express it content but it also can make the content become much more interactive by applying the 3 dimensional view to the Web-based application content.
RIA Framework
RIA is stand for Rich Internet Application. RIA framework is act as a web services in the desktop application that allowed users to use the web client (web browser) to process the user interface and use an application server to store program states and user data that is generated. It is normally delivered by way of a site-specific browser, independent sandboxes, via web browser plug-in or virtual machines. Some of popular RIA frameworks such as Adobe Flex, Open Laszle , SmartClient, Apollo and Microsoft Silverlight.
RIA typically run in a web browser and it does not require user to install other software framework. RIA is running in a secure environment locally called sandboxes. It can be support the company to run the application locally within the company itself without connected to the internet. Basically, RIA enabled to make the browser application with a rich user interface that works in offline mode rather than online. It is work like a desktop application. For example, the company emails application. Therefore, a lot of companies are satisfies with the RIA technology invented, because it did support the applications in offline mode.
Nevertheless, besides the application in offline mode feature RIA framework does develop in the online mode application. The online mode application is required a network connection that run the online mode application within the desktop and allowed user to downloads, updates, verifies and executes the data by applying the RIA concept. Sometimes, it is require a browser plug-in to make the application workable in the desktop.
There are number of the application that applied the RIA framework concept and some of the application is Outlook and Google Chrome. Outlook is an email and manages personal information software that provides a desktop application on the client machine and this application can work as offline mode or online mode. Google Chrome is an interactive web browser developed by Google that applying the Web Kit layout engine and application framework such as Adobe Flash. It provides a graphical user interface frame on the browser that make the user more convenient to used. Therefore, both applications are applied the RIA framework architecture and act as a desktop application in the client computer.
In conclusion, RIA framework is the web-based application that serves the function as desktop applications. RIA not the same as desktop application because it needs to install the software to make used of the function. But the RIA framework does not require installing any software, because it utilizes the web-based technologies plug-in such as ActiveX, Java and Flash. It is similar as the desktop application software on the client machine. Besides that, RIA framework also makes the offline environment application workable in the client machine. Users are not required to online to perform the task but it also enabled user by using the application provides and done in offline mode. Therefore, it is the advantages that provide by the RIA framework.
Comparison of Web 2.0, Web 3.0, and RIA Framework
Web 2.0
Web 3.0
RIA
Simple Definition
Second generation of Web that allowed end user to create content and participate in the Web-based application.
Latest generation of Web that allowed end-user to have the virtual reality experience on the web-based application.
It is web applications that act as a web service and work with the desktop application that enabled user to use the web resources.
Characteristic of Web-based application design
Developed a Programmable Web that achieve interactive and accessible for the end user.
Developed an Artificial Intelligent Web-based application that provides user more attractive such as 3 Dimensional content views.
Developed Web-based application that acts as a desktop application to achieve highly interactive for the end-user.
Type of
Technologies Used
AJAX, XML, JavaScript/AJAX, Adobe Flash, Adobe Flex, PHP, JSP, ASP, Python, and Perl
AJAX, Silverlight, Widget Enabled, Taggable, Artificial intelligence, Automated reason, Ontology (computer science)
JavaScript, AJAX, ,HTML, ActiveX, Java and Flash and Silverlight
Interface Issues
Semi Dynamic Interface
Dynamic Interface that implement by RDF
Dynamic Interface
Web-based application developed by applying this type of framework
Youtube, Wikipedia, Blogger, flickr, twitter, and meebo
Google (Google Earth), Google (search engine), Wiki (search engine), and MySpace
Microsoft Outlook, Yahoo! Map, Google Chrome, and Mozilla
