Front End

14 abr, 2015

Desenvolvendo conteúdo inovador: o que você precisa saber

Publicidade

No ano passado, participei de uma reunião com um grupo de empresários de tecnologia, espaço (sim, viagem espacial), software e indústria de engenharia. Fiquei muito deslumbrado com o talento incrível dos oradores. Você sabe, existem pessoas por aí construindo coisas, como redes privadas de satélite, instalações de bioimpressão, computadores quânticos e carros que dirigem sozinhos. Eu fiquei completamente paralisado por esse futuro tão incrível, por esse grupo inovador e extremamente criativo bem na minha frente. Imediatamente, também desejei que tivesse trabalhado um pouco mais nos meus vinte anos.

Após as apresentações, uma das questões que surgiram durante a sessão de perguntas e respostas foi: “qual é o próximo grande passo?”.

Uau! Alguma vez você já pensou sobre isso?

Parte da magia de prever a inovação é que ela é muito, muito difícil de acertar. Aqueles que podem prever com precisão o futuro (na minha humilde opinião) são aqueles que tendem a compreender como as pessoas vão reagir a uma ideia quando são expostas a ela. Acho que prever isso é uma habilidade muito especial.

Então, de novo, é esperado que sejamos capazes de prever, o tempo todo, o resultado de nosso marketing. Enquanto previsão é uma coisa, fazer isso acontecer é um algo totalmente diferente.

A concorrência para a atenção de nossos clientes está ficando mais difícil

Na nossa indústria, quando você realmente resume o que fazemos, nós estamos corrigindo, construindo ou nos comunicando com as coisas.

Na maioria das vezes, estamos construindo o conteúdo que se comunica: ideias, histórias, notícias e orientação. O problema é que, não importa em qual vertente trabalhamos, estamos todos competindo por uma coisa: a atenção dos nossos clientes.

À medida que nossos clientes ficam mais espertos, a concorrência está ficando cada vez mais difícil.

Os profissionais de marketing mais bem sucedidos da nossa indústria têm uma característica especial em comum. Eles são bons em descobrir novas formas de comunicar ideias. Dê uma olhada em apresentações clássicas, como esta do Ross Hudgens, para ver o quão poderoso pode ser observar, imitar e desenvolver uma ideia com alcance viral surpreendente.

Eu particularmente gosto da ideia de pegar um pedaço de conteúdo e fazer melhorias, seja por meio de design, layout ou simplesmente atualizando o que está lá. Eu gosto disso porque é realmente muito fácil de fazer e existem cada vez mais evidências de que isso esteja acontecendo em toda a Internet. As marcas estão dando uma segunda olhada em como estão desenvolvendo o seu conteúdo para apelar para um público mais amplo, ou para agradar a um público viral (ou ambos!).

conteudo-1

Por exemplo: dê uma olhada neste belo guia de viagens para o Vietnã (crédito: travelindochina.com) ou neste guia em formato longo para seguro de propriedade comercial (crédito: Towergate Seguros / Builtvisible.com) para exemplos de marcas desenvolvendo seu conteúdo existente. Em verticais onde o conteúdo do artigo comum tem sido feito até a morte, reconstruir o próprio meio parece um próximo passo importante.

Inovador não é a mesma coisa que técnico

Eu percebi por muito tempo que existe um conflito entre a nossa interpretação de “inovador” e “técnico”. Como já escrevi antes, aqueles que realmente entendem como funciona a web estão em enorme vantagem. Aprenda como ela é construída, e você vai se ver capaz de fazer grandes coisas acontecerem por si mesmo, simplesmente aprendendo e experimentando.

Na minha opinião, porém, você não tem que ser capaz de aprender a construir seu próprio site ou ser um desenvolvedor. Tudo o que tem a fazer é aprender o vocabulário e criar um amplo entendimento de como as coisas funcionam em um navegador. Na verdade, eu acho que todos nós precisamos fazer isso, já. Por quê?

Precisamos de mais inovação no marketing de conteúdo

Eu acho que o nosso futuro depende da capacidade da nossa indústria de inovar. Claro, você ainda precisa manter os seus princípios no lugar. Nós sempre seremos os profissionais em T, executando um pouco de SEO técnico aqui, um pouco de estratégia de conteúdo lá. Mas somos todos SEOs e sabemos que precisamos adquirir links, construir o público e, geralmente, pensar grande sobre as nossas ambições. Quando o objetivo é atrair novos seguidores, fãs, links e juntar milhares de compartilhamentos, você precisa fazer algo muito emocionante para atrair a atenção para si mesmo.

O vocabulário do desenvolvimento de conteúdo

Eu escrevi este artigo para que ele fosse uma cartilha sobre recursos mais avançados encontrados no desenvolvimento de conteúdo inovador. A minha apresentação original no MozCon 2014 foi projetada para educar a respeito de algumas das tecnologias sobre as quais devemos estar cientes em nossos projetos de desenvolvimento de conteúdo e no processo que seguimos para construir coisas. Vamos falar sobre processo em outro artigo e focar no “o que” por agora.

Na Builtvisible, estamos trabalhando duro para ampliar as nossas capacidades de desenvolvimento de conteúdo in-house. Aprendemos através do compartilhamento de exemplos surpreendentes uns com os outros. Nossa política é tentar sempre desconstruir como algo poderia ter sido desenvolvido – dessa forma, estamos aprendendo. Algumas das coisas que vemos na web são incríveis e merecem muito respeito pelo talento e pelas habilidades que envolvem o conteúdo.

Aqui estão alguns exemplos que acho que demonstram alguns dos tipos mais úteis de abordagem para o marketing de conteúdo. Espero que eles possam te ajudar tanto quanto nos ajudaram, e espero que você possa formar uma perspectiva de quais características inovadoras se parecem com desenvolvimento de conteúdo mais avançado.

A história do EBoy

conteudo-2

eBoy: a empresa de design gráfico cujos cofundadores e membros são amplamente considerados como os “padrinhos” da pixel art.

O estilo consistente (bem como o conteúdo muito bem escrito) é excelente. Tecnicamente falando, talvez a característica mais inteligente e elegante seja o zoom da imagem posicionado no eixo Z em um container <canvas> (mais sobre isso em breve).

Um event listener (jQuery) ajuda a dimensionar o tamanho adequado do canvas para o tamanho da janela do browser e a posição do eixo z muda no scroll para criar um efeito de zoom elegante.

Veja o exemplo neste link.

<canvas> é um elemento HTML que pode ser usado para desenhar gráficos usando scripting (normalmente JavaScript). Isso pode, por exemplo, ser usado para desenhar gráficos, fazer composição de fotos ou animações simples.

Colorindo o passado

Dê uma olhada no Pixart Printing’s Guide to Colourizing the Past (creditos: Pixartprinting / Builtvisible.com) para um exemplo bem interessante de uso do <canvas>.

O recurso de colorização aproveita o poder do elemento canvas. Nesse caso, a versão colorida da imagem é aplicada à tela como uma imagem de fundo, com a versão preto e branco em uma camada acima. Clicar (ou tocar, no celular) apaga partes da imagem superior, revelando a cor da versão por baixo.

Experimentos do Chrome: Globe

Globe é a visualização global de dados “simples” de crescimento da população da Terra ao longo de um intervalo definido de datas. A visualização 3D é baseada em webGL: uma API JavaScript para renderizar gráficos 3D interativos e gráficos 2D em qualquer navegador web compatível sem o uso de plug-ins.

globe

Veja o exemplo aqui: http://globe.chromeexperiments.com/.

O webGL é uma opção que está surgindo e que é realmente emocionante, disponível para os profissionais de marketing de conteúdo que querem fazer experiências imersivas ou ambientes simulados altamente interativos.

Alguns dos meus exemplos favoritos incluem Hello Racer e Tweetopia, um visualizador 3D de hashtags do Twitter.

Se você quiser ver mais exemplos de webGL em ação, dê uma olhada Chrome Experiments. Não se preocupe, isso funciona nas versões mais recentes do Firefox e do IE também.

Review do PS4 feito pela Polygon

O review do Playstation 4 feito pela Polygon é totalmente um “long form” do amado console da Sony. O que eu amo são as visualizações SVG.

“O que é SVG?”, eu ouço você perguntar!

SVG é uma renderização super-rápida e nítida de imagens vetoriais dentro do browser. Ao contrário dos arquivos de imagem (como .jpg, .gif, .png), SVG é baseado em XML, leve em tamanho de arquivo, carrega rapidamente e ajusta a largura do navegador que responde perfeitamente. O esquema baseado em XML do SVG se presta a alguma manipulação interessante para efeitos impressionantes e fáceis de implementar.

Veja o exemplo da Polygon aqui: http://www.polygon.com/a/ps4-review.

Essa animação de linha de rastreamento que você vê é conhecida como animação de caminho. Essencialmente, o atributo do caminho no XML do SVG pode ser manipulado no DOM com um pouco jQuery. O que você vai ter é uma animação muito estilosa para manter seus usuários com os olhos fixados no seu conteúdo e ainda outro efeito legal para prender a atenção.

Meu exemplo favorito de execução SVG é Gridlocks and Bottlenecks, do Lewis Lehe. Gridlocks é uma visualização baseada em AngularJS e d3.js dos eventos “bottleneck” e “gridlocks”, que são surpreendentemente técnicos e frequentemente mal compreendidos na gestão do tráfego rodoviário.

Veja o exemplo aqui: http://setosa.io/blog/2014/09/02/gridlock/.

Eu tenho uma lista de vocabulários curtos que espero que a nossa equipe seja capaz de explicar (certamente essas perguntas aparecem em uma entrevista com a gente!). Eu acho que se você pode explicar o que essas coisas são, como um profissional de marketing de desenvolvimento de conteúdo, então você está muito à frente da curva:

  • HTML5
  • CSS Responsivo (e bibliotecas)
  • CSS3 (e frameworks)
  • JavaScript (e frameworks: jQuery, MooTools, Jade, Handlebars)
  • JSON (post api e os dados de resposta)
  • webGL
  • Áudio e vídeo em HTML5
  • SVG
  • HTML5 – História da manipulação de API com pushState
  • Scroll infinito

Quer aprender mais?

Eu já acumulei uma série de vídeos sobre desenvolvimento web que acho que profissionais de marketing devem assistir. Não necessariamente para aprender sobre desenvolvimento de web, mas para definitivamente ser capaz de descrever o que você gostaria que o seu próprio conteúdo fizesse.

Inovação em conteúdo é um tema tão imenso, mas acho que fiquei sem espaço (este artigo já tem 1.400 palavras).

No meu próximo texto, gostaria de falar sobre como planejar o seu conteúdo quando for um pouco mais extenso do que apenas um artigo, te dar algumas dicas sobre como trabalhar com (ou encontrar!) um desenvolvedor, e como tirar o máximo de cada componente em seu conteúdo para obter o máximo de seus esforços de marketing.

***

Richard Baxter faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://moz.com/blog/developing-innovative-content-what-you-need-to-know. Esta tradução foi feita com permissão. Moz não tem qualquer afiliação com este site.