HTML5, CSS3 e o futuro da web

1.640 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.640
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
70
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5, CSS3 e o futuro da web

  1. 1.
  2. 2. SOBRE O PALESTRANTE<br />Desenvolvedor Web e líder técnico do projeto ICD (Intercâmbio de Conteúdos Digitais) pela Dynavideo<br /> Mestrando em Informática pela UFPB<br /> Tecnólogo em Sistemas para Internet pelo IFPB<br />
  3. 3. ROTEIRO<br /> VISÃO GERAL<br /> FORMULÁRIOS<br /> MULTIMÍDIA<br /> A NOVA GERAÇÃO DE APLICAÇÕES WEB<br /> CSS 3<br /> DEMONSTRAÇÕES<br />
  4. 4. VISÃO GERAL<br />
  5. 5. 1. Histórico de versões<br />
  6. 6. 1. Histórico de versões<br />
  7. 7. 2. HTML 5 e suas mudanças<br />Lançado o HTML a W3c alertou sobre as boas práticas;<br /> Como separação da estrutura do código e formatação; <br /> Porém, HTML4 não trazia diferença real para semântica;<br /> HTML4 também não facilitava manipulação de elementos via Javascript ou CSS<br /> Ex.: Draganddrop<br />
  8. 8. 2. HTML 5 e suas mudanças<br /> Criação de APIs que formarão a base da arquitetura Web<br /> Fácil manipulação de objetos de forma transparente ao usuário<br /> Ferramentas para CSS e Javascript<br /> Novas tags e recursos<br /> Seções, componentes de formulário, gráficos, multimídia, etc<br /> Maior semântica, código interoperável<br />Retrocompatibilidade<br />
  9. 9. 3. ESTRUTURA BÁSICA<br /><!DOCTYPE HTML><br /><htmllang="pt-br"><br /><head><br /><metacharset="UTF-8"><br /><linkrel="stylesheet" type="text/css" ref="estilo.css"> <br /><title></title> <br /></head><br /><body><br /></body> <br /></html><br />Doctype: indica a especificação em uso ao browser ou dispositivo<br />HTML: lang é necessário para que os user-agents saibam a linguagem principal do documento<br />Link: rel pode assumir outros valores como ALTERNATE, mapeando por exemplo um feed como (application/atom+xml)<br />
  10. 10. Flow<br />Interactive<br />Phrasing<br />Heading<br />Embedded<br />Sectioning<br />Metadata<br />Flow: <br />a abbraddressarea* articleasideaudio b bdoblockquotebrbuttoncanvas cite codecommanddatalistdeldetailsdfn div dl em embedfieldset figure footerform h1 h2 h3 h4 h5 h6 header hgrouphr i iframeimg input inskbdkeygenlabel link* mapmarkmath menu meta* meter navnoscriptobjectol output p preprogress q rubysamp script sectionselect small spanstrong style* sub supsvgtabletextarea time ul var videowbr<br />PhrasingContent: <br />a* abbrarea* audio b bdobrbuttoncanvas cite codecommanddatalistdel* dfn em embed i iframeimg input ins* kbdkeygenlabel link* map* markmath meta* meter noscriptobject output progress q rubysamp script select small spanstrong sub supsvgtextarea time var videowbrText*<br />* Sob algumas circunstâncias.<br />Embedded: <br />Audio, canvas, embed, iframe, img, math, object, svg, video<br />Metadata: <br />Base, command, link, meta, noscript, script, style, title<br />Interactive: <br />a, audio*, button, details, embed, iframe, img*, input*, keygen, label, menu*, object*, select, textarea, video*<br />* Sob algumas circunstâncias.<br />Heading: <br />h1, h2, h3, h4, h5, h6, hgroup<br />Sectioning: <br />Article, aside, nav, section<br />
  11. 11. 4. Novos elementos e atributos<br /> HTML deve indicar o tipo da informação exibida;<br /> Robôs de busca não conseguem diferenciá-los.<br /> Em versões anteriores, era possível diferenciar um parágrafo de um título, mas não o rodapé do cabeçalho;<br />Quando lemos um livro é fácil identificar os tipos;<br />Cabe ao desenvolvedor marcar a informação;<br /> Essa diferenciação era percebida apenas visualmente;<br /> Não havia maneira de detectar automaticamente estes elementos<br /><ul><li>elementos;</li></li></ul><li>5. Novos elementos e atributos<br />Como era... <br /><divid="header"><br /><div<br />id="nav"><br /><divid="content"><br /><divid="right"><br /><divclass="article"><br /><divid="footer"><br />
  12. 12. 5. Novos elementos e atributos<br />Como será... <br /> HTML 5 trouxe elementos que ajudam a definir setores principais;<br /> Pode-se diferenciar áreas como sidebar, rodapé, cabeçalho;<br /> Tais mudanças simplificam o trabalho dos sistemas de busca;<br /><header><br /><section><br /><nav><br /><aside><br /><article><br /><footer><br />
  13. 13. 5. Novos elementos e atributos<br />
  14. 14. 6. Elementos descontinuados<br />
  15. 15. 7. SUPORTE ATUAL PELOS BROWSERS<br /> Desenvolvimento Modular<br /> Motores de renderização:<br />Webkit alcança aparelhos como Blackberry, iPhone, iPodTouch, iPad e dispositivos que rodam Android<br />
  16. 16. 8. COMPATIBILIDADE COM HTML5<br /> Atualmente Webkit é o motor mais compatível<br /> Firefox e opera já estão compatíveis com boa parte<br />
  17. 17. FORMULÁRIOS<br />
  18. 18. 1. Novos valores para o atributo type<br />
  19. 19. 2. Datas e Horas<br /><input type=“datetime“ step=“10” /><br />Outros tipos disponíveis:<br />datetime<br />date<br />month<br />week<br />time<br />datetime-local<br />
  20. 20. 3. Números<br /><input value=“7“ type=“number“ step=“1” min=“1” max=“20” /><br /><input value=“7“ type=“range“ step=“1” min=“1” max=“20” /><br />
  21. 21. 4. TIPOS DE DADOS E VALIDADORES<br /><ul><li> Foco automático antes do carregamento da página:</li></ul><input name=“login“ type=“autofocus“/><br /><ul><li> Suporte a placeholder:</li></ul><input placeHolder=“Seu login aqui”/><br /><ul><li>Required:</li></ul><input name=“login” required/><br /><ul><li>Max-length para textarea:</li></ul><textareamaxlength=“50”></textarea><br />
  22. 22. 4. TIPOS DE DADOS E VALIDADORES<br /><ul><li> Validação com REGEX:</li></ul><input name=“CEP“ pattern=“d{5}-?d{3}“/><br /><ul><li> Submeter sem validação:</li></ul><input type=“submit” formnovalidate/><br /><ul><li> Validador personalizado:</li></ul>functionvCPF(i){<br />i.setCustomValidity(validaCPF(i.value)?'':'CPF inválido!')<br />}<br /><input name=“cpf” oninput=“vCPF(this)” /><br />
  23. 23. 5. COMPONENTES WEB APPLICATION<br /><ul><li> Barra de progresso</li></ul><progressbarmax=“100“ value=“75“/><br /><ul><li> Detalhes e sumário</li></ul><details> <br /><summary>Copiando <br /><progressmax="39248" value="14718"> 37,5%</summary> <br /><dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> <dt>Taxa de transferência:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl> <br /></details><br />
  24. 24. 5. COMPONENTES WEB APPLICATION<br /><ul><li> Conteúdo editável</li></ul><div contenteditable=“true“>Edite-me</div><br /><ul><li> Revisão ortográfica e gramatical</li></ul>spellcheck=“true“<br /><ul><li> Utiliza o revisor ortográfico disponível na plataforma
  25. 25. Controle pode ser feito individualmente para cada elemento</li></li></ul><li>5. COMPONENTES WEB APPLICATION<br /><ul><li>DragandDrop</li></ul>Eventos do objeto arrastado :<br />Dragstart, drag, dragend<br />Eventos do objeto que recebe o outro:<br />dragenter, dragleave, dragover, drop<br /><div id="box" ondrop="returndragDrop(event)" ondragover="returndragOver(event)"><div id="drag" draggable="true" ondragstart="returndragStart(event)">drag me</div> <div id="drag2" draggable="true" ondragstart="returndragStart(event)">drag me</div> </div><br />
  26. 26. MULTIMÍDIA<br />
  27. 27. 1. ÁUDIO<br /><audiosrc=“musica.oga“ controls=“true”autoplay=“true” /><br /><ul><li> Se controls for desabilitado será preciso controlar as operações do player via javascript</li></li></ul><li>1. ÁUDIO<br /><ul><li> Nem todo browser suporta o codec livre OggVorbis
  28. 28. É preciso oferecer um formato alternativo de áudio
  29. 29. Ou até mesmo uma opção para baixar o conteúdo</li></ul><audiocontrols=“true” autoplay=“true”/><br /> <source src=“musica.oga” /><br /> <source src=“musica.mp3” /><br /> <source src=“musica.wma” /><br /><p>Faça o download <a href=“musica.mp3”>da música</a>.</p><br /></audio><br />
  30. 30. 2. VÍDEO<br /><videosrc=“video.ogv“ width=“400” height=“300” /><br />
  31. 31. 2. VÍDEO<br /><ul><li> Também suporta controle com vários sources</li></ul><videocontrols=“true” autoplay=“true”/><br /> <source src=“video.ogg” /><br /> <source src=“video.mp4” /><br /> <source src=“video.wmv” /><br /><p>Faça o download <a href=“video.mp4”>do vídeo</a>.</p><br /></video><br />
  32. 32. 2. VÍDEO - CODECS<br /><ul><li> É importante incluir informações a respeito do container e codecs utilizados
  33. 33. Isso antecipa a detecção de alguma incompatibilidade
  34. 34. A extensão do arquivo não é relevante para isso
  35. 35. Para indicar essas informações usa-se o atributo type
  36. 36. Para OGG usando os codecsTheora e Vorbis:</li></ul> <source src=“video.ogv” type=‘video/ogg; codecs=“theora,vorbis”’ /><br /><ul><li> Para MPEG-4:</li></ul> <source src=“video.mp4” type=‘video/mp4; codecs=“mp4v.20.240, mp4a.40.2”’ /><br />
  37. 37. 2. VÍDEO<br /><ul><li>ELEMENTO DEVICE
  38. 38. É possível inserir no HTML um elemento de acesso à Webcam do usuário
  39. 39. Solicita confirmação do usuário para acesso
  40. 40. Em caso de mais de um dispositivo, será possível escolher um para fazer stream</li></ul><script>functionupdate(stream) {document.getElementsByTagName(‘video’)[0].src = stream.url }</script><br /><devicetype=“media” onchange=“update(this.data)” /><videowidht=“400” height=“300” /><br />
  41. 41. A NOVA GERAÇÃO DE<br />APLICAÇÕES WEB<br />
  42. 42. 1. MATHML<br /><ul><li> O HTML5 incorpora a linguagem de marcação MathML</li></ul><mathxmlns="http://www.w3.org/1998/Math/MathML"><mrow> <mi>x</mi> <mo>=</mo><mfrac><mrow><moform="prefix">&minus;</mo><mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> <br />
  43. 43. 2. SVG<br /><ul><li> Linguagem para marcação de gráficos vetoriais
  44. 44. Também pode ser incorporada com facilidade</li></ul><svgwidth=“400” height=“400”><rectx=“10” y=“10” width=“150” height=“50” stroke=“#000000” stroke-width=“5” fill=“#FF0000” /><br /><circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" /> </svg><br />
  45. 45. 2. SVG<br /><ul><li> A maioria dos editores gráficos vetoriais exporta e importa automaticamente SVG
  46. 46. Pode-se construir javascript para manipular SVG, usando métodos do DOM
  47. 47. Isso possibilita gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em javascript e sem tecnologias proprietáris e plugins</li></li></ul><li>3. CANVAS API<br /><ul><li> Permite desenhar na tela do navegador via Javascript
  48. 48. O único elemento HTML existente para isso é o canvas:</li></ul><canvasid=“x” width=“400” height=“400” /><br /><ul><li> Para desenhar:</li></ul><script><br />function desenhar() {<br />context=document.getElementById('x').getContext('2d');<br />context.fillRect(10, 10, 50, 150); //x,y,w,h<br />context.fillStyle='#ff0‘;<br />context.fill();<br />}<br /></script><br />
  49. 49. 3. CANVAS API<br />www.effectgames.com/demos/canvascycle/<br />
  50. 50. 3. CANVAS X SVG<br /><ul><li>SVG:
  51. 51. O Conteúdo é acessível a leitores de tela
  52. 52. O gráfico é escalável, não perde resolução ou serrilha ao redimensionar
  53. 53. O conteúdo é acessível via DOM
  54. 54. Canvas:
  55. 55. A performance é muito superior ao SVG
  56. 56. É fácil desenhar via Javascript. Em SVG é preciso escrever XML.</li></li></ul><li>4. SERVER-SENT EVENTS<br /><ul><li> Maneira de inverter o fluxo das aplicações Ajax
  57. 57. Servidor dispara o envio de dados ao cliente
  58. 58. Cria-se em javascript um objeto EventSource:</li></ul>es = newEventSource(‘messages.php’);<br />es.onmessage=function(e){ alert(“Chegaram dados: "+e.data) }<br /><ul><li> Isso vai abrir uma conexão HTTP com “messages.php”
  59. 59. O cliente se mantém escutando e cada vez que o servidor enviar dados, o evento message será disparado
  60. 60. Pode ser utilizado para implementar chat ou monitor de status de alguma operação demorada que esteja ocorrendo no servidor</li></li></ul><li>4. SERVER-SENT EVENTS<br /><ul><li> Protocolo de comunicação
  61. 61. A página “messages.php” deve enviar mensagens no seguinte formato: </li></ul>data: mensagem 1id: 1data: mensagem com duasdata: linhasid: 2data: mensagem 3id: 3<br /><ul><li> Pelo ID é possível recuperar a última mensagem enviada através do valor no header HTTP Last-Event-ID</li></li></ul><li>5. MENUS E TOOLBARS<br /><menu type=“toolbar”> <menu label="File”> <command onclick="fnew()" label="New..." /> <command onclick="fopen()" label="Open..." /> […] </menu> </menu> <br />
  62. 62. 6. MICRODATA<br /><ul><li> Permite tornar a estrutura semântica um pouco mais específica, definindo o que é o conteúdo de cada elemento.</li></ul><dl itemscopetemtype=“notas"><br /> <dt>nome</dt><dditemprop="nome">Diego</dd><br /> <dt>total</dt><dditemprop="total">9.7</dd><br /></dl><br /><script><br />resultados=document.getItems(‘notas’);for(var i=0;i<resultados.length;i++){ alert(resultados[i].properties.nome[0].content+": R$ "+ resultados[i].properties.total[0].content) }<br /></script><br />
  63. 63. 6. MICRODATA<br /><ul><li> Já existem vários padrões de metadados pré-definidos:</li></ul><sectionitemscopeitemtype="http://data-vocabulary.org/Person"><br /><h1itemprop="name">Diego Ernesto Rosa Pessoa</h1><br /><h2itemprop=“nickname">Diego Pessoa</h2><br /><a itemprop=“url”href=http://diegopessoa.com “>diegopessoa.com</a></section><br /><ul><li> Usar formatos padronizados ajuda os sistemas de busca a tratar e entender esses dados
  64. 64. Mais informações em:</li></ul>http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861<br />
  65. 65. 7. HISTÓRICO DE SESSÃO<br /><ul><li> Um grande desafio de aplicações web é apresentar um modelo de navegação consistente para o usuário. 
  66. 66. Famoso problema do back-button
  67. 67. O objeto history foi vitaminado no HTML5 com dois novos métodos:</li></ul>pushState(data,title[,url]): acrescenta uma entrada na lista de histórico.<br />replaceState(data,title[,url]): modifica a entrada atual na lista de histórico.<br />Com isso, pode-se acrescentar itens à lista de histórico, associando dados ou mesmo uma URL;<br />
  68. 68. 8. STORAGE API<br /><ul><li> Nova maneira de armazenar dados no cliente (alternativa aos cookies)
  69. 69. Objeto Storage possui os métodos:
  70. 70. getItem(key);
  71. 71. setItem(key);
  72. 72. removeItem(key);
  73. 73. clear();
  74. 74. Dois objetos disponíveis:
  75. 75. localStorage
  76. 76. sessionStorage</li></li></ul><li>9. APLICAÇÕES OFF-LINE<br /><ul><li> HTML5 provê uma maneira de se indicar ao navegador que elementos devem ser postos em cache para que uma aplicação funcione offline.
  77. 77. Para permitir que o usuário acesse uma página offiline é preciso escrever um arquivo de manifesto, indicando que URLs devem ser postas em cache. </li></ul>CACHE MANIFEST meu.html meu.cssmeu.js<html<br />manifest=“meu.manifest"><br />
  78. 78. 10. GEOLOCATION API<br /><ul><li> Três métodos:
  79. 79. Geolocalização IP: localização através de consultas whois
  80. 80. Triangulação GPRS: rede de celulares sem GPS ou GPS desabilitado
  81. 81. GPS: método mais preciso, margem de erro de apenas 5 metros</li></ul>navigator.geolocation.getCurrentPosition(showpos);<br />functionshowpos(position){ <br />lat=position.coords.latitude lon=position.coords.longitude <br />alert('Yourposition: '+lat+','+lon) <br />}<br /><ul><li>WatchPosition (rastrear a posição continuamente)</li></li></ul><li>11. UNDO<br /><ul><li> Navegador guarda um histórico de alterações para cada documento;
  82. 82. Histórico controlado pelo objeto UndoManager, acessível através de window.undoManager.
  83. 83. O histórico guarda dois tipos de alterações:
  84. 84. Alterações DOM
  85. 85. Objetos undo
  86. 86. Ex.: uma aplicação de e-mail pode guardar um objeto undo representando o fato do usuário mover um e-mail de uma pasta para outra. </li></ul>document.execCommand('undo')<br />document.execCommand('redo')<br />
  87. 87. CSS 3<br />
  88. 88. 1. BORDAS ARREDONDADAS<br />
  89. 89. 2. SOMBRAS<br /><ul><li>Regular
  90. 90. Interna</li></ul>box-shadow: -3px -3px 10px #212121;<br />box-shadow: 0px 0px 10px #212121;<br />
  91. 91. 2. SOMBRAS<br /><ul><li> Compatibilidade dos navegadores: </li></li></ul><li>3. MÚLTIPLOS BACKGROUNDS<br />C<br />background: url(body-top.gif) top leftno-repeat, url(banner.jpg) top 11px no-repeat, url(body-bottom.gif) bottomleftno-repeat, url(body-middle.gif) leftrepeat-y;<br />Suporteatualapenas dos navegadoresbaseadosemWebkit<br />
  92. 92. 4. FONTES EMBUTIDAS<br />@font-face {<br />  font-family: SketchRockwell;<br />  src: url(‘SketchRockwell.ttf’);<br />}<br />.my_CSS3_class {<br />  font-family: SketchRockwell;<br />  font-size: 3.2em;<br />  text-shadow: 3px 3px 7px #111;<br />}<br />
  93. 93. 4. E MUITO MAIS...<br /><ul><li> Bordas com imagem
  94. 94. Degradê em background
  95. 95. Transparência de elementos
  96. 96. Layouts multi-ccolunas
  97. 97. Transformações 2D e 3D de imagens (girar, perspectiva, etc)
  98. 98. Animações
  99. 99. Controle do conteúdo de um elemento
  100. 100. Etc...</li></ul>Mais informações em:<br />http://www.css3.com/<br />
  101. 101. DEMONSTRAÇÕES<br />
  102. 102. 1. Recursos / APIs<br /><ul><li>HTML5 Canvasanimation
  103. 103. WebSocket (Chat)</li></li></ul><li>2. JOGOS<br /><ul><li>LegendofSadness
  104. 104. PACMAM
  105. 105. Adventure Game
  106. 106. Torus (Tetris 3D)</li></li></ul><li>Perguntas?<br />Contato:<br />E-mail: diegopessoa12@gmail.com<br />Twitter: @diegopessoa<br />Referências:<br />http://tableless.com.br/html5/http://dev.w3.org/html5/spec/Overview.html <br />

×