Post on 17-Dec-2014
description
Wojtek Zajac Kraków, 29.04.2010 r.
<HTML 5>i mikroformatydla pragmatyków
Cześć!
• od 2006 r. związany z XHTMLized.com(wcześniej: freelance)
• specjalność:• audyty dostępności (web accessibility)• optymalizacja wydajności front-end
• klienci:• Twitter• FOX• Threadless• O’Reilly
• obecnie… User Experience Designer, PlatformaKiwi.pl
Nazywam się Wojtek Zając. Kilka faktów:
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
· Agenda ·
• Wstęp
• Nowe elementy i atrybuty
• Web Forms 2.0
• Dostępność (WAI-ARIA)
• Grafika (SVG/Canvas)
• Multimedia (Video/Audio)
• Geolokalizacja
• Web Workers } Microformats
wojtek zajac • @theanxy • wojtekzajac.com
• XFN
• hCard
• Przypadki użycia:
• adr
• hCard
• hCalendar
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
Rzeczywistośćvs.
Świat Idealny
http://www.flickr.com/photos/sprengben/4315145017/
Tim Berners-LeeDIRECTOR, WORLD WIDE WEB CONSORTIUM
“The attempt to get the world to switch to XML, including quotes around attribute values and slashes
in empty tags and namespaces all at once didn’t work.”
wojtek zajac • @theanxy • wojtekzajac.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
wojtek zajac • @theanxy • wojtekzajac.com
· Nowe !DOCTYPE ·
<!DOCTYPE html><html lang=“pl”> <head> <meta charset="utf-8">
Opcjonalne dla XHTML 5
wojtek zajac • @theanxy • wojtekzajac.com
· Nowe !DOCTYPE ·
DIV ID=“header”
DIV ID=“nav”
DIV CLASS=“article”
DIV ID=“sidebar”
DIV ID=“footer”
DIV CLASS=“section”
wojtek zajac • @theanxy • wojtekzajac.com
<header>
<nav>
<article>
<aside>
<footer>
<section>
wojtek zajac • @theanxy • wojtekzajac.com
<header>
<nav>
<article>
<aside>
<footer>
<section>
wojtek zajac • @theanxy • wojtekzajac.com
<header>
<nav>
<article>
<aside>
<footer>
<section>
wojtek zajac • @theanxy • wojtekzajac.com
• header• nav• section• article• aside• footer
Nowe strukturalne elementy
wojtek zajac • @theanxy • wojtekzajac.com
• hgroup• details• summary• mark• time• output• meter• progress
Ten album uzyskał ocenę<meter value="5.2" min="0.0" max="10.0" low="5.0" high="7.5" optimum="9.0"> 7.4</meter> w naszym teście.
Jesteś <progress value="48" max="91"> w połowie czytania tego artykułu.
Więcej nowych elementów
wojtek zajac • @theanxy • wojtekzajac.com
• blokowe linki!
• <b>, <i>, <small> zmieniły znaczenie
• <address> ma nową definicję
• atrybuty <ol>: start, reversed
• contenteditable
• data-*
Zmiany
<a href=”#” class=”story”> <img src=”img.png” /> <h4>Tytuł</h4> <p>Opis tekstowy</p></a>
wojtek zajac • @theanxy • wojtekzajac.com
Web Forms 2.0poprawiona wersja formularzy z HTML 4.01
<form> <input name="q" placeholder="Search Bookmarks and History"> <input type="submit" value="Search"></form>
Placeholder text
wojtek zajac • @theanxy • wojtekzajac.com
Adres e-mail
<form> <input type="email"> <input type="submit" value="Go"></form>
wojtek zajac • @theanxy • wojtekzajac.com
<form> <input type="number"> <input type="submit" value="Go"></form>
Pole liczbowe
wojtek zajac • @theanxy • wojtekzajac.com
<form> <input type="url"> <input type="submit" value="Go"></form>
Adres WWW
wojtek zajac • @theanxy • wojtekzajac.com
<form> <input type="range" min=“1” max=“11” value=“9”> <input type="submit" value="Go"></form>
Zakres
wojtek zajac • @theanxy • wojtekzajac.com
Czas
wojtek zajac • @theanxy • wojtekzajac.com
<input type=”date”><input type=”month”><input type=”week”><input type=”time”><input type=”datetime”>
Tylko:
Wyszukiwanie
wojtek zajac • @theanxy • wojtekzajac.com
<input type="search" role=”search”>
Wspólgra z WAI-ARIA!
WAI-ARIA
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
Landmark Element HTML 5role=”application” brak
role=”banner” brak
role=”complementary” <aside>
role=”contentinfo” <footer>
role=”main” brak
role=”navigation” <nav>
role=”search” brak
WAI-ARIA Landmark Roles
~ The Paciello Group
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
role=”banner”
role=”main”
role=”contentinfo”
role=”search”
role=”complementary”
role=”main”
SVG/Canvas
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
width=”100” height=”100”
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
width=”100” height=”100”
fill=”blue” stroke=”red”
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
width=”100” height=”100”
fill=”blue” stroke=”red”
stroke-width=”5px”
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
width=”100” height=”100”
fill=”blue” stroke=”red”
stroke-width=”5px”
rx=”8” ry=”8”
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
width=”100” height=”100”
fill=”blue” stroke=”red”
stroke-width=”5px”
rx=”8” ry=”8”
id=”myRect” class=”chart” />
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<rect
x=”0” y=”0”
width=”100” height=”100”
fill=”blue” stroke=”red”
stroke-width=”5px”
rx=”8” ry=”8”
id=”myRect” class=”chart” />
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
<!DOCTYPE html>
<html>
<body>
<svg width=”200” height=”200”>
<rect
x=”0” y=”0”
width=”100” height=”100”
fill=”blue” stroke=”red”
stroke-width=”5px”
rx=”8” ry=”8”
id=”myRect” class=”chart” />
</svg>
</body>
</html>
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
var rect = $(‘#myRect’);
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
var rect = $(‘#myRect’);
rect.style.fill = ‘green’;
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
var rect = $(‘#myRect’);
rect.style.fill = ‘green’;
rect.onclick(funtion(){
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
var rect = $(‘#myRect’);
rect.style.fill = ‘green’;
rect.onclick(funtion(){
alert(‘Witaj świecie!’);
wojtek zajac • @theanxy • wojtekzajac.com
Scalable Vector Graphics (SVG)
var rect = $(‘#myRect’);
rect.style.fill = ‘green’;
rect.onclick(funtion(){
alert(‘Witaj świecie!’);
});
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(200,0,0)”;
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(200,0,0)”;
ctx.fillRect (10, 10, 55, 50);
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(200,0,0)”;
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = “rgba(0, 0 200, 0.5)”;
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(200,0,0)”;
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = “rgba(0, 0 200, 0.5)”;
ctx.fillRect (30, 30, 55, 50);
wojtek zajac • @theanxy • wojtekzajac.com
Canvas API
<canvas id=”canvas” width=”150” height=”150”></canvas>
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “rgb(200,0,0)”;
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = “rgba(0, 0 200, 0.5)”;
ctx.fillRect (30, 30, 55, 50);
}
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
http://code.google.com/p/quake2-gwt-port/
Video/Audiohttp://www.flickr.com/photos/sugu/145087521/
<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/km2UpEcSUGY&hl=en_US&fs=1&"
type="application/x-shockwave-flash" width="640" height="385">
</embed>
</object>
wojtek zajac • @theanxy • wojtekzajac.com
Składnia
<video src=video.mp4 width=300 height=400 poster=okladka.jpg> Treść alternatywna tutaj</video>
wojtek zajac • @theanxy • wojtekzajac.com
Składnia
controls
autobuffer
loop
autoplay
Opera, Chrome, Firefox: Ogg Theora
Safari, Chrome: H.264
<audio src=audio.mp3> Treść alternatywna tutaj</audio>
http://media.chikuyonok.ru/ambilight/
wojtek zajac • @theanxy • wojtekzajac.com
Wydajność
wojtek zajac • @theanxy • wojtekzajac.com
~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash
0%10%20%30%40%50%60%
70%
80%
90%
100%
Zużycie procesora
FlashHTML 5
Wydajność
wojtek zajac • @theanxy • wojtekzajac.com
~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash
Geolokalizacja
wojtek zajac • @theanxy • wojtekzajac.com
❶
wojtek zajac • @theanxy • wojtekzajac.com
❶
wojtek zajac • @theanxy • wojtekzajac.com
❶ ❷
wojtek zajac • @theanxy • wojtekzajac.com
❶ ❷
wojtek zajac • @theanxy • wojtekzajac.com
❶ ❷Calkiem dokladnie :)
function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // brak wsparcia }}
wojtek zajac • @theanxy • wojtekzajac.com
Pobieranieobecnej lokacji
wojtek zajac • @theanxy • wojtekzajac.com
WebWorkers
wojtek zajac • @theanxy • wojtekzajac.com
• wątkowanie JS
• interfejs nie jest blokowany
• http://html5demos.com/worker
Czy powinienem używaćHTML 5 już dzisiaj?
• HTML 5 shiv
http://code.google.com/p/html5shiv/
• Modernizrhttp://modernizr.com/
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
wojtek zajac • @theanxy • wojtekzajac.com
Czy powinienem używaćHTML 5 już dzisiaj?
• HTML 5 shiv
http://code.google.com/p/html5shiv/
• Modernizrhttp://modernizr.com/
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
wojtek zajac • @theanxy • wojtekzajac.com
Przydatne Zasoby
http://www.alistapart.com/articles/previewo2tml5
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/TR/html5-diff/
http://diveintohtml5.org
http://html5doctor.com
http://html5readiness.com/
A List Apart
W3C spec
HTML 5 differences
Dive into HTML 5
HTML 5 Doctor
HTML 5 Readiness
wojtek zajac • @theanxy • wojtekzajac.com
Microformats
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
Microformatshttp://microformats.org/about
“Designed for humans first and machines second, microformats
are a set of simple, open data formats built upon existing and
widely adopted standards.”
wojtek zajac • @theanxy • wojtekzajac.com
Social Graph API
http://code.google.com/apis/socialgraph/
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski”>Mój profil</a>
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski”>Mój profil</a>
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski” rel=“me”>Mój profil</a>
Indentity consolidation
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://facebook.com/jkowalski” rel=“me”>Mój profil</a>
Indentity consolidation
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://franek.com/” rel=“friend”>Strona Franka</a>
XFN:XHTML friends network
wojtek zajac • @theanxy • wojtekzajac.com
<a href=“http://franek.com/” rel=“friend”>Strona Franka</a>
Relacja?
XFN:XHTML friends network
wojtek zajac • @theanxy • wojtekzajac.com
· hCard ·
wojtek zajac • @theanxy • wojtekzajac.com
http://wojtekzajac.com/"> Wojtek Zajac
· hCard ·
wojtek zajac • @theanxy • wojtekzajac.com
<div > <a href="http://wojtekzajac.com/"> <span >Wojtek</span> <span >Zajac</span> </a></div>
· hCard ·
wojtek zajac • @theanxy • wojtekzajac.com
<div class=“vcard”> <a class=“fn n url” href="http://wojtekzajac.com/"> <span class=“given-name”>Wojtek</span> <span class=“family-name”>Zajac</span> </a></div>
❶Przypadek użycia:
Wykorzystanie adresuna stronie WWW
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.comwojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.comwojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.comwojtek zajac • @theanxy • wojtekzajac.com
❷wojtek zajac • @theanxy • wojtekzajac.com
Przypadek użycia:
Zapis wizytówekdo książki adresowej
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
❸wojtek zajac • @theanxy • wojtekzajac.com
Przypadek użycia:
Dodanie wydarzeniado kalendarza
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
wojtek zajac • @theanxy • wojtekzajac.com
Specyfikacje
informacje o wydarzeniachinformacje o kontaktachoznaczanie licencjiograniczanie podążania za linkamitagi
hCalendarhCard
rel-licenserel-nofollow
rel-tag
SzkicehAtom: treść aktualizowanahAudio: pliki dźwiękowehListing: ogłoszeniahRecipe: przepisyhResume: publikowane CVhReview: recenzje
rel-enclosurerel-homerel-payment
wojtek zajac • @theanxy • wojtekzajac.com
Przydatne linki
http://microformats.org/wiki/Main_Page
http://microformats.org/code/hcard/creator
http://microformats.org/code/hcalendar/creator
http://microformatique.com/optimus/
https://addons.mozilla.org/en-US/firefox/addon/4106
http://codebits.eu/intra/s/session/79
Wiki microformats.org
Generator hCard
Generator hCalendar
Optimus (transformer)
Operator (plugin do Firefoksa)
Social Graph API
Dziękuję za uwagę.
This work is licensed under a Creative
Commons Attribution 3.0 Unported License
http://www.slideshare.net/wojciechzajac
Wojtek Zającwojtek@wojtekzajac.com@theanxy
Pytania?