Hogy kerül a csizma az asztalra?

Hogy kerül a csizma az Hogy kerül a csizma az asztalra?asztalra?

Györkő Péter ([email protected])Györkő Péter ([email protected])

Magyar Attila ([email protected], @athoshun)Magyar Attila ([email protected], @athoshun)

Hogy kerül a Quake2 a Hogy kerül a Quake2 a böngészőbe?böngészőbe?

Györkő Péter ([email protected])Györkő Péter ([email protected])

Magyar Attila ([email protected], @athoshun)Magyar Attila ([email protected], @athoshun)

Mi is az a HTML 5?Mi is az a HTML 5?

• Buzzword? (Web 2.0, Cloud)Buzzword? (Web 2.0, Cloud)

• Szabványgyűjtemény! (HTML, ECMA Szabványgyűjtemény! (HTML, ECMA Script/JavaScript, CSS)Script/JavaScript, CSS)

• Dinamikus weblapok helyett webalkalmazásokDinamikus weblapok helyett webalkalmazások

• Böngészőgyártók aktívan, közösen vesznek Böngészőgyártók aktívan, közösen vesznek részt a specifikációk kidolgozásában → részt a specifikációk kidolgozásában → interoperabilitás (még a hibák kezelésében is!)interoperabilitás (még a hibák kezelésében is!)

Mi is az a HTML 5?Mi is az a HTML 5?

<!DOCTYPE html><!DOCTYPE html>

<html><html>

<head><head>

<meta charset="utf8" /><meta charset="utf8" />

<title>Lorem ipsum</title><title>Lorem ipsum</title>

</head></head>

<body><body>

</body></body>

</html></html>

MotivációMotiváció

• Elavult, túlhaladott, hibásan implementált szabványok Elavult, túlhaladott, hibásan implementált szabványok (böngészőháború) és kvázi-szabványok(böngészőháború) és kvázi-szabványok

• Felhasználói élmény fokozása (UX)Felhasználói élmény fokozása (UX)

• Fejlesztői élmény fokozásaFejlesztői élmény fokozása

• Új platformok (netbook, tablet, smartphone, tévé, Új platformok (netbook, tablet, smartphone, tévé, mosógép, kvarcóra stb.)mosógép, kvarcóra stb.)

• Élet pluginek és workaroundok nélkülÉlet pluginek és workaroundok nélkül

• ““One web for all”One web for all”

Miben más?Miben más?• Designerek: mockupok, layout tervek készülhetnek Designerek: mockupok, layout tervek készülhetnek

akár egyből HTML-benakár egyből HTML-ben

• Designerek: kevesebb kép, több rugalmasságDesignerek: kevesebb kép, több rugalmasság

• Fejlesztők: új API-k, egységesebb platformok, Fejlesztők: új API-k, egységesebb platformok, fejlettebb debug eszközök (még IE-ben is!)fejlettebb debug eszközök (még IE-ben is!)

• Fejlesztők: kevesebb hack&workaround, több Fejlesztők: kevesebb hack&workaround, több produktivitásproduktivitás

• Általában: kevesebb korlát, látványosabb eredményÁltalában: kevesebb korlát, látványosabb eredmény

• Komplex, asztali alkalmazásokkal vetekedő Komplex, asztali alkalmazásokkal vetekedő webalkalmazások fejlesztése válik lehetővéwebalkalmazások fejlesztése válik lehetővé

ÚjdonságokÚjdonságok

• HTML: <canvas>, <audio>, <video>, <section>, <article>, <nav>, <input HTML: <canvas>, <audio>, <video>, <section>, <article>, <nav>, <input type=”email|url|date|datetime|tel|number|range|color|...” pattern=”.*” type=”email|url|date|datetime|tel|number|range|color|...” pattern=”.*” placeholder=”” />, <svg>, data URI, …placeholder=”” />, <svg>, data URI, …

• ECMA Script/JavaScript: Object.defineProperty, Object.keys, Array.forEach, ECMA Script/JavaScript: Object.defineProperty, Object.keys, Array.forEach, Array.map, Array.reduce, JSON.parse, String.trim, getElementsByClassName, Array.map, Array.reduce, JSON.parse, String.trim, getElementsByClassName, querySelector, Local storage, Web Worker, Canvas API, Audio API, Video API, querySelector, Local storage, Web Worker, Canvas API, Audio API, Video API, File API, Drag'n'Drop, WebGL, Typed Arrays, Web Sockets,Geolocation, …File API, Drag'n'Drop, WebGL, Typed Arrays, Web Sockets,Geolocation, …

• CSS: transitions, transformations, border-radius, gradients, :first-child, :last-CSS: transitions, transformations, border-radius, gradients, :first-child, :last-child, :nth-child, :target, :not, attribute selectors, web fonts, media-query, child, :nth-child, :target, :not, attribute selectors, web fonts, media-query, shadow, multiple backgrounds, multiple columns, box and text shadows, shadow, multiple backgrounds, multiple columns, box and text shadows, RGBA & HSLA colors, ...RGBA & HSLA colors, ...

SVGSVG• XML alapú vektorgrafikus képformátumXML alapú vektorgrafikus képformátum

• Scalable Vector Graphics: torzulás nélkül méretezhetőScalable Vector Graphics: torzulás nélkül méretezhető

SVGSVG

• HTML 5 dokumentumba beágyazhatóHTML 5 dokumentumba beágyazható

<body> <svg xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:rgb(0,0,255);"/> </svg></body>

SVGSVG

• HTML 5 dokumentumba beágyazhatóHTML 5 dokumentumba beágyazható

<body> <svg xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:rgb(0,0,255);"/> </svg></body>

CanvasCanvas

• <canvas></canvas><canvas></canvas>

• ””Vászon”, amire rajzolni lehetVászon”, amire rajzolni lehet

• Akár pixelenként isAkár pixelenként is

• JavaScript real time grafikaJavaScript real time grafika

DemóDemó

DemóDemó

context.save();

var reflection_height = logo.height / 3;context.translate(0, reflection_height);context.scale(1, 1);context.drawImage( logo, 0, 0, logo.width, reflection_height);

context.restore();

DemóDemó

var gradient = context.createLinearGradient( 0, 0, 0, reflection_height);

gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');gradient.addColorStop(0.7, 'rgba(255, 255, 255, 1)');

context.fillStyle = gradient;context.rect(0, 0, logo.width, reflection_height);

context.fill();

CSS3CSS3

• Gradient: színátmenetek tetszőleges számú osztóponttal Gradient: színátmenetek tetszőleges számú osztóponttal (color stop)(color stop)

• Háttérképek átméretezése, vágása, több háttér kombinálásaHáttérképek átméretezése, vágása, több háttér kombinálása

• Border-radius: lekerekített sarkokBorder-radius: lekerekített sarkok

• Box-shadow, text-shadow: árnyékokBox-shadow, text-shadow: árnyékok

• Transformation: forgatás, nyújtás, nyírás, stb.Transformation: forgatás, nyújtás, nyírás, stb.

• Transition: animációk JavaScript varázslat nélkülTransition: animációk JavaScript varázslat nélkül

• Új szelektorok: attribútum alapján, :target, :not, :nth-child, Új szelektorok: attribútum alapján, :target, :not, :nth-child, :first-child, :last-child, stb.:first-child, :last-child, stb.

DemóDemó

DemóDemótbody tr:nthchild(2n) { backgroundcolor: #ccf;}tbody tr:nthchild(2n+1) { backgroundcolor: #fff;}

th { background: #000; background: webkitlineargradient(#000,#777); background: mozlineargradient(#000,#777); background: lineargradient(#000, #777); color: white;}

DemóDemó<tr id=”row42”> <td> <a href=”#row42”> Show details</a> ...

tbody tr td { height: 1.5em; overflow: hidden; whitespace: nowrap;}tbody tr:target td { height: auto; overflow: visible; whitespace: normal;}

MultimédiaMultimédia

• <audio>, <video><audio>, <video>

<audio src=”sound.ogg” autoplay=”autoplay” controls=”controls” loop=”loop”></audio>

MultimédiaMultimédia

• <audio>, <video><audio>, <video>

<audio autoplay loop controls> <source src=”sound.ogg” /> <source src=”sound.mp3” /> <p>Bocs, nincs zene. :(</p></audio>

DemóDemó

DemóDemó

<video controls preload="metadata"> <source type="video/ogg" src="sintel_trailer480p.ogv" /> <source type="video/mp4" src="sintel_trailer480p.mp4" /> <p>Sorry.</p></video>

Már megint demóMár megint demó

DemóDemó

var audio = new Audio();audio.src = "data:audio/xwav;base64," + (new WavFile( samples_per_sec, samples, Math.ceil(freq * 4) )).toBase64String();audio.loop = true;

DemóDemó

var samples = [], t, sample, period_dur = 1 / freq, sample_dt = 1 / samples_per_sec;

for (t = 0; t < period_dur; t += sample_dt) { sample = amplitude * Math.sin(t * freq * 2*Math.PI); samples.push(sample);}

λ(t)=A·sin(ω·t+φ)

DemóDemó

WavFile.prototype.toBase64String = function () { var i, l, ret = this.headers, body = this.body; for (i = this.repeat_body; i != 0;) { if (i & 1) ret += body; i >>= 1; body += body; } return ret + this.tail;}

DemóDemó

@media screen and (maxwidth: 700px) { div.key p { display: none; }

}

Ismét egy demóIsmét egy demó

DemóDemó

.animating { webkittransitionduration: 0.5s; moztransitionduration: 0.5s; transitionduration: 0.5s;}

.rotate_right { webkittransform: rotate(15deg); moztransform: rotate(15deg); transform: rotate(15deg);}

DemóDemó

<nav> <a href=”#” id="albums"> Back to albums </a></nav>

DemóDemó

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/ css?family=Ubuntu:300">

body { ... fontfamily: Ubuntu, sansserif; ...}

DemóDemó<input type="file" id="files" name="files[]"

multiple />

var files = document.getElementById('files').files;var num_of_pictures = 0;var picture_srcs = [];for (var i = 0; i < files.length; i++) { var file = files[i];

if (!file.type.match('image.*')) continue;

// process file...}

DemóDemóvar reader =

new FileReader();num_of_pictures++;

reader.onload = (function (curr_file) { return function (e) { picture_srcs.push(e.target.result); // When all the pictures are loaded, // create a new album from them if (num_of_pictures == picture_srcs.length) gallery.addAlbum('Local', picture_srcs); }; })(file);

reader.readAsDataURL(file);

KonklúzióKonklúzió• Újdonság, gyerekcipőÚjdonság, gyerekcipő

• Sok modul specifikációja még csak draftSok modul specifikációja még csak draft

• Az implementációk még csak mostanában Az implementációk még csak mostanában készülnek/készültek el (http://caniuse.com)készülnek/készültek el (http://caniuse.com)

• Helyenként a draft állapotú specifikációk Helyenként a draft állapotú specifikációk implementációi a böngészők között még eltérnekimplementációi a böngészők között még eltérnek

• A HTML 5 a közeli jövő zenéjeA HTML 5 a közeli jövő zenéje

• Már most nagyon sok jól használható modul áll Már most nagyon sok jól használható modul áll rendelkezésrerendelkezésre

KonklúzióKonklúzió

• Pro: rengeteg lehetőségPro: rengeteg lehetőség

• Kontra: nem megy (még) mindenholKontra: nem megy (még) mindenhol

• Best practices: graceful degradation, feature Best practices: graceful degradation, feature detectiondetection

??

• https://github.com/gyorkop/balabit_logohttps://github.com/gyorkop/balabit_logo

• https://github.com/attilammagyar/html5-basicshttps://github.com/attilammagyar/html5-basics

• https://github.com/attilammagyar/html5-synthhttps://github.com/attilammagyar/html5-synth

• https://github.com/gyorkop/HTML5-galleryhttps://github.com/gyorkop/HTML5-gallery

• http://html5demos.com/http://html5demos.com/

• http://blog.nihilogic.dk/http://blog.nihilogic.dk/

• http://html5rocks.com (/resources.html)http://html5rocks.com (/resources.html)

• http://diveintohtml5.org/http://diveintohtml5.org/

• http://www.whatwg.org http://wiki.whatwg.org/wiki/FAQ#HTML5http://www.whatwg.org http://wiki.whatwg.org/wiki/FAQ#HTML5

Köszönjük a figyelmet!Köszönjük a figyelmet!

Technology

Hogy kerül a csizma az asztalra?