Web 2.0 – The Web’s Edge Instructor Teresa Pelkie Technologies that Made Web 2.0 Possible – Class # 3– Chapters 2. 3. 4 Arrival of Web 2.0: The Internet started in the late 1950’s – early 1960’s as a project by the Department of Defense to enable communications between various military units. This technology soon was used by scientific and educational institutions. During 1989-1990, the Web, which is part of the Internet, was born. The Web has grown from a collection of static, readonly pages, to a way that people communicate and interact. This growth has been made possible by the development of many technologies over the last 10 years. These technologies brought about changes in the behavior of the Web page. The overall design, navigation, and linking has fundamentally stayed the same. Understanding the Web Page Technologies: DOM JavaScript CSS DHTML HTML XML CSS HTML • Hypertext Markup Language – a markup language • Cascading Style Sheets • The language the Web page is written in • Formats the HTML elements • Consists of tags or elements • Separates content from presentation Describes the structure and display of the page in the browser JavaScript DHTML • A scripting language that runs in the browser • Dynamic HTML • Allows manipulation of elements • Allows for interactivity in the browser after the page has been loaded Document Object Model (DOM) • Hierarchical organization of the elements of the Web page or an XML document XML • Extensible Markup Language • Allows access of the element via a scripting language • Use to structure and define data • Provides methods to access HTML and XHTML elements via scripting • Also used to create other markup languages • Can be used as a data source for the Web page CSIT 70 Instructor Teresa Pelkie Page 1 The Interaction of CSS, the Document Object Model, JavaScript and the HTML code in the Web Page: The Web page displayed in the browser Page changes without a trip to the server using scripting CSS formats the presentation in browser JavaScript function allows for display of information upon “click” HTML “tags” structure content for display in the browser JavaScript function is called upon “click” CSIT 70 Instructor Teresa Pelkie Page 2 Sample XML Document using CSS Links to the CSS file to define the presentation XML tags define and structure elements CSS defines the presentation of the elements CSIT 70 Instructor Teresa Pelkie Page 3 Server-Side Scripting Allows for more powerful interactions – browser still needs to wait for the server response Client-side scripting • Processed in the browser Server-side scripting • Processed on the Server then returned to the browser as HTML. ¾ JavaScript • The server code is not visible in the browser. ¾ CSS • Commonly connects to a data source. ¾ DHTML ¾ CGI / PERL ¾ PHP / ASP.NET / JSP Sample PHP code written in the same document with the HTML <body> <?php echo("Choose a site to visit:"); ?> CSIT 70 Instructor Teresa Pelkie Page 4 The output in the browser of the PHP code on previous page 1. HTML form in browser programmed using PHP 2. User makes a selection The PHP code is not visible in the browser 3. User is directed to another page CSIT 70 Instructor Teresa Pelkie Page 5 Web Applications of XML Advantages of XML XML provides a format which can be used to communicate and exchange data between platforms and languages. Where XML is commonly used in the Web 2.0 applications 1. Web Services 2. Web Feeds Web Services • Web services allow one to publish a function or message so that others can use it on the Internet. • Web Services allow computers to exchange information in a highly structured fashion. • Web services use XML to code and to decode data. • Web services are self-contained and self-describing via the UDDI Protocol (Universal Description, Discovery and Integration), which is also an XML language • Web Services are accessed using the SOAP Protocol (Simple Object Access Protocol), which is also an XML language • Web services are self-contained and self-describing using the WSDL Protocol (Web Services Description Language), which is also an XML language Web Services have Two Types of Uses 1. Reusable application components. Such as currency conversion, weather reports, or even language translation as services. 2. Connect existing software. With Web services you can exchange data between different applications and different platforms. SOAP - Simple Object Access Protocol - an XML language • is a communication protocol • is a format for sending messages • is designed to communicate via Internet • is platform independent • is language and platform independent WSDL – Web Services Description Language - an XML language • is used to describe Web services • is also used to locate Web services UDDI - Universal Description, Discovery and Integration - an XML language • I is a directory for storing information about web services • I is a directory of web service interfaces described by WSDL • communicates via SOAP • Allows businesses to register and search for Web services. CSIT 70 Instructor Teresa Pelkie Page 6 Two T example es of popular Web Servic ces deployed d by Amazon n.com The T below UR RLS will provide access to this services if you sign up p Ama azon Elastic Compute C Clo oud (Amazon n EC2) - http://aws.amazon n.com/ec2/ - processing / computing c po ower Amazzon EC2 is a web service that provides resizable co omputing cap pacity in the e cloud. It is designed d to make m webscale e computing easier e for dev velopers. It’s in nterface allow ws you to obta ain and config gure capacity. It provides you y with comp plete control of o your compu uting resource es and lets yo ou run on Am mazon’s proven computing environment.. Ama azon Simple Storage S Serv vice (Amazon n S3) - http:///aws.amazon.com/s3/ - sto orage of files Amazzon S3 is sto orage for the Internet. Am mazon S3 provvides a simple e web service es interface th hat can be ussed to store and retrieve r any amount a of datta, at any time e, from anywh here on the web. w It gives any developerr access to the e same highlyy scala able, reliable, fast, inexpen nsive data storage infrastru ucture that Am mazon uses to o run its own global network of web sites. The service aims to maxiimize benefitss of scale and d to pass thosse benefits on n to developerrs. Web Feeds s Web feeds are a data d format us sed for provid ding users witth frequently y updated content. Conten nt distributorss syndicate a web feed, therebyy allowing use ers to subscribe to it. Userrs subscribe to t this conten nt by means of o an aggregator. Web feedss allows one to t subscribe to t a blog or a podcast. Web feeds are W e based on th he XML language RSS (Re eally Simple Syndication). S RSS makes it possible for p people to subs scribe to theirr favorite web b sites in an automated ma anner rather th han checking manually. W will cover this topic in more We m detail latter on in this class c ____ ____________ ___________ ___________ ___________ ____________ ___________ ___________ ____________ ___________ _ P2P Communications File and d resource sh haring -->info ormation sha aring --> ope en source sofftware --> sh haring of con ntent o-peer (or P2P) network is a network off many individ dual computerrs connected to each A peer-to other, without a centra alized server. Such networkks are useful for many purposes. Sharin ng content aining audio, video, data or o anything in digital formatt is very comm mon, and reall time data, files conta such as te elephony traffiic, is also passsed using P2 2P technologyy. A pu ure P2P netw work does not have the no otion of clien nts or serverrs but only eq qual peer no odes that sim multaneously y function as both "clients" and "servers" to the other nodes on the network. An im mportant goal in P2P netwo orks is that all clients proviide resourcess, including ba andwidth, storage space, and a comp puting power. Thus, as nod des arrive and d demand on the system in ncreases, the e total capacitty of the syste em also incre eases. This is not true of a client/server architecture with w a fixed se et of servers, in which adding more clients could mean n slower data a transfer for all a users. CSIT 70 Instructorr Teresa Pelkiee 7 Page 7 o P2P netwo orks: Charracteristics of • Search an nd download content that is shared by other o users • develop social s file-sharring networkss • file sharing • media stre eaming (audio o, video) er types of pe eer-to-peer applications: a Othe • File sharin ng (using app plication layerr protocols as BitTorrent) • VoIP (usin ng application n layer protoccols as SIP) • Streaming g media • Instant me essaging and d online chat • Software publication an nd distribution n • Media pub blication and distribution (rradio, video) ware Archite ectures: Softw • BitTorrentt and Kazaa • Gnutella • Skype oadens: This concept bro c of P2 2P is increasingly evolving to human to human sharin ng, with respe ect to collabo orative projectts such as The concept softw ware developm ment. New ty ype of license es which reco ognize individual authorship but not excclusive properrty rights, such as the GNU General Public License an nd the Creativve Commons licenses have emerged. U General Public License GNU The GNU Genera al Public Licen nse (GNU GP PL or simply GPL) G is a widely used free software lice ense, originally written by b Richard Sttallman for the e GNU projecct. The GPL iss said to gran nt the recipien nts of a puter program m the rights off the free softw ware definitio on and ensure es the freedom ms are preserved, even comp when the work is changed or ad dded to. • • http://www w.gnu.org/lice enses/licensess.html http://www w.gnu.org/philosophy/free--sw.html n Source Open The Open Source e Initiative (OS SI) is a non-profit corporatiion formed to educate abo out and advoccate for the benefits of open source and to o build bridge es among diffe erent constitu uencies in the open-source e community. e thought beh hind open sou urce is that ap pplications ca an evolve as fast f or faster through t comm munity input The as through com mmercial drive. A common example e of an open sourcce project is th he Linux operrating system. • http://www w.opensource e.org/ ative Commo ons License Crea Creative e Commons liccenses are se everal copyrig ght licenses released r on December D 16, 2002 by Creative e Commons, a U.S. non-profit corporatio on founded in n 2001. Many of the license es, notably all the origin nal licenses, grant certain "baseline righ hts", such as the right to diistribute the copyrighted c nges, at no ch harge. Some of o the newer licenses gran nt more restricctive rights. work without chan • http://crea ativecommons s.org/about/liccenses CSIT 70 Instructorr Teresa Pelkiee Page 8 8 Web 2. 0 = RIA + SOA + End User 1. RIA – Rich Internet Appliations Bringing the experience of the desktop to the Web Characteristics: • immediate response • moveable windows • graphical • drag and drop Web development frameworks used: • Flash • Ajax • Web Procedure Calls (uses XML encoding to send requests) • Other Served side technologies Examples: • Gmail (other web based email) • Google Maps • YouTube / Flickr 2. SOA – Service Oriented Architecture How Web 2.0 applications expose their functionality so that other application can use and integrate that functionality. This creates a much richer application. SOA Examples: • Mash-ups • Feeds / RSS • Web Services Mash-ups Mash-ups are the combining of content from web sites or web applications to create a single new site or experience. It is the combining of data form one source, with data from another source, to develop a new application. • New breed of applications on the Internet • Built with APIs (application programming interface) openly developed by various and available to anyone • Better data usage Mash-up Examples • http://anthemsonmap.googlepages.com/index.htm - combines national anthems (via a YouTube video) by clicking on the country location on the map Visit some interesting mash-ups! o Uses a Google Maps API o Uses a YouTube API • Map Your Buddies – mash-up on Facebook (need an account) o uses Facebook, Google Maps and Amazon APIs • http://twittervision.com/ – track who is “tweeting” in real time – we will cover Twitter (microblog), later in this class o uses Twitter's public feed and the Google Maps API. • www.housingmaps.com • also see www.mashupawards.com – for more mash-ups! 3. End User Provides the social aspect • Web 2.0 applications are designed to interact with the end user • User is the participant - Tagging, providing content, podcasting • User provides feedback CSIT 70 Instructor Teresa Pelkie Page 9 Frameworks for Web 2.0 Application Development Client side Ajax Frameworks • Dojo • Prototype • Kabuki Ajax Toolkit (Ajax TK) o Zimbra Server side Frameworks • Ruby on Rails • Other traditional server technologies o PHP o ASP.NET o Java Frameworks for other RIA technologies • Adobe Flash • OpenLazlo – generated flash format Difference between Ajax and Flash Flash is a compiled program and requires the Flash player. Ajax is just text scripting that runs in the Web page. CSIT 70 Instructor Teresa Pelkie Page 10