Tag Archives: html5

Authors of amazing Interactive Doc “Hollow” explain how they did it

When I started going through “Hollow” (can’t find a better verb, “watching” is not what I did) I was amazed with the amount of elements it has. Imagine a dynamic collage of audio, stills, images, data and video, divided in six different chapters, each one including short but deep, well crafted video stories.

In a nutshell, it’s a story about the rise and fall of McDowell County, West Virginia, USA. The remaining inhabitants of this now decadent area show their lives in this empty land, while making ends meet and trying to resurrect their towns.

Its makers, Director and Producer Elaine McMillion, Sound Designer Billy Wirasnik, Technical Director and Senior Developer Robert Hall and Art Director/Designer and Architect Jeff Soyk, held  a Hangout where they talked about this project, their sucesses and failures.

I’d like to highlight Billy Wirasnik’s advice : “Don’t forget about sound!”. This project relies a lot in natural soundscapes and music tracks, which adds a whole new dimension to the story. Try it without sound and you’ll see what I mean.

Another thing you should notice is that you have to watch some videos to unlock extra  features. It’s a way to reward the users who explore the most.

There is a lot to learn from the mechanics and looks of this interactive doc, especially the mix of still and dynamic visual elements, pushed forward by html5/css3/js cogwheels, and the awesome video narrative.  A must “scroll through” (?!?).

Check out Elaine McMillion’s blog to watch the Hangout videos and access the links they mentioned and other assorted tools and tips for storytellers.

Here’s the trailer for “Hollow”:

Portfolio – Invasive plants Interactive map

One of the goals I set for the science communication  project where I was working was to build some interactive features. I built this phenological calendar and, more recently, an interactive map.

This map shows the origins of the most important invasive plant species in Portugal, and some Portuguese native plants that are invasive in other regions. It’s a simple, straightforward project , directed to a younger audience.

I used two different tools to build this. The navigation and content support is taken from the Fullscreen Pageflip Layout, as seen on Codrops, one of the most inspiring websites I ever came across, and a must follow. I made a concession here, because I’m not a huge fan of flipping pages on a screen, but I felt it worked better that way. It all works with HTML5&CSS3 plus Javascript wizardry.

The map was built with amMaps, a Javascript library package, that had just the right solution for this. I must send a shout out for their impeccable support, they were just awesome. Their maps can be used in so many different ways it made me want to use amMaps again for other projects. Try them out, and look at amCharts too. As a Javascript noob I thought it would be more complicated, but it was easier than I expected to build the map.

The flags’ sections were handmade by me and I got to apply some CSS expertise. One thing that I learned though, not all flags have the same proportions: some are wider than others. Go figure.

If you missed the two links to the map at the top, follow this one, and let me know what you think about it.

 

Interactive Radial Calendar – SVG / HTML5 / CSS3 / Javascript

SVG/HTML5/CSS3 project – Acacia longifolia Interactive Phenological Radial Calendar from Alex Gamela on Vimeo.

I’ve experimented recently with ways to create interactive visualizations using HTML5 and CSS3. Starting with a SVG based design, I used HTML/CSS to animate and create transitions for specific items of the visualization. SVG is quite useful, because we can have more control over the design, while establishing classes and id’s for elements that can become alive with CSS3 magic.

check the interactive calendar in English or in Portuguese – works better in Firefox

Here we have the phenological cycle for the Acacia longifolia, one of the most problematic invasive plant species in Portugal. How do I know that? It’s my current job. And like most scientific subjects, data and good visual elements are aplenty. This information and the images were provided by my colleague Cristina Morais, that included this calendar in her PhD thesis presentation.

I love a well designed calendar or any other time related object (I have deadline issues…)because, in spite of time’s linear, progressive motion, it’s also cyclical (…and hamster syndrome as well).  I found some creative, stunning, stylish layouts and the radial stuck with me, since we’re conveying the idea of a cycle, after all. This  here and this one too cleared any doubts.

I had already tried this concept, but this time I wanted to take it a step further. I’m not a designer so I tried my best to make it look not really ugly, and adapted the code from this great tutorial from Codrops, which is one of the best interactive design websites ever. Follow them.

The popup images are activated through a pressbox .js script, placed in the index.html file. Neat and simple.

Even so, my coding skills weren’t enough to create all the actions I wanted, and I failed to make it cross-browser compatible: it only works 100% on Firefox. Chrome and IE do not render the calendar as seen on the video above.

For this project I used Adobe CS6’s Photoshop and Illustrator (which could have been replaced by Inkscape and GIMP, both free powerful alternatives to the Adobe products), and edited a lot of code on Notepad++.

It was an interesting project, and I’m planning to do a few more. If you have any suggestions or ideas send them to me.

Recommended: Into the Arctic

Interactive narratives are more interesting each day, and are not limited to news websites. Quite the opposite. Greenpeace created this amazing package dedicated to the Arctic, and it’s a feast to the eyes. I’m going through the code and I’m delighted to see how  the HTML5 /Css3 /Javascript has been put to work so beautifully like this.

How I wanted to do stuff like this. All I need is a coder and a designer…

Via CoDrops

How they made Snow Fall

 

I had been waiting for this for some time now: the step by step explanation of the development of NY Times most successful and attention grabbing multimedia narrative Snow Fall.  I wrote about the resources that were applied to this (in Portuguese), and how they may seem excessive both in the number of people involved and production time, assets newsrooms don’t have.

Though I believe there is a risk this type of narratives will only happen sporadically, and created only in digital minded newsrooms with huge resources – smaller teams need to learn how to produce consistently multimedia interactive stories, using their own scarce resources (when they turn to this mindset, I mean) – this is  a great walk-through into Oz, i.e., the process of creating Snow Fall at the NY Times newsroom, from which we can draw our own conclusions about what modern news reporting is all about. Or should be.

Q. There’s a ton of audio and moving-image work in Snow Fall, and you used a lot of techniques from filmmaking, but within a very reading-centric experience. What kind of challenges did those elements present?

Catherine Spangler, Video Journalist: The challenges of crafting multimedia to complement a text-based story were the same challenges faced in any storytelling endeavor. We focused on the pacing, narrative tension and story arc—all while ensuring that each element gave the user a different experience of the story. The moving images provided a much-needed pause at critical moments in the text, adding a subtle atmospheric quality. The team often asked whether a video or piece of audio was adding value to the project, and we edited elements out that felt duplicative. Having a tight edit that slowly built the tension of the narrative was the overall goal.

How we made Snow Fall, Source

Worth checking this Storify page to get an insight on this project