January, 2011

Tehniline evangelism

Andres Sirel

Tehnoloogiaevangelist

Microsoft Estonia OÜ
tel mobile +372 528 4222
Rävala 5
Tallinn, Harju, 10143 Estonia
Windows Live Messenger andres.sirel@hotmail.com Skype andres.sirel
  • Tehniline evangelism

    IE9 ühilduvusvõimalused veebiarendajatele

    • 2 Comments

    Külalispostitus meie IE9 projektijuhi Roman Gorislavski sulest:

    Internet Explorer 9 ühilduvusvõimalused veebiarendajatele

    Iga järgmine Internet Exploreri (IE) versioon toob kaasa muutusi ja toetab aina uuemaid tehnoloogiaid, ent mõnikord soovivad arendajad endiselt jätkata varasemate versioonide käitumismalle. Veebiarendajad soovivad standardeid järgivat veebi, samu märgistuskeeli ning tagasiühilduvust olemasolevate lehtedega. Selleks on palju erinevaid tehnoloogiaid, mis lubavad seadistada seda, kuidas IE veebilehti jooksutab.

    Veebilehitsejarežiim ja dokumendirežiim

    Veebilehitsejarežiim määrab kindlaks, mis User-Agent (UA) stringi saadetakse serverisse. Dokumendirežiim seevastu määrab IE vaikimisi valiku ja selle, kuidas IE näeb tingivaid märkuseid (Conditional Comments). Vaikimisi on IE9 veebilehitsejarežiim määratud IE9-ks, IE8 oma vastavalt IE8-ks. Arendajal on võimalik muuta seda IE arendajate tööriistas „Browser Mode“ menüüelemendiga. Kasutaja saab seda muuta kui vajutab lehe külastamisel ühilduvusvaate nupule.

    Internet Explorer 9 (IE9) Compatibility View ehk ühilduvusrežiimi nupp

    On olemas ka Compatibility View nimekiri, mis viib automaatselt teatud veebilehed ühilduvusvaatesse.

    Veebilehitsejarežiim

    Kirjeldus

    IE9

    IE9 saadab UA stringi, versiooni vektori ja dokumendirežiimi, tegu on kõige standardsust järgivama režiimiga IE9-s.

    IE9 Compatibility View

    IE9 saadab UA stringi, versiooni vektori ja dokumendirežiimi vastavalt IE7 standarditele, aga UA string sisaldab lisaks veel Trident/5.0 token, mis näitab, et see on tegelikult IE9.

    IE8

    IE9 saadab UA stringi, versiooni vektori ja dokumendirežiimi vastavalt IE8 standarditele.

    IE7

    IE9 saadab UA stringi, versiooni vektori ja dokumendirežiimi vastavalt IE7 standarditele.


    Dokumendirežiim määrab, mis režiimis kuvab Trident märgistusi nagu näiteks IE9 Standard režiimis. Dokumendirežiimi uuendamisel ei saada veebileht uuesti UA stringi ega küsi uusi märgistusi serverilt.

    Dokumendirežiim

    Kirjeldus

    IE9 Standart

    See on uusim standarti-järgiv käitumine IE9-s ja on vaikimisi määratud IE9-s, et kuvada veebilehte millel on strict või unknown dokumendi tüüp.

    IE8 Standart

    Käitub nagu IE8, kui kuvab veebilehte millel on strict või unknown dokumendi tüüp.

    IE7 Standart

    Käitub nagu IE7, kui kuvab veebilehte millel on strict või unknown dokumendi tüüp.

    Quirks

    Käitub nagu IE kui kuvab dokumendi ilma või Quirksi dokumenditüübiga. See sarnaneb IE5 ja Quirks režiimis oleva IE6, IE7 ja IE8 käitumisega.

    Lisalugemist veebilehitseja- ja dokumendirežiimist leiab järgnevatelt lingilt:

    Dokumendirežiimi muutmine oma veebilehel

    Arendaja määrab isiklikult dokumendirežiimi, mida IE kasutab arendaja loodud veebilehe kuvamiseks. Vaikimisi IE9-s on dokumendirežiimiks IE9 Standard režiim. Selle muutmiseks tuleb kasutada dokumenditüüpi ja X-UA-Compatible metamärgistust või HTTP päist, et muuta seda siis vastavalt vajadustele. Samuti saab kasutada arendajate tööriistade menüüelementi „Document Mode:“, et näha milline dokumendirežiim kõige rohkem sobib.

    Kui soovid muuta dokumendirežiimi ühe veebilehe jaoks, siis kasuta metamärgistust. Kui tahad tervet veebisaiti muuta, kasuta HTTP päist.

    IE9 toetab kahte uut X-UA-Compatible väärtust lisaks sellele, mida IE8 juba toetas:

    Metamärgistus või HTTP päis =

    „IE=_________“

    Kirjeldus

    EmulateIE9

    Ilma dokumendi tüübita või Quirksi dokumendi tüübiga lehed kuvatakse Quirks režiimis ja kõik teised kuvatakse IE9 Standard režiimis.

    IE9

    Kõik lehed kuvatakse IE9 Standard režiimis olenemata dokumenditüübist.

    Microsoft soovitab veebiarendajatel kasutada dokumendi tüüpi ja mitte X-UA-Compatible metamärgistust või HTTP päist IE9 Standard režiimi jaoks. See aitab kaasa eesmärgile, kus veeb töötab ühtlasema standardipõhise märgistusega.

    Kui sul on veebileht, mis põhineb IE7 tõlgendusel Standard režiimil, siis kasuta X-UA-Compatible metamärgistust või HTTP päist. Siin on näide, mis kombineerib väärtused nii, et IE8-s kuvatakse IE7 Standardses režiimis ja IE9-s veebileht kuvatakse IE9 Standardses režiimis:

    IE8-s kuvatakse IE7 Standardses režiimis ja IE9-s veebileht kuvatakse IE9 Standardses režiimis

    Panna saab ka mitmele lehele korraga HTTP päisele lisades natuke loogikat Apache ja IIS serveritel.

    Selleks, et olla lähemal sihile „sama märgistus“, on veel väike muutus IE8-lt IE9-ni. Kõik iframes, mis asuvad veebilehel, kuvatakse IE9 Standard režiimis, peale Quirks režiimis olevaid iframe-e, mis omakorda kuvatakse Quirks režiimis.

    Kuidas IE8 määrab kindlaks dokumendirežiimi ja see kuidas IE9 tuvastab dokumendirežiimi näitab diagramm (vaata svg või png formaati).

    Lisalugemist metamärgisest ja HTTP-päisest: X-UA-Compatible metamärgend ja HTTP päis

    Tuvasta võimalusi, mitte veebilehitsejaid (või hoidu tingitud märkustest)

    Enamasti tahetakse, et veeb kasutaks standardipõhist märgistust nagu IE9 Standard režiim. Seetõttu soovitab Microsoft arendajatel kasutada võimaluse ja käitumise tuvastust (feature and behavior detection) ning mitte tuvastada spetsiifilist veebilehitsejat. Soovitame kasutada ühtset stiililehte, mis ühilduks nii IE9 kui ka teiste veebilehitsejate uusimate versioonidega nende standardrežiimis.

    Jätkuvalt ei soovita me kasutada tingitud märkuseid (conditional comments). Erandiks on tagasiühilduvuse toetamine IE6 ja IE7 stiililehtedega.

    Erandiks on tagasiühilduvuse toetamine IE6 ja IE7 stiililehtedega

    IE9 jätkab tingitud märkuste toetamist, sest soovime jätkuvalt toetada olemasolevate saitide tagasiühilduvust.

    Lisalugemist tingitud märkustest leiad siit lehelt (Conditional Comments).

  • Tehniline evangelism

    WebMatrix teeb WordPressi, Joomla ja Drupali arenduse mugavaks

    • 0 Comments

    WebMatrix teeb WordPressi, Joomla ja Drupali arenduse mugavaks

    Sel neljapäeval tuuakse CodeMash konverentsi raames välja uus Microsofti toode WebMatrix. Tegemist on täiesti värske igamehe arendustööriistaga, mis teeb veebilahenduste loomise lihtsaks. Valida saab paljude sisseehitatud mallide ehk template’de vahel või kasutada enamlevinud ASP.NET/(PHP veebiplatvorme nagu WordPress, Joomla!, DotNetNuke või Umbraco.

    CodeMash on kommuni korraldatav ürituse, kus on kohal kirju seltskond arendajaid - ASP.NET, PHP, Ruby, Pythoni ja Java rahvas. Enter the WebMatrix ettekannet striimitakse reaalajas ja vaatamiseks tuleb külastada veebilehte http://microsoft.com/web/enter. Valida on nii HD Smooth Stream videopildi (Silverlight) kui ka WMV formaadi vahel. Meie aja järgi toimub see 13. jaanuaril kell 19.00 õhtul.

    Jälgi ka Microsofti veebiplatvormi FB lehte facebook.com/webplatform ja Twitterit @mswebplatform

  • Tehniline evangelism

    Internet Explorer 9 ja kinnitatud saidid

    • 3 Comments

    Külalispostitus meie IE9 projektijuhi Roman Gorislavski sulest:

    Internet Explorer 9 ja kinnitatud saidid

    Windows Internet Explorer 9 ehk lihtsalt IE9 tutvustab uut omadust – kinnitatud saidid (pinned sites). See lubab veebilehti integreerida Windows 7-ga ja kinnitada oma sagedamini külastatavaid lehti Start-menüüsse, töölauale või tegumiribale (task bar). Kinnitatud saidid lubavad mugavalt avada veebilehti ja võimaldavad senisest kiiremini neid külastada. Kõik, mis selle lisamiseks teha, on lisada paar meta märgist ja natuke JavaScripti.

    Ikoonid

    Tavaliselt märkame veebilehtede ikoone ainult veebilehitseja aadressiribal, ent nüüd näeme ikoone ka kinnitatud saitidel, kusjuures seal võib esineda ka muid ikoone peale põhiikooni.

    Kui soovite ikoone näha enda kodulehel, piisab sellest, kui paigaldada favicon.ico veebilehe root kausta. Kui sinna ligi ei pääse, kasuta seda koodijuppi:

      <link href="http://koduleht/favicon.ico" rel="shortcut icon"/>

    Ikoonideks võib kasutada ka teisi formaate peale .ico, aga mõned veebilehitsejad ei pruugi sellisel juhul formaati toetada.

    Kinnitatud saidid kasutavad ikoone mitmes kohas: Siirdeloendi (Jump List) sihtmärk ikoon, tegumiriba nupp, pisipildi (thumbnail) eelvaate juhtelemendid (buttons) ja pealisikoonid (overlay icons). Ikoonid peaksid sisaldama järgmisi mõõte:

    • Soovitatav: 16x16, 32x32, 48x48
    • Optimaalne: 16x16, 24x24, 32x32, 64x64

    Standardses konfiguratsioonis tegumiribal olev ikoon on suurusega 32x32, siirdeloendi sihtmärk ikoon 16x16, pisipildi eelvaate nupud 16x16 ja pealisikoonid 16x16. Pilt üleval vasakus nurgas kinnitatud saidi puhul näitab määratud faviconi suuruses 24x24. Selleks, et toimunud sündmused oleksid kergesti jälgitavad, on soovitatav kasutada võimalusel erinevaid ikoone.

    Kes ei ole varem ikoonide valmistamisega kokku puutunud, saab neid luua siin: www.xiconeditor.com

    Veebilehe lisamine start-menüüsse

    Enne kui alustame, vaatame kuidas käib kasutaja poolt veebilehe kinnitamine:

    Kasutajale näeb see alguses välja nagu link ja hiljem nagu lemmikutesse lisamine IE-s. Arendaja poolt on see ainult üks rida koodi.

    kuidas käib kasutaja poolt veebilehe kinnitamine

    Kasuta window.extetnal.msAddSiteMode() meetodit, et lisada veebileht start- menüüsse. APId on võimalik käivitada läbi mõne HTML elemendi, kasutades JavaScripti. Näiteks:

    • <a onclick=“window.external.msAddSiteMode();“ href=“#“> Lisa Veebileht </a><br>

    Selleks et tuvastada, kas veebileht oli avatud kinnitatud saidina või mitte, saab kasutada  window.external.msIsSiteMode() meetodit. msIsSiteMode meetod tagastab Boolean väärtust, kas true kui veebileht avati kinnitatud saidina, või false kui teisiti.

    Kinnitatud saidi kujundamine

    Meta elemente saab kasutada, et kujundada veebilehe välimust pärast seda kui ta on avatud kinnitatud saidina kasutades järgmist süntaksit:

    • <meta name=“nimi“ content=“sisu“ />

    Nime ja sisu väärtused on kirjeldatud järgmises tabelis:

    Nimi

    Sisu

    application-name

    Otsetee nimi. Kui puudub, siis kasutatakse dokumendi pealkirja.

    msapplication-tooltio

    Valikuline tekst mida näidatakse kohtspikrina (tooltip), kui hiire nool asub kinnitatud otsetee ikooni kõrval Start menüüs või töölaual.

    msapplication-starturl

    Rakenduse root URL. Kui puudub kaustatakse praegust veebiaadressi. Ainult HTTP, HTTPS ja FTP protokollid on lubatud.

    msapplication-navbutton-color

    Määrab Back ja Foward nuppud veebilehitseja aknas kinnitatud saidi puhul. Kasutab värvi nimetusi või heks värvi väärtust, mis on defineeritud CSS Tase 3s. Lisa informatsiooniks vaata Värvide tabelit. Kui antud meta element puudub, siis valitakse värv vastavalt otsetee ikoonile.

    msapplication-window

    Kinnitatud veebilehe veebilehitseja akna algne suurus. Sisu ala-elemendid määravad suuruse nagu number N ja on eraldatud semikooloniga.

    • width=N (min 800)
    • height=N (min 600)

    Märkus: Kasutaja tegevus kirjutab automaatselt üle antud väärtused.

    Järgnev koodinäide kasutab meta elemente, et kujundada kinnitatud saidi otseteed: kohtspikriga, stardi URLiga, algse akna suurusega ja navigeerimisnupu värviga.

    <meta name="application-name" content="Näite veebilehe nimi"/>
    <meta name="msapplication-tooltip" content="Ava veebileht"/>
    <meta name="msapplication-starturl" content="http://naide.ee/algus.html"/>
    <meta name="msapplication-window" content="width=800;height=600"/>
    <meta name="msapplication-navbutton-color" content="red"/>

     

    Toimingute (tasks) loomine siirdeloendisse

    Siirdeloendi toimingud on rakendusepõhised tegevused, mis on kohaldatud veebilehele. Toiminguid on soovitatav kasutada kasutaja poolt enimkasutatavaid püsivaid aadresse. Toimingud annavad teatud hulga staatilisi URIsid, millele kasutaja saab ligi isegi siis kui veebilehitseja pole parasjagu käivitatud.

    Toimingute (tasks) loomine siirdeloendisse

    Kõik siirdeloendi toimingud on otseselt ligipääsetavad läbi staatilise URLi , mida hoitakse .website failis. Toimingutelt eeldatakse püsivust, kuid neid saab uuendada, muutes meta elemente veebilehel. Muutused rakenduvad alles pärast seda, kui kasutaja on uuesti avanud antud akna.

    Siirdeloendi toiminguid saab defineerida HTML meta märgiste abil. Külastades kinnitatud veebilehte, talletab Windows märgised vahemälus ning rakendab need installeerimisel. URLid ei ole piiratud sinu domeeniga. Järgnev koodinäide defineerib siirdeloendi kaks toimingut veebilehel: Toiming 1 ja Toiming 2. Kui kasutaja vajutab Toiming 1-le, avaneb kinnitatud saidi aknas Leht1.html. Kui kasutaja vajutab Toiming 2-le, avaneb kinnitatud saidi aknas veebileht http://www.microsoft.com

    • <meta name="msapplication-task" content="name=Toiming 1;action-uri=http://koduleht/Leht1.html;icon-uri=http://koduleht/ikoon1.ico""/>
    • <meta name="msapplication-task" content="name=Toiming 2;action-uri=http://microsoft.com;icon-uri=http://koduleht/ikoon2.ico""/>

    Kinnitatud saidi aknas avanevad kõik toimingud omas vahekaardis samas aknas. Kui ükski kinnitatud saidi aken pole parasjagu avatud, luuakse uus aken. Veebileht saab defineerida endale kuni viis toimingut. Relatiivsed URLid action-uri väljal on lahendatud installeerimise ajal, kasutades lehe URLi, mis sisaldab meta infot.

    Kategooriate loomine siirdeloendile ja sinna esemete (items) lisamine

    Siirdeloendi kategooriad on suurepärane mehhanism veebilehtedele, et tuua pinnale dünaamilist informatsiooni lõpp-kasutajale. Esemeid saab lisada mõnesse kategooriasse suvaliselt veebilehelt sama domeeni piires. Siirdeloendi esemed on mõnes kategoorias visuaalselt eraldatud siirdeloendi toimingutest. Kasutaja saab individuaalselt neid kustutada või muuta püsivaks. Kinnitatud saidi aknas avanevad kõik esemed omas vahekaardis (tab) samas aknas. Siirdeloendi esemed kategooria nimekirjas ei ole mõeldud käskude saatmiseks rakendusele ja navigatsioonist hoidumiseks. Küll nad on aga sihid mõeldud kasutaja navigeerimiseks URIle.

    Siirdeloendi kategooriaid saab kasutada ka nii, et kasutajad saaksid sisupõhist informatsiooni linkide või tegevuste vormis. Linkide abil on võimalik ligi pääseda failidele, dokumentidele või URLidele. Esemed esindavad kasutajale mingi teatud kontekstiga URL-e. See võib näiteks sisaldada profiililehte mõnes sotsiaalvõrgustikus või raadiojaama mõnel muusikasaidil. Kasutajad saavad antud ressurssidele otse ligi, vajutades esemete linkidele. Tegevused võivad sisaldada saite, vaatlemise ajalugu ja palju muud.

    Veebileht võib kasutada mõnda kategooriat ka kasutajate teavitamiseks näiteks e-maili saabumisest, teadete ilmumisest, kohtumise meeldetuletamiseks jne. Kui mõni ese on muudetud püsivaks, siis jääb see alles ka pärast sulgemist. See lubab kontekstuaalse mehhanismiga kasutajatel ligi pääseda saidi informatsioonile isegi juhul, kui veebilehitseja ei ole esile toodud.

    Järgmine kuvatõmmis (screenshot) näitab kuidas Office Outlook Web Access (OWA) kasutab ühte kategooriat, Notifications, et kuvada kokkusaamise teade, scrum. Kui kasutaja vajutab scrumile, siis IE avab uue vahekaardi samas veebilehitsejas, kus on kinnitatud sait ja kuvab kohtumise kohta informatsiooni.

    Office Outlook Web Access (OWA) - pinned IE9

    Et luua mõnda kategooriat on otstarbekas jaotada see mitmeks ülesandeks:

    1. Kategooria loomine – Esmalt kutsume msSiteModeCreateJumplist meetodid, et luua kategooriat sildiga. See punkt peab olema kindlasti tehtud, enne kui saad täita teisi punkte.
      •  
        • window.external.msSiteModeCreateJumplist(„Kategooria1“

    Kategooria peab sisaldama vähemalt ühte eset. Teise kategooria loomine vahetab eelmise ära.

    1. Esemete loomine – Esemete lisamine mällu (esemeid veel ei kuvata). Järgnev koodi näide kasutab msSiteModeAddJumpListItem meetodit, et luua kolm eset:

      Ese 1, Ese 2 ja Ese 3. Esimene parameeter määrad eseme nime. Teine parameeter määrab URLi, kui ese on valitud. Kolmas element määrab ikooni, mida kuvab antud ese.

      window.external.msSiteModeAddJumpListItem('Ese 1', 'http://koduleht/Ese1.html', 'http://koduleht/pildid/ese1.ico');
      window.external.msSiteModeAddJumpListItem('Ese 2', 'http://koduleht/Ese2.html', 'http://koduleht/pildid/ese2.ico');
      window.external.msSiteModeAddJumpListItem('Ese 3', 'Ese3.html', ‘pildid/Ese3.ico');

     

    1. Kuva List – Kuva mälus olev loend siirdeloendisse. Peale msSiteModeShowJumplist meetodi kutsumist, uuendab Windows koheselt siirdeloendi mälus olevat loendid.

      window.external.msSiteModeShowJumpList();
    2. Kustuta List – Puhasta loend esemetest. Meetod msSiteModeClearJumplist kutsumisel eemaldab Windows koheselt eemaldab esemed siirdeloendist.

      window.external.msSiteClearJumplist();

     

    Kinnitatud saidi API suudab ühes kategoorias kuvada korraga kuni 20 eset. Kui neid lisatakse juurde, kustutatakse eelnevad esemed. Kinnitatud saidi API ei korda olemasolevat sisestust, korduv sisestus tõstetakse seevastu loendi tippu. Mõnikord võib süsteem vähendada lubatud esemete piirmäära, näiteks kasutaja valikul või ekraani resolutsiooni ja fondi suuruse tõttu. Esemeid vähendatakse alt ülesse. Iga leht samas domeenis võib muuta infot siirdeloendi kategoorias JavaScripti APIde abil.

    Pealisikoonide (overlay icons) kuvamine

    Windowsi rakendused suudavad teavitada ja edastada oma seisundeid kasutajatele, näidates pealisikooni rakenduse tegumiriba nupu peal. Meetod msSiteModeSetIconOverlay lisab pealisikooni kinnitatud veebilehe tegumiriba nupule. Ühitatud ikoonid aitavad tõmmata tähelepanu kinnitatud veebilehele, millele vaade on blokeeritud:

    • Minimeeritud olekus
    • Blokeeritud teise aknaga

    Pealisikoone saab kasutada teadete või tähtsa kauakestva seisundi teavitamiseks nagu võrgu seisund, onlain seisund või uus meil. Väldi pidevalt muutuvaid või animeerivaid ühitatud ikoone – need tekitavad pigem ebameeldiva kasutuskogemuse.

    Pealisikoonid on vaikimisi kuvatud tegumiriba alumises paremas nurgas. Pealisikoonid ei ole näha, kui veebileht ei ole avatud või ta ei jookse kui kinnitatud sait. Pealisikoone saab kuvada igal veebilehel samas domeenis. Lisaks saab veebileht rakendada mitut pealisikooni ilma, et ta peaks neid kustutama. Kui aga pealisikoon kustutatakse, siis Windows alustab kustutamist kõige hiljem lisatud pealisikoonist. Järelikult kustutatakse viimasena kuvatud pealisikoon esimesena.

    Järgmine kuvatõmmis näitab, kuidas Outlook Web Access kasutab ühitatud ikooni, et teavitada kasutajat, et tal on toimumas kokkusaamine.

    clip_image007

    Järgnev koodinäide kasutab msSiteModeSetIconOverlay meetodit pealisikooni, pealis1.ico, lisamiseks tegumiriba nupule ning pakkudes järgnevat kohtspikri, „Pealisikoon 1“.

    • window.external.msSiteModeSetIconOverlay('http://koduleht/pildid/pealis1.ico', 'Pealis 1');

    Pealisikooni saad kustutada msSiteModeClearIconOverlay meetodi abil.

    • window.external.msSiteModeClearIconOverlay();

    Pisipildi juhtelemendi (thumbnail toolbar button) loomine

    Windowsi rakendused lubavad kasutajal suhelda akendega tegumiribal asuvate pisipildi juhtelementidega ilma, et nad peaksid taastama või aktiveerima lehe akent. Iga nupp omab käsku, mida käivitatakse veebilehel, et kasutajad saaksid suhelda veebilehega:

    • mis on minimeeritud
    • mida ei ole aktiveeritud

    Järgnev kuvatõmmis näitab, kuidas mitme videoklipiga veebilehel kasutatakse pisipildi tööriistariba juhtelemente, et kontrollida video seisundit: mängi, seisata, eelmist ja järgmist ilma veebilehele otse sisenemata.

    clip_image009

    Pisipildi tööriistaribal saab kuvada maksimaalselt seitset juhtelementi. Kuna pisipiltide suurused on varieeruvad, ei pruugi alati olla võimalik kõiki seitset kohta ära kasutada. Kui ruumi on vähe, vähendatakse juhtelemente paremalt vasakule. Seetõttu on soovitatav jätta kõige tähtsamad juhtelemendid vasakule, sest seal on väiksem tõenäosus, et neid eemaldatakse.

    Kui kasutaja vajutab pisipildi tööriistariba juhtelemendile, siis tagastatakse töötlemiseks veebilehele sündmus koos kindla ID-ga. Need sündmused on piiratud domeenile, mis lõi need sündmused. Juhtelemente on võimalik luua, kuvada, peita, aktiveerida, välja lülitada või vahetada nendel asuv pilt.

    Pisipildi tööriistariba juhtelemendid on enne kuvamist defineeritud mälus. Järgnev koodinäide kasutab msSiteModeAddThumbBarButton meetodit, et luua kolm pisipildi tööriistariba juhtelementi. Esimene parameeter näitab ikooni faili URLi ja teine on parameeter, mis on valikuline ning määrab kohtspikri sõnumi. Meetod tagastab ID, mida kasutatakse süsteemi poolt kui klõps tööriistaribal olevale juhtelemendile on registreeritud.

    • nupp1 = window.external.msSiteModeAddThumbBarButton( 'http://koduleht/pildid/nupp1.ico', 'Nupp 1');
    • nupp2 = window.external.msSiteModeAddThumbBarButton( 'http:// koduleht/pildid/nupp2.ico', 'Nupp 2');
    • nupp3 = window.external.msSiteModeAddThumbBarButton( 'http:// koduleht/pildid/nupp3.ico', 'Nupp 3');

    Võimalik on ka püüda sündmusi, mis tööriistaribale kinnitatud juhtelemendi vajutamisel tekitavad, msthumbnailclick sündmuse registreerimisel sündmusetöötlejaga (event handler). Järgnev koodinäide loob nö. sündmusetöötlejaga („tootleja1“), mis töötleb kõik pisipildi tööriistaribal toimunud sündmused selliseks, et nad tekitavad tööriistaribale teise sündmuse, mille tõttu lehel toimub mingi muudatus.

    document.addEventListener('msthumbnailclick', tootleja1, false);

    function tootleja1 (juhtelement) {

    alert ("Lisa sündmus sellelt juhtelemendilt:" + juhtelement.buttonID);

    }

    Pärast defineerimist, saab luua juhtelemente ainult korra kasutades msSiteModeShowThumbBar meetodit.

    · window.external.msSiteModeShowThumbBar();

    Kasuta msSiteModeUpdateThumbBarButton meetodid, et määrata juhtelemendi nähtavust ja olekut peale juhtelemendi loomist. Järgnev koodinäide lülitab välja ning teeb nähtavaks Juhtelement 1-e, aktiveerib ja teeb nähtavaks Juhtelement 2-e ning aktiveerib ja ei kuva Juhtelement 3-e.

    • window.external.msSiteModeUpdateThumbBarButton(Juhtelement1, false, true);
    • window.external.msSiteModeUpdateThumbBarButton(Juhtelement2, true, true);
    • window.external.msSiteModeUpdateThumbBarButton(Juhtelement3, true, false);

    Juhtelemendi olek muutub koheselt, aga nähtavus muutub pärast pisipildi eelvaateakna uuendamist.

    Sa saad defineerida ja kasutusele võtta alternatiivseid stiile, et dünaamiliselt vahetada ikooni ja kohtspikri nupul, mis juba asub pisipildi tööriistaribal.

    Alustuseks tuleb defineerida uus stiil. Kasuta msSiteModeAddButtonStyle meetodit, et defineerida alternatiivne ikooni pilt ja kohtspikker kindlale juhtelemendile. Järgnev koodinäide defineerib Juhtelement1-le Stiil1 kasutades uut pilti ja kohtspikrit.

    • Stiil1 = window.external.msSiteModeAddButtonStyle(Juhtelement1, 'http://koduleht/pildid/stiil1.ico', 'Minu Stiil');

    Stiili rakendamiseks kasuta msSiteShowButtonStyle meetodit. Järgmises koodinäites Stiil1 rakendatakse Juhtelement1-le.

    • window.external.msSiteModeShowButtonStyle(Nupp1, Stiil1);

    Tööriistaribalt tuleks kindlasti ära peita pisipildi juhtelemendid just enne seda, kui kasutaja on lehelt lahkunud. Juhtelemendid tuleks nähtavaks teha/välja tuua kui kasutaja naaseb lehele.

    Tegumiribal nupp vilkuma

    Mõnikord on tarvis teavitada kasutajat, et veebileht vajab temapoolset sisendit, et hakata tegelema järgmise etapiga või lõpetada mingi ülesanne. Kasuta msSiteModeActive meetodit kinnitatud veebilehe tegumiriba ikooni vilkuma panemiseks. Kasuta seda omadust näiteks:

    • Kui kasutaja peab sisestama kasutajaandmeid
    • Kui üleslaadimine on lõpetatud
    • Kui teine kasutaja püüab suhelda antud kasutajaga

    Antud oleku aktiveerimiseks kutsu välja msSiteModeActivate meetod.

    • window.external.msSiteModeActivate();

    Ikoon vilgub maksimaalselt 20 korda enne kui ta jääb püsivalt helendama. Kui kasutaja suhtleb veebilehega, muudab Windows automaatselt tegumiriba nupu tavaliseks.

    Võimaluste tuvastamine

    Võimaluste tuvastamine on hea viis teha kindlaks, kas kasutusel olev veebilehitseja toetab kinnitatud saite või mitte. Seda on võimalik kindlaks teha järgneva koodijupi abil:

    try {
    if (window.external.msIsSiteMode()) {
    alert("See on toetatud, aga on aktiivne.");
    } else{
    alert("See on toetatud, aga ei ole aktiivne.");
    }
    }
    catch(ex) {
    alert("See ei ole toetatud.");
    return;
    }

    Kokkuvõtteks

    Kasutades kinnitatud saite, saavad kasutajad integreerida oma lemmikveebilehti Windows 7 töölauaga, start-menüüga ja tegumiribaga sarnaselt Windowsi-siseste rakendustega. Kinnitatud saitide APIde kasutamine võimendab veebilehtede integreerimist töölauaga ja lubab väljastada infot teadetest ning äratada kasutaja tähelepanu ilma, et peaks parasjagu veebilehel viibima. Lisaks veebi kuvamisele toob veebilehitseja tegumireal esile ka veebilehe omadused.

    Täiendavaks lugemiseks: http://msdn.microsoft.com/en-us/library/gg131029(VS.85).aspx

  • Tehniline evangelism

    Veebiomanikud, HTML5 on tulekul

    • 0 Comments

    Külalispostitus meie IE9 projektijuhi Roger Puks-i sulest:

    Veebiomanikud, HTML5 on tulekul

    HTML on üleilmse veebi tuumikkeel. Viimati väljalastud versioon on järjekorras neljas, kasutuses on ta olnud juba üle aastakümne. Praegu on aga tööjärgus selle keeletüübi viies põhiredaktsioon, mis toob endaga rohkelt kasulikke uuendusi. Kuigi WC3 on hoiatanud HTML5 kasutuselevõtu eest, on paljud tuntud veebilehed hakanud kasutama HTML5 kaasnevaid võimalusi, muutes oma lehe visuaalselt silmapaistvamaks ning kasutajasõbralikumaks.

    Mida võimaldab HTML5 aga täpsemalt veebiomanikel korda saata? Mis on uut selles redaktsioonis võrreldes tema eelkäijatega?

    Esmalt tasub ära mainida, et kui 2000ndate keskpaigas HTML5 väljatöötamist alustati, lähtuti põhimõttel, et veebilehtedel on sarnaselt muude XML dokumentidega oma struktuur. Varasematel versioonidel põhinevad lehed koosnevad navigatsiooniribast, kehaosast, küljemenüüst, päisest ning jalusest ja muudest sektsioonidest. HTML5 toob aga endaga uued märgendid (ing. k. tag) - sealhulgas näiteks järgmised, mis aitavad lehe erinevaid elemente kirjeldada:

    • Section – erinevate sektsioonide defineerimiseks
    • Nav – lehe navigatsioonisüsteemi defineerimiseks
    • Article – näitab, kus asub lehe põhisisu
    • Aside – lisade määramiseks
    • Figure – piltide lisamiseks, mis kirjeldavad lehe põhisisu

    HTML5 toob endaga ka mitu uut elementi. Üheks uuenduseks on näiteks canvas. Canvas on kahedimensiooniline (kuigi uuenduste käigus võidakse hakata toetama ka rohkemaid dimensioone) Javascriptil põhinev joonistusala. Seda annab kasutada nii graafikute, mängude, esitluste jpm. jaoks. Diagrammide ja muu veebilehe sisu on nüüdsest võimalik muuta interaktiivseks. Canvasega tutvumiseks sobib väga hästi leht www.rgraph.net

    RGraph: HTML5 canvas graph library based on the HTML5 canvas tag

    Varasemalt sai otse HTML koodi ühildada vaid pilte, viidates mujal asuvale lähteaadressile. Nüüd on võimalik sama asja teha ka video- ning audiklippidega. Üks kuulsamaid filmiandmebaase maailmas, IMDb, on sellele uuendusele toetudes loonud interaktiivse filmitreilerigalerii, millega saab tutvuda aadressil www.imdb.com/features/hdgallery

    IMDb filmitreilerite galerii
    HTML5 toob endaga uuendusi, mis muudavad veebiloome märksa lihtsamaks ning tõhusamaks. Kuna tegu on veel arendusjärgus oleva veebistandardiga, ei ole paljud võrgulehitsejad seda standardit hakanud täies mahus toetama.

    Internet Explorer 9 (IE9) on hakanud toetama kõnealust veebistandardit. Tänu uuele graafikakiirendile, on antud hetkel mugavaim ja kiireim HTML5-l põhinevaid lehti külastada, kasutades just nimelt IE9-t. Et näha veel, millised veebiomanikud on otsustanud kasutada ära võimalusi, mida pakub HTML5, tasub külastada lehti www.beautyoftheweb.com/#/highlights/html5 ning http://ie.microsoft.com/testdrive/

    Ühtlasi käivitas Microsoft hiljaaegu HTML5 Labs keskkonna, mille eesmärk on aidata veebiarendajatel testida veebilehti kasutades HTML5 spetsifikatsiooni W3C, IETF ja teistelt standardiorganisatsioonidelt. Seal leidub erinevaid põnevaid katsetusi ja prototüüpe, millest ei pruugi paljud lõplikku standardisse ega ka IE9-sse jõuda.

     

    image

     

    Kui on aga soov teha arendajana lähemat tutvust HTML5 veebistandardiga, väärib külastamist leht http://diveintohtml5.org/. Lihtsa juhendi canvase abil joonistusala loomiseks leiab aadressilt www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-complete

    Veel huvitavat lugemist - 20 Essential Things to Know About the HTML5 Web Language ja tasub vaadata ka TechEd Europe 2010 ettekannet HTML5 and Internet Explorer 9 Demo Fest.

  • Tehniline evangelism

    Eestis on uus Windows Expert: IT Pro MVP

    • 0 Comments

    Heiki Tähis - Microsoft MVP | Windows Expert-IT Pro

    Mis saaks olla toredam, kui lõpetada töönädal ühe positiivse uudisega. Eesti MVP ehk Microsoft Most Valuable Professionals read said täiendust uue tiitliomaniku näol Windows Expert: IT Pro kategoorias. Tegemist on kõrge tunnustusega tehnoloogiaeksperdile, kes on aasta jooksul panustanud oluliselt Microsofti kommuuni arendamisesse.

    Niisiis, kõige värskem tiitliomanik on Heiki Tähis, kes on paljudele tuntud IT Kolledži õppejõuna ja Eneta kommuuni aktiivse liikmena. Heiki on aidanud kaasa kõikide ITK-s toimunud Eneta kommuuniõhtute ja MUG.ee sündmuste kordaminekule ning kes veel ei teadnud, siis on teda varem tunnustatud ka Microsoft Student Partners ehk MSP tiitliga. Ühtlasi on ta aidanud mitmel Eesti koolil leida sobivaid lahendusi arvutiklasside arendamiseks ja on tõeline proff Microsofti haridusprogrammide selgitamisel nagu MSDN AA ja IT Akadeemia. Heiki on ka üks Veebistuudiumi arenduse suuna lektoritest, kelle abiga uuendasime viimase ASP.NET õppematerjali Visual Studio 2010 ja .NET 4.0 versioonidele ning lisasime XNA mängude arenduse peatüki. Muu hulgas võib teda näha esinemas peale Eneta loengute ka MUGi õhtutel ning teistel Microsoft Eesti sündmustel.

    Heiki, palju õnne Sulle veelkord! Oled selle tiitli igati auga välja teeninud Naeratus

    Kes soovib Heikile õnne soovida Facebooki vahendusel, siis siin on kaks otseviidet:

    Tutvu lähemalt MVP programmi ja teiste Eesti tiitliomanikega Eneta lehel: www.eneta.ee/kommuun/mvp

Page 1 of 1 (5 items)