html 5

Uma nova perspectiva para a WEB:

UMA INTRODUÇÃO SOBRE OS NOVOS CONCEITOS DO HTML 5 E SUAS APLICAÇÕES

Fernando PontesDiscente do curso de Sistema de Informação - 4º Período - FACIMPWeb Designer CEO da websonic – Produtora Web – www.websonic.com.br

HTML 5 - Fernando Pontes 2


HTML, O QUE É ISSO MESMO? É um tipo especial de documento de texto

que é usado por navegadores (browser) da Web para apresentar texto e gráficos.

Hyper Text Markup Language.

Não é uma linguagem de programação.

É uma linguagem de marcação que utiliza as tags para organizar o documento.

Tim Berners-Lee junto com Robert Cailliau criaram o HTML (1990) original. Com o objetivo de facilitar a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas.

Tim

Bern

ers

-Lee

Robert

Caill

iau


HTML, O QUE É ISSO MESMO?

Um screen shot do computador de Tim Berners-Lee's rodando uma página no browser WorldWideWeb

http://info.cern.ch/


BODY


LINHA DO TEMPO


HTML 5 Incorporação de novas tags:

◦ Vídeos.◦ Áudio.◦ Gráficos.◦ Armazenamento de dados client-side.◦ Tratamento de dados do formulário.

Redução do custo e tempo de desenvolvimento.

Implantação do conceito de web semântica.

RIAS (Rich Internet Application). Caching de Aplicações. Geolocalização. Drag & Drop.


TAGS QUE ENTRARAM <article> Define um artigo. <aside> Define o conteúdo relacionado com o conteúdo da página. <audio> Tag utilizada para anexar áudio ao documento. <canvas> Tag para exibição de gráficos. <datalist> Define uma lista em formato de dropdown. <details> Define detalhes de uma elemento. <embed> Define um conteúdo interativo ou um plugin. <figcaption> Define a legenda de uma tag figure. <figure> Usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio. <footer> Define o rodapé de uma seção ou de uma página. <header> Define o cabeçalho de uma seção ou de uma página. <hgroup> Define um grupo de cabeçalhos de uma seção. <keygen> Utilizada para gerar uma chave para troca de informações em um

formulário. <mark> Define uma marcação no texto. <nav> Define uma área onde contém links para navegação. <section> Define uma seção do documento. <summary> Define o cabeçalho de uma elemento details. <video> Tag utilizada para anexar vídeo ao documento.


TAGS QUE SAÍRAM <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <s>

<strike> <tt> <u> <xmp>


NOVAS TAGS

HTML 4.1

HTML 5


TAG <audio><audio src="horse.ogg" controls="controls">Seu navegador não suporta a tag audio.

</audio>

Atributo Valor Descrição

autoplay autoplay Se estiver presente, o som irá começar a tocar assim que estiver pronto.

controls controls Se estiver presente, os controles serão exibidos, como um botão de play.

loop loop Se estiver presente, o áudio iniciará automaticamente quando o mesmo finalizar.

preload autometadatanone

Especifica se o áudio deve ser carregado quando a página é carregada ou não. Ignorando se autoplay está presente.

src url Define a URL do arquivo de audio.


TAG <audio>

Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis No Yes Yes Yes No

MP3 No No No Yes Yes

Wav No Yes Yes No Yes


TAG <video><video src="movie.ogg" width="320" height="240" controls="controls">Seu navegador não suporta a tag video.

</video>

Atributo Valor Descrição

autoplay autoplay Se estiver presente, o vídeo irá começar assim que estiver pronto.

controls controls Se estiver presente, os controles serão exibidos, como um botão de play.

loop loop Se estiver presente, o áudio iniciará automaticamente quando o mesmo finalizar.

preload autometadatanone

Especifica se o áudio deve ser carregado quando a página é carregada ou não. Ignorando se autoplay está presente.

src url Define a URL do arquivo de audio.

Width Pixels Define a largura do player de vídeo

Height Pixels Define a altura do player de vídeo


TAG <video>

Formato IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg No Yes Yes Yes No

MPEG 4 No No No Yes Yes

Ogg = codec de vídeo Thedora e codec de áudio Vorbis.

MPEG4 = codec de vídeo H.264 e codec de áudio AAC.


TAG <canvas><canvas id="myCanvas" width="200" height="100"></canvas>

Utiliza-se da Canvas 2D API É possível desenhar desde elementos simples, como

linhas, círculos, retângulos até inserir elementos como imagens e animações.


Armazenamento de dados client-side

O HTML 5 traz dois métodos para armazenar dados no cliente (browser), são eles:

localStorage: Armazenamento de dados por tempo indeterminado.

sessionStorage: Armazenamento de dados por sessão, ou seja, temporariamente.

O HTML 5 usa JavaScript para armazenar e acessar os dados.


Armazenamento de dados client-side

O método sessionStorage:◦ Os dados estarão disponível temporariamente.◦ Reduz a carga no servidor.◦ Otimiza o site ou sistema web.

<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);

</script>


Formulários

Novos campos de entrada. Maior facilidade na validação dos dados.

Entre os novos campos podemos destacar:◦ email◦ url◦ number◦ range◦ Date pickers (date, month, week, time, datetime, datetime-

local)


Formulários

Input type IE Firefox Opera Chrome Safari

email No No 9.0 No No

url No No 9.0 No No

number No No 9.0 No No

range No No 9.0 4.0 4.0

Date pickers No No 9.0 No No


Formulários

Entre os novos elementos podemos destacar:◦ datalist◦ keygen◦ output

Atributo IE Firefox Opera Chrome Safari

datalist No No 9.5 No No

keygen No No 10.5 3.0 No

output No No 9.5 No No


Formulários Novos atributos para formulários:

◦ autocomplete◦ Novalidate

Novos atributos para entradas:◦ autocomplete◦ autofocus◦ form◦ form overrides (formaction, formenctype, formmethod, formnovalidate,

formtarget)◦ height and width◦ list◦ min, max and step◦ multiple◦ pattern (regexp)◦ placeholder◦ required


FormuláriosAtributos IE Firefox Opera Chrome Safari Campos

autocomplete 8.0 3.5 9.5 3.0 4.0text, search, url, telephone, email, password, datepickers, range e color.

autofocus No No 10.0 3.0 4.0 Todos os tipos de campo.

form No No 9.5 No No Todos os tipos de campo.

form overrides No No 10.5 No No submit and image.

height and width 8.0 3.5 9.5 3.0 4.0 Image.

list No No 9.5 No Notext, search, url, telephone, email, date pickers, number, range e color.

min, max and step No No 9.5 3.0 No date pickers, number e range.

multiple No 3.5 No 3.0 4.0 Email e file.

novalidate No No No No No<form> e <input>: text, search, url, telephone, email, password, date pickers, range e color.

pattern No No 9.5 3.0 No text, search, url, telephone, email e password

placeholder No No No 3.0 3.0 text, search, url, telephone, email e password

required No No 9.5 3.0 Notext, search, url, telephone, email, password, date pickers, number, checkbox, radio e file.


Web semântica x HTML 5“É uma extensão da Web atual, que permitirá aos computadores e humanos trabalharem em cooperação. A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador.” wikipédia

“A Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas. Disse principalmente máquinas, porque elas nos ajudarão, de fato, em tarefas que hoje, invariávelmente temos que fazer manualmente.” Diego Eis, do site tableless


Web semântica x HTML 5

XHTML 1.0 HTML 5


RIAs x HTML 5

Rich Internet application. Características semelhantes das aplicações para

Desktop. Redução da carga de servidor. Sem necessidade de vários refresh (atualizações) da

página do site ou sistema.

Mais exemplos:◦ Flash (Adobe), Silverlight (Microsoft), Ajax, JavaFx (Oracle) e o

Ajax (CSS, JavaScript, HTML).


Navegadores Segundo o site http://html5test.com/, os pontos

(no total de 300) alcançados pelos browser são:

Versão: 7.0.517.41

231 pontos

Versão: 10.63

159 pontosVersão: 3.6.11

139 pontosVersão: 8.0

27 pontos

Versão: 5.0.2

207 pontos

http://html5test.com/

http://html5test.com/


REFERÊNCIAS http://www.w3.org/html/ http://www.w3.org/MarkUp/Guide/ http://www.w3schools.com/ http://info.cern.ch/ http://pt.wikipedia.org/wiki/Tim_Berners-Lee http://pt.wikipedia.org/wiki/HTML http://pt.wikipedia.org/wiki/Web_semântica http://www.tableless.com.br/a-web-semantica http://www.w3.org/TR/html5/offline.html http://dev.w3.org/geo/api/spec-source.html http://www.carolinisantos.com/artigos/html5ecss3/html5.html


www.websonic.com.br

html 5

Technology