36

HTML5 – O que tem de novo?

Embed Size (px)

DESCRIPTION

Vamos analisar o que mudou nesta nova versão, e o que você precisa saber sobre desenvolvimento Front End avançado com HTML5.

Citation preview

2

HTML5 – O que tem de novo?

Rafael Almeida

3

O que é HTML5?

O HTML5 é a nova versão do HTML4.

W3C focava suas atencoes 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 versoes anteriores, o HTML5 fornece ferramentas para a

CSS e ao Javascript para fazerem seu trabalho da melhor maneira

possivel permitindo por meio de suas APIs, a manipulacão das

caracteristicas 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">

12

O que é HTML5?

13

O que mudou no mercado?

14

O que mudou no mercado?

Fluxo de desenvolvimentoGeralmente 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

O que mudou no mercado?

designer back-endprojeto

16

O que mudou no mercado?

designer back-endfront-end

17

O que mudou no mercado?

wireframeprototipo

design

wireframeprototipo

front-end

wireframeprototipo

back-end

18

O que mudou no mercado?

wireframeprototipo

design front-end back-end

19

O que tem de novo no HTML5?

20

O que tem de novo no HTML5?

O que mudou com HTML5?

➢ Novos elementos;

➢ Novos atributos;

➢ Total suporte a CSS3;

➢ Áudio e Video;

➢ Gráficos 2D e 3D;

➢ Local Storage;

➢ Local SQL Database;

➢ Aplicacoes web;

➢ Muito mais...

21

O que tem de novo no HTML5?

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

O que tem de novo no HTML5?

Elementos Semânticos

23

O que tem de novo no HTML5?

Gráficos 2D e 3D

Podemos desenhar gráficos ou objetos mais facilmente;

➢ Canvas;

➢ SVG;

➢ CSS3 (2D/3D)

24

O que tem de novo no HTML5?

Multimédia

Podemos assistir videos, ouvir músicas mais fácil do que nunca.

➢ Audio API

➢ Video API

25

O que tem de novo no HTML5?

Aplicações com HTML5

Hoje conseguimos fazer grandes aplicacoes mais facilmente do que

nunca com HTML5;

➢ Local data storage;

➢ Local file access;

➢ Local SQL database;

➢ Application cache;

➢ Javascript workers;

➢ XHTMLHttpRequest 2;

26

O que tem de novo no HTML5?

Além disso ainda podemos fazer muito mais como aplicacoes em tempo

real, acessar hardware dos dispositivos (Desktop / Mobile) e fazer

aplicacoes mais performáticas.

27

O que eu preciso saber antes?

28

O que eu preciso saber antes?

Eis que surge a pergunta:“O que eu preciso saber antes de comecar a usar HTML5?”

29

O que eu preciso saber antes?

HTML + CSS + JavaScriptAgora depende de até onde você pretende evoluir.

30

O que eu preciso saber antes?

Entenda o princípio das coisasA base continua sendo HTML e CSS, então não precisamos pensar muito

e ver que HTML5 e CSS3 é o primeiro passo.

31

O que eu preciso saber antes?

Aprenda JavaScriptJavaScript é 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

O que eu preciso saber antes?

Estude aquilo que você usaA tecnologia muda constantemente, se saiu algo novo por que não

aprender? Design Responsivo, novas ferramentas, atualizações...

33

O que eu preciso saber antes?

Sim, você vai ter que aturar o IEMesmo com novas versões de navegadores, o mercado ainda utiliza

versoes que ainda não dão suporte a certas funcionalidades do HTML5.

34

Mas e o Google?

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.

36

E tem mais...

37

E tem mais...

Saber desenvolver aplicacoes com HTML5 pode te levar a outro nivel.

38

E tem mais...

O mercado mobile está crescendo rápido em todo o mundo e podemos

desenvolver aplicacoes móveis com HTML5.