Arquivo: index.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 src="/curso-html5-pacote01/projeto-glass-html5/_imagens/glass-oculos-preto-peq.png"
alt="oculos preto do google glass">
Menu Principal
- Home
- Especificações
- Fotos
- Multimídia
- Fale conosco
</header>
<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 <i>Project Glass</i>, 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]
Outras Notícias
Vídeo mais recente
[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>
Copyright © 2013 - by Gustavo Guanabara
Facebook | Twitter
</div>
</body>
</html>
Link: css : link para o arquivo css. Você bota essa tag no documento index.html.
Arquivo: estilo.css
@charset "UTF-8";
body {
background-color: white;
color: rgba(0, 0, 0, 1);
}
p {
text-align: justify;
text-indent: 50px;
}
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;
}
position: relative; : em CSS é usada para posicionar um elemento em relação à sua posição normal.
border: 8px solid white; : Borda da imagem.
box-shadow: 1px 1px 4px black; : inseri uma sombra em volta de uma imagem ou objeto.
width: 100%; : Largura da foto ou objeto.
height: 100%; : Altura da foto ou objeto.
opacity: 0; : é usada para alterar a opacidade, ou seja, a transparência de um elemento.
- O valor da propriedade
opacity pode ser um número entre 0 e 1, onde 0 significa completamente transparente e 1 significa completamente opaco.
- Por exemplo, se você definir
opacity: 0.5; em um elemento, ele será 50% transparente.
position: absolute; : é usada para posicionar um elemento em relação ao primeiro elemento pai posicionado (não estático).
Top: 0px; : defini a posição de um elemento ao longo do eixo vertical (de cima para baixo).
padding: 10px; : é usada para criar espaço ao redor do conteúdo de um elemento, dentro de sua borda.
box-sizing: border-box; : Quando você define box-sizing: border-box; para um elemento, a largura e a altura definidas desse elemento passam a incluir o conteúdo, o padding e a borda. Isso significa que o tamanho total do elemento permanece o mesmo, independentemente do tamanho do padding ou da borda.
transition: Transição.
:hover: A pseudo-classe :hover em CSS é usada para selecionar um elemento quando o usuário passa o mouse sobre ele. Aqui está um ponto importante sobre isso:
- Você pode usar
:hover para alterar a aparência de um elemento quando o mouse está sobre ele. Por exemplo, você pode mudar a cor de fundo, a cor do texto, a borda, etc.