O documento fornece um resumo sobre HTML5. Apresenta o histórico da evolução da linguagem HTML ao longo dos anos e descreve as principais novidades trazidas pela especificação HTML5, como novos elementos semânticos, formulários aprimorados, integração de mídia e APIs para desenvolvimento de aplicações web. O documento também discute questões de compatibilidade entre navegadores e fornece links para recursos adicionais sobre HTML5.

1. HTML 5
Senac Consolação | Abril de 2012

2. flatschart.com

3. HTML5
A nova fronteira no projeto de aplicações WEB
flatschart.com

4. Fábio Flatschart
Gerente de Marketing e Inovação da Soyuz Sistemas
No mercado WEB desde 1997, é consultor de
desenvolvimento e implantação de soluções e ferramentas
da Adobe Systems Brasil.
Autor e escritor técnico da Editora Brasport e da
Editora SENAC/SP
No SENAC /SP atuou no atendimento corporativo e
intermediação de parcerias com grandes empresas como
Adobe, Apple, Editora ABRIL, Microsoft, UOL e W3C.
Certificado em HTML5 pelo W3C escritório Brasil.
FGV MBA Marketing
USJT Criação Visual e Multimídia
USP Escola de Comunicação e Artes
flatschart.com

5. Conexões
@fabioflat
slideshare.net/fabioflat
delicio.us/fabioflat
linkedin.com/in/fabioflat
flatschart.com

6. O HTML5 não é uma ruptura, é a continuidade e evolução do modelo
concebido por Tim Berners-Lee nos anos 1990
INTRO
flatschart.com

7. WEB
Arquitetura cliente < > servidor
Modelo de localização universal
URL - Uniform Resource Locator
Protocolo de comunicação
HTTP - Hypertext Transfer Protocol
Linguagem de marcação
HTML - HyperText Markup Language
Documento estruturado na forma de hipertexto
Browser (navegador) como recurso de visualização do documento pelo cliente
flatschart.com

8. Client Side
A organização do desenvolvimento de projetos web em camadas independentes
confere flexibilidade e modularidade ao fluxo de trabalho para web integrando
equipes multidisciplinares de planejamento, produção, arquitetura da informação,
design e programação.
Marcação HTML
Apresentação CSS
Comportamento JavaScript
flatschart.com

9. HTML
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless
2005 AJAX
2009 HTML 5
flatschart.com

10. HTML5
O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a uma
recomendação em 2012.
Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dos
navegadores, desenvolvedores, designers e usuários não necessitam aguardar a
especificação final da linguagem para colocá-la em uso.
Esta nova especificação introduz novos elementos (tags) orientados para auxiliar no
desenvolvimento web baseado em padrões compatíveis com todos dispositivos, na
marcação semântica do código, na manipulação de elementos do CSS e do JavaScript
através da definição de APIs da arquitetura Web.
World Wide Web Consortium - Escritório Brasil
http://www.w3c.br
flatschart.com

11. APIs
O HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada de
desenvolvimento do lado do usuário (client side) através de aplicações que permitem
geolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop),
desenhar bitmaps (canvas), criar aplicações offline e outras.
Marcação HTML
Apresentação
Comportamento
APIs CSS
JavaScript
flatschart.com

12. APIs
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por
Tim Berners-Lee nos anos 1990
HTML5
HTML CSS APIs + JS
flatschart.com

13. Compatibilidade
Renderização dos browsers
Motor Browsers
Gecko Firefox, SeaMonkey, Camino, K-Meleon
Presto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSi
Trident Internet Explorer
WebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR,
Android, Palm webOS, Symbian
A cada nova versão mais recursos são suportados e a concorrência entre os
fabricantes é grande de maneira que quando um fabricante implementa uma
funcionalidade é quase sempre seguido de perto pelos demais.
flatschart.com

14. Compatibilidade
http://html5test.com
Testa e avalia a compatibilidade do seu browser com os elementos específicos do
HTML5
http://html5readiness.com
Mostra como o suporte ao HTML5 evoluiu de 2008 até hoje
http://caniuse.com
Exibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outras
tecnologias web
flatschart.com

15. Compatibilidade
<head>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos.
flatschart.com

16. front end developer
flatschart.com

17. front end developer
flatschart.com

18. A simplicidade é o último grau de sofisticação
NOVIDADES
flatschart.com

19. Doctype
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
<!DOCTYPE html>
flatschart.com

20. Charset
HTML 4.01
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
XHTML 1.0
<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
HTML5
<meta charset="utf-8">
flatschart.com

21. Estrutura básica
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Estrutura básica</title>
</head>
<body>
</body>
</html>
flatschart.com

22. Saber o significado das palavras é essencial para o entendimento!
SEMÂNTICA
flatschart.com

23. Elementos estruturais
Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas
seções estuturais do documento um elemento próprio, nativo da linguagem.
HTML4 / XHTML HTML5
<body> <body>
<div id="topo"></div> <header></header>
<div id="navegacao"></div> <nav></nav>
<div id="principal"></div> <article></article>
<div id="lateral"></div> <aside></aside>
<div id="rodape"></div> <footer></footer>
</body> </body>
flatschart.com

24. Formulários
<input type="email">
<input type="url">
<input type="number">
<input type="search">
<input type="range">
<input type="date">
<input type="week">
http://bit.ly/nrGXhw
flatschart.com

25. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.
MULTIMÍDIA
flatschart.com

26. Canvas
O elemento canvas,novidade do HTML 5, permite que a informação para a
construção de imagens baseadas em pixels seja inserida diretamente no código do
documento.
O elemento canvas apenas delimita em que local da tela isto acontece. O processo
de desenho é controlado por uma API específica para este elemento que interage com
JavaScript.
<canvas id="figura" width="300" height="300"></canvas>
<button onClick="desenhar()">Desenhar</button>
<script>
function desenhar()
{ var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF‘;
context.fillRect(50,50,200, 200); }
</script>
http://bit.ly/nK6JCx
flatschart.com

27. SVG
<svg >
<rect width="90" height="60" x="10" y="100"
fill="#00FFCC" stroke="#FF0000" stroke-width="3" >
</svg>
No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutido
diretamente embutido no documento com o uso do elemento img
<img src="imagens/rabisco.svg" alt="Rabisco em SVG">
canvas bitmap
svg vetor
http://bit.ly/rqqZuK
flatschart.com

28. Áudio
<audio src="mozart_trompa.mp3" controls></audio>
Opção para vários formatos e opção de download do arquivo, visível quando o
browser do usuário não oferecer suporte para nenhum dos formatos indicados ou
para o elemento audio.
<audio controls>
<source src="mozart_trompa.aac"/>
<source src="mozart_trompa.ogg"/>
<source src="mozart_trompa.mp3"/>
<p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p>
</audio>
http://bit.ly/nDeClI
flatschart.com

29. Vídeo
A compatibilidade dos browsers ainda é problemática, mas existem várias
maneiras de contornar esta questão como, por exemplo, usar formatos
alternativos, indicar um link para download e incluir o uso do Flash Player para a
reprodução do vídeo.
<video height="272" width="360" controls preload poster=“poster_video.jpg">
<source src="videos/video.m4v"/>
<source src="videos/video.ogv"/>
<source src="videos/video.webm"/>
<p><a href="videos/video.m4v">Baixe o vídeo</a></p></video>
http://bit.ly/oKtdlT
Container Vídeo Áudio Suporte
MPEG4 H.264 AAC Chrome, Safari, IE9
OGG Theora Vorbis Chrome, Firefox, Opera
WebM VP8 Vorbis Chrome , Firefox, IE9, Opera
flatschart.com

30. O HTML não é uma linguagem de programação
APIS
flatschart.com

31. APIs
“O HTML não é uma linguagem de programação”
Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que o
HTML é uma linguagem de marcação e de que sozinho ele não consegue formatar,
manipular ou criar conteúdo.
APIs Demo
Web Storage http://slides.html5rocks.com/#web-storage
Drag & Drop http://slides.html5rocks.com/#drag-and-drop
Desktop Drag-In http://slides.html5rocks.com/#drag-in
Desktop Drag-Out http://slides.html5rocks.com/#drag-out
Geolocation http://slides.html5rocks.com/#geolocation
Device Orientation http://slides.html5rocks.com/#slide-orientation
Speech Input http://slides.html5rocks.com/#speech-input

32. O estilo está sob as palavras como dentro delas. É igualmente a alma e a
carne de uma obra
ESTILO
flatschart.com

33. CSS3
@font-face
Efeitos de texto
Colunas
Cor e transparência
Bordas
Transições
Animações
Media queries
http://bit.ly/p4vtpS
http://slides.html5rocks.com/#css3-title
flatschart.com

34. Mobile não é uma tecnologia é um estilo de vida
WEB APPS
flatschart.com

35. flatschart.com

36. Aplicativos Mobile HTML5
Playboy
Financial Times
Linkedin
Zeewe
flatschart.com

37. Mudança do fluxo de traballho
CASES
flatschart.com

38. HTML5 APPs
Soyuz Sistemas
Migração do fluxo de trabalho para produção
de apresentações em HTML5 para Sistema
UNO Internacional do Grupo Santillana /
Editora Moderna
Envolvimento e treinamento da equipe
Designers | Developers
Do PSD ao CODE com semântica
Crossbrowser
Permite distribuição para iOS e Android
Permite empacotamento Adobe AIR (Webkit)
Base para produção de futura ferramenta
colaborativa
flatschart.com

39. WEB GL e Visualização de dados
Dashboard em tempo real
mostrando a relação entre latitude,
longitude e altura dos municípios
brasileiros.
Baseado em dados abertos, esta é
uma experiência de visualização de
dados utilizando Ajax e Processing.js
como mecanismo para o gráfico em
WebGL.
http://labs.soyuz.com.br/dash/
flatschart.com

40. Mitos
• HTML5 ainda não pode ser usado comercialmente
• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas
• Objetivo do HTML5 é matar o Flash
• HTML5 não faz diferença pra SEO/SEM
• HTML5 tem falhas graves de segurança
flatschart.com

41. OPEN WEB PLATFORM
flatschart.com

42. Você é o que você compartilha 
LINKS E REFERÊNCIAS
flatschart.com

43. Links e Referências
Soyuz Sistemas
http://www.soyuz.com.br/
Livro HTML5 – Embarque Imediato
http://flatschart.com/html5/
HTML5 Doctor, helping you implement HTML5 today
http://html5doctor.com/
Adobe HTML5 and CSS3 development
http://www.adobe.com/devnet/html5.html
DIVE INTO HTML5
http://diveintohtml5.org/
HTML5 and CSS3 - Adobe - The Expressive Web - Beta
http://beta.theexpressiveweb.com/
HTML5: Edition for Web Authors
http://dev.w3.org/html5/spec-author-view/
Adobe Dreamweaver CS5.5
http://www.adobe.com/br/products/dreamweaver.html
W3C Brasil
http://www.w3c.br
Adobe Labs
http://labs.adobe.com/
Curso de HTML5 do W3C Brasil
http://www.w3c.br/Cursos/CursoHTML5
Stickman
http://www.drawastickman.com/
20 Lições - Google flatschart.com
http://www.20thingsilearned.com/pt-BR

44. Fica a dica 
PUBLICAÇÕES
flatschart.com

45. Publicações
flatschart.com

46. Novidades!
http://www.facebook.com/Seofish
flatschart.com

47. Muito obrigado !
@fabioflat
fabioflat@gmail.com
flatschart.com
flatschart.com