New Layout Design

I’ve found that my original wireframe layout does not allow for me to create thumbs which can include links, due the use of the absolute element and overlapping. Instead, I have decided to try a column approach. 

This will allow to create the same visual aesthetic.

The basic div layout of one side of the timeline for this is:

<leftDivContainer>
<leftLineContainer><leftThumbLine1 />
<leftThumbLine2 />
<leftThumbLine3 />
<leftThumbLine4 />
</leftLineContainer>
<leftColumn1>
<leftThumb1 />
<leftThumb3 />
</leftColumn1>
<leftThumb2 />
<leftThumb4 />
<leftColumn2>
</leftColumn2>
</leftDivContainer>

(Sorry, I can’t indent on Tumblr)

The leftLineContainer is positioned absolutely and behind the divs, with a different z index. It holds the horizontal lines that connect to the main line.

Re-doing CSS

CSS styling and appropriate spacing is very important here and since my original layout had a few issues with it’s display as the page went down. (One side was longer than the other and therefore dates did not line up exactly) I have decided to perfect this. It felt like I was in grade 8 maths again, working out the missing lengths!

Hover Functionality

In addition, I’ve implemented hover functionality, so that when a thumb is hovered over, the date is displayed.

Date Changing Functionality

At the moment, I have implemented a current day function, which retrieves the current day, month and year to determine what day should be specified in the API request calls.

However, part of my proposed idea was to allow users to skip to a date they want.  Remembering back to another unit I had previously completed, HTML form functionality, using the get method, should allow me to achieve this. Trying this out with a simple textbox, I refreshed the day to return index.php?day=02&month=05&year=2012 Using a get method within my PHP code, I could then use these values to determine the start date to return output for.

I have later changed this output method to a more user-friendly select (drop down) form elements and implemented javascript verification to ensure that the dates chosen as valid. (Including checking for leap years!)

Timeline Dates

Similarly, I have improved my dateson the timeline itself, ensuring that the last day returned for the month is correct (eg. 31 for January, 30 for November)

Integrating with The New York Times and YouTube

New York Times

Output from the New York Times API is only available in JSON format. Something I had not previously encountered and slightly different to XML, meaning I couldn’t simply copy my Flickr code. 

The NYT API Request Tool was very helpful in generating a request and after some Googling, trial and error with code, I managed to get the outputs I was after!

Integrating the output with my site was much easier this time, as only a small bit of the code needed to be changed and I simply called a function to insert a news article (while the other called a function to insert an image). 

The NYT API is only a beta release and I found that it occasionally threw funny errors that I haven’t been able to work out and therefore unable to catch and handle. Hopefully in future releases of it, this won’t happen! The warning messages for these have been suppressed, but at times they stop the rest of the page from loading. I’m not sure what I can do about this…

Youtube

YouTube’s request results were generated in XML format, although a little more complex than the Flickr results and I wasn’t sure how to access the tag I wanted, as a few had the same id. A little bit of Googling allowed me to access the tags I was after. Integrating again was a piece of cake!

Random Generation

I realised that I needed a function to randomly generate a number, so that the boxes would be randomly populated. PHP’s built in random number generator proved useful here. I used it, along with dividing the number by 3 or 5 to check determine which output was to be generated. I wanted my timeline to be primarily filled with pictures as they were the most accurate, likely and to be least filled with videos as the methods for searching youtube meant that inaccurate results were more likely than the other two. Overall, the random generation code was:

$randomNumber = rand();

if ($randomNumber%3 == 0) {

insertNews($day, $month, $year);

} elseif ($randomNumber%5 == 0) {

insertVideo($day, $month, $year);

} else {

insertImage($day, $month, $year);

};

Dealing with no data

Unfortunately, it was unavoidable that at times, no output could be found (particularly for older dates). For each of the insertion functions, if nothing could be found, they were directed to another, however, if nothing could be found at all, then a message saying this is displayed.

Integrating with the Flickr API

Linking my page to the Flickr API is my first (and possibly hardest) milestone. Once I get this one perfect, I think it will be much easier to get the Youtube and News APIs in there!

I’ve gone with PHP with this. Not entirely sure why.. maybe because I once did an assignment with Javascript and didn’t really like it..

I’m going to incrementally update this post as I go…

Initial Output

So far, I’ve managed to get the output to work! I’ve used a loop which makes calls to the API and within each iteration changes the decrements the day. I will eventually need to work on changing months, but that’s for later.

Output within different divs

I’m not working on outputting the pictures to the different div boxes I’ve created. I’m working on a test page and what I’m getting the code to do is within a loop, output a different box depending on a count value. For example, if count = 4, the code will echo <div class=box4>. There are 8 different boxes and when the counter reaches 8, it changes back to 1. It’s working a treat and now to get it to work with my actual page, which is going to prove quite tricky as the boxes are to be nested within different div containers.

echo “<script type=’text/javascript’>$(‘#leftTopDiv’).append(“

echo “$content”

echo “’)</script>”; 

And! After quite a bit of fiddling… It works!

There’s a bit of layout issues, but I plan on getting to this later…

Incremental Development

I believe that incrementally developing my mash-up website will ensure that I have a polished and working site by the due date. I plan to undertake the following tasks in this order:

1. Develop basic layout of the site
2. Integrate Twitter API
3. Integrate Youtube API
4. Integrate News API
5. Links to original sources
6. Change the date functionality
7. Hover functionality
8. Develop layout for individual day pages
9. Change links to individual day pages
10. Individual day pages - add main item
11. Individual day pages - add sub items

Possible Resources for Development

Timeline 

A widget that allows you to create interactive timelines. I will probably not use this, but they have their source code freely available and I may examine it for some inspiration!

http://www.simile-widgets.org/timeline/

Yahoo Pipes

Allows for a mash-up from different resources. I could use this to filter resources…? 

Inspirational Sites

Phylotaxis

“Where science meets culture. The individual beads of the Phylotaxis represent an ever-changing zeitgeist of science news, populated automatically every few hours by a program that scours online news sources and blogs that focus on science.”

http://www.phylotaxis.com/

——

News on a Timeline

“The RSS data from various news sources such as Google News and Reuters is aggregated and then displayed on a Timeline widget. Uses the MIT Simile timeline.”

http://news.alexeysmirnov.name/

——

TimeTube

“Shows YouTube videos on an interactive timeline based on keywords you enter, e.g. Barack Obama or Chocolate Rain.”

http://www.dipity.com/mashups/timetube/

——

Facebook Timeline

Although not a mashup site, the general structure of Facebook timeline and how it is coded to generate a clean, but varied layout, could be a source of inspiration.

(Source: programmableweb.com)