Apr/130
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.
Apr/130
Interactive Infographic: Torre dos Clérigos by JN
Jornal de Notícias (JN) built an interactive infographic celebrating the 250th anniversary of the iconic Torre dos Clérigos (Clérigos Church), in Porto.
They used Flash but it incorporates some navigational devices used with HTML5/CSS3, like vertical scrolling. I got the tip they’re moving into that direction, and sometime soon maybe we’ll see pure HTML/CSS coded interactive narratives.
They incorporated 360º panoramas from the top of the tower and video. It’s simple, cool, I’m not a big fan of their design style but it works pretty well.
JN is one of the few media organizations that consistently create interactive and multimedia narratives in Portugal.
Apr/130
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
Apr/130
Is this a journalism job?
Are you a student? Contrast this to your course. Are you an editor? Do you have/need these skills in your newsroom?
There are some journalism job ads that could be asking for Superman rather than for old plain Mr.Kent, but this one seems to be reasonable enough, if not only for the impression it gives that someone has a strategy.
Candidates should describe their success conceptualizing and building news apps, data visualizations, and interactive graphics. If you are a visual storyteller, someone who sees the narrative in numbers, and thinks in code, this is your opportunity to make a mark. Expect your journalism skills to be as important as your programming skills. This editorial position will ask you to tell stories differently and inspire others to do the same.
The work will require advanced experience with HTML5, CSS, JavaScript (jQuery); an understanding of responsive design and proficiency with interaction design and user interfaces; familiarity with mining and manipulating data and Web scraping. Light Ruby or Python helpful.
The goal:
Create storyboards, wire frames, page layouts, prototypes, emails, landing pages and other Web assets and deliverables needed during project development.
• Publish interactive graphics, data visualizations, news apps, multimedia and other digital content with an excellence that matches the reporting it supports.
Basic requirements:
- College degree
- Minimum of 2 years programming experience
- Advanced command of HTML5, CSS, JavaScript (including jQuery)
- Light Ruby or Python for data mining, Web scraping
- Comfort with data analysis
- Understanding of responsive design
- Familiarity with Final Cut Pro and Adobe InDesign
For most journalism students and editors that I know this could be a job offer for astronauts. But it is not. Mindy McAdams puts it right:
This is a very reasonable list, in my opinion, and the ad copy is good overall. It is not the kind of “computer jesus” job description that Sean Blanda blasted in 2008. What’s the likelihood that the McClatchy Company (which publishes 30 daily newspapers) will find a perfect person to hire? I’m not sure. And will the salary be good enough? Washington, D.C., is an expensive area to live in.
Those concerns aside, what does this list say to journalism educators? And to journalism students who love design?
Is this a job for a person who has a degree in computer science? Absolutely not. You will not learn those skills in a computer science program.
I have this problem when people ask me what I do. I say “digital content producer” which is a mouthful of nothing. Sometimes I sprinkle it with “multimedia/interactive” but it sounds empty and a bit esoteric and neither potential employers nor civilians get it. I do a bit of HTML5 and CSS3 coding, deal well with video and audio, know how to write for the web, can design and create interactive multimedia narratives, and possess other assorted skills that can come handy for the high expertise environment of the digital world. A jack of all trades, master of none.
In my last appearance before a journalism students audience I did my informal poll and asked them in which medium they wanted to work in. TV and print got a full room of arms raised, radio had a few, but the internet – the medium they use more than any other – had none. It’s hard to change the game when the future players don’t know about the new rules.
Is this a journalism job? Hell, yes.
My advice for students: try to learn these skills and you’ll do fine, someday (maybe not here in Portugal).
My advice for editors: consider why you’d never put out an ad like this and understand why your business is tanking.
Apr/130
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
