HTML5 e CSS3 O presente e o futuro da WEB. Danilo Borges da Silva

(1)

HTML5 e CSS3 – O

presente e o futuro

da WEB

Danilo Borges da Silva Daniloborges_@hotmail.com

(2)

Agenda

Introdução Histórico Características Conclusão Referências

(3)

(4)

HTML

HTML é uma abreviação de Hypertext

Markup Language - Linguagem de

Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma

linguagem para publicação de

conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

Com o HTML, autores definem a

estrutura das páginas Web usando marcações <tags>

(5)

HTML5

O novo padrão para HTML, XHTML e

HTML DOM

Melhora a interoperabilidade Introduz marcações e APIs para

(6)

(7)

1989

Tim Berners-Lee propôs um sistema

de internet baseado em hipertexto para os pesquisadores do CERN*

usarem e compartilhar documentos. *Conseil Européen pour la Recherch Nucléaire

(8)

1990

Tim publicou a primeira especificação do HTML um documento chamado

(9)

1991

HTML 1.0 publicado por IETF*

(10)

1994

Tim financiou W3C* uma organização

de padrões para o World Wide Web *World Wide Web Consortium

(11)

1995

(12)

1997

HTML 3.2 foi a primeira versão

desenvolvida pela W3C e publicado como uma Recomendação

HTML 4.0 publicado como uma

(13)

1999

HTML 4.1 publicado como uma

(14)

2000

XHTML 1.0 publicado como uma

(15)

2001

XHTML 1.1 publicado como uma

(16)

2004

XHTML 2.0 rascunho

A maioria dos browsers não estavam dispostos a implementar os novos

(17)

2004

WHATWG* foi fundado por

desenvolvedores de empresas como

Mozilla, Apple e Opera. Eles não

estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5.

* Web hypertext Application Technology Working Group

(18)

2007

W3C formou o HTML Working Group

para trabalhar com o WHATWG. Desde então, os dois grupos vem

trabalhando juntos para desenvolver a especificação HTML5

(19)

2009

“While we recognize the value of the

XHTML 2 Working Group’s

contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it.”

(20)

(21)

2011

A W3C anunciou 2014 como sendo a

meta para transformar o HTML5 em Recomendação.

(22)

(23)

DOCTYPE

DOCTYPE não é uma tag, é uma

instrução para o browser a respeito da linguagem de marcação

HTML5 DOCTYPE

(24)

Exemplo

<!DOCTYPE html> <html lang=“pt-br”> <head> <meta charset=“UTF-8”> <title>Documento Exemplo</title> </head> <body> <p>Paragrafo Exemplo</p> </body> </html>

(25)

(26)

Novos elementos

Clique para editar os estilos do texto mestre Segundo nível

● Terceiro nível ● Quarto nível

(27)

(28)

(29)

(30)

Tipos de Input

(31)

(32)

Validação

(33)

(34)

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

(35)

Aplicações Offline

• 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">

(36)

(37)

Drag and Drop

A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable=”true” num elemento o torna arrastável. E há uma série de eventos que

você pode tratar. Os eventos do objeto sendo arrastado são:

(38)

Drag and Drop

Dragstart - O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado.

Drag - O objeto está sendo arrastado Dragend - A ação de arrastar terminou Dragenter - O objeto sendo arrastado entrou no objeto target

Dragleave - O objeto sendo arrastado deixou o objeto target

Dragover - O objeto sendo arrastado se move sobre o objeto target

Drop - O objeto sendo arrastado foi solto sobre o objeto target

(39)

Geolocation API

Há três populares maneiras de um agente de usuário descobrir sua posição no globo:

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 e sem um GPS, ou com o GPS desligado, podem

determinar sua posição pela triângulaçã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.

(40)

(41)

WebSockets

Define um canal de comunicação full-duplex que opera através de um único socket na web.

(42)

(43)

Audio

<audio id=“audio” src=“sound.mp3” controls> </audio> <script> document.getElementById(“audio”).mut ed=false; </script>

(44)

Audio

<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>

(45)

Video

<video id=“video” src=“movie.mp4” autoplay controls></video> <script> document.getElementById(“video”).pla y(); </script>

(46)

Video

<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>

(47)

Video - 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”’ />

(48)

(49)

2D Canvas

<canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").g etContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>

(50)

(51)

(52)

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>

(53)

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

(54)

(55)

Web Worked

Está nova API fornece a capacidade de processamento de aplicações web

mais longas utilizando threads e o processamento multicore das CPUs, evitando as temidas slow-script

(56)

(57)

CSS3

Novos seletores Fontes Embutidas Colunas Sombras Multiplos Backgrounds Opacidade Gradientes Cantos arredondados Transformação Transição Animação ...

(58)

Desenvolvimen

to de uma

(59)

(60)

O HTML5 é um conjunto de

características chamadas features. Pode-se notar que a depender do

browser ele poderá suportar ou não as

features.

Para utilizar o html5 basta especificá-lo no doctype

(61)

(62)

Web: http:// www.slideshare.net/HatemMahmoud/html5-7716606 http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using / Livros/e-books:

ALBERS, Brian; LUBBERS, Peter; SALIM, Frank. Pro HTML5 Programing –

Powerful APIs for Richer Internet

Aplication Development. New York: Apress, 2010.

CEDERHOLM, Dan. CSS3 For Web

Designers. New York: A Book Apart, 2010.

GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the Future of Web Design. San Francisco: No Starch Press, 2011.

HOGAN, Brian P. HTML5 and CSS3 – Develop with Tomorrw's Standards

Today. Texas: The Pragmatic Bookshelf, 2010.

TEAGUE, Jason Cranford. Visual

QuickStart Guide CSS3. New York: Peachpit Press, 2011.