Este documento fornece um resumo sobre HTML 5 e Internet Explorer 9. Apresenta os novos elementos estruturais do HTML 5 como <header>, <footer>, <nav> e <article>. Também discute os novos elementos de mídia como <video> e <audio>, além dos novos controles de formulário. Por fim, fornece recomendações sobre o uso do HTML 5.

1. Visão geral do HTML 5 e Internet Explorer 9 Rodrigo Kono Microsoft MVP MCP, MCTS, MCPD, MCT www.rodrigokono.net

2. Rodrigo Kono Experiência de 10 anos em web MVP da Microsoft MCP – MCTS – MCPD – MCT Fundador do grupo de usuários DevGoiás .NET 7 anos de comunidade .NET Mais de 11.200 pessoas nesse tempo Secretaria da Fazenda do Estado de GO Bacharel em Ciência da Computação Pensou.NET Treinamentos – www.pensou.net Twitter: @rodrigokono www.rodrigokono.net Treinamento e formação em TI

3. @rodrigokono

4. Agenda Você sabe HTML? Web Standards e um pouco de história HTML 5 Novos elementos de estrutura <video> <audio> novos controles de formulário O que já se foi Estrutura de documento Quando podemos usar e o que W3C recomenda Novidades do Internet Explorer 9 Recomendações gerais

5. eu sei HTML... ...e eu sei usar desde pequeno!

6. Errado. E daí!? <p><b>Galo vira sobre o Timão, mantém sonho e dá alegria a Flu e Cruzeiro</b> <br><br> Triunfo do Atlético-MG impede o Corinthians de reassumir a liderança, e a equipe de Belo Horizonte ganha mais fôlego na briga para sair do Z-4</p>

7. Correto! A internet agradece. <h1>Galo vira sobre o Timão, mantém sonho e dá alegria a Flu e Cruzeiro</h1> <p>Triunfo do Atlético-MG impede o Corinthians de reassumir a liderança, e a equipe de Belo Horizonte ganha mais fôlego na briga para sair do Z-4</p>

8. WEB STANDARDS Um pouco de história

9. 2001 - 2006 CSS 2.1 Apresentação XHTML Estrutura/Conteúdo

10. 2004 - 2007 WHAT WGWeb Hypertext Application Technology Working Group

11. 2007 CSS 3 Apresentação HTML 5 Estrutura/Conteúdo

12. O que a Microsoft diz sobre o HTML5? “In a nutshell, we love HTML5, we love it so much we want it to actually work” Dean HachamovitchGeneral Manager for Internet Explorer, Microsofthttp://www.microsoft.com/presspass/exec/Hachamovitch

13. IE6 R.I.P. Photos courtesy of Aten Design Group.

14. Novos elementos HTML 5

15. HTML 5 – Elementos de estrutura Elementos estruturais <header> <footer> <nav> <aside> <!-- Similar a barra lateral --> <article> <!-- Pode ser usado em um post de blog --> <section> <!–- Agrupar conteúdos relacionados --> Outros Elementos <audio> <video> <svg> <canvas>

16. HTML 5 <video> Suporte ao elemento <video> do HTML 5 Padrões de indústria MPEG-4/H.264 Vídeopodesercombinado com qualquercoisanapágina Conteúdo HTML, imagens, gráficos SVG Atributos src, autoplay, controls, preload, loop,height & width <video src="video.wmv" id="videoTag" width="640px" height="360px"> <!–- Só é exibidoquando o navegadornãosuportavídeo --> <!–- Vocêpodetambémembedar um vídeoem Silverlight --> </video>

17. HTML 5 <audio> Suporteao elemento<audio> do HTML 5 Industry-standard MP3 and AAC audio Fully scriptable via the DOM Atributos src, autoplay, controls, preload <audio src="audio.mp3" id="audioTag" autoplay controls> <!–- Só é exibidoquando o navegadornãosuportaáudio--> <!–- Vocêpodetambémembedar um áudioem Silverlight –-> </video>

18. HTML 5 – áudio e vídeo Prós Sembarreiras– nãonecessita de plug-in Cadavezmaispopulares Ferramentaspara encoding grátis Contras Nãosuporta DRM Qual codec usar? Não é fácilgerenciar a largura de banda

19. Novos controles de formulário HTML 5

20. HTML 5 – Elementos de Formulário <input type='range' min='0' max='50' value='0' /> <input results='10' type='search' /> <input type='text' placeholder='Searchinside' /> <input type='color' /> <input type='number' /> <input type='email' /> <input type='url' /> <input type='tel' /> <input type='date' /> <input type='month' /> <input type='week' /> <input type='time' />

21. O que já se foi?Elementos obsoletos HTML 5

22. HTML 5 – Elementos obsoletos <applet> <!–- Use a tag <embed> --> <big> <!–- Use CSS, pois denota estilo --> <blink> <center> <font> <acronym> <basefont> <dir> <s><strike> <u> <frame><frameset> <noframes> <tt>

23. Estrutura do documento HTML 5

24. HTML 5 doctype O doctype está bem mais simples de ser usado <!DOCTYPE html> <html> vs. <htmlxmlns="http://www.w3.org/1999/xhtml">

25. Já está pronto?! Quando vou poder usar o html 5?

27. O que a W3C diz... Prática e uso em partes Implementação em módulos Mas não recomenda uso em produção http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041 Atualização completa Calendário previsto para 2010 Recomendação para 2011 Implementação em vários browsers http://ishtml5readyyet.com

28. Internet Explorer 9 Nova enginejavaScript (chakra) Melhorias no DOM, HTML e CSS parsing Rápido: gráficos acelerados pela GPU Limpo: Nova interface Confiável: mais seguro e mais confiável Interoperável: HTML5 & W3C

29. Como utilizar a mesmamarcação? 9 29

30. Próximospassos Baixe o Internet Explorer 9 Beta 1 www.internetexplorer9.com.br Visite o developer center http://msdn.microsoft.com/pt-br/ie/default.aspx

31. Recomendações Especificação e documentação toda online. Estude e pratique na medida do possível. Evolução gradativa, acompanhe. Fique atento ao seu negócio e aos objetivos do usuário. Analise antes de aplicar. Uma dose saudável de senso crítico Ref: http://spkr8.com/t/1250

32. HTML 5 x Silverlight x Flash Amigo ou inimigo?

33. Links HTML 5 HTML 5 Doctor: http://html5doctor.com HTML 5 Demos: http://html5demos.com HTML 5 Spec http://dev.w3.org/html5/spec/Overview.html Conteúdo do curso HTML5 W3C http://w3c.br/cursos/html5/conteudo Adaptação para browsers antigos http://www.modernizr.com

34. Links WHATWG http://www.whatwg.org/specs/web-apps/current-work/ W3C http://dev.w3.org/html5/spec/Overview.html Blog: www.rodrigokono.net Participe da comunidade de GO: www.devgoias.net

35. Treinamentos e Formaçãoem TI HandsOnLab - Professional – Official – Open Training Boas práticas , dicas, experiência, etc ASP.NET 4, C# 4, LINQ, Windows Azure, jQuery + Web Standards, Silverlight, SQL... Windows Server 2008 R2, Sharepoint 2010, Exchange 2010, BPOS... www.pensou.net

36. Rodrigo Kono kono@devgoias.net www.rodrigokono.net www.devgoias.net © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.