Joern's Blog

After we decided last week to switch to the facebook.com API, we did in the last couple of days a lot of progress.

Andre already prepared the google map.
Thomas did an outstanding job with the facebook.com API.
I (Joern) was so kind and battled with CSS (especially with the stupid box model for IE / FF) and built the layout for the main page and integrated Andre's map and Tom's facebook work.

Here you can find our current draft of our "Map Your Buddies" service.

If you have a facebook account, click on the top right hand side on "login" (allow pop ups ;) at least this one...) to login to facebook. After that you will see the facebook-buddy-id's and when you scroll down a bit, you will see all your buddies and some of their information (currently without hometown) in this popup.

The pins on the Google Map are currently coordinates from a static xml file.

Tomorrow we will meet and discuss, how we will format the buddies hometown locations and process them using for Google map.

The target for our iteration one is still:
Show the facebook buddies on their hometown locations.

More information on Wednesday in the Weekly Presentation by Andre ;)

-Joern

Concerning Bud's comment to "Team Project Progress – “Map Your Buddies"

"Looks good so far. The one thing I'd say is to make sure that people can just arrive at the page and know what to do. Does the facebook api allow you to authenticate to facebook? It would seem it would have to for this to work."

1.) Yes, right now, users probably don't know what to do. But currently we will first work on the technical issues and in a later step we will develop the usability...

2.) When clicking on the top right hand side on "login" you have to sign in to facebook (in the popup window) for your authentication (facebook user + pw). Without authentication you can't see your buddies.

-Joern

As requested, here is our "Team Project Infos" Box on my blog (2nd from top) with links to

• MapYourBuddies Posts
• Current Project Progress
• D'Germanz Site

Btw @ Bud: What about my proposed "Team Projects Posts Box" for the Learning Remix Winter 2007.
Could we have such a box?

-Joern

Concerning Bud's question/comment

Is the authentication "via the API though? I checked it out but couldn't figure it out."

Yes, the authentication is done via the facebook API. The login procedure is here very good described.

Clicking on the button executes the following code:

<a href="http://api.facebook.com/login.php?api_key=YOUR_API_KEY&next=

YOUR_PATH_RELATIVE_TO_CALLBACK_URL"><img src="http://static.ak.

facebook.com/images/devsite/facebook_login.gif"></a>

We - Andre ;) - will demonstrate this on Wednesday in the Weekly Progress Presentation.

-Joern

Hi all (IS696),

Bud "outsourced" a little task to me.

Could you please post your official "TeamTag" (that you use for your team project posts) and please trackback to this post. Then I will prepare this "Team Projects Posts Box" and Bud will put it onto Learning Remix Winter 2007.

E.g. our "TeamTag" is "MapYourBuddies". Posts tagged with "MapYourBuddies" can be found here.

Thank you!
-Joern

Today we met and discussed "change requests" for the current version of our team project.

Also, we discussed the next steps for next week.

Thomas will change the (login) page flow in this way, that (after a successful login) our main page is loaded (without buddies) and with an "onload" JavaScript a request for the buddies to a PHP-script is done. This PHP-script returns the facebook buddies as xml stream. So that we finally have all buddies as xml data in the request object. After that (status 4 / 200) we call a JavaScript that runs two other JavaScripts. One is to display the buddies (Joern & Thomas) and the other one is to display the pins on the Google Map (Andre). Furthermore I will modifiy the layout --> see "change requests" ;)

For far ... more infos like always on Wednesday ;)

-Joern

Well, honestly, I am a kind of formula one (F1) fan. This season (2007) they will have races on 17 different race tracks (worldwide).Furthermore, I am honestly not that good in geography, thus sometimes I have to look up, where the current race takes place...

Now my guess is, that some other formula one fans have the same trouble and don't know where e.g. "Bahrain" is located.

My Mini-Project was born: "Formula One Tracks & News" on one page, showing all the race tracks worldwide on a Google Map along with some additional and always current F1 News.

More details, tonight in the presentation ;)

Anyhow, to get started, I built my first iteration, that loads the 2007 race calendar from a text file (csv) located on my server. Then a second JavaScript replaces the text in a div box with the content from the text file. "That's all about" ;)

As project tag I chose "F1Tracks&News".

Questions will be answered in the presentation - or just trackback ;)
-Joern

Hi André,

concerning your mini project post:

I guess, you missed the "mini" folder in your path ...we get a 404 not found ;)

so am i right, that this is your path: "follow the link"

;)
-Joern

Hi Bud, and who ever wants to have the "IS696 Team Project Posts" Box (see here) on it's own blog, here is the source code for the widget.

Just create a new module e.g. Widget: IS696TeamProjectPosts (same procedure like with the sitemeter.com counter ... see Bud's handout from the first class)

and paste the following code into the "Module Body":

<div class="module-archives module" id="is696teamprojectposts">
<h2 class="module-header">IS696 Team Project Posts</h2>
<UL class="module-list">
<LI class="module-list-item"><a target="_blank"
href="http://learningremix.net/w2007integ/learningremix/tags/ajacs">
AJACS</a></LI>
<LI class="module-list-item"><a target="_blank"
href="http://learningremix.net/w2007integ/learningremix/tags/hacknmash">
HackNMash</a></LI>
<LI class="module-list-item"><a target="_blank"
href="http://learningremix.net/w2007integ/learningremix/tags/isasitemashup">
ISASiteMashup</a></LI>
<LI class="module-list-item"><a target="_blank"
href="http://learningremix.net/w2007integ/learningremix/tags/mapyourbuddies">
MapYourBuddies</a></LI>
</UL>
</div>

Finally, it should look like the 3rd widget box on my blog.

Bud will post this widget box as well on the Learning Remix Winter 2007 page.

If you have any problems with that, let me know!

-Joern

Concerning Juweria's Zip File Question:

FYI: what wikipedia says to a zip file...

I personally use the Windows XP build in zip function:

Select/Highlight in the Windows Explorer your files that should go into the zip file.
Right Mouse Click on one of the selected files
"Sent to" or similar - sorry for the German Windows ;)
"zip compressed folder" or similar

Finally a zip file should appear in the same folder ;)
Thats all about...

Another good freeware zip tool is TugZip.
-Joern

You do not work with Google Maps in your Mini- or Team Project?
But you want to get an idea how Google Maps works?
You have 20min time?

--> Try this "Integrating Google Maps into Your Web Applications" Tutorial, that provides on 3 pages the essentials of GMaps.

I need the Google Map for my Mini-Project (Mini-Project: Formula One Tracks & News) and so I though, lets get started with the first race track in Melbourne.

And this is the result after 20 minutes.

And here in live (temporarily).

Isn't it amazing?

-Joern

@Bud:

"The Melbourne Grand Prix Circuit is a street-based circuit around Albert Park Lake, only a couple of kilometres south of central Melbourne. It is best-known for holding one race of the Formula One season, the Australian Grand Prix."

To give Formula One "Newbies" some background information, I plan to integrate wikipedia links to each track. Here the Melbourne example that will later appear in the "info cloud" on the Google Map.

After the quick success yesterday, I thought about my next steps for my Mini-Project:

• I will create a xml file with all necessary information about all 17 race tracks.
• I will create the layout (my favorite div boxes with CSS... I' love it) for the page.
• Build the HTML/CSS/Layout for the Google Map "cloud" with the race track information that should be displayed.
• I will read chapter 4 and 4.5 (DOM) and maybe chapter 6 (XML requests and responses)
• Requesting the race track xml file via JavaScript and get the xml into the request object (into the xml response property)
• Build a JavaScript loop, that creates for each race track a pin using the xml data in the request object / xml property.
• Build a JavaScript loop, that creates for each race track an entry in the race track list on the HTML page using the xml data in the request object / xml property. (Using insertion functions of the DOM ? ... lets see, how this will work)
• Integrating the RSS feed box (right now: I have no clue about that ;) ... lets see)

Ideas for Iteration 3:

• Maybe building a JavaScript, that highlights the next race track in the list (based on the race date) and focus the google map to this race track.
• Adding weather information for this race track
• Adding a count down until the next race.

So far ... thats the strategy ;)
Let's start with point one ...
-Joern

How yesterday in my mini-project strategy mentioned, I first needed to create a XML-File with all the Formula One Race Tracks.

And I was thinking about an easy way to create this file ... I was thinking about ... repeating data structures and about easy maintenance of the data... and finally I though, OK, why not using my favorite standard tool - that is in 99.99% of the cases a solution ;) - MS EXCEL ;)

This is very simple to do with the "=Concatenate(cell01, cell02, cell03, ...)" build in function that can build text strings.... or several small and then one large XML string!!!

The advantages of this way to create the xml file is that you have a nice Excel Sheet and the cells with the data are separated from the cells with the xml tags. Moreover when you link the tag cells, you can always just change the names of the xml tags in one place. And the maintenance - in my case of the race track data - is very simple, because you can edit the data directly without searching in an endless xml string.

Anyhow, one picture says more than thousand words: Therefore here how it looks:

I have just uploaded my FormulaOneRaceTracks2007ByJoern.xls file. Basically you can just copy the cell "A2" and paste it into an empty editor and save it as a *.xml file. This should than look like my FormulaOneRaceTracks2007ByJoern.xml file.

If you need to create your own xml file, feel free to use my xls file as a starting point ;)

I found that this was a pretty easy way to create a XML file ;-)

And maybe what can save a lot of time is, when you "validate" your xml file FIRST, BEFORE you start using it with AJAX and getting error messages (because the xml file has bugs!!!).

A good validation service is for example validome.org. There you can choose as well, that your xml file is only validated concerning the "Well-Formedness". This is what I used and this is the validation result for my xml file.

Regarding my Mini-Project, you see, I have collected already all my data. Now the next step is to build and layout the page, where I can integrate this data.

-Joern

Chidambaram wrote:

"In response to Joern's blog ...What prevents you from using a regular XML editor ...for example XML Operator is one free xml editor that I know and used a lot. There are many more available free on the web. With these tools, you can also verify your xml file as well-formed or validate it against a dtd / schema if you need to."

Well, basically nothing prevents me from using a regular XML editor, but for me it was just the question, if I should search, download, install and discover a new tool or just using my favorite MS Excel (where I already knew, how to build strings together). And honestly, the validation wasn't a problem at all... when you know, how a XML file looks like ;)

Anyhow, I think this is more a question of what everybody personally prefers. I prefer in this case my Excel Solution. And then I thought, maybe somebody - who knows MS Excel as well - could be inspired... Thats what my blog post was all about ;)

btw: you tagged your post with one HUGE tag: "create F1Tracks&News file miniproject progress xml" ... I think, you just forgot the commas in the tag field... maybe you could just edit your post and add the commas, then we can see all posts together ...

-Joern

Regarding the Iteration 1 Blog review, here you can find our MapYour(Facebook)Buddies Project.

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

How to use our mashup:
1.) go to the MapYour(Facebook)Buddies site.
2.) hit the "facebook" button/image
3.) A facebook (http://api.facebook.com/login.php) pages follows
4.) Sign in with your facebook user name and password
5.) The page with the map that shows the home locations of your buddies should be loaded

Note: Currently we still struggle with special characters in the facebook home locations. So, if one of your friends uses special characters in his/her home location field in facebook, the map / page couldn't be loaded. We will fix this until the next iteration. Sorry for this eventual inconvenience. For the case that you can't load the page or don't have a facebook account, it should look like this.

For the next iteration we also want to display your buddies in the list right of the map. Moreover the pins should include some more information about your buddies. Iteration one was only the start ;)

Concerning our project, Bud posted today "Map Your Buddies Catching a Trend?"

The whole story about our mashup can be found here.

The Iteration One Presentation can be viewed here. PDF (1.2 MB)

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

-Joern

Concerning Raymond's Question:

"but can someone explain to me why I only get a link and one line of 'news' with my RSS reed. Take a look at what I have done so far. http://people.emich.edu/rcata/IS449MainProject/RSSNews/news.html"

On your page I tried to see your "epicurious.com" feed. (1st note: They offer several feeds: see http://www.epicurious.com/services/rss/summary)

Then I was looking on the web, which source you are using... I think this is the feed you display first:

I think, you don't get "one line of 'news' with my RSS reed" ... this one line is only the description or header of the feed. (see image above and the last one... it's the same text)

Now concerning your question: Am I right, that you want to display the content of the feed like this?

I don't know, which url/xml you use, but if you use this rss feed url: http://www.epicurious.com/services/rss/feeds/dailydish.xml ... then you should get this xml file ... BTW as tip: RMC on the orange "xml" image and then "Save Link As" ... then you can open the xml file locally with the IE... that should look like this:

If you are using this rss feed url: http://www.epicurious.com/services/rss/feeds/dailydish.xml
you can see, that you display stuff from the "xml file header" (green box) ... but what you want to display are the "xml file items" (red boxes) ...

So final question from my side: which rss feed url are you using ... or are you using several rss feed url's ???

-Joern

Bud already posted "Map Your Buddies Catching a Trend?"

In Addition to that, I read today on programmableweb.com some more interesting reasons, why “Social-Networking Sites Open Up” (BusinessWeek.com article) and offer API's.

These are mentioned in the Coming Soon: Social Network APIs article:

• To grow the user base
• Social-Networking Site developer can never provide all applications [the users want]
• Branding
• Traffic
• Revenue growth

-Joern

Here is my review for the HackNMash Team Project:

The url I used for my review is http://people.emich.edu/rschwartz/696/pwp/pwp.html (Retrieved 02/16/07)

Strengths:
I guess, they will come with the Google Calendar ;)

Weaknesses:
How Joy already pointed out, I would really change the color combination.

What was confusing to me, when I clicked on the main page on "Events" (in the Navigation) that I came to a whole new page and the navigation bar disappeared... (especially because all other "pages"/infos were displayed on the same page ... only the events not.)

And coming form the very deep blue main page to the very light event page was a kind of surprising to me. My personal opinion is that ALL pages should have one "look & fee" (like a corporate identity).

I guess, you will fix the trouble with the logo:

So far, then I am looking forward for your iteration 2.

-Joern

Hi Jeffrey,

I saw, that Chidambaram already

"suggest using a table, with 2 cells in the first row and one cell in the second row, with a colsppan attribute value of 2. You can still have your div tags within the cells, to use those DOM methods. This will get 2 of your divs side by side and one div below."

That's in general a way to do it, but then I remembered a VERY COOL AND USEFUL WEBSITE, that tells you "Why tables for layout is stupid" ...

After you read this page, you will know ;)

Anyhow ... concerning your question ...

"The problem is that the div's don't automatically flow from left to right but rather below each other. We want to be able to position two divs side by side and another div below the the first div. In order to get the two div's side by side, we used float positioning. This works fine for the two side-by-side divs, but the third div (the one we want below) wants to snuggle in between the those two"

I think, everything, what you need to do is to "clear your floats":

For my footer I used this CSS format. That works fine (The third box comes then under the two other boxes (because of the "clear: both;" property). So try to format your 3rd box with this "clear" attribute. Here is my example code:

#footer { 
  width: 100%; 
  height: 25px;
  font-size:10px; 
  clear: both;
}

And concerning your last question

"Has anyone found any good examples on CSS positioning"

Good luck and let us know, if this is working!
-Joern

Here is my review for the AJACS Team Project:

The url I used for my review was http://people.emich.edu/ckandaswa/project/integrated_virtualindia_index.html (Retrieved 02/17/07)

Strengths:
Bringing together flickr pictures with the Google Map and offer favorite tourist locations right from the scratch. That provides tourist that have never been in India before, a very good starting point. I guess you will add some more attractions to make it more valuable ;)

Weaknesses & Comments:
How Praneeth already pointed out,

"I was just wondering what would the locate button in your website do when I type in the city name"

Moreover I don't really understand what's the purpose of this search box ... is it just to locate a city ? (because I guess that not each city in India has a "major tourist attraction") ?

Unfortunately I couldn't find anywhere a hint what's the purpose of your whole project. But as far as I can remember ... it was an India Tourist Guide... am I right?

When it is an India tourist guide, then all what I (personally) would do on this page is to have a look for tourist attractions and probably won't search for other cities.

Anyhow, maybe a technical issue with your site: I have a resolution of 1400 x 1050 and your page looks like this:

I wonder, how this would look like with a much lower resolution (lets say 1024 x 768). Maybe you should make your map a little bit smaller.

Now my last point. I personally don't like it that the flickr picture layer cross-fades the tourist attraction list (OK, its technically possible... but there is a lot of empty space above where you could display the images as well ... thus you could see the attractions list along with the pictures...

But all in all, I really like your project idea !!!

Go ahead and I am looking forward for your iteration 2 ;)

-Joern

Here is my review for the ISASiteMashup Team Project:

1st Note: Maybe you should add the "Iteration1Review" and the "Iteration1Site" TAG to your announcement post... according to BUD's "Iteration 1 Blog reviews" Guideline!
Right now, your project is NOT listed as a "Iteration1Site" here.

The url I used for my review was http://people.emich.edu/pvuppala/finalproject/Final1%5b1%5d.html (Retrieved 02/18/07)

But let's start with the review:

Strengths:

Chidambaram & Jeff already posted a couple of strength that I share, too !

Except of the "Provision to save individual items" that
Chidambaram mentioned as 2nd strength. I have no clue, what he means with that. When I search e.g. "Mc Donalds" than a list with Ypsi McD's is displayed. When I then insert "Panera Bread" into the search box and hit enter ... the McD's disappear and the Panera Bread Marker is displayed ... is your site supposed to "save individual items" ???

Weaknesses & Comments:

Honestly, currently (at least in iteration one) I can't see the value that your "mashup" adds. - Sorry ;)
But when I compare your current iteration lets say I am looking for a "Panera Bread" Branch in Ypsilanti, MI ... I get this:

Here is the same (with the same "Panera Bread" Branch in Ypsilanti, MI ) using Google Local Search ....

I guess you know, what I mean. But I am sure, you will add some more features, that finally add the value to your application in iteration two.

Then I think, I have to wait until your iteration 2 is released ;)

-Joern

Here is a list with all projects and my reviews to that:

IS696 Teams:

• HackNMash Iteration 1 & my review
• AJACS Iteration 1 & my review
• ISASiteMashup Iteration 1 & my review
• MapYour(Facebook)Buddies Iteration 1 & my announcement

IS449 Teams:
Next week I am going to review the IS449 projects (as far as they are listed here as a "Iteration1Site") and add this to this list, too.

<ToBeUpdated> ;)

-Joern

Here is my review for the WhereIsMyCaffeineCom Team Project:

The url I used for my review was http://people.emich.edu/dphipps1/www2/index2.html (Retrieved 02/19/07)

Strengths:
Basically, I totally agree with all comments, that Jeff already pointed out.
Very good job! Looks professional, is informative and already very well integrated (for Iteration 1) with Google Maps.

"Weaknesses" & Comments:
I aggree with Chidambaram that

"The list of coffee places and the google api would be more user firendly if they are side by side. Even after maximizing the browser window I am not able to see the full list and the google map at the same time. Even resizing the map would be beneficial."

"Data is stored in an xml page."

I really thought... WHO WILL MAINTAIN AND UPDATE this "hard coded" data (opening hours) from hundreds of stores on a regular base?
My recommendation is: Instead of hard coding the opening hours, offer a link to the webpage, where the opening hours are mentioned. (Because you have absolutely no control, when the stores change their opening hours).

But all in all, I really like your project and the execution !!!

Go ahead and I am looking forward for your iteration 2 ;)

-Joern

Here is my review for the MyFavoritePlaces Team Project:

The url I used for my r