Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB

3.041 Aufrufe

Veröffentlicht am

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
O que há de novo, o que mudou e o que você precisa saber para aproveitar o melhor da nova web.

Veröffentlicht in: Bildung
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB

  1. 1. HTML5 UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  2. 2. HTML  HTML: Hypertext Markup Language  Linguagem de estruturação e apresentação de conteúdo web  Links, texto, imagem, vídeo, áudio, etc...  Baseada no conceito de hipertexto  “nós” ligados por conexões, formando uma rede de informações     Proposta como padrão por Tim Berners-Lee em 1990 Começou a ser popularizado na década de 90 (Mosaic) Oficialmente padronizada em 1997, pelo W3C (versão 3.2) Linguagem independente de plataforma, sistema ou browser UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  3. 3. WHAT Working Group  Em 2004, Mozilla, Apple e Opera fundaram o WHATWG      Grupo de discussão sobre o futuro do desenvolvimento web Primeiro esboço do que viria a ser implementado no HTML5 Um dos focos era trazer melhor semântica à linguagem Facilitar manipulação de elementos via Javascript e CSS Eliminar necessidade de scripts para garantir compatibilidade  Em 2006, o WHATWG foi reconhecido pela W3C  Oficialização do desenvolvimento do padrão HTML5  Descontinuação do padrão XHTML2 UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  4. 4. HTML5  Padronização das regras de marcação HTML5  Novas tags e alteração no comportamento de tags existentes       Padronização de seções comuns: cabeçalho, rodapé, menu, etc. Padronização de nomenclaturas: melhoria na semântica Elimina a necessidade de scripts externos (plugins / bibliotecas) Manipulação não-intrusiva de objetos Independente de sistema operacional ou navegador Retrocompatível: sem necessidade de reescrita de sites antigos  Definição de APIs base para arquitetura web (DOM Level 0) UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  5. 5. Orientação à Semântica  Quando lemos um livro, conseguimos diferenciar parágrafos, títulos, rodapés e cabeçalhos devido a formatação visual  Robôs de busca não conseguem notar essas diferenças  Cabe ao desenvolvedor marcar essas informações com tags que atribuam significado a cada seção do código  Tags HTML, como <header>, <footer> e <time> foram introduzidas para auxiliar na marcação semântica do código  Tags <b> e <i> foram mantidas, mas ganharam semântica  Tags relacionadas apenas a formatação visual foram removidas já que são facilmente supridas por folhas de estilo CSS UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  6. 6. Desenvolvimento modular  Em versões antigas do HTML e CSS:  Todas as ideias de uma nova versão eram especificadas  Depois de testadas, as especificações eram então divulgadas para implementação nos navegadores  HTML5 e CSS3:  Desenvolvimento modular  Grupos diferentes cuidam de tecnologias diferentes, que são publicadas (e implementadas) de maneira independente  Ponto negativo: problemas de compatibilidade UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  7. 7. Motores de renderização  Múltiplos navegadores, cada um com suas características  Impossível garantir 100% de compatibilidade entre browsers  Desenvolvedores focam em manter o código compatível com os motores que processam e renderizam o código-fonte Motor Browser Webkit Safari, Google Chrome Gecko Firefox, Mozilla, Camino Trident Internet Explorer 4 ao 9 Presto Opera 7 ao 10 UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  8. 8. Compatibilidade com HTML5 Safari Chrome Opera Firefox Local Storage Histórico de Sessão Aplicações Offline Novos tipos de campos Form: Autofocus Form: Autocomplete Form: Required Video, Audio, Canvas Text UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE IE 8 IE 9
  9. 9. Técnicas de detecção  Navegadores distintos suportam HTML5 de maneira distinta  Como detectar se um navegador suporta HTML5 e CSS3?  Biblioteca Modernizr - http://www.modernizr.com if (Modernizr.geolocation) { // Aceita a feature de geolocalização } else { // Não aceita a feature de geolocalização }  Existem formas de manter a compatibilidade do site:  Redirecionar o usuário para uma versão simplificada do site  Exibir uma mensagem na tela alertando o usuário UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  10. 10. Estrutura básica <!DOCTYPE HTML> Primeira linha de código do documento HTML5. Instrui o navegador sobre a codificação do documento. <html lang="pt-br"> Ao abrir a tag <html>, iniciamos a árvore de elementos de um código HTML. O atributo lang indica qual a língua principal do documento. <head> A tag <head> armazena os metadados – informações sobre a página e seu conteúdo. <meta charset="UTF-8"> Atributo charset: informações de codificação dos caracteres. <link rel="stylesheet" type="text/css" href="style.css"> <title>Exemplo</title> Tag <link>: conteúdo de fontes externas, Nesse exemplo, uma folha de estilos CSS. </head> <body> Dentro das tags <body> está o conteúdo que será renderizado ao usuário. </body> </html> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  11. 11. Modelos de conteúdo  De maneira geral, existem dois grandes grupos de elementos  Elementos de linha: denotam, na maioria das vezes, texto.  Elementos de bloco: dividem seções do layout.  De maneira mais específica, os elementos são agrupados em categorias de acordo com seu comportamento UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  12. 12. Metadata  Elementos que modificam a apresentação ou comportamento do resto do documento  Elementos que fazem ligações com outros documentos <base>, <command>, <link>, <meta>, <noscript>, <script>, <style>, <title> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  13. 13. Flow  Elementos que tipicamente contém texto ou elementos da categoria de conteúdo Embedded <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  14. 14. Sectioning  Elementos usados para definir o conteúdo de uma subseção dentro de um documento  <article> delimita publicações em um blog, notícias, etc.  <aside> delimita dados relacionados ao conteúdo ao redor  <nav> é usada para delimitar navegação dentro da página  <section> é uma delimitação genérica, sem tanta semântica <article>, <aside>, <nav>, <section> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  15. 15. Heading  Elementos que definem cabeçalhos.  Normalmente presentes dentro da categoria Sectioning <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  16. 16. Phrasing  Elementos usados para definir, principalmente, texto e suas marcações, como formatação e outros atributos <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  17. 17. Embedded  Elementos que importam informações de recursos externos ou de outras linguagens de marcação para o documento <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  18. 18. Interactive  Elementos que fazem interação com o usuário  Normalmente, aparecem em um formulário  São ativados por um comportamento pré-determinado como clique, movimento do mouse ou entrada pelo teclado <a>, <audio>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <keygen>, <label>, <menu>, <object>, <select>, <textarea>, <video> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  19. 19. Formulários: Novos atributos  Elemento input recebe novos atributos para type  tel: sem máscara de validação e integração com agenda  search: campo de busca semanticamente interpretado  email: com formatação/validação e integração com agenda  url: endereço web com formatação/validação  color: seletor de cor renderizado pelo navegador  number: aceita apenas valores númericos  step, min, max: atributos opcionais para configurar escopo  range: variante visual do tipo number UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  20. 20. Formulários: Data e Hora  Novos atributos introduzidos para controle de data e hora       datetime date month week time datetime-local (trata diferenças de fuso-horário)  Oferecem suporte a formatação/validação com o servidor  step: define a diferença mínima entre dois horários (em s) UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  21. 21. Formulários: Usabilidade  Soluções de validação e usabilidade, agora, nativas ao HTML  autofocus: dá foco ao campo assim que o campo for criado  placeholder: texto padrão do campo antes do foco  required: torna o preenchimento de um campo obrigatório  maxlength: agora disponível para o elemento textarea  pattern: define expressões regulares de validação (regex)  novalidate: em form, indica a não-validação do formulário  formnovalidate: em um botão submit, pode ser usado para submeter dados sem realizar validação (ex: rascunhos) UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  22. 22. Formulários: Customização  Ao invés de se “amarrar” ao Javascript e bibliotecas (como jQuery), o HTML5 fornece interfaces para tornar a interação com a linguagem o mais transparente o possível  Por exemplo, para criar uma validação de dados customizada, implementamos uma rotina padronizada  Evento oninput no input é disparado quando ocorre qualquer modificação no valor de um campo  Método setCustomValidity, implementado dentro de um método Javascript e é usado para dar informar o usuário em caso de erros durante a validação UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  23. 23. Formulários: Ortografia  Através do uso do atributo spellcheck="true" é possível habilitar a revisão ortográfica (e também gramátical) para qualquer campo de um formulário  Vale ressaltar que, assim como a grande maioria das tags de HTML5, essa funcionalidade está restrita ao que estiver disponível na plataforma de destino  Também é possível desativar qualquer tipo de validação utilizando spellcheck="false" UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  24. 24. Menus  O elemento menu é usado para definir menus e barras de ferramenta de maneira simples e semântica  Em um navegador compátivel, exibirá os elementos menu (e seus sub-elementos) de maneira organizada e aninhada <menu type="toolbar"> <li> <menu label="File"> <button type="button" <button type="button" <button type="button" <button type="button" </menu> </li> <li> <menu label="Edit"> <button type="button" <button type="button" <button type="button" </menu> </li> ... </menu> onclick="fnew()">New...</button> onclick="fopen()">Open...</button> onclick="fsave()">Save</button> onclick="fsaveas()">Save as...</button> onclick="ecopy()">Copy</button> onclick="ecut()">Cut</button> onclick="epaste()">Paste</button> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  25. 25. Sumário e detalhamento  Visualizar uma descrição sumarizada e, ao clicar, abrir o detalhamento é uma prática comum da web  No entanto, isso é realizado via métodos Javascript  No HTML5, foram inseridas as tags details e summary para realizar essa operação de forma semântica UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  26. 26. Conteúdo editável  É possível fazer com que qualquer elemento do HTML seja editável pelo agente do usuário  Para isso, basta setar o atributo contenteditable="true"  Isso permite criar, com facilidade, uma área de edição de HTML dentro de uma página UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  27. 27. Truques de visualização  Para facilitar o trabalho dos desenvolvedores foram inseridos dois antigos “truques” de Javascript e CSS foram padronizados no HTML5  A funcionalidade hidden agora pode ser declarada como atributo de qualquer objeto <div hidden=true>Texto escondido.</div>  O método scrollIntoView pode ser chamado para trazer qualquer elemento da página para o foco do navegador document.getElementById('id').scrollIntoView() UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  28. 28. Drag and Drop  Essa API permite que elementos sejam “arrastáveis” pelo usuário – assim como ícones no sistema operacional  No objeto arrastado, inserimos draggable="true"  Esse objeto dispara os eventos dragstart, drag e dragend  No objeto alvo, não é necessário inserir nenhum atributo  Esse objeto escuta os eventos dragenter, dragleave, dragover e drop  Fica ao cargo do programador definir o comportamento da página quando algum desses eventos for chamado UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  29. 29. Áudio, Vídeo e Codecs  Novos elementos substituem o uso de elementos iframe ou embed para renderizar players de áudio  Elementos audio e video podem ser customizados  Controls: define a exibição de uma barra de controle  Autoplay: define se o conteúdo terá reprodução automática  Source: tags utilizadas para definir fontes alternativas  Codecs: informa ao browser qual o formato da fonte alternativa <video controls="true" autoplay="true" width="400" height="300"> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'> <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'> <p>Faça o <a href="dl.mp4">download do vídeo</a>.</p> </video> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  30. 30. MathML  MathML é uma linguagem de marcação, baseada em XML, usada para representação de fórmulas matemáticas  No HTML5, o elemento math denota o uso de MathML <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="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> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  31. 31. SVG  SVG é uma linguagem de marcação, baseada em XML, usada para marcação de gráficos vetoriais  No HTML5, o elemento svg denota o uso de SVG  O conteúdo vetorial é escalável e acessível a leitores de tela <svg width="400" height="400"> <!-- Um retângulo: --> <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" /> <!-- Um polígono: --> <polygon fill="red" stroke="blue" stroke-width="10" points="250,75 279,161 369,161 297,215 323,301 250,250 177,301 203,215 131,161 221,161" /> <!-- Um círculo --> <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" /> </svg> UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  32. 32. Canvas  Canvas API permite a criação de desenhos na tela do navegador usando Javascript  Para renderização do desenho, usamos um elemento canvas  Performance superior ao SVG e sintaxe simplificada function desenhar(){ context=document.getElementById('x').getContext('2d') //Iniciamos um novo desenho context.beginPath() //Movemos a caneta para o inicio do desenho context.moveTo(150,50) //Desenhamos as linhas context.lineTo(220,250) context.lineTo(50,125) context.lineTo(250,125) context.lineTo(80,250) context.lineTo(150,50) //Vamos pintar o interior de amarelo context.fillStyle='#ff0' context.fill() //Vamos pintar as linhas de vermelho. context.strokeStyle='#f00' context.stroke() } UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  33. 33. EventSource  Server-Sent Events API é uma API utilizada para “inverter” o fluxo cliente->servidor das aplicações, tornando possível que o servidor possa disparar o envio de dados ao cliente  Em Javascript, instanciamos o objeto EventSource es=new EventSource('comm.php')  No exemplo, criamos uma conexão HTTP para comm.php e a aplicação ficará escutando – cada vez que o servidor enviar algo para o cliente, o evento onmessage será disparado es.onmessage=function(e){ alert("Chegaram dados: "+e.data) } UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  34. 34. Histórico de Sessão  Anteriormente, os browsers não tinham controle sobre o histórico de ações de um usuário em uma página – limitando-se a navegação usando os métodos go, back e forward do objeto history do navegador  O HTML5 turbinou o objeto history com novos métodos para controlar a pilha de entradas do histórico e também associar dados à essas entradas com maior liberdade  pushState(data, title, url): acrescenta entrada no histórico  replaceState(data, title, url): modifica entrada atual  window.onpopstate : evento ativado ao navegar no histórico UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  35. 35. Storage  Ao invés de trabalhar com cookies complexos e com funcionalidade limitada, o HTML5 traz uma nova maneira de armazenar (e recuperar) dados no clientes – a API Storage  Existem dois objetos de que podemos implementar  localStorage: armazena dados sem data de expiração  sessionStorage: armazena dados apenas durante a sessão  Interface simplificada de acesso aos dados getItem(key) setItem(key, value), removeItem(key) clear() UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  36. 36. Geolocation  A Geolocation API é capaz de permitir que o navegador detecte a posição geográfica de um cliente  Possível pelo IP, triangularização de antenas GPRS ou GPS  A documentação especifica que o navegador deve perguntar ao usuário se ele deseja compartilhar sua localização  Como, por uma série de motivos, esses dados podem não estar disponíveis, é necessário cautela na implementação navigator.geolocation.getCurrentPosition(showpos) function showpos(position){ alert('Your position: '+position.coords.latitude+','+ position.coords.longitude ) } UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  37. 37. É hora de pensar em HTML5?  Sim! HTML5 inaugura a nova era do desenvolvimento web  Hoje em dia, praticamente todos os navegadores do mercado oferecem suporte a maioria dos elementos HTML5  Existe uma frente que prefere esperar que os novos conceitos da linguagem sejam consolidados e absorvidos  Já outra frente, aplica alguns dos novos conceitos de cara e faz o uso de scripts de compatibilidade para garantir o funcionamento e aparência do site em todos os navegadores  Estude quem é seu público-alvo e como ele acessa a web para decidir se vale a pena e como será realizada a migração UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  38. 38. Referências  Referências          http://www.w3.org http://tableless.com.br/html5/ http://html5demos.com/ http://www.infowester.com/introhtml5.php https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories http://diveintohtml5.info/video.html http://www.html5rocks.com/en/tutorials/forms/html5forms/input-types.html http://www.modernizr.com http://idgnow.uol.com.br/internet/2009/06/16/html-5-conheca-a-linguagem-quevai-revolucionar-sua-navegacao-na-web/ UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE
  39. 39. Créditos  Autor  Luiz Fernando Machado Silva  Bacharelando em Ciências da Computação – UNIFESP  Contato: lfmachado90@gmail.com  PESL  Material educativo desenvolvido em dezembro de 2013 como parte do PESL – Programa de Educação em Software Livre  Coordenador: Prof. Dr. Arlindo Flavio da Conceição  Site: www.pinguim.pro.br UNIVERSIDADE FEDERAL DE SÃO PAULO INSTITUTO DE CIÊNCIA E TECNOLOGIA PESL PROGRAMA DE EDUCAÇÃO EM SOFTWARE LIVRE

×