View
1.872
Download
0
Category
Preview:
DESCRIPTION
Minicurso de HTML5 ministrado no evento Computer on the Beach 2011, em Florianópolis.
Citation preview
Computer on the Beach 2011 | Manoel dos Santos
Manoel F. C. dos Santosmanoeldossantos@gmail.com
@manoeldossantos
www.manoeldossantos.com
User Experience Designer
Consultor de Interfaces
Web StandardsPrimeiro, uma introdução aos
O quê?
Conjunto de especificações técnicas e guidelines para
interpretação e criação de web sites
Quem?
W3CWorld Wide Web Consortium
Por que?
SEO
Arquivos menores
Acessibilidade
Compatibilidade
Fácil manutenção
Flexibilidade de layout
Torre de Babel
Conteúdo+Apresentação+Comportamento
A receita
HTML
Conteúdo
HTMLCSS
Apresentação
Comportamento
HTMLCSS
Javascript/AJAX
A História
HTML5A Evolução
Apple ama HTML5
apple.com/html5
Google ama HTML5
html5rocks.com
Mozilla ama HTML5
mozillademos.org/demos/planetarium/demo.html
Opera ama HTML5
dev.opera.com/articles/view/get-familiar-with-html5/
Microsoft ama HTML5
ie.microsoft.com/testdrive/
X X
Aplicações WebFoco em
O Que há de Novo
• Semântica/Sintaxe• Formulários• Multimídia• Gráficos• Estilos/CSS3• E muito mais…
Semântica
O velho
<div id=“header”>
<div id=“nav”>
<div id=“footer”>
<div id=“sidebar”>
<div class=“section”>
<div class=“article”>
<header>
<nav>
<footer>
<aside>
<section>
<article>
O novo
<!DOCTYPE html>
Novo Doctype
Sem frescuras
<img src=“imagem.jpg” /><img src=“imagem.jpg”><img src=imagem.jpg><IMG SRC=imagem.jpg>
Formulários
Elementos mais ricos
<input type=“date”><input type=“time”><input type=“month”><input type=“week”><input type=“range”><input type=“number”>
Validação embutida
<input … required><input type=“tel”><input type=“email”><input type=“url”><input … pattern=“[a-z] {3} [0-9] {3}”>
Multimídia
<audio id=“audio” src=“musica.mp3” controls></audio>
<video id=“video” src=“filme.mp4” controls></video>
Gráficos
Canvas<canvas id=“canvas” width=“500” height=“500”></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>
CSS3
Menos Imagens
• border-radius• text-shadow• box-shadow• gradient
E muito mais...
• Offline• Geolocalização• Drag and Drop• Web SQL Database• Web Workers
APIs
Posso usar isso tudo hoje?2012?
A situação Atual
Suporte dos Navegadores
http://www.findmebyip.com/litmus/
Para os Desatualizados
http://www.modernizr.com/
Links
• http://dev.w3.org/html5/spec-author-view/
• http://slides.html5rocks.com/• http://html5demos.com/• http://html5doctor.com/• http://www.apple.com/html5/• http://www.nevermindthebullets.com/• http://diveintohtml5.org/• http://www.edesignerz.net/html/2913-ht
ml-5-and-css-3-the-techniques-youll-soon-be-using
Recommended