Novidades do HTML5. HTML5 vs HTML4

1. HTML 5
Novidades do HTML 5
Apresentação: Daniel

2. Quem usa? Desenvolvedores
Pesquisa realizada em 2013 pelo Kendo UI

3. Para que serve o HTML?

4. Para que serve o HTML?

5. Para que serve o HTML?

6. Layout DIV vs TABLE?
• http://divtable.com/generator/

7. Novas tags (Multimídia)
• Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
• Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

8. Novas tags (Multimídia)
• Canvas
<canvas id="myCanvas" width="200" height="100" style="
border:1px solid #000000;">
</canvas>
Exemplos: https://davidwalsh.name/canvas-demos
• SVG
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,2
55);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Exemplos: https://www.highcharts.com/demo

9. Novas tags (Estruturais & Semanticas)
<article> Define um artigo
<aside> Define que vai ficar ao lado do conteúdo da página
<bdi>
Isola parte de um texto que vai ter uma formatação com uma
direção diferrente do texto for a da tag.
<details> Define detalhes adicionais que o usuario pode ver ou esconder
<dialog> Define uma caixa de diálogo ou janela
<figcaption>
Define a descrição de uma imagem que esteja dentro de uma tag
do tipo FIGURE.
<figure> Define um componente auto contido
<footer> Define o rodapé de uma seção ou do document.
<header> Define o cabeçalho para a página ou para uma seção
<main> Define o conteúdo principal da página
<mark> Define um texto marcado (com marcador)

10. Novas tags (Estruturais & Semanticas)
<menuitem>
Define um item de menu que pode ser incorporado a um popup
menu
<meter>
Define a métrica usada para medida de um indicador em um espaço
definido
<nav> Define os links de navegação
<progress> Representa o progreço de uma tarefa
<rp>
Define o que deve aparecer para browsers que não tem suporte a
anotações RUBY
<rt>
Define uma explicação ou pronúncia de caracteres desconhecidos
(geralmente usado em caracteres de idiomas asiáticos)
<ruby> Define uma anotação ruby (para caracteres do leste asiático)
<section> Define uma seção em um documento
<summary> Define um cabeçalho para a tage <details>
<time> Define um data/hora
<wbr> Define uma possivel quebra de linh

11. Elementos Form
• Datalist (cria uma lista de itens)
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

12. Elementos Form
• KeyGen
▫ Serve para autenticar usuários com criptografia
assimétrica.
▫ Quando o formulário é enviado, essa tag gera o a
chave privada e a pública.
▫ A chave privada é guardada localmente e a pública
é enviada ao servidor.

13. Elementos Form
• Output
▫ Serve para calcular o resultado de uma equação.
▫ <input type="number" id="a" name="a" value="50">
<input type="number" id="b" name="b" value="50">
<output name="x" for="a b"></output>

14. Input Tags
• Email
• Password
• Color
• Date
• Datetime
• Datetime-local
• Month
• Number
• Range
• Search
• Tel
• Time
• Url
• Week

15. Atributos das tags Input
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

16. Input com reconhecimento de voz
• <input type="text" x-webkit-speech>
• https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html

17. Acessibilidade

18. Acessibilidade

19. Acessibilidade
• Browsers com suporte

20. Acessibilidade

21. Acessibilidade
• http://html5accessibility.com/
Mais em:

22. Dúvidas?