Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hogy kerül a csizma az asztalra?

1,108 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
  • Be the first to comment

  • Be the first to like this

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!

×