HTML5 Novidades

2
HTML5 – O que tem de novo?
Rafael Almeida

3
O que é HTML5?
O HTML5 é a nova versão do HTML4.
W3C focava suas atenções para a criação do XHTML 2.0;
Já a WHATWG trabalhava em uma versão do HTML que trazia mais
flexibilidade para a produção de websites e sistemas baseados na web.
W3C (World Wide Web Consortium)
WHATWG (Web Hypertext Application Technology Working Group)

4
O que é HTML5?
Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a
CSS e ao Javascript para fazerem seu trabalho da melhor maneira
possível permitindo por meio de suas APIs, a manipulação das
características destes elementos, de forma que o website ou a aplicação
continue leve e funcional.

5
O que é HTML5?
ANTES
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6
O que é HTML5?
AGORA
<!DOCTYPE html>

7
O que é HTML5?
ANTES
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

8
O que é HTML5?
AGORA
<meta charset="UTF-8">

14
O que mudou no mercado?
Fluxo de desenvolvimento
Geralmente o fluxo padrão de desenvolvimento é linear, principalmente
em equipes pequenas (agencias, produtoras, etc).
Com os padrões web, esse cenário muda para fluxo paralelo.

15
designer back-endprojeto

16
designer back-endfront-end

17
wireframe
prototipo
design
wireframe
prototipo
front-end
wireframe
prototipo
back-end

18
wireframe
prototipo
design front-end back-end

19
O que tem de novo no HTML5?

20
O que mudou com HTML5?
➢ Novos elementos;
➢ Novos atributos;
➢ Total suporte a CSS3;
➢ Áudio e Vídeo;
➢ Gráficos 2D e 3D;
➢ Local Storage;
➢ Local SQL Database;
➢ Aplicações web;
➢ Muito mais...

21
Elementos Semânticos
Novos elementos para cabeçalhos, rodapés, menus, seções, artigos e
outros.
Também tivemos uma melhoria significativa em elementos de
formulários como novos atributos, inputs e validações automáticas.

22
Elementos Semânticos

23
Gráficos 2D e 3D
Podemos desenhar gráficos ou objetos mais facilmente;
➢ Canvas;
➢ SVG;
➢ CSS3 (2D/3D)

24
Multimédia
Podemos assistir vídeos, ouvir músicas mais fácil do que nunca.
➢ Audio API
➢ Video API

25
Aplicações com HTML5
Hoje conseguimos fazer grandes aplicações mais facilmente do que
nunca com HTML5;
➢ Local data storage;
➢ Local file access;
➢ Local SQL database;
➢ Application cache;
➢ Javascript workers;
➢ XHTMLHttpRequest 2;

26
Além disso ainda podemos fazer muito mais como aplicações em tempo
real, acessar hardware dos dispositivos (Desktop / Mobile) e fazer
aplicações mais performáticas.

27
O que eu preciso saber antes?

28
Eis que surge a pergunta:
“O que eu preciso saber antes de começar a usar HTML5?”

29
HTML + CSS + JavaScript
Agora depende de até onde você pretende evoluir.

30
Entenda o princípio das coisas
A base continua sendo HTML e CSS, então não precisamos pensar muito
e ver que HTML5 e CSS3 é o primeiro passo.

31
Aprenda JavaScript
JavaScript é uma linguagem de programação de fácil aprendizado e
muito poderosa por sinal. Teste coisas novas, imagine como certa
funcionalidade acontece e entenda que JavaScript não é jQuery.

32
Estude aquilo que você usa
A tecnologia muda constantemente, se saiu algo novo por que não
aprender? Design Responsivo, novas ferramentas, atualizações...

33
Sim, você vai ter que aturar o IE
Mesmo com novas versões de navegadores, o mercado ainda utiliza
versões que ainda não dão suporte a certas funcionalidades do HTML5.

35
Mas e o Google?
Utilizando HTML5 da forma certa, você pode ter certeza que além do seu
código ficar mais organizado, o valor semântico da informação vai fazer
mais sentido para os motores de busca.
Assim você aumenta a probabilidade de seu site ficar em uma melhor
posição e isso também faz você ser valorizado.

37
E tem mais...
Saber desenvolver aplicações com HTML5 pode te levar a outro nível.

38
E tem mais...
O mercado mobile está crescendo rápido em todo o mundo e podemos
desenvolver aplicações móveis com HTML5.

HTML5 Novidades

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to HTML5 Novidades

Similar to HTML5 Novidades (20)

More from Diego Santos

More from Diego Santos (14)

HTML5 Novidades