html5 e o_futuro_da_web
TRANSCRIPT
<!DOCTYPE html>
Friday, January 21, 2011
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
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
HTML5
Friday, January 21, 2011
CSS3
Friday, January 21, 2011
JS
Friday, January 21, 2011
HTML5 + CSS3 + JAVASCRIPT = APLICAÇÕES INCRÍVEIS
Friday, January 21, 2011
O que já temos online!
Friday, January 21, 2011
O que já temos online!
Friday, January 21, 2011
O que já temos online!
Friday, January 21, 2011
O que já temos online!
Friday, January 21, 2011
O que já temos online!
Friday, January 21, 2011
O que já temos online!
Friday, January 21, 2011
Nova era de <video> da WebCodec War
Friday, January 21, 2011
<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
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
<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
<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
<VIDEO> - Nova experiência em consumo de vídeos
Google anunciou que vai criar plugins do WebM para:
Friday, January 21, 2011
<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
<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
Friday, January 21, 2011
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
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
LocalStorageÉ possível guardar valores no browser do usuário sem utilizar cookies.
Friday, January 21, 2011
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
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
Patterns + FrameworksTécnicas que ajudam a começar um projeto utilizando padrões da web e boas práticas.
Friday, January 21, 2011
Existem frameworks e convenções que você pode seguir para facilitar seu trabalho e manter um padrão.
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Patterns + Frameworks - Simplifique seu trabalho
Friday, January 21, 2011
Obrigado :)
#twitter @dayvson
Friday, January 21, 2011