Posts tagged with ‘JavaScript’

Your Single Page CSS and JavaScript Scrolling Animation for a Cause Site of the Day
Every Last Drop is a single page Web site by Waterwise, a UK NGO focused on water issues, to demonstrate how and where you can conserve water on a daily basis.
Earlier today we posted on repetition in Web design so count this among the ways to do it better.
Our sophisticated internal critique of the site ran something like this:

Michael: You want to see something neat. [Sends URL]
Jihii: Oh my God, I can’t even take this, it’s so cute.
Michael: It’s…
Jihii: Oh my God, I love this little man.

Sophistication, FJP style.
Image: Partial screenshot, Every Last Drop. Select to Embiggen.

Your Single Page CSS and JavaScript Scrolling Animation for a Cause Site of the Day

Every Last Drop is a single page Web site by Waterwise, a UK NGO focused on water issues, to demonstrate how and where you can conserve water on a daily basis.

Earlier today we posted on repetition in Web design so count this among the ways to do it better.

Our sophisticated internal critique of the site ran something like this:

Michael: You want to see something neat. [Sends URL]

Jihii: Oh my God, I can’t even take this, it’s so cute.

Michael: It’s…

Jihii: Oh my God, I love this little man.

Sophistication, FJP style.

Image: Partial screenshot, Every Last Drop. Select to Embiggen.

YouTube Does the Harlem Shake

There’s no escaping it.

Nifty bit of programming though.

The Magazine Experience on the Web
Over on theFJP.org, EJ Fox explores how news organizations are taking advantage of responsive design, CSS and JavaScript techniques not just to make things pretty, but to better tell their stories.
For example, he takes a look at the New York Times’ recent and well regarded Snow Fall: The Avalanche at Tunnel Creek. As he explores its presentation, he writes:
Its graphics and videos stretch to fill the entire browser window, an emerging design trend that is the true successor of the magazine’s full-bleed photos. The Times shows that when you elevate beautiful art that’s telling the story in a seamless way, it becomes greater than the sum of it’s parts. Compare to a similar NYT story where pictures are included with the story, but certainly not featured with any love.
It’s not confined to the style of the rest of the NYT site, which is for the most part a static 975px width. Some of the impact of full-bleed pieces like Snow Fall comes from the contrast between those special features and the whitespace of the primary site. It’s a clue to the user to dig in, and that something special is going to happen.
Read through for the rest, including how Web presentation and storytelling design affected EJ’s reporting on Occupy Oakland.
You can follow EJ on Tumblr at Pseudo Placebo. On Twitter he’s @mrejfox.
Image: Screenshot, Snow Fall: The Avalanche at Tunnel Creek, via the New York Times. Select to embiggen.

The Magazine Experience on the Web

Over on theFJP.org, EJ Fox explores how news organizations are taking advantage of responsive design, CSS and JavaScript techniques not just to make things pretty, but to better tell their stories.

For example, he takes a look at the New York Times’ recent and well regarded Snow Fall: The Avalanche at Tunnel Creek. As he explores its presentation, he writes:

  • Its graphics and videos stretch to fill the entire browser window, an emerging design trend that is the true successor of the magazine’s full-bleed photos. The Times shows that when you elevate beautiful art that’s telling the story in a seamless way, it becomes greater than the sum of it’s parts. Compare to a similar NYT story where pictures are included with the story, but certainly not featured with any love.
  • It’s not confined to the style of the rest of the NYT site, which is for the most part a static 975px width. Some of the impact of full-bleed pieces like Snow Fall comes from the contrast between those special features and the whitespace of the primary site. It’s a clue to the user to dig in, and that something special is going to happen.

Read through for the rest, including how Web presentation and storytelling design affected EJ’s reporting on Occupy Oakland.

You can follow EJ on Tumblr at Pseudo Placebo. On Twitter he’s @mrejfox.

Image: Screenshot, Snow Fall: The Avalanche at Tunnel Creek, via the New York Times. Select to embiggen.

Visualizing Voting for the 2012 Ballon d’Or

Lionel Messi won the Ballon d’Or earlier this week as the world’s best soccer (nay, fútbol) player, the fourth year in a row he’s been awarded such.

As ESPN’s Soccernet explains, voting is divided among national coaches, national team captains and media throughout the world.

Ramiro Gómez took the voting data to show how the voting network looks and works:

Messi received 41.60% of the voters’ points followed by Cristiano Ronaldo (23.68%), who did not seem to enjoy the ceremony that much, being 2nd for the 2nd time in a row and Andrés Iniesta (10.91%), who came in 3rd.

The above visualization shows the network of votes of the Ballon d’Or 2012. Voters and voted for players make up the 524 nodes of the graph. Node size is based on indegree. The 1513 edges are based on the given votes, with each of the voters having three votes: 1st place 5 points (thickest line), 2nd place 3 points, and 3rd place 1 point (thinnest line). Node color indicates either being a captain (red), coach (violet), journalist (blue), or player who did not vote (green).

The voting data is retrieved from this PDF document — I can hardly imagine a worse format to publish data. The graph file was created with a Python script and preprocessed using the Gephi visualization platform to apply a Fruchterman-Reingold layout with some manual adjustments as well as node sizing and coloring. The interactive version is rendered with the JavaScript library sigma.js.

Bonus, Part 01: Adidas’ lovely animated tribute to Messi’s accomplishments.

Bonus, Part 02: A 10-minute tribute to Messi’s record-breaking 91-goal season.

Images: Screenshots, Ballon d’Or 2012 Votes Network, by Ramiro Gómez. Select to embiggen.

Mozilla Releases Popcorn Maker

Via Journalism.co.uk:

Mozilla has released Popcorn Maker 1.0, which allows journalists to create web-native video that includes real-time tweets, Google maps, images and more.

Popcorn Maker allows users to drag and drop video from YouTube or Vimeo or audio from SoundCloud and then add other other elements such as images, tweets and links to content on the web. For example, tweets that include a hashtag can be added and will be automatically updated with new tweets containing that hashtag after the video is published.

For those with coding skills, there is a Javascript library called Popcorn.js, which was launched at last year’s MozFest.

After watching the videos and poking around a bit, Popcorn Maker feels like Storify but with a video wrapper.

Visit the site to how it’s been used. For example, this story on New York’s Stop and Frisk laws; this neighborhood tour that mashes up Google Maps and Wikipedia; or this remix of a TED Talk. 

If Hemingway Wrote JavaScript
Twitter’s Angus Croll imagines what Hemingway, Shakespeare, Breton, Bolano and Dickens would do with JavaScript.
On Hemingway (screenshot above) he writes:

No surprises here. Code reduced to its essentials with no word or variable wasted. It’s not fancy; maybe its even a little pedantic - but that’s the beauty of Hemingway’s writing. No need for elaborate logic or clever variable names. It’s plain and its clear and it does what it has to - and nothing more.

The goal of the script is to create a Fibonacci series (a string of numbers where each number is the sum of the two that precede it).

If Hemingway Wrote JavaScript

Twitter’s Angus Croll imagines what Hemingway, Shakespeare, Breton, Bolano and Dickens would do with JavaScript.

On Hemingway (screenshot above) he writes:

No surprises here. Code reduced to its essentials with no word or variable wasted. It’s not fancy; maybe its even a little pedantic - but that’s the beauty of Hemingway’s writing. No need for elaborate logic or clever variable names. It’s plain and its clear and it does what it has to - and nothing more.

The goal of the script is to create a Fibonacci series (a string of numbers where each number is the sum of the two that precede it).

Share of Websites that Use jQuery
Pingdom reports that the JavaScript library jQuery is used by over 54% of the top ten thousand sites in the world. The numbers drop when we get into the top 100, they suggest, because Google owns about 20% of those (eg., Google and all its country specific flavors, YouTube, Blogger, etc.) and those sites don’t use jQuery.
Note that Google, Microsoft and Media Temple all host jQuery for public use on their respective CDNs. The upside is that when you use these resources — instead of hosting jQuery on your own — it’s often likely that the scripts are already cached in a visitor’s browser so site performance will quicken.
Pingdom Blog, The Web loves jQuery, and here are the numbers to prove it. 

Share of Websites that Use jQuery

Pingdom reports that the JavaScript library jQuery is used by over 54% of the top ten thousand sites in the world. The numbers drop when we get into the top 100, they suggest, because Google owns about 20% of those (eg., Google and all its country specific flavors, YouTube, Blogger, etc.) and those sites don’t use jQuery.

Note that Google, Microsoft and Media Temple all host jQuery for public use on their respective CDNs. The upside is that when you use these resources — instead of hosting jQuery on your own — it’s often likely that the scripts are already cached in a visitor’s browser so site performance will quicken.

Pingdom Blog, The Web loves jQuery, and here are the numbers to prove it

A Finely Curated List of Data Tools
A fantastic resource for getting started in — and advancing — your work with data from some of the best in the business.
Via Datavisualization.ch:

Datavisualization.ch Selected Tools is a collection of tools that we, the people behind Datavisualization.ch, work with on a daily basis and recommend warmly. This is not a list of everything out there, but instead a thoughtfully curated selection of our favourite tools that will make your life easier creating meaningful and beautiful data visualizations.

As Benjamin Wiederkehr writes on their blog, “It includes libraries for plotting data on maps, frameworks for creating charts, graphs and diagrams and tools to simplify the handling of data. Even if you’re not into programming, you’ll find applications that can be used without writing one single line of code.”
FJP Pro Tip: Jump in and start playing. If you’re just getting started, check out our short videos with Bitly data chief Hilary Mason for her advice on working with data.

A Finely Curated List of Data Tools

A fantastic resource for getting started in — and advancing — your work with data from some of the best in the business.

Via Datavisualization.ch:

Datavisualization.ch Selected Tools is a collection of tools that we, the people behind Datavisualization.ch, work with on a daily basis and recommend warmly. This is not a list of everything out there, but instead a thoughtfully curated selection of our favourite tools that will make your life easier creating meaningful and beautiful data visualizations.

As Benjamin Wiederkehr writes on their blog, “It includes libraries for plotting data on maps, frameworks for creating charts, graphs and diagrams and tools to simplify the handling of data. Even if you’re not into programming, you’ll find applications that can be used without writing one single line of code.”

FJP Pro Tip: Jump in and start playing. If you’re just getting started, check out our short videos with Bitly data chief Hilary Mason for her advice on working with data.

Timeline 

I’ve been playing with a delightful timeline creator developed by Zach Wise, a multimedia producer and Associate Professor at Northwestern University’s Medill School.

Called Timeline, the open source software was created as a project within the Knight News Innovation Lab, has support for media types such as Twitter posts, photos from Flickr, video from YouTube and Vimeo, audio from SoundCloud and Google map embeds.

Timeline creators use JSON for authoring or — and this is very clever — enter data into a Google spreadsheet and Timeline will pull it from there. On Twitter, Wise suggests a Timeline plugin for WordPress is coming soon. — Michael

The Timeline Web Site | Download Timeline from GitHub.

Images: Timeline screenshots showing a few types of content types that can be used.

Tumblr provides interface for users to view image metadata.

Personalizing News for 700 Million People a Day 
Yahoo’s created a visualization about reading habits of the more than 700 million people that visit its sites each day.
Via ReadWriteWeb:

Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…
…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.

To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).
Via Yahoo:

Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.

The interactive visualization was created with JavaScript, HTML5, and CSS3.
Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.

Personalizing News for 700 Million People a Day

Yahoo’s created a visualization about reading habits of the more than 700 million people that visit its sites each day.

Via ReadWriteWeb:

Every day, Yahoo displays about 13 million different news story combination on its homepage. Those stories are personalized based on demographic data and reading behavior, and the company keeps track of what kind of stories do well with which groups of people…

…To illustrate how this works, Yahoo has created an interactive data visualization that shows visitor traffic data in nearly real time. Using it, one can drill down into specific age groups, genders and story types to see what people’s aggregate reading habits look like.

To create the personalization Yahoo uses internally developed technologies called the Content Optimization and Relevance Engine (CORE).

Via Yahoo:

Looking at past user behavior, algorithms are combined with human editorial expertise to allow us to carry out deep personalization to our more than 700 million users, giving them “must read” stories that are interesting and relevant. This C.O.R.E. data visualization reveals some of the factors that influence the display of articles in the Yahoo! Today module.

The interactive visualization was created with JavaScript, HTML5, and CSS3.

Image: Screenshot of Yahoo home page views by demographic and content category, via Visualize Yahoo.

Visualizing Amazon Product Searches
Amazon throws off a lot of data. Andrei Kashcha has taken some of it to create a product visualization service called Yasiv.
Enter a search term and customer preferences are shown for other products that they purchased. Select any and new screens appear giving you information about the products.
Written in JavaScript and SVG.
Image: Results for the search term “journalism”. Results show most popular books and how they cluster together in terms of user purchases.

Visualizing Amazon Product Searches

Amazon throws off a lot of data. Andrei Kashcha has taken some of it to create a product visualization service called Yasiv.

Enter a search term and customer preferences are shown for other products that they purchased. Select any and new screens appear giving you information about the products.

Written in JavaScript and SVG.

Image: Results for the search term “journalism”. Results show most popular books and how they cluster together in terms of user purchases.

The Portly Web?
Websites are getting fat with average pages weighing in at almost a megabyte, according to the BBC:

The average page is now about 965 kilobytes in size, reveals a study of top sites by the HTTP Archive.
The figure is 33% up on the same period in 2010 when the average webpage was a svelte 726 kilobytes…
…Analysis suggests the bloat is down to user demands for more interactivity, as well as the tools used to watch what happens when people visit a site.

The bloat is generally caused by the use of larger images and multimedia, but also Javascript libraries and Web analytics scripts. 
Back in the day when we had to walk uphill both ways to get our Webs to work, a general goal was to keep pages under 50k. The BBC points out that our portly pages might be fine for people  accessing sites via broadband but is a killer for those viewing on 3G mobile.
Takeaway: remember to optimize, and then do it again.

The Portly Web?

Websites are getting fat with average pages weighing in at almost a megabyte, according to the BBC:

The average page is now about 965 kilobytes in size, reveals a study of top sites by the HTTP Archive.

The figure is 33% up on the same period in 2010 when the average webpage was a svelte 726 kilobytes…

…Analysis suggests the bloat is down to user demands for more interactivity, as well as the tools used to watch what happens when people visit a site.

The bloat is generally caused by the use of larger images and multimedia, but also Javascript libraries and Web analytics scripts. 

Back in the day when we had to walk uphill both ways to get our Webs to work, a general goal was to keep pages under 50k. The BBC points out that our portly pages might be fine for people  accessing sites via broadband but is a killer for those viewing on 3G mobile.

Takeaway: remember to optimize, and then do it again.

Got Popcorn?
Mozilla’s released Popcorn 1.0, an HTML5 media toolkit that reimagines what can be done with Web video.
Via the Mozilla Blog:

Popcorn allows web filmmakers to amp up interactivity around their movies, harnessing the web to expand their creations in new ways. Popcorn uses Javascript to link real-time social media, news feeds, data visualizations, and other context directly to online video, pulling the web into the action in real time. The result is a new form of  cinema that works more like the web itself: interactive, social,  and rich with real-time context and possibilities that continue to evolve long after filming wraps.
Director Kat Cizek used Popcorn and other HTML5 tools like WebGL to create One Millionth Tower, the latest installment in the NFB’s Emmy award-winning Highrise series. One Millionth Tower brings residents from a dilapidated Toronto apartment complex together with architects and designers, imagining how they can revitalize their homes and neighborhood together. The film then uses the magic of animators, web developers and Popcorn to bring these ideas to life, all through a multi-layered, three-dimensional landscape that runs directly in the web browser.

To see it in action, watch the One Millionth Tower over at Wired. 
To give it a whirl, learn about and download Popcorn at Mozilla.

Got Popcorn?

Mozilla’s released Popcorn 1.0, an HTML5 media toolkit that reimagines what can be done with Web video.

Via the Mozilla Blog:

Popcorn allows web filmmakers to amp up interactivity around their movies, harnessing the web to expand their creations in new ways. Popcorn uses Javascript to link real-time social media, news feeds, data visualizations, and other context directly to online video, pulling the web into the action in real time. The result is a new form of  cinema that works more like the web itself: interactive, social,  and rich with real-time context and possibilities that continue to evolve long after filming wraps.

Director Kat Cizek used Popcorn and other HTML5 tools like WebGL to create One Millionth Tower, the latest installment in the NFB’s Emmy award-winning Highrise series. One Millionth Tower brings residents from a dilapidated Toronto apartment complex together with architects and designers, imagining how they can revitalize their homes and neighborhood together. The film then uses the magic of animators, web developers and Popcorn to bring these ideas to life, all through a multi-layered, three-dimensional landscape that runs directly in the web browser.

To see it in action, watch the One Millionth Tower over at Wired. 

To give it a whirl, learn about and download Popcorn at Mozilla.