Html 5
Transferir como PPTX, PDF0 gostou356 visualizações
O documento descreve a história e as principais características da linguagem HTML. Foi criada originalmente por Tim Berners-Lee e Robert Cailliau em 1990 para facilitar a comunicação entre pesquisadores. O HTML 5 introduziu novas tags para áudio, vídeo e gráficos, além de melhorias nos formulários e armazenamento de dados no cliente.
Html 5
- 1. Fernando Pontes Discente do curso de Sistema de Informação - 4º Período - FACIMP Web Designer CEO da websonic – Produtora Web – www.websonic.com.br
- 2. HTML 5 - Fernando Pontes 2
- 3. É um tipo especial de documento de texto que é usado por navegadores (browser) da Web para apresentar texto e gráficos. Hyper Text Markup Language. Não é uma linguagem de programação. É uma linguagem de marcação que utiliza as tags para organizar o documento. Tim Berners-Lee junto com Robert Cailliau criaram o HTML (1990) original. Com o objetivo de facilitar a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. HTML 5 - Fernando Pontes 3 TimBerners-LeeRobertCailliau
- 4. Um screen shot do computador de Tim Berners-Lee's rodando uma página no browser WorldWideWeb HTML 5 - Fernando Pontes 4 http://info.cern.ch/
- 5. HTML 5 - Fernando Pontes 5
- 6. HTML 5 - Fernando Pontes 6
- 7. HTML 5 - Fernando Pontes 7
- 8. Incorporação de novas tags: ◦ Vídeos. ◦ Áudio. ◦ Gráficos. ◦ Armazenamento de dados client-side. ◦ Tratamento de dados do formulário. Redução do custo e tempo de desenvolvimento. Implantação do conceito de web semântica. RIAS (Rich Internet Application). Caching de Aplicações. Geolocalização. Drag & Drop. HTML 5 - Fernando Pontes 8
- 9. <article> Define um artigo. <aside> Define o conteúdo relacionado com o conteúdo da página. <audio> Tag utilizada para anexar áudio ao documento. <canvas> Tag para exibição de gráficos. <datalist> Define uma lista em formato de dropdown. <details> Define detalhes de uma elemento. <embed> Define um conteúdo interativo ou um plugin. <figcaption> Define a legenda de uma tag figure. <figure> Usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio. <footer> Define o rodapé de uma seção ou de uma página. <header> Define o cabeçalho de uma seção ou de uma página. <hgroup> Define um grupo de cabeçalhos de uma seção. <keygen> Utilizada para gerar uma chave para troca de informações em um formulário. <mark> Define uma marcação no texto. <nav> Define uma área onde contém links para navegação. <section> Define uma seção do documento. <summary> Define o cabeçalho de uma elemento details. <video> Tag utilizada para anexar vídeo ao documento. HTML 5 - Fernando Pontes 9
- 10. <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <s> <strike> <tt> <u> <xmp> HTML 5 - Fernando Pontes 10
- 11. HTML 4.1 HTML 5 HTML 5 - Fernando Pontes 11
- 12. <audio src="horse.ogg" controls="controls"> Seu navegador não suporta a tag audio. </audio> HTML 5 - Fernando Pontes 12 Atributo Valor Descrição autoplay autoplay Se estiver presente, o som irá começar a tocar assim que estiver pronto. controls controls Se estiver presente, os controles serão exibidos, como um botão de play. loop loop Se estiver presente, o áudio iniciará automaticamente quando o mesmo finalizar. preload auto metadata none Especifica se o áudio deve ser carregado quando a página é carregada ou não. Ignorando se autoplay está presente. src url Define a URL do arquivo de audio.
- 13. HTML 5 - Fernando Pontes 13 Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis No Yes Yes Yes No MP3 No No No Yes Yes Wav No Yes Yes No Yes
- 14. <video src="movie.ogg" width="320" height="240" controls="controls"> Seu navegador não suporta a tag video. </video> HTML 5 - Fernando Pontes 14 Atributo Valor Descrição autoplay autoplay Se estiver presente, o vídeo irá começar assim que estiver pronto. controls controls Se estiver presente, os controles serão exibidos, como um botão de play. loop loop Se estiver presente, o áudio iniciará automaticamente quando o mesmo finalizar. preload auto metadata none Especifica se o áudio deve ser carregado quando a página é carregada ou não. Ignorando se autoplay está presente. src url Define a URL do arquivo de audio. Width Pixels Define a largura do player de vídeo Height Pixels Define a altura do player de vídeo
- 15. HTML 5 - Fernando Pontes 15 Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg No Yes Yes Yes No MPEG 4 No No No Yes Yes Ogg = codec de vídeo Thedora e codec de áudio Vorbis. MPEG4 = codec de vídeo H.264 e codec de áudio AAC.
- 16. <canvas id="myCanvas" width="200" height="100"></canvas> HTML 5 - Fernando Pontes 16 Utiliza-se da Canvas 2D API É possível desenhar desde elementos simples, como linhas, círculos, retângulos até inserir elementos como imagens e animações.
- 17. HTML 5 - Fernando Pontes 17 O HTML 5 traz dois métodos para armazenar dados no cliente (browser), são eles: localStorage: Armazenamento de dados por tempo indeterminado. sessionStorage: Armazenamento de dados por sessão, ou seja, temporariamente. O HTML 5 usa JavaScript para armazenar e acessar os dados.
- 18. HTML 5 - Fernando Pontes 18 O método sessionStorage: ◦ Os dados estarão disponível temporariamente. ◦ Reduz a carga no servidor. ◦ Otimiza o site ou sistema web. <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>
- 19. HTML 5 - Fernando Pontes 19 Novos campos de entrada. Maior facilidade na validação dos dados. Entre os novos campos podemos destacar: ◦ email ◦ url ◦ number ◦ range ◦ Date pickers (date, month, week, time, datetime, datetime- local)
- 20. HTML 5 - Fernando Pontes 20 Input type IE Firefox Opera Chrome Safari email No No 9.0 No No url No No 9.0 No No number No No 9.0 No No range No No 9.0 4.0 4.0 Date pickers No No 9.0 No No
- 21. HTML 5 - Fernando Pontes 21 Entre os novos elementos podemos destacar: ◦ datalist ◦ keygen ◦ output Atributo IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No
- 22. HTML 5 - Fernando Pontes 22 Novos atributos para formulários: ◦ autocomplete ◦ Novalidate Novos atributos para entradas: ◦ autocomplete ◦ autofocus ◦ form ◦ form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) ◦ height and width ◦ list ◦ min, max and step ◦ multiple ◦ pattern (regexp) ◦ placeholder ◦ required
- 23. HTML 5 - Fernando Pontes 23 Atributos IE Firefox Opera Chrome Safari Campos autocomplete 8.0 3.5 9.5 3.0 4.0 text, search, url, telephone, email, password, datepickers, range e color. autofocus No No 10.0 3.0 4.0 Todos os tipos de campo. form No No 9.5 No No Todos os tipos de campo. form overrides No No 10.5 No No submit and image. height and width 8.0 3.5 9.5 3.0 4.0 Image. list No No 9.5 No No text, search, url, telephone, email, date pickers, number, range e color. min, max and step No No 9.5 3.0 No date pickers, number e range. multiple No 3.5 No 3.0 4.0 Email e file. novalidate No No No No No <form> e <input>: text, search, url, telephone, email, password, date pickers, range e color. pattern No No 9.5 3.0 No text, search, url, telephone, email e password placeholder No No No 3.0 3.0 text, search, url, telephone, email e password required No No 9.5 3.0 No text, search, url, telephone, email, password, date pickers, number, checkbox, radio e file.
- 24. HTML 5 - Fernando Pontes 24 “É uma extensão da Web atual, que permitirá aos computadores e humanos trabalharem em cooperação. A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador.” wikipédia “A Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas. Disse principalmente máquinas, porque elas nos ajudarão, de fato, em tarefas que hoje, invariávelmente temos que fazer manualmente.” Diego Eis, do site tableless
- 25. XHTML 1.0 HTML 5 HTML 5 - Fernando Pontes 25
- 26. HTML 5 - Fernando Pontes 26 Rich Internet application. Características semelhantes das aplicações para Desktop. Redução da carga de servidor. Sem necessidade de vários refresh (atualizações) da página do site ou sistema. Mais exemplos: ◦ Flash (Adobe), Silverlight (Microsoft), Ajax, JavaFx (Oracle) e o Ajax (CSS, JavaScript, HTML).
- 27. Segundo o site http://html5test.com/, os pontos (no total de 300) alcançados pelos browser são: HTML 5 - Fernando Pontes 27 Versão: 7.0.517.41 231 pontos Versão: 10.63 159 pontos Versão: 3.6.11 139 pontos Versão: 8.0 27 pontos Versão: 5.0.2 207 pontos
- 28. http://www.w3.org/html/ http://www.w3.org/MarkUp/Guide/ http://www.w3schools.com/ http://info.cern.ch/ http://pt.wikipedia.org/wiki/Tim_Berners-Lee http://pt.wikipedia.org/wiki/HTML http://pt.wikipedia.org/wiki/Web_semântica http://www.tableless.com.br/a-web-semantica http://www.w3.org/TR/html5/offline.html http://dev.w3.org/geo/api/spec-source.html http://www.carolinisantos.com/artigos/html5ecss3/htm l5.html HTML 5 - Fernando Pontes 28
- 29. HTML 5 - Fernando Pontes 29 www.websonic.com.br