Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 299e6f4

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /