Hogy kerül a csizma az asztalra?

Hogy kerül a csizma az
asztalra?
Györkő Péter (gyorkop@balabit.hu)
Magyar Attila (athos@balabit.hu, @athoshun)

Hogy kerül a Quake2 a
böngészőbe?
Györkő Péter (gyorkop@balabit.hu)
Magyar Attila (athos@balabit.hu, @athoshun)

Mi is az a HTML 5?
• Buzzword? (Web 2.0, Cloud)
• Szabványgyűjtemény! (HTML, ECMA
Script/JavaScript, CSS)
• Dinamikus weblapok helyett webalkalmazások
• Böngészőgyártók aktívan, közösen vesznek
részt a specifikációk kidolgozásában →
interoperabilitás (még a hibák kezelésében is!)

Mi is az a HTML 5?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <title>Lorem ipsum</title>
  </head>
  <body>
  </body>
</html>

Motiváció
• Elavult, túlhaladott, hibásan implementált szabványok
(böngészőháború) és kvázi-szabványok
• Felhasználói élmény fokozása (UX)
• Fejlesztői élmény fokozása
• Új platformok (netbook, tablet, smartphone, tévé,
mosógép, kvarcóra stb.)
• Élet pluginek és workaroundok nélkül
• “One web for all”

Miben más?
• Designerek: mockupok, layout tervek készülhetnek
akár egyből HTML-ben
• Designerek: kevesebb kép, több rugalmasság
• Fejlesztők: új API-k, egységesebb platformok,
fejlettebb debug eszközök (még IE-ben is!)
• Fejlesztők: kevesebb hack&workaround, több
produktivitás
• Általában: kevesebb korlát, látványosabb eredmény
• Komplex, asztali alkalmazásokkal vetekedő
webalkalmazások fejlesztése válik lehetővé

Újdonságok

• HTML: <canvas>, <audio>, <video>, <section>, <article>, <nav>, <input
type=”email|url|date|datetime|tel|number|range|color|...” pattern=”.*”
placeholder=”” />, <svg>, data URI, …
• ECMA Script/JavaScript: Object.defineProperty, Object.keys, Array.forEach,
Array.map, Array.reduce, JSON.parse, String.trim, getElementsByClassName,
querySelector, Local storage, Web Worker, Canvas API, Audio API, Video API,
File API, Drag'n'Drop, WebGL, Typed Arrays, Web Sockets,Geolocation, …
• CSS: transitions, transformations, border-radius, gradients, :first-child, :last-
child, :nth-child, :target, :not, attribute selectors, web fonts, media-query,
shadow, multiple backgrounds, multiple columns, box and text shadows,
RGBA & HSLA colors, ...

SVG
• XML alapú vektorgrafikus képformátum
• Scalable Vector Graphics: torzulás nélkül méretezhető

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

Canvas

•
<canvas></canvas>
•
”Vászon”, amire rajzolni lehet
•
Akár pixelenként is
•
JavaScript real time grafika

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ó

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();

CSS3
• Gradient: színátmenetek tetszőleges számú osztóponttal
(color stop)
• Háttérképek átméretezése, vágása, több háttér kombinálása
• Border-radius: lekerekített sarkok
• Box-shadow, text-shadow: árnyékok
• Transformation: forgatás, nyújtás, nyírás, stb.
• Transition: animációk JavaScript varázslat nélkül
• Új szelektorok: attribútum alapján, :target, :not, :nth-child,
:first-child, :last-child, stb.

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ó
<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édia
•
<audio>, <video>

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

Multimédia
•
<audio>, <video>

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

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>

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ó
λ(t)=A·sin(ω·t+φ)

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);
}

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ó

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

Demó

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

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

Demó

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

Demó

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

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

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ó
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ó
• Újdonság, gyerekcipő
• Sok modul specifikációja még csak draft
• Az implementációk még csak mostanában
készülnek/készültek el (http://caniuse.com)
• Helyenként a draft állapotú specifikációk
implementációi a böngészők között még eltérnek
• A HTML 5 a közeli jövő zenéje
• Már most nagyon sok jól használható modul áll
rendelkezésre

Konklúzió

•
Pro: rengeteg lehetőség
•
Kontra: nem megy (még) mindenhol
•
Best practices: graceful degradation, feature
detection

?
• https://github.com/gyorkop/balabit_logo
• https://github.com/attilammagyar/html5-basics
• https://github.com/attilammagyar/html5-synth
• https://github.com/gyorkop/HTML5-gallery
• http://html5demos.com/
• http://blog.nihilogic.dk/
• http://html5rocks.com (/resources.html)
• http://diveintohtml5.org/
• http://www.whatwg.org http://wiki.whatwg.org/wiki/FAQ#HTML5

Hogy kerül a csizma az asztalra?

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

Similar to Hogy kerül a csizma az asztalra?

Similar to Hogy kerül a csizma az asztalra? (20)

More from Open Academy

More from Open Academy (20)

Hogy kerül a csizma az asztalra?