Html5 e o_futuro_da_web

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

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

Mais conteúdo relacionado

Destaque

Semelhante a Html5 e o_futuro_da_web

Mais de Campus Party Brasil

Html5 e o_futuro_da_web