Tegin mobiilse veebiäpi, mis jäljendab täringu heitmist:
http://taimar.ee/dice/
Tehnilised eeldused
Mu soov oli saada täringuäpp võimalikult hästi tööle Safariga viimase iOS all (hetkel 6.1). Põhjus lihtne: mu enda telefon jooksutab iOS’i, pealegi on võetud eesmärke selle platvormiga ka reaalne saavutada. :)
Teine soov oli kasutada nn moodsaid veebitehnoloogiaid nagu CSS3 animatsioonid (parema jõudluse saavutamiseks) ja HTML5 ApplicationCache liides (rakenduse offline kasutamiseks). Pilte tahtsin põhimõtteliselt vältida ning lahendada kogu visuaali ainult CSS’i ja tekstiga.
JavaScript
Esimese hooga panin rakendusele külge jQuery library, ilmselt harjumusest tavaliste veebide ja suuremate rakenduste arendamisel. Selle vahetasin kiirelt kergekaalulisema Zepto.js vastu, mis on mõeldud modernsetele brauseritele ning kasutab sarnast API’t nagu jQuery. Peagi sain aru, et vajan JavaScripti minimaalselt ning mistahes valmis-library on selgelt overkill ja rohkem piirab kui on abiks. Kõik vajalik sai lõpuks tehtud puhta vanilla JavaScriptiga.
JS annab täringule tema klikkimise peale klassinime, mis algatab CSS animatsiooni. Seejärel valib JS juhusliku numbri vahemikust 1–6, genereerib juhusliku HEX värvikoodi ning omistab need täringule. Järgmisel klikil toimub kõik uuesti.
Numbrite arvutamine sõltub animationend event’ist ega tööta IE9 või vanemaga (sh Windows Phone 7.x).
Numbri ja värvi sisestamine toimub window.setTimeout() abil ajalise viite kaudu, mis on pool CSS3 animatsiooni pikkusest. See ajab küll asja ära, kuid ideaalis tahaksin window.setTimeout() eemaldada ja püüda keyframe-event’i positsioonil 50%. Sellist võimalust pole brauseritootjad CSS3 animatsioonide toe arendamisel (veel?) realiseerinud. Vähemasti on hea märk, et ettepanek ootab lahendit WebKit Bugzilla’s: #61208. Loe huvi korral lähemalt: Keyframe events for CSS3 Animations.
Juhuslike värvikoodide genereerimisest JavaScriptiga soovitan lugeda aastatetagusest postitusest, autoriks Paul Irish. Kusjuures… tegelik tarkus ja paremad koodijupid peituvad kommentaarides.
Numbrid ja DicePips font
Algselt olid täringumummude asemel tavalised numbrid ühest kuueni, aga et see kahemõõtmeline ruut rohkem täring tunduks, plaanisin kasutada füüsilisele täringule iseloomulikke mummukesi. Nagu eespool juba ütlesin, oli piltide kasutamine… pildilt väljas. 6 × tavalise + “retina” pildiversioonide treimine ei ahvatlenud kuidagi, pealegi oleks need pildid ilusad vaid device-pixel-ratio väärtuste 1 ja 2, mitte vahepealsete ja/või suuremate murd- või täisarvude korral. Tahtsin midagi tulevikukindlamat.
Kujundasin selletarvis päris oma Dice Pips fondi (soovi korral tõmba endalegi: DicePips.otf) ning konverteerisin ta Font Squirrel Webfont Generator abil WOFF ja TTF formaatidesse. Seega on endiselt kasutusel numbrid 1–6, aga neid näeb täringumummude kujul. Lisasin ka “black star” (U+2605) tähemärgi, mida näidatakse täringul pärast lehe laadimist.
Fondikujundamine oli huvitav protsess ja kogemus. Proovisin mitmeid programme nii Windowsi kui Mac OS jaoks, enamus neist olid kohutava kasutajaliidese ja -mugavusega. Üks eristus selgelt – suurepärane Glyphs.
Glyphs’ smart and simple approach helps you draw new typefaces, modify existing fonts, and sculpt your letterforms hassle-free.
Täpselt nii oligi. (Kui välja arvata bugi, mis ei lubanud “uni2605” tähemärki sisestada. Programmi uuendamine aitas.)
Brauserid
Rakendus töötab ka mujal, st mitte ainult ainult mobiilis ega puutetundliku ekraaniga, kuid mulle üllatuslikult saavutab visuaalselt kõige korrektsema ja sujuvama tulemuse just Safari for iOS, sh kõigist desktop-brauseritest paremini.
Iseärasused mobiilsetes brauserites:
- iOS 6.1, Safari
Kõik töötab laitmatult.
- iOS 6.1, Chrome
Nüüd, kui CSS filtrid said toe, töötab kõik nii nagu vaja.
- Android 4.1, vaikimisi brauser
CSS filtrite tugi puudub ja täring ei muutu eemale veeremisel uduseks. Muu töötab hästi.
- Android 4.1, Chrome
CSS filtrite tugi on küll olemas, aga animatsioon toimib koos blur() filtriga väga aeglaselt ja katkendlikult, on pea kasutamatu. Ilma filtrita on kiire.
…ja desktop-brauserites:
- IE 10
CSS filtrite tugi puudub ja täring ei muutu eemale veeremisel uduseks. Animatsioonid ja renderdus on väga kõrge kvaliteediga.
- Safari 6
CSS filtrite tugi on olemas ja kõik toimib hästi, kuid igal täringu animeerimisel jääb maha visuaalset prügi. -webkit-backface-visibility: hidden; lisamine aitab ega näi kõrvalmõjusid omavat.
- Firefox 20
CSS filtrite tugi puudub ja täring ei muutu eemale veeremisel uduseks. Muu töötab hästi.
- Chrome 25
CSS filtrite tugi on olemas, aga kvaliteet visuaalselt nii kehv, et eelistan ilma. Teksti- ja ümarate nurkade rendus samuti üks kehvemaid.
Tegemist on küll pisikese ja lihtsa lahendusega, aga näitab sellest hoolimata, et brauseritootjatel on uute (ja mitte nii väga uute) tehnoloogiate kasutuselevõtmisel veel pikk tee minna ja palju nurki maha lihvida.
iOS webapp
Täringuleht on iOS veebirakenduse toega. Tema saab salvestada otse home screen’ile, avada full screen ja ilma brauseri tööriistaribadeta ning kasutada offline.
