Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09

O papel do "devigner" e as novidades do HTML5

O novo profissional de Interfaces

O Surgimento da Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Aplicações na Web ,[object Object],[object Object],CGI

Ajax ,[object Object],[object Object],[object Object]

O novo profissional ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

O que as aplicações usam hoje? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

O novo HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

O que há de novo? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Já posso usar HTML 5? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

O elemento <canvas> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exemplos: Animações ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exemplos: 3D ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exemplos: Aplicações ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exemplos: Jogos ,[object Object],[object Object],[object Object],[object Object]

Primeiros passos <canvas id=“exemplo” width=“300" height=“300" > Texto exibido caso o navegador não seja compatível com Canvas. </canvas> var example = document. getElementById ('example'); var context = example. getContext ('2d'); context. fillStyle = "rgb(255,0,0)"; context. fillRect (30, 30, 50, 50);

O novo padrão de audio e video ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

<audio> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<audio autoplay controls> <source src="file.ogg" /> <source src="file.mp3" /> </audio>

<video> ,[object Object],[object Object],[object Object],<video width=‘400’ height=‘300’ controls autobuffer> <source src=‘video1.mp4' type='video/mp4‘ /> <source src=‘video1.ogv' type='video/ogg‘ /> </audio>

<video> API ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],if (video. paused == false) { video. pause() ; } else { video. play() ; }

Exemplos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Novos Seletores ,[object Object],element = document. getElementById ('section1'); elements = document. getElementsByTagName ('div'); elements = document. getElementsByClassName (‘p'); ,[object Object],elements = document. querySelectorAll (‘ul#opcoes li'); elements = document. querySelectorAll (‘#content .obs'); elements = document. querySelectorAll (‘div > p');

Armazenamento Local ,[object Object],[object Object],[object Object],[object Object],[object Object],element = document. getElementById ('section1'); elements = document. getElementsByTagName ('div'); elements = document. getElementsByClassName (‘p');

Drag and Drop ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Workers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Geolocalização ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],if (navigator. geolocation ) { navigator. geolocation . getCurrentPosition ( function(pos){ var lat = pos. coords . latitude ; var lng = pos. coords . longitude ; }); }

O futuro do Flash ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Quando usar Flash? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Demonstrações ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object]

Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (6)

En vedette

En vedette (13)

Similaire à Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09

Similaire à Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09 (20)

Plus de Rio Info

Plus de Rio Info (20)

Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Paiva - 02/09