Apresentação sobre html5

8/3/2019 Apresentação sobre html5

http://slidepdf.com/reader/full/apresentacao-sobre-html5 1/33

<!DOCTYPE HTML>

Andrew de [email protected]



http://www.google.com/chrome



























































http://www.opera.com/







































































































http://www.getfirefox.com/





































































http://www.apple.com/safari/








































































O que eu faço com pessoas queacham que IE é a Internet?

Instale o Firefox e siga estas instruções paradeixar o Firefox parecendo o IE.

http://johnhaller.com/jh/mozilla/firefox_internet_explorer/










































































http://www.microsoft.com/windows/internet-explorer/



















































































































Javascript

http://en.wikipedia.org/wiki/JavaScript




XMLHTTP

http://www.alexhopmann.com/xmlhttp.htm

http://www.alexhopmann.com/xmlhttp.htm



XMLHttpRequest

http://www.mozilla.org/




































































































AJAX

http://livepage.apple.com/


http://maps.google.com/



























































































































































































HTML 4.01

http://www.w3.org/TR/html401/

http://www.w3.org/TR/html401/



Plug n Hel





The World Wide

Web Consortium












































































































































































































The Web Hypertext Application

Technology Working Group(WHAT-WG)

http://www.whatwg.org/

http://www.whatwg.org/



bjetivos



Evolução, não revolução



http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/



Eliminar

“Tag Soup”







HTML 5 Validator

HTML 5 Doctor

http://html5doctor.com/

http://html5doctor.com/

http://html5.validator.nu/

http://html5.validator.nu/



“Pave the Cow Paths”



Frequência de Classes





<!DOCTYPE HTML>

<html lang="en">

<head>

<title> Artigo (HTML5)</title>

<meta charset="utf-8">

</head> <body>

<header id="branding">Logo do site, search, etc.</header>

<nav>

<ul>

<li>Navegação do site</li>

</ul>

</nav>

<section id="content"> <article> 

<header>

<h1>Titulo do artigo</h1>

<p>Metadata do artigo</p>

</header>

<p>Conteúdo do artigo</p>

</article>

<section id="sidebar">  <h2>Titulo do sidebar</h2>

<p>Conteúdo do sidebar</p>

</section>

</section>

<footer id="footer">Footer</footer> 

</body>

</html>



2009, 2012 ou 2022?

http://ryanroberts.co.uk/blog/2009/07/in-defense-of-html-5-and-that-2022-date/






Exemplos:

Video

•AppSpot HTML5 Video Demo

• YouTube HTML5 Demo

• Pat Chanezon’s Green Screen Demo

http://www.youtube.com/html5


http://htmlfive.appspot.com/static/video.html

http://pat-html5.appspot.com/video-filters/video.xhtml

http://pat-html5.appspot.com/video-filters/video.xhtml







Exemplos: Web Workers

• Motion Tracking com Web Workers

• Prime Numbers com Web Workers

http://htmlfive.appspot.com/static/tracker1.html

http://htmlfive.appspot.com/static/primes-good.html

http://htmlfive.appspot.com/static/primes-good.html





Exemplos: Canvas• Drawing Board

• Paintweb

• Blob Sallad

• Bespin » Code in the Cloud

• Ben Joffe’s Canvas Examples

• Starfield

• US Map Polygons

•Box2D JS Physics Engine

http://polygonzo.googlecode.com/svn/trunk/code/test.html

http://www.benjoffe.com/code/

https://bespin.mozilla.com/

http://box2d-js.sourceforge.net/index2.html

http://box2d-js.sourceforge.net/index2.html



http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html

http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html





http://www.blobsallad.se/

http://www.blobsallad.se/

http://code.google.com/p/paintweb/

http://code.google.com/p/paintweb/

http://htmlfive.appspot.com/static/draw.html

http://htmlfive.appspot.com/static/draw.html



Exemplo: Geolocation

• Geolocation | Where Am I?

http://htmlfive.appspot.com/static/whereami.html

http://htmlfive.appspot.com/static/whereami.html



Exemplo:

DB & App Cache

• DB and App Cache | Stickies

http://htmlfive.appspot.com/static/stickies.html

http://htmlfive.appspot.com/static/stickies.html







Outros Links• HTML 5 Markup Language

• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

• New elements in HTML 5

• Yes, You Can Use HTML 5 Today!

• HTML 5 differences from HTML 4• 23 Essential HTML 5 Resources

• HTML 5 canvas - the basics - Opera Dev

• HTML5 Gallery

• HTML5 Canvas Cheat Sheet

• HTML Design Principles

•Canvas Demos

http://www.w3.org/TR/html-design-principles/

http://www.canvasdemos.com/



http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html


http://html5gallery.com/

http://dev.opera.com/articles/view/html-5-canvas-the-basics/




http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/23-essential-html-5-resources/

http://dev.w3.org/html5/html4-differences/Overview.html

http://www.sitepoint.com/article/html-5-snapshot-2009/

http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML

http://www.edesignerz.net/html/2913-html-5-and-css-3-the-techniques-youll-soon-be-using

http://dev.w3.org/html5/markup/

























Obrigado!

Apresentação sobre html5

Documents