Upload
zoltan-david
View
265
Download
3
Embed Size (px)
DESCRIPTION
Két HTML5 alapú projekt éles tapasztalatai. Javascript patternek, HTML5 animációk, SVG alapú alkalmazás menü, hangkezelés, naplózás javascriptből, nagy mennyiségű videó kezelése. Az előadás megtakinthető itt: http://devportal.hu/tv/Default.aspx?auth=0&sid=9d90d27f-9740-422f-bed5-d4691c85c15f
Citation preview
HTML5 esettanulmányok
Alexandra könyvolvasó és MeseTV
Dávid Zoltán [email protected]
BME AAIT
Nagy Dániel [email protected]
BME AAIT
100 könyv
Demo
mese.tv
Demo
Néhány javascript minta
Nagy alkalmazások javascriptben
Sok fejlesztő
Sok kód
Sok logika
Sok függőség
PAGE 5
Namespace
var AUT = window.AUT || {};
PAGE 6
Konstruktor
AUT.Book = function (id, imageFile, canvas, order) { this.id = id; this.cover = new Image(); this.cover.src = AUT.books.defaultCoverFile; this.scale = 1; this.order = order; this.opacity = 1; this.canvas = canvas; ... }
PAGE 7
Factory
AUT.CreateBook = function(id, imageFile, categoryNames, canvas){
var book = new AUT.Book( id, imageFile, canvas, AUT.books[categoryName].length);
AUT.books[categoryName].push(book); AUT.books["all"].push(book); }
PAGE 8
Öröklés
AUT.Book.prototype.isClicked = function( mouseX, mouseY ) { var width = this.scale * this.BaseWidth; var height = this.scale * this.BaseHeight; var x = this.X + (this.ProxyWidth - width) / 2; var y = this.Y + (this.ProxyHeight - height) / 2; return x < mouseX && mouseX < x+width && y < mouseY && mouseY < y+height; }
PAGE 9
100 könyv
Halszemoptika
AUT.fishEye.computeEffect = function (books) { /// <summary> halszem effekt számítása </summary> for (var i = 0; i < books.length; i++) { var book = books[i]; var dx = AUT.fishEye.X - book.centerX; var dy = AUT.fishEye.Y - book.centerY; book.scale = Math.max(1, maxscale * (1 - Math.sqrt(dx*dx + dy*dy) / maxwidth)); } }
PAGE 11
Halszemoptika
AUT.Book.prototype.draw = function () { /// <summary> könyv kirajzolja saját magát </summary>
var width = this.scale * this.BaseWidth; var height = this.scale * this.BaseHeight; ... }
PAGE 12
Animációk
AUT.engineTick = function () { var now = new Date().getTime(); AUT.animations.tick(); // animációk AUT.fishEye.calculateCanvasSize(); // canvas méretezése AUT.fishEye.computeEffect(AUT.books.current); AUT.redraw(AUT.books.current, now); }
PAGE 13
Animációk
AUT.Animation.prototype.tick = function () { var now = new Date().getTime(); if (now > this.startTime) { var proportion = Math.min(1, (now - this.startTime) / this.duration); var value = this.startValue + proportion * ( this.endValue-this.startValue ); this.target[this.member] = value; } }
PAGE 14
Menü egyedi betűtípussal
#reader-menu-library-left a { font-family: 'ITCAvantGardeGothicProBook', sans-serif; text-decoration:none; color:inherit; font-size:24px; margin:8px; }
PAGE 15
Menü egyedi betűtípussal
@font-face { font-family: 'ITCAvantGardeGothicProBook'; src: url('ITCAvantGardeGothicProBook.woff') format('woff'); font-weight: normal; font-style: normal; }
PAGE 16
SVG átszínezése
Beágyazás <embed> taggel
SVG DOM elérése:
var svg = document.getElementById("mySVGIcon")
.getSVGDocument().documentElement;
SVG elem átszínezése
svg.getElementById("root").style["fill"] = "red";
SVG gombok
Az egéreseményekre az SVG DOM-ban kell feliratkoznunk Hacsak nem képként ágyazzuk be, de akkor nincs átszínezés…
A beágyazó oldal szkriptjeit elérjük!
Ha a semmire kattintunk, semmi nem történik A legtöbb ikonnál erre oda kell figyelni
SVG gombok
<svg …> <g id="root" onclick="top.Reader.Commands.gotoLibrary();"
<rect x="0" y="0" width="85px" height="20px" style="fill-opacity:0.01;stroke-opacity:0"/> <!-- az ikon maga --> </g> </svg>
Hangkezelés
AUT.Player = function (musicFile, volume, play, loop) { this.player = document.createElement('audio'); this.player.src = musicFile; if (loop) this.player.loop = loop; if (volume && this.player.volume) this.player.volume = volume; if (play) this.player.play(); }
PAGE 20
Könyv kinyitása
var sinus = Math.sin(this.alpha * Math.PI / 180); var cosinus = Math.cos(this.alpha * Math.PI / 180); width = width * cosinus; skew = sinus / cosinus * 0.25;
this.drawingContext.save(); this.drawingContext.setTransform(1, -skew, 0, 1, x, y); this.drawingContext.drawImage(this.cover, 0, 0, width, height); this.drawingContext.restore();
PAGE 21
Átlátszó canvas
Rajzolhatunk az oldal többi része fölé
Kattinthatóságot meg kell oldani
Hosszan futó kód
A szkript a böngésző UI szálán fut Az ablak semmire nem reagál, amíg dolgozik…
Megoldás 1: Web workers API Nem része a HTML5-nek
Work in progress állapotú
Megoldás 2: Kooperatív multitaszk
Kooperatív multitaszk
A futó kód önként felfüggeszti futását, hogy más feladatokra is sor
kerülhessen
Később folytatja a munkát, ahol abbahagyta
Ugyanez JavaScriptben Kerüljük a hosszú ciklusokat, mindig csak néhány egység munkát végezzünk el
Tároljuk, hogy hol tartunk
A feladatokat nekünk kell ütemezni…
Képernyőhöz idomulás
Sokféle képernyő Ne kelljen vízszintesen görgetni…
…de a layout se essen szét
CSS Media Queries @media screen and (min-width:1250px) {
#reader-menu-left { width: 1050px; } } @media screen and (max-width:1249px) { #reader-menu-left { width: 805px; } }
Átméretezés detektálása
onresize? átméretezés közben is meghívódik
nem bízhatjuk rá magunkat, ha sokat kell számolni
mit értünk átméretezés vége alatt?
onresize + setTimeout átméretezés vége: ha elég sokáig nem változik az ablak mérete
onresize-ban csak az időzítőt kezeljük
Naplózás kliensoldalon
Amikor a debugger nem segít… Interakció tesztelése
Összeomlások
„Ritkán” előjövő hibák megértése
Megoldás: naplózás local storage-ba Nem zavarja meg az interakciót
Összeomlás után is megmarad
Ha hibát észlelünk, rögtön utánajárhatunk, mi áll a háttérben
mese.tv
PAGE 29
Nagyon sok videó
PAGE 30
Videó cache
PAGE 31
Kis felbontású háttérkép
(Süsü)
PAGE 32
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Thank you.
Böngésző zoom
Az alkalmazás átméreteződésnek „éli meg” Az ablak méretét a szkript kisebbnek látja
Az elemek méretét ugyanakkorának
Használhatjuk az átméretezéshez használt kódot…
…de az onresize-ra hiába várunk
Zoom detektálása
A szabvány (még) nem nyilatkozik a kérdésről
Internet Explorer: window.screen.deviceXDPI
window.screen.deviceYDPI
100%-os zoom: 96 DPI
Emeljük ki külön függvénybe a kezelését így az alkalmazás többi része böngészőfüggetlen marad
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Thank you.