HTML5. André Tavares da Silva.

Transcrição

1 HTML5 André Tavares da Silva

2 O que é HTML5? HTML5 será o novo padrão para HTML, XHTML e HTML DOM (Document Object Model). A última versão (4.01) foi definida em 1999 e a Web mudou muito nestes últimos anos. HTML5 ainda é um trabalho em desenvolvimento. Entretanto, a maioria dos navegadores atuais possuem algum suporte à HTML5.

3 Regras estabelecidas para o novo padrão Novas características devem ser baseadas em HTML, CSS, DOM e Javascript; Reduzir ao máximo a necessidade de plugins externos (Flash, por exemplo); Melhor manipulação dos erros; Aumentar a quantidade de marcações para substituir scripts; HTML5 deve ser independente de plataforma; O processo de desenvolvimento deve ficar visível ao público (transparente).

4 Novas características O elemento canvas para desenhos; Elementos de áudio e vídeo para reprodução de mídias; Melhor suporte a armazenamento local offline; Novos elementos de conteúdo como article, footer, header, nav, section; Novos controles de formulário como calendar, date, time, , url, search.

5 Vídeo Formato IE Firefox Opera Chrome Safari Ogg Não Sim Sim Sim Não MPEG Não (sim w7+) Não Sim Sim WebM Não Sim Sim Sim Não Ogg = arquivo.ogg com codec de vídeo Theora e codec de áudio Vorbis MPEG4 = arquivo MPEG4 com codec de vídeo H.264 e codec de áudio AAC WebM = arquivo WebM com codec de vídeo VP8 e codec de áudio Vorbis

6 Vídeo - tags <video> Define um vídeo (tag "principal"). <source> Define múltiplas fontes de mídia para <video> e <audio>. <track> Define trilhas de texto (legendas) para o reprodutor de mídia. Ainda não implementado por nenhum navegador.

7 Vídeo - exemplo <video width="320" height="240" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> Seu navegador não suporta a tag video. </video> É importante incluir os atributos width e height para evitar que o navegador fique mudando o layout. Enquanto existir navegadores que não suportem HTML5, é uma boa prática incluir texto dentro da tag video.

8 Áudio Formato IE Firefox Opera Chrome Safari Ogg Não Sim Sim Sim Não MP Não (sim w7+) Não Sim Sim Wav Não Sim Sim Sim Sim Ogg = arquivo.ogg com codec de áudio Vorbis MP3 = arquivo MP3 com codec MPEG-1/2 Audio Layer 3 Wav = arquivo tipo RIFF para armazenar som digital sem compactação (também pode conter arquivos no formato W64)

9 Áudio <audio controls="controls"> <source src="som.ogg" type="audio/ogg" /> <source src="som.mp3" type="audio/mpeg" /> Seu navegador não suporta a tag audio. </audio> Enquanto existir navegadores que não suportem HTML5, é uma boa prática incluir texto dentro da tag audio.

10 Canvas O elemento canvas (tela) em HTML5 usa Javascript para desenhar objetos (gráficos) em uma página Web. Canvas é uma área retangular onde é possível manipular cada um dos pixels deste elemento. Ele possui diversos métodos para desenhar retas, caixas, círculos, caracteres e inserir imagens.

11 Canvas <canvas id="minhatela" width="200" height="100" style="border:1px solid #c3c3c3;"> Seu navegador não suporta o elemento canvas. </canvas> <script type="text/javascript"> var c=document.getelementbyid("minhatela"); var cxt=c.getcontext("2d"); var grd=cxt.createlineargradient(0,0,175,50); grd.addcolorstop(0,"#ff0000"); grd.addcolorstop(1,"#00ff00"); cxt.fillstyle=grd; cxt.fillrect(0,0,175,50); cxt.fillstyle="#0000ff"; cxt.beginpath(); cxt.arc(70,70,15,0,math.pi*2,true); cxt.closepath(); cxt.fill(); </script>

12 Canvas Cycle Canvas - exemplos Magician - Fairy Rescue Super Santa Sweep 3D Pirates Love Daisies

13 Armazenamento de dados no cliente O armazenamento de informações nas versões anteriores da HTML era feito através de cookies. Eles não são adequados para grandes quantidades de dados, pois são passados para o servidor em TODAS as requisições e por isso são letos e inefetivos. Em HTML5 os dados não são passados ao servidor a cada requisição, mas somente quanto requisitado. Em HTML5 é possível armazenar grandes quantidades de informações sem afetar a performance do website.

14 Armazenamento de dados no cliente HTML5 oferece duas formas de armazenar dados no cliente: localstorage - armazena dados sem limite de tempo sessionstorage - armazena dados por apenas uma sessão Os dados são armazenados em diferentes áreas pelos diferentes websites. Os dados somente podem ser acessados pelo website que o criou. HTML5 usa Javascript para armazenar e acessar os dados.

15 Input Types Input type IE Firefox Opera Chrome Safari 10+ Sim Sim Sim Sim url 10+ Sim Sim Sim Sim number 10+ Sim Sim Sim Sim range 10+ Sim Sim Sim Sim Date pickers 10+ Sim Sim Sim Sim search 10+ Sim Sim Sim Sim color 10+ Sim Sim Sim Sim Opera e Chrome são os navegadores com maior suporte. Entretanto, é possível usá-los em todos os navegadores, pois o tipo não suportado terá o mesmo comportamento de text.

16 Elementos de Formulário Tag IE Firefox Opera Chrome Safari <datalist> 10+ Sim Sim Sim Sim <keygen> 10+ Sim Sim Sim Sim <output> 10+ Sim Sim Sim Sim O elemento datalist cria uma lista de opções para um campo input. O objetivo do elemento keygen é fornecer um método seguro para autenticação de usuários. O elemento output é usado para diferentes tipos de saídas, como por exemplo o resultado de um cálculo.

17 Novos atributos de formulário Atributo IE Firefox Opera Chrome Safari autocomplete 8.0 Sim Sim Sim Sim autofocus 10+ Sim Sim Sim Sim form 10+ Sim Sim Sim Sim form overrides 10+ Sim Sim Sim Sim height and width 8.0 Sim Sim Sim Sim list 10+ Sim Sim Sim Sim min, max and step 10+ Sim Sim Sim Sim multiple 10+ Sim Sim Sim Sim novalidate 10+ Sim Sim Sim Sim pattern 10+ Sim Sim Sim Sim placeholder 10+ Sim Sim Sim Sim required 10+ Sim Sim Sim Sim

18 Outros elementos Geolocalização SVG (Scalable Vector Graphics) MathML (Mathematical Markup Language) Web SQL Database WebSockets DnD (Drag and Drop) Uso através de Javascript em Chrome, Mozilla, Opera e Safari

19 XHTML5 XHTML5 é a serialização XML do HTML5. Documentos XML deve possuir um tipo XML tais como "application/xhtml+xml" ou "application/xml". XHTML5 requer uma sintaxe XML bem formada. A escolha entre HTML5 e XHTML5 recai na escolha do tipo MIME/content: o tipo de mídia escolhido determinará qual o tipo de documento que deve ser usado. Em XHTML5 a tag html é opcional e pode ser simplesmente omitida. O arquivo HTML que foi escrito em conformidade com ambas as especificações HTML e XHTML (e que, portanto, produz a mesma árvore DOM se analisado como HTML ou XML) é chamado de "poliglota de marcação".