Fábio FlatschartDIREÇÃO DE ARTE &OPEN WEB PLATFORM                   flatschart.com | janeiro de 2013
bioFábio Flatschart é Gerente de Marketing e Inovação da Soyuz Sistemas e Sócioda Flatschart Consultoria LTDA, empresas co...
introNão é mais possível ter um olhar individual sobre as camadas de conteúdo,apresentação e comportamento na web, pois el...
AQUECIMENTO         flatschart.com | janeiro de 2013
johnson“Qualquer analista profissional de tendências nos dirá que os mundos datecnologia e da cultura estão colidindo. Mas...
macluhan“Were just trying to fit the old things into the new form”MCLUHAN, Marshall                              flatschar...
wagnerRichard Wagner imaginava um universo expressivo onde a música e o teatroseriam o centro nevrálgico de uma experiment...
polímataHomem Vitruviano | Leonardo da Vinci                            flatschart.com | janeiro de 2013                  ...
DIREÇÃO DE ARTE           flatschart.com | janeiro de 2013
as origensO conceito atual de direção de arte começa a ganhar força nos EUA a partirdos anos 40, fruto da necessidade de r...
origensO conceito atual de direção de arte começa a ganhra força nos EUA a partirdos anos 40, fruto da necessidade da publ...
na webTecnológico: O pessoal de informática, computação, engenharia, matemáticae áreas afins – Para eles, a Internet era u...
na webTecnológico: O pessoal de informática, computação, engenharia, matemáticae áreas afins – Para eles, a Internet era u...
webflatschart.com | janeiro de 2013                                   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 s...
OPEN WEB PLATFORM - OWP          flatschart.com | janeiro de 2013
owpÉ a coleção de tecnologias abertas da web onde todos podem implementarcomponentes de software na web sem a necessidade ...
owp“Daqui a dez anos o metrô vai parar na estação e toda sua superfície vai estarcoberta com um adesivo de propaganda, com...
owpNão é mais possível ter um olhar individual sobre as camadas de conteúdo,apresentação e comportamento na web, pois elas...
owpfront end 2000   flatschart.com | janeiro de 2013
owpfront end 2013   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 comercialmenteA maior mudança do HTML5 foi Vídeo, Áudio e Animação         ...
html5 | mitos   HTML5 ainda não pode ser usado comercialmenteA maior mudança do HTML5 foi Vídeo, Áudio e Animação         ...
html5semântica   flatschart.com | janeiro de 2013
html5 | estrutura                  XHTML             HTML5                   <body>           <body>     <div id="topo"></...
html5 | estruturaWireframing > PSD > CODEGrids, pastas & layers com vocabulário semântico controladotopo > header | menu >...
html5 | multimídiaO fim da era dos pluginsCom o amadurecimento do HTML5, começamos a nos distanciar cada vezmais desse uni...
html5 | svgO formato SVG ( imagem vetorial baseada em XML) veio para ficar •   Ícones de navegação •   Elementos de UI •  ...
html5 | webGLDashboard em tempo real mostrando a relação entre latitude, longitude ealtura dos municípios brasileiros. Bas...
html5 | widgetsPackaged Web Apps (Widgets)Games, Anúncios, Displays Interativos, Mashupshttp://www.w3.org/TR/2012/PER-widg...
CSS3       flatschart.com | janeiro de 2013
css3 | tipografiahttp://slides.html5rocks.com/#web-fontshttp://edgefonts.toekneestuck.com                                 ...
css3 | featuresColunas / Transparência / Gradiente / Bordas / Transições / Animaçõeshttp://bernarddeluna.com/xhtml/como-fi...
css3 | regionshttp://dev.w3.org/csswg/css3-regions/http://www.adobe.com/devnet/html5/articles/css3-regions.html           ...
css3 | exclusionshttp://dev.w3.org/csswg/css3-exclusions                                          flatschart.com | janeiro...
css3 | Compositing & Blendinghttps://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.htmlhttp://blogs.adobe.com/webplatf...
css3 | custom filtershttps://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.htmlhttp://html.adobe.com/webstandards/csscust...
epub3https://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            ...
ou pré história ? This is just the beginning, thebeginning of understanding that  cyberspace has no limits, no           b...
um mundo de telasNuvem, Conteúdo & Interface        flatschart.com | janeiro de 2013
fluid knowledgeMúsicos, sociólogos, designers, historiadores,     jornalistas, antropólogos, pedagogos, editores, diagrama...
parceirosflatschart.com | janeiro de 2013
publicaçõesHTML5 - Embarque Imediato ( 2011 )Open Web Platform ( em breve )Livro Digital Et Cetera ( em breve )           ...
obrigadoflatschart.comquadrodosbemois.com.br@fabioflatslideshare.net/fabioflat                 flatschart.com | janeiro de...
Próximos SlideShares
Carregando em…5
×

Direcao de Arte e Open Web Platform

1.810 visualizações

Publicada em

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"

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.810
No SlideShare
0
A partir de incorporações
0
Número de incorporações
636
Ações
Compartilhamentos
0
Downloads
39
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Direcao de Arte e Open Web Platform

  1. 1. Fábio FlatschartDIREÇÃO DE ARTE &OPEN WEB PLATFORM flatschart.com | janeiro de 2013
  2. 2. bioFábio Flatschart é Gerente de Marketing e Inovação da Soyuz Sistemas e Sócioda Flatschart Consultoria LTDA, empresas com as quais participou dodesenvolvimento e implantação de projetos pioneiros nas áreas de Open WebPlatform e Marketing Semântico no Brasil.É autor do livro HTML5 - Embarque Imediato, uma das primeiras publicaçõesem português sobre o assunto.Atua como colunista do portal iMasters e é professor convidado dos maisimportantes cursos de MBA do Brasil (FGV, FIA, Trevisan) flatschart.com | janeiro de 2013
  3. 3. introNã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 semesclam interligadas pela semântica.Não existe mais nada gratuito ou supérfluo, tudo deve ser relevante para aconstrução dos significados. Pensar em direção de arte e desconhecer estenovo cenário, é ignorar a fusão arte & tecnologia, é ignorar o legado dohomem renascentista que está construindo uma nova era, a era da "OpenWeb Platform". flatschart.com | janeiro de 2013
  4. 4. AQUECIMENTO flatschart.com | janeiro de 2013
  5. 5. johnson“Qualquer analista profissional de tendências nos dirá que os mundos datecnologia e da cultura estão colidindo. Mas o que surpreende não é aprópria colisão; é o fato de ela ser considerada novidade”JOHNSON, Steven. Cultura da interface: como o computador transformanossa maneira de criar e comunicar. flatschart.com | janeiro de 2013 2001
  6. 6. macluhan“Were just trying to fit the old things into the new form”MCLUHAN, Marshall flatschart.com | janeiro de 2013 1960
  7. 7. wagnerRichard Wagner imaginava um universo expressivo onde a música e o teatroseriam o centro nevrálgico de uma experimentação complexa emultissensorial que ele chamava de Gesamtkunstwerk (Obra de Arte Total)uma integração dos meios artísticos que buscava recriar e ampliar muitos dosconceitos praticados pelo teatro clássico grego.Bayreuth Festspielhaus (Teatro do Festival de Bayreuth) - Escurecimento daplateia, inclinação dos assentos, recursos cenográficos / arquitetônicos quefavoreciam a reverberação do som em mais de um canal. User Experience  flatschart.com | janeiro de 2013 1876
  8. 8. polímataHomem Vitruviano | Leonardo da Vinci flatschart.com | janeiro de 2013 1492
  9. 9. DIREÇÃO DE ARTE flatschart.com | janeiro de 2013
  10. 10. as origensO conceito atual de direção de arte começa a ganhar força nos EUA a partirdos anos 40, fruto da necessidade de representar o “American Way of Life“ nocinema e na publicidade.Cada detalhe era exagerado em sua carga simbólica na busca de exteriorizar aimagem da perfeição e da supremacia pretendidas pelos americanos. flatschart.com | janeiro de 2013 1940
  11. 11. origensO conceito atual de direção de arte começa a ganhra força nos EUA a partirdos anos 40, fruto da necessidade da publicidade e do cinema de representaro “American Way of Life“.Cada detalhe era exagerado em sua carga simbólica na busca de exteriorizar aimagem da perfeição e da supremacia pretendidas pelos americanos. flatschart.com | janeiro de 2013 1940
  12. 12. na webTecnológico: O pessoal de informática, computação, engenharia, matemáticae áreas afins – Para eles, a Internet era uma nova possibilidade de linguagens,códigos, sintaxes. Geralmente desprovidos de qualquer senso estético, umapágina web era qualquer representação gráfica de um monte de linhas decó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 esonoras, um novo meio de comunicação. De novo o meio era mensagem, a 1997nova aldeia global. flatschart.com | janeiro de 2013
  13. 13. na webTecnológico: O pessoal de informática, computação, engenharia, matemáticae áreas afins – Para eles, a Internet era uma nova possibilidade de linguagens,códigos, sintaxes. Geralmente desprovidos de qualquer senso estético, umapágina web era qualquer representação gráfica de um monte de linhas decó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 esonoras, um novo meio de comunicação. De novo o meio era mensagem, a 1997nova aldeia global. flatschart.com | janeiro de 2013
  14. 14. webflatschart.com | janeiro de 2013 2013
  15. 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. 16. OPEN WEB PLATFORM - OWP flatschart.com | janeiro de 2013
  17. 17. owpÉ a coleção de tecnologias abertas da web onde todos podem implementarcomponentes de software na web sem a necessidade de qualquer aprovaçãoou taxas de licença.Plasticidade + organicidade + modularidade + interatividade = UbiquidadeOffline & Storage | Device Access | Connectivity | Multimedia | 3D, Graphics & Effects | Performance & Integration | CSS3 flatschart.com | janeiro de 2013
  18. 18. owp“Daqui a dez anos o metrô vai parar na estação e toda sua superfície vai estarcoberta com um adesivo de propaganda, como hoje. A diferença é que ele vaiser animado e interativo.Esse adesivo vai rodar Web. Dentro do metrô você vai ver uma propagandaque 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 dinheirovai interagir, para evitar falsificações, com dados de geolocalização erastreabilidade. Pense numa Onça animada na nota de cinquenta reais. Istoestá mais perto do que você pensa” - Clécio Bachinihttp://www.soyuz.com.br/blog/open-web-platform flatschart.com | janeiro de 2013
  19. 19. owpNã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 semesclam interligadas pela semântica. Marcação HTML Apresentação Comportamento APIs CSS JavaScript flatschart.com | janeiro de 2013
  20. 20. owpfront end 2000 flatschart.com | janeiro de 2013
  21. 21. owpfront end 2013 flatschart.com | janeiro de 2013
  22. 22. HTML5 : O CORAÇÃO DA OWP flatschart.com | janeiro de 2013
  23. 23. html5 | mitos HTML5 ainda não pode ser usado comercialmenteA 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. 24. html5 | mitos HTML5 ainda não pode ser usado comercialmenteA 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. 25. html5semântica flatschart.com | janeiro de 2013
  26. 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. 27. html5 | estruturaWireframing > PSD > CODEGrids, pastas & layers com vocabulário semântico controladotopo > header | menu > nav | rodape > footerCase : Migração do fluxo de trabalho para produção de apresentações emHTML5 para Sistema UNO Internacional do Grupo Santillana / EditoraModerna flatschart.com | janeiro de 2013
  28. 28. html5 | multimídiaO fim da era dos pluginsCom o amadurecimento do HTML5, começamos a nos distanciar cada vezmais 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 qualplugins não são mais necessários e o carregamento, o processamento e ocontrole passam a depender do browser, e não mais de soluções proprietáriasde terceiros.exemplo <audio> & <video> flatschart.com | janeiro de 2013
  29. 29. html5 | svgO 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. 30. html5 | webGLDashboard em tempo real mostrando a relação entre latitude, longitude ealtura dos municípios brasileiros. Baseado em dados abertos, esta é umaexperiência de visualização de dados utilizando webGL.http://labs.soyuz.com.br/dash flatschart.com | janeiro de 2013
  31. 31. html5 | widgetsPackaged Web Apps (Widgets)Games, Anúncios, Displays Interativos, Mashupshttp://www.w3.org/TR/2012/PER-widgets-20120925 flatschart.com | janeiro de 2013
  32. 32. CSS3 flatschart.com | janeiro de 2013
  33. 33. css3 | tipografiahttp://slides.html5rocks.com/#web-fontshttp://edgefonts.toekneestuck.com flatschart.com | janeiro de 2013
  34. 34. css3 | featuresColunas / Transparência / Gradiente / Bordas / Transições / Animaçõeshttp://bernarddeluna.com/xhtml/como-fizemos-o-oldradiohttps://developer.mozilla.org/en-US/demos/detail/old-radio/launch flatschart.com | janeiro de 2013
  35. 35. css3 | regionshttp://dev.w3.org/csswg/css3-regions/http://www.adobe.com/devnet/html5/articles/css3-regions.html flatschart.com | janeiro de 2013
  36. 36. css3 | exclusionshttp://dev.w3.org/csswg/css3-exclusions flatschart.com | janeiro de 2013
  37. 37. css3 | Compositing & Blendinghttps://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.htmlhttp://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web flatschart.com | janeiro de 2013
  38. 38. css3 | custom filtershttps://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.htmlhttp://html.adobe.com/webstandards/csscustomfilters/cssfilterlabhttp://adobe.github.com/web-platform/samples/css-customfilters flatschart.com | janeiro de 2013
  39. 39. epub3https://code.google.com/p/epub-samples/ flatschart.com | janeiro de 2013
  40. 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. 41. ou pré história ? This is just the beginning, thebeginning of understanding that cyberspace has no limits, no boundaries Nicholas Negroponte MIT flatschart.com | janeiro de 2013
  42. 42. um mundo de telasNuvem, Conteúdo & Interface flatschart.com | janeiro de 2013
  43. 43. fluid knowledgeMú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. 44. parceirosflatschart.com | janeiro de 2013
  45. 45. publicaçõesHTML5 - Embarque Imediato ( 2011 )Open Web Platform ( em breve )Livro Digital Et Cetera ( em breve ) flatschart.com | janeiro de 2013
  46. 46. obrigadoflatschart.comquadrodosbemois.com.br@fabioflatslideshare.net/fabioflat flatschart.com | janeiro de 2013

×