HTML5 esettanulmányok

Alexandra könyvolvasó és MeseTV

Dávid Zoltán david.zoltan@aut.bme.hu

BME AAIT

Nagy Dániel nagydanieldavid@gmail.com

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.

tanfolyam@msdnkk.hu

tanfolyam@aut.bme.hu