html5 - web - criação de html5 de acordo com a W3C
Autores: Elcio Ferreira e Diego Eis Autores: Elcio Ferreira e Diego Eis
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 1
O desenvolvimento modular 1 Motores de Renderização 1 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
4. Modelos de conteúdo 19
Categorias 19 Metadata content 20 Flow content 20 Sectioning content 2 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 3
Novos valores para o atributo type 3 tel 3 search 3 email 3 url 3 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
9. Detalhes e conteúdo editável. 43
Ainda mais formulários 43
Detalhes e sumário 43 Conteúdo editável 4
10. Drag-n-drop e correção ortográfica 45
Drag and Drop 45 Detalhes importantes: 46 Revisão ortográfica e gramatical 47
1 Elementos	audio	e	video,	e	codecs	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	5
MathML 5 SVG 56
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 6 activeElement e hasFocus() 6 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
20 Microdata	83
Semântica adicional 83 Diferentes tipos de dados 85 Falando um idioma comum 87
Histórico de Sessão e API Storage 89
2 Aplicações	offline	95
Caching 95 O objeto ApplicationCache 96 Controle de status da aplicação 97
23 Scroll	in	to	view	e	hidden	9
Scrolling into view 9 hidden 9 hidden e Javascript 9
24. Geolocation API 101
Métodos de Geolocalização 101
25 Undo	105
O objeto UndoManager 105
HTML 5 - Curso W3C Escritório Brasil7Markup
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 chama-se URI. • Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.
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 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 ainda 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
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 e sistemas baseados na web.
O WHATWG http://www.whatwg.org/ foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5.
HTML 5 - Curso W3C Escritório Brasil9Markup
O HTML5 e suas mudanças Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores.
O que é o HTML5? O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.
HTML 5 - Curso W3C Escritório Brasil11Markup
O desenvolvimento modular Antigamente, para que uma nova versão do HTML ou do CSS fosse lançada, todas as ideias listadas na especificação deveriam ser testadas e desenvolvidas para então serem publicadas para o uso dos browsers e os desenvolvedores.
Esse método foi mudado com o lançamento do HTML5 e o CSS3. A partir de agora, as duas tecnologias foram divididas em módulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utilizarem as novidades das linguagens.
As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. Há um grupo cuidando da propriedade Background, outro da propriedade Border, outro das propriedades de Texto e etc. Cada um destes grupos são independentes e podem lançar suas novidades a qualquer momento. Logo, o desenvolvimento para web ficou mais dinâmico, com novidades mais constantes.
O ponto negativo nesse formato, é que problemas de compatibilidade podem ocorrer com mais frequencia. Por exemplo, um browser pode adotar bordas arredondadas e outro não. Ou um browser pode escolher suportar um API diferente do API que o concorrente implementou. Contudo, os browsers tem mostrado grande interesse em se manterem atualizados em relação aos seus concorrentes.
Motores de Renderização Há uma grande diversidade de dispositivos que acessam a internet. Entre eles, há uma série de tablets, smartphones, pc's e etc. Cada um destes meios de acesso utilizam um determinado browser para navegar na web. Não há como os desenvolvedores manterem um bom nível de compatibilidade com todos estes browsers levando em consideração a particularidade de cada um. Uma maneira mais segura de manter o código compatível, é nivelar o desenvolvimento pelos motores de renderização. Cada browser utiliza um motor de renderização que é responsável pelo processamento do código da página.
Motor Browser Webkit Safari, Google Chrome Gecko Firefox, Mozilla, Camino Trident Internet Explorer 4 ao 9 Presto Opera 7 ao 10
É interessante que você faça código compatível com estes motores. Focando a compatibilidade nos motores de renderização você atingirá uma amplitude maior de browsers.
Por exemplo, se seu código funcionar no Webkit, você alcançará o Safari e o Chrome, dois dos principais browsers do mercado para desktops. Além disso, você também alcança aparelhos como Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.
Compatibilidade com HTML5 Atualmente o Webkit é o motor mais compatível com os Padrões do HTML5. Como a Apple tem interesse que seus dispositivos sejam ultracompatíveis com os Padrões, ela tem feito um belo trabalho de atualização e avanço da compatibilidade deste motor.
Contudo o Firefox e o Opera já estão compatíveis com grande parte da especificação do HTML5 e CSS3 e a cada upgrade eles trazem mais novidades e atualização dos padrões.
O que pode te preocupar de verdade é a retrocompatibilidade com versões antigas de browsers como o Internet Explorer. A Microsoft está fazendo um bom trabalho com o IE9, mas as versões 8 e 7 não tem quase nenhum suporte ao HTML5, o que é um problema sério para aplicações web baseadas em tecnologias mais recentes, mas que a base de usuários utiliza as versões antigas do Internet Explorer.
HTML 5 - Curso W3C Escritório Brasil13Markup
Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns módulos do HTML5:
Safari Chrome Opera Firefox IE 8 IE 9
Local Storage s s s s s s Histórico de Sessão s s s s s s Aplicações Offline s s n s n n Novos tipos de campos s s s n n n Form: Autofocus s s s n n n Form: Autocomplete n n s n n n Form: Required s s s n n n Video, Audio e Canvas Text s s s s n s
Técnicas de detectação Pode ser que o usuário não utilize um browser que suporta HTML5. Neste caso, você pode redirecioná-lo para uma versão do site mais simples, ou talvez apenas mostrar uma mensagem alertando o usuário sobre a importância da atualização do browser. Para isso temos algumas técnicas de detectação para conferir se o browser suporta ou não HTML5.
Quando o browser visita um website, ele constrói uma coleção de objetos que representam elementos HTML na página. Cada elemento no código é representado no DOM como um objeto diferente. Todo objeto DOM tem propriedades em comum, mas alguns objetos tem características específicas. Usaremos estes objetos para fazermos a detectação. Abaixo segue 4 meios que você poderá utilizar para detectar o suporte do browser:
1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a geolocalização.
3. Crie um elemento e verifique se um determinado método existe neste elemento, então chame o método e verifique se o valor retorna. Por exemplo, teste quais formatos de vídeo são suportados.