to Widgets

© 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




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


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


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


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


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


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


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


Example  <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


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


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


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


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


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


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


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


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


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


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


Summary

  Live functionality made easy

MIIT 2009/10: GIMI 4: Web 2.0 39

Social Network Sites




  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.


MIIT 2009/2010: GIMI 4: Web 2.0 41


  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


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


  livejournal.com

  hi5.com

  xanga.com

  xing.com

  ning.com

  plaxo.com

  friendster.com

MIIT 2009/2010: GIMI 4: Web 2.0 44


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


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


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




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


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


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


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


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


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


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


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> </script> <a href="#" onclick="do_colors(this); return false"> Hello World! </a>

MIIT 2009/2010: GIMI 4: Web 2.0 66


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


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


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


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


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


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[  <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

Documents

to Widgets