html5 e o futuro da web - campus party 2011

E o futuro da Web

Maxwell Dayvson - @[email protected]

[email protected]

Friday, January 21, 2011

mailto:[email protected]




<!DOCTYPE html>


Parsing rulesCanvasAudioVideoElementsLocal devices

FormsGeolocationWebGLWorkersStorageUser interaction

CommunicationWeb applicationsMicrodataFiles

HTML5 - Como anda o suporte do seu browser?

O que foi avaliado nos testes


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

Esses resultados são das últimas versões dos browsers incluindo versões betas




HTML5


CSS3


JS


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


O que já temos online!


Nova era de <video> da WebCodec War


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


MP4 => H.264 + AAC/MP3

WEBM => VP8 + Vorbis

OGG => Theora + Vorbis

Combinações de containers e codecs:




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


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:



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


<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


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


Geolocation APIE 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 2011sessionStorage.getItem('timestamp'); //1295495745940


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


Patterns + FrameworksTé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 - Simplifique seu trabalho


Obrigado :)

[email protected]

#twitter @dayvson




html5 e o futuro da web - campus party 2011

Education