Hogy kerül a csizma az asztalra?

1,052 views
943 views

Published on

Pontosabban a HTML. Az ötös. És hogy kerül a JavaScript a szerverre? Mi közük ezeknek egymáshoz? Mibe ásd bele magad, ha szeretnél felkészülni a jövőre?

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,052
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hogy kerül a csizma az asztalra?

  1. 1. Hogy kerül a csizma az asztalra? Györkő Péter (gyorkop@balabit.hu) Magyar Attila (athos@balabit.hu, @athoshun)
  2. 2. Hogy kerül a Quake2 a böngészőbe? Györkő Péter (gyorkop@balabit.hu)Magyar Attila (athos@balabit.hu, @athoshun)
  3. 3. 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!)
  4. 4. Mi is az a HTML 5?<!DOCTYPE html><html>  <head>    <meta charset="utf­8" />    <title>Lorem ipsum</title>  </head>  <body>  </body></html>
  5. 5. 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”
  6. 6. 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é
  7. 7. Ú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, DragnDrop, 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, ...
  8. 8. SVG• XML alapú vektorgrafikus képformátum• Scalable Vector Graphics: torzulás nélkül méretezhető
  9. 9. 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>
  10. 10. 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>
  11. 11. Canvas• <canvas></canvas>• ”Vászon”, amire rajzolni lehet• Akár pixelenként is• JavaScript real time grafika
  12. 12. Demó
  13. 13. 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();
  14. 14. 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();
  15. 15. 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.
  16. 16. Demó
  17. 17. Demótbody tr:nth­child(2n) {  background­color: #ccf;}tbody tr:nth­child(2n+1) {  background­color: #fff;}th {  background: #000;  background: ­webkit­linear­gradient(#000,#777);  background: ­moz­linear­gradient(#000,#777);  background: linear­gradient(#000, #777);  color: white;}
  18. 18. Demó<tr id=”row42”>  <td>    <a href=”#row42”>      Show details</a>  ...tbody tr td {   height: 1.5em;   overflow: hidden;   white­space: nowrap;}tbody tr:target td {   height: auto;   overflow: visible;   white­space: normal;}
  19. 19. Multimédia• <audio>, <video> <audio     src=”sound.ogg”     autoplay=”autoplay”     controls=”controls”     loop=”loop”> </audio>
  20. 20. Multimédia• <audio>, <video> <audio autoplay loop controls>     <source src=”sound.ogg” />     <source src=”sound.mp3” />     <p>Bocs, nincs zene. :­(</p> </audio>
  21. 21. Demó
  22. 22. Demó<video controls preload="metadata">  <source type="video/ogg"    src="sintel_trailer­480p.ogv" />  <source type="video/mp4"    src="sintel_trailer­480p.mp4" />  <p>Sorry.</p></video>
  23. 23. Már megint demó
  24. 24. Demóvar audio = new Audio();audio.src = "data:audio/x­wav;base64,"   + (new WavFile(         samples_per_sec,         samples,         Math.ceil(freq * 4)   )).toBase64String();audio.loop = true;
  25. 25. 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);}
  26. 26. 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;}
  27. 27. Demó@media screen and (max­width: 700px) {   div.key p {      display: none;   }}
  28. 28. Ismét egy demó
  29. 29. Demó.animating {  ­webkit­transition­duration: 0.5s;  ­moz­transition­duration: 0.5s;  transition­duration: 0.5s;}.rotate_right {  ­webkit­transform: rotate(15deg);  ­moz­transform: rotate(15deg);  transform: rotate(15deg);}
  30. 30. Demó<nav>   <a href=”#” id="albums">      Back to albums   </a></nav>
  31. 31. Demó<link rel="stylesheet" type="text/css"   href="http://fonts.googleapis.com/         css?family=Ubuntu:300">body {    ...    font­family: Ubuntu, sans­serif;    ...}
  32. 32. 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...}
  33. 33. 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);
  34. 34. 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
  35. 35. Konklúzió• Pro: rengeteg lehetőség• Kontra: nem megy (még) mindenhol• Best practices: graceful degradation, feature detection
  36. 36. ?• 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
  37. 37. Köszönjük a figyelmet!

×