Direcao de Arte e Open Web Platform

flatschart.com | janeiro de 2013

DIREÇÃO DE ARTE & OPEN WEB PLATFORM

Fábio Flatschart


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 nova aldeia global.

1997


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

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

APIs HTML

Apresentação CSS

Comportamento JavaScript


owp

front end 2000


front end 2013

owp


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 <body>

<div id="topo"></div>

<div id="navegacao"></div>

<div id="principal"></div>

<div id="lateral"></div>

<div id="rodape"></div>

</body>

HTML5 <body>

<header></header>

<nav></nav>

<article></article>

<aside></aside>

<footer></footer>

</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>

http://beta.theexpressiveweb.com/


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>

http://labs.soyuz.com.br/gamew3c/


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

http://labs.soyuz.com.br/dash

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

http://www.w3.org/TR/2012/PER-widgets-20120925






CSS3


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

http://slides.html5rocks.com/
















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

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

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

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

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

https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html



















http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab




























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

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

http://faberludens.com.br/

http://www.soyuz.com.br/

http://www.seofish.com.br/


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

http://flatschart.com/html5/


obrigado

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

http://flatschart.com/

http://quadrodosbemois.com.br/

https://twitter.com/fabioflat

http://www.slideshare.net/fabioflat

Direcao de Arte e Open Web Platform

Design

Transcript of Direcao de Arte e Open Web Platform