Web2 And Java


Published on

Community, metadata, ranking and websites that grow over time are attributes of Web2.0. What else? Come to the University of Cheikh Anta Diop Campus, ESP. Then, stroll over to the first meeting of SeneJUG and find out. Mike Levin will tell you all about Web2.0 and even show you some snippets in Java. We’ll talk about mashups, semantics, custom RSS feeds based on smart filters, tags and tag clouds, and a glimpse into the future. We’ll check out a fantastically popular Web2.0 website and do a feature walkthrough so you’ll be clear about the Web2.0 features. You’ll walk away with some facts and a few ideas that might inspire you to write your own Web2.0 website.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web2 And Java

  1. 1. Web2.0 and Java Presented by: Michael Levin [email_address] www.swampcast.com
  2. 2. About Mike Levin <ul><li>Firstly, Mike’s a software developer </li></ul><ul><li>Cambridge Web Design Inc is Mike’s business. </li></ul><ul><ul><li>Web2.0 websites, custom S/W and Prof Svcs </li></ul></ul><ul><li>Mike leads GatorJUG and OrlandoJUG </li></ul><ul><li>Swampcast is a podcast from the Swamp! </li></ul><ul><li>From Texas, via Prague and Dublin… </li></ul><ul><li>More in OnJava’s &quot;The Java Podcasters &quot; </li></ul>
  3. 3. Web2.0 is the web on steroids <ul><li>This talk focuses on the main elements that make up Web2.0. First, we’ll go over some Web2.0 attributes. You'll learn about mashups, semantic markup, web services, social websites that grow over time through community driven metadata, and the shift from style to data. </li></ul><ul><li>Then, we'll look at code examples illustrating how to implement these ideas. Collaborative filtering, tag clouds, using API's to create a mashups, RSS, and some tools you already have available to you as building blocks, like the Simile toolset from MIT Media Labs. </li></ul><ul><li>Collaboration, interoperability, websites that grow over time, that’s what Web2.0 is all about! </li></ul>
  4. 4. Web2.0 Origins <ul><li>The concept of &quot;Web 2.0&quot; began with a conference brainstorming session between O'Reilly and MediaLive International. Dale Dougherty, web pioneer and O'Reilly VP, noted that far from having &quot;crashed&quot;, the web was more important than ever, with exciting new applications and sites popping up with surprising regularity. What's more, the companies that had survived the collapse seemed to have some things in common. Could it be that the dot-com collapse marked some kind of turning point for the web, such that a call to action such as &quot;Web 2.0&quot; might make sense? We agreed that it did, and so the Web 2.0 Conference was born. (from What Is Web 2.0, By by Tim O'Reilly, 9/30/2005 </li></ul>
  5. 5. What’s the buzz about Web2.0? <ul><li>Web 1.0 was all about going to the source </li></ul><ul><li>Web 2.0 is all about interfaces </li></ul><ul><li>Web 1.0 was static </li></ul><ul><li>Web 2.0 is dynamic </li></ul><ul><li>Web 1.0 had readers and publishers </li></ul><ul><li>Web 2.0 readers are publishers! </li></ul><ul><li>Web 2.0 has 115,000,000 citations in Google as of 1/2007 </li></ul>
  6. 6. Web 2.0 by Example <ul><li>Web 1.0  Web 2.0 </li></ul><ul><li>DoubleClick --> Google AdSense </li></ul><ul><li>Ofoto --> Flickr </li></ul><ul><li>Akamai --> BitTorrent </li></ul><ul><li>mp3.com --> Napster </li></ul><ul><li>Britannica Online --> Wikipedia </li></ul><ul><li>personal websites --> blogging </li></ul><ul><li>Evite --> upcoming.org and EVDB </li></ul><ul><li>domain name speculation --> search engine optimization </li></ul><ul><li>page views --> cost per click </li></ul><ul><li>screen scraping --> web services </li></ul><ul><li>Publishing --> participation </li></ul><ul><li>content management systems--> wikis </li></ul><ul><li>directories (taxonomy) --> tagging (&quot;folksonomy&quot;) </li></ul><ul><li>Stickiness --> syndication </li></ul>
  7. 7. Visualize Web2.0
  8. 8. Web2.0 entertains you while you live <ul><li>As I write this presentation, I am listening to Pandora </li></ul><ul><li>Pandora is a music website that </li></ul><ul><ul><li>creates stations based on your taste </li></ul></ul><ul><ul><li>Learns from your reactions </li></ul></ul><ul><ul><li>Lets you share your stations with others </li></ul></ul><ul><ul><li>I’m doing a Swampcast with Tim this month </li></ul></ul><ul><ul><li>Let’s look at the RSS </li></ul></ul>
  9. 9. 6 things about Web2.0 (from Web2.0 for designers <ul><li>Writing semantic markup – transition to XML </li></ul><ul><li>Providing Web Services – moving away from place </li></ul><ul><li>Remixing content – about when and what, not who and why </li></ul><ul><li>Emergent navigation and relevance – users are in control </li></ul><ul><li>Adding metadata over time – communities building social information </li></ul><ul><li>Shift to programming – separation of structure and style </li></ul>
  10. 10. Writing Semantic Markup: Transition to XML <ul><li>HMTL and XHTML are primarly for display </li></ul><ul><li>XML is for data and content </li></ul><ul><li>RSS is a great example </li></ul><ul><li>Semantic markup adds machine readable data to websites </li></ul><ul><ul><li>The Friend of a Friend project “is creating a Web of machine-readable pages describing people, the links between them and the things they create and do.” </li></ul></ul>
  11. 11. Providing Web Services – moving away from place <ul><li>Webservices and API’s let you easily pull data from websites </li></ul><ul><li>Amazon and Ebay are great examples letting you pull tremendous amounts of data from their sites </li></ul><ul><li>Andale is a site that takes eBay data and lets users see what items are hot </li></ul>
  12. 12. Remixing content – about when and what, not who and why <ul><li>Content is moving away from sites </li></ul><ul><li>RSS is one huge vehicle </li></ul><ul><li>Branding data is important. Otherwise, the data becomes anonymous. </li></ul>
  13. 13. Emergent navigation and relevance – users are in control <ul><li>Data is far away from its origins </li></ul><ul><li>Data is read by aggregators, links on blogs, search engines </li></ul><ul><li>Aggregators track what people are doing in a good way, like Digg and Delicious </li></ul>
  14. 14. Adding metadata over time – communities building social information <ul><li>http://www.flickr.com is an example of a website that grows over time using tags </li></ul><ul><li>Dabble is a video sharing community </li></ul><ul><li>The trends we see from the tags that grow over time are fascinating </li></ul>
  15. 15. Shift to programming – separation of structure and style <ul><li>Data winds up far from the source </li></ul><ul><li>XML is the word of choice in Web2.0 </li></ul><ul><li>We’re writing websites for computers more than for peope </li></ul><ul><li>Branding, again, is very important </li></ul><ul><li>Designers have to think beyond presentation and more about syndication </li></ul>
  16. 16. Movietally.com <ul><li>Movietally.com is a great example of a Web2.0 website </li></ul><ul><li>“ Movietally is, simply, a collection of movies. The movies are your movies. They're the world's movies. Catalogue, share, and discover the movies you like! “ </li></ul><ul><li>the founder, 'Hayden', is only fifteen years old </li></ul>
  17. 17. Movietally.com Web2.0 <ul><li>Writing Semantic Markup – Transition to XML </li></ul><ul><li>RSS feeds for 25 most recently added movies which pertain to specific tags </li></ul><ul><li>RSS feeds for 25 most recently added movies by certain users </li></ul>
  18. 18. Movietally.com Web2.0 <ul><li>Remixing content – about what and when, not who and why </li></ul><ul><li>Searches can be mixed with RSS to let people subscribe to content via topic and tag RSS feeds. </li></ul>
  19. 19. Movietally.com Web2.0 <ul><li>Emergent Navigation and Relevance: Users are in Control </li></ul><ul><li>The recommendation feature is based from movies that the user adds. </li></ul><ul><li>The user’s actions of adding, tagging, and whether they recommend powers the site. </li></ul>
  20. 20. Movietally.com Web2.0 <ul><li>Adding Metadata Over Time: Communities Building Social Information </li></ul><ul><li>The metadata for Movietally is tags </li></ul><ul><li>Tags determine popularity, displayed using tag clouds </li></ul><ul><li>Movies may be removed if a certain ration of request removal to times a tag has been added is reached </li></ul><ul><li>The user’s actions of adding, tagging, and whether they recommend powers the site. </li></ul>
  21. 21. Movietally.com Web2.0 <ul><li>Shift to programming – separation of structure and style </li></ul><ul><li>Movietally is all about tags </li></ul><ul><li>Tags make Movietally’s website easily readable to other programs, such as screen scrapers and web crawlers </li></ul>
  22. 22. Weblogs <ul><li>Weblogs are self published websites that people subscribe to </li></ul><ul><li>Aggregators are software that let you subscribe </li></ul><ul><li>RSS and Atom are XML publishing formats </li></ul><ul><li>RSS and Atom in Action, by Dave Johnson is all about this technology. I was the tech editor. </li></ul>
  23. 23. RSS <ul><li>Essentially, the XML in RSS: </li></ul><ul><ul><li>Describes the blog by name, author, date </li></ul></ul><ul><ul><li>Includes an entry title </li></ul></ul><ul><ul><li>Includes an entry </li></ul></ul><ul><li>It looks like this: (here’s a link to the Swampcast RSS http:// www.gatorjug.org/rss.xml </li></ul>
  24. 24. Generating RSS (from RSS and Atom in Action, by Dave Johnson ) <ul><li>package com.manning.blogapps.chapter6.filedepot; </li></ul><ul><li>import java.io.*; </li></ul><ul><li>import java.util.*; </li></ul><ul><li>import com.sun.syndication.feed.WireFeed; </li></ul><ul><li>import com.sun.syndication.feed.synd.*; </li></ul><ul><li>import com.sun.syndication.io.WireFeedOutput; </li></ul><ul><li>public class DepotNewsfeedWriter { //|#1 </li></ul><ul><li>private Depot depot; //|#1 </li></ul><ul><li>public DepotNewsfeedWriter(Depot depot) { //|#1 </li></ul><ul><li>this.depot = depot; //|#1 </li></ul><ul><li>} </li></ul><ul><li>public void write( //|#2 </li></ul><ul><li>Writer writer, String baseURL, String format) //|#2 </li></ul><ul><li>throws Exception { </li></ul><ul><li>SyndFeed feed = new SyndFeedImpl(); //|#3 </li></ul><ul><li>feed.setFeedType(&quot;rss_2.0&quot;); //|#3 </li></ul><ul><li>feed.setLanguage(&quot;en-us&quot;); //|#3 </li></ul><ul><li>feed.setTitle(&quot;File Depot Newsfeed&quot;); //|#3 </li></ul><ul><li>feed.setDescription( //|#3 </li></ul><ul><li>&quot;Newly uploaded files in the File Depot&quot;); //|#3 </li></ul><ul><li>feed.setLink(baseURL); //|#3 </li></ul><ul><li>feed.setPublishedDate(depot.getLastUpdateDate()); //|#3 </li></ul>
  25. 25. Generating RSS (from Dave’s book) <ul><li>ArrayList entries = new ArrayList(); //|#4 </li></ul><ul><li>Iterator files = depot.getFiles().iterator(); //|#4 </li></ul><ul><li>while (files.hasNext()) { //|#4 </li></ul><ul><li>File file = (File) files.next(); //|#4 </li></ul><ul><li>SyndEntry entry = new SyndEntryImpl(); //|#5 </li></ul><ul><li>String url = baseURL + file.getName(); //|#5 </li></ul><ul><li>entry.setLink(url); //|#5 </li></ul><ul><li>entry.setTitle(file.getName()); //|#5 </li></ul><ul><li>entry.setPublishedDate(new Date(file.lastModified())); //|#5 </li></ul><ul><li>SyndContent desciption = new SyndContentImpl(); //|#6 </li></ul><ul><li>desciption.setValue( //|#6 </li></ul><ul><li>&quot;Click <a href='&quot;+url+&quot;'>&quot; + file.getName() //|#6 </li></ul><ul><li>+ &quot;</a> to download the file.&quot;); //|#6 </li></ul><ul><li>entry.setDescription(desciption); //|#6 </li></ul><ul><li>entries.add(entry); //|#7 </li></ul><ul><li>} </li></ul><ul><li>feed.setEntries(entries); //|#8 </li></ul><ul><li>WireFeedOutput output = new WireFeedOutput(); //|#9 </li></ul><ul><li>WireFeed wireFeed = feed.createWireFeed(); //|#9 </li></ul><ul><li>output.output(wireFeed, writer); //|#9 </li></ul><ul><li>} </li></ul>
  26. 26. Generating RSS (from Dave’s book) <ul><li>public void main(String[] args) throws Exception { //|#10 </li></ul><ul><li>if (args.length < 3) { //|#10 </li></ul><ul><li>System.out.println( //|#10 </li></ul><ul><li>&quot;USAGE: DepotNewsfeedWriter &quot; //|#10 </li></ul><ul><li>+ &quot;[depotDir] [depotUrl] [file] [format]&quot;); //|#10 </li></ul><ul><li>return; //|#10 </li></ul><ul><li>} </li></ul><ul><li>String depotDir = args[0]; //|#11 </li></ul><ul><li>Depot depot = new FileDepot(depotDir); //|#11 </li></ul><ul><li>DepotNewsfeedWriter newsfeedWriter = //|#11 </li></ul><ul><li>new DepotNewsfeedWriter(depot); //|#11 </li></ul><ul><li>String depotUrl = args[1]; //|#12 </li></ul><ul><li>String filePath = args[2]; //|#12 </li></ul><ul><li>String format = args[3]; //|#12 </li></ul><ul><li>FileWriter writer = new FileWriter(filePath); //|#12 </li></ul><ul><li>newsfeedWriter.write(writer, depotUrl, format); //|#12 </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  27. 27. Generating RSS (from Dave’s book) <ul><li>(annotation) <#1 Declare newsfeed writer> </li></ul><ul><li>(annotation) <#2 Writes newsfeed of specified format> </li></ul><ul><li>(annotation) <#3 Create feed object> </li></ul><ul><li>(annotation) <#4 Loop to create entries> </li></ul><ul><li>(annotation) <#5 Set entry attributes> </li></ul><ul><li>(annotation) <#6 Set entry content> </li></ul><ul><li>(annotation) <#7 Add entry to collection> </li></ul><ul><li>(annotation) <#8 Add entries to feed> </li></ul><ul><li>(annotation) <#9 Serialize feed to writer> </li></ul><ul><li>(annotation) <#10 Entry point for console invocation> </li></ul><ul><li>(annotation) <#11 Create file depot and depot writer> </li></ul><ul><li>(annotation) <#12 Write depot to newsfeed format> </li></ul>
  28. 28. Mashups <ul><li>A mashup is crested by taking data from more than one source other than the webserver you’re using and combining it to make a collage </li></ul><ul><li>Map mashups are common. </li></ul><ul><li>Google Maps provide a free API to create mashups. It’s all about API’s! </li></ul><ul><li>FlyingCracker.com takes feeds from Colorado Dep’t of Transportation on road condx and dynamically posts them on a map </li></ul>
  29. 29. Mashups, cont… <ul><li>ProgrammableWeb.com is a great mashup resource </li></ul><ul><li>Examples of mashups include: </li></ul><ul><ul><li>ZonTube – Amazon music with YouTube Videos </li></ul></ul><ul><ul><li>OptEvi – entity based navigation </li></ul></ul><ul><ul><li>http://www.hawkee.com/ - Price comparisons from many sources </li></ul></ul>
  30. 30. Clouds <ul><li>A cloud is a collection of data arranged by attribute </li></ul><ul><li>A Tag Cloud is a matrix of metadata tags arranged by frequency of occurrence, for eg. </li></ul><ul><li>Dave Johnson's blog , (JRoller author and RSS and Atom in Action author’s) weblog has a great tag cloud </li></ul>
  31. 31. Tag Cloud <ul><li>apache app atom blogapps blogging conferences family general google humor java javaone links mac microsoft movies music netbeans opensource photos politics roller rss sun triangle vacation webdev webservices wiki </li></ul><ul><li>Each element is a link, size and color determine attributes like frequency </li></ul>
  32. 32. Tag Cloud <ul><li>Displaying a Tag Cloud (From Roller3.1 docs) </li></ul><ul><li>We don't yet include a Tag Cloud macro in Roller because it's so easy to create one yourself.Here's what you do to display a tag cloud for your weblog. </li></ul><ul><li>First,if you have not already done so,customize your theme. </li></ul><ul><li>Next,you've got to get the tags you want to display from your weblog object.For example,to get your most 100 most oftenused tags for all time you'd do this: </li></ul><ul><li>#set($mytags =$model.weblog.etPopularTags(-1,30)) </li></ul><ul><li>Or if you want to only get tags used in the last 90 days you'd do this: </li></ul><ul><li>#set($mytags =$model.weblog.etPopularTags(90,30)) </li></ul>
  33. 33. Tag Cloud <ul><li>Once you've got your tags,you can display them with a foreach loop.For example,here's a loop that displays each tag as a link to your weblog that displays only entries in that tag.It also gives each tag a C class that indicates the intensity of the tag,which indicates on a scale of zero to five how often-used the tag is. </li></ul><ul><li>#foreach ($tag in $mytags) </li></ul><ul><li><a class=&quot;ta s${tag.intensity}&quot;href=&quot;$url.ta ($ta .name)&quot;title=&quot;$tag.count&quot;> </li></ul><ul><li>$tag.name </li></ul><ul><li></a> </li></ul><ul><li>#end </li></ul><ul><li>Include that #set statement and loop in your weblog template and you'll see a tag cloud,but it all the tags will be displayed in the same size and font.If you'd like to vary the size of the tags based on how often they are used, then you'll need to add some C .Edit your C template and add this to size often used tags larger than those less often used: </li></ul><ul><li>.s1 {font-size:60%;} </li></ul><ul><li>.s2 {font-size:80%;} </li></ul><ul><li>.s3 {font-size:100%;} </li></ul><ul><li>.s4 {font-size:120%;} </li></ul><ul><li>.s5 {font-size:140%;} </li></ul>
  34. 34. The Simile project <ul><li>MIT Labs is all about Web2.0 </li></ul><ul><li>Simile is a collection of Web2.0 tools </li></ul><ul><ul><li>Solvent – a Javascript screenscraper generator </li></ul></ul><ul><ul><li>Piggy-bank – view a website’s semantic tags </li></ul></ul><ul><ul><li>Gadget – an XML viewer </li></ul></ul><ul><ul><li>Referree – lets you crawl (see) your referrers </li></ul></ul><ul><ul><li>Many more. All free and mostly beta </li></ul></ul>
  35. 35. Links and stuff <ul><li>Digital Web - Web2.0 for Designers </li></ul><ul><li>Friend of a Friend </li></ul><ul><li>www.swampcast.com </li></ul><ul><li>&quot;The Java Podcasters &quot; </li></ul><ul><li>Web 2.0 by Example </li></ul><ul><li>RSS and Atom in Action, by Dave Johnson </li></ul><ul><li>What Is Web 2.0, by Tim O'Reilly, 9/30/2005 </li></ul><ul><li>RentMyChest is a strange tag cloud </li></ul><ul><li>Current - Google TV – This is user generated web content on TV! </li></ul>
  36. 36. Links and Stuff <ul><li>The Open Gardens Blog – review of Movietally </li></ul>