Please enable JavaScript.
Coggle requires JavaScript to display documents.
Novidades do HTML 5 (CAI MUITOOOO) (O que entrou (Resumido): (Canvas,…
Novidades do HTML 5 (CAI MUITOOOO)
Obs (so de entender isso ja ajuda muito). HTML 5:
Surgiu em uma epoca de entrada pesada de midias. Teve que ir acompanhando
O que ele tenta permitir
Trabalho com midias como forma nativa do HTML
Facilitar o acesso de pessoas com deficiencia
Possibilitar o acesso offline para a pagina
Formalizar diversos tratamentos que eram feitos de forma diferente pelos browsers
Permitir uma maior clareza na intensao do desenvolvedor
O que saiu
Coisas que falaram de formatacao! Pq foi migrando para o css
O que entrou (Resumido):
Canvas
Geolocalizacao
Midias (audio, video, tracks)
Local Storage
Web Workers e Web Sockets
Offline web applications
Melhoras nos inputs( novos types, placeholder, autofocus, meter)
Midia
<Video width = "400" controls> <source src = "mov_bbb.mp4" type= "video/mp4"> Your broser doesnt support HTML 5 </video>
Entao, foi dito o tamanho que ele vai ter na tela, foi dito para mostrar os controles do video, especificou a fonte (URL, que tem que ser valida!!), e deixou uma msg caso o navegador nao suporte html 5 (que é o caso do internet explorer ate 9)
Nao precis mais instalar plugin que nem antes...
<audio controls> <source src = "horse.ogg" type="audio/ogg"> </audio>
Mesma ideia do video
<track> - definem arquivos de texto nos audios ou videos (ex: legendas )
<Video width = "400" controls> <source src = "mov_bbb.mp4" type= "video/mp4"> Your broser doesnt support HTML 5
<track src= "subtitles_en.vtt" kind = "subtitles" srclang="en" label= "English"> </video>
Fala a linguagem, a fonte e define o nome da legenda (English)
Canvas - Permite fazer desenhos no HTML 5
<canvas id="mycanvas" width="250" height="200"/> <script> ........ </script>
o desenho é definido no script como o javascript (vai ser falado mais na frente
Perceber que a tag canvas é aberta e fechada ao msm tempo.
Output (Minha pagina querendo mostrar algo para usuario relativo ao formulario). Serve para marcar processamentos.
Ex: Aparecer o resultado de uma conta que o usuario faz.
Novos Elementos de Organizacao
<section> Cria sessoes no HTML
<aside> Cria uma area lateral para falar do conteudo relacionado
<nav> Cria uma area com links de navegacao
<footer>Cria uma area de rodape
<header> Cria uma area de cabecalho visual da pagina
Web workers: Como se fossem operarios trabalhando no meu browsers
permite o processamento em segundo plano. Antigamente, quando usado javascript, as vezes tava muito pesado e ficava aquela bolinha girando e a pagina travada..Se usado webworker, isso nao acontece
Da pra criar webworkers trabalhando em paralelo
Local Storage e Aplication Caching
Local Storage meio que criou um banco de dados (de até 5MB por pagina) no meu navegador.
Ou seja, precisa guardar informacao no proprio navegador
Application Caching: Permite o navegador executar pagina SEM CONEXAO com a internet. Nao tem acesso a informacoes ONLINE
OBS: Misturando esses 2, o que acontece: Permite voce trabalhar offline e quando a conexao voltar ele tem tudo que foi desenvolvido salvo e voce sicroniza..EX: Que nem o gmail qnd vc cria rascunhos offline
Servico de Geocalizacao: é o browser querendo descobrir a localizacao do usuario. Facilita a obtencao de endereco por exemplo. Precisa de permissao do usuario.
Cuidado com os pegas!!!
<head> não é <header>.
head é o que fica abaixo do <html> que contem os metadados da pagina
header ta dentro de <body> e agrupa dados do cabecalho "visual" da pagina
Tags HTML5 de mídia e saída de dados
Media: video, audio, track, embed
output
Grafica: Canvas
HTML 5 não é evolucao do XHTML. É evolucao do HTML4.1
<link> não é <a>
<link> está dentro de <head> e serve para associar recursos de outra pagina na sua.
<a> é um hyperlink e vai navegar para outra pagina (cujo endereco está em href
Elementos removidos
applet
center
frame
acronym
front
frameset