Lesson 7 course Web 2.0 2012 University of Camerino Web 2.0 technologies and mashups

1. Web 2.0 blog, wiki, tag, social network: what are they, how to use them and why they are important Lesson 7: web 2.0 technologies and mashups

2. This material is distributed under the Creative Commons "Attribution - NonCommercial - Share Alike - 3.0", available at http://creativecommons.org/licenses/by-nc-sa/3.0/ . Part of the slides is the result of a welcome distance collaboration with prof. Roberto Polillo, University Milan Bicocca ( http://www.rpolillo.it )

4. ATOM - RSS

5. public API integration - interaction

6. Mash-Up: Hybrid - Plugins (XUL!)

7. many links http://www.onstrat.com/web2/

8. Web 2.0 – moving to servers Centralization – decentralization cycle Technology mainframe -> LAN / fat client -> Web / thin client Monopolist IBM -> Microsoft -> Google Data Central (local) -> Decentralized (local) -> Central (global) Cloud!

9. Web 2.0 – AJAX AJAX Components - XHTML and CSS to format the information (an XHTML file is an HTML page written in accordance with the XML standard) - DOM objects, manipulated through Javascript, to interact with the information presented (events!) - The XMLHttpRequest object to exchange data asynchronously with the server - XML as a format for exchanging data between servers and clients First use of the term: http://www.adaptivepath.com/ideas/essays/archives/000385.php (see schema) http://en.wikipedia.org/wiki/Ajax_%28programming%29 In deep: http://www.w3schools.com/Ajax/Default.Asp (see next) http://www.xul.fr/en-xml-ajax.html

11. development phases divided in little interactions

13. Django, fw open MVC Python

14. Symfony fw open MVC PHP5 with AJAX support

15. Zend framework fw open PHP5

16. Google Web Toolkit fw open java, plugin for Eclipse/NetBeans http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks W3C http://www.w3.org/2006/rwc/ started a group on “Rich Web Clients Activity” to improve client-side Web functionalities

17. Web 2.0 techniques: XUL XUL (XML User Interface Language) is a language used to define graphical interfaces https://developer.mozilla.org/en/XUL Used for Firefox, Thunderbird and their extensions and plugins http://blog.mozilla.com/addons/2008/11/19/1-billion-add-on-downloads/ http://blog.mozilla.com/addons/2010/07/01/2-billion-downloads/ http://en.wikipedia.org/wiki/XUL : film references

18. Web 2.0 : mash-up Meaning: mash = mixture, medley to mash = to crush, to squeeze (term used even in music) Web application that integrates dynamic content or services from multiple sources (eg RSS or via API) to create a new service http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid) (note: portal |= mashup) a good presentation: http://www.slideshare.net/valicac/mashups-87355#slideshow_stats (choose the best)

19. Web 2.0 : examples of mash-up http://www.blogitalia.it/mappa/ http://www.housingmaps.com/ a partments for rent and for sale geo-referenced (Googlemaps + www.craigslist.com) http://www.twitspy.com/ real-time tweets http://portwiture.com/ your twitter status … in photos! http://twitrratr.com/ tweets: positive, neutral, negative http://www.search-cube.com/ visual search-engine http://www.nyartbeat.com/bubbles NY art in bubbles http://labs.ideeinc.com/multicolr/ color search-engine “ There are creative people all around the world, hundreds of millions of them, and they are going to think of things to do with our basic platform that we didn’t think of.” Vinton Cerf

20. Web 2.0 : examples of mash-up http://pipes.yahoo.com/pipes/ MashMaker by Intel http://softwarecommunity.intel.com/articles/eng/1505.htm http://code.google.com/apis/gdata/basics.html http://www.programmableweb.com/ “Keeping you up to date with APIs, mashup and the Web as a platform” Most popular mashups: http://www.programmableweb.com/mashups/directory/1?view=text http://mashupawards.com/winners/ http://webtrends.about.com/od/webmashups/tp/7-great-twitter-mashups.htm http://webtrends.about.com/od/webmashups/tp/10-best-mashups-on-the-web.htm

21. Web 2.0 : examples of mash-up Source: http://www.programmableweb.com/mashups

22. Web 2.0 : examples of mash-up http://www.perspctv.com A "dashboard" to monitor the flow of news about certain topics on different information channels (CNN, Twitter Search, Technorati, Daylife, Alexa, Google's Insight for Search, and other) “ This project presents different perspectives in our world, including that of Mainstream media and user-generated content on the Internet. Explore the similarities and the disparities, hear the many voices that have emerged and choose which view, if any, makes the most sense to you. What we think vs. what they say we think -- All the chatter on the Internet, all the traditional news media coverage, and all the pollsters -- Perspctv brings it all together in a simple and elegant manner -- and gives a unique "dashboard" picture of the elections at any one given moment in time, totally un-biased.”

24. (reduced code volume, low-cost application development)

25. Ease of application development

26. (availability of tools that do not require high technical skills - es.pipes)

27. Availability of large databases

28. Low (or no) cost of acquiring and updating data

29. Quick Set-up application

30. (time-to-market, possibility of quick prototyping)

32. (data quality, performance, availability and continuity of service, changes in service policies, stability -> fragility, "the strength of its weakest link")

33. API standards and versioning

34. Intellectual property and copyright

35. ("right to remix”: to what extent?)

36. Privacy

37. (cross and filter data can generate problems not existing in the original data)

38. Mobilize web sites http://www.masternewmedia.org/how-to-mobilize-my-website-best-tools-to-convert-your-blog-into-a-mobile-site/ example: http://ready.mobi/results.jsp?uri=http%3A%2F%2Fwww.istat.it&locale=en_EN test about web sites appearance in mobile phones standard: http://www.w3.org/TR/mobileOK-basic10-tests/

40. Embed images, photos, slides, etc. inside your blog using mashup techniques

41. Explore the use of yahoo! pipes

42. (comments and links on the wiki!)