Html5 Overview
3 likes549 views
This document provides an overview of HTML5, including its history, timeline, new features, and compatibility with browsers. Some key points: - HTML5 development is led by the WHATWG and W3C to standardize web applications. It simplifies HTML and introduces new semantic elements like <article>, <aside>, <header>. - New features include multimedia with <audio> and <video> tags, 3D graphics with Canvas, and offline/storage APIs. Forms are enhanced with new input types. - CSS3 adds animation, transitions and transforms. Performance improves with Web Workers and XMLHttpRequest Level 2. - Browser support for HTML5 features is tracked on http://caniuse
![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](https://image.slidesharecdn.com/html5overview-110121173032-phpapp02/85/Html5-Overview-44-320.jpg)
Html5 Overview
- 2. AgentesTimelineSimplificaçõesNovidadesTags MantidasEstruturaEstrutura AntigaNova EstruturaTópicos da Apresentação
- 3. TecnologiasClass: SemanticsClass: Offline & StorageClass: Device AccessClass: ConnectivityClass: MultimediaClass: 3D, Graphics& EffectsClass: Performance & IntegrationClass: CSS 3Tópicos da Apresentação
- 5. Web HipertextApplication Technology WorkingGroup (WHATWG) - http://www.whatwg.org/Criado em 2004 – Contribuidores individuais: Apple, Mozilla, Google e OperaAberto para ContribuiçõesDemos, APIS, Contribuições ligadas ao HTMLWorld Wide Web Consortion (W3C) - http://www.w3.org/Draft do HTML5 em 2008Agentes
- 6. 1991 – Tags (HTML) mencionadas1993 – Draft HTML1995 – HTML 21997 – W3CHTML 3.2 (Janeiro)HTML 4 (Dezembro)1999 – HTML 4.1 – recomendação W3C2000 – XHTML 1.0Timeline
- 7. 2001 – XHTML 1.12001/2007 – W3C “Sleeps”2004 – WATWG inicia Project Web Applications (HTML5)2008 – Draft HTML5 pela W3C2009 – W3C anuncia fim do grupo XHTMLTimeline
- 8. 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
- 11. Estrutura
- 12. Estrutura antiga
- 13. Estrutura Nova
- 20. 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
- 21. HTML5 appscan start faster, andworkevenifthereis no internet connection, thankstotheApp Cache, Local Storage, Indexed DB, andthe File APIs.Class: Offline & Storage
- 22. Withgeo-locationjustthebeginning, HTML5 will help appstoaccessdevicesoutsideofyour browser andconnectedtoyourcomputer.Class: Device Access
- 24. 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
- 25. Audioandvideo are firstclasscitizens in the HTML5 web, living in harmonywithyourappsand sites. Lights, camera, action!Class: Multimedia
- 26. 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
- 27. <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
- 28. <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
- 29. <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
- 33. Between SVG, Canvas, WebGL, and CSS3 3D features, you'resuretoamazeyouruserswithstunningvisualsnativelyrendered in the browser.Class: 3D, Graphics & Effects
- 34. 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/
- 35. Canvascontext.fillStyle= '#00f'; // bluecontext.strokeStyle = '#f00'; // redcontext.lineWidth = 4;// Draw some rectangles.// Arguments: x, y, width, heightcontext.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/
- 36. CanvasAplicações - ExemploNewton 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.html3D Walker - http://www.benjoffe.com/code/demos/canvascape/paintWeb- http://code.google.com/p/paintweb/
- 37. Makeyour web app, andthe web, fasterwith a varietyoftechniquesandtechnologiessuch as Web WorkersandXMLHttpRequest 2. No usershalleverwaitonyourwatch.Class: Performance & Integration
- 38. CSS3 delivers a wide range ofstylizationandeffects, enhancingthe web appwithoutsacrificingyoursemanticstructureor performance. Additionally Web Open FontFormat (WOFF) providestypographicflexibilityandcontrolfarbeyondanythingthe web hasofferedbefore.Class: CSS 3
- 39. Em desenvolvimentoEstá sendo desenvolvido em sub-especificaçõestransformationanimationtransitionExemplo do que pode ser feito com CSS 3:http://www.zurb.com/playgroundClass: CSS 3
- 40. Class: CSS 3
- 41. Class: CSS 3
- 42. Class: CSS 3
- 43. 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
- 44. 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
- 46. Form –Tipos
- 47. Form –Tipos
- 48. Tabela de Compatibilidade do HTML5 com os principais browsers:http://caniuse.com/Compatibilidade
- 49. “The world ismovingto HTML5”Steve JobsOpiniões
- 50. “Ihad no ideatherewassomuch HTML5 already in play”Tim O’ReillyOpiniões
- 51. “The Web hasnotseenthisleveloftransformation, thislevelofaceleration, in thepast 10 years... we’re betting big on HTML5”VicGundotra, GoogleOpiniões
- 52. 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
- 55. WHATWG - HTML 5 - http://www.whatwg.org/specs/IETF - WebSockethttp://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.htmlBlog - Vídeo/HTML5 - http://paulrouget.com/Referências
- 56. http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtmlhttp://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual- Cheat-Sheet.pdfCSS 3 - http://www.zurb.com/playground/http://www.slideshare.net/nathansmith/echo-html5Tag de Vídeo - http://html5doctor.com/the-video-element/Referências