HTML5 e o futuro da web - Campus Party 2011

E o futuro da Web
Maxwell Dayvson - @dayvson
dayvson@gmail.com
maxwell.silva@corp.terra.com.br
Friday, January 21, 2011

<!DOCTYPE html>


HTML5 - Como anda o suporte do seu browser?

O que foi avaliado nos testes

Parsing rules Forms Communication
Canvas Geolocation Web applications
Audio WebGL Microdata
Video Workers Files
Elements Storage
Local devices User interaction


HTML5 - Como anda o suporte do seu browser?
pontuação máxima 300 pontos

96 pontos 177 pontos 207 pontos

208 pontos 231 pontos 242 pontos
Esses resultados são das últimas versões dos browsers incluindo versões betas

http://html5test.com

HTML5


CSS3


JS


HTML5 + CSS3 + JAVASCRIPT = APLICAÇÕES INCRÍVEIS


O que já temos online!


Nova era de <video> da Web
Codec War


<VIDEO> - Nova experiência em consumo de vídeos

Containers de vídeos:
MP4,OGG,FLV, WEBM
Codecs de vídeos:
H.264, VP8, Theora, VP6
Codecs de aúdio:
AAC, MP3, Vorbis



Combinações de containers e codecs:

MP4 => H.264 + AAC/MP3
WEBM => VP8 + Vorbis
OGG => Theora + Vorbis



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




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


Google anunciou que vai criar plugins do WebM para:



Utilizando a tag <video>

<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>

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.


<input> - Novos forms types

Alguns dos novos types para os inputs

<input type="email" value="dayvson@gmail.com" />

<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 />


Geolocation API

Com essa nova API é possível obter as coordenadas do
usuário de maneira muito simples utilizando Javascript

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');
}


Geolocation API
E marcar sua posição no googlemaps por exemplo.

Exibir informações de acordo com a localização do
usuário.


LocalStorage
É possível guardar valores no browser do usuário sem
utilizar cookies.


LocalStorage API

localStorage.setItem('msg', 'Campus Party 2011');
sessionStorage.setItem('timestamp', new Date().getTime());

localStorage.getItem('msg'); //Campus Party 2011
sessionStorage.getItem('timestamp'); //1295495745940


LocalStorage API

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”});


Patterns + Frameworks
Técnicas que ajudam a começar um projeto
utilizando padrões da web e boas práticas.


Existem frameworks e convenções que você pode seguir
para facilitar seu trabalho e manter um padrão.


Patterns + Frameworks - Simpliﬁque seu trabalho


Perguntas?
dayvson@gmail.com
#twitter @dayvson

Obrigado :)


HTML5 e o futuro da web - Campus Party 2011

Mais conteúdo relacionado

Destaque (20)

Semelhante a HTML5 e o futuro da web - Campus Party 2011 (20)

Último (20)

HTML5 e o futuro da web - Campus Party 2011