哥伦比亚中文学校

hkhkljkljljkjbjhgjkj

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)

ReverbNation: hovering media player

RN_homepage

One of my favorite music for finding featured free music is ReverbNation.com. It’s got a very clean design with plenty of white space and I love the greyscale color with the red-orange highlights. When it comes to CSS techniques, the media player at the bottom of the page is a really clever element. It allows the user to start a song then scroll elsewhere on the page while keeping that song playing. If they want to stop the song, skip ahead or back, all the controls are right there at the bottom of the page.

RN_below the fold

 

The user can even navigate to a new page in the reverbnation.com domain and keep the song playing, giving the user a lot of freedom. But all of that is way over my head. When it comes to the simpler CSS implementation, I like that they tacked it at the bottom of the page instead of the top. The top of your browser window is already dominated by your browser navigation, URL, your tabs, and ReverbNation’s own page header.

RN_media player

By thinking to put the media player at the bottom, it’s still in the familiar horizontal layout like we expect from iTunes et al., but it stays out of the way so the user can focus on material on the page. It’s a really clever design principle to consider when working on future designs.

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

 

 

Helpful Design: The New York Times

Site link: http://www.nytimes.com/interactive/2013/04/14/nyregion/mayoral-candidates.html

For my first webpage, I utilized the style of a New York Times article that was doing something similar. Instead of profiling a Task Force, this article was profiling the mayoral candidates of the election in the city. Here’s the main page:

Screen Shot 2013-12-09 at 4.23.38 PM

Now my original plan was to emulate the entire style of the site, character profiles and all. Instead I ended up emulating the design, making my site include mugshots with white backgrounds (we worked with the resources we had) and keeping things minimalistic. 

Another design choice I picked up was this:

Screen Shot 2013-12-09 at 4.23.53 PM

 

It may be hard to tell from the screenshot, but the site is essentially as long as there are candidates. So you don’t actually navigate to different pages when looking through the page. I did the same with mine, though I believe that the way the NYT did theirs was a little more effective having code that made the page-loading much more efficient than mine. 

I didn’t include maps on my site either, which is a shame but I don’t think we had access to regional information for each candidate. It would have been interesting to show where each Task Force member lived or knew within Columbia.

Still, emulating the NYT’s style left me with a site I was happy with. 

Living Galapagos: Video background

The interactive site, Living Galapagos by the University of North Carolina at Chapel Hill uses  CSS to create a video background to add a subtle but interesting touch.

galapagosAlthough you can’t see it in this screenshot, the background is actually a moving image. I’m not sure if it’s a video or .GIF or how it works, but the waves, leaves and lizards all move. I think this is a fun touch that makes the website come to life. Here is the HTML and CSS:html

css

Both the HTML and CSS look relatively simple. You just add a “div class=video-background.”

The box that holds the first video is transparent, but when you click the play button the video loads and is viewed at full opacity. If you click “Stories” on the navigation bar, a similarly transparent menu pops up where you can choose other videos to watch.  If you click “Learn,” you see an interesting mix of infographics and social media and most interestingly, two games that are designed to help users learn about the Galapagos.

I love how this site uses good design and many different kinds of “junits” – there is text, video, photos, infographics, tweets, Instagrams, and more.