Definição De Registros

HTML5 Curso W3C Escritório Brasil

Autores: Elcio Ferreira e Diego Eis

ÍNDICE 1. Visão geral do HTML5 7 Hypertexto 7 O começo e a interoperabilidade 8 WHAT Working Group 8 O HTML5 e suas mudanças 9 O que é o HTML5? 9 2. Análise do suporte atual pelos navegadores e estratégias de uso 11 O desenvolvimento modular 11 Motores de Renderização 11 Compatibilidade com HTML5 12 Técnicas de detectação 13 Utilizando o Modernizr 14 3. Estrutura básica, DOCTYPE e charsets 15 O Doctype 15 O elemento HTML 16 HEAD 16 Metatag Charset 16 Tag LINK 17 4. Modelos de conteúdo 19 Categorias 19 Metadata content 20 Flow content 20 Sectioning content 22 Heading content 23 Phrasing content 23 Embedded content 24 Interactive content 24 5. Novos elementos e atributos 27 Atributos 30 6. Elementos modificados e ausentes 31 Elementos modificados 31 Elementos ou atributos descontinuados 32

7. Novos tipos de campos 33 Novos valores para o atributo type 33 tel 33 search 33 email 33 url 33 Datas e horas 34 number 34 range 35 color 36 8. Tipos de dados e validadores 37 Formulários vitaminados 37 autofocus 37 Placeholder text 37 required 38 maxlength 38 Validação de formulários 38 pattern 39 novalidate e formnovalidate 39 Custom validators 40 9. Detalhes e conteúdo editável. 43 Ainda mais formulários 43 Detalhes e sumário 43 Conteúdo editável 44 10. Drag-n-drop e correção ortográfica 45 Drag and Drop 45 Detalhes importantes: 46 Revisão ortográfica e gramatical 47 11. Elementos audio e video, e codecs 49 Áudio 49 Origens alternativas de áudio 49 Vídeo 50 Codecs 50 12. Elemento device e Stream API 53 O elemento device 53 Streams 54 Peer-to-peer 54 13. MathML e SVG 55 MathML 55 SVG 56

14. Canvas API 59 O elemento canvas 59 Canvas e SVG 61 15. Server-Sent Events 63 EventSource 63 O protocolo de comunicação 63 16. DOM e HTML5 65 DOM e HTML5 65 Por quê DOM? 65 Vamos às diferenças 65 getElementsByClassName 65 innerHTML 66 activeElement e hasFocus() 66 getSelection() 67 Intervalos de seleção 68 document.head 68 Selector API 69 Características especiais de DomNodeList 70 Datasets 70 17. Novos eventos DOM 71 Uma palavra sobre eventos 71 Elementos multimídia: 71 Eventos em campos de formulário: 72 Eventos gerais: 72 Drag-and-drop: 73 Atributos de evento 73 18. Menus e toolbars 75 O elemento menu 75 Tipos de comando 75 O elemento command 76 Prefira não usar command, por enquanto 76 19. Tipos de links 79 Links 79 Metadados de navegação 79 Metadados da página 80 Comportamento dos links na página 81 20. Microdata 83 Semântica adicional 83 Diferentes tipos de dados 85 Falando um idioma comum 87

21. Histórico de sessão e API Storage 89 Histórico de Sessão e API Storage 89 Histórico de Sessão 89 localStorage e sessionStorage 91 22. Aplicações offline 95 Caching 95 O objeto ApplicationCache 96 Controle de status da aplicação 97 23. Scroll in to view e hidden 99 Scrolling into view 99 hidden 99 hidden e Javascript 99 24. Geolocation API 101 Métodos de Geolocalização 101 Tratando erros 102 Não trate a resposta do usuário como um erro 103 O objeto de configuração 103 watchPosition 103 25. Undo 105 O objeto UndoManager 105 Respondendo às ações de undo e redo 106 Disparando as ações de undo e redo 106

HTML 5 - Curso W3C Escritório Brasil 7Markup

1. VISÃO GERAL DO HTML5 De acordo com o W3C a Web é baseada em 3 pilares: • Um esquema de nomes para localização de fontes de informação na Web, esse esquema cha- ma-se URI. • Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. • Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML.

Vamos nos focar no terceiro pilar, o HTML.

Hypertexto HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conecta- dos linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguida- mente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.

Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem.

Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.

O começo e a interoperabilidade Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui o HTML ain- da não era tratado como um padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum. Você pode ver: http://www.w3.org/TR/html401/appendix/changes.html.

Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, bro- wsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprie- tária, com formatos incompatíveis e limitada.

Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a in- formação publicada por meio deste código fosse acessível por dispositivos e outros meios com ca- racterísticas diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso.

WHAT Working Group Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites