-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (107 loc) · 7.41 KB
/
index.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="pt-br">
<head> <!--area comportamental do site-->
<meta charset="UTF-8"/>
<title>Tudo Sobre Google Glass</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" /> <!--(stylesheet) quer dizer folha de estilo (href (hypertext reference)) configura o arquivo a ser carregado-->
</head>
<body>
<script src="javascript/funcoes.js"></script>
<div id="interface">
<header id="cabecalho"> <!--cabeçalho-->
<hgroup> <!--quando tiver um titule e sub titula, pode usar um grupo-->
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
<img id="icone" src="imagens/glass-oculos-preto-peq.png">
<nav id="menu"><!--tag para navegação-->
<h1>Menu Principal</h1>
<!--<ol>tag para lista ordenada, pode ser usados parametros type="1";para começar do inicio ou o parametro start="3"; para começar de onde quiser(o 3 foi só exemplo, lembrando que só pode ser usado números)
<li>Home</li>
<li>Especificações</li>
<li>Fotos</li>
<li>Multimídia</li>
<li>Fale conosco</li>
</ol>-->
<ul type="disc">
<!--<ul>tag para lista não ordenadas, pode ser usado o parametro type="square";"circle";"disc"-->
<!--LEMBRANDO QUE PODE SER INSERIDO UMA LISTA DENTRO DE OUTRA LISTA; TANTO ORDENADA COMO NÃO ORDENADA-->
<li onmouseover="mudaFoto('imagens/home.png')" onmouseout="mudaFoto('_imagens/glass-oculos-preto-peq.png')"><a href="index.html">Home</a></li>
<li onmouseover="mudaFoto('imagens/especificacoes.png')" onmouseout="mudaFoto('_imagens/glass-oculos-preto-peq.png')"><a href="specs.html">Especificações</a></li>
<li onmouseover="mudaFoto('imagens/fotos.png')" onmouseout="mudaFoto('_imagens/glass-oculos-preto-peq.png')"><a href="fotos.html">Fotos</a></li>
<li onmouseover="mudaFoto('imagens/multimidia.png')" onmouseout="mudaFoto('_imagens/glass-oculos-preto-peq.png')"><a href="multimidia.html">Multimídia</a></li>
<li onmouseover="mudaFoto('imagens/contato.png')" onmouseout="mudaFoto('_imagens/glass-oculos-preto-peq.png')"><a href="fale-conosco.html">Fale conosco</a></li>
</ul>
</nav>
</header>
<section id="corpo"> <!--sessão-->
<article id="noticia-principal"> <!--artigo principal-->
<header id="cabecalho-artigo"> <!--posso ter quantos cabecalhos eu quiser-->
<hgroup>
<h3>Tecnologia > Inovações</h3>
<h1>Saiba tudo sobre o Google Glass</h1>
<h2>por Gustavo Guanabara</h2>
<h3 class="direita">Atualizado em 23/Abril/2013</h3> <!--class para configuracao individual-->
</hgroup>
</header>
<h2>O que é</h2>
<!--No paragrafo abaixo usei a tag <a> uma ancora para o google glass; com parametro href (para abrir em uma nova página usemos dentro da tag <a> o parametro target="_blank")-->
<p>O <span style="font-weight:900;">Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de <i><a href="https://www.google.com/glass/start/" target="_blank">Project Glass</a></i>, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p>
<figure class="foto-legenda">
<!--definindo a classe da imagem usando o class e dando o nome de foto-legenda-->
<img src="imagens/glass-quadro-homem-mulher.jpg" />
<figcaption>
<h3>Google Glass</h3>
<p>Uma nova maneira de ver o mundo</p>
</figcaption>
</figure>
<h2>Data de lançamento</h2>
<p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>
<h2>Especificações Técnicas</h2>
<table id="tabelaspec"> <!--o nome ja diz que eh uma tabela-->
<caption>Tabela Técnica do Google Glass<span>Mar/2013</span></caption> <!--serve para definir o título de uma tabela-->
<tr><td class="ce">Tela</td> <td class="cd">Resolução equivalente a tela de 25"</td></tr> <!--linhas são table rows=<tr> e cada linha contem dados que são table date=<td>-->
<tr><td rowspan="2" class="ce">Camera</td> <td class="cd">5MP para fotos</td></tr>
<tr><td class="cd">720p para vídeos</td></tr> <!--o parametro rowspan serve para criar duas linhas para camera -->
<!--existe também o colspan; que serve para criar uma coluna dupla ex:<tr><td colspan>Linha Extra</td></tr>-->
<tr><td rowspan="2" class="ce">Conectividade</td><td class="cd">Wi-Fi</td></tr>
<tr><td class="cd">Bluetooth</td></tr>
<tr><td class="ce">Memória Interna</td> <td class="cd">12GB</td></tr>
</table>
<h2>Como funciona</h2>
<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça.</p>
<h2>O que você pode fazer com o Google Glasses</h2>
<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>
<div id="tv-radio">
<video id="filme" controls="controls" poster="_imagens/video-mini01.jpg">
<source src="media/one-day.mp4" type="video/mp4" />
<source src="media/one-day.webm" type="video/webm" />
<source src="media/one-day.ogv" type="video.ogg"/>
Desculpe, mas não foi possível carregar o vídeo.
</video>
</div>
</article>
</section>
<aside id="lateral"> <!--conteúdo lateral-->
<h1>Outras Notícias</h1>
<h2>Vídeo mais recente</h2>
<div id="tv-radio">
<video id="filme" controls="controls" poster="_imagens/video-mini02.jpg">
<source src="media/how-it-feels.mp4" type="video/mp4"/>
<source src="media/how-it-feels.webm" type="video/webm"/>
<source src="media/how-it-feels.ogv" type="video/ogg"/>
Desculpe, mas não foi possível carregar o vídeo.
</video>
</div>
<h2>Novidades no Glass</h2>
<p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>
<p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.</p>
</aside>
<footer id="rodape"> <!--rodapé-->
<p>Copyright 2013 - by Gustavo Guanabara<br />
<a href="http:/facebook"target="_blank">Facebook</a> |
<a href="twitter.com"target="_blank">Twitter</a></p>
</footer>
</div>
</body>
</html>