Visão Geral do HTML5 e do Internet Explorer 9
-
Upload
rodrigo-kono -
Category
Technology
-
view
1.653 -
download
0
Transcript of Visão Geral do HTML5 e do Internet Explorer 9
![Page 1: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/1.jpg)
Visão geral do HTML 5 e Internet Explorer 9Rodrigo KonoMicrosoft MVPMCP, MCTS, MCPD, MCTwww.rodrigokono.net
![Page 2: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/2.jpg)
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: @rodrigokonowww.rodrigokono.net Treinamento e formação em TI
![Page 3: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/3.jpg)
@rodrigokono
![Page 4: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/4.jpg)
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
![Page 5: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/5.jpg)
eu sei HTML......e eu sei usar desde pequeno!
![Page 6: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/6.jpg)
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>
![Page 7: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/7.jpg)
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>
![Page 8: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/8.jpg)
WEB STANDARDSUm pouco de história
![Page 9: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/9.jpg)
2001 - 2006
XHTML Estrutura/Conteúd
o
CSS 2.1Apresentação
![Page 10: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/10.jpg)
2004 - 2007
WHAT WGWeb Hypertext ApplicationTechnology Working Group
![Page 11: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/11.jpg)
2007
HTML 5 Estrutura/Conteúd
o
CSS 3Apresentaçã
o
![Page 12: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/12.jpg)
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/Hachamovitc
h
![Page 13: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/13.jpg)
Photos courtesy of Aten Design Group.
IE6 R.I.P.
![Page 14: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/14.jpg)
Novos elementosHTML 5
![Page 15: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/15.jpg)
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>
![Page 16: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/16.jpg)
HTML 5 <video>• Suporte ao elemento <video> do
HTML 5– Padrões de indústria MPEG-4/H.264– Vídeo pode ser combinado com
qualquer coisa na pá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ó é exibido quando o navegador não suporta vídeo --> <!–- Você pode também embedar um vídeo em Silverlight --></video>
![Page 17: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/17.jpg)
HTML 5 <audio>
• Suporte ao 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ó é exibido quando o navegador não suporta áudio --> <!–- Você pode também embedar um áudio em Silverlight –-></video>
![Page 18: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/18.jpg)
HTML 5 – áudio e vídeo
• Prós– Sem barreiras – não necessita de plug-in– Cada vez mais populares– Ferramentas para encoding grátis
• Contras– Não suporta DRM– Qual codec usar? – Não é fácil gerenciar a largura de banda
![Page 19: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/19.jpg)
Novos controles de formulário
HTML 5
![Page 20: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/20.jpg)
HTML 5 – Elementos de Formulário<input type='range' min='0' max='50' value='0' /> <input results='10' type='search' /> <input type='text' placeholder='Search inside' /> <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' />
![Page 21: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/21.jpg)
O que já se foi?Elementos obsoletos
HTML 5
![Page 22: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/22.jpg)
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>
![Page 23: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/23.jpg)
Estrutura do documento
HTML 5
![Page 24: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/24.jpg)
HTML 5 doctype
O doctype está bem mais simples de ser usado
<!DOCTYPE html>
<html>
vs. <html
xmlns="http://www.w3.org/1999/xhtml">
![Page 25: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/25.jpg)
Já está pronto?!
Quando vou poder usar o html 5?
![Page 26: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/26.jpg)
![Page 27: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/27.jpg)
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 browsershttp://ishtml5readyyet.com
![Page 28: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/28.jpg)
Internet Explorer 9
• Nova engine javaScript (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
![Page 29: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/29.jpg)
Como utilizar a mesma marcação?
29
9
![Page 30: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/30.jpg)
Próximos passos
Visite o developer centerhttp://msdn.microsoft.com/pt-br/ie/
default.aspx
Baixe o Internet Explorer 9 Beta 1www.internetexplorer9.com.br
![Page 31: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/31.jpg)
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
![Page 32: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/32.jpg)
HTML 5 x Silverlight x Flash
Amigo ou inimigo?
![Page 33: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/33.jpg)
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
![Page 34: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/34.jpg)
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
![Page 35: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/35.jpg)
Treinamentos e Formação em TI
• Hands On Lab - 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
![Page 36: Visão Geral do HTML5 e do Internet Explorer 9](https://reader038.fdocument.pub/reader038/viewer/2022103018/55878dd3d8b42a405d8b45f5/html5/thumbnails/36.jpg)
© 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.
www.devgoias.net
Rodrigo [email protected] www.rodrigokono.net