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 9Rodrigo KonoMicrosoft MVPMCP, MCTS, MCPD, MCTwww.rodrigokono.net

2. Rodrigo KonoExperiência de 10 anos em webMVP da MicrosoftMCP – MCTS – MCPD – MCTFundador do grupo de usuários DevGoiás .NET7 anos de comunidade .NET Mais de 11.200 pessoas nesse tempoSecretaria da Fazenda do Estado de GOBacharel em Ciência da ComputaçãoPensou.NET Treinamentos – www.pensou.netTwitter: @rodrigokonowww.rodrigokono.net Treinamento e formação em TI

3. @rodrigokono

4. AgendaVocê sabe HTML?Web Standards e um pouco de históriaHTML 5Novos elementos de estrutura<video><audio>novos controles de formulárioO que já se foiEstrutura de documentoQuando podemos usar e o que W3C recomendaNovidades do Internet Explorer 9Recomendaçõ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 STANDARDSUm pouco de história

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

10. 2004 - 2007WHAT WGWeb Hypertext ApplicationTechnology Working Group

11. 2007CSS 3ApresentaçãoHTML 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 elementosHTML 5

15. HTML 5 – Elementos de estruturaElementos 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 5Padrões de indústria MPEG-4/H.264Vídeopodesercombinado com qualquercoisanapáginaConteúdo HTML, imagens, gráficos SVGAtributossrc, 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 5Industry-standard MP3 and AAC audioFully scriptable via the DOMAtributossrc, 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ídeoPrósSembarreiras– nãonecessita de plug-inCadavezmaispopularesFerramentaspara encoding grátisContrasNãosuporta DRMQual codec usar? Não é fácilgerenciar a largura de banda

19. Novos controles de formulárioHTML 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 obsoletosHTML 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 documentoHTML 5

24. HTML 5 doctypeO 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 partesImplementação em módulosMas não recomenda uso em produção http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041Atualização completaCalendário previsto para 2010Recomendação para 2011Implementação em vários browsershttp://ishtml5readyyet.com

28. Internet Explorer 9Nova enginejavaScript (chakra)Melhorias no DOM, HTML e CSS parsingRápido: gráficos acelerados pela GPULimpo: Nova interfaceConfiável: mais seguro e mais confiávelInteroperável: HTML5 & W3C

29. Como utilizar a mesmamarcação?929

30. PróximospassosBaixe o Internet Explorer 9 Beta 1www.internetexplorer9.com.brVisite o developer centerhttp://msdn.microsoft.com/pt-br/ie/default.aspx

31. RecomendaçõesEspecificaçã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íticoRef: http://spkr8.com/t/1250

32. HTML 5 x Silverlight x FlashAmigo ou inimigo?

33. Links HTML 5HTML 5 Doctor: http://html5doctor.comHTML 5 Demos: http://html5demos.comHTML 5 Spechttp://dev.w3.org/html5/spec/Overview.htmlConteúdo do curso HTML5 W3Chttp://w3c.br/cursos/html5/conteudoAdaptação para browsers antigoshttp://www.modernizr.com

34. LinksWHATWGhttp://www.whatwg.org/specs/web-apps/current-work/W3Chttp://dev.w3.org/html5/spec/Overview.htmlBlog: www.rodrigokono.netParticipe da comunidade de GO: www.devgoias.net

35. Treinamentos e Formaçãoem TIHandsOnLab - Professional – Official – Open TrainingBoas práticas , dicas, experiência, etcASP.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 Konokono@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.