Html 5

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

Quem usa? Desenvolvedores
Pesquisa realizada em 2013 pelo Kendo UI

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

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>

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

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)

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

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>

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.

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>

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

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

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

Acessibilidade
• Browsers com suporte

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

Html 5

Mais conteúdo relacionado

Semelhante a Html 5 (20)

Último (20)

Html 5