html5 e o_futuro_da_web
TRANSCRIPT
![Page 2: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/2.jpg)
<!DOCTYPE html>
Friday, January 21, 2011
![Page 3: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/3.jpg)
Parsing rulesCanvasAudioVideoElementsLocal devices
FormsGeolocationWebGLWorkersStorageUser interaction
CommunicationWeb applicationsMicrodataFiles
HTML5 - Como anda o suporte do seu browser?
O que foi avaliado nos testes
Friday, January 21, 2011
![Page 4: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/4.jpg)
http://html5test.com
96 pontos 207 pontos177 pontos
208 pontos 242 pontos231 pontos
HTML5 - Como anda o suporte do seu browser?pontuação máxima 300 pontos
Friday, January 21, 2011
![Page 5: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/5.jpg)
HTML5
Friday, January 21, 2011
![Page 6: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/6.jpg)
CSS3
Friday, January 21, 2011
![Page 7: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/7.jpg)
JS
Friday, January 21, 2011
![Page 8: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/8.jpg)
HTML5 + CSS3 + JAVASCRIPT = APLICAÇÕES INCRÍVEIS
Friday, January 21, 2011
![Page 9: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/9.jpg)
O que já temos online!
Friday, January 21, 2011
![Page 10: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/10.jpg)
O que já temos online!
Friday, January 21, 2011
![Page 11: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/11.jpg)
O que já temos online!
Friday, January 21, 2011
![Page 12: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/12.jpg)
O que já temos online!
Friday, January 21, 2011
![Page 13: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/13.jpg)
O que já temos online!
Friday, January 21, 2011
![Page 14: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/14.jpg)
O que já temos online!
Friday, January 21, 2011
![Page 15: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/15.jpg)
Nova era de <video> da WebCodec War
Friday, January 21, 2011
![Page 16: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/16.jpg)
<VIDEO> - Nova experiência em consumo de vídeos
MP4,OGG,FLV, WEBMContainers de vídeos:
H.264, VP8, Theora, VP6Codecs de vídeos:
AAC, MP3, VorbisCodecs de aúdio:
Friday, January 21, 2011
![Page 17: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/17.jpg)
MP4 => H.264 + AAC/MP3
WEBM => VP8 + Vorbis
OGG => Theora + Vorbis
Combinações de containers e codecs:
<VIDEO> - Nova experiência em consumo de vídeos
Friday, January 21, 2011
![Page 18: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/18.jpg)
<VIDEO> - Nova experiência em consumo de vídeos
MP4 (H.264 + AAC)
MP4 (H.264 + AAC) e demais formato do QuickTime.
OGG (Theora + Vorbis), WebM
OGG (Theora + Vorbis), MP4 (H.264 + AAC), WebM
OGG (Theora + Vorbis), WebM
OGG (Theora + Vorbis), WebMFriday, January 21, 2011
![Page 19: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/19.jpg)
<VIDEO> - Nova experiência em consumo de vídeos
Google decidiu remover o suporte a H.264 nas próximas versões do Chrome
-Então para quem usa tag <video> não será
possível exibir vídeos em H.264
Friday, January 21, 2011
![Page 20: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/20.jpg)
<VIDEO> - Nova experiência em consumo de vídeos
Google anunciou que vai criar plugins do WebM para:
Friday, January 21, 2011
![Page 21: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/21.jpg)
<VIDEO> - Nova experiência em consumo de vídeos
<video poster="/path/seuvideo-poster.png" preload="preload" controls="controls">
<source src="/path/seuvideo.mp4" /><source src="/path/seuvideo.webm" /><source src="/path/seuvideo.ogg" />
</video>
Utilizando a tag <video>
Na tag vídeo podemos ter os seguintes atributos: autoplay, controls, height, width, loop, preload, src e poster. <source> aceita type e codecs
É possível capturar e controlar por javascript eventos como:ended, start, playing entre outros.
Friday, January 21, 2011
![Page 22: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/22.jpg)
<input> - Novos forms types
<input type="email" value="[email protected]" />
<input type="number" step="1" min="-5" max="10" value="0" />
<input type="range" min="20" max="100" value="40" />
<input type="date" min="2011-01-01" max="2011-02-01" value="2010-01-21"/>
<input type="search" results="10" placeholder="Procurar..." />
<input type="text" required />
Alguns dos novos types para os inputs
Friday, January 21, 2011
![Page 23: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/23.jpg)
Friday, January 21, 2011
![Page 24: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/24.jpg)
Geolocation API
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(onGeolocationSuccess, onGeolocationError);} else { alert('GeoLocation não suportado');}function onGeolocationSuccess(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; alert( latitude + ' || ' + longitude);}function onGeolocationError(msg){
alert('Erro ao tentar pegar sua localização');}
Com essa nova API é possível obter as coordenadas do usuário de maneira muito simples utilizando Javascript
Friday, January 21, 2011
![Page 25: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/25.jpg)
Geolocation APIE marcar sua posição no googlemaps por exemplo.
Exibir informações de acordo com a localização do usuário.
Friday, January 21, 2011
![Page 26: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/26.jpg)
LocalStorageÉ possível guardar valores no browser do usuário sem utilizar cookies.
Friday, January 21, 2011
![Page 27: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/27.jpg)
LocalStorage API
localStorage.setItem('msg', 'Campus Party 2011');sessionStorage.setItem('timestamp', new Date().getTime());
localStorage.getItem('msg'); //Campus Party 2011sessionStorage.getItem('timestamp'); //1295495745940
Friday, January 21, 2011
![Page 28: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/28.jpg)
Tudo que é salvo no localStorage ou sessionStorage se torna uma string. Portanto se você precisa salvar um objeto javascript utilize algo como:JSON.stringify({nome:”Maxwell”, sobrenome:”Dayvson”});
LocalStorage API
Friday, January 21, 2011
![Page 29: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/29.jpg)
Patterns + FrameworksTécnicas que ajudam a começar um projeto utilizando padrões da web e boas práticas.
Friday, January 21, 2011
![Page 30: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/30.jpg)
Existem frameworks e convenções que você pode seguir para facilitar seu trabalho e manter um padrão.
Friday, January 21, 2011
![Page 31: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/31.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 32: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/32.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 33: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/33.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 34: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/34.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 35: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/35.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 36: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/36.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 37: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/37.jpg)
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
![Page 38: Html5 e o_futuro_da_web](https://reader033.vdocuments.mx/reader033/viewer/2022052823/555248b0b4c9059a4f8b4a31/html5/thumbnails/38.jpg)
Obrigado :)
#twitter @dayvson
Friday, January 21, 2011