html5 e css3 – o presente e o futuro da web · cederholm, dan. css3 for web designers. new york:...
TRANSCRIPT
Agenda
Introdução
Histórico
Características
Conclusão
Referências
Introdução
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>
HTML5
O novo padrão para HTML, XHTML e HTML DOM
Melhora a interoperabilidade
Introduz marcações e APIs para aplicações web
Histórico
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
1990
Tim publicou a primeira especificação do HTML um documento chamado HTML Tags
1991
HTML 1.0 publicado por IETF*
* Internet Engineering Task Force
1994
Tim financiou W3C* uma organização de padrões para o World Wide Web
*World Wide Web Consortium
1995
HTML 2.0 publicado por IETF
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
1999
HTML 4.1 publicado como uma Recomendação pela W3C
2000
XHTML 1.0 publicado como uma Recomendação pela W3C
2001
XHTML 1.1 publicado como uma Recomendação pela W3C
2004
XHTML 2.0 rascunho
A maioria dos browsers não estavam dispostos a implementar os novos recursos
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
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
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.”
2011
2011
A W3C anunciou 2014 como sendo a meta para transformar o HTML5 em Recomendação.
Características
DOCTYPE
DOCTYPE não é uma tag, é uma instrução para o browser a respeito da linguagem de marcação
HTML5 DOCTYPE
<!DOCTYPE html>
Exemplo
<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<meta charset=“UTF-8”>
<title>Documento Exemplo</title>
</head>
<body>
<p>Paragrafo Exemplo</p>
</body>
</html>
Novos elementosClique para editar os estilos do texto mestreSegundo nível
● Terceiro nível● Quarto nível
● Quinto nível
Tipos de Input
Clique para editar os estilos do texto mestreSegundo nível
● Terceiro nível● Quarto nível
● Quinto nível
Tipos de Input
Validação
Clique para editar os estilos do texto mestreSegundo nível
● Terceiro nível● Quarto nível
● Quinto nível
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
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">
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:
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
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.
WebSockets
Define um canal de comunicação full-duplex que opera através de um único socket na web.
Audio
<audio id=“audio” src=“sound.mp3” controls>
</audio>
<script> document.getElementById(“audio”).muted=false;
</script>
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>
Video
<video id=“video” src=“movie.mp4” autoplay controls></video>
<script>
document.getElementById(“video”).play();
</script>
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>
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:
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>
3D Canvas
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>
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
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
CSS3
Novos seletores
Fontes Embutidas
Colunas
Sombras
Multiplos Backgrounds
Opacidade
Gradientes
Cantos arredondados
Transformação
Transição
Animação
...
Desenvolvimento de uma
Página Web
Conclusão
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
Referências
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.