HTML5 i mikroformaty dla pragmatyków

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

http://twitter.com/theanxy


http://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


• XFN

• hCard

• Przypadki użycia:

• adr

• hCard

• hCalendar






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.”






<!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">


· Nowe !DOCTYPE ·

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml





<!DOCTYPE html><html lang=“pl”> <head> <meta charset="utf-8">

Opcjonalne dla XHTML 5


· Nowe !DOCTYPE ·





DIV ID=“header”

DIV ID=“nav”

DIV CLASS=“article”

DIV ID=“sidebar”

DIV ID=“footer”

DIV CLASS=“section”






<header>

<nav>

<article>

<aside>

<footer>

<section>


• header• nav• section• article• aside• footer

Nowe strukturalne elementy






• 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






• 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>






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






Adres e-mail

<form> <input type="email"> <input type="submit" value="Go"></form>






<form> <input type="number"> <input type="submit" value="Go"></form>

Pole liczbowe






<form> <input type="url"> <input type="submit" value="Go"></form>

Adres WWW






<form> <input type="range" min=“1” max=“11” value=“9”> <input type="submit" value="Go"></form>

Zakres






Czas


<input type=”date”><input type=”month”><input type=”week”><input type=”time”><input type=”datetime”>

Tylko:





Wyszukiwanie


<input type="search" role=”search”>

Wspólgra z WAI-ARIA!





WAI-ARIA

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


http://www.paciellogroup.com/blog/?p=106

http://www.paciellogroup.com/blog/?p=106






role=”banner”

role=”main”

role=”contentinfo”

role=”search”

role=”complementary”

role=”main”





SVG/Canvas


Scalable Vector Graphics (SVG)







<rect







<rect

x=”0” y=”0”







<rect

x=”0” y=”0”

width=”100” height=”100”







<rect

x=”0” y=”0”


fill=”blue” stroke=”red”







<rect

x=”0” y=”0”



stroke-width=”5px”







<rect

x=”0” y=”0”




rx=”8” ry=”8”







<!DOCTYPE html>

<html>

<body>

<svg width=”200” height=”200”>

<rect

x=”0” y=”0”




rx=”8” ry=”8”

id=”myRect” class=”chart” />

</svg>

</body>

</html>







var rect = $(‘#myRect’);








rect.style.fill = ‘green’;









rect.onclick(funtion(){










alert(‘Witaj świecie!’);










alert(‘Witaj świecie!’);

});






Canvas API






Canvas API

<canvas id=”canvas” width=”150” height=”150”></canvas>






Canvas API


var canvas = document.getElementById(“canvas”);






Canvas API



if (canvas.getContext) {






Canvas API




var ctx = canvas.getContext(“2d”);






Canvas API





ctx.fillStyle = “rgb(200,0,0)”;






Canvas API






ctx.fillRect (10, 10, 55, 50);






Canvas API






ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = “rgba(0, 0 200, 0.5)”;






Canvas API






ctx.fillRect (10, 10, 55, 50);


ctx.fillRect (30, 30, 55, 50);






Canvas API






ctx.fillRect (10, 10, 55, 50);


ctx.fillRect (30, 30, 55, 50);

}






http://code.google.com/p/quake2-gwt-port/







Video/Audiohttp://www.flickr.com/photos/sugu/145087521/

<video src=video.mp4 width=300 height=400 poster=okladka.jpg> Treść alternatywna tutaj</video>


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/








Wydajność


~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash





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ść


~ Thomas Fuchs, http://ajaxian.com/archives/i-cant-believe-its-not-flash







Geolokalizacja


❶






❶ ❷






❶ ❷Calkiem dokladnie :)





function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // brak wsparcia }}


Pobieranieobecnej lokacji





WebWorkers


• wątkowanie JS

• interfejs nie jest blokowany

• http://html5demos.com/worker





http://html5demos.com/worker

http://html5demos.com/worker

Czy powinienem używaćHTML 5 już dzisiaj?

• HTML 5 shiv

http://code.google.com/p/html5shiv/

• Modernizrhttp://modernizr.com/






http://modernizr.com

http://modernizr.com

http://html5shiv.googlecode.com/svn/trunk/html5.js

http://html5shiv.googlecode.com/svn/trunk/html5.js

Czy powinienem używaćHTML 5 już dzisiaj?

• HTML 5 shiv


• Modernizrhttp://modernizr.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






http://diveintohtml5.org/

http://diveintohtml5.org/









Microformats


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.”





http://microformats.org/about

http://microformats.org/about


Social Graph API

http://code.google.com/apis/socialgraph/








<a href=“http://facebook.com/jkowalski”>Mój profil</a>






<a href=“http://facebook.com/jkowalski” rel=“me”>Mój profil</a>

Indentity consolidation






<a href=“http://franek.com/” rel=“friend”>Strona Franka</a>

XFN:XHTML friends network





http://franek.com

http://franek.com


<a href=“http://franek.com/” rel=“friend”>Strona Franka</a>

Relacja?

XFN:XHTML friends network





http://franek.com

http://franek.com


http://gmpg.org/xfn/creator








































































































































· hCard ·


http://wojtekzajac.com/"> Wojtek Zajac





http://www.csarven.ca


· hCard ·


<div > <a href="http://wojtekzajac.com/"> <span >Wojtek</span> <span >Zajac</span> </a></div>







· hCard ·


<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.comwojtek zajac • @theanxy • wojtekzajac.com





❷wojtek zajac • @theanxy • wojtekzajac.com

Przypadek użycia:

Zapis wizytówekdo książki adresowej





❸wojtek zajac • @theanxy • wojtekzajac.com

Przypadek użycia:

Dodanie wydarzeniado kalendarza






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






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ą[email protected]@theanxy

Pytania?

http://creativecommons.org/licenses/by/3.0/

http://creativecommons.org/licenses/by/3.0/



mailto:[email protected]

mailto:[email protected]

HTML5 i mikroformaty dla pragmatyków

Technology

Transcript of HTML5 i mikroformaty dla pragmatyków