dia do rock - interação jornal papel + digital
DESCRIPTION
Projeto de interação entre o jornal papel + o digital, realizado para o Dia do Rock, com parceria do Kazuka - Grupo RBS. Ganhou o Prêmio RBS de Jornalismo e Entretenimento 2013 - Novas linguagens Guitarra Virtual que pode ser tocada com mouse, teclado e também responde à toque em dispositivos touch screen. Layout responsivo, animações CSS3 e HTML5 para o áudio. Acesse a guitarra em: http://www.clicrbs.com.br/sites/swf/dia-do-rock-2013/ Experimente tocar: My Generation - The Who: BBBB CCCC Paranoid – Black Sabbath: GGG NMQPNMQP Black Sabbath – War Pigs: JKL G HG Rolling Stones – Satisfaction: EE EIH HHI Nirvana - In Bloom: F FFF B BBBBBBB C CCC A AAA F FFF B BBBBBBB C CCC A Smoke on the water: B F D B F I D B F D F B Seven nation army: G G K G H D ETRANSCRIPT
Dia do RockBY KZUKA
INTERACAO JORNAL / DIGITAL
‘‘
TRABALHO PARALELO
FrontEnd
WebAnalytics
FrontEnd UX PO
kzuka
Tecnopuc
Editora Designer
O HTML5 ESTA PRONTO?
`
A tag audio por si só não faz muita coisa
[
[
[
[A API Javascript pode ser usada para controlar o som
[[ jQuery, na versão “normal” não ajuda muito com dispositivos mobile
USAMOS ZEPTO
Framework minimalista em Javascript com linguagem compatível com jQuery
p.ex.: $, $().on()
Resolveu o problema de delay no touch(POREM, SOMENTE DO TOUCH)
Diminuiu o tamanho total dos arquivos
1.
2.
,
Ainda tínhamos (E TEMOS) um bug clássico (?) audio.play() audio.currentTime = 0 //ou 0.1 ou ‘0.1’
OU...
Resolvemos com Soundjs Velocidade de resposta ficou ok(NOS MELHORES BROWSERS)
Gravamos as notas separadas usando o Guitar Pro 6 (VERSAO TRIAL. SEM PIRATARIA, GENTE!)
e Audacity
’
FALA CRIS!
POM POM POM TCHAU
ANIMACOES
CSS - animation com @keyframesPORQUE ANIMATION COM JS - SUCKS
‘
‘
1 CORDA
REPLICAR E ADAPTAR
SEM IMAGENS!
Botões e Sombras
• Maleável• Reaproveitamento• Leve• Menos requisições
NAO CARREGUE IMAGENS GRANDES NO MEU 3G, PLS!
(A GUITARRA, NE?)
Responsividade
• Otimizar o aproveitamento do espaço disponível.• O que importa é o rock!
`
‘
941 usuários/browsers, sendo 290 dispositivos móveis
305 INTERACOES. ISTO E BOM OU RUIM?’
`’
ISTO E BOM!`
OBRIGADO!