HTML 5 e CSS 3 - Desenvolver ou não? por Luiz Tiago Oliveira
HTML 5 A evolução do HTML 4 para o HTML 5
-
Upload
ondazul -
Category
Technology
-
view
5.751 -
download
4
description
Transcript of HTML 5 A evolução do HTML 4 para o HTML 5
![Page 1: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/1.jpg)
![Page 2: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/2.jpg)
VISÃO GERAL
![Page 3: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/3.jpg)
TIMELINE HTML
![Page 4: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/4.jpg)
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
![Page 5: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/5.jpg)
HYPERTEXTO
MARKUP
![Page 6: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/6.jpg)
O começo e a interoperabilidade
MARKUP
![Page 7: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/7.jpg)
MARKUP
- WHAT Working Group- O HTML5 e suas mudanças
![Page 8: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/8.jpg)
MARKUPO HTML5 e suas mudanças
![Page 9: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/9.jpg)
O Que e o HTML 5?
MARKUP
![Page 10: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/10.jpg)
SAIA DO ANTIGO CLUBE
![Page 11: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/11.jpg)
ESQUECA OS PLUGINS
A morte eminente- Ou foram- Ou estão- Ou serão
![Page 12: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/12.jpg)
TESTE NOVOS SUPER PODERES
Entre para a Liga
![Page 13: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/13.jpg)
Comparati vo EstruturalHTML 4 X HTML 5
![Page 14: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/14.jpg)
Comparati vo EstruturalHTML 4 X HTML 5
![Page 15: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/15.jpg)
MARKUP
Análise do suporte e estratégias de uso nos navegadores
- O desenvolvimento modular- Motores de Renderização- Compatibilidade com HTML5
![Page 16: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/16.jpg)
MARKUP
O Desenvolvimento modular
![Page 17: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/17.jpg)
MARKUPNavegadores e Seus Motores
![Page 18: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/18.jpg)
MARKUPMotor de Renderização WEBKIT
Navegadores - Safari - Google - Chrome
![Page 19: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/19.jpg)
MARKUPMotor de Renderização GECK
Navegadores - Firefox - Mozilla - Camino
![Page 20: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/20.jpg)
MARKUPMotor de Renderização TRIDENT
Navegadores - Internet Explorer 4 a 9
![Page 21: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/21.jpg)
MARKUPMotor de Renderização PRESTO
Navegadores - Opera 7 ao 10
![Page 22: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/22.jpg)
MARKUPCompatibilidade com HTML 5
![Page 23: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/23.jpg)
MARKUPTécnicas de Detecção com Modernizr
JavaScript utilizando Modernizr com método de GêoLocalização
![Page 24: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/24.jpg)
FORMULÁRIOS
Novos tipos de input
• tel • search • url• email• datetime• date• month• week• time
• range• color• number
![Page 25: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/25.jpg)
FORMULÁRIOS• Email – com atributo multiple
Cc <label>: <input type=email multiple name=cc> </ label>
![Page 26: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/26.jpg)
FORMULÁRIOS• Date Time
![Page 27: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/27.jpg)
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
![Page 28: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/28.jpg)
Á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
![Page 29: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/29.jpg)
Á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
![Page 30: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/30.jpg)
ÁUDIO E VÍDEOPRINCIPAIS CODECS DE VÍDEO
H.264
Ogg Theora
WebM
![Page 31: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/31.jpg)
ÁUDIO E VÍDEOVÍDEO
TAG
<video src="u.ogv" width="400" height="300" />
ATRIBUTOS
Poster, Preload, Autoplay, Mediagroup, Loop, Muted, Controls, Width, Height.
![Page 32: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/32.jpg)
Á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>
![Page 33: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/33.jpg)
ÁUDIO E VÍDEOPRINCIPAIS CODECS DE ÁUDIO
WAV
MP3
Ogg Vorbis
![Page 34: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/34.jpg)
A nova geração de aplicações web II
A nova geração de aplicações web II
MICRODATA
![Page 35: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/35.jpg)
A nova geração de aplicações web II
MICRODATA
Exemplo 2
![Page 36: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/36.jpg)
A nova geração de aplicações web II
![Page 37: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/37.jpg)
A nova geração de aplicações web II
HISTÓRICO DE SESSÃO
API STORAGE
![Page 38: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/38.jpg)
A nova geração de aplicações web II
APLICAÇÕES OFFLINE
Exemplo 1
![Page 39: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/39.jpg)
A nova geração de aplicações web II
APLICAÇÕES OFFLINE
Exemplo 2
![Page 40: HTML 5 A evolução do HTML 4 para o HTML 5](https://reader031.fdocumentos.com/reader031/viewer/2022020711/54907de1b47959fd158b49d8/html5/thumbnails/40.jpg)
A nova geração de aplicações web II
UNDOMANAGER