Html5 - O futuro da Web

HTML 5 o futuro da web jose berardo – especializa treinamentos

agenda: - de onde vem a web? - e para onde ela vai? - html? quem é esse cara? - o que o html5 traz de novo? - já devo usar agora? - perguntas?

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 - O futuro da Web

Mais conteúdo relacionado

Destaque

Semelhante a Html5 - O futuro da Web

Mais de Jose Berardo

Html5 - O futuro da Web