Partilhar via

Internet Explorer 9 ja kinnitatud saidid

  • Artigo

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="https://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="https://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 https://www.microsoft.com

  • <meta name="msapplication-task" content="name=Toiming 1;action-uri=https://koduleht/Leht1.html;icon-uri=https://koduleht/ikoon1.ico""/>
  • <meta name="msapplication-task" content="name=Toiming 2;action-uri=https://microsoft.com;icon-uri=https://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', 'https://koduleht/Ese1.html', 'https://koduleht/pildid/ese1.ico');
    window.external.msSiteModeAddJumpListItem('Ese 2', 'https://koduleht/Ese2.html', 'https://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('https://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( 'https://koduleht/pildid/nupp1.ico', 'Nupp 1');
  • nupp2 = window.external.msSiteModeAddThumbBarButton( 'https:// koduleht/pildid/nupp2.ico', 'Nupp 2');
  • nupp3 = window.external.msSiteModeAddThumbBarButton( 'https:// 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, 'https://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: https://msdn.microsoft.com/en-us/library/gg131029(VS.85).aspx

Comments

  • Anonymous
    January 09, 2011
    Aitäh Romanile põhjaliku postituse eest! Lisan ka omaltpoolt ühe värske ja huvitava lingi: Kuidas IE9 pinnimist integreerida Adobe Flash-iga: windowsteamblog.com/.../integrating-ie9-pinning-with-adobe-flash.aspx

  • Anonymous
    January 17, 2011
    Lisaks Flashile on võimalik ka pinnimist integreerida Silverlightiga: windowsteamblog.com/.../integrating-ie9-pinning-with-microsoft-silverlight.aspx

  • Anonymous
    March 07, 2011
    "Kinnitatud saidi API suudab ühes kategoorias kuvada korraga kuni 20 eset." Ma täiendaksin seda teadet sellega, et Windows 7-s  on vaikimisi tegumiribal lubatud kuni 10 elementi. Teiseks eseme lisamisel siirdeloendisse arvestage sellega, et esimene element koodis asub kõige all ja viimane element kõige üleval siirdeloendis.