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">
<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>
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 {
font-family: Arial, sans-serif;
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;
}
a {
color: #606060;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
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: 500px;
float: left;
border-right: 1px solid #606060;
padding-right: 15px;
}
article#noticia-principal h2 {
font-size: 13pt;
color: #606060;
background-color: #dddddd;
padding: 5px 0px 5px 10px;
margin: 10px 0px 10px 0px;
}
header#cabecalho-artigo h1 {
font-family: 'FonteLogo', sans-serif;
font-size: 20pt;
color: #606060;
margin-bottom: 0px;
margin-top: 0px;
}
.direita {
text-align: right;
}
header#cabecalho-artigo h2 {
font-size: 13pt;
color: #cecece;
background-color: #ffffff;
margin: 0px;
}
header#cabecalho-artigo h3 {
font-size: 12px;
color: #606060;
}
table#tabelaspec {
border: 1px solid #606060;
border-spacing: 0px;
margin-left: auto;
margin-right: auto;
}
table#tabelaspec td {
border: 1px solid #606060;
padding: 10px;
text-align: center;
vertical-align: middle;
}
table#tabelaspec td.ce {
color: #ffffff;
background-color: #606060;
vertical-align: top;
font-weight: bold;
}
table#tabelaspec td.cd {
background-color: #cecece;
}
table#tabelaspec caption {
color: #888888;
font-size: 13pt;
font-weight: bolder;
}
table#tabelaspec caption span {
display: block;
float: right;
color: #000000;
font-size: 8pt;
margin-top: 10px;
}
aside#lateral {
display: block;
width: 350px;
float: right;
background-color: #dddddd;
padding: 10px;
margin-top: 10px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
aside#lateral h1 {
font-family: 'FonteLogo', sans-serif;
font-size: 20pt;
color: #606060;
margin-top: 0px;
}
aside#lateral h2 {
background-color: #606060;
font-size: 13pt;
color: #ffffff;
padding: 5px;
}
footer#rodape {
clear: both;
border-top: 1px solid #606060;
}
footer#rodape p {
text-align: center;
}
<article> : serve para representar um conteúdo independente e autônomo dentro de um documento, como um artigo de jornal, uma postagem de blog ou um comentário de usuário.