Tag Archives: css3

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

Snow Fall: o futuro e os meios de produção

 

screenshot.2
Snowfall, New York Times, 2012

 

Tem-se falado bastante da reportagem do New York Times “Snowfall“, muitas vezes pela perspectiva menos interessante. Uns dizem que é o futuro do jornalismo, outros dizem que não, e há quem ache que só naquela redacção é que se podia fazer um trabalho destes. Está toda a gente a exagerar.

Primeiro temos que ver a dimensão do trabalho:

-é uma reportagem que provavelmente não teria espaço numa publicação não-digital, mesmo numa revista (de tal maneira que foi feita uma edição em ebook);

-demorou seis meses a ser feita;

-ocupou uma equipa de 17 pessoas;

-usa video, áudio, aplicações interactivas para recriar o evento;

Vamos por partes, e começamos pelas mais chocantes para quem faz jornalismo.

Meios

Seis meses e 17 pessoas são recursos que a maioria das redacções não pode disponibilizar para uma reportagem.

A questão não está nas 17 pessoas mas o que faz cada uma delas: 12 estão creditadas no design e produção do projecto, 3 na parte de video, 1 na pesquisa adicional, e o jornalista que coordenou o projecto.

Muitos jornalistas disseram que isto é uma aberração, e eu concordo que parece ser, especialmente para quem vem do meio individualista do impresso. Olhando para a quantidade de pessoas que são precisas para fazer uma reportagem televisiva de fundo e colocá-la no ar, vemos que a proporção não deve ser muito diferente, entre o número de jornalistas e pessoal técnico que faz com que seja emitida, e mesmo o papel tinha gráficas inteiras com dezenas de pessoas e distribuidores para despachar o seu produto. É uma espécie de hipocrisia moldada pelos hábitos de produção, e uma visão redutora do processo de produção de informação.

A maior parte da equipa está relacionada com os apectos técnicos e visuais da reportagem, e se queremos ter histórias que se adequem ao meio  digital, temos que ter pessoas com as competências necessárias para as produzir.

Concordo que seis meses é muito tempo, mas se virmos a quantidade de fontes e dados necessários para abordar este assunto, vemos  que é um trabalho complexo. A colaboração de algumas entidades de investigação científica, que vivem fora da pressão de produção diária do jornalismo também pode ter ajudado a que a demora fosse maior.

Nem todas as histórias servem para reportagens deste tipo. É preciso que tenham um certo grau de intemporalidade e, que tenham a possibilidade de serem seguidas no futuro com novos conteúdos.

Um dos exemplos que dava nas minhas formações era a reportagem do Star Tribune “13 seconds in August“, realizada em 2007, que demorou também vários meses a ser produzida, com uma equipa grande também, e que ainda hoje tem espaço na publicação com actualizações sobre os sobreviventes. Porquê? Porque o evento o justifica.

Em Portugal, numa situação semelhante, só uma publicação se deu ao trabalho de fazer algo assim, e a diferença de investimento nota-se.

Também é preciso ver que uma das pessoas envolvidas é o Xaquin Gonzalez Vieira, uma das referências na produção de narrativas digitais, que esteve ocupado a fazer outras coisas enquanto a reportagem era produzida. Devem conhecer melhor a sua infografia da queda  do avião no rio Hudson.

Resultado deste esforço?

uma semana

Tecnologia

Este é capaz de ser o primeiro grande trabalho de grande divulgação produzido por uma redacção que usa simplesmente HTML5 , CSS3 e Javascript para uma grande reportagem, em detrimento do Flash que, devido à sua fraca implementação nos tablets, tem perdido interesse por parte dos criadores de narrativas digitais.  Não são só necessárias pessoas nas redacções que saibam programar mas que saibam trabalhar com dados geográficos e estatísticos. No entanto, a produção dentro das redacções ainda se centra muito no esforço isolado do jornalista-escritor.

Concordo com quem disse que isto não é o futuro do jornalismo, mas não da mesma maneira. É o presente, e não é ficção científica. Não é um esforço descabido, especialmente se comparado com outro tipo de investimentos e se olharmos aos resultados qualitativos e quantitativos. E, basicamente, é uma reportagem com um formato tradicional, mais uns extras.

É , acima de tudo, o futuro das narrativas digitais de fundo. A tendência está aí, a procura também. O mercado digital está a expandir-se cada vez mais por plataformas com necessidades de visualização e interacção específicas que é necessário satisfazer. Mas isso implica que, onde quer que se queira produzir conteúdos para meios digitais, haja competências,  estratégia de mercado e meios de produção adequados.

Choque e exagero não é a melhor maneira de se encarar mais uma forma fantástica de se contar histórias. O que me preocupou nas críticas foi o facto de não terem em conta a realidade do consumo e sim a fraca qualidade das condições de produção existentes na maioria das redacções. Apesar do esforço feito pelos mesmos há anos (Rádio Renascença, Público e JN), o panorama das produções multimédia em Portugal é basicamente o mesmo há 5 anos, com um grau de evolução muito próximo do zero.

E o que vem a seguir a esta avalanche?

So what’s next? The design team behind the Times project told The Atlantic Wire last week that no specific new stories had presented themselves yet as affording the “luxury” of the six months it took to report and design “Snow Fall.” But Abramson’s memo cites one-third of traffic to the avalanche story as first-time web visitors, and that can be more appealing than raw numbers. (We’ve reached out to the Times for comment, and will update when we hear back.)

The Times, of course, does long, reported features all the time, but as The Atlantic’s Derek Thompson pointed out, “There is no feasible way to make six-month sixteen-person multimedia projects the day-to-day future of journalism, nor is there a need to.” But it’s been a great year for the “long read” community, and while there were few ads on the full-screen layout for “Snow Fall,” that its traffic has been dwarfed entire sites might not make single-story advertising too far fetched of an experiment.

 
So What if Tons of People Read That ‘Snow Fall’ Story on the Times Website?