Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
html5 essentials
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
HTML5 Essentials
by Marc Grabanski
• Less Header Code
• More Semantic HTML tags
• Media Tags
• Geolocation
• Canvas
• Input Types
• Form Validation
• Draggable
• Local Storage
• Cross-Domain Messaging
• Web Sockets
• Eventually, 3D canvas
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<title>foo</title>
</head>
...
Less Header Code
<script src=”foo.js”>
</script>
<link href=”foo.css”></link>
No need for type attribute
<div id=”header”>
<div id=”nav”>
<div id=”article”> <div id=”sidebar”>
<div id=”footer”>
More Semantic HTML tags
More Semantic HTML tags
<header>
<nav>
<section>
<article>
<aside>
<footer>
Fix IE for HTML5 elements
document.createElement(‘header’);
HTML5 Shiv
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/
svn/trunk/ html5.js"></script>
<![endif]-->
or the more advanced
http://www.modernizr.com
<output name="result"></output>
Output
<progress id="p" max=100><span>0</span>%</progress>
Progress
<p>Progress: <progress id="p" max=100><span>0</span>%</
progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent =
newValue;
}
</script>
Progress in Action
Progress is for status of a set of tasks
Meter is for a gauge of measure
Storage space usage:
<meter value=6 max=8>6 blocks used (out of 8 total)
</meter>
Voter turnout:
<meter value=0.75><img alt="75%"
src="graph75.png"></meter>
Tickets sold:
<meter min="0" max="100" value="75"></meter>
Meter
<details>
<summary>Copying... <progress max="375505392"
value="97543282"></progress> 25%</summary>
<dl>
<dt>Transfer rate:</dt> <dd>452KB/s</dd>
<dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
<dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
<dt>Duration:</dt> <dd>01:16:27</dd>
<dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
<dt>Dimensions:</dt> <dd>320×240</dd>
</dl>
</details>
Details and Summary
<address>
<a href="../People/Raggett/">Dave Raggett</A>,
<a href="../People/Arnaud/">Arnaud Le Hors</A>,
contacts for the w3c HTML activity
</address>
Address
Address applies to the nearest Article or Body tag.
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
<button class="fire">
</div>
<script>
div = document.getElementsByTagName(‘ div’)[0];
spaceships[div.dataset.shipId].fire()
</script>
Data Attributes
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
Section
<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter</p>
<h1>Color</h1>
<p>Apples come in various
colors.</p>
</section>
</body>
Good
Better
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
Figure and Figure Caption
<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>
<p>In <a href="#l4">listing 4</a> we see the primary
core interface
API declaration.</p>
<figure id="l4">
<figcaption>Listing 4. The primary core interface API
declaration.</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
</figure>
Figure and Figure Caption
<time pubdate datetime="2009-10-09T14:28-08:00"></time>
Time and Publish Date Attribute
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
<nav>
<p>
<a href="/" rel="index up up up">Main</a> >
<a href="/products/" rel="up up">Products</a> >
<a href="/products/dishwashers/" rel="up">Dishwashers</a> >
<a>Second hand</a>
</p>
<p>
<a href="/" rel="index up up">Main</a> >
<a href="/second-hand/" rel="up">Second hand</a> >
<a>Dishwashers</a>
</p>
</nav>
Breadcrumb Navigation
Similarly, pagination can be done with
first, last, next and prev
<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked"
label="Left" icon="icons/alL.png" onclick="setAlign('left')">
<command type="radio" radiogroup="alignment"
label="Center" icon="icons/alC.png" onclick="setAlign('center')">
<command type="radio" radiogroup="alignment"
label="Right" icon="icons/alR.png" onclick="setAlign('right')">
<hr>
<command type="command" disabled
label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>
Menu and Command
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="fnew()">New...</button>
<button type="button" onclick="fopen()">Open...</button>
<button type="button" onclick="fsave()">Save</button>
<button type="button" onclick="fsaveas()">Save as...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="ecopy()">Copy</button>
<button type="button" onclick="ecut()">Cut</button>
<button type="button" onclick="epaste()">Paste</button>
</menu>
</li>
<li>
<menu label="Help">
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
</menu>
</li>
</menu>
Menu (continued)
<p><mark>Momentum is preserved across the wormhole.
Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>
<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening
will
annihilate anything in its path.</strong> Vortexes can be avoided
when
using sufficiently advanced dialing technology.</p>
Mark is highlighting something
Strong is different, denotes importance
<nav></nav>
Not all Navigation should use <nav>
only main navigation, for instance
footer nav is secondary
<article></article>
Article is unique content to the page.
<hgroup></hgroup>
Hgroup, highest rank group of headings
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
<div itemscope>
<p>My nameis <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</
span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
Itemscope and Itemprop
<video src=” cat.ogg” />
add native controls
<video src=”cat.ogg” controls />
Media Tags
http://camendesign.com/code/video_for_everybody
Media Tags
<video controls/>
<source src=”cat.mp4” />
<source src=”cat.ogg” />
</video>
Ogg Theora/Voribs
- Firefox 3.5+
- Chrome
- Opera
Video Format Support
MPEG-4 H.264/AAC
- Safari
- Chrome
- Opera
http://jilion.com/sublime/video
Native Video
- Safari (v4.0.4+)
- Google Chrome (v4.0+)
- Firefox (v3.6+)
Fallback with Flash
<audio src=”test.ogg”></audio>
<audio src=”test.ogg” autoplay controls loop>
<a href=”test.ogg”>download</a>
</audio>
Media Tags
navigator.geolocation.getCurrentPosition(
function(position){
position.coords.latitude,
position.coords.longitude
}
);
Native GeoLocation
if (navigator && navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {
proccessDirections.sortLocations(
position.coords.latitude,
position.coords.longitude
);
}
navigator.geolocation.getCurrentPosition(getLocation);
} else {
// Google AJAX API fallback GeoLocation
if ((typeof google == 'object') && google.loader &&
google.loader.ClientLocation) {
proccessDirections.sortLocations(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude
);
}
}
GeoLocation w/ Google Ajax API fallback
Canvas
<canvas id=”square”>
fallback content
</canvas>
<script>
canvas = canvas.getElementById(‘square’);
context = canvas.getContext(‘2d’);
context.fillStyle = “#000000”;
context.fillRect(0, 0, 100, 100);
</script>
Canvas Internet Explorer Support
ExplorerCanvas
http://code.google.com/p/explorercanvas/
Input Types
tel
search
email
url
<input type=”email” />
datetime
date
range
color
Unsupported browsers default to text.
Input Types
Input type changes keyboard on iphone.
Input Type Range
<input type="range" min="-100" max="100"
value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="+50">
</datalist>
Input Type Range + Datalist
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.value + b.value"></output>
Input Type Number + Output
<input type=file multiple>
File Upload Multiple
<label>Cc: <input type=email multiple name=cc></label>
Input Type Email + Multiple
<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
<option value="http://www.google.com/" label="Google">
<option value="http://www.reddit.com/" label="Reddit">
</datalist>
Datalist
<input name="custname" required>
<script>
form.checkValidity();
</script>
Form Validation
<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
function check(input) {
if (input.value == "good" ||
input.value == "fine" ||
input.value == "tired") {
input.setCustomValidity('"' + input.value + '" is not a feeling.');
} else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
</script>
Custom Validation
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
localStorage.setItem(key, value);
localStorage.getItem(key);
Storage
Local Storage in Yahoo! Search Pad
Local Storage in Yahoo! Search Pad
http://www.jstorage.info/
<html manifest=”cache.manifest”>
detect online or offline
window.addEventListener('online', online, true);
window.addEventListener('offline', online, true);
Application Storage / Offline
<div draggable=”true”></div>
addEvent(div, “dragstart”, function(e){
e.dataTransfer.setData(‘foo’, ‘bar’);
}, true);
addEvent(div, ‘dragend’, function(e){
e.dataTransfer.getData(‘foo’);
}, true);
Draggable
postMessage(string);
onMessage(event) {
event.data;
}
Cross Domain Messaging
Turn an element into an editable area.
Editable Content
<script>
document.getElementsByTagName('p')[0].contentEditable = true;
</script>
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) {
event.data
};
ws.onclose = function () {};
ws.onopen = function () {};
Web Sockets
Web Worker
new Worker("worker.js");
- Don’t have access to DOM or page.
- Have to communicate through postMessage API
http://html5demos.com/
3D O3D
http://www.youtube.com/watch?v=uofWfXOzX-g
Web GL
Questions?
Marc Grabanski:
http://marcgrabanski.com
Twitter: http://twitter.com/1Marc
Email: m@marcgrabanski.com
User interface and web application
development.
Examples: http://mjgin.com/work.htmlPerguntas relacionadas
Compartilhar