Category Archives: Category six

JavaScript Critique: The Washington Post

site: http://www.niemanlab.org/2013/07/arguing-for-a-new-genre-javascript-journalism/

Screen Shot 2013-12-09 at 4.45.29 PM

While looking for JavaScript in journalism, I ran across this. This uses JavaScript to build an audioplayer unlike anything that you could do in CSS3 or HTML/CSS. It’s a great visual component to go along with the map since they’re both color-coded.

Looking for the audio player, I found it in a .js file. It looks like this:

function embedWPAudioPlayer(opts) {
 var id = opts.container,
 url = opts.url,
 width = opts.width,
 filetype = url.substr(url.length-3);
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if (plugin || !Modernizr.audio) { //if it has the plugin OR it doesn't support HTML5
 var so = new SWFObject("http://media.washingtonpost.com/wp-srv/graphics/assets/swf/soundplayer_stretch.swf", id, width, "30", "9", "#ffffff");
 so.addParam("id", id);
 so.addParam("name", id);
 so.addParam("allowScriptAccess", "always");
 so.addParam("wMode", "transparent");
 so.addParam("swfliveconnect", true);
 so.addVariable("soundurl", url);
 so.write(id);
 } else if (Modernizr.audio) {
 $('#'+id).html('<audio controls style="width:' + width + 'px;"><source src="'+ url +'" /></audio>');
 }

}

It’s a little hard to understand, but knowing where to find it is pretty useful in case one would want to use it later.

It really adds to the piece since you can actually hear the words being spoken. Without the audio, this story would lose a lot of its value.

Washington Post: Heisman Trophy Tales

WP_above the fold

 

With the college football season winding down, the Washington Post created this cool interactive filter to track the Heisman trophy over the years. The script of note is to the left of the page and it employs a cool accordion affect when selecting different states. They utilized a jQuery plugin pasted below.

/**

* Accordion, jQuery Plugin
*
* This plugin provides an accordion with cookie support.
*
* Copyright (c) 2011 John Snyder (snyderplace.com)
* @license http://www.snyderplace.com/accordion/license.txt New BSD
* @version 1.1
*/
(function($) {
$.fn.accordion = function(options) {

//firewalling
if (!this || this.length < 1) {
return this;
}

initialize(this, options);

};

//create the initial accordion
function initialize(obj, options) {

//build main options before element iteration
var opts = $.extend({}, $.fn.accordion.defaults, options);

//store any opened default values to set cookie later
var opened = ”;

//iterate each matched object, bind, and open/close
obj.each(function() {
var $this = $(this);
saveOpts($this, opts);

//bind it to the event
if (opts.bind == ‘mouseenter’) {
$this.bind(‘mouseenter’, function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//bind it to the event
if (opts.bind == ‘mouseover’) {
$this.bind(‘mouseover’,function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//bind it to the event
if (opts.bind == ‘click’) {
$this.bind(‘click’, function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//bind it to the event
if (opts.bind == ‘dblclick’) {
$this.bind(‘dblclick’, function(e) {
e.preventDefault();
toggle($this, opts);
});
}

//initialize the panels
//get the id for this element
id = $this.attr(‘id’);

//if not using cookies, open defaults
if (!useCookies(opts)) {
//close it if not defaulted to open
if (id != opts.defaultOpen) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else { //its a default open, open it
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
} else { //can use cookies, use them now
//has a cookie been set, this overrides default open
if (issetCookie(opts)) {
if (inCookie(id, opts) === false) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else {
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
} else { //a cookie hasn’t been set open defaults
if (id != opts.defaultOpen) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else { //its a default open, open it
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
}
}
});

//now that the loop is done, set the cookie
if (opened.length > 0 && useCookies(opts)) {
setCookie(opened, opts);
} else { //there are none open, set cookie
setCookie(”, opts);
}

return obj;
};

//load opts from object
function loadOpts($this) {
return $this.data(‘accordion-opts’);
}

//save opts into object
function saveOpts($this, opts) {
return $this.data(‘accordion-opts’, opts);
}

//hides a accordion panel
function close(opts) {
opened = $(document).find(‘.’ + opts.cssOpen);
$.each(opened, function() {
//give the proper class to the linked element
$(this).addClass(opts.cssClose).removeClass(opts.cssOpen);
opts.animateClose($(this), opts);
});
}

//opens a accordion panel
function open($this, opts) {
close(opts);
//give the proper class to the linked element
$this.removeClass(opts.cssClose).addClass(opts.cssOpen);

//open the element
opts.animateOpen($this, opts);

//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by “,”
id = $this.attr(‘id’);
setCookie(id, opts);
}
}

//toggle a accordion on an event
function toggle($this, opts) {
// close the only open item
if ($this.hasClass(opts.cssOpen))
{
close(opts);
//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by “,”
setCookie(”, opts);
}
return false;
}
close(opts);
//open a closed element
open($this, opts);
return false;
}

//use cookies?
function useCookies(opts) {
//return false if cookie plugin not present or if a cookie name is not provided
if (!$.cookie || opts.cookieName == ”) {
return false;
}

//we can use cookies
return true;
}

//set a cookie
function setCookie(value, opts)
{
//can use the cookie plugin
if (!useCookies(opts)) { //no, quit here
return false;
}

//cookie plugin is available, lets set the cookie
$.cookie(opts.cookieName, value, opts.cookieOptions);
}

//check if a accordion is in the cookie
function inCookie(value, opts)
{
//can use the cookie plugin
if (!useCookies(opts)) {
return false;
}

//if its not there we don’t need to remove from it
if (!issetCookie(opts)) { //quit here, don’t have a cookie
return false;
}

//unescape it
cookie = unescape($.cookie(opts.cookieName));

//is this value in the cookie arrray
if (cookie != value) { //no, quit here
return false;
}

return true;
}

//check if a cookie is set
function issetCookie(opts)
{
//can we use the cookie plugin
if (!useCookies(opts)) { //no, quit here
return false;
}

//is the cookie set
if ($.cookie(opts.cookieName) == null) { //no, quit here
return false;
}

return true;
}

// settings
$.fn.accordion.defaults = {
cssClose: ‘accordion-close’, //class you want to assign to a closed accordion header
cssOpen: ‘accordion-open’, //class you want to assign an opened accordion header
cookieName: ‘accordion’, //name of the cookie you want to set for this accordion
cookieOptions: { //cookie options, see cookie plugin for details
path: ‘/’,
expires: 7,
domain: ”,
secure: ”
},
defaultOpen: ”, //id that you want opened by default
speed: ‘slow’, //speed of the slide effect
bind: ‘click’, //event to bind to, supports click, dblclick, mouseover and mouseenter
animateOpen: function (elem, opts) { //replace the standard slideDown with custom function
elem.next().stop(true, true).slideDown(opts.speed);
},
animateClose: function (elem, opts) { //replace the standard slideUp with custom function
elem.next().stop(true, true).slideUp(opts.speed);
},
loadOpen: function (elem, opts) { //replace the default open state with custom function
elem.next().show();
},
loadClose: function (elem, opts) { //replace the default close state with custom function
elem.next().hide();
}
};
})(jQuery)

What matters 2 us: jQuery, JavaScript

When you first get to this website, “What Matters 2 Us,” you see a navigation bar on the left side and then a grid of slightly opaque photos. As soon as you hover over a photo, the navigation bar disappears and the whole screen shifts right to bring just the photos into view. When you hover over a photo a caption pops up which is practical, but I think the bouncing animation is a bit distracting. what mattersWhen you click on a photo, a smaller window pops up with an individual video and accompanying text. From there you can click back to the main photo grid to choose a new story, or you can click the arrows in the upper left corner to scroll to the next story. I think this is a great use of variety in the navigation because it gives users multiple ways to access the stories. last bulletThis site uses jQuery and JavaScript. Here is an example of some of the coding it uses:

JavaScript:java jQuery:jquery

 

 

jQuery and JavaScript: Too Young To Wed

Too Young To Wed was a project by National Geographic, with focus on child marriage around the world. I like this website because it’s a good combination of photos, text, videos, and SNS. Creators of the site put all the information in one big page, then allowed the visitors to navigate elements across different pages using one sidebar.

Screen Shot 2013-12-09 at 3.38.04 AM

This is first page that pops up when opening the site link. When scroll down a little bit…

Screen Shot 2013-12-09 at 3.38.15 AM

the main photo stays, but a new block of text shows up and eventually covers the main photo.

While looking through the page’s codes, I could hardly see HTML code. Instead, I found a long list of jQuery and JavaScript codes, such as these:

 

 

Screen Shot 2013-12-09 at 3.37.20 AMScreen Shot 2013-12-09 at 3.37.52 AM

 

I’m guessing the website also used jQuery for iPad users, since one of the codes is specifying iPad plugin in jQuery. And with JavaScript, the creators made the scrolling down and fixed images possible. When clicked on blue links next to <script src>, each link took me to JavaScript-specific comments such as var.

Honestly, it was hard to understand every code for this website because there are so many different JavaScript and jQuery comments. But I think this website used two systems very well for great reader usability: a reader can look through the main story of this website just by scrolling down, which is very convenient.

The Guardian’s “NSA Files Decoded.”

Link to the site: http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded#section/1

The Guardian took an in-depth look at what Edward Snowden’s leaks means to the viewers. The site is composed with plenty of quality videos of experts explaining the issue within a long, vertical reading page.

There are multiple features I like about this site, including the clean design and layout, as well as multiple multimedia elements used to present the story and data. But the most interesting one is the videos that automatically plays when you scrolled to it.

Screen Shot 2013-11-13 at 2.13.54 PM

Screen Shot 2013-11-13 at 2.14.18 PM

I found the related javascript in the site’s code:

<script type=”text/javascript” src=”http://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video-js/video.js&#8221; id=”js-gia”></script>

And the matching HTML begins from something like this:

Screen Shot 2013-11-13 at 2.39.51 PM

I think this java technique is really useful to learn. Although not everybody likes auto-play videos, but such feature sometimes makes the site more alive.

 

NPR interactive story: Okkervil River

The site I chose to talk about is NPR’s Okkervil River: Coming of Age in Small Town America, a feature story about Will Sheff.

屏幕快照 2013-11-12 下午10.06.53

This story consists two pages: one is a regular page that include text, audio, and a overall look at the map. Once users click the map, it guides the users to another page, which is an interactive map.  

屏幕快照 2013-11-12 下午10.07.13

This interactive map use the audio as the cue to guide users to different parts of the map, illustrating Sheff’s memory throughout his life in Meriden. When different scenes/locations come up, a series of pictures will appear at the bottom, which is clickable. And there’s a spotlight effect throughout the story: when the audio cues a location, the browser guides users to that location with a spotlight highlighting the area.

屏幕快照 2013-11-12 下午10.32.47

Users can also manipulate the scenes by changing the audio section at the top of the page.

NPR uses a track web page javascript and several other javascript to create the effect.

屏幕快照 2013-11-12 下午10.10.39

I don’t really get the entire purpose of this javascript, but I guess it allows all the zoom-in-and-out on the map.

I think the site is quite high-tech. But it’s gonna be better if the audio also follows users’ clicks on maps. This is going to make the map more interactive and effective. So far it’s good but not perfect.

Responsive Timeline

http://www.nytimes.com/interactive/2013/07/13/nyregion/nyc-noise-timeline.html?ref=multimedia#/#time228_7605

This is a quite straightforward story – a timeline for the war of noise in the Big Apple. The thing I particularly love about this story is its responsive design.

The timeline starts from 1905, with the little gray dot on the left.

Screen Shot 2013-11-12 at 10.23.11 PM

As you scroll down, you can view the content from different periods.  But the gray dot also follows your movement. When I was browsing the content of the 1950s, the gray dot has moved to the middle.

Screen Shot 2013-11-12 at 10.26.28 PM

By looking into the source, I found that this effect is achieved by a javascript that creates a path for the dot.

I really like how considerate the design is. It is really convenient for the readers to follow where they are. Especially if it’s a timeline, it helps you keep better track of the order of incidents and have a better idea of how things progress.

Actually the responsive design is the only obvious interactive design. And I definitely think it’s necessary and not distracting at all.

 

_________________________________________________________________________

Also I found an absolutely amazing one also in NY times, it uses panorama view of the house of Syrian Refugees, just like the Google Street View. It actually uses flash plugin. Just want to share with you guys~

http://www.nytimes.com/interactive/2013/09/05/world/middleeast/Syrian-Refugees-in-Lebanon.html?ref=multimedia&_r=0

Screen Shot 2013-11-12 at 10.11.39 PMAt first glance, this picture is just an ordinary one, but wait until you click the “Click and Drag” icon on the bottom right. It is actually a panorama of the house, just like Google Street View. You can see the other walls, the ceiling and the floor. It’s just like you are standing in the room with them.

Screen Shot 2013-11-12 at 10.15.52 PM Screen Shot 2013-11-12 at 10.15.16 PM