O papel do "devigner" e as novidades do HTML5
O novo profissional de Interfaces
O Surgimento da Web <ul><li>A web surgiu na década de 80 em um centro de pesquisa científica (CERN) </li></ul><ul><li>Cara...
Aplicações na Web <ul><li>A web nasceu para oferecer conteúdo estático. </li></ul><ul><li>Entretando, o servidor web foi a...
Ajax <ul><li>Em 2005 a Web vivenciou a revolução do Ajax </li></ul><ul><ul><li>Aplicações Web podem obter dados do servido...
O Desktop foi para a Web
O novo profissional  <ul><li>O desenvolvedor de interfaces ganha novas atribuições. </li></ul><ul><li>O profissional passa...
HTML 5
O que as aplicações usam hoje? <ul><li>Plugins supriram algumas necessidades:  </li></ul><ul><ul><li>Video </li></ul></ul>...
O novo HTML <ul><li>Web Hypertext Application Technology Working Group (WHATWG) </li></ul><ul><ul><li>Fundado por Apple, M...
O que há de novo? <ul><li>Novos elementos com valor semântico </li></ul><ul><ul><li>section, nav, footer, header, aside, d...
Já posso usar HTML 5? <ul><li>O padrão ainda está no status de “Working Draft” </li></ul><ul><li>Novas versões dos browser...
Canvas A estrela do HTML 5
O elemento <canvas> <ul><li>Grandes estrela do HTML 5 </li></ul><ul><li>Uma das primeiras funcionalidades implementada pel...
Exemplos: Animações <ul><li>Audioburst Animation </li></ul><ul><ul><li>http://9elements.com/io/projects/html5/canvas </li>...
Exemplos: 3D <ul><li>Cloth Simulation </li></ul><ul><ul><li>http://www.andrew-hoyer.com/experiments/cloth/ </li></ul></ul>...
Exemplos: Aplicações <ul><li>Darkroom </li></ul><ul><ul><li>http://mugtug.com/darkroom/ </li></ul></ul><ul><li>CanvasMol <...
Exemplos: Jogos <ul><li>Chain Reaction </li></ul><ul><ul><li>http://www.yvoschaap.com/chainrxn/ </li></ul></ul><ul><li>Cub...
Primeiros passos <canvas  id=“exemplo” width=“300&quot; height=“300&quot; >   Texto exibido caso o navegador não seja comp...
Audio e Video
O novo padrão de audio e video <ul><li>Até agora, o Flash era o padrão de video para Web </li></ul><ul><li>HTML 5 propõe: ...
<audio> <ul><li>autoplay : reproduz o arquivo quando a página carrega. </li></ul><ul><li>controls : exibe os controles de ...
<video> <ul><li>autoplay : reproduz o video quando a página carrega. </li></ul><ul><li>controls : exibe os controles de re...
<video> API <ul><li>Atributos: </li></ul><ul><ul><li>duration </li></ul></ul><ul><ul><li>volume </li></ul></ul><ul><ul><li...
Exemplos <ul><li>Vimeo </li></ul><ul><ul><li>http://vimeo.com/7289439 </li></ul></ul><ul><li>Video Destruction </li></ul><...
Miscelânea
Semântica <ul><li>Novas entidas para darem mais entendimento ao conteúdo. </li></ul>
Novos Seletores <ul><li>API DOM: </li></ul>element = document. getElementById ('section1'); elements = document. getElemen...
Armazenamento Local <ul><li>Provê uma maneira de armazenar dados no cliente. </li></ul><ul><li>Útil em aplicações que pode...
Drag and Drop <ul><li>Uma nova API de manipulação de arquivos foi criada. </li></ul><ul><li>É possível manipular arquivos ...
Workers <ul><li>Aplicações nativas possuem processos e threads. </li></ul><ul><li>Workers permitem criar processamento con...
Geolocalização <ul><li>É possível obter a posição geográfica do usuário. </li></ul><ul><li>A localização pode ser obtida d...
Flash
O futuro do Flash <ul><li>O Flash vai morrer? </li></ul><ul><ul><li>“ Acho que não, não num futuro próximo” </li></ul></ul...
Quando usar Flash? <ul><li>O Flash é indicado para criar: </li></ul><ul><ul><li>Aplicações, Ferramentas e Jogos </li></ul>...
Demonstrações <ul><li>Chrome Experiments </li></ul><ul><ul><li>http://www.chromeexperiments.com/ </li></ul></ul><ul><li>Ap...
<ul><li>Ricardo Paiva </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter: @werneckpaiva </li></ul>
Próximos SlideShares
Carregando em…5
×

Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09

717 visualizações

Publicada em

Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09

  1. 1. O papel do &quot;devigner&quot; e as novidades do HTML5
  2. 2. O novo profissional de Interfaces
  3. 3. O Surgimento da Web <ul><li>A web surgiu na década de 80 em um centro de pesquisa científica (CERN) </li></ul><ul><li>Características: </li></ul><ul><ul><li>Documentos em formato hipertexto </li></ul></ul><ul><ul><li>Arquitetura cliente-servidor </li></ul></ul><ul><ul><li>Browser como ferramenta cliente </li></ul></ul><ul><ul><li>Protocolo de comunicação (HTTP) </li></ul></ul><ul><ul><li>Linguagem de formatação de documentos (HTML) </li></ul></ul><ul><ul><li>Localizador universal (URL) </li></ul></ul>
  4. 4. Aplicações na Web <ul><li>A web nasceu para oferecer conteúdo estático. </li></ul><ul><li>Entretando, o servidor web foi adaptado para permitir alterar/gerar conteúdo, em tempo real, antes de enviá-lo para o usuário. </li></ul>CGI
  5. 5. Ajax <ul><li>Em 2005 a Web vivenciou a revolução do Ajax </li></ul><ul><ul><li>Aplicações Web podem obter dados do servidor assincronamente, sem interferir no conteúdo que está sendo exibido para o usuário. </li></ul></ul><ul><li>A partir de um conceito simples, um universo de novas oportunidades surgiram. </li></ul>
  6. 6. O Desktop foi para a Web
  7. 7. O novo profissional <ul><li>O desenvolvedor de interfaces ganha novas atribuições. </li></ul><ul><li>O profissional passa de apenas um “montador” de HTML, para um desenvolvedor altamente capacitado. </li></ul><ul><li>Tecnologias de interface não param de evoluir: </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Java Script </li></ul></ul><ul><ul><li>Flash / Flex / ActionScript </li></ul></ul><ul><ul><li>Silverlight </li></ul></ul><ul><ul><li>Frameworks Javascript (jQuery, extJS, prototype, YUI etc) </li></ul></ul><ul><ul><li>Padrões web, SEO, Semântica, Acessibilidade, Mobilidade... </li></ul></ul>
  8. 8. HTML 5
  9. 9. O que as aplicações usam hoje? <ul><li>Plugins supriram algumas necessidades: </li></ul><ul><ul><li>Video </li></ul></ul><ul><ul><li>Animação </li></ul></ul><ul><ul><li>Webcam / Microfone </li></ul></ul><ul><ul><li>Melhores upload de arquivos </li></ul></ul><ul><ul><li>Geolocalização </li></ul></ul><ul><ul><li>Armazenamento offline </li></ul></ul><ul><ul><li>3D </li></ul></ul><ul><ul><li>Audio </li></ul></ul><ul><ul><li>Drag and Drop de arquivos </li></ul></ul>
  10. 10. O novo HTML <ul><li>Web Hypertext Application Technology Working Group (WHATWG) </li></ul><ul><ul><li>Fundado por Apple, Mozilla Foundation, Opera Software </li></ul></ul><ul><ul><li>Liderado por Ian Hickson (atual Google) </li></ul></ul><ul><li>O objetivo do HTML5 é: </li></ul><ul><ul><li>Expandir os recursos do HTML e XHTML </li></ul></ul><ul><ul><li>Definir as APIs que formam a base da arquitetura Web </li></ul></ul><ul><ul><li>Formalizar a especificação de APIs antigas e não documentadas </li></ul></ul><ul><ul><li>Tornar elementos obsoletos (font, center, s, big etc) </li></ul></ul><ul><li>Em 2007, o W3C adotou a especificação criada, como ponto de partida para o HTML5 </li></ul>
  11. 11. O que há de novo? <ul><li>Novos elementos com valor semântico </li></ul><ul><ul><li>section, nav, footer, header, aside, details... </li></ul></ul><ul><li>Novos componentes de formulário </li></ul><ul><ul><li>tel, search, url, email, datetime, range, number, color... </li></ul></ul><ul><li>Elemento Canvas </li></ul><ul><li>Extensões na API DOM </li></ul><ul><li>Video e Audio </li></ul><ul><li>Drag and Drop de arquivos </li></ul><ul><li>Geolocalização </li></ul><ul><li>Gerenciamento de histórico </li></ul><ul><li>Armazenamento Offline (Web Storage) </li></ul><ul><li>Cache </li></ul><ul><li>Threads (Web Worker) </li></ul><ul><li>Web Sockets </li></ul>
  12. 12. Já posso usar HTML 5? <ul><li>O padrão ainda está no status de “Working Draft” </li></ul><ul><li>Novas versões dos browsers já implementam boa parte da especificação: Firefox 3.5, Opera 10, Safari 5, Chrome 5, IE9 </li></ul><ul><ul><li>No momento que for finalizada, a especificação já estará totalmente implementada e utilizável. </li></ul></ul><ul><li>É possível detectar existência da funcionalidade; </li></ul><ul><li>Algumas aplicações oferecem recursos avançados apenas quando há compatibilidade: </li></ul><ul><ul><li>Ex: drag and drop de arquivos no Gmail </li></ul></ul>
  13. 13. Canvas A estrela do HTML 5
  14. 14. O elemento <canvas> <ul><li>Grandes estrela do HTML 5 </li></ul><ul><li>Uma das primeiras funcionalidades implementada pelos browsers. </li></ul><ul><li>Provê uma área onde é possível criar elementos gráficos </li></ul><ul><ul><li>2D </li></ul></ul><ul><ul><li>3D (WebGL) </li></ul></ul><ul><li>Permite a manipulação de objetos gráficos através de uma API JavaScript </li></ul><ul><ul><li>API de baixo nível </li></ul></ul><ul><ul><li>Alta performance </li></ul></ul><ul><ul><li>Renderizado como um bitmap </li></ul></ul>
  15. 15. Exemplos: Animações <ul><li>Audioburst Animation </li></ul><ul><ul><li>http://9elements.com/io/projects/html5/canvas </li></ul></ul><ul><li>Ball Pool </li></ul><ul><ul><li>http://mrdoob.com/projects/chromeexperiments/ball_pool/ </li></ul></ul><ul><li>Liquid Particles </li></ul><ul><ul><li>http://spielzeugz.de/html5/liquid-particles.html </li></ul></ul><ul><li>Interactive Polaroid </li></ul><ul><ul><li>http://www.addyosmani.com/resources/canvasphoto/ </li></ul></ul><ul><li>Kaleidoscope </li></ul><ul><ul><li>http://www.chiptune.com/kaleidoscope/ </li></ul></ul><ul><li>Starfield </li></ul><ul><ul><li>http://www.chiptune.com/starfield/starfield.html </li></ul></ul>
  16. 16. Exemplos: 3D <ul><li>Cloth Simulation </li></ul><ul><ul><li>http://www.andrew-hoyer.com/experiments/cloth/ </li></ul></ul><ul><li>Graphycalc </li></ul><ul><ul><li>http://www.graphycalc.com </li></ul></ul><ul><li>Pre3d </li></ul><ul><ul><li>http://deanm.github.com/pre3d/monster.html </li></ul></ul>
  17. 17. Exemplos: Aplicações <ul><li>Darkroom </li></ul><ul><ul><li>http://mugtug.com/darkroom/ </li></ul></ul><ul><li>CanvasMol </li></ul><ul><ul><li>http://alteredqualia.com/canvasmol/ </li></ul></ul><ul><li>Sketchpad </li></ul><ul><ul><li>http://mugtug.com/sketchpad </li></ul></ul><ul><li>Smalltalk App </li></ul><ul><ul><li>http://smalltalkapp.com </li></ul></ul><ul><li>RGraph </li></ul><ul><ul><li>http://www.rgraph.net/ </li></ul></ul>
  18. 18. Exemplos: Jogos <ul><li>Chain Reaction </li></ul><ul><ul><li>http://www.yvoschaap.com/chainrxn/ </li></ul></ul><ul><li>Cubeout </li></ul><ul><ul><li>http://alteredqualia.com/cubeout </li></ul></ul>
  19. 19. Primeiros passos <canvas id=“exemplo” width=“300&quot; height=“300&quot; > Texto exibido caso o navegador não seja compatível com Canvas. </canvas> var example = document. getElementById ('example'); var context = example. getContext ('2d'); context. fillStyle = &quot;rgb(255,0,0)&quot;; context. fillRect (30, 30, 50, 50);
  20. 20. Audio e Video
  21. 21. O novo padrão de audio e video <ul><li>Até agora, o Flash era o padrão de video para Web </li></ul><ul><li>HTML 5 propõe: </li></ul><ul><ul><li>Entidades simples para reproduzir audio e video </li></ul></ul><ul><ul><li>API JS para manipulação </li></ul></ul><ul><ul><li>Acesso ao acelerador gráfico em hardware (GPU) </li></ul></ul><ul><li>Ainda não há consenso para o formato a ser adotado: </li></ul><ul><ul><li>H.264 (mov, mp4) – Safari, Chrome </li></ul></ul><ul><ul><ul><li>Rápido e eficiente / Proprietário e pago </li></ul></ul></ul><ul><ul><li>Ogg (Theora) – Firefox, Opera </li></ul></ul><ul><ul><ul><li>Open source / Inferior e sem suporte em hardware </li></ul></ul></ul>
  22. 22. <audio> <ul><li>autoplay : reproduz o arquivo quando a página carrega. </li></ul><ul><li>controls : exibe os controles de reprodução. </li></ul><ul><li>preload : pré-carrega o arquivo (buffer) </li></ul><ul><li>src : caminho para o arquivo </li></ul><ul><li>loop : o audio é sempre reiniciado quando chega ao final </li></ul><ul><li><source> : variações de formato do mesmo arquivo </li></ul><audio autoplay controls> <source src=&quot;file.ogg&quot; /> <source src=&quot;file.mp3&quot; /> </audio>
  23. 23. <video> <ul><li>autoplay : reproduz o video quando a página carrega. </li></ul><ul><li>controls : exibe os controles de reprodução. </li></ul><ul><li>autobuffer : pré-carrega o video (buffer) </li></ul><video width=‘400’ height=‘300’ controls autobuffer> <source src=‘video1.mp4' type='video/mp4‘ /> <source src=‘video1.ogv' type='video/ogg‘ /> </audio>
  24. 24. <video> API <ul><li>Atributos: </li></ul><ul><ul><li>duration </li></ul></ul><ul><ul><li>volume </li></ul></ul><ul><ul><li>currentTime </li></ul></ul><ul><ul><li>muted </li></ul></ul><ul><li>Eventos: </li></ul><ul><ul><li>progress </li></ul></ul><ul><ul><li>ended </li></ul></ul><ul><ul><li>Pause </li></ul></ul>if (video. paused == false) { video. pause() ; } else { video. play() ; }
  25. 25. Exemplos <ul><li>Vimeo </li></ul><ul><ul><li>http://vimeo.com/7289439 </li></ul></ul><ul><li>Video Destruction </li></ul><ul><ul><li>http://craftymind.com/factory/html5video/CanvasVideo.html </li></ul></ul><ul><li>HTML5 video.org </li></ul><ul><ul><li>http://www.html5video.org </li></ul></ul><ul><li>Player Sublime Video </li></ul><ul><ul><li>http://sublimevideo.net/ </li></ul></ul>
  26. 26. Miscelânea
  27. 27. Semântica <ul><li>Novas entidas para darem mais entendimento ao conteúdo. </li></ul>
  28. 28. Novos Seletores <ul><li>API DOM: </li></ul>element = document. getElementById ('section1'); elements = document. getElementsByTagName ('div'); elements = document. getElementsByClassName (‘p'); <ul><li>Sintaxe CSS: </li></ul>elements = document. querySelectorAll (‘ul#opcoes li'); elements = document. querySelectorAll (‘#content .obs'); elements = document. querySelectorAll (‘div > p');
  29. 29. Armazenamento Local <ul><li>Provê uma maneira de armazenar dados no cliente. </li></ul><ul><li>Útil em aplicações que podem rodar offline. </li></ul><ul><li>Duas APIs: </li></ul><ul><ul><li>Base de dados (SQL lite database) </li></ul></ul><ul><ul><li>Armazenamento estruturado (par chave/valor) </li></ul></ul>element = document. getElementById ('section1'); elements = document. getElementsByTagName ('div'); elements = document. getElementsByClassName (‘p');
  30. 30. Drag and Drop <ul><li>Uma nova API de manipulação de arquivos foi criada. </li></ul><ul><li>É possível manipular arquivos provenientes de fora do browser. </li></ul><ul><li>Novas classes: </li></ul><ul><ul><li>FileList – Lista de arquivos selecionada do </li></ul></ul><ul><ul><li>Blob – Representa dados binários </li></ul></ul><ul><ul><li>File – Possui atributos do arquivo (nome, mediatype etc) </li></ul></ul><ul><ul><li>FileReader - Permite ler um arquivo </li></ul></ul><ul><li>Novos eventos para capturar as interações de Drag and Drop </li></ul>
  31. 31. Workers <ul><li>Aplicações nativas possuem processos e threads. </li></ul><ul><li>Workers permitem criar processamento concorrente. </li></ul><ul><li>Um processamento pesado pode ser colocado em uma thread separada. </li></ul><ul><ul><li>A aplicação não fica bloqueada enquanto o cálculo é realizado. </li></ul></ul><ul><ul><li>Util na construção de jogos. </li></ul></ul><ul><ul><li>Pode fazer melhor uso de processadores multicore. </li></ul></ul>
  32. 32. Geolocalização <ul><li>É possível obter a posição geográfica do usuário. </li></ul><ul><li>A localização pode ser obtida de várias fontes: </li></ul><ul><ul><li>GPS </li></ul></ul><ul><ul><li>Triangulação de celular </li></ul></ul><ul><ul><li>IP Address </li></ul></ul><ul><ul><li>WiFi </li></ul></ul>if (navigator. geolocation ) { navigator. geolocation . getCurrentPosition ( function(pos){ var lat = pos. coords . latitude ; var lng = pos. coords . longitude ; }); }
  33. 33. Flash
  34. 34. O futuro do Flash <ul><li>O Flash vai morrer? </li></ul><ul><ul><li>“ Acho que não, não num futuro próximo” </li></ul></ul><ul><li>Vantagens </li></ul><ul><ul><li>Multiplataforma e Cross-browser </li></ul></ul><ul><ul><li>Actionscript 3 é uma linguagem muito madura. </li></ul></ul><ul><ul><li>Acesso a dispositivos (microfone, webcam) </li></ul></ul><ul><ul><li>Formato de video consagrado </li></ul></ul><ul><ul><li>Facilidade de criar e customizar componentes </li></ul></ul><ul><li>Desvantagens </li></ul><ul><ul><li>SEO (Search Engine Optimization) </li></ul></ul><ul><ul><li>Incompatibilidade com dispositivos móveis </li></ul></ul><ul><ul><li>Tecnologia proprietária </li></ul></ul>
  35. 35. Quando usar Flash? <ul><li>O Flash é indicado para criar: </li></ul><ul><ul><li>Aplicações, Ferramentas e Jogos </li></ul></ul><ul><li>O Flash não é indicado como ferramenta de conteúdo. </li></ul><ul><ul><li>Problemas com SEO e acessibilidade. </li></ul></ul><ul><li>Aplicações Enterprise: </li></ul><ul><ul><li>Acesso remoto usando protocolo binário (AMF) </li></ul></ul><ul><ul><li>Frameworks MVC : Swiz, Cairngorm, Mate, pureMVC etc </li></ul></ul><ul><li>Benchmarks indicam que o Flash tem performance superior ao Canvas. </li></ul><ul><ul><li>http://www.themaninblue.com/writing/perspective/2010/03/22/ </li></ul></ul>
  36. 36. Demonstrações <ul><li>Chrome Experiments </li></ul><ul><ul><li>http://www.chromeexperiments.com/ </li></ul></ul><ul><li>Apple </li></ul><ul><ul><li>http://www.apple.com/html5/ </li></ul></ul><ul><li>48 Potential Flash-Killing Demos </li></ul><ul><ul><li>http://www.hongkiat.com/blog/48-excellent-html5-demos/ </li></ul></ul>
  37. 37. <ul><li>Ricardo Paiva </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter: @werneckpaiva </li></ul>

×