Html5 Overview

Agentes Timeline Simplificações Novidades Tags Mantidas Estrutura Estrutura Antiga Nova Estrutura Tópicos da Apresentação

Tecnologias Class: Semantics Class: Offline & Storage Class: Device Access Class: Connectivity Class: Multimedia Class: 3D, Graphics& Effects Class: Performance & Integration Class: CSS 3 Tópicos da Apresentação

Compatibilidade Opiniões Referências Imagens Tópicos da Apresentação

Web HipertextApplication Technology WorkingGroup (WHATWG) - http://www.whatwg.org/ Criado em 2004 – Contribuidores individuais: Apple, Mozilla, Google e Opera Aberto para Contribuições Demos, APIS, Contribuições ligadas ao HTML World Wide Web Consortion (W3C) - http://www.w3.org/ Draft do HTML5 em 2008 Agentes

1991 – Tags (HTML) mencionadas 1993 – Draft HTML 1995 – HTML 2 1997 – W3C HTML 3.2 (Janeiro) HTML 4 (Dezembro) 1999 – HTML 4.1 – recomendação W3C 2000 – XHTML 1.0 Timeline

2001 – XHTML 1.1 2001/2007 – W3C “Sleeps” 2004 – WATWG inicia Project Web Applications (HTML5) 2008 – Draft HTML5 pela W3C 2009 – W3C anuncia fim do grupo XHTML Timeline

Doctype <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Type não necessário <scriptsrc="myscript.js"></script> <linkhref="myapp.js"></link> Simplificações

Novidades article aside audio canvas command datagrid datalist datatemplate event-source figure footer header mark meter nav output progress source time video

Tags Mantidas acronym applet basefont dir font s strike u big center frame frameset noframes tt

Givingmeaningtostructure, semantics are front and center with HTML5. A richer set oftags, alongwithRDFa, microdata, andmicroformats, are enabling a more useful, data driven web for bothprogramsandyourusers. Class: Semantics

HTML5 appscan start faster, andworkevenifthereis no internet connection, thankstotheApp Cache, Local Storage, Indexed DB, andthe File APIs. Class: Offline & Storage

Withgeo-locationjustthebeginning, HTML5 will help appstoaccessdevicesoutsideofyour browser andconnectedtoyourcomputer. Class: Device Access

More efficientconnectivitymeans more real-time chats, faster games, andbetter communication. Web Sockets and Server-SentEvents are pushing (punintended) data betweenclientand server more efficientlythaneverbefore. Class: Connectivity

Audioandvideo are firstclasscitizens in the HTML5 web, living in harmonywithyourappsand sites. Lights, camera, action! Class: Multimedia

Audioelement (OGG): SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY <audiosrc="music.ogg"autoplaycontrols></audio> Videoelement (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY <videosrc="video.ogv" loop autoplay /> Áudio e Vídeo

<objectclassid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000"width="425"height="344"codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> <paramname="allowFullScreen"value="true" /> <paramname="allowscriptaccess"value="always" /> <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&hl=en&fs=1&" /> <paramname="allowfullscreen"value="true" /> <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&hl=en&fs=1&"allowscriptaccess="always"allowfullscreen="true”></embed> </object> Áudio e Vídeo

<videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controlsautobuffer> <p>Trythispage in Safari 4! Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">download thevideo</a>instead.</p> </video> Class: Multimedia

OggTheora/Vorbis Firefox 3.5+ Chrome Opera MPEG-4 H.264/ACC Safari Chrome Opera Formatos de Vídeo

Player HTML5 http://sublimevideo.net/

Between SVG, Canvas, WebGL, and CSS3 3D features, you'resuretoamazeyouruserswithstunningvisualsnativelyrendered in the browser. Class: 3D, Graphics & Effects

Canvas <canvas id="myCanvas"width="300"height="150">Your browser does nothavesupportfor Canvas.</canvas> <scripttype="text/javascript"><!-- window.addEventListener('load', function () { // Getthecanvaselement. varelem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas context.fillStyle= '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth = 4; // Draw some rectangles. // Arguments: x, y, width, height context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60); }, false); // --></script> http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Aplicações - Exemplo Newton Polinomial - http://www.benjoffe.com/code/demos/interpolate/ BlobSallad - http://www.blobsallad.se/ Star-Field flight - http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html 3D Walker - http://www.benjoffe.com/code/demos/canvascape/ paintWeb- http://code.google.com/p/paintweb/

Makeyour web app, andthe web, fasterwith a varietyoftechniquesandtechnologiessuch as Web WorkersandXMLHttpRequest 2. No usershalleverwaitonyourwatch. Class: Performance & Integration

CSS3 delivers a wide range ofstylizationandeffects, enhancingthe web appwithoutsacrificingyoursemanticstructureor performance. Additionally Web Open FontFormat (WOFF) providestypographicflexibilityandcontrolfarbeyondanythingthe web hasofferedbefore. Class: CSS 3

Em desenvolvimento Está sendo desenvolvido em sub-especificações transformation animation transition Exemplo do que pode ser feito com CSS 3: http://www.zurb.com/playground Class: CSS 3

Form Demo <formaction="formdemo.php"method="post"> <label for="name">Name:</label> <inputtype="text"name="name"requiredplaceholder="Name" /> <label for="email">Email:</label> <inputtype="email"name="email"requiredplaceholder="email@example.com" /> <label for="website">Website:</label> <inputtype="url"name="website"requiredplaceholder="http://www.example.com" /> <label for="number">Number:</label> <inputtype="number"name="number" min="0"max="10"step="2"requiredplaceholder="Even num < 10"> <label for="range">Range:</label> <inputtype="range"name="range" min="0"max="10"step="2" /> <label for="message">Message:</label> <textareaname="message"required></textarea> <inputtype="submit"value="SendMessage" /> </form> http://www.bradshawenterprises.com/tests/formdemo.php

Form Demo (CSS) input:not(:focus), textarea:not(:focus) { opacity:0.5; } input:required, textarea:required { background:url("/tests/formdemo/asterisk_orange.png") no-repeat 280px 7px; } input:valid, textarea:valid { background:url("/tests/formdemo/tick.png") no-repeat 280px 5px; } input:focus:invalid, textarea:focus:invalid { background:url("/tests/formdemo/cancel.png") no-repeat 280px 7px; } input[type=submit] { padding:10px; background:none; opacity:1.0; } http://www.bradshawenterprises.com/tests/formdemo.php

Form –Tipos search tel url email datetime date month week time datetime-local number range color

Tabela de Compatibilidade do HTML5 com os principais browsers: http://caniuse.com/ Compatibilidade

“The world ismovingto HTML5” Steve Jobs Opiniões

“Ihad no ideatherewassomuch HTML5 already in play” Tim O’Reilly Opiniões

“The Web hasnotseenthisleveloftransformation, thislevelofaceleration, in thepast 10 years... we’re betting big on HTML5” VicGundotra, Google Opiniões

Coding a HTML 5 Layout from Scratch: (http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/) A preview of HTML 5 (http://www.alistapart.com/articles/previewofhtml5/) HTML 5 and CSS 3: The Techniques You’ll Soon Be Using (http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/) Classic CSS Techniques Made Simple with CSS3 (http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/) HTML 5 differences from HTML 4 (http://dev.w3.org/html5/html4-differences/) Google Bets Big on HTML 5: News from Google I/O (http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html) Recursos

WHATWG - HTML 5 - http://www.whatwg.org/specs/ IETF - WebSockethttp://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76 W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.html Blog - Vídeo/HTML5 - http://paulrouget.com/ Referências

http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtml http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual- Cheat-Sheet.pdf CSS 3 - http://www.zurb.com/playground/ http://www.slideshare.net/nathansmith/echo-html5 Tag de Vídeo - http://html5doctor.com/the-video-element/ Referências

http://www.w3.org/html/logo/downloads/HTML5_Logo.svg http://www.w3.org/html/logo/downloads/HTML5_Tech_Classes_SVG.zip http://dclips.fundraw.com/zobo500dir/elkbuntu_FBI_Dude_3.jpg http://igs.indiana.edu/geology/ancient/ribbontimeline/timeline01.gif http://www.flickr.com/photos/12905355@N05/4301184191/ http://www.flickr.com/photos/improbulus/311039122/sizes/m/in/photostream/ http://www.flickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/ Imagens

Html5 Overview

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Html5 Overview

Similar to Html5 Overview (20)

More from Daniel Arndt Alves

More from Daniel Arndt Alves (20)

Recently uploaded

Recently uploaded (20)

Html5 Overview