Post on 16-Oct-2021
© Carlos Delgado Kloos, UC3M 2009 1
Module 4: Web 2.0
Carlos Delgado Kloos Dep. Ing. Telemática
Universidad Carlos III de Madrid
From Podcasts to Widgets
Carlos Delgado Kloos Dep. Ing. Telemática
Universidad Carlos III de Madrid
© Carlos Delgado Kloos, UC3M 2009 2
Evolution of the Web (1.0)
Initially just text documents then with images and rich multimedia then applets for functionality (code)
MIIT 2009/10: GIMI 4: Web 2.0 3
text media code
Evolution of Web 2.0
Initially just text feeds then with images and rich multimedia then widgets for functionality
MIIT 2009/10: GIMI 4: Web 2.0 4
feeds podcasts widgets
© Carlos Delgado Kloos, UC3M 2009 3
Feeds
List of small text fragments with title and publication date
MIIT 2009/10: GIMI 4: Web 2.0 5
Podcasts
Feeds of digital media for playback on portable media players or computers
MIIT 2009/10: GIMI 4: Web 2.0 6
© Carlos Delgado Kloos, UC3M 2009 4
Widgets Can we have small chunks of
functionality on our web page? – like Java applets – widgets on Apple dashboard
Different names – Apple, Yahoo!, Opera: widgets – Google, Microsoft: gadgets – Netvibes: modules – Pageflakes: flakes – Other: gizmos, desklets, …
MIIT 2009/10: GIMI 4: Web 2.0 7
Widgets
“Widgets are a class of client-side web application for displaying and/or updating local or remote data, packaged in a way to allow a single download and installation on a client machine or device. Examples include clocks, stock tickers, news casters, games and weather forecasters.”
Widgets 1.0, W3C Working Draft, 29 October 2009 www.w3.org/TR/widgets/
MIIT 2009/10: GIMI 4: Web 2.0 8
© Carlos Delgado Kloos, UC3M 2009 5
iGoogle
www.igoogle.com www.google.com/ig
MIIT 2009/10: GIMI 4: Web 2.0 9
Yahoo!
widgets.yahoo.com MIIT 2009/10: GIMI 4: Web 2.0 10
© Carlos Delgado Kloos, UC3M 2009 6
Opera
widgets.opera.com MIIT 2009/10: GIMI 4: Web 2.0 11
Netvibes
www.netvibes.com MIIT 2009/10: GIMI 4: Web 2.0 12
© Carlos Delgado Kloos, UC3M 2009 7
Pageflakes
www.pageflakes.com MIIT 2009/10: GIMI 4: Web 2.0 13
Live
home.live.com MIIT 2009/10: GIMI 4: Web 2.0 14
© Carlos Delgado Kloos, UC3M 2009 8
Widgetbox
www.widgetbox.com
MIIT 2009/2010: GIMI 4: Web 2.0 15
SpringWidgets
springwidgets.com
MIIT 2009/2010: GIMI 4: Web 2.0 16
© Carlos Delgado Kloos, UC3M 2009 9
Example <!-- SpringWidgets | International Clock (#9859) | HTML | Generated on 03/29/2009 --> <object type="application/x-shockwave-flash" allowNetworking="all"
allowScriptAccess="always" allowFullScreen="true" height="76" width="400" id="springwidgets_9859" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=International Clock.sbw" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="allowNetworking" value="all" /> <param name="allowScriptAccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php
?file=International Clock.sbw" />
<param name="flashvars” value="" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="bgColor" value="0x000000" /> <embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true"
allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=International Clock.sbw" flashvars="" quality="high" name="springwidgets_9859" wmode="transparent" width="400" height="76" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
MIIT 2009/2010: GIMI 4: Web 2.0 17
Multiple Platforms
Desktop (Mac, Windows) Web page Blogs (Blogger) Social Networks
(Myspace, Facebook, Friendster, Xanga)
…
MIIT 2009/2010: GIMI 4: Web 2.0 18
© Carlos Delgado Kloos, UC3M 2009 10
More Information
www.widgipedia.com
www.widgetoko.com
MIIT 2009/2010: GIMI 4: Web 2.0 19
Other initiatives
klipfolio.com
avedesk.org
samurize.com
labs.adobe.com/ technologies/air/
MIIT 2009/10: GIMI 4: Web 2.0 20
© Carlos Delgado Kloos, UC3M 2009 11
Multiple platforms
Web browser
Desktop/dashboard
Mobile phone
MIIT 2009/10: GIMI 4: Web 2.0 21
Apple dashboard
developer.apple.com/documentation/AppleApplications/Conceptual
/Dashboard_Tutorial MIIT 2009/10: GIMI 4: Web 2.0 22
© Carlos Delgado Kloos, UC3M 2009 12
Windows Vista
www.microsoft.com/windows/ windows-vista/features/
sidebar-gadgets.aspx MIIT 2009/10: GIMI 4: Web 2.0 23
Widsets (Nokia)
www.widsets.com MIIT 2009/10: GIMI 4: Web 2.0 24
© Carlos Delgado Kloos, UC3M 2009 13
iPhone
developer.apple.com/iphone/devcenter
MIIT 2009/10: GIMI 4: Web 2.0 25
Zumobi
zumobi.com
MIIT 2009/10: GIMI 4: Web 2.0 26
© Carlos Delgado Kloos, UC3M 2009 14
bluepulse
www.bluepulse.com MIIT 2009/10: GIMI 4: Web 2.0 27
Developers Doc Netvibes
– dev.netvibes.com Google
– desktop.google.com/dev/gadgetapi.html Pageflakes
– www.pageflakes.com/Community/Developers/Documentation.aspx
Yahoo! – widgets.yahoo.com/workshop
MIIT 2009/10: GIMI 4: Web 2.0 28
© Carlos Delgado Kloos, UC3M 2009 15
Issues
How to program widgets – Which language(s)
How interoperable are they – write once, run where?
What are the commonalities and differences among initiatives?
MIIT 2009/10: GIMI 4: Web 2.0 29
Different approaches
www.w3.org/TR/widgets-land
MIIT 2009/10: GIMI 4: Web 2.0 30
© Carlos Delgado Kloos, UC3M 2009 16
Markup
At least HTML and CSS
MIIT 2009/10: GIMI 4: Web 2.0 31
Metadata
XML: de facto standard, but different vocabularies
MIIT 2009/10: GIMI 4: Web 2.0 32
© Carlos Delgado Kloos, UC3M 2009 17
Supported formats
In general many formats and XMLHttpRequest for AJAX functionality
MIIT 2009/10: GIMI 4: Web 2.0 33
Packaging
Zip: de facto standard
MIIT 2009/10: GIMI 4: Web 2.0 34
© Carlos Delgado Kloos, UC3M 2009 18
Localization
Mainly directory-based and JavaScript
MIIT 2009/10: GIMI 4: Web 2.0 35
Signatures
Quite different decisions
MIIT 2009/10: GIMI 4: Web 2.0 36
© Carlos Delgado Kloos, UC3M 2009 19
Widgets 1.0
This document standardizes – a Zip-based packaging format, – an XML-based configuration document format – a series of steps that user agents follow when
processing and verifying various aspects of widgets.
www.w3.org/TR/widgets
MIIT 2009/10: GIMI 4: Web 2.0 37
Question
What is the difference between a widget and an applet?
MIIT 2009/10: GIMI 4: Web 2.0 38
© Carlos Delgado Kloos, UC3M 2009 20
Summary
Live functionality made easy
MIIT 2009/10: GIMI 4: Web 2.0 39
Social Network Sites
Carlos Delgado Kloos Dep. Ing. Telemática
Universidad Carlos III de Madrid
© Carlos Delgado Kloos, UC3M 2009 21
A social network web site focuses on building online communities of people who share interests and/or activities, or who are interested in exploring the interests and activities of others.
Social Network Sites
MIIT 2009/2010: GIMI 4: Web 2.0 41
Social Network Sites
Social network sites are web-based services that allow individuals to 1. construct a public or semi-public profile
within a bounded system, 2. articulate a list of other users with
whom they share a connection, and 3. view and traverse their list of connections
and those made by others within the system.
MIIT 2009/2010: GIMI 4: Web 2.0 42
© Carlos Delgado Kloos, UC3M 2009 22
Social Network Sites www.facebook.com
www.myspace.com
www.orkut.com
www.piczo.com
360.yahoo.com
MIIT 2009/2010: GIMI 4: Web 2.0 43
Social Network Sites
livejournal.com
hi5.com
xanga.com
xing.com
ning.com
plaxo.com
friendster.com
MIIT 2009/2010: GIMI 4: Web 2.0 44
© Carlos Delgado Kloos, UC3M 2009 23
Social Network Sites: Timeline
MIIT 2009/2010: GIMI 4: Web 2.0 45
Social Network Sites: Strengths
MIIT 2009/2010: GIMI 4: Web 2.0 46
© Carlos Delgado Kloos, UC3M 2009 24
Social Network Sites by Country
MIIT 2009/2010: GIMI 4: Web 2.0 47
Specialized Sites
advogato.org (free software development, trust metrics to avoid abuse)
flixster.com (movies) geni.com (genealogy) livemocha.com
(learning languages)
MIIT 2009/2010: GIMI 4: Web 2.0 48
© Carlos Delgado Kloos, UC3M 2009 25
List of Social Network Sites http://en.wikipedia.org/wiki/ List_of_social_networking_websites
MIIT 2009/2010: GIMI 4: Web 2.0 49
Social Widgets
Carlos Delgado Kloos Dep. Ing. Telemática
Universidad Carlos III de Madrid
© Carlos Delgado Kloos, UC3M 2009 26
Business in Social Networks
Once you have all the people registered to your social network with all their friends, what would be the next step to make business? – Allow companies to announce their products
in a personalized way? – Take advantage of viral marketing?
You have to do that very carefully, in order not to scare your users away!
What would be the technical base to do that?
MIIT 2009/2010: GIMI 4: Web 2.0 51
Widgets in Social Networks
As widgets are getting popular in social networks, there is a need to – facilitate the creation of widgets – help distributing them – ease the reporting for businesses
There are several companies appearing to address this issue
MIIT 2009/2010: GIMI 4: Web 2.0 52
© Carlos Delgado Kloos, UC3M 2009 27
Business Gigya
– gigya.com Clearspring
– clearspring.com Labpixies
– labpixies.com Kickapps
– kickapps.com – kickdeveloper.com
MIIT 2009/10: GIMI 4: Web 2.0 53
Amazon Widgets
“Amazon Widgets” are a series of small, easily configurable elements that can be used to feature Amazon.com products on blogs, websites and social networks
People who want to make money with their Amazon Widget can do so by joining the Amazon Associates program
MIIT 2009/2010: GIMI 4: Web 2.0 54
© Carlos Delgado Kloos, UC3M 2009 28
Amazon Widgets
Evolution of the previously existing links and banners
Widgets can be built either by using a WYSIWYG editor or by programming
MIIT 2009/2010: GIMI 4: Web 2.0 55
Amazon Widgets
https://widgets.amazon.com
MIIT 2009/2010: GIMI 4: Web 2.0 56
© Carlos Delgado Kloos, UC3M 2009 29
Search <script type='text/javascript'> var amzn_wdgt={widget:'Search'}; amzn_wdgt.tag='widgetsamazon-20'; amzn_wdgt.columns='1’; amzn_wdgt.rows='1'; amzn_wdgt.defaultSearchTerm='10 mp 5x zoom'; amzn_wdgt.searchIndex='Photo’; amzn_wdgt.width='256’; amzn_wdgt.showImage='True’; amzn_wdgt.showPrice='True’; amzn_wdgt.showRating='True’; amzn_wdgt.design='2’; amzn_wdgt.colorTheme='Default’; amzn_wdgt.headerTextColor='#FFFFFF'; amzn_wdgt.outerBackgroundColor='#000000'; amzn_wdgt.marketPlace='US'; </script> <script type='text/javascript' src='http://wms.assoc-amazon.com
/20070822/US/js/AmazonWidgets.js'> </script>
MIIT 2009/2010: GIMI 4: Web 2.0 57
Carousel <script type='text/javascript'> var amzn_wdgt={widget:'Carousel'}; amzn_wdgt.tag='widgetsamazon-20'; amzn_wdgt.widgetType='Bestsellers'; amzn_wdgt.searchIndex='VideoGames'; amzn_wdgt.browseNode='51550011'; amzn_wdgt.title='New Video Game titles from Amazon'; amzn_wdgt.width='600'; amzn_wdgt.height='200'; amzn_wdgt.marketPlace='US'; </script> <script type='text/javascript' src='http://wms.assoc
-amazon.com/20070822/US/js/swfobject_1_5.js'> </script>
MIIT 2009/2010: GIMI 4: Web 2.0 58
© Carlos Delgado Kloos, UC3M 2009 30
eBay Widgets
togo.ebay.com
MIIT 2009/2010: GIMI 4: Web 2.0 59
eBay Widgets
MIIT 2009/2010: GIMI 4: Web 2.0 60
© Carlos Delgado Kloos, UC3M 2009 31
Facebook Platform
Mark Zuckerberg (*1984) about the FaceBook Platform
Announced May 2007
developers.facebook.com/videos.php www.facebook.com/platform_tour.php
MIIT 2009/2010: GIMI 4: Web 2.0 61
Facebook Platform
FBML (FaceBook Markup Language) – Subset of HTML with propietary extensions
FaceBook Object – to get information about the user
FQL (FaceBook Query Language) – To issue queries
FBJS (FaceBook JavaScript)
MIIT 2009/2010: GIMI 4: Web 2.0 62
© Carlos Delgado Kloos, UC3M 2009 32
FBML
FaceBook Markup Language – Sub-superset of HTML – New tags
• Markup tags • Procedural tags
MIIT 2009/2010: GIMI 4: Web 2.0 63
Procedural tags <fb:if-can-see uid="123" what="profile"> You're allowed to see 123's profile! <fb:else> No profile for you! </fb:else> </fb:if-can-see>
MIIT 2009/2010: GIMI 4: Web 2.0 64
© Carlos Delgado Kloos, UC3M 2009 33
Procedural tags <fb:switch> <fb:photo pid="123" /> <fb:profile-pic uid="321" /> <fb:default> You can't see either the photo or the profile pic </fb:default> </fb:switch>
MIIT 2009/2010: GIMI 4: Web 2.0 65
FBJS <script><!-- function random_int(lo, hi) {return Math.floor((Math.random()*(hi-lo))+lo)} function do_colors(obj) { var r=random_int(0,255), g=random_int(0,255),
b=random_int(0,255); obj.setStyle({ background: 'rgb('+[r, g, b].join(',')+')’, color: 'rgb('+[r<128?r+128:r-128, g<128?g+128:g-128, b<128?b+128:b-128].join(',')+')'}); } //--> </script> <a href="#" onclick="do_colors(this); return false"> Hello World! </a>
MIIT 2009/2010: GIMI 4: Web 2.0 66
© Carlos Delgado Kloos, UC3M 2009 34
FBML
developers.facebook.com wiki.developers.facebook.com/ index.php/FBML
20bits.com/articles/an- introduction-to-fbml/
www.merchantos.com/makebeta/ facebook/facebook-php-tutorial/
MIIT 2009/2010: GIMI 4: Web 2.0 67
FaceBook Beacon
System to enable people to share information with their Facebook friends based on their browsing activities on other sites
Launched Nov 2007, shut down Sep 2009 Got heavy criticism for privacy concern Changed from opt-out to opt-in
MIIT 2009/2010: GIMI 4: Web 2.0 68
© Carlos Delgado Kloos, UC3M 2009 35
FaceBook Connect
A version of Facebook Platform for building social applications on other websites
Launched Dec 2008 SSO Service to enable users to login to
affiliated sites with FaceBook login Also available on the iPhone
MIIT 2009/2010: GIMI 4: Web 2.0 69
FaceBook Connect Facebook Connect is a powerful set of APIs
for developers that lets users bring their identity and connections everywhere
Developers can access a user's: – Identity: name, photos, events, and more – Social Graph: friends and connections – Stream: activity, distribution,
and integration points within Facebook, like stream stories and Publishers.
MIIT 2009/2010: GIMI 4: Web 2.0 70
© Carlos Delgado Kloos, UC3M 2009 36
FaceBook Connect
MIIT 2009/2010: GIMI 4: Web 2.0 71
FaceBook Widgets
www.facebook.com/facebook-widgets
MIIT 2009/2010: GIMI 4: Web 2.0 72
© Carlos Delgado Kloos, UC3M 2009 37
iGoogle Gadgets <?xml version="1.0" encoding="UTF-8" ?> <Module>
<ModulePrefs title="Hello World!" /> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content> </Module>
MIIT 2009/2010: GIMI 4: Web 2.0 73
Google Friend Connect
Make your site social Allow logins from Example: www.mylatestpiece.com
MIIT 2009/2010: GIMI 4: Web 2.0 74
© Carlos Delgado Kloos, UC3M 2009 38
Google Friend Connect
google.com/friendconnect
Easy set-up without programming
MIIT 2009/2010: GIMI 4: Web 2.0 75
Google Friend Connect Choose the apps you want from a gallery of gadgets created by
Google and the OpenSocial developer community – You can get gadgets for photo sharing, concert listings and games,
with many more to come Copy the snippets for the gadgets you've chosen Paste the snippets where you want them on your site
and just like that, they'll be up and running
MIIT 2009/2010: GIMI 4: Web 2.0 76
© Carlos Delgado Kloos, UC3M 2009 39
Google Gadget Ads google.com/adwords/gadgetads
Google Ads Editor google.com/ig/modules/gadgetads.html
MIIT 2009/2010: GIMI 4: Web 2.0 77
Example <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="My Gadget Ad" width="300" height="250" scrolling="false"> <Require feature="ads"/> <Require feature="flash"/> </ModulePrefs> <UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/> <UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/> <Content type="html"><![CDATA[ <!-- Embeds a single Flash file in the gadget ad and sets the dimensions --> <div id="fc"></div> <script> var swfUrl = 'http://gadgetads.googlecode.com/svn/trunk/test/fad.swf'; var fWidth = 300; var fHeight = 250; _IG_EmbedCachedFlash(swfUrl, 'fc', {width: fWidth, height: fHeight}); </script> ]]></Content> </Module>
MIIT 2009/2010: GIMI 4: Web 2.0 78