Não é mais possível ter um olhar individual sobre as camadas de conteúdo, apresentação e comportamento, pois elas se completam e se mesclam interligadas pela semântica. Não existe mais nada gratuito ou supérfluo, tudo deve ser relevante para a construção dos significados. Pensar em direção de arte e desconhecer este novo cenário, é ignorar a fusão arte & tecnologia, é ignorar o legado do homem renascentista que está construindo uma nova era, a era da "Open Web Platform"

1. Fábio Flatschart
DIREÇÃO DE ARTE &
OPEN WEB PLATFORM
flatschart.com | janeiro de 2013

2. bio
Fábio Flatschart é Gerente de Marketing e Inovação da Soyuz Sistemas e Sócio
da Flatschart Consultoria LTDA, empresas com as quais participou do
desenvolvimento e implantação de projetos pioneiros nas áreas de Open Web
Platform e Marketing Semântico no Brasil.
É autor do livro HTML5 - Embarque Imediato, uma das primeiras publicações
em português sobre o assunto.
Atua como colunista do portal iMasters e é professor convidado dos mais
importantes cursos de MBA do Brasil (FGV, FIA, Trevisan)
flatschart.com | janeiro de 2013

3. intro
Não é mais possível ter um olhar individual sobre as camadas de conteúdo,
apresentação e comportamento na web, pois elas se completam e se
mesclam interligadas pela semântica.
Não existe mais nada gratuito ou supérfluo, tudo deve ser relevante para a
construção dos significados. Pensar em direção de arte e desconhecer este
novo cenário, é ignorar a fusão arte & tecnologia, é ignorar o legado do
homem renascentista que está construindo uma nova era, a era da "Open
Web Platform".
flatschart.com | janeiro de 2013

4. AQUECIMENTO
flatschart.com | janeiro de 2013

5. johnson
“Qualquer analista profissional de tendências nos dirá que os mundos da
tecnologia e da cultura estão colidindo. Mas o que surpreende não é a
própria colisão; é o fato de ela ser considerada novidade”
JOHNSON, Steven. Cultura da interface: como o computador transforma
nossa maneira de criar e comunicar.
flatschart.com | janeiro de 2013
2001

6. macluhan
“We're just trying to fit the old things into the new form”
MCLUHAN, Marshall
flatschart.com | janeiro de 2013
1960

7. wagner
Richard Wagner imaginava um universo expressivo onde a música e o teatro
seriam o centro nevrálgico de uma experimentação complexa e
multissensorial que ele chamava de Gesamtkunstwerk (Obra de Arte Total)
uma integração dos meios artísticos que buscava recriar e ampliar muitos dos
conceitos praticados pelo teatro clássico grego.
Bayreuth Festspielhaus (Teatro do Festival de Bayreuth) - Escurecimento da
plateia, inclinação dos assentos, recursos cenográficos / arquitetônicos que
favoreciam a reverberação do som em mais de um canal. User Experience 
flatschart.com | janeiro de 2013
1876

8. polímata
Homem Vitruviano | Leonardo da Vinci
flatschart.com | janeiro de 2013
1492

9. DIREÇÃO DE ARTE
flatschart.com | janeiro de 2013

10. as origens
O conceito atual de direção de arte começa a ganhar força nos EUA a partir
dos anos 40, fruto da necessidade de representar o “American Way of Life“ no
cinema e na publicidade.
Cada detalhe era exagerado em sua carga simbólica na busca de exteriorizar a
imagem da perfeição e da supremacia pretendidas pelos americanos.
flatschart.com | janeiro de 2013
1940

11. origens
O conceito atual de direção de arte começa a ganhra força nos EUA a partir
dos anos 40, fruto da necessidade da publicidade e do cinema de representar
o “American Way of Life“.
Cada detalhe era exagerado em sua carga simbólica na busca de exteriorizar a
imagem da perfeição e da supremacia pretendidas pelos americanos.
flatschart.com | janeiro de 2013
1940

12. na web
Tecnológico: O pessoal de informática, computação, engenharia, matemática
e áreas afins – Para eles, a Internet era uma nova possibilidade de linguagens,
códigos, sintaxes. Geralmente desprovidos de qualquer senso estético, uma
página web era qualquer representação gráfica de um monte de linhas de
código.
Artístico: O pessoal de cinema, rádio e tv, artes, comunicação e áreas afins –
Para estes, a web era um novo suporte para suas elucubrações visuais e
sonoras, um novo meio de comunicação. De novo o meio era mensagem, a
1997
nova aldeia global.
flatschart.com | janeiro de 2013

13. na web
Tecnológico: O pessoal de informática, computação, engenharia, matemática
e áreas afins – Para eles, a Internet era uma nova possibilidade de linguagens,
códigos, sintaxes. Geralmente desprovidos de qualquer senso estético, uma
página web era qualquer representação gráfica de um monte de linhas de
código.
Artístico: O pessoal de cinema, rádio e tv, artes, comunicação e áreas afins –
Para estes, a web era um novo suporte para suas elucubrações visuais e
sonoras, um novo meio de comunicação. De novo o meio era mensagem, a
1997
nova aldeia global.
flatschart.com | janeiro de 2013

14. web
flatschart.com | janeiro de 2013
2013

15. era pós mcluhan
• O mesmo conteúdo está em todos os lugares
• As mídias e os aparelhos se confundem
• O meio deixa de ser a mensagem, aliás, não importa mais o meio
• Após séculos de escravidão, a mensagem libertou-se do meio
• Ubiquidade
flatschart.com | janeiro de 2013

16. OPEN WEB PLATFORM - OWP
flatschart.com | janeiro de 2013

17. owp
É a coleção de tecnologias abertas da web onde todos podem implementar
componentes de software na web sem a necessidade de qualquer aprovação
ou taxas de licença.
Plasticidade + organicidade + modularidade + interatividade = Ubiquidade
Offline & Storage | Device Access | Connectivity | Multimedia | 3D, Graphics
& Effects | Performance & Integration | CSS3
flatschart.com | janeiro de 2013

18. owp
“Daqui a dez anos o metrô vai parar na estação e toda sua superfície vai estar
coberta com um adesivo de propaganda, como hoje. A diferença é que ele vai
ser animado e interativo.
Esse adesivo vai rodar Web. Dentro do metrô você vai ver uma propaganda
que diz “Curta essa marca”. Você vai poder clicar no adesivo e curtir.
No supermercado, o iogurte vai falar com você. E, não duvido, até o dinheiro
vai interagir, para evitar falsificações, com dados de geolocalização e
rastreabilidade. Pense numa Onça animada na nota de cinquenta reais. Isto
está mais perto do que você pensa” - Clécio Bachini
http://www.soyuz.com.br/blog/open-web-platform
flatschart.com | janeiro de 2013

19. owp
Não é mais possível ter um olhar individual sobre as camadas de conteúdo,
apresentação e comportamento na web, pois elas se completam e se
mesclam interligadas pela semântica.
Marcação HTML
Apresentação
Comportamento
APIs CSS
JavaScript
flatschart.com | janeiro de 2013

20. owp
front end 2000
flatschart.com | janeiro de 2013

21. owp
front end 2013
flatschart.com | janeiro de 2013

22. HTML5 : O CORAÇÃO DA OWP
flatschart.com | janeiro de 2013

23. html5 | mitos
HTML5 ainda não pode ser usado comercialmente
A maior mudança do HTML5 foi Vídeo, Áudio e Animação
Objetivo do HTML5 é matar o Flash
HTML5 não faz diferença pra SEO/SEM
flatschart.com | janeiro de 2013

24. html5 | mitos
HTML5 ainda não pode ser usado comercialmente
A maior mudança do HTML5 foi Vídeo, Áudio e Animação
Objetivo do HTML5 é matar o Flash
HTML5 não faz diferença pra SEO/SEM
flatschart.com | janeiro de 2013

25. html5
semântica
flatschart.com | janeiro de 2013

26. html5 | estrutura
XHTML HTML5
<body> <body>
<div id="topo"></div> <header></header>
<div id="navegacao"></div> <nav></nav>
<div id="principal"></div> <article></article>
<div id="lateral"></div> <aside></aside>
<div id="rodape"></div> <footer></footer>
</body> </body>
flatschart.com | janeiro de 2013

27. html5 | estrutura
Wireframing > PSD > CODE
Grids, pastas & layers com vocabulário semântico controlado
topo > header | menu > nav | rodape > footer
Case : Migração do fluxo de trabalho para produção de apresentações em
HTML5 para Sistema UNO Internacional do Grupo Santillana / Editora
Moderna
flatschart.com | janeiro de 2013

28. html5 | multimídia
O fim da era dos plugins
Com o amadurecimento do HTML5, começamos a nos distanciar cada vez
mais desse universo formado pelos elementos <applet>, <embed> e <object>,
necessários para incorporar funcionalidades multimídia aos browsers. Assim,
nos aproximamos de uma nova era; a era da multimídia nativa, na qual
plugins não são mais necessários e o carregamento, o processamento e o
controle passam a depender do browser, e não mais de soluções proprietárias
de terceiros.
exemplo
<audio> & <video>
flatschart.com | janeiro de 2013

29. html5 | svg
O formato SVG ( imagem vetorial baseada em XML) veio para ficar
• Ícones de navegação
• Elementos de UI
• Ilustrações
• Patterns
• Backgrounds
• Animação
• Máscaras ( inclusive para vídeo)
• http://labs.soyuz.com.br/gamew3c/
<svg>
flatschart.com | janeiro de 2013

30. html5 | webGL
Dashboard em tempo real mostrando a relação entre latitude, longitude e
altura dos municípios brasileiros. Baseado em dados abertos, esta é uma
experiência de visualização de dados utilizando webGL.
http://labs.soyuz.com.br/dash
flatschart.com | janeiro de 2013

31. html5 | widgets
Packaged Web Apps (Widgets)
Games, Anúncios, Displays Interativos, Mashups
http://www.w3.org/TR/2012/PER-widgets-20120925
flatschart.com | janeiro de 2013

32. CSS3
flatschart.com | janeiro de 2013

33. css3 | tipografia
http://slides.html5rocks.com/#web-fonts
http://edgefonts.toekneestuck.com
flatschart.com | janeiro de 2013

34. css3 | features
Colunas / Transparência / Gradiente / Bordas / Transições / Animações
http://bernarddeluna.com/xhtml/como-fizemos-o-oldradio
https://developer.mozilla.org/en-US/demos/detail/old-radio/launch
flatschart.com | janeiro de 2013

35. css3 | regions
http://dev.w3.org/csswg/css3-regions/
http://www.adobe.com/devnet/html5/articles/css3-regions.html
flatschart.com | janeiro de 2013

36. css3 | exclusions
http://dev.w3.org/csswg/css3-exclusions
flatschart.com | janeiro de 2013

37. css3 | Compositing & Blending
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html
http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web
flatschart.com | janeiro de 2013

38. css3 | custom filters
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab
http://adobe.github.com/web-platform/samples/css-customfilters
flatschart.com | janeiro de 2013

39. epub3
https://code.google.com/p/epub-samples/
flatschart.com | janeiro de 2013

40. renascimento ?
É a época mais fascinante e inovadora
da web desde de sua criação!
Karen Myers
Business Development Officer | W3C
flatschart.com | janeiro de 2013

41. ou pré história ?
This is just the beginning, the
beginning of understanding that
cyberspace has no limits, no
boundaries
Nicholas Negroponte
MIT
flatschart.com | janeiro de 2013

42. um mundo de telas
Nuvem, Conteúdo & Interface
flatschart.com | janeiro de 2013

43. fluid knowledge
Músicos, sociólogos, designers, historiadores,
jornalistas, antropólogos, pedagogos,
editores, diagramadores, atores, sonhadores,
programadores e todos os demais seres
humanos e exatos !
flatschart.com | janeiro de 2013

44. parceiros
flatschart.com | janeiro de 2013

45. publicações
HTML5 - Embarque Imediato ( 2011 )
Open Web Platform ( em breve )
Livro Digital Et Cetera ( em breve )
flatschart.com | janeiro de 2013

46. obrigado
flatschart.com
quadrodosbemois.com.br
@fabioflat
slideshare.net/fabioflat
flatschart.com | janeiro de 2013