Upload
fabio-flatschart
View
1.323
Download
1
Embed Size (px)
DESCRIPTION
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"
Citation preview
flatschart.com | janeiro de 2013
DIREÇÃO DE ARTE & OPEN WEB PLATFORM
Fábio Flatschart
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)
flatschart.com | janeiro de 2013
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
AQUECIMENTO
flatschart.com | janeiro de 2013
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
flatschart.com | janeiro de 2013
macluhan “We're just trying to fit the old things into the new form” MCLUHAN, Marshall
1960
flatschart.com | janeiro de 2013
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
flatschart.com | janeiro de 2013
polímata Homem Vitruviano | Leonardo da Vinci
1492
flatschart.com | janeiro de 2013
DIREÇÃO DE ARTE
flatschart.com | janeiro de 2013
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
flatschart.com | janeiro de 2013
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
flatschart.com | janeiro de 2013
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
flatschart.com | janeiro de 2013
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
flatschart.com | janeiro de 2013
web
2013
flatschart.com | janeiro de 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
flatschart.com | janeiro de 2013
OPEN WEB PLATFORM - OWP
flatschart.com | janeiro de 2013
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
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
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
flatschart.com | janeiro de 2013
owp
front end 2000
flatschart.com | janeiro de 2013
front end 2013
owp
flatschart.com | janeiro de 2013
HTML5 : O CORAÇÃO DA OWP
flatschart.com | janeiro de 2013
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
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
html5
semântica
flatschart.com | janeiro de 2013
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>
flatschart.com | janeiro de 2013
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
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
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
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
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
CSS3
flatschart.com | janeiro de 2013
css3 | tipografia http://slides.html5rocks.com/#web-fonts http://edgefonts.toekneestuck.com
flatschart.com | janeiro de 2013
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
css3 | regions
http://dev.w3.org/csswg/css3-regions/ http://www.adobe.com/devnet/html5/articles/css3-regions.html
flatschart.com | janeiro de 2013
css3 | exclusions
http://dev.w3.org/csswg/css3-exclusions
flatschart.com | janeiro de 2013
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
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
epub3 https://code.google.com/p/epub-samples/
flatschart.com | janeiro de 2013
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
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
um mundo de telas
Nuvem, Conteúdo & Interface
flatschart.com | janeiro de 2013
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
parceiros
flatschart.com | janeiro de 2013
publicações HTML5 - Embarque Imediato ( 2011 ) Open Web Platform ( em breve ) Livro Digital Et Cetera ( em breve )
flatschart.com | janeiro de 2013
obrigado
flatschart.com quadrodosbemois.com.br @fabioflat slideshare.net/fabioflat