HTML5 Futuro da Web

HTML 5 o futuro da web jose berardo – especializa treinamentos

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

rede acadêmica utilizada para troca de informações entre universidades

portais e-commerce características: Portifólios digitais - o que importa é a interface - o que importa é o conteúdo - o que importa é o software Clara divisão produtor x consumidor WEB 1.0

interativa colaborativa produtiva

onde e como encontrar o que queremos ?

qual o verdadeiro significado das coisas?

web semântica “ I have a dream for the Web in wich computers become capable of analyzing all the data on the web”

2004 RDF resource description framework

H. T. M. L. H I P E R T E X T M A R K U P L A N G U A G E

- criada por Tim Berners-Lee em 1993 - aplicação formal da s.g.m.l. - i.e.t.f. até a versão 2.0 em 1995 - Regida pelo W.3.C. desde 1996 - maiores fabricantes de browsers - diversos fabricantes de hardware - brasileiras: SERPRO e Nic.br - HTML 1.0, 2.0, 3.2, 4.01 H. T. M. L.

- substituta natural do html - sintaxe mais rígida - versões 1.0 e 1.1 - versão 2.0 iniciada e abandonada - R.D.F.a. - para obter semântica - substituída pela HTML5 X. H. T. M. L.

<! DOCTYPE html> < html > < head > < meta charset = "utf-8" /> < title > Conteúdo editável </ title > </ head > < body > < header > < h1 contenteditable = "true" > Hello World </ h1 > </ header > </ body > </ html > conteúdo editável

<!DOCTYPE html > < html > < head > < meta charset =" utf-8 " /> < title > Local storage </ title > < script src =" lib/jquery/jquery-min.js " ></ script > </ head > < body > < section > < ul id =" itens " contenteditable =" true " /></ ul > < input type =" button " id =" limpar " value =" limpar " /> </ section > </ body > </ html >

< script > $ ( function (){ var conteudo = localStorage . getItem ( 'itens' ); $ ( '#itens' ). blur ( function (){ localStorage . setItem ( 'itens' , $ ( this ). html ()); }). html ( conteudo ? conteudo : "<li/>" ) $ ( '#limpar' ). click ( function () { localStorage . removeItem ( 'itens' ); $ ( '#itens' ). html ( "<li/>" ) }) }) </ script >

<!DOCTYPE html > < html > < head > < meta charset =" utf-8 " /> < title > On/Offline </ title > </ head > < script src =" lib/jquery/jquery.min.js " ></ script > < body > < hea d er > < h1 id =" estado " /> </ header > </ body > </ html > OnLine e OffLine

< script > $ ( document ). bind ( ' online ' , function () { $ ( '#estado' ). text ( 'Estou Online' ); }); $ ( document ). bind ( ' offline ' , function () { $ ( '#estado' ). text ( 'Estou Offline' ); }); </ script > < script > $ ( function (){ setInterval ( 'checarEstado()' , 200 ); }) function checarEstado (){ if ( navigator . onLine ) $ ( '#estado' ). html ( "Estou Online" ) else $ ( '#estado' ). html ( "Estou Offline" ) } </ script > eventos Checagem de estado

Tag <canvas> + biblioteca Javascript rgraph

<!DOCTYPE html > < html > < head > < meta charset =" utf-8 " > < title > Canvas </ title > < script src =" lib/jquery/jquery.min.js " ></ script > < style > canvas { display : block ; border : 1px dashed #000 } </ style > </ head > < body > < sectio n > < canvas id = " quadro " ></ canvas > </ section > </ body > </ html >

< script > $ ( function () { $ ( '#quadro' ). click ( function ( event ) { var context = this . getContext ( '2d' ) context . strokeStyle = '#ABC' context . lineWidth = 3 // bom usar jquery - elementlocation var x = event . pageX - 10 var y = event . pageY - 10 context . moveTo ( x + 40 , y ) context . arc ( x , y , 40 , 0 , Math . PI * 2 , true ) context . stroke () }) }) </ script >

<!DOCTYPE html > < html > < head > < meta charset =" utf-8 " > < title > Canvas </ title > < script src =" lib/jquery/jquery.min.js " ></ script > </ head > < body > < sectio n > < figure > < img id =" foto " src =" lib/citeupg.jpg " /> < figcaption > Da n s une cite universitaire </ figcaption > </ figure > < audio id =" s om " src =" lib/cap02.ogg " controls > Troca esse browser aÃ... </ audio > </ section > </ body > </ html >

< script > $ ( function () { $ ( '#foto' ). toggle ( function () { $ ( '#som' ). get ( 0 ). play () ; }, function () { $ ( '#som' ). get ( 0 ). pause () ; }) }) </ script >

<!DOCTYPE html > < html > < head > < meta charset =" utf-8 " > < title > Video </ title > < script src =" lib/jquery/jquery-1.3.2.min.js " > </ script > </ head > < body > < section > < video id =" vid1 " > < source src =" trailer_iphone.m4v " /> < source src =" media/bbb400p.ogv " /> </ video > </ section > </ body > </ html >

< script > var w = new Worker ( 'teste.js' ); w . onmessage = function ( event ) { $ ( '#conteudo' ). html ( event . data ); } </ script >

Websockets new WebSocket('ws://servidor') flash js silverlight javafx python java php .net ruby

roda nos principais browsers opera 10+, firefox 3.5+ Chrome 5+, Safari 4+

será mais rápido e suportará html 5 felizmente...

dica: 1 não complique a vida de seu cliente

obrigado! jose berardo – especializa treinamentos

HTML5 Futuro da Web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie HTML5 Futuro da Web

Ähnlich wie HTML5 Futuro da Web (20)

Mehr von Jose Berardo

Mehr von Jose Berardo (12)

HTML5 Futuro da Web