XAML.cz Magazín moderních technologií založených na XAML

V dnešním světě to vypadá tak, že ten kdo má lepší marketing a propagaci je na tom lépe než ostatní. Abychom i se svým projektem v Silverlightu na tom byli lépe než ostatní, měli bychom uživateli dopřát zážitek ještě předtím, než se vůbec dostane k naší aplikaci. A jelikož podle posledních měření je zatím pokrytí Silverlight pluginem na úrovni 60%, nesmíme zapomínat ani na tak specifickou část, jako instalace tohoto pluginu.

Říkáte si proč, vždyť instalaci nemohu jakkoliv ovlivnit, tak jak bych mohl dát uživateli z tohoto procesu lepší zážitek než ostatní? A právě v tom by měl pomoci tento článek, neboť způsob, jakým uživatele vyzvete k instalaci Silverlightu může být pro vaši aplikaci rozhodující a vy nemusíte zůstat u strohého výchozího instalačního procesu.

Dobrý uživatelský zážitek

Pojďme si říct, co by mohlo znamenat, že dopřejeme uživateli dobrý uživatelský zážitek a to nejen při instalaci Silverlight doplňku

Zaměřte se na obsah a sdělte uživateli přidanou hodnotu

Uživatelé většinou nevědí, co je Silverlight a k čemu jim může být dobrý a stejně tak nemohou dobře vědět, proč po nich na stránce chcete, aby si tento doplněk instalovali. Snažte se jim to tedy v krátkosti a co nejvýstižněji sdělit.

Odstraňte nebo redukujte bariéry

Když už uživatele přesvědčíte, že právě instalace Silverlightu pro ně bude přínosem a vaše aplikace v něm spuštěná jim dopřeje další zážitky a nebo komfort, snažte se jít co nejkratší cestou k instalaci. K tomu můžete zmínit, že instalace je zdarma, je rychlá a že jsou jen krůček od používání vaší Silverlight aplikace.

Minimalizujte možnosti výběru

Nebuďte příliš upovídaní a dejte uživateli jasně najevo co má provést, tedy nainstalovat si doplňek Silverlight. Dobrou volbou samozřejmě také může být poskytnout mu odkaz na stránky, kde mu nabídnete ten samý obsah bez Silverlightu – pokud je to možné.

Interakce

Nezapomeňte na to, že uživatel, pokud uvidí část toho, co jej po instalaci Silverlightu a spuštění vaší aplikace čeká, bude více motivován k tomu si Silverlight nainstalovat. Dopřejte mu tedy alespoň malou ochutnávku, třeba v podobě obrázku.

Jak naprogramovat uživatelský zážitek

Abychom se mohli pustit do naprogramování a dostali jsme se k výslednému zobrazení uživatelského zážitku z instalace Silverlightu uživateli měli bychom nejdříve vědět, jaký je vlastně mechanismus instalace Silverlight pluginu. Přesněji řečeno se nyní bude jednat o tu část, kterou můžeme jako vývojáři ovlivnit ještě dříve, než se spustí ten cca 6MB soubor se samotnou instalací.

Stav Silverlight instalace

Možná některé z vás překvapím tím, když prohlásím, že instalace Silverlightu se může dostat do 7 (slovy sedmi) různých stavů, na které jako vývojáři můžeme reagovat. A já je nyní představím:

Nainstalována správná verze Silverlightu a zároveň je plugin nahrána

Je to nejchtěnější stav, kdy je nainstalována potřebná verze Silverlight a plugin je nahrán tudíž se tak může naše aplikace nahrát a zobrazit.

Nainstalována správná verze Silverlightu, ale plugin není nahrán

K tomuto stavu je možné se dostat v okamžiku, kdy uživatel již provedl nainstalování Silverlight pluginu, ale předtím měl instalovánu starší verzi, která zabraňuje nahrání nově instalované. V takovém případě je třeba restartovat prohlížeč, aby mohla být nahrána nová verze Silverlightu.

Nainstalována starší verze Silverlightu

Vaše aplikace vyžaduje novější verzi Silverlightu, než která je aktuálně nainstalována na klientský počítač. Na stránce by se tedy měla nacházet informace o nutnosti nainstalovat novější verzi a taktéž informace o tom, že poté bude nutné prohlížeč restartovat. A právě zde upotřebíme výše zmíněné znalosti o dobrém uživatelském zážitku

Silverlight není nainstalován

Doufám, že s tímto stavem se budete setkávat čím dál méně. Ale znamená to, že uživatel by si měl, tak jako v předchozím případě, nainstalovat příslušnou verzi Silverlightu. A jako v předchozím případě, nezapomeňte na poskytnutí uživatelského zážitku.

Nekompatibilní konfigurace

Samozřejmě se může stát, že si naší stránku, kde máme Silverlight aplikaci zobrazí někdo, kdo nevlastní podporovaný prohlížeč nebo jeho konfigurace neumožňuje běh Silverlight aplikací. I v tomto případě bychom měli uživateli dát na vědomí o co přichází ;-)

Upgrade začal

Jedná se o přechodný stav, ke kterému se dostaneme v okamžiku, kdy uživatel začal s instalací novější verze. V takovém případě je vhodné mu dát najevo, že po skončení samotné instalace bude třeba restartovat prohlížeč.

Instalace začala

Opět se jedná o přechodný stav, avšak v tomto případě v okamžiku, kdy si uživatel instaluje Silverlight prvně. Zde může být po nainstalování doplňku vyžadován refresh stránky prohlížeče a je vhodné na to uživatele upozornit.

Programujeme v HTML stránce

Jak jste možná četli v předchozích příspěvcích, umístit Silverlight do stránky je možné několika způsoby a stejně tak je možné zajistit a zachovat se k různým stavům při instalaci Silverlightu ve stránce. Já jsem si oblíbil a taktéž doporučil používání Silverlight.js ve spolupráci s JavaScriptem a v tom budu pokračovat i dnes. Jen zmíním, že JavaScriptu se většinou stejně nevyhnete, byť samozřejmě můžete použít i vložení pomocí elementu <object>.

Na následujícím obrázku je zobrazen výchozí vzhled upoutávky uživatele na možnost – či nutnost – instalace Silverlightu v okamžiku, kdy není možné nahrát příslušnou verzi Silverlightu do stránky.

Jak vidíte, není to nic úchvatného, co by uživatele více motivovalo k nějaké akci, byť je to nejčastější případ. Já se v dalším textu budu soustředit na to, jak tento stav změnit a jak můžete poskytnout uživateli větší uživatelský zážitek ještě před samotným spuštěním Silverlight aplikace.

Co když tedy chcete na stránce, kde prezentujete vaši aplikaci umístit nějaký poutavý obrázek s textem, který vyzve uživatele k potřebné akci? Tudíž potřebujete nahradit onen výchozí vzhled a nahradit jej vaším vlastním obrázkem, který bude navíc zapadat do koncepce celé stránky. Výsledné řešení si můžete prohlédnout na dalším obrázku a níže popíši, jak se dá k podobnému cíli dospět.

 

 

Toto nahrazení samozřejmě můžete provést přímo v HTML elementu <object>, kdy dovnitř elementu za všechny parametry zapíšete HTML, které zpřístupní obrázek a text. Tato část kódu se zobrazí v případě, že není možné nahrát příslušný plugin do stránky.

Já bych však raději prezentoval druhý způsob a to za použití JavaScriptu a využití knihovny Silverlight.js. Nejdříve si tedy připravíme potřebné html a to si umístíme do proměnné, abychom mohli nabídnout uživateli stažení Silverlight instalační aplikace, tak si taktéž musíme zajistit vygenerování odkazu na ní – toto nám zajišťuje Silverlight.js knihovna a poslední částí je pak samotné volání metody createObjectEx a předání všech potřebných parametrů. Pojďme se tedy podívat, jak vypadá výsledný kód:

var message = "<a href=\"{1}\">Nainstalujte</a> si Silverlight a využijte naší aplikace pro snazší organizaci práce v týmu."
var getSL = "javascript:Silverlight.getSilverlight('4.0')";
var altHtml = "<div><p style=\"position:absolute; left:560px;top:200px;width:200px;\">{0}</p><a href=\"{2}\"><img src=\"/Img/gr-2.jpg\" alt=\"Nainstaluj Silverlight\" style=\"border-style:none\" /></a></div>";
altHtml = altHtml.replace("{0}", message);
altHtml = altHtml.replace("{1}", getSL);
altHtml = altHtml.replace("{2}", getSL);
Silverlight.createObjectEx({
    source: "ClientBin/SilverlightApplication1.xap",
    parentElement: document.getElementById("silverlightControlHost"),
    id: "mySilverlightControl",
    properties: {
        height: "300",
        width: "400",
        background: "orange",
        isWindowless: "true",
        frameRate: "30",
        inplaceInstallPrompt: true,
        version: "4.0",
        ignoreBrowserVer: "true",
        enableHtmlAccess: "true",
        alt: altHtml
    }
});

Právě odkaz na naše HTML je pak předáván přes vlastnost properties nazvanou alt.

V případě, že bychom chtěli uživatele upozornit i na další stavy, do kterých se může dostat při používání Silverlight pluginu a během jeho instalace, můžeme využít metod z knihovny Silverlight.js.

Na následující ukázce vidíte možnosti použití, předpokládám, že příslušné naplnění proměnných končících na Prompt dokáže již každý, dle výše uvedeného příkladu:

Silverlight.onRestartRequired = function () {
    document.getElementById("silverlightControlHost").innerHTML = restartPrompt;
}
Silverlight.onUpgradeRequired = function () {
    document.getElementById("silverlightControlHost").innerHTML = upgradePrompt;
}

Nekompatibilní konfigurace

V případě, že chceme ošetřit i stav, kdy uživatel nepoužívá podporovaný prohlížeč nebo jeho konfigurace neumožňuje běh Silverlight pluginu, pak si nevystačíme jen s knihovnou Silverlight.js, ale musíme sáhnout po jejím rozšíření, které je v knihovně Silverlight.supportedUserAgent.js. Při nahrávání stránky si pak v metodě load ověříme obdobnou funcí, zda máme k dispozici kompatibilní konfiguraci či nikoliv:

function checkSupported() {
    if (!Silverlight.supportedUserAgent()) {
        document.getElementById("silverlightControlHost").innerHTML = notSupportedPrompt;
    }
}

Závěrem

V dnešním článku jsem se snažil ukázat, jak uživateli dopřát lepší uživatelský prožitek v okamžiku, kdy ještě nemá k dispozici Silverlight plugin. Jakožto vývojáři Silverlight aplikace máte možnost ovlivnit vzhled výzvy k instalaci a následně tak i chování koncového uživatele. Po dnešním článku byste měli být schopni vložit do stránky odkaz na vaši Silverlight aplikaci či ji zpřístupnit uživateli a v příštích článcích si tak můžeme ukázat, jak vlastně takovou Silverlight aplikaci vytvořit. I když i příští článek bude částečně využívat JavaScriptu, dojde také na XAML.