The Guardian Explains its Javascript Interactive
Time once was that interactives were created in Flash. Now, not so much. Javascript frameworks allow quick, rich, interactive deployment of data sets with all the whizz bang animation and movement users could want as they explore content.
The Guardian notes this, and gives a nod to Apple’s well-known refusal to support Flash on its mobile devices, as they explain how they put together their interactive on how British soldiers have died in Afghanistan.

The original Flash version fetched data from an XML document. The updating process was fairly long-winded, requiring a developer to update the XML then upload it along with new images. Now, journalists can update a public Google Spreadsheet and use existing editor tools to upload appropriate images. They then publish the spreadsheet and the application fetches a JSON object from the spreadsheet’s Atom feed on page load, resulting in live updates with no involvement from anyone on the development team…
…The JavaScript used is fairly straightforward; get data from the Atom feed and parse it to create the markup. We have a JavaScript carousel object which controls the pagination and use lazy loading to display the full size image of the soldiers to try and cut down on the number of initial HTTP requests.

Nice work.

The Guardian Explains its Javascript Interactive

Time once was that interactives were created in Flash. Now, not so much. Javascript frameworks allow quick, rich, interactive deployment of data sets with all the whizz bang animation and movement users could want as they explore content.

The Guardian notes this, and gives a nod to Apple’s well-known refusal to support Flash on its mobile devices, as they explain how they put together their interactive on how British soldiers have died in Afghanistan.

The original Flash version fetched data from an XML document. The updating process was fairly long-winded, requiring a developer to update the XML then upload it along with new images. Now, journalists can update a public Google Spreadsheet and use existing editor tools to upload appropriate images. They then publish the spreadsheet and the application fetches a JSON object from the spreadsheet’s Atom feed on page load, resulting in live updates with no involvement from anyone on the development team…

…The JavaScript used is fairly straightforward; get data from the Atom feed and parse it to create the markup. We have a JavaScript carousel object which controls the pagination and use lazy loading to display the full size image of the soldiers to try and cut down on the number of initial HTTP requests.

Nice work.

  1. dingsebomsen reblogged this from futurejournalismproject
  2. futurejournalismproject posted this