O documento introduz os principais conceitos de HTML5, incluindo: (1) suas novas tags semânticas como <section>, <nav> e <article>; (2) seus novos recursos como vídeo, áudio e armazenamento local; e (3) como substitui o XHTML ao oferecer maior flexibilidade e retrocompatibilidade.

1. INTRODUÇÃO A HTML5
Salvador Torres
@ssatorres

2. HTML
HTML = Hypertext Markup
Language (Linguagem de Marcação
de Hipertexo);
Linguagem Interpretada por um
Browser;
Define o formato do documento e
as ligações com outros
documentos;

3. HTML
Desenvolvido originalmente por
Tim Berners-Lee;
Entre 1993 e 1995, o HTML ganhou
as versões HTML+, HTML2.0 e
HTML3.0;
Ainda não era um padrão;

4. HTML
Em 1997 o W3C criou a versão 3.2;
A partir daí HTML se tornou um
padrão;
Em 1999 saiu a especificação do
HTML4.

5. HTML
Tags básicas:
 <a></a>;
 <p></p>;
 <img/>;
 <div></div>
 <table></table>
 <iframe></iframe>
 <br/>

6. HTML
Trocando em miúdos:
“O HTML é uma linguagem para
publicação de conteúdo na Web
(texto, imagem, vídeo, áudio, etc.)”.

7. W3C

8. W3C
World Wide Web Consortium;
Fundado por Tim Berners-Lee;
Visa levar a Web ao seu potencial
máximo;
Fóruns abertos que promovam a
sua evolução e assegurem a sua
interoperabilidade.

9. W3C
Padrões:
CSS
DOM(JavaScript)
XML
XHTML 1.0

10. HTML5

11. HTML5
É a nova versão do HTML4;
Necessidade de criar elementos
semânticos;
Ainda está em testes e a versão
final é prometida para 2012;

12. HTML5
Cria novas tags e muda a função de
outras;
Padrão para criação de sessões
comuns como rodapé, cabeçalho,
sidebar e menus.

13. HTML5
 Muda a forma de escrever código
e organizar a informação:
Mais semântica e menos código;
Mais interatividade sem plugins e
perda de performance;
Código interoperável, pronto para
futuros dispositivos;
Facilita a reutilização da informação
de diversas formas.

14. HTML5 vs XHTML2

15. HTML5 vs XHTML2
WHATWG vs W3C;
WHATWG (Mozilla, Apple e Opera
em 2004);
W3C -> XHTML2;
WHATWG -> HTML5
Mais flexibilidade;
Integrar Web Forms 2.0 e abandonar
o Web Controls 1.0;
Retrocompatibilidade.

16. HTML5 vs XHTML2
Em 2006 a W3C reconheceu as
vantagens do HTML5;
W3C e WHATWG passaram a
trabalhar em conjunto;

17. Conhecendo HTML5

18. Novos Recursos
Controle embutido de conteúdo
multimídia (Áudio e Vídeo);
Desenvolvimento de gráficos
bidimensionais;
Aprimoramento do uso off-line;
Geolocalização;
Validação de Formulários nativa;
Drag and Drop.

19. Estrutura Básica
XHTML

20. Estrutura Básica
HTML5
 O atributo LANG não é restrito ao elemento HTML, ele
pode ser utilizado em qualquer outro elemento para
indicar o idioma do texto representado.

21. Estrutura Interna
XHTML

22. Estrutura Interna
HTML5

23. Novos Elementos
<section>
 define uma nova seção genérica no
documento (introdução ou destaque,
novidades, etc.);
<nav>
seção da página que contém links
(importantes) para outras partes do
website;

24. Novos Elementos
<article>
parte da página que poderá ser
distribuída e reutilizada em FEEDs por
exemplo (post, artigo, um bloco de
comentários de usuários, etc.);
<aside>
define uma área de conteúdo
relacionado ao seu conteúdo
principal (sidebars em textos
impressos, publicidade, etc.);

25. Novos Elementos
<hgroup>
agrupar elementos de título de H1
até H6 quando eles tem múltiplos
níveis de títulos;
<time>
marcar parte do texto que exibe um
horário ou uma data;

26. Novos Elementos
<header>
grupo de introdução ou elementos de
navegação (índices de conteúdos,
campos de busca ou até mesmo
logomarcas);
<footer>
representa literalmente o rodapé da
página.

27. Novos Elementos
Os novos elementos possibilitaram
uma nitidez maior no código;
É possível diferenciar diretamente
pelo código HTML5 áreas
importantes do site como sidebar,
rodapé e cabeçalho;

28. Novos Elementos
Os buscadores conseguem
vasculhar o código de maneira
mais eficaz;
Guardando informações mais
exatas e levando menos tempo
para estocar essa informação.

29. Elementos removidos
<frame>
Fere princípios de acessibilidade;
<basefont>,<big>,<center>,<font>,
<s>,<strike>,<tt>,<u>
Efeito somente visual;

30. Elementos Alterados
<address>
agora é tratado como uma seção no
documento;
<hr>
mesmo nível que um parágrafo;
<strong>
ganhou mais importância.

31. Web Semântica

32. Suporte dos Browsers
http://html5test.com/

33. Suporte dos Browsers

34. Formulários
<input />
Novos valores para type
tel (sem formatação ou mascara);
search (mudar a aparência para parecer
com os demais do sistema);
email (validação do email podendo
ainda integrar com a agenda de
contatos);
url (formatação e validação de
endereços web);

35. Formulários
<input />
Novos valores para type
Datas e horas (calendário, um seletor de
horário ou outro auxílio ao
preenchimento);
Number (aceita somente numeros);
range (valores numéricos porém com
uma barra de seleção);
color (paleta de cores com resultado
#000FFF)

36. Formulários
Mais recursos
autofocus
o foco será colocado neste campo
automaticamente ao carregar a página;
 <input name="login" autofocus/>
Placeholder text
texto padrão do campo antes do foco ir
para ele;
 <input name="q" placeholder="Pesquisa"/>

37. Formulários
Mais recursos
required
transformar o campo em obrigatório;
 <input name="login" required/>
maxlength
o atributo agora também está disponível
no textarea;

38. Formulários
Mais recursos
Custom validators
definir expressões regulares de
validação, sem Javascript;
 <input name="cpf" oninput="vCPF(this)"/>
contenteditable
tornar um elemento do HTML editável.
 <div contenteditable="true">
Edite-me...
</div>
http://html5demos.com/contenteditable

39. Formulários
Mais recursos
pattern
definir expressões regulares de
validação, sem Javascript;
 <input name="CEP" id="CEP" required
pattern="d{5}-?d{3}" />

40. Formulários
Todos os recursos:
 http://slides.html5rocks.com/#slide21

41. API Storage
 Um dos grandes desafios de usabilidade
é criar uma navegação consistente
ações locais do usuário numa página fossem
refletidas na próxima.(Menu em árvore);
histórico com o uso de Ajax.

42. API Storage
 Soluções:
Histórico de Sessão
elemento history;
localStorage e sessionStorage
Antes
 Cookies (Interface complexa e Limite de
armazenamento);
Agora
 localStorage(armazena os dados no client sem
expiração definida) ;
 sessionStorage(armazena os dados durante a sessão
atual de navegação).

43. API Storage
Exemplo
 http://slides.html5rocks.com/#slide7

44. Drag and Drop
Exemplo
 http://slides.html5rocks.com/#slide13

45. Midias com HTML5
Áudio
 <audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
<p>Faça o <a href="mus.mp3">download da música</a>.</p>
</audio>
 O valor de controls define se um controle de áudio, com botões de play,
pause, volume, barra de progresso, contador de tempo, etc. será
exibido na tela;
 O estilo dos botões é definido pelo browser.

46. Midias com HTML5
Vídeo
 <video controls="true" autoplay="true" width="400“ height="300">
<source src="u.ogv" />
<source src="u.mp4" />
<source src="u.wmv" />
<p>Faça o <a href="u.mp4">download do vídeo</a>.</p>
</video>

47. Midias com HTML5
Youtube (http://youtube.com/html5)

48. Midias com HTML5
 Sublime http://sublimevideo.net/demo)

49. Midias com HTML5
 Exemplo
 http://slides.html5rocks.com/#slide22

50. Midias com HTML5
Elemento device
Webcam
 <device type="media">
interface solicitando ao usuário acesso a sua
webcam. Se ele tiver mais de uma, também será
permitido que ele escolha que webcam usar;
Stream
basta trocar o valor “media” por “fs”.

51. Canvas
 A Canvas API permite a você desenhar na
tela do navegador via Javascript. O único
elemento HTML existente para isso é o
elemento canvas, o resto todo é feito via
Javascript.
 <canvas id="x" width="300" height="300"></canvas>

52. Canvas
 Com a tag canvas é possível criar gráficos,
games, aplicações web, etc.

53. Canvas
 Exemplos
http://mugtug.com/sketchpad/
http://media.chikuyonok.ru/ambilight/
http://html5demos.com/canvas-grad
http://slides.html5rocks.com/#slide23

54. SVG
 SVG é uma linguagem para marcação de
gráficos vetoriais.
Retângulo
 <rect x="10" y="10" width="150" height="50"
stroke="#000" stroke-width="5" fill="#FF0000" />
Circulo
 <circle cx="70" cy="240" r="60" stroke="#00FF00"
stroke-width="5" fill="#FFFFFF" />

55. SVG
 Exemplos
http://slides.html5rocks.com/#slide26
http://slides.html5rocks.com/#slide27

56. SVG
Logomarca da Wikipedia

57. Geolocation
 Há três maneiras populares programa descobrir sua posição global:
 Geolocalização IP
 É o método usado pela maioria dos navegadores web em computadores. Através
de consultas whois e serviços de localização de IP, vai determinar a cidade ou
região em que você está.
 Triangulação GPRS
 Dispositivos conectados a uma rede de celulares podem determinar sua posição
pela triangulação das antenas GPRS próximas. É bem mais preciso que o método
baseado em IP, vai mostrar em que parte do bairro você está.
 GPS
 É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5
metros.

58. Geolocation
 navigator.geolocation.getCurrentPosition(showpos)
 Onde showpos é uma função callback, que vai receber um objeto
de posicionamento. Veja um exemplo:
 function showpos(position){
lat = position.coords.latitude
lon = position.coords.longitude
alert('Your position: '+lat+','+lon)
}

59. Geolocation
 Exemplos
http://html5demos.com/geo
http://slides.html5rocks.com/#slide14

60. Sites interessantes
 http://html5demos.com/
 http://html5-showcase.com/
 http://html5rocks.com/

61. Referências
 http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
 http://pt.wikipedia.org/wiki/HTML5
 http://w3c.br/cursos/html5/conteudo/