HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
2. Marcelio Leal
@marcelioleal - For twitters
http://marcelioleal.com - For other things
Software Engineer Chief at @onsee
PHP Pai d’Égua User Group cofounder
10 anos de experiência em Webdev
5. What’s HTML5 ?
A nova versão do HTML
Sinônimo de coisa
#estaile na Web.
6. Agentes
• Web Hipertext Application Technology
Working Group (WHATWG) - whatwg.com
• Criado em 2004 - Contribuidores individuais, Apple, Monzilla,
Google and Opera
• Aberto para contribuições
• Demos, APIs, Contribuições ligadas ao HTML
• World Wide Web Consortium (W3C)
• Draft do HTML5 em 2008
7. Timeline - The Origin
1991 - Tags(HTML) mensionadas
1993 - Draft HTML
1995 - HTML 2
1997 - HTML 3.2 (Jan), HTML 4 (Dec) - W3C
1999 - HTML 4.1 - recomendação W3C
#gambi ?
2000 - XHTML 1.0
8. Timeline 2000
Dreamweaver
faz a festa
2001 - XHTML 1.1
2001/2007 -W3C Sleeps
Dreamweaver
#farelo
2004 - WHATWG starts Project Web Web
Applications (HTML5 +-) 2.0
2008 - Draft HTML5 by W3C
2009 - W3C anuncia fim do grupo do XHTML
10. Simplificações
Doctype
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Type não necessário
<script src=”jacarato.js”></script>
<link href=”jacapaladium.js”></link>
18. New way
<video width="640" height="360"
src="http://www.youtube.com/demo/google_main.mp4"
controls autobuffer>
<p> Try this page in Safari 4! Or you can
<a href="http://www.youtube.com/demo/
google_main.mp4">download the video</a>
instead.</p>
</video>
24. CSS 3
• Em desenvolvimento
• Está sendo desenvolvido em sub-especificações
• tranformation, animation, transition
• Esse caras ficam brincando com isso:
• http://www.zurb.com/playground
34. Canvas
<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>
<script type="text/javascript"><!--
window.addEventListener('load', function () {
// Get the canvas element.
var elem = document.getElementById('myCanvas');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context) {
return;
}
// Now you are done! Let's draw a blue rectangle.
context.fillStyle = '#00f';
context.fillRect(0, 0, 150, 100);
}, false);
// --></script>
http://dev.opera.com/articles/view/html-5-canvas-the-basics/
37. “I had no idea there was so
much HTML5 already in play”
Tim O’Reilly
38. “The Web has not seen this level of transformation,
this level of aceleration, in the past 10 years... we’re
betting big on HTML5”
Vic Gundotra, Google
39. “The Web has not seen this level of transformation,
this level of aceleration, in the past 10 years... we’re
betting big on HTML5”
Vic Gundotra, Google