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>
<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><a href="index.html">Home</a></li>
<li><a href="specs.html">Especificações</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="multimidia.html">Multimídia</a></li>
<li><a href="fale-conosco.html">Fale conosco</a></li>
</ul>
</nav>
</header>
<section id="corpo">
<hgroup>
<h3>Tecnologia > Inovações</h3>
<h1>Saiba tudo sobre o Google Glass</h1>
<h2>por Gustavo Guanabara</h2>
<h3>Atualizado em 23/Abril/2013</h3>
</hgroup>
<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>
<h1>Data de lançamento</h1>
<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>
<h1>Especificações Técnicas</h1>
Tabela Técnica do Google Glass Mar/2013
Tela:Resolução equivalente a tela de 25"
Camera: 5MP para fotos / 720p para vídeos
Conectividade: Wi-Fi/ Bluetooth
Memória Interna: 12GB
<h1>Como funciona</h1>
<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>
<h1>O que você pode fazer com o Google Glasses</h1>
<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]
</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>
<section> : defini uma seção ou grupo de conteúdo temático dentro de um documento.
<aside> : representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo.
<footer> : representa um rodapé para o conteúdo de seção mais próximo ou elemento raiz de seção.
Arquivo: estilo.css
@charset "UTF-8";
@import url('<https://fonts.googleapis.com/css2?family=Madimi+One&family=PT+Mono&family=Titillium+Web&display=swap>');
@font-face {
font-family: 'FonteLogo';
src: url("../_fonts/bubblegum-sans-regular.otf");
}
body {
background-color: #dddddd;
color: rgba(0, 0, 0, 1);
}
div#interface {
width: 900px;
background-color: #ffffff;
margin: -20px auto 0px auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
padding: 10px;
}
p {
text-align: justify;
text-indent: 50px;
}
header#cabecalho img#icone {
position: absolute;
left: 780px;
top: 70px;
}
header#cabecalho {
border-bottom: 1px #606060 solid;
height: 150px;
background: url("/curso-html5-pacote01/projeto-glass-html5/_imagens/glass-logo-peq.jpg") no-repeat 0px 80px;
}
header#cabecalho h1 {
font-family: 'FonteLogo', sans-serif;
font-size: 30pt;
color: #606060;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
padding: 0px;
margin-bottom: 0px;
}
header#cabecalho h2 {
font-family: 'Titillium Web', sans-serif;
color: #888888;
font-size: 15pt;
padding: 0px;
margin-top: 0px;
}
/* Formatação de imagens com legendas */
figure.foto-legenda {
position: relative;
border: 8px solid white;
box-shadow: 1px 1px 4px black;
}
figure.foto-legenda img {
width: 100%;
height: 100%;
}
figure.foto-legenda figcaption {
opacity: 0;
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, .4);
color: white;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
transition: opacity 1s;
}
figure.foto-legenda:hover figcaption {
opacity: 1;
}
/* Formatação do Menu*/
nav#menu {
display: block;
}
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: absolute;
top: -20px;
left: 300px;
}
nav#menu li {
display: inline-block;
background-color: #dddddd;
padding: 10px;
margin: 2px;
transition: background-color 1s;
}
nav#menu li:hover {
background-color: #606060;
}
nav#menu h1 {
display: none;
}
nav#menu a {
color: #000000;
text-decoration: none;
}
nav#menu a:hover {
color: #ffffff;
text-decoration: underline;
}
section#corpo {
display: block;
width: 520px;
float: left;
border-right: 1px solid #606060;
padding-right: 15px;
}
aside#lateral {
display: block;
width: 350px;
float: right;
}
footer#rodape {
clear: both;
border-top: 1px solid #606060;
}
footer#rodape p {
text-align: center;
}
display: block; : Quando um elemento tem display: block, ele é tratado como um bloco.
width: : largura.
float: left; : vai fazer com que o objeto flutue para a esquerda.
border-right: : vai fazer com que a direita do objeto tenha uma linha vertical.
padding-right: : vai fazer com que o objeto tenha um espaço a direita.
float: right; : vai fazer com que o objeto flutue na direita.
clear: both; : a um elemento, isso significa que nenhum elemento flutuante deve existir à esquerda ou à direita do elemento, forçando-o a se mover abaixo de quaisquer elementos flutuantes que o precedem no documento.
border-top: : vai fazer com que tenha uma linha em cima do objeto.
text-align: center; : vai fazer com que o texto fique no centro.