Direcao de Arte e Open Web Platform

Fábio Flatschart

DIREÇÃO DE ARTE &
OPEN WEB PLATFORM

flatschart.com | janeiro de 2013

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)


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".


AQUECIMENTO


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.

2001

macluhan
“We're just trying to fit the old things into the new form”

MCLUHAN, Marshall

1960

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 

1876

polímata
Homem Vitruviano | Leonardo da Vinci

1492

DIREÇÃO DE ARTE


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.

1940

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.

1940

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.


web

2013

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


OPEN WEB PLATFORM - OWP


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


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


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


owp

front end 2000

owp

front end 2013

HTML5 : O CORAÇÃO DA OWP


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


html5

semântica

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>


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


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>

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>

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


html5 | widgets
Packaged Web Apps (Widgets)

Games, Anúncios, Displays Interativos, Mashups
http://www.w3.org/TR/2012/PER-widgets-20120925


CSS3


css3 | tipografia

http://slides.html5rocks.com/#web-fonts
http://edgefonts.toekneestuck.com


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


css3 | regions

http://dev.w3.org/csswg/css3-regions/
http://www.adobe.com/devnet/html5/articles/css3-regions.html


css3 | exclusions

http://dev.w3.org/csswg/css3-exclusions


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


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


epub3

https://code.google.com/p/epub-samples/


renascimento ?

É a época mais fascinante e inovadora
da web desde de sua criação!
Karen Myers
Business Development Officer | W3C


ou pré história ?

This is just the beginning, the
beginning of understanding that
cyberspace has no limits, no
boundaries

Nicholas Negroponte
MIT


um mundo de telas

Nuvem, Conteúdo & Interface

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 !


parceiros


publicações
HTML5 - Embarque Imediato ( 2011 )
Open Web Platform ( em breve )
Livro Digital Et Cetera ( em breve )


obrigado
flatschart.com
quadrodosbemois.com.br
@fabioflat
slideshare.net/fabioflat


Direcao de Arte e Open Web Platform

Mais conteúdo relacionado

Destaque (20)

Semelhante a Direcao de Arte e Open Web Platform (20)

Mais de Fábio Flatschart (20)

Último (15)

Direcao de Arte e Open Web Platform