Arquivo: index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tudo sobre o Google Glass</title>
<link rel="stylesheet" href="_css/estilo.css">
</head>
<script src="_javascript/funcoes.js"></script>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
<img id="icone" src="/curso-html5-pacote01/projeto-glass-html5/_imagens/glass-oculos-preto-peq.png" alt="oculos preto do google glass">
<nav id="menu">
<h1>Menu Principal</h1>
<ul type="disc">
<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">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<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>
</hgroup>
</header>
<h2>O que é</h2>
<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="<https://glass.google.com>" 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­con­ferên­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>
<figure class="foto-legenda">
<img src="_imagens/glass-quadro-homem-mulher.jpg" alt="imagem do homem e da mulher usando o oculos google glass">
<figcaption>
<p>Imagem do homem e da mulher usando o oculos google glass</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">
<caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption>
<tr>
<td class="ce">Tela</td>
<td class="cd">Resolução equivalente a tela de 25"</td>
</tr>
<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>
<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-<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>
[AQUI ENTRA UM VÍDEO]
</article>
</section>
<aside id="lateral">
<h1>Outras Notícias</h1>
<h2>Vídeo mais recente</h2>
[AQUI ENTRA UM VÍDEO]
<h1>Novidades no Glass</h1>
<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">
<p>Copyright © 2013 - by Gustavo Guanabara <br> <a href="<https://facebook.com/cursosemvideo>" target="_blank">Facebook</a> | <a href="<https://twitter.com/cursosemvideo>" target="_blank">Twitter</a></p>
</footer>
</div>
</body>
</html>
onmouseover : é acionado quando o ponteiro do mouse é movido sobre um elemento específico. Ou seja ele muda a imagem original por uma que vc botou no parâmetro da tag onmouseover .
onmouseout : é acionado quando o ponteiro do mouse é movido para fora de um elemento específico.
Arquivo: fale-conosco.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tudo sobre o Google Glass</title>
<link rel="stylesheet" href="_css/estilo.css">
</head>
<script src="_javascript/funcoes.js"></script>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
<img id="icone" src="/curso-html5-pacote01/projeto-glass-html5/_imagens/glass-oculos-preto-peq.png" alt="oculos preto do google glass">
<nav id="menu">
<h1>Menu Principal</h1>
<ul type="disc">
<li onmouseover="mudaFoto('_imagens/home.png')" onmouseout="mudaFoto('_imagens/contato.png')">
<a href="index.html">Home</a>
</li>
<li onmouseover="mudaFoto('_imagens/especificacoes.png')" onmouseout="mudaFoto('_imagens/contato.png')">
<a href="specs.html">Especificações</a>
</li>
<li onmouseover="mudaFoto('_imagens/fotos.png')" onmouseout="mudaFoto('_imagens/contato.png')">
<a href="fotos.html">Fotos</a>
</li>
<li onmouseover="mudaFoto('_imagens/multimidia.png')" onmouseout="mudaFoto('_imagens/contato.png')">
<a href="multimidia.html">Multimídia</a>
</li>
<li onmouseover="mudaFoto('_imagens/contato.png')" onmouseout="mudaFoto('_imagens/contato.png')">
<a href="fale-conosco.html">Fale conosco</a>
</li>
</ul>
</nav>
</header>
Fale Conosco > Contato
Formulário de Contato
por Gustavo Guanabara
Atualizado em 01/Maio/2013
Identificação do Usuário
Nome:
Senha:
E-mail:
Sexo:
- Masculino
- Feminino
Data de Nascimento:
Endereço do Usuário
Logradouro:
Número:
Estado:
Cidade:
Mensagem do Usuário
Grau de Urgência:
Mensagem:
Quero um Google Glass
Gostaria de adquirir um Google Glass quando disponível
Cor:
Quantidade:
Preço Total: R$
[BOTÃO ENVIAR]
<footer id="rodape">
<p>Copyright © 2013 - by Gustavo Guanabara <br> <a href="<https://facebook.com/cursosemvideo>" target="_blank">Facebook</a> | <a href="<https://twitter.com/cursosemvideo>" target="_blank">Twitter</a></p>
</footer>
</div>
</body>
</html>
Aqui são os códigos de uma das outras páginas do site, ele tem as mesmas configurações iniciais da parte principal do site. A única coisa que muda, são as informações nos parâmetros onmouseout , por exemplo, nesse código as imagens que tão nesse parâmetro são as de contato.
Arquivo: funcoes.js
function mudaFoto (foto) {
document.getElementById("icone").src = foto;
}