Joern's Blog

Concerning our MapYourBuddies Project, André, Thomas and I met last Sunday and discussed the next steps.

Our current issue, where we (or better Thomas ;) ... ) is working on is to build a php file that gets the login information from the browser (XHR with parameters), processes them, accesses facebook, gets the friends xml data and finally forwards the xml data to the browser's request object back. The tricky part here is that facebook requires some login informations etc.... But more infos tomorrow ;)

Anyway, according to the Iteration 1 reviews, I just created the first draft of a welcome page for our MapYourBuddies application.

Furthermore I have updated our MapYourBuddies Wiki.

Now my next task is to create the friends list functionality (Basically accessing the xml friends list data in the browser's request.response property and add friend by friend to the webpage - of course by using the DOM methods ;) ...)

OK, enough talk for now, let's start ;)
-Joern

After 5 hours night shift yesterday, I finished the first version of the friends list that is currently based on a static XML file on my server. André did yesterday also a night shift to use the same XML file to add the Google Map pins to the map. Finally we merged our work today and here is our current version of MapYourBuddies. (including the welcome page, but still using a static friends xml file from the server.) Thomas was and is working on the php script that should deliver in the next iteration the user specific friends xml data from the facebook api.

After this hard week, our TODO-List is now a little bit smaller; but still huge ;)

So far the update from the MapYourBuddies Project.

Like always, more infos in the weekly presentation tonight ;)
-Joern

While I was catching up my news feeds from the Winter Break, I found this interesting article on blog.programmableweb.com: "Social SQL with FQL: the Facebook Query Language".

Now Facebook offers in addition to the API another data access mechanism: the Facebook Query Language. This allows you for example to access data in this format:

SELECT name, pic FROM user WHERE uid=211031 OR uid=4801660

And even more complex queries are possible:

SELECT name, affiliations FROM user
WHERE uid IN ( SELECT uid2 FROM friend 
               WHERE uid1=211031)
AND "Facebook" IN affiliations.name AND uid < 10

Or:

SELECT src, caption, 1+2*3/4, caption, 10*(20 + 1) 
FROM photo
WHERE pid IN ( SELECT pid FROM photo_tag 
               WHERE subject=211031) 
AND pid IN (   SELECT pid FROM photo_tag 
               WHERE subject=204686) 
AND caption

And the best thing is, you get the results back as XML stream !!!

More Details can be found in the Facebook documentation. And FQL exampels can be found here.

I thought this might be an interesting addition to Bud's Post "Map Your Buddies Catching a Trend?" ;)

-Joern

Hey Guys,

I just read the article "Google Maps - Send to BMW" on http://googlemapsmania.blogspot.com/ and thought: WOW, THIS IS A REAL MASHUP !!!

Here a quick movie ... isn't that unbelievable?

And of course, "Made in Germany" ;)
-Joern

After we presented the first draft of our Friends List in the weekly progress presentation this week, I have fixed some "appendChild" issues in the implementation and added some more DOM elements.

Furthermore I have applied some CSS and "nice effects" to the Friends List. In the current version I have used a "alert" javascript. Later, this javascript should "call" the Google Map and recenter/focus it to the "clicked" entry in the Friends List.

Also, I have added some CSS that the Friends List DIV Box is now "scrollable"
and not endless long.

Actually, this is how it looks after I "pimped" it a little bit ;)

So far, thats the progress from today ;)
-Joern

Well, after a whole while of working only for our MapYouBuddies Team Project, I started yesterday to "recover" my Mini Project (Project Description and Iteration 1 Announcement) and started to build the layout of my site.

After I finished the first draft of the layout, I started to play around with the php proxy that should get a formula one rss feed and displays that in the page. It took me 2.5 hours, but finally it is working now.

So the first of 3 things for Iteration 2 is done. Now I will start to work on the 2nd step - To get my tracks.xml file into the trackslist.

Basically this is my progress so far:

Wow, thats one point less on my TODO's -List ;)

So, than I will start NOW and let you know, when I made some progress!
-Joern

Yesterday, I got the rss feed working. After that and today I was working on the Google map and the track list with all 17 formula one tracks of the 2007 season. Honestly I fought a while with the stupid Google Map in the IE7. The problem was that the requirement says that you should use a different event handler than "onload". I though, OK for testing purposes just move the rss and tracklist call functions into a "script" element into the buddy:

<body onload="load()"
      onunload="GUnload()">

and within the buddy:

<script type="text/javascript">
  readfeedXML();
  readtrackXML();
</script>

Everything worked fine (with FF), UNTIL I was loading the page in IE7. IE7 told me, he couldn't find the map object ... but FF could ??? Anyway, after a couple of hours try & error & googeling I read something that lead me to the test to load the "load()" function TOGETHER with the "readfeedXML()" and the "readtrackXML()".

<body onload="load();readfeedXML();readtrackXML()"
      onunload="GUnload()">

And that was the whole problem with the IE7 ... I could have killed IE7 ;)

So, I fixed this problem and now all the functional requirements that I planned for Iteration 2 are included:

Tomorrow, I will update the layout a little bit and add some more CSS and than Iteration 2 will be launched ;)

So far the Update.
-Joern

As I read the headline from Tom's post ("Web 2.0's global traffic dilemma") I had to remember a quote from one of our Professors "Words are a trap".

This is because as I scanned over the tons of posts, Tom posted yesterday, I read the headline ("Web 2.0's global traffic dilemma") and thought ... OK, that's an old discussion about traffic issues, I read already a lot in the past. Anyway after I scanned over all headlines I came back and though, lets read it quick ... BUT to my surprise this "traffic dilemma" was more about financial / advertising issues for website/service provider.

I expected more a discussion about the internet infrastructure and the problems with "The video-heavy, much vaunted Web 2.0 advances" like mentioned in the "Information Super Traffic Jam" article (from Phil Kerpen 01/31/07) on http://www.forbes.com.

Anyway, I think both articles are very interesting (even if I am personally more concerned about the "infrastructure" discussion than about the financial / advertising issues for website/service provider")!

So finally our Professor is right again: "Words are a trap". ;)
-Joern

How Tom already mentioned, now the "Facebook session key finally works!".

After we took this major step in our MapYourBuddies Project, now here is what we plan to do next:

Andre and Thomas

• Develop the "Hashtable in JavaScript" Integration to fix the "Same Location Info Window" issue on Google Maps
• Integrate more info like email or instant messenger links to the info window.
• Modify/adopt the creation of the Google Map Pins XML parsing (see Toms Post) to the new xml structure

Joern:

• Modify/adopt the friends list xml parsing (see Toms Post) to the new xml structure
• Build a new XHR to request "my data" and then replace the favorite "welcome[user.name]" with the actual name ;)
• Integrate the logout button and call Tom's php script that handles the logout procedure
• Develop some preliminary demo account pages for iteration 2 reviews
• Integrate Eventhandlers into the Friends List to call the Google Map

So far our next steps ...
-Joern

After fighting a while with CSS & Co I completed my "Formula One Tracks & News" Mini-Project.

Actually it is pretty much exactly what I planned to build (after iteration one):

The Plan:

Vs

The Actual Result:

You can access my Mini-Project here.

The Audience are still Formula One Fans that:

• Gets a map, where they can see where the 17 different race tracks are on the world
• Gets additional information per race track. E.g. Circuit Name, Official Grand Prix Name, Hyperlinks to the Official Grand Prix Website, Wikipedia Race Track Info and to the official Race Track Layout
• Gets the latest F1 News in addition to that

More information will be presented tonight ;)
-Joern

Hi all,

according to our "MapYourBuddies Status Update" from yesterday, we are working on the "Same Location Info Window issue on Google Maps".

The challenge is the following:

You see, I have two friends in Karlsruhe, Germany. In the first loop we create the marker for "Stefan Daenzer" and in the second loop we create the marker for "Christian Scheurer". Now obviously the marker from Christian superpose the marker from Stefan. (Basically on the map you can't access the Marker and Info Window from Stefan)

We thought about 2 possible solutions:

The main idea is to give a user the possibility to leaf through / run over the different Info Windows of his/her friends in this one location. So that we offer in each Info Window (were more than 1 friend is located) a "<<< previous" and "next >>>" link. Something like this:

The question is now, how to realize this. Therefore we already discussed two theoretical solutions:

1) Having only one marker with one info window on the map and replace the content of the info window dynamically with JavaScript (I guess this should be possible). So that we first show Stefan in the Info Window and after a click on "next >>>" we replace the text in the info window with the infos from Christian.

2) Having several markers with several info windows on the map (were several friends "share" one location) and create for each friend one marker on the map (and the markers superpose each other, thus you only can see the last "generated" marker/friend). With a click on "next >>>" we would try just to "re-focus" to a different marker (in this case we would than focus Christian's marker/info window) thus you can click on his marker (because this marker comes up through the focusing).

Now the question for you:

• Do you have a similar issue either in your Team-Project or in your Mini-Project?
• If yes, did you and how did you solve this issue?
• Which of our two proposals would you recommend?

Thanks for your feedback!
MapYourBuddies
-Joern

While I was reading something about the German CEBIT I came to this interesting web 2.0 article that "CEOs Grapple with Web 2.0" is discussing for example that

"This is the next major shift in technology. It will last 15 years -- but it's the next five years that will decide which enterprises will thrive and take advantage of the new tools," he said at the CEO Vision Forum, an event on the sidelines of the Cebit show in Hanover, Germany.

Also I may recommend the "The World’s Leading Web 2.0 Resource" website. The cool thing on this site is that when you load the page, on the left hand side webcasts about Web 2.0 start playing. Moreover this site has very interesting categories like:

• WEB 2.0 JOURNAL TOP STORIES
• WEB 2.0 LATEST NEWS
• WEB 2.0 LATEST STORIES

For "The Germanz" under us, here is an interesting (German) video clip from the CEBIT opening with the question " "Web 2.0" - was ist das eigentlich?" ;)

-Joern

After the iteration 2 presentations on Wednesday, I thought again about iteration 3 for my Formula One Tracks & News Mini-Project.

Finally I decided to adjust the scope for iteration 3 a little bit. Thus now I plan to add the following features for iteration 3:

Basically these are the 3 major features for iteration 3 ;)

• "Connect" Tracks list and Google Map
• Highlight and focus the next racetrack + focus GMap InfoWindow
• Add "zoom in to racetrack level" function to race track InfoWindow

-Joern

Hey guys, did you know that the AJAXWorld Conference & Expo 2007 starts on Monday?

"On March 19-21, 2007 over 1,000 developers, architects, IT managers, and software professionals of every stripe will be converging in New York City to attend the East coast AJAXWorld Conference & Expo -- the most comprehensive meeting on the most significant technology subjects of recent times: AJAX, Rich Internet Apps & Web 2.0."

More Infos & Details can be found @ http://www.ajaxworld.com/

And while I was looking around on this page I came up with this interesting video clip (33:09 minutes ... so be patient while the clip is loading ... ) about "Web 2.0, AJAX & SOA Power Panel with Jeremy Geelan"

I thought, this might be interesting to you, too.
-Joern

2 days ago, I was looking around for some news from the CEBIT (Hanover, Germany) and wrote my "Cebit show in Hanover, Germany & CEOs Grapple with Web 2.0" blog post.

Today ... so just 2 days later ... I "googled" a bit ("CEBIT GERMANY "WEB 2.0" AJAX") if there are more news available ... and guess what, my blog post was the first hit ... I think that's crazy that even google visits our blog posts that often ...

Did somebody else found current "learningremix blog posts" in Google?
-Joern

Yesterday I worked a little bit on my TODO list for iteration 3 of my Formula One Tracks & News Mini-Project.

Actually I worked on the "Highlight and focus the next racetrack + focus GMap InfoWindow" mentioned in my "Formula One Tracks & News - Iteration 3 - Adjusted Scope" blog post.

To highlight the next race, I needed to calculate the smallest difference between today and the upcoming racetracks (+ all the possible exceptions). Actually I used this very useful GERMAN - sorry for that ;) - "JavaScript - Beispiele: Datum und Uhrzeit" tutorial to get started.

And this is my nice JavaScript function, that highlights the next upcoming racetrack:

// global Variables used in checkNextRace funcion
var difsmall	= -9999999999999999999999999;
var t1 		= new Date();
var tday 	= t1.getDate();
var tmonth 	= t1.getMonth();
var tyear	= t1.getUTCFullYear();
var today 	= new Date(tyear, tmonth, tday);

and

function checkNextRace(racedate,nn_a)
{
  var month 	= racedate.substring(5,7);  
  var day 	= racedate.substring(8,10);
  var year 	= racedate.substring(0,4);  
  var month	= month-1;  
  var rday 	= new Date(year, month, day);  
  var difcur 	= today - rday;     
if(difcur > difsmall && difcur <=0)
  {
    nn_a.id = "current";
    difsmall = difcur;
  }
}

This tiny JavaScript is the reason, that e.g. today (03/19/07) the "04/08 - Sepang International Circuit" is marked/highlighted (because it's the next race track):

Furthermore I decided NOT to "focus the next racetrack + focus GMap InfoWindow" because I like it more to see all racetracks, when loading the page.

So far the status update from my Formula One Tracks & News Mini-Project.

If you have any questions, feel free to trackback or refer to my work in progress version.

-Joern

Hi Juweria,

thanks for your - late ;-) - review.

Just some comments concerning your review.

"It almost looks like login page for the real running site"

It is the login page from the real running site ... the login procedure is handled by facebook. From our initial page we redirect to "http://www.facebook.com/login.php?next=home.php&api_key=apikey". After facebook authenticated you, you will be forwarded to our MapYourBuddy page again ...

"I was bit concern about the privacy of the information given on the login page. Maybe there should be all terms listed so users know what they agree to once they login."

Basically, when you "Login to Facebook to enjoy the full functionality of MapYourBuddies", you agree with the standard facebook terms of use and the standard facebook privacy police. This links are provided in the login screen at the bottom.

"Thanks for providing actual picture of the website for people who don't have an actual login - I like the layout and the pop up window showing the picture. I am sure people with facebook accounts will find it real easy to see where their actual buddies are located."

I hope I clarified some of your concerns and look forward for your Iteration 2 Review.
-Joern

After Andre and Thomas did an outstanding job getting the facebook api working and integrating the Google Map with the friends list, I started yesterday working on THE very famous "Welcome! [user.name]" in our header of the page.

Actually I do now another XHR to retrieve the user data (from the user that is signed in) from a php proxy - Thanks to Thomas! ;) - and use this information to replace the div with the "Welcome! [user.name]" text with this DOM method:

divheader2.replaceChild(new_h1, h1welcometxt);

Furthermore I created a DEMO Account page that is actually using exactly the same "architecture/framework" (and CSS and JavaScript files) like the main page (that uses the customized data according to the sign in information.)

Basically the DEMO Account can be accessed from our MapYourBuddies Welcome Page or just click on this preview image:

So far the latest developments before the Iteration 2 presentation.

-Joern

Hi all, here are some information for the MapYourBuddies Iteration 2 Review:

The purpose of this mashup is that after you signed in to facebook, you will see your facebook buddies (based on their home location) on a Google Map.

According to Bud's post, PLEASE use for your review:

• this 2 tags: "Iteration2Review, MapYourBuddies"
• and title your post maybe as "MapYourBuddies Iteration 2 Review by <Name>"

For the case, that you don't have a Facebook Account, just use the DEMO Account that is also linked from the welcome page.

Here you can access the Iteration 2 of our MapYourBuddies project.

The Iteration 2 Presentation can be accessed here. PDF (1.2 MB)

For Iteration 3 we plan to:

• Enrich the Google Map Info Windows (Layout/Design)
• Highlight buddies in the friends list, where no appropriate location is stored and no marker is displayed
• Add some Amazon articles into the Google Map Info Window, according to the friend's facebook music information

If you have any trouble or problems to access our mashup, feel free to trackback ;)

MapYourBuddies
-Joern

After we presented yesterday evening our Iteration 2, we planned today the next steps until we got all your reviews.

So this is what we plan to realize this week:

Thomas

• Adding the „current location information“ from Facebook to the php-request (thus we will have the information available in the xml response object)
• Improve “Google Map Marker creation process” (thus only ONE marker per location is created)

Andre

• Add second tab to Google Map Info Window and display the music information from Facebook as text
• Explore the Amazon API and do testing with it

Joern

• Try to fix the Google Map Info Window sizing problem
• Add more information to the Google Map Info Window

Now, enough planned, let's start ;)
-Joern

Here is my review for the AJACS / Virtual India Team Project:

The url I used for my review was http://people.emich.edu/jvaradar/integratedvi.html (Retrieved 03/23/07)

Actually, I started my review by clicking on the provided link, and this page loaded:

Honestly, after the page loaded, my first thought was: And what am I supposed to do now? For what is this page? ... It's just a empty map from India ...

Weaknesses & Comments:
Anyway, I would consider this as a "weakness" of your project. May I recommend that you preselect a city, thus the user can see immediately something after loading the page. - Just my thought.

Also I would maybe consider to display the weather forecast (or at least a link to that) in the Weather Tag Info Window. (And not only the current ) ... Moreover I think a forecast would make more sense than the current weather - for the purpose of planning ...

Without a doubt, your RSS feed offers potential for some CSS style improvements ;)

Also, I personally don't like, that when I click on an attraction (in the Info Window), that the list is superposed with the pictures in the Info Window. I would like it more to see, when you click on this attraction list and the RSS feed gets replaced with the pictures - There is just more space for pictures than in this tiny Info Window. - My opinion ;)

Strengths:
What I found really cool is that after I selected a city from the drop down menu that there where this whole bunch of actions like:

• The Map is moving to the location
• The Info Window appears and offers a list with atttractions
• Some RSS News are displayed appropriate to this location
• You can choose the Weather Tab in the Info Window to access the current weather condition - how already mentioned: a forecast would be more useful ;)

All in all, this is a very nice combination of very different information!

I am looking forward for your Final Iteration!
-Joern

Short before we finished the Iteration 2 of our MapYourBuddies project, I recognized that the welcome page crashes in IE7.

After hours of try & error I finally got it fixed and also updated the text/content for the Iteration 3 / Final Delivery Scenario.

As it turns out, this is a bug in the Internet Explorer and so I had to create a "CSS switch" that applies special/additional style sheets when the browser is an IE.

<!--[if gte IE 7]><style type="text/css" media="screen">/* 
  <![CDATA[ */ @import url(css/ie7.css); /* ]]> */</style>
<![endif]-->

But of course it would have been to easy, if it would have worked in IE7 AND IE 6 ... therefore, here we go with part 2 :

<!--[if lte IE 6]><style type="text/css" media="screen">/* 
  <![CDATA[ */ @import url(css/ie6.css); /* ]]> */</style>
<![endif]-->

I can tell you ... I love CSS and my special friend IE ;)
-Joern

How we already mentioned in the Iteration 2 Presentation of our MapYourBuddies project, we struggled - like some of you guys, too - with the "Google Map Info Window sizing problem". Basically the issue is to display an image in a Google Map Info Window (and the image is "loading to late" / takes longer than the JavaScript needs to run) and to size the Info Window to the right dimension.

This is the issue in our Iteration 2:

And this is now how it already looks at the first load of the image with some CSS (and DIV) help ;)

The basic problem is that in some cases, the JavaScript runs faster (and creates the Info Window) than the image could be loaded (from facebook). As result does the browser not know, how much space he should plan for the image and therefore the Info Window is sometimes generated to small.

My solution to this problem is, because I know from the Facebook API documentation that our pictures we get from there are not higher than 75px.

"pic_small - URL of user profile picture, with max width 50px and max height 150px. May be blank."

Therefore I just designed the Info Window HTML with 3 <div> boxes and formated them with CSS ("height: 75px;"). Also I added the city, state and country information to the Info Window (Therefore I needed to do some JavaScript string conversions ... puh: that was fun ;)

And the issue was fixed ;)

-Joern

What you guys will probably point out in the Iteration 2 reviews of our MapYourBuddies project is that when there is a friend in the friends list who doesn't have stored his/her hometown location in facebook (in an appropriate way e. g. only "MI, USA" or not at all) then currently you can click on the name and just a JavaScript error occurs:

markers[id] has no properties

[Break on this error] 

markers[id].openInfoWindowHtml(listelements[id]); 

To solve this issue I analyzed our current structure and basically we need to merge/integrate/redesign our "create Google Map Marker & Info Window" function with the "create Friends List" function.

Honestly, I guess, I need to rewrite huge parts of the "create Friends List" function to make it work and using the results from geocoding to decide if a "Friends List Entry" should be click able or not (and if not than highlighting this entry).

Anyway, this is a known issue and I probably cannot work on it until the end of next week ... But I am sure, you will mention it in your iteration 2 reviews ;)

- Just that you know, that we already know this issue :)))

-Joern