Website Development

The graphic novel will be online. We decided from the begining that the artwork displayed on the website would take up most of the screen. To achieve this I used CSS to scale the images to the full size of the window. To change from page to page in the story I used Jquery.  I used the anything slider Jquery plugin to create a slider that could contain any type of html/flash/images so on. http://css-tricks.com/anythingslider-jquery-plugin/ this allows the user to view each page full screen and change to the next page using the keyboard arrows or the arrows on screen.

In the introduction page the logo appears in the sky with clouds the move when the mouse is moved creating a motion parrallax. This was created using Jquery.

As part of the website an extra hidden infographic which can only be seen if the user finds all the hidden objects throughout the story. This was done using variables and click counters.

The infographic shows LRA activity since the date of the last day in the story, the 20/1/2012. The infographic involves a custom twitter feed that collects all tweets from @CrisisTracker only since the 20/1/2012. This was difficult to do as twitter only allows you to retrieve 20 most recent tweets. An array, Jquery and looping through each batch of tweets, getting the id of the last one and getting the next batch using that id and displaying all tweets since the id.

The lracrisistracker.com became a useful resource for getting information and numbers of abductions and more. A visual representation of the number of abductions since the 20/1/2012 and since 2009 is also included in the infographic using Umapper and self made visuals.