visão geral do html5 e do internet explorer 9

Visão geral do HTML 5 e Internet Explorer 9Rodrigo KonoMicrosoft MVPMCP, MCTS, MCPD, MCTwww.rodrigokono.net

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

@rodrigokono

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

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

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>

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>

WEB STANDARDSUm pouco de história

2001 - 2006

XHTML Estrutura/Conteúd

o

CSS 2.1Apresentação

2004 - 2007

WHAT WGWeb Hypertext ApplicationTechnology Working Group

2007

HTML 5 Estrutura/Conteúd

o

CSS 3Apresentaçã

o

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

Photos courtesy of Aten Design Group.

IE6 R.I.P.

Novos elementosHTML 5

HTML 5 – Elementos de estruturaElementos estruturais

<header><footer><nav><aside> <article> <section> <!–- Agrupar conteúdos relacionados -->

Outros Elementos<audio><video><svg><canvas>

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>

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>

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

Novos controles de formulário

HTML 5

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' />

O que já se foi?Elementos obsoletos

HTML 5

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>

Estrutura do documento

HTML 5

HTML 5 doctype

O doctype está bem mais simples de ser usado

<!DOCTYPE html>

<html>

vs. <html

xmlns="http://www.w3.org/1999/xhtml">

Já está pronto?!

Quando vou poder usar o html 5?

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

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

Como utilizar a mesma marcação?

29

9

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

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

HTML 5 x Silverlight x Flash

Amigo ou inimigo?

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

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

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

© 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