Skip to content

Commit 299e6f4

Browse files
heloisaldanhaheloisaldanha
authored
Add files via upload
1 parent 1963e2d commit 299e6f4

File tree

7 files changed

+544
-0
lines changed

7 files changed

+544
-0
lines changed

‎projeto-glass-html5/fale-conosco.html

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>Tudo sobre Google Glass</title>
6+
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
7+
<link rel="stylesheet" type="text/css" href="_css/form.css">
8+
9+
</head>
10+
<script language="javascript" src="_javascript/funcoes.js"></script>
11+
<script>
12+
function calc_total(){
13+
var qtd = parseInt(document.getElementById('cQtd').value);
14+
tot = qtd * 1500;
15+
document.getElementById('cTot').value = tot;
16+
}
17+
</script>
18+
<body>
19+
<div id="interface">
20+
<header id="cabecalho">
21+
<hgroup>
22+
<h1>Google Glass</h1>
23+
<h2>A revolução do Google está chegando</h2>
24+
</hgroup>
25+
26+
<img id="icone"src="_imagens/contato.png"/>
27+
<nav id="menu">
28+
<h1>Menu Principal</h1>
29+
<ul onmouseout="mudaFoto('contato')">
30+
<li onmouseover="mudaFoto('home')" ><a href="index.html">Home<a></li>
31+
<li onmouseover="mudaFoto('especificacoes')" ><a href="specs.html">Especificações</a></li>
32+
<li onmouseover="mudaFoto('fotos')"><a href="fotos.html">Fotos</a></li>
33+
<li onmouseover="mudaFoto('multimidia')"><a href="multimidia.html">Multimídia</a></li>
34+
<li onmouseover="mudaFoto('contato')"><a href="fale-conosco.html">Fale conosco</a></li>
35+
</ul>
36+
</nav>
37+
</header>
38+
39+
<section id="corpo-full">
40+
<article id="noticia-principal">
41+
<header id="cabecalho-artigo">
42+
<h3>Fale Conosco > Contato</h3>
43+
<h1>Formulário de Contato</h1>
44+
<h2>por Pablo Rocha</h2>
45+
<h3 class="direita">Atualizado em 01/Maio/2013</h3>
46+
</header>
47+
</article>
48+
</section>
49+
50+
51+
<form method="POST" id="fContato" oninput"calc_total()">
52+
<fieldset id="usuario">
53+
<legend>Identificação do Usuário</legend>
54+
<p><label for="cNome">Nome:</label>
55+
<input type="text" name="tNome" id="cNome" size="20" maxlength="30"placeholder="Nome Completo"/></p>
56+
57+
<p><label for="cSenha">Senha:</label>
58+
<input type="password" name="tSenha" id"cSenha" size="8" maxlength="8" placeholder="Digita uma senha"/></p>
59+
60+
<p><lable>E-mail:</label>
61+
<input type="email" name="tEmail" id="cEmail" size="20" maxlength="40"/></p>
62+
63+
<fieldset id="sexo">
64+
<legend>Sexo</legend>
65+
<input type="radio" name="tSexo" id="cMasc" checked/><label for="cMasc">Masculino</label></br>
66+
<input type="radio" name="tSexo" id="cFem"/> <label for="cFem">Feminino</label>
67+
</fieldset>
68+
<p>Data de Nascimento: <input type="date" name="tNasc" id="cNasc"/></p>
69+
70+
</fieldset>
71+
72+
<fieldset id="endereco">
73+
<legend>Endereço do Usuário</legend>
74+
<p><label for="cRua">Logradouro:</label>
75+
<input type="text" name="tRua" id="cRua" size="13" maxlength="80" placeholder="Rua, Av, Trava, ..."/></p>
76+
77+
<p><label for="cNum">Número:</label>
78+
<input type="number" name="tNum" id="cNum" min="0" max="99999"/></p>
79+
80+
<p><label for="cEst">Estado:</label>
81+
<select>
82+
<optgroup label="Região Sudeste">
83+
<option value="RJ">Rio de Janeiro</option>
84+
<option value="SP">São Paulo</option>
85+
</optgroup>
86+
87+
<optgroup label="Região Nordeste">
88+
<option selected value="BA">Bahia</option>
89+
</optgroup>
90+
</select> </p>
91+
<p><label for="cCid">Cidade:</label>
92+
<input type="text" name="tCid" id="cCid" maxlength="40" size="20" placeholder="Sua Cidade" list="cidades"/></p>
93+
<datalist id="cidades">
94+
<option value="Rio de Janeiro"></option>
95+
<option value="Nova Iguaçu"></option>
96+
<option value="Niteroi"></option>
97+
</datalist>
98+
</fieldset>
99+
100+
<fieldset id="mensagem">
101+
<legend>Mensagem do Usuário</legend>
102+
<p><label for="cUrg">Grau de Urgência:</label>
103+
Mín<input type="range" name="tUrg" id="cUrg" min="0" max="10" step="2"/>Máx</p>
104+
<p><label for="cMsg">Mensagem:</label>
105+
<textarea name="tMsg" id="cMsg" cols="35" rows="5" placeholder="Deixe aqui sua mensagem"></textarea></p>
106+
</fieldset>
107+
108+
<fieldset id="pedido">
109+
<legend>Quero um Google Glass</legend>
110+
<p><input type="checkbox" name="tPed" id="cPed" checked>
111+
<label for="cPed">Gostaria de adquirir um Google Glass quando disponível</label></p>
112+
113+
<p><label for="cCor">Cor:</label>
114+
<input type="color" name="cCor" id="cCor" valeu="0000FF"/></p>
115+
116+
<p><label for="cQtd">Quantidade:</label>
117+
<input type="number" name="tQtd" id="cQtd" min="0" max="5" value="0"></p>
118+
119+
<p><label for="cTot">Preço Total:</label> R$
120+
<input type="text" name="tTot" id="cTot" placeholder="Total a pagar" readonly></p>
121+
</fieldset>
122+
123+
<input type="image" name="tEnviar"src="_imagens/botao-enviar.png"/>
124+
</form>
125+
126+
127+
<footer id="rodape">
128+
<p>Copyright &copy; 2013 - by Pablo Rocha <br/>
129+
<a href="http://facebook.com/cursosemvideo" target="_blank">Facebook</a> |
130+
<a href="http://twitter.com/cursosemvideo" target="_blank">Twitter<a/> </p>
131+
</footer>
132+
</div>
133+
</body>
134+
</html>

‎projeto-glass-html5/fotos.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>Tudo sobre Google Glass</title>
6+
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
7+
<link rel="stylesheet" type="text/css" href="_css/fotos.css"/>
8+
<link rel="stylesheet" type="text/css" href="_css/fotos.css"/>
9+
10+
</head>
11+
<script language="javascript" src="_javascript/funcoes.js"></script>
12+
<body>
13+
<div id="interface">
14+
<header id="cabecalho">
15+
<hgroup>
16+
<h1>Google Glass</h1>
17+
<h2>A revolução do Google está chegando</h2>
18+
</hgroup>
19+
20+
<img id="icone"src="_imagens/fotos.png"/>
21+
<nav id="menu">
22+
<h1>Menu Principal</h1>
23+
<ul onmouseout="mudaFoto('fotos')">
24+
<li onmouseover="mudaFoto('home')" ><a href="index.html">Home<a></li>
25+
<li onmouseover="mudaFoto('especificacoes')" ><a href="specs.html">Especificações</a></li>
26+
<li onmouseover="mudaFoto('fotos')"><a href="fotos.html">Fotos</a></li>
27+
<li onmouseover="mudaFoto('multimidia')"><a href="multimidia.html">Multimídia</a></li>
28+
<li onmouseover="mudaFoto('contato')"><a href="fale-conosco.html">Fale conosco</a></li>
29+
</ul>
30+
</nav>
31+
</header>
32+
33+
<section id="corpo-full">
34+
<article>
35+
<header id="cabecalho-artigo">
36+
<hgroup>
37+
<h3>Glass > Fotos</h3>
38+
<h1>Galeria de Imagens do Google Glass</h1>
39+
<h2>por Pablo Rocha</h2>
40+
<h3>Atualizado em 01/Maio/2013</h3>
41+
</hgroup>
42+
</header>
43+
44+
<p>Veja na nossa galeria de fotos várias belas imagens que mostram algumas das principais características do Google Glass, como recursos e propriedades que estão impressionando o mundo inteiro. Basta passar o mouse sobre uma das fotos para ver uma versão ampliada e com uma breve descrição.</p>
45+
46+
<ul id="album-fotos">
47+
<li id="foto01"><span>Agenda e lembretes</span></li>
48+
<li id="foto02"><span>Sergey Brin usando o Glass</span></li>
49+
<li id="foto03"><span>Leve e compacto</span></li>
50+
<li id="foto04"><span>Sensação de uma tela de 50"</span></li>
51+
<li id="foto05"><span>Vários tipos de lente</span></li>
52+
<li id="foto06"><span>Informações importantes</span></li>
53+
</ul>
54+
55+
</article>
56+
</section>
57+
58+
<footer id="rodape">
59+
<p>Copyright &copy; 2013 - by Pablo Rocha <br/>
60+
<a href="http://facebook.com/cursosemvideo" target="_blank">Facebook</a> |
61+
<a href="http://twitter.com/cursosemvideo" target="_blank">Twitter<a/> </p>
62+
</footer>
63+
</div>
64+
</body>
65+
</html>

‎projeto-glass-html5/google-glass.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Informações sobre o Google Glass</title>
6+
<link rel="stylesheet" href="">
7+
<style>
8+
body {
9+
font-family: Arial;
10+
font-size: 10pt;
11+
}
12+
13+
p {
14+
text-align: justify;
15+
text-indent: 20px;
16+
}
17+
18+
article h1 {
19+
font-size: 15pt;
20+
color: #ffffff;
21+
background-color: rgba(0,0,0,.3);
22+
padding: 5px;
23+
margin: 0px;
24+
}
25+
26+
article h2 {
27+
font-size: 13pt;
28+
color: #888888;
29+
margin: 0px;
30+
}
31+
32+
article {
33+
margin-bottom: 800px;
34+
}
35+
36+
img.img-dir {
37+
display: block;
38+
float: right:
39+
margin-left: 5px;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<article id="topo">
45+
<header>
46+
<h2>Clique sobre as áreas destacadas em vermelho</h2>
47+
</header>
48+
<img src="_imagens/mao.png" alt="Mão apontando para a esquerda">
49+
</article>
50+
51+
<article id="tela">
52+
<header>
53+
<h1>Tela</h1>
54+
<h2>Como o mundo vai aparecer</h2>
55+
</header>
56+
<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>
57+
<img src="_imagens/det-tela.jpg" alt="Tela do Google Glass">
58+
</article>
59+
60+
<article id="camara">
61+
<header>
62+
<h1>Câmera</h1>
63+
<h2>Filme e fotografe a qualquer momento</h2>
64+
</header>
65+
<img src="_imagens/det-camera.jpg" class="img-dir" alt="Câmara do Goolge Glass" >
66+
<p>Com o Google Glass será possível tirar fotos com até 5 megapixels e gravar vídeos com 720 linhas de resolução. Os primeiros vídeos e fotos capturados com o aparelho já começaram a circular pela rede, mas até agora ninguém tem muitas informações técnicas.</p>
67+
68+
<article id="sensores">
69+
<header>
70+
<h1>Sensores</h1>
71+
<h2>A sensibilidade de um simples óculos</h2>
72+
</header>
73+
<p>Quem pensa que para comandar o Google Glass vai precisar de teclado e mouse, se engana redondamente. O dispositivo vem com vários tipos de sensores e microfones embutidos. Assim, para dar um comando, basta falar ou passar o dedo na lateral do óculos.</p>
74+
<img src="_imagens/det-touch.jpg" alt="Sensores do Google Glass">
75+
76+
<article id="gadgets">
77+
<header>
78+
<h1>Bateria e Gadgets</h2>
79+
<h2>Quais são os dispositivos que complementam o Glass</h2>
80+
</header>
81+
<img src="_imagens/det-bateria.jpg" class="img-dir" alt="Bateria do Google Glass" >
82+
<p>Segundo a própria Google, o Glass virá com uma bateria que tem autonomia suficiente para durar um dia inteiro. Apenas algumas atividades como videoconferências e longas filmagens vão exigir um pouco mais. Além disso ele vem com WiFi, Bluetooth, 3G/4G e muito mais.</p>
83+
</article>
84+
85+
</body>
86+
</html>
87+

‎projeto-glass-html5/index.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>Tudo sobre Google Glass</title>
6+
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
7+
8+
</head>
9+
<script language="javascript" src="_javascript/funcoes.js"></script>
10+
<body>
11+
<div id="interface">
12+
<header id="cabecalho">
13+
<hgroup>
14+
<h1>Google Glass</h1>
15+
<h2>A revolução do Google está chegando</h2>
16+
</hgroup>
17+
18+
<img id="icone"src="_imagens/glass-oculos-preto-peq.png"/>
19+
<nav id="menu">
20+
<h1>Menu Principal</h1>
21+
<ul onmouseout="mudaFoto('glass-oculos-preto-peq')">
22+
<li onmouseover="mudaFoto('home')" ><a href="index.html">Home<a></li>
23+
<li onmouseover="mudaFoto('especificacoes')" ><a href="specs.html">Especificações</a></li>
24+
<li onmouseover="mudaFoto('fotos')"><a href="fotos.html">Fotos</a></li>
25+
<li onmouseover="mudaFoto('multimidia')"><a href="multimidia.html">Multimídia</a></li>
26+
<li onmouseover="mudaFoto('contato')"><a href="fale-conosco.html">Fale conosco</a></li>
27+
</ul>
28+
</nav>
29+
</header>
30+
31+
<section id="corpo">
32+
<article id="noticia-principal">
33+
<header id="cabecalho-artigo">
34+
<hgroup>
35+
<h3>Tecnologia > Inovações</h3>
36+
<h1>Saiba tudo sobre o Google Glass</h1>
37+
<h2>por Gustavo Guanabara</h2>
38+
<h3 class="direita">Atualizado em 23/Abril/2013</h3>
39+
</hgroup>
40+
</header>
41+
42+
<h2>O que é</h2>
43+
<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 <a href="http://www.google.com.br" target="_blank">Project Glass</a>, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeo&shy;con&shy;ferên&shy;cias. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o <em>Google Glass</em> 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>
44+
45+
<figure class="foto-legenda">
46+
<img src="_imagens/glass-quadro-homem-mulher.jpg">
47+
<figcaption>
48+
<h3>Google Glass</h3>
49+
<p>Uma nova maneira de ver o mundo.</p>
50+
</figcaption>
51+
</figure>
52+
53+
<h2>Data de lançamento</h2>
54+
<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>
55+
56+
<h2>Especificações Técnicas</h2>
57+
<table id="tabelaspec">
58+
<caption>Tabela Técnica do Google Glass <span>Mar/2013</caption></span>
59+
60+
<tr><td class="ce">Tela</td><td class="cd">Resolução equivalente a tela de 25"</td></tr>
61+
<tr><td rowspan="2" class="ce">Camera</td><td class="cd"> 5MP para fotos</td></tr>
62+
<tr><td class="cd">720p para vídeos</td></tr>
63+
<tr><td rowspan="2" class="ce">Conectividade</td><td class="cd"> Wi-Fi</td></tr>
64+
<tr><td class="cd">Bluetooth</td></tr>
65+
<tr><td class="ce">Memória Interna</td><td class="cd">12GB</td></tr>
66+
</table>
67+
68+
<h2>Como funciona</h2>
69+
<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>
70+
71+
<h2>O que você pode fazer com o Google Glasses</h2>
72+
<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>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>
73+
74+
[AQUI ENTRA UM VÍDEO]
75+
</article>
76+
</section>
77+
<aside id="lateral">
78+
<h1>Outras Notícias</h1>
79+
<h2>Vídeo mais recente</h2>
80+
81+
[AQUI ENTRA UM VÍDEO]
82+
83+
<h2>Novidades no Glass</h2>
84+
<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>
85+
86+
<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>
87+
</aside>
88+
89+
<footer id="rodape">
90+
<p>Copyright &copy; 2013 - by Pablo Rocha <br/>
91+
<a href="http://facebook.com/cursosemvideo" target="_blank">Facebook</a> |
92+
<a href="http://twitter.com/cursosemvideo" target="_blank">Twitter<a/> </p>
93+
</footer>
94+
</div>
95+
</body>
96+
</html>

0 commit comments

Comments
 (0)