forked from zenorocha/diveintohtml5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
introduction.html
88 lines (60 loc) · 9.11 KB
/
introduction.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<meta charset=utf-8>
<title>Cinco Coisas Que Você Deveria Saber Sobre HTML5 - Dive Into HTML5</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link rel=alternate type=application/atom+xml href=https://github.com/diveintomark/diveintohtml5/commits/master.atom>
<link rel=stylesheet href=screen.css>
<style>
h1:before{content:"Introdução:"}
h2{text-align:left;text-transform:inherit}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=past.html>
<p>Você está aqui: <a href=index.html>Home</a> <span class=u>‣</span> <a href=table-of-contents.html#introduction>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>Cinco Coisas Que Você Deveria Saber Sobre HTML5</h1>
<p id=toc>
<p class=a>❧
<h2 id=one>1. Não é uma grande coisa só</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src=i/video.png alt="[mock video player]" width=226 height=166>
<p>Você deve estar se perguntando: “Como posso começar a usar <abbr>HTML5</abbr> se os navegadores antigos não a suportam?” Mas a própria questão nos engana. <abbr>HTML5</abbr> não é uma grande coisa só; é uma coleção de funcionalidades individuais. Então você não pode detectar suporte ao “<abbr>HTML5</abbr>,” porque isso não faz o menor sentido. Mas você <em>pode</em> detectar o suporte a funcionalidades individuais como canvas, vídeo e geolocalização.
<p>Você pode achar que o <abbr>HTML</abbr> é um conjunto de tags e colchetes angulados. Essa é uma parte importante, mas não é a história toda. A especificação do <abbr>HTML5</abbr> também define como esses colchetes angulados vão interagir com JavaScript, através do Document Object Model (<abbr>DOM</abbr>). A <abbr>HTML5</abbr> não define apenas uma tag <code><video></code>; também há uma <abbr>DOM</abbr> <abbr>API</abbr> correspondente para objetos de vídeo no <abbr>DOM</abbr>. Você pode usar essa <abbr>API</abbr> para detectar o suporte a diferentes formatos de vídeo, executar um vídeo, pausar, dar mute no áudio, identificar quanto o vídeo foi baixado, e todo o resto necessário para criar uma experiência rica ao usuário com relação a própria tag <code><video></code>.
<p>O <a href=detect.html>Capítulo 2</a> e o <a href=everything.html>Apéndice A</a> irão te ensinar como detectar de forma adequada o suporte para cada nova funciondalide da <abbr>HTML5</abbr>.
<h2 id=two>2. Você não precisa jogar nada fora</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src=i/forms.png alt="[sample form controls]" width=134 height=196>
<p>Ame ou odeie, uma coisa você não pode negar é que a <abbr>HTML</abbr> 4 é a formato de marcação mais bem sucedido que já existiu. <abbr>HTML5</abbr> é criado sobre esse sucesso. Você não precisa jogar fora sua marcação existente. Você não precisa reaprender coisas que já sabe. Se a sua aplicação web funcionou ontem em <abbr>HTML</abbr> 4, continuará funcionando hoje em <abbr>HTML5</abbr>. Ponto final.</p>
<p>Agora, se você quiser <em>aprimorar</em> suas aplicações web, você veio ao lugar certo. Veja esse exemplo concreto: <abbr>HTML5</abbr> suporta todos os controles de formulário da <abbr>HTML</abbr> 4, mas também inclui novos controles de input. Algumas são adições pedidas há tempos como sliders e date pickers; outras são mais sutis. Por exemplo, o tipo de input <code>email</code> parece exatamente como uma caixa de texto, porém os navegadores de dispositivos móveis irão customizar sua tela no teclado para facilitar a inserção de endereços de email. Navegadores mais antigos que não suportam o tipo de input <code>email</code> irão tratar o tipo de input como um input de texto comum, e o formulário ainda funciona sem mudanças na marcação ou scripts corretores. Isso significa que você pode começar a melhorar seus formulários web <em>hoje</em>, mesmo que alguns dos seus visitantes estejam presos ao Internet Explorer 6.
<p>Leia todos os mínimos detalhes sobre formulários em <abbr>HTML5</abbr> no <a href=forms.html>Capítulo 9</a>.
<h2 id=three>3. É fácil de começar</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src=i/markup-with-arrow.png alt="[sample HTML markup]" width=234 height=202>
<p>“Atualizar” para <abbr>HTML5</abbr> pode ser tão simples quanto atualizar o seu <i>doctype</i>. O doctype já deveria estar na primeira linha de toda página <abbr>HTML</abbr>. Versões anteriores do <abbr>HTML</abbr> definiram muitos doctypes, e escolher o doctype correto pode ser complicado. Em <abbr>HTML5</abbr>, há apenas um doctype:
<blockquote>
<p><code><!DOCTYPE html></code>
</blockquote>
<p>Atualizar para o doctype da <abbr>HTML5</abbr> não irá causar problemas a sua marcação atual, porque todas as tags definidas em HTML4 são suportadas
em <abbr>HTML5</abbr>. Mas possibilitará você usar — e validar — novos elementos semânticos como <code><article></code>, <code><section></code>, <code><header></code>, e <code><footer></code>. Você irá aprender sobre todos esses novos elementos no <a href=semantics.html>Capítulo 3</a>.
<h2 id=four>4. Já funciona</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src=i/rel-email.png alt="[form field with onscreen keyboard]" width=227 height=192>
<p>Quer você queira desenhar em canvas, tocar um vídeo, implementar melhores formulários ou construir aplicações web que funcionem offline, você descobrirá que a <abbr>HTML5</abbr> já é bastante suportada pelos navegadores. Firefox, Safari, Chrome, Opera, e navegadores móveis já suportam canvas (<a href=canvas.html>Capítulo 4</a>), vídeo (<a href=video.html>Capítulo 5</a>), geolocalização (<a href=geolocation.html>Capítulo 6</a>), armazenamento local (<a href=storage.html>Capítulo 7</a>), e mais. Google já suporta microdata annotations (<a href=extensibility.html>Capítulo 10</a>). Até mesmo a Microsoft — raramente conhecida por suportar padrões — suporta a maioria das funcionalidades da <abbr>HTML5</abbr> no Internet Explorer 9.
<p style="float:right;margin:0 0 1.75em 1.75em"><img src=i/gears.png alt="[Gears saying "I can help"]" width=125 height=75>
<p>Cada capítulo desse livro inclui quadros de compatibilidade com os navegadores mais familiares. Porém o mais importante é que cada capítulo inclui uma discussão franca das suas opções se você precisar suportar navegadores antigos. As funcionalidades da <abbr>HTML5</abbr> como geolocalização (<a href=geolocation.html>Capítulo 6</a>) e vídeo (<a href=video.html>Capítulo 5</a>) foram primeiramente providas por plugins como Gears ou Flash nos navegadores. Outras funcionalidades, como canvas (<a href=canvas.html>Capítulo 4</a>), podem ser emuladas inteiramente em JavaScript. Esse livro vai ensinar você como atingir funcionalidades nativas em navegadores modernos, sem deixar os navegadores mais antigos para trás.
<h2 id=five>5. Está aqui para ficar</h2>
<p>Tim Berners-Lee inventou a world wide web no início dos anos 1990. Mais tarde ele fundou a <abbr>W3C</abbr> para agir como um administrador dos padrões da web,
o que a organização vem fazendo por mais de 15 anos. Isso é o que a <abbr>W3C</abbr> tem a dizer sobre o futuro dos padrões da web, em Julho de 2009:
<blockquote cite=http://www.w3.org/News/2009#item119>
<p>Hoje o Diretor anunciou que quando a licença do grupo de trabalho sobre <abbr>XHTML</abbr> 2 expirar, como programado para o final de 2009, a licença não será renovada. Fazendo isso e aumentando os recursos no grupo de trabalho de <abbr>HTML</abbr>, a <abbr>W3C</abbr> espera acelerar o progresso da <abbr>HTML5</abbr> e clarificar a posição
da <abbr>W3C</abbr> acerca do futuro da <abbr>HTML</abbr>.
</blockquote>
<p><abbr>HTML5</abbr> está aqui para ficar. <a href=past.html>Vamos mergulhar</a>.
<p class=a>❧
<div class=pf>
<h4>Você sabia?</h4>
<div class=moneybags>
<blockquote><p>Em associação a Google Press, O’Reilly está distruindo este livro em variados formatos, incluindo papel, ePub, Mobi, <abbr>DRM</abbr>-free e <abbr>PDF</abbr>. A edição paga é chamada “HTML5: Up & Running,” e está disponível agora.
<p>Se você gostou dessa introdução e quer mostrar como apreciou, basta <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">comprar o livro “HTML5: Up & Running” com esse link afiliado</a> ou <a href=http://oreilly.com/catalog/9780596806033>comprar a edição eletrônica diretamente da O’Reilly</a>. Você vai ganhar um livro, e eu vou ganhar um trocado. Atualmente não aceito doações diretas.
</blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=017884302975346027366:bgclqh8nvse><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google™"> <input type=submit name=sa value=Pesquisar></div></form>
<script src=j/jquery.js></script>
<script src=j/dih5.js></script>