html5 e css3 – o presente e o futuro da web · cederholm, dan. css3 for web designers. new york:...
TRANSCRIPT
![Page 2: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/2.jpg)
Agenda
Introdução
Histórico
Características
Conclusão
Referências
![Page 3: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/3.jpg)
Introdução
![Page 4: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/4.jpg)
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>
![Page 5: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/5.jpg)
HTML5
O novo padrão para HTML, XHTML e HTML DOM
Melhora a interoperabilidade
Introduz marcações e APIs para aplicações web
![Page 6: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/6.jpg)
Histórico
![Page 7: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/8.jpg)
1990
Tim publicou a primeira especificação do HTML um documento chamado HTML Tags
![Page 9: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/9.jpg)
1991
HTML 1.0 publicado por IETF*
* Internet Engineering Task Force
![Page 10: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/10.jpg)
1994
Tim financiou W3C* uma organização de padrões para o World Wide Web
*World Wide Web Consortium
![Page 11: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/11.jpg)
1995
HTML 2.0 publicado por IETF
![Page 12: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/12.jpg)
1997
HTML 3.2 foi a primeira versão desenvolvida pela W3C e publicado como uma Recomendação
HTML 4.0 publicado como uma Recomendação pela W3C
![Page 13: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/13.jpg)
1999
HTML 4.1 publicado como uma Recomendação pela W3C
![Page 14: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/14.jpg)
2000
XHTML 1.0 publicado como uma Recomendação pela W3C
![Page 15: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/15.jpg)
2001
XHTML 1.1 publicado como uma Recomendação pela W3C
![Page 16: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/16.jpg)
2004
XHTML 2.0 rascunho
A maioria dos browsers não estavam dispostos a implementar os novos recursos
![Page 17: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/18.jpg)
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
![Page 19: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/19.jpg)
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.”
![Page 20: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/20.jpg)
2011
![Page 21: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/21.jpg)
2011
A W3C anunciou 2014 como sendo a meta para transformar o HTML5 em Recomendação.
![Page 22: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/22.jpg)
Características
![Page 23: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/23.jpg)
DOCTYPE
DOCTYPE não é uma tag, é uma instrução para o browser a respeito da linguagem de marcação
HTML5 DOCTYPE
<!DOCTYPE html>
![Page 24: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/24.jpg)
Exemplo
<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<meta charset=“UTF-8”>
<title>Documento Exemplo</title>
</head>
<body>
<p>Paragrafo Exemplo</p>
</body>
</html>
![Page 25: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/25.jpg)
![Page 26: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/26.jpg)
Novos elementosClique para editar os estilos do texto mestreSegundo nível
● Terceiro nível● Quarto nível
● Quinto nível
![Page 27: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/27.jpg)
![Page 28: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/28.jpg)
![Page 29: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/29.jpg)
![Page 30: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/30.jpg)
Tipos de Input
Clique para editar os estilos do texto mestreSegundo nível
● Terceiro nível● Quarto nível
● Quinto nível
![Page 31: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/31.jpg)
Tipos de Input
![Page 32: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/32.jpg)
Validação
Clique para editar os estilos do texto mestreSegundo nível
● Terceiro nível● Quarto nível
● Quinto nível
![Page 33: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/33.jpg)
![Page 34: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/34.jpg)
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
![Page 35: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/35.jpg)
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">
![Page 36: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/36.jpg)
![Page 37: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/37.jpg)
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:
![Page 38: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/38.jpg)
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
![Page 39: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/39.jpg)
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.
![Page 40: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/40.jpg)
![Page 41: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/41.jpg)
WebSockets
Define um canal de comunicação full-duplex que opera através de um único socket na web.
![Page 42: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/42.jpg)
![Page 43: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/43.jpg)
Audio
<audio id=“audio” src=“sound.mp3” controls>
</audio>
<script> document.getElementById(“audio”).muted=false;
</script>
![Page 44: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/44.jpg)
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>
</audio>
![Page 45: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/45.jpg)
Video
<video id=“video” src=“movie.mp4” autoplay controls></video>
<script>
document.getElementById(“video”).play();
</script>
![Page 46: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/46.jpg)
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>
</video>
![Page 47: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/47.jpg)
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”’ />
• Para MPEG-4:
![Page 48: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/48.jpg)
![Page 49: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/49.jpg)
2D Canvas
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("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>
![Page 50: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/50.jpg)
![Page 51: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/51.jpg)
3D Canvas
![Page 52: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/52.jpg)
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>
![Page 53: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/53.jpg)
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
![Page 54: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/54.jpg)
![Page 55: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/55.jpg)
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 warnings
![Page 56: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/56.jpg)
![Page 57: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/57.jpg)
CSS3
Novos seletores
Fontes Embutidas
Colunas
Sombras
Multiplos Backgrounds
Opacidade
Gradientes
Cantos arredondados
Transformação
Transição
Animação
...
![Page 58: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/58.jpg)
Desenvolvimento de uma
Página Web
![Page 59: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/59.jpg)
Conclusão
![Page 60: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/60.jpg)
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
![Page 61: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/61.jpg)
Referências
![Page 62: HTML5 e CSS3 – O presente e o futuro da WEB · CEDERHOLM, Dan. CSS3 For Web Designers. New York: A Book Apart, 2010. GASSTON, Peter. The Book of CSS3 - A Developer's Guide to the](https://reader034.vdocuments.net/reader034/viewer/2022042410/5f26e407e862b7071f43539e/html5/thumbnails/62.jpg)
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.