HTML 5 A evolução do HTML 4 para o HTML 5

VISÃO GERAL

TIMELINE HTML

Markup- Visão geral do HTML5- Análise do suporte atual pelos navegadores e estratégias de uso - Estrutura básica, DOCTYPE e charsets- Modelos de conteúdo- Novos elementos e atributos- Elementos modificados e ausentes

MARKUP

HYPERTEXTO

MARKUP

O começo e a interoperabilidade

MARKUP

MARKUP

- WHAT Working Group- O HTML5 e suas mudanças

MARKUPO HTML5 e suas mudanças

O Que e o HTML 5?

MARKUP

SAIA DO ANTIGO CLUBE

ESQUECA OS PLUGINS

A morte eminente- Ou foram- Ou estão- Ou serão

TESTE NOVOS SUPER PODERES

Entre para a Liga

Comparati vo EstruturalHTML 4 X HTML 5

Comparati vo EstruturalHTML 4 X HTML 5

MARKUP

Análise do suporte e estratégias de uso nos navegadores

- O desenvolvimento modular- Motores de Renderização- Compatibilidade com HTML5

MARKUP

O Desenvolvimento modular

MARKUPNavegadores e Seus Motores

MARKUPMotor de Renderização WEBKIT

Navegadores - Safari - Google - Chrome

MARKUPMotor de Renderização GECK

Navegadores - Firefox - Mozilla - Camino

MARKUPMotor de Renderização TRIDENT

Navegadores - Internet Explorer 4 a 9

MARKUPMotor de Renderização PRESTO

Navegadores - Opera 7 ao 10

MARKUPCompatibilidade com HTML 5

MARKUPTécnicas de Detecção com Modernizr

JavaScript utilizando Modernizr com método de GêoLocalização

FORMULÁRIOS

Novos tipos de input

• tel • search • url• email• datetime• date• month• week• time

• range• color• number

FORMULÁRIOS• Email – com atributo multiple

Cc <label>: <input type=email multiple name=cc> </ label>

FORMULÁRIOS• Date Time

FORMULÁRIOS

Validação de formulários

• O novo atributo pattern <input name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" />

• Novalidate• Formvalidate• Oninput• setCustomValidity

ÁUDIO E VÍDEOVÍDEO <video src=“teste.mp4" width="400" height="300" />

Controle embutido (NATIVO) de conteúdo multimídia

HTML 5 e a morte do Flash (Carta de Steve Jobs)

A guerra dos Codecs

ÁUDIO E VÍDEOO QUE É CODEC?

EXEMPLO:Infelizmente não poderei estar no horário combinado porque

apareceu uma situação de emergência para resolver. Eu te ligo quando chegar em casa.

CODIFICADO nflzmnt Ñ Pdr stR N Hrr Cmbnd Pq prc 1 Stçõ D mrgnc P RslvR. T

Lg Qd ChgR m Cs

ÁUDIO E VÍDEOPRINCIPAIS CODECS DE VÍDEO

H.264

Ogg Theora

WebM

ÁUDIO E VÍDEOVÍDEO

TAG

<video src="u.ogv" width="400" height="300" />

ATRIBUTOS

Poster, Preload, Autoplay, Mediagroup, Loop, Muted, Controls, Width, Height.

ÁUDIO E VÍDEOÁUDIO

TAG

<audio src="mus.oga" controls="true" autoplay="true" />

EXEMPLO

<audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /></audio>

ÁUDIO E VÍDEOPRINCIPAIS CODECS DE ÁUDIO

WAV

MP3

Ogg Vorbis

A nova geração de aplicações web II

A nova geração de aplicações web II

MICRODATA

A nova geração de aplicações web II

MICRODATA

Exemplo 2

A nova geração de aplicações web II

A nova geração de aplicações web II

HISTÓRICO DE SESSÃO

API STORAGE

A nova geração de aplicações web II

APLICAÇÕES OFFLINE

Exemplo 1

A nova geração de aplicações web II

APLICAÇÕES OFFLINE

Exemplo 2

A nova geração de aplicações web II

UNDOMANAGER