INTRODUÇÃO A HTML5

Salvador Torres@ssatorres

HTML

HTML = Hypertext Markup Language (Linguagem de Marcação de Hipertexo);

Linguagem Interpretada por um Browser;

Define o formato do documento e as ligações com outros documentos;

HTML

Desenvolvido originalmente por Tim Berners-Lee;

Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0;

Ainda não era um padrão;

HTML

Em 1997 o W3C criou a versão 3.2; A partir daí HTML se tornou um

padrão;Em 1999 saiu a especificação do

HTML4.

HTML

Tags básicas: <a></a>; <p></p>; <img/>; <div></div> <table></table> <iframe></iframe> <br/>

HTML

Trocando em miúdos:“O HTML é uma linguagem para

publicação de conteúdo na Web (texto, imagem, vídeo, áudio, etc.)”.

W3C

W3C

World Wide Web Consortium;Fundado por Tim Berners-Lee;Visa levar a Web ao seu potencial

máximo;Fóruns abertos que promovam a

sua evolução e assegurem a sua interoperabilidade.

W3C

Padrões:CSSDOM(JavaScript)XMLXHTML 1.0

HTML5

HTML5

É a nova versão do HTML4;Necessidade de criar elementos

semânticos;Ainda está em testes e a versão

final é prometida para 2012;

HTML5

Cria novas tags e muda a função de outras;

Padrão para criação de sessões comuns como rodapé, cabeçalho, sidebar e menus.

HTML5

Muda a forma de escrever código e organizar a informação:Mais semântica e menos código;Mais interatividade sem plugins e

perda de performance;Código interoperável, pronto para

futuros dispositivos;Facilita a reutilização da informação

de diversas formas.

HTML5 vs XHTML2

HTML5 vs XHTML2

WHATWG vs W3C;WHATWG (Mozilla, Apple e Opera

em 2004);W3C -> XHTML2;WHATWG -> HTML5

Mais flexibilidade; Integrar Web Forms 2.0 e abandonar

o Web Controls 1.0;Retrocompatibilidade.

HTML5 vs XHTML2

Em 2006 a W3C reconheceu as vantagens do HTML5;

W3C e WHATWG passaram a trabalhar em conjunto;

Conhecendo HTML5

Novos Recursos

Controle embutido de conteúdo multimídia (Áudio e Vídeo);

Desenvolvimento de gráficos bidimensionais;

Aprimoramento do uso off-line;

Geolocalização;Validação de Formulários

nativa;Drag and Drop.

Estrutura Básica

XHTML

Estrutura Básica

HTML5

O atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

Estrutura Interna

XHTML

Estrutura Interna

HTML5

Novos Elementos

<section> define uma nova seção genérica no

documento (introdução ou destaque, novidades, etc.);

<nav>seção da página que contém links

(importantes) para outras partes do website;

Novos Elementos

<article>parte da página que poderá ser

distribuída e reutilizada em FEEDs por exemplo (post, artigo, um bloco de comentários de usuários, etc.);

<aside>define uma área de conteúdo

relacionado ao seu conteúdo principal (sidebars em textos impressos, publicidade, etc.);

Novos Elementos

<hgroup>agrupar elementos de título de H1

até H6 quando eles tem múltiplos níveis de títulos;

<time>marcar parte do texto que exibe um

horário ou uma data;

Novos Elementos

<header>grupo de introdução ou elementos de

navegação (índices de conteúdos, campos de busca ou até mesmo logomarcas);

<footer>representa literalmente o rodapé da

página.

Novos Elementos

Os novos elementos possibilitaram uma nitidez maior no código;

É possível diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho;

Novos Elementos

Os buscadores conseguem vasculhar o código de maneira mais eficaz;

Guardando informações mais exatas e levando menos tempo para estocar essa informação.

Elementos removidos

<frame>Fere princípios de acessibilidade;

<basefont>,<big>,<center>,<font>,<s>,<strike>,<tt>,<u>Efeito somente visual;

Elementos Alterados

<address>agora é tratado como uma seção no

documento;<hr>

mesmo nível que um parágrafo;<strong>

ganhou mais importância.

Web Semântica

Suporte dos Browsers

http://html5test.com/

Suporte dos Browsers

Formulários

<input />Novos valores para type

tel (sem formatação ou mascara);search (mudar a aparência para parecer

com os demais do sistema);email (validação do email podendo

ainda integrar com a agenda de contatos);

url (formatação e validação de endereços web);

Formulários

<input />Novos valores para type

Datas e horas (calendário, um seletor de horário ou outro auxílio ao preenchimento);

Number (aceita somente numeros);range (valores numéricos porém com

uma barra de seleção);color (paleta de cores com resultado

#000FFF)

Formulários

Mais recursosautofocus

o foco será colocado neste campo automaticamente ao carregar a página;

<input name="login" autofocus/>

Placeholder texttexto padrão do campo antes do foco ir

para ele; <input name="q" placeholder="Pesquisa"/>

Formulários

Mais recursosrequired

transformar o campo em obrigatório; <input name="login" required/>

maxlengtho atributo agora também está disponível

no textarea;

Formulários

Mais recursosCustom validators

definir expressões regulares de validação, sem Javascript;

<input name="cpf" oninput="vCPF(this)"/>

contenteditable tornar um elemento do HTML editável. <div contenteditable="true"> Edite-me...

</div>http://html5demos.com/contenteditable

Formulários

Mais recursospattern

definir expressões regulares de validação, sem Javascript;

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

Formulários

Todos os recursos: http://slides.html5rocks.com/#slide21

API Storage

Um dos grandes desafios de usabilidade é criar uma navegação consistenteações locais do usuário numa página fossem

refletidas na próxima.(Menu em árvore);histórico com o uso de Ajax.

API Storage

Soluções:Histórico de Sessão

elemento history; localStorage e sessionStorage

Antes Cookies (Interface complexa e Limite de

armazenamento);Agora

localStorage(armazena os dados no client sem expiração definida) ;

sessionStorage(armazena os dados durante a sessão atual de navegação).

API Storage

Exemplo http://slides.html5rocks.com/#slide7

Drag and Drop

Exemplo http://slides.html5rocks.com/#slide13

Midias com HTML5

Áudio <audio controls="true" autoplay="true">

<source src="mus.oga" /> <source src="mus.mp3" />

<source src="mus.wma" /> <p>Faça o <a href="mus.mp3">download da

música</a>.</p> </audio>

O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela;

O estilo dos botões é definido pelo browser.

Midias com HTML5

Vídeo <video controls="true" autoplay="true" width="400“ height="300">

<source src="u.ogv" /> <source src="u.mp4" /> <source src="u.wmv" />

<p>Faça o <a href="u.mp4">download do vídeo</a>.</p> </video>

Midias com HTML5

Youtube (http://youtube.com/html5)

Midias com HTML5

Sublime http://sublimevideo.net/demo)

Midias com HTML5

Exemplo http://slides.html5rocks.com/#slide22

Midias com HTML5

Elemento deviceWebcam

<device type="media">

interface solicitando ao usuário acesso a sua webcam. Se ele tiver mais de uma, também será permitido que ele escolha que webcam usar;

Streambasta trocar o valor “media” por “fs”.

Canvas

A Canvas API permite a você desenhar na tela do navegador via Javascript. O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript.

<canvas id="x" width="300" height="300"></canvas>

Canvas

Com a tag canvas é possível criar gráficos, games, aplicações web, etc.

Canvas

Exemploshttp://mugtug.com/sketchpad/http://media.chikuyonok.ru/ambilight/ http://html5demos.com/canvas-gradhttp://slides.html5rocks.com/#slide23

SVG

SVG é uma linguagem para marcação de gráficos vetoriais.

Retângulo <rect x="10" y="10" width="150" height="50" stroke="#000" stroke-width="5" fill="#FF0000" />

Circulo <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />

SVG

Exemploshttp://slides.html5rocks.com/#slide26http://slides.html5rocks.com/#slide27

SVG

Logomarca da Wikipedia

Geolocation Há três maneiras populares programa descobrir sua posição global: Geolocalização IP

É o método usado pela maioria dos navegadores web em computadores. Através de consultas whois e serviços de localização de IP, vai determinar a cidade ou região em que você está.

Triangulação GPRS Dispositivos conectados a uma rede de celulares podem determinar sua posição

pela triangulação das antenas GPRS próximas. É bem mais preciso que o método baseado em IP, vai mostrar em que parte do bairro você está.

GPS É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5

metros.

Geolocation navigator.geolocation.getCurrentPosition(showpos) Onde showpos é uma função callback, que vai receber um objeto de

posicionamento. Veja um exemplo: function showpos(position){

lat = position.coords.latitude lon = position.coords.longitude

alert('Your position: '+lat+','+lon) }

Geolocation

Exemploshttp://html5demos.com/geohttp://slides.html5rocks.com/#slide14

Sites interessantes

http://html5demos.com/ http://html5-showcase.com/ http://html5rocks.com/

Referências http://xhtml.com/en/future/x-html-5-versus-xhtml-2/ http://pt.wikipedia.org/wiki/HTML5 http://w3c.br/cursos/html5/conteudo/