HTML5, CSS3 e o futuro da web

SOBRE O PALESTRANTE

Desenvolvedor Web e líder técnico do projeto ICD (Intercâmbio de Conteúdos Digitais) pela Dynavideo

Mestrando em Informática pela UFPB

Tecnólogo em Sistemas para Internet pelo IFPB

ROTEIRO

VISÃO GERAL

FORMULÁRIOS

MULTIMÍDIA

A NOVA GERAÇÃO DE APLICAÇÕES WEB

CSS 3

DEMONSTRAÇÕES

VISÃO GERAL

1. Histórico de versões

•HTML+, HTML 2.0 e HTML3.0

1993-1995•H

TML 3.2

•Torna-se padrão mantido pela W3C

1996

•HTML 4, HTML 4.01

1998-1999

•XHTML 1.0, XHTML 1.1

2000-2001

•W3C inicia trabalhos no XHTML 2

2002

1. Histórico de versões•Sur

ge o WHATWG

•Grandes empresas se unem para escrever o HTML 5

2004•W3

C se junta ao WHATWG na produção do HTML 5

2006

•XHTML 2 é descontinuado

2009

•Possível lançamento do HTML 5

2012

2. HTML 5 e suas mudançasLançado o HTML a W3c

alertou sobre as boas práticas;

Como separação da estrutura do código e formatação;

Porém, HTML4 não trazia diferença real para semântica;

HTML4 também não facilitava manipulação de elementos via Javascript ou CSS

Ex.: Drag and drop

2. HTML 5 e suas mudanças Criação de APIs que formarão a

base da arquitetura Web

Fácil manipulação de objetos de forma transparente ao usuário

Ferramentas para CSS e Javascript

Novas tags e recursos

Seções, componentes de formulário, gráficos, multimídia, etc

Maior semântica, código interoperável

Retrocompatibilidade

3. ESTRUTURA BÁSICA<!DOCTYPE HTML><html lang="pt-br"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" ref="estilo.css"> <title></title> </head><body></body></html>

Doctype: indica a especificação em uso ao browser ou dispositivo

HTML: lang é necessário para que os user-agents saibam a linguagem principal do documento

Link: rel pode assumir outros valores como ALTERNATE, mapeando por exemplo um feed como (application/atom+xml)

4. Novos elementos e atributoselementos; HTML deve indicar o tipo da informação exibida;

Robôs de busca não conseguem diferenciá-los.

Em versões anteriores, era possível diferenciar um parágrafo de um título, mas não o rodapé do cabeçalho;

Quando lemos um livro é fácil identificar os tipos;

Cabe ao desenvolvedor marcar a informação;

Essa diferenciação era percebida apenas visualmente;

Não havia maneira de detectar automaticamente estes elementos

5. Novos elementos e atributos

<div id="header">

<div id="footer">

<div id="content"><divid="nav">

<divid="right">

<div class="article">

Como era...

5. Novos elementos e atributos

<header>

<footer>

<section><nav> <aside>

<article>

Como será...

HTML 5 trouxe elementos que ajudam a definir setores principais;

Pode-se diferenciar áreas como sidebar, rodapé, cabeçalho;

Tais mudanças simplificam o trabalho dos sistemas de busca;

5. Novos elementos e atributos• Define uma seção genérica do documento. Ex.: introdução, destaque, contato.<section>

• Introdução ou elementos de navegação. (Índices, campos de busca, logomarcas)<header>

• Contém links para páginas internas do site. Ex.: Menu, links no rodapé<nav>

• Parte que poderá ser distribuída e reutilizada em Feeds, por exemplo. (Post, artigo, bloco de comentário)<article>

• Bloco de conteúdo que referencia o conteúdo envolta. Ex.: publicidade, informações secundárias<aside>

• Rodapé da página. Seria o último elemento a aparecer antes do fechamento da tag html<footer>

• Grupo de títulos. Agrupa elementos H1 a H6 quando possuem vários níveis.<hgroup>

• Marca um texto que exibe horário ou data precisa no calendário gregoriano<time>

6. Elementos descontinuados

Efeitos Visuais

• basefont• big• center• font• s• strike• tt• u

Acessibilidade / Usabilidade

• frame• frameset• noframes

Função substituída por outro elemento

• acronym (usa-se abbr)

• applet (usa-se object)

• dir (usa-se ul)

7. SUPORTE ATUAL PELOS BROWSERS Desenvolvimento Modular

Motores de renderização:

Motor Browser

Webkit Safari, Google Chrome

Gecko Firefox, Mozilla, Camino

Trident Internet Explorer 4 ao 9

Presto Opera 7 ao 10

Webkit alcança aparelhos como Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android

8. COMPATIBILIDADE COM HTML5 Atualmente Webkit é o motor mais compatível

Firefox e opera já estão compatíveis com boa parte

Safari Chrome Opera Firefox IE 8 IE 9Local Storage s s s s s sHistórico de

Sessão s s s s s sAplicações

Offline s s n s n nNovos tipos de

campos s s s n n n

Form: Autofocus s s s n n nForm:

Autocomplete n n s n n n

Form: Required s s s n n nVideo, Audio e

Canvas Text s s s s n s

FORMULÁRIOS

•Não há máscara ou validação;

•Integração com agenda de contatos, útil em celulares.

tel

•Muda ligeiramente de acordo com o navegador.

search

•Formatação e validação;

•Integração com agenda de contatos

Email

•Endereço web com formação e validação;

url

•Validação, formatação e calendários;

•Usa-se também: date, month, week, time e datetime-local

datetime

•Validação e formatação;

•Componente personalizado.

number

•Componente personalizado para números.

range

•Seletor de cores

color

1. Novos valores para o atributo type

2. Datas e Horas

<input type=“datetime“ step=“10” />

Outros tipos disponíveis:datetimedatemonthweektimedatetime-local

3. Números<input value=“7“ type=“number“ step=“1”

min=“1” max=“20” />

<input value=“7“ type=“range“ step=“1” min=“1” max=“20” />

4. TIPOS DE DADOS E VALIDADORES

<input name=“login“ type=“autofocus“/>

• Foco automático antes do carregamento da página:

<input placeHolder=“Seu login aqui”/>

• Suporte a placeholder:

<input name=“login” required />

• Required:

<textarea maxlength=“50”></textarea>

• Max-length para textarea:

4. TIPOS DE DADOS E VALIDADORES

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

• Validação com REGEX:

<input type=“submit” formnovalidate />

• Submeter sem validação:

function vCPF(i){

i.setCustomValidity(validaCPF(i.value)?'':'CPF inválido!')

}

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

• Validador personalizado:

5. COMPONENTES WEB APPLICATION

<progressbar max=“100“ value=“75“/>

• Barra de progresso

• Detalhes e sumário<details> <summary>Copiando <progress max="39248" value="14718"> 37,5%</summary> <dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> <dt>Taxa de transferência:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl> </details>

5. COMPONENTES WEB APPLICATION

<div contenteditable=“true“>Edite-me</div>

• Conteúdo editável

• Revisão ortográfica e gramaticalspellcheck=“true“

• Utiliza o revisor ortográfico disponível na plataforma• Controle pode ser feito individualmente para cada elemento

5. COMPONENTES WEB APPLICATION• Drag and Drop

<div id="box" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"><div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div> <div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div> </div>

Eventos do objeto arrastado :Dragstart, drag, dragend

Eventos do objeto que recebe o outro:dragenter, dragleave, dragover, drop

MULTIMÍDIA

1. ÁUDIO<audio src=“musica.oga“ controls=“true” autoplay=“true” />

• Se controls for desabilitado será preciso controlar as operações do player via javascript

1. ÁUDIO

<audio controls=“true” autoplay=“true”/>

• Nem todo browser suporta o codec livre OggVorbis• É preciso oferecer um formato alternativo de áudio• Ou até mesmo uma opção para baixar o conteúdo

<source src=“musica.oga” />

<source src=“musica.mp3” />

<source src=“musica.wma” />

<p>Faça o download <a href=“musica.mp3”>da música</a>.</p>

</audio>

2. VÍDEO<video src=“video.ogv“ width=“400” height=“300” />

2. VÍDEO

<video controls=“true” autoplay=“true”/>

• Também suporta controle com vários sources

<source src=“video.ogg” />

<source src=“video.mp4” />

<source src=“video.wmv” />

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

</video>

2. VÍDEO - CODECS• É importante incluir informações a respeito do container e codecs utilizados• Isso antecipa a detecção de alguma incompatibilidade• A extensão do arquivo não é relevante para isso• Para indicar essas informações usa-se o atributo type

<source src=“video.ogv” type=‘video/ogg; codecs=“theora,vorbis”’ />

• Para OGG usando os codecs Theora e Vorbis:

<source src=“video.mp4” type=‘video/mp4; codecs=“mp4v.20.240, mp4a.40.2”’ />

• Para MPEG-4:

2. VÍDEO• ELEMENTO DEVICE • É possível inserir no HTML um elemento de acesso à

Webcam do usuário• Solicita confirmação do usuário para acesso• Em caso de mais de um dispositivo, será possível

escolher um para fazer stream <script> function update(stream) { document.getElementsByTagName(‘video’)[0].src = stream.url }</script>

<device type=“media” onchange=“update(this.data)” /><video widht=“400” height=“300” />

A NOVA GERAÇÃO DEAPLICAÇÕES WEB

1. MATHML• O HTML5 incorpora a linguagem de marcação MathML<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow> <mi>x</mi> <mo>=</mo><mfrac><mrow><mo form="prefix">−</mo><mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo> <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi> </msqrt> </mrow> <mrow><mn>2</mn> <mo>⁢</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

2. SVG• Linguagem para marcação de gráficos vetoriais• Também pode ser incorporada com facilidade

<svg width=“400” height=“400”><rect x=“10” y=“10” width=“150” height=“50” stroke=“#000000” stroke-width=“5” fill=“#FF0000” />

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

2. SVG• A maioria dos editores gráficos vetoriais exporta e importa automaticamente SVG• Pode-se construir javascript para manipular SVG, usando métodos do DOM• Isso possibilita gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em javascript e sem tecnologias proprietáris e plugins

3. CANVAS API• Permite desenhar na tela do navegador via Javascript• O único elemento HTML existente para isso é o canvas:<canvas id=“x” width=“400” height=“400” />

• Para desenhar:<script>

function desenhar() {

context=document.getElementById('x').getContext('2d');

context.fillRect(10, 10, 50, 150); //x,y,w,h

context.fillStyle='#ff0‘;

context.fill();

}

</script>

3. CANVAS API

www.effectgames.com/demos/canvascycle/

3. CANVAS X SVG

• SVG: • O Conteúdo é

acessível a leitores de tela• O gráfico é escalável,

não perde resolução ou serrilha ao redimensionar• O conteúdo é

acessível via DOM

• Canvas: • A performance é

muito superior ao SVG• É fácil desenhar via

Javascript. Em SVG é preciso escrever XML.

4. SERVER-SENT EVENTS

• Cria-se em javascript um objeto EventSource:es = new EventSource(‘messages.php’);es.onmessage=function(e){ alert(“Chegaram dados: "+e.data) }

• Isso vai abrir uma conexão HTTP com “messages.php”• O cliente se mantém escutando e cada vez que o servidor enviar dados, o evento message será disparado

• Pode ser utilizado para implementar chat ou monitor de status de alguma operação demorada que esteja ocorrendo no servidor

• Maneira de inverter o fluxo das aplicações Ajax• Servidor dispara o envio de dados ao cliente

4. SERVER-SENT EVENTS• Protocolo de comunicação• A página “messages.php” deve enviar mensagens

no seguinte formato:data: mensagem 1id: 1

data: mensagem com duasdata: linhasid: 2

data: mensagem 3id: 3

• Pelo ID é possível recuperar a última mensagem enviada através do valor no header HTTP Last-Event-ID

5. MENUS E TOOLBARS<menu type=“toolbar”> <menu label="File”> <command onclick="fnew()" label="New..." /> <command onclick="fopen()" label="Open..." /> […] </menu> </menu>

6. MICRODATA• Permite tornar a estrutura semântica um pouco mais específica, definindo o que é o conteúdo de cada elemento.<dl itemscope temtype=“notas"> <dt>nome</dt><dd itemprop="nome">Diego</dd> <dt>total</dt><dd itemprop="total">9.7</dd></dl>

<script>resultados=document.getItems(‘notas’);for(var i=0;i<resultados.length;i++){ alert(resultados[i].properties.nome[0].content+": R$ "+ resultados[i].properties.total[0].content) }</script>

6. MICRODATA• Já existem vários padrões de metadados pré-definidos:<section itemscope itemtype="http://data-vocabulary.org/Person"><h1 itemprop="name">Diego Ernesto Rosa Pessoa</h1><h2 itemprop=“nickname">Diego Pessoa</h2><a itemprop=“url” href=http://diegopessoa.com “>diegopessoa.com</a></section>

• Usar formatos padronizados ajuda os sistemas de busca a tratar e entender esses dados

• Mais informações em:http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861

http://diegopessoa.com/

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861






7. HISTÓRICO DE SESSÃO• Um grande desafio de aplicações web é apresentar um modelo de navegação consistente para o usuário. • Famoso problema do back-button• O objeto history foi vitaminado no HTML5 com dois novos métodos:pushState(data,title[,url]): acrescenta uma entrada na lista de histórico.replaceState(data,title[,url]): modifica a entrada atual na lista de histórico.

Com isso, pode-se acrescentar itens à lista de histórico, associando dados ou mesmo uma URL;

8. STORAGE API• Nova maneira de armazenar dados no cliente (alternativa aos cookies)• Objeto Storage possui os métodos:• getItem(key);• setItem(key);• removeItem(key);• clear();• Dois objetos disponíveis:• localStorage• sessionStorage

9. APLICAÇÕES OFF-LINE• HTML5 provê uma maneira de se indicar ao navegador que elementos devem ser postos em cache para que uma aplicação funcione offline.• Para permitir que o usuário acesse uma página offiline é preciso escrever um arquivo de manifesto, indicando que URLs devem ser postas em cache.

CACHE MANIFEST meu.html meu.css meu.js

<html manifest=“meu.manifest">

10. GEOLOCATION API• Três métodos:• Geolocalização IP: localização através de consultas whois• Triangulação GPRS: rede de celulares sem GPS ou GPS desabilitado• GPS: método mais preciso, margem de erro de apenas 5 metros

navigator.geolocation.getCurrentPosition(showpos);

function showpos(position){ lat=position.coords.latitude lon=position.coords.longitude alert('Your position: '+lat+','+lon) }

• Watch Position (rastrear a posição continuamente)

11. UNDO• Navegador guarda um histórico de alterações para cada documento;• Histórico controlado pelo objeto UndoManager, acessível através de window.undoManager. • O histórico guarda dois tipos de alterações:• Alterações DOM• Objetos undo• Ex.: uma aplicação de e-mail pode guardar um objeto undo representando o fato do usuário mover um e-mail de uma pasta para outra.

document.execCommand('redo')

document.execCommand('undo')

CSS 3

1. BORDAS ARREDONDADAS

2. SOMBRAS

•Regular

• Interna

box-shadow: -3px -3px 10px #212121;

box-shadow: 0px 0px 10px #212121;

2. SOMBRAS• Compatibilidade dos navegadores:

C

3. MÚLTIPLOS BACKGROUNDS

background: url(body-top.gif) top left no-repeat, url(banner.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

Suporte atual apenas dos navegadores baseados em Webkit

4. FONTES EMBUTIDAS

@font-face { font-family: SketchRockwell; src: url(‘SketchRockwell.ttf’);}.my_CSS3_class { font-family: SketchRockwell; font-size: 3.2em; text-shadow: 3px 3px 7px #111;}

4. E MUITO MAIS...• Bordas com imagem• Degradê em background• Transparência de elementos• Layouts multi-ccolunas• Transformações 2D e 3D de imagens (girar, perspectiva, etc)• Animações• Controle do conteúdo de um elemento• Etc...Mais informações em:

http://www.css3.com/

http://www.css3.com/

DEMONSTRAÇÕES

1. Recursos / APIs•HTML5 Canvas animation • WebSocket (Chat)

http://www.effectgames.com/demos/canvascycle/




http://html5demos.com/web-socket



2. JOGOS• Legend of Sadness

•PACMAM

•Adventure Game

• Torus (Tetris 3D)

http://www.kesiev.com/akihabara/demo/game-tlol.html






http://www.kesiev.com/akihabara/demo/game-capman.html

http://www.watersheep.org/~markh/html_canvas/game.html

http://www.watersheep.org/~markh/html_canvas/game.html

http://www.benjoffe.com/code/games/torus/




Perguntas?

Referências:http://tableless.com.br/html5/http://dev.w3.org/html5/spec/Overview.html

Contato:E-mail: [email protected]: @diegopessoa

Documents

HTML5, CSS3 e o futuro da web