├── README.md ├── inicio.html └── projeto-glass-html5 ├── .DS_Store ├── _css ├── .DS_Store ├── estilo.css ├── form.css ├── fotos.css ├── media.css └── specs.css ├── _fonts ├── bubblegum-sans-regular.otf └── computer-font.ttf ├── _imagens ├── .DS_Store ├── audio.png ├── botao-enviar.png ├── contato.png ├── det-bateria.jpg ├── det-camera.jpg ├── det-tela.jpg ├── det-touch.jpg ├── especificacoes-02.png ├── especificacoes.png ├── facebook.png ├── fotos.png ├── galeria-01.jpg ├── galeria-02.jpg ├── galeria-03.jpg ├── galeria-04.jpg ├── galeria-05.jpg ├── galeria-06.jpg ├── glass-esquema-marcado.jpg ├── glass-esquema.jpg ├── glass-logo-grd ├── glass-logo-med.jpg ├── glass-logo-peq.jpg ├── glass-oculos-preto-gig.png ├── glass-oculos-preto-grd.png ├── glass-oculos-preto-med.png ├── glass-oculos-preto-peq.png ├── glass-quadro-homem-mulher.jpg ├── glass-quadro-homem.jpg ├── glass-quadro-mulher.jpg ├── home.png ├── icone-contato.png ├── icone-endereco.png ├── icone-mensagem.png ├── icone-pagamento.png ├── jornal.png ├── lampada-acesa.jpg ├── lampada-apagada.jpg ├── lampada-quebrada.jpg ├── logo-google-gig.png ├── mao.png ├── multimidia.png ├── radio-tv.png ├── twitter.png ├── video-mini01.jpg ├── video-mini02.jpg ├── video-mini03.jpg └── video.png ├── _interface ├── 00-divisoes-semanticas.jpg ├── 01-index.jpg ├── 02-specs.jpg ├── 03-fotos.jpg ├── 04-multimidia.jpg └── 05-fale-conosco.jpg ├── _javascript ├── .DS_Store ├── audio.js └── funcoes.js ├── _media ├── .DS_Store ├── 2009-lovers-carvings-bibio.mp3 ├── 2009-lovers-carvings-bibio.oggvorbis.ogg ├── getting-started.mp4 ├── getting-started.webmsd.webm ├── how-it-feels.mp4 └── one-day.mp4 ├── _textos ├── .DS_Store ├── fale-conosco-txt.html ├── fotos-txt.html ├── google-glass-txt.html ├── index-txt.html ├── multimidia-txt.html └── specs-txt.html ├── fale-conosco.html ├── fotos.html ├── google-glass.html ├── index.html ├── multimidia.html ├── specs.html └── teste.html /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/README.md -------------------------------------------------------------------------------- /inicio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Curso HTML 5 6 | 14 | 15 | 16 |

Olá mundo!

17 |

Bom estudo!

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /projeto-glass-html5/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/.DS_Store -------------------------------------------------------------------------------- /projeto-glass-html5/_css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_css/.DS_Store -------------------------------------------------------------------------------- /projeto-glass-html5/_css/estilo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url(http://fonts.googleapis.com/css?family=Titillium+Web); 3 | @font-face { 4 | font-family: 'FonteLogo'; 5 | src: url(../_fonts/bubblegum-sans-regular.otf); 6 | } 7 | body { 8 | background-color: #dddddd; 9 | font-family: Arial, sans-serif; 10 | } 11 | 12 | div#interface { 13 | width: 900px; 14 | background-color: #ffffff; 15 | margin: -20px auto 10px auto; 16 | box-shadow: 0px 0px 10px rgba(0, 0, 0, .5); 17 | padding: 10px; 18 | } 19 | 20 | p { 21 | text-align: justify; 22 | text-indent: 50px; 23 | } 24 | 25 | a { 26 | color: #606060; 27 | text-decoration: none; 28 | } 29 | 30 | a:hover { 31 | text-decoration: underline; 32 | } 33 | 34 | header#cabecalho img#icone { 35 | position: absolute; 36 | left: 780px; 37 | top: 70px; 38 | } 39 | 40 | header#cabecalho { 41 | border-bottom: 1px #606060 solid; 42 | height: 150px; 43 | background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px; 44 | 45 | } 46 | 47 | header#cabecalho h1 { 48 | font-family: 'FonteLogo', sans-serif; 49 | font-size: 30pt; 50 | color: #606060; 51 | text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); 52 | padding: 0px; 53 | margin-bottom: 0px; 54 | } 55 | 56 | header#cabecalho h2 { 57 | font-family: 'Titillium Web', sans-serif; 58 | color: #888888; 59 | font-size: 15pt; 60 | padding: 0px; 61 | margin-top: 0px; 62 | } 63 | /* Formatação de imagens com legendas */ 64 | 65 | figure.foto-legenda { 66 | position: relative; 67 | border: 8px solid white; 68 | box-shadow: 1px 1px 4px black; 69 | } 70 | 71 | figure.foto-legenda img { 72 | width: 100%; 73 | right: 100%; 74 | } 75 | 76 | figure.foto-legenda figcaption { 77 | opacity: 0; 78 | position: absolute; 79 | top: 0px; 80 | background-color: rgba(0, 0, 0, .4); 81 | color: white; 82 | width: 100%; 83 | height: 100%; 84 | padding: 10px; 85 | box-sizing: border-box; 86 | transition: opacity 1s; 87 | } 88 | 89 | figure.foto-legenda:hover figcaption { 90 | opacity: 1; 91 | } 92 | 93 | /* Formatação do menu */ 94 | nav#meu { 95 | display: block; 96 | } 97 | 98 | nav#menu ul { 99 | list-style: none; 100 | text-transform: uppercase; 101 | position: absolute; 102 | top: -20px; 103 | left: 460px; 104 | } 105 | 106 | nav#menu li { 107 | display: inline-block; 108 | background-color: #dddddd; 109 | padding: 10px; 110 | margin: 2px; 111 | -webkit-transition:background-color 1s; 112 | -moz-transition:background-color 1s; 113 | -o-transition:background-color 1s; 114 | transition:background-color 1s; 115 | } 116 | 117 | nav#menu li:hover { 118 | background-color: #606060; 119 | } 120 | 121 | nav#menu h1 { 122 | display: none; 123 | } 124 | 125 | nav#menu a { 126 | color: #000000; 127 | text-decoration: none; 128 | } 129 | 130 | nav#menu a:hover { 131 | color: #ffffff; 132 | } 133 | 134 | section#corpo { 135 | display: block; 136 | width: 500px; 137 | float: left; 138 | border-right: 1px solid #606060; 139 | padding-right: 15px;*/ 140 | } 141 | 142 | article#noticia-principal h2 { 143 | font-size: 13pt; 144 | color: #606060; 145 | background-color: #dddddd; 146 | padding: 5px 0px 5px 10px; 147 | margin: 10px 0px 10px 0px; 148 | } 149 | 150 | header#cabecalho-artigo h1 { 151 | font-family: 'FonteLogo', sans-serif; 152 | color: #606060; 153 | margin-bottom: 0px; 154 | margin-top: 0px; 155 | } 156 | 157 | header#cabecalho-artigo h2 { 158 | font-size: 13pt; 159 | color: #cecece; 160 | background-color: #ffffff; 161 | margin: 0px; 162 | } 163 | 164 | .direita { 165 | text-align: right; 166 | } 167 | 168 | header#cabecalho-artigo h3 { 169 | font-size: 12px; 170 | color: #606060; 171 | } 172 | 173 | table#tabelaspec { 174 | border: 1px solid #606060; 175 | border-spacing: 0px; 176 | margin-left: auto; 177 | margin-right: auto; 178 | } 179 | 180 | table#tabelaspec td { 181 | border: 1px solid #606060; 182 | padding: 10px; 183 | text-align: center; 184 | vertical-align: middle; 185 | } 186 | 187 | table#tabelaspec td.ce { 188 | color: #ffffff; 189 | background-color: #606060; 190 | vertical-align: top; 191 | font-weight: bold; 192 | } 193 | 194 | table#tabelaspec td.cd { 195 | background-color: #cecece; 196 | 197 | } 198 | 199 | table#tabeleaspec caption { 200 | color: #888888; 201 | font-size: 13pt; 202 | font-weight: bold; 203 | } 204 | 205 | table#tabelaspec caption span { 206 | display: block; 207 | float: right; 208 | color: #000000; 209 | font-size: 8pt; 210 | margin-top: 10px; 211 | } 212 | 213 | aside#lateral { 214 | display: block; 215 | width: 350px; 216 | float: right; 217 | background-color: #dddddd; 218 | padding: 10px; 219 | margin-top: 10px; 220 | box-shadow: 2px 2px 2px rgba(0, 0, 0, .5); 221 | } 222 | 223 | aside#lateral h1 { 224 | font-family: 'FonteLogo', sans-serif; 225 | font-size: 20pt; 226 | color: #606060; 227 | margin-top: 0px; 228 | } 229 | 230 | aside#lateral h2 { 231 | background-color: #606060; 232 | font-size: 13pt; 233 | color: #ffffff; 234 | padding: 235 | } 236 | 237 | footer#rodape { 238 | clear: both; 239 | border-top: 1px solid #606060; 240 | } 241 | 242 | footer#rodape p { 243 | text-align: center; 244 | } 245 | 246 | footer#rodape a { 247 | text-decoration: none; 248 | color: #000000; 249 | } 250 | 251 | footer#rodape a:hover { 252 | color: blue; 253 | } 254 | -------------------------------------------------------------------------------- /projeto-glass-html5/_css/form.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | form { 4 | width: 500px; 5 | margin: auto; 6 | } 7 | 8 | input. textarea{ 9 | font-family: sans-serif; 10 | font-weight: normal; 11 | font-size: 13pt; 12 | background-color: rgba()255,255,255,.8; 13 | } 14 | 15 | input:hover, textarea:hover { 16 | background-color: #dddddd; 17 | 18 | } 19 | 20 | legend { 21 | color: #888888; 22 | font-weight: bold; 23 | font-size: 13pt; 24 | font-family: sans-serif; 25 | } 26 | 27 | fieldset { 28 | border-color: #cecece; 29 | margin: 20px; 30 | } 31 | 32 | fieldset#sexo { 33 | width: 150px; 34 | } 35 | 36 | fieldset#usuario { 37 | background: url(../_imagens/icone-contato.png) no-repeat 95% 95%; 38 | } 39 | 40 | fieldset#endereco { 41 | background: url(../_imagens/icone-endereco.png) no-repeat 95% 95%; 42 | 43 | } 44 | 45 | fieldset#mensagem { 46 | background: url(../_imagens/icone-mensagem.png) no-repeat 95% 95%; 47 | 48 | } 49 | 50 | fieldset#pedido { 51 | background: url(../_imagens/icone-pagamento.png) no-repeat 95% 95%; 52 | 53 | } -------------------------------------------------------------------------------- /projeto-glass-html5/_css/fotos.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | ul#album-fotos { 4 | width: 700px; 5 | margin: 0 auto; 6 | padding: 50px; 7 | overflow: hidden; 8 | list-style: none; 9 | } 10 | 11 | ul#album-fotos li { 12 | float: left; 13 | width: 200px; 14 | height: 200px; 15 | margin: 10px; 16 | border: 5px solid black; 17 | background-color: #ffffff; 18 | box-shadow: 1px 1px 3px rgba(0,0,0,.4); 19 | -webkit-transition: all .4s ease-in; 20 | } 21 | 22 | ul#album-fotos li span { 23 | opacity: 0; 24 | color: #ffffff; 25 | text-shadow: 1px 1px 1px #000000; 26 | background-color: rgba(0,0,0,.3); 27 | font-size: 9pt; 28 | line-height: 370px; 29 | padding: 5px; 30 | } 31 | 32 | ul#album-fotos li:hover { 33 | -webkit-transform: scale(1.5); 34 | } 35 | 36 | ul#album-fotos li:hover span { 37 | opacity: 1; 38 | } 39 | ul#album-fotos li#foto01 { 40 | background: url('../_imagens/galeria-01.jpg') no-repeat; 41 | background-position: 50% 50%; 42 | background-size: 400px 400px; 43 | background-color: #ffffff 44 | } 45 | 46 | ul#album-fotos li#foto01:hover { 47 | background-position: 0px 0px; 48 | background-size: 200px 200px; 49 | } 50 | 51 | ul#album-fotos li#foto02 { 52 | background: url('../_imagens/galeria-02.jpg') no-repeat; 53 | background-position: 50% 50%; 54 | background-size: 400px 400px; 55 | background-color: #ffffff 56 | } 57 | 58 | ul#album-fotos li#foto02:hover { 59 | background-position: 0px 0px; 60 | background-size: 200px 200px; 61 | } 62 | 63 | ul#album-fotos li#foto03 { 64 | background: url('../_imagens/galeria-03.jpg') no-repeat; 65 | background-position: 50% 50%; 66 | background-size: 400px 400px; 67 | background-color: #ffffff 68 | } 69 | 70 | ul#album-fotos li#foto03:hover { 71 | background-position: 0px 0px; 72 | background-size: 200px 200px; 73 | } 74 | 75 | ul#album-fotos li#foto04 { 76 | background: url('../_imagens/galeria-04.jpg') no-repeat; 77 | background-position: 50% 50%; 78 | background-size: 400px 400px; 79 | background-color: #ffffff 80 | } 81 | 82 | ul#album-fotos li#foto04:hover { 83 | background-position: 0px 0px; 84 | background-size: 200px 200px; 85 | } 86 | 87 | ul#album-fotos li#foto05 { 88 | background: url('../_imagens/galeria-05.jpg') no-repeat; 89 | background-position: 50% 50%; 90 | background-size: 400px 400px; 91 | background-color: #ffffff 92 | } 93 | 94 | ul#album-fotos li#foto05:hover { 95 | background-position: 0px 0px; 96 | background-size: 200px 200px; 97 | } 98 | 99 | ul#album-fotos li#foto06 { 100 | background: url('../_imagens/galeria-06.jpg') no-repeat; 101 | background-position: 50% 50%; 102 | background-size: 400px 400px; 103 | background-color: #ffffff 104 | } 105 | 106 | ul#album-fotos li#foto06:hover { 107 | background-position: 0px 0px; 108 | background-size: 200px 200px; 109 | } -------------------------------------------------------------------------------- /projeto-glass-html5/_css/media.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | div#tv-radio { 4 | width: 900px; 5 | height: 580px; 6 | margin: auto; 7 | background: url(../_imagens/radio-tv.png); 8 | } 9 | 10 | audio#musica { 11 | display: block; 12 | position: relative; 13 | left: 575px; 14 | top: 500px; 15 | width: 300px; 16 | } 17 | 18 | video#filme { 19 | display: block; 20 | position: relative; 21 | left: 90px; 22 | top: 85px; 23 | width: 440px; 24 | } -------------------------------------------------------------------------------- /projeto-glass-html5/_css/specs.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | section#conteudo { 4 | width: 1000px; 5 | margin: auto; 6 | } 7 | 8 | iframe#frame-spec { 9 | width: 400px; 10 | height: 280px; 11 | border: none; 12 | overflow: hidden; 13 | } 14 | 15 | iframe#frame-spec::-webkit-scrollbar { 16 | display: none; 17 | } -------------------------------------------------------------------------------- /projeto-glass-html5/_fonts/bubblegum-sans-regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_fonts/bubblegum-sans-regular.otf -------------------------------------------------------------------------------- /projeto-glass-html5/_fonts/computer-font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_fonts/computer-font.ttf -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/.DS_Store -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/audio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/audio.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/botao-enviar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/botao-enviar.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/contato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/contato.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/det-bateria.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/det-bateria.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/det-camera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/det-camera.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/det-tela.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/det-tela.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/det-touch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/det-touch.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/especificacoes-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/especificacoes-02.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/especificacoes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/especificacoes.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/facebook.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/fotos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/fotos.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/galeria-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/galeria-01.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/galeria-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/galeria-02.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/galeria-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/galeria-03.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/galeria-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/galeria-04.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/galeria-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/galeria-05.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/galeria-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/galeria-06.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-esquema-marcado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-esquema-marcado.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-esquema.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-esquema.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-logo-grd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-logo-grd -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-logo-med.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-logo-med.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-logo-peq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-logo-peq.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-oculos-preto-gig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-oculos-preto-gig.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-oculos-preto-grd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-oculos-preto-grd.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-oculos-preto-med.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-oculos-preto-med.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-oculos-preto-peq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-oculos-preto-peq.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-quadro-homem-mulher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-quadro-homem-mulher.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-quadro-homem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-quadro-homem.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/glass-quadro-mulher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/glass-quadro-mulher.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/home.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/icone-contato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/icone-contato.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/icone-endereco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/icone-endereco.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/icone-mensagem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/icone-mensagem.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/icone-pagamento.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/icone-pagamento.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/jornal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/jornal.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/lampada-acesa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/lampada-acesa.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/lampada-apagada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/lampada-apagada.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/lampada-quebrada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/lampada-quebrada.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/logo-google-gig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/logo-google-gig.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/mao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/mao.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/multimidia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/multimidia.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/radio-tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/radio-tv.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/twitter.png -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/video-mini01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/video-mini01.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/video-mini02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/video-mini02.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/video-mini03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/video-mini03.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_imagens/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_imagens/video.png -------------------------------------------------------------------------------- /projeto-glass-html5/_interface/00-divisoes-semanticas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_interface/00-divisoes-semanticas.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_interface/01-index.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_interface/01-index.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_interface/02-specs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_interface/02-specs.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_interface/03-fotos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_interface/03-fotos.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_interface/04-multimidia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_interface/04-multimidia.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_interface/05-fale-conosco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_interface/05-fale-conosco.jpg -------------------------------------------------------------------------------- /projeto-glass-html5/_javascript/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_javascript/.DS_Store -------------------------------------------------------------------------------- /projeto-glass-html5/_javascript/audio.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_javascript/audio.js -------------------------------------------------------------------------------- /projeto-glass-html5/_javascript/funcoes.js: -------------------------------------------------------------------------------- 1 | function mudaFoto(foto){ 2 | document.getElementById("icone").src = "_imagens/"+ foto +".png"; 3 | }; -------------------------------------------------------------------------------- /projeto-glass-html5/_media/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/.DS_Store -------------------------------------------------------------------------------- /projeto-glass-html5/_media/2009-lovers-carvings-bibio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/2009-lovers-carvings-bibio.mp3 -------------------------------------------------------------------------------- /projeto-glass-html5/_media/2009-lovers-carvings-bibio.oggvorbis.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/2009-lovers-carvings-bibio.oggvorbis.ogg -------------------------------------------------------------------------------- /projeto-glass-html5/_media/getting-started.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/getting-started.mp4 -------------------------------------------------------------------------------- /projeto-glass-html5/_media/getting-started.webmsd.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/getting-started.webmsd.webm -------------------------------------------------------------------------------- /projeto-glass-html5/_media/how-it-feels.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/how-it-feels.mp4 -------------------------------------------------------------------------------- /projeto-glass-html5/_media/one-day.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_media/one-day.mp4 -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pabloads/curso-html5-css3-gustavo-guanabara/580520294bc1c9813faec8a63cdae2f479da01da/projeto-glass-html5/_textos/.DS_Store -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/fale-conosco-txt.html: -------------------------------------------------------------------------------- 1 | Google Glass 2 | A revolução do Google está chegando 3 | 4 | [AQUI ENTRA UMA FOTO] 5 | 6 | Menu Principal 7 | - Home 8 | - Especificações 9 | - Fotos 10 | - Multimídia 11 | - Fale conosco 12 | 13 | Fale Conosco > Contato 14 | Formulário de Contato 15 | por Gustavo Guanabara 16 | Atualizado em 01/Maio/2013 17 | 18 | Identificação do Usuário 19 | Nome: 20 | Senha: 21 | E-mail: 22 | Sexo: 23 | - Masculino 24 | - Feminino 25 | Data de Nascimento: 26 | 27 | Endereço do Usuário 28 | Logradouro: 29 | Número: 30 | Estado: 31 | Cidade: 32 | 33 | Mensagem do Usuário 34 | Grau de Urgência: 35 | Mensagem: 36 | 37 | Quero um Google Glass 38 | Gostaria de adquirir um Google Glass quando disponível 39 | Cor: 40 | Quantidade: 41 | Preço Total: R$ 42 | 43 | 44 | [BOTÃO ENVIAR] 45 | 46 | Copyright 2013 - by Gustavo Guanabara 47 | Facebook | Twitter -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/fotos-txt.html: -------------------------------------------------------------------------------- 1 | Google Glass 2 | A revolução do Google está chegando 3 | 4 | [AQUI ENTRA UMA FOTO] 5 | 6 | Menu Principal 7 | - Home 8 | - Especificações 9 | - Fotos 10 | - Multimídia 11 | - Fale conosco 12 | 13 | Glass > Fotos 14 | Galeria de Imagens do Google Glass 15 | por Gustavo Guanabara 16 | Atualizado em 01/Maio/2013 17 | 18 | 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. 19 | 20 | - Agenda e lembretes 21 | - Sergey Brin usando o Glass 22 | - Leve e compacto 23 | - Sensação de uma tela de 50" 24 | - Vários tipos de lente 25 | - Informações importantes 26 | 27 | Copyright 2013 - by Gustavo Guanabara 28 | 29 | Facebook | Twitter -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/google-glass-txt.html: -------------------------------------------------------------------------------- 1 | Clique sobre as áreas destacadas em vermelho 2 | [AQUI ENTRA UMA FOTO] 3 | 4 | Tela 5 | Como o mundo vai aparecer 6 | 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. 7 | [AQUI ENTRA UMA FOTO] 8 | 9 | Câmera 10 | Filme e fotografe a qualquer momento 11 | [AQUI ENTRA UMA FOTO] 12 | 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. 13 | 14 | Sensores 15 | A sensibilidade de um simples óculos< 16 | 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. 17 | [AQUI ENTRA UMA FOTO] 18 | 19 | Bateria e Gadgets 20 | Quais são os dispositivos que complementam o Glass 21 | [AQUI ENTRA UMA FOTO] 22 | 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. 23 | -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/index-txt.html: -------------------------------------------------------------------------------- 1 | Google Glass 2 | A revolução do Google está chegando 3 | 4 | [AQUI ENTRA UMA FOTO] 5 | 6 | Menu Principal 7 | - Home 8 | - Especificações 9 | - Fotos 10 | - Multimídia 11 | - Fale conosco 12 | 13 | Tecnologia > Inovações 14 | Saiba tudo sobre o Google Glass 15 | por Gustavo Guanabara 16 | Atualizado em 23/Abril/2013 17 | 18 | O que é 19 | O Google Glass é 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 Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass 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. 20 | 21 | [AQUI ENTRA UMA FOTO] 22 | 23 | Data de lançamento 24 | 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. 25 | 26 | Especificações Técnicas 27 | Tabela Técnica do Google Glass Mar/2013 28 | 29 | Tela:Resolução equivalente a tela de 25" 30 | Camera: 5MP para fotos / 720p para vídeos 31 | Conectividade: Wi-Fi/ Bluetooth 32 | Memória Interna: 12GB 33 | 34 | Como funciona 35 | 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 36 | 37 | O que você pode fazer com o Google Glasses 38 | O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-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. 39 | 40 | [AQUI ENTRA UM VÍDEO] 41 | 42 | Outras Notícias 43 | Vídeo mais recente 44 | 45 | [AQUI ENTRA UM VÍDEO] 46 | 47 | Novidades no Glass 48 | 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. 49 | 50 | 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. 51 | 52 | Copyright 2013 - by Gustavo Guanabara 53 | Facebook | Twitter -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/multimidia-txt.html: -------------------------------------------------------------------------------- 1 | Google Glass 2 | A revolução do Google está chegando 3 | 4 | [AQUI ENTRA UMA FOTO] 5 | 6 | Menu Principal 7 | - Home 8 | - Especificações 9 | - Fotos 10 | - Multimídia 11 | - Fale conosco 12 | 13 | Glass > Multimídia 14 | Sons e Vídeos 15 | por Gustavo Guanabara 16 | Atualizado em 01/Maio/2013 17 | 18 | 19 | Áudio e Vídeo 20 | 21 | [AQUI ENTRA UM VÍDEO] 22 | [AQUI ENTRA UM ÁUDIO] 23 | 24 | Copyright 2013 - by Gustavo Guanabara 25 | Facebook | Twitter -------------------------------------------------------------------------------- /projeto-glass-html5/_textos/specs-txt.html: -------------------------------------------------------------------------------- 1 | Google Glass 2 | A revolução do Google está chegando 3 | 4 | [AQUI ENTRA UMA FOTO] 5 | 6 | Menu Principal 7 | - Home 8 | - Especificações 9 | - Fotos 10 | - Multimídia 11 | - Fale conosco 12 | 13 | Glass > Especificações 14 | Raio-X no Google Glass 15 | por Gustavo Guanabara 16 | Atualizado em 01/Maio/2013 17 | 18 | Clique em qualquer área destacada da imagem para ter mais informações sobre os recursos do Google Glass. Qualquer ponto vermelho vai te levar a um lugar cheio de novas informações. 19 | 20 | [AQUI ENTRA UMA IMAGEM] 21 | 22 | Copyright 2013 - by Gustavo Guanabara< 23 | Facebook | Twitter -------------------------------------------------------------------------------- /projeto-glass-html5/fale-conosco.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tudo sobre Google Glass 6 | 7 | 8 | 9 | 10 | 11 | 18 | 19 |
20 |
21 |
22 |

Google Glass

23 |

A revolução do Google está chegando

24 |
25 | 26 | 27 | 37 |
38 | 39 |
40 |
41 |
42 |

Fale Conosco > Contato

43 |

Formulário de Contato

44 |

por Pablo Rocha

45 |

Atualizado em 01/Maio/2013

46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 | Identificação do Usuário 54 |

55 |

56 | 57 |

58 |

59 | 60 |

E-mail: 61 |

62 | 63 |
64 | Sexo 65 |
66 | 67 |
68 |

Data de Nascimento:

69 | 70 |
71 | 72 |
73 | Endereço do Usuário 74 |

75 |

76 | 77 |

78 |

79 | 80 |

81 |

91 |

92 |

93 | 94 | 95 | 96 | 97 | 98 |
99 | 100 |
101 | Mensagem do Usuário 102 |

103 | MínMáx

104 |

105 |

106 |
107 | 108 |
109 | Quero um Google Glass 110 |

111 |

112 | 113 |

114 |

115 | 116 |

117 |

118 | 119 |

R$ 120 |

121 |
122 | 123 | 124 |
125 | 126 | 127 | 132 |
133 | 134 | -------------------------------------------------------------------------------- /projeto-glass-html5/fotos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tudo sobre Google Glass 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |

Google Glass

17 |

A revolução do Google está chegando

18 |
19 | 20 | 21 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Glass > Fotos

38 |

Galeria de Imagens do Google Glass

39 |

por Pablo Rocha

40 |

Atualizado em 01/Maio/2013

41 |
42 |
43 | 44 |

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.

45 | 46 |
    47 |
  • Agenda e lembretes
    • 48 |
  • Sergey Brin usando o Glass
    • 49 |
  • Leve e compacto
    • 50 |
  • Sensação de uma tela de 50"
    • 51 |
  • Vários tipos de lente
    • 52 |
  • Informações importantes
    • 53 |
54 | 55 |
56 |
57 | 58 | 63 |
64 | 65 | -------------------------------------------------------------------------------- /projeto-glass-html5/google-glass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Informações sobre o Google Glass 6 | 7 | 42 | 43 | 44 |
45 |
46 |

Clique sobre as áreas destacadas em vermelho

47 |
48 | Mão apontando para a esquerda 49 |
50 | 51 |
52 |
53 |

Tela

54 |

Como o mundo vai aparecer

55 |
56 |

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.

57 | Tela do Google Glass 58 |
59 | 60 |
61 |
62 |

Câmera

63 |

Filme e fotografe a qualquer momento

64 |
65 | Câmara do Goolge Glass 66 |

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.

67 | 68 |
69 |
70 |

Sensores

71 |

A sensibilidade de um simples óculos

72 |
73 |

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.

74 | Sensores do Google Glass 75 | 76 |
77 |
78 |

Bateria e Gadgets

79 |

Quais são os dispositivos que complementam o Glass

80 |
81 | Bateria do Google Glass 82 |

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.

83 |
84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /projeto-glass-html5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tudo sobre Google Glass 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Google Glass

15 |

A revolução do Google está chegando

16 |
17 | 18 | 19 | 29 |
30 | 31 |
32 |
33 |
34 |
35 |

Tecnologia > Inovações

36 |

Saiba tudo sobre o Google Glass

37 |

por Gustavo Guanabara

38 |

Atualizado em 23/Abril/2013

39 |
40 |
41 | 42 |

O que é

43 |

O Google Glass é 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 Project Glass, 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 Google Glass 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.

44 | 45 |
46 | 47 |
48 |

Google Glass

49 |

Uma nova maneira de ver o mundo.

50 |
51 |
52 | 53 |

Data de lançamento

54 |

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.

55 | 56 |

Especificações Técnicas

57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
Tabela Técnica do Google Glass Mar/2013
TelaResolução equivalente a tela de 25"
Camera 5MP para fotos
720p para vídeos
Conectividade Wi-Fi
Bluetooth
Memória Interna12GB
67 | 68 |

Como funciona

69 |

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.

70 | 71 |

O que você pode fazer com o Google Glasses

72 |

O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-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.

73 | 74 | [AQUI ENTRA UM VÍDEO] 75 |
76 |
77 | 88 | 89 | 94 |
95 | 96 | -------------------------------------------------------------------------------- /projeto-glass-html5/multimidia.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tudo sobre Google Glass 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Google Glass

16 |

A revolução do Google está chegando

17 |
18 | 19 | 20 | 30 |
31 | 32 |
33 |
34 |
35 |
36 |

Glass > Multimídia

37 |

Sons e Vídeos

38 |

por Pablo Rocha

39 |

Atualizado em 01/Maio/2013 40 |

41 |
42 |
43 |
44 | 49 | 54 |
55 | 56 |
57 |
58 | 59 | 64 |
65 | 66 | -------------------------------------------------------------------------------- /projeto-glass-html5/specs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tudo sobre Google Glass 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Google Glass

15 |

A revolução do Google está chegando

16 |
17 | 18 | 19 | 29 |
30 |
31 |
32 |
33 |
34 |

Glass > Especificações

35 |

Raio-X no Google Glass

36 |

por Pablo Rocha

37 |

Atualizado em 01/Maio/2013

38 |
39 |
40 | Clique em qualquer área destacada da imagem para ter mais informações sobre os recursos do Google Glass. Qualquer ponto vermelho vai te levar a um lugar cheio de novas informações. 41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 |
54 |
55 | 56 | 61 |
62 | 63 | -------------------------------------------------------------------------------- /projeto-glass-html5/teste.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Teste JavaScript 7 | 8 | 28 | 29 | 30 |

Acenda a lâmpada

31 | 32 | 33 | --------------------------------------------------------------------------------