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 E

1. Dia do Rock
BY KZUKA

2. ‘
INTERACAO
‘
JORNAL / DIGITAL

3. TRABALHO PARALELO
Tecnopuc
Front
Web
Analytics End
Front
End
kzuka
UX
PO
Editora Designer

5. `
ESTA
O HTML5
PRONTO?

6. [
[
A tag audio por si só
não faz muita coisa
[
[
A API Javascript pode ser
usada para controlar o som

7. [
[
jQuery, na versão
“normal” não ajuda muito
com dispositivos mobile

9. USAMOS ZEPTO
Framework minimalista em Javascript
com linguagem compatível com jQuery
p.ex.: $, $().on()

10. 1.
Resolveu o problema de delay no touch
,
(POREM, SOMENTE DO TOUCH)
2. Diminuiu o tamanho total dos arquivos

11. Ainda tínhamos (E TEMOS) um bug clássico (?)
audio.play()
audio.currentTime = 0 //ou 0.1 ou ‘0.1’
OU...

12. Resolvemos com Soundjs
Velocidade de resposta ficou ok
(NOS MELHORES BROWSERS)

13. ’
Gravamos as notas separadas usando o Guitar Pro 6
(VERSAO TRIAL. SEM PIRATARIA, GENTE!)
e Audacity

14. POM
POM POM
TCHA
U
FALA CRIS!

15. ‘
ANIMACOES
‘
CSS - animation com @keyframes
PORQUE ANIMATION COM JS - SUCKS

16. 1 CORDA
REPLICAR
E ADAPTAR

17. Botões e Sombras
SEM IMAGENS!
• Maleável
• Reaproveitamento
• Leve
• Menos requisições

18. Responsividade
‘
NAO CARREGUE IMAGENS
GRANDES NO MEU 3G, PLS!
• Otimizar o aproveitamento
do espaço disponível.
• O que importa é o rock!
`
(A GUITARRA, NE?)

21. 941 usuários/browsers, sendo 290 dispositivos móveis
’
`
305 INTERACOES. ISTO E BOM OU RUIM?
’

22. `
ISTO E BOM!

23. O
IG
BR
O!
AD