visão geral do html5 e do internet explorer 9
Post on 22-Jun-2015
1.653 Views
Preview:
TRANSCRIPT
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> <!-- Similar a barra lateral --><article> <!-- Pode ser usado em um post de blog --><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 Konokono@devgoias.net www.rodrigokono.net
top related