Internet Explorer (IE8) tõi endaga kaasa uue põneva lisa nimega veebilõik (web slice). Misasi see on?
Olenevalt rollist või perspektiivist on sellel kaks omavahel seotud tähendust. Arendaja jaoks pakub web slice võimalust mingit osa lehest või mingit informatsiooni lehelt eraldi vaadatavaks teha. Sellega seoses on natukene lisatööd. Kasutaja perspektiivist saab nüüd jälgida teatud eriti huvitavat informatsiooni ilma, et peaks konkreetsele lehele minema. Seda informatsiooni on võimalik presenteerida tüüpilisi veebitrikke (javascript, html, …) või Sliverlighti kasutades. Piiranguks on veebi tehnoloogiad.
Microsoftil on olemas päris hea seletav illustratsioon sellest:
Antud postituses proovin seletada ja demonstreerida Eneta foorumi veebilõigu näite põhjal, kuidas käib veebilõigu loomine ja mis nüanssidele tasub tähelepanu pöörata. Antud veebilõik pakub Eneta foorumi kasutajatele võimalust jälgida viimaseid foorumi teemasid ilma, et kasutaja peaks foorumi lehele minema. Küll aga saab minna konkreetse teema juurde, kui mõni huvi pakub. Lisaks annab veebilõik märku muutudes rasvaseks lemmikute real (favorites bar), kui sisu (lisandunud on uus teema foorumisse) uueneb. Veebilõik kasutab infoallkana Eneta foorumi RSS –i voogu.
Pildi Eneta foorumi veebilõigust leiate vasakult (see ei ole hetkel laivis, vaid lahendusse integreerimisel). Laivis muutub kättesaadavaks vast mõne nädala jooksul.
Kuidas veebilõiku luua?
Veebilõigu loomiseks on vähemalt kaks viisi. .NET –i sõprade jaoks on Microsoft loonud veebilõikkude arendamist lihtsustava Web Application Toolkiti IE8 –le. Antud toolkit sisaldab endas näiteid veebilõikude loomisest veebi lehtedele kui ka valmis ASP.NET –i control –e, mis aitavad realiseerimisel. Ka näited on ehitatud ASP.NET –i peale.
Teine variant on kasutada elementaarseid html –i ja css –i oskusi ning luua kõik ise (universaalne). See on lähenemine, mida mina kasutasin ja demonstreerin antud postituses. Loodud HTML –i / CSS –i (ehk siis veebiliidese) integreerin postituse lõpus ASP.NET –ga, selleks veebilõik kuskilt andmed ka saaks.
Enne arendamise alustamist vajame vastust tehnilisele küsimusele – millest koosneb veebilõik?
Millest koosneb veebilõik?
Veebilõik koosneb html –i elementidest, millel on eriliselt nimetatud CSS –i klassid (hslice, entry-title, …). IE skännib veebilehte ja kui leiab html elemendid nende eriliste css –i disaini klassidega, siis tõlgendab ta neid kui veebilõike ja kuvab neid eriliselt lehel (roheline kastike iga veebilõigu ümber ning kasti üleval vasakus nurgas roheline ikoon – nagu pildil illustreeritud).
Kõige lihtsam veebilõik
Kõige lihtsam veebilõik koosneb järgnevatest elementidest:
1: <div class="hslice" id="websliceHead">
2: <div class="entry-title" id="websliceTitle">The simplest webslice.</div>
3: </div>
Need kaks html elementi koos klassidega hslice ja entry-title on kohustuslikud. Muidugi ei ole nii lihtne veebilõik eriti kasulik või praktiline.
Täiendavad attribuudid
Veebilõigul saab olla lisaks pealkirjale ka muid attribuute. Järgnevalt tutvustan neid.
HTML element klassiga entry-content kujutab endast veebilõigu sisu osa. Kõik antud elemendi sees olev loetakse veebilõigu sisuks ning selle sisu muutumist käib IE regulaarselt (määratud sagedusega) kontrollimas. Juhul kui sisu on muutunud (võrreldakse vana sisu uuega), muutub IE lemmikute real veebilõik rasvaseks. See võib olla ka sisu, mida veebilõik näitab kui avada lemmikute realt. Näide html –st entry-content klassiga:
1: <div id="enetaForumWebSliceContent" class="entry-content">sisu</div>
Nüüd ees pool mainisin, et entry-content võib olla sisu, mida näidatakse kui vajutatakse veebilõigule lemmikute real. See on üks lihtsamaid lahendusi, aga on ka alternatiive. Üks lisa attribuut, mida veebilõigul määrata saab on alternatiivne veebilõigu näitamise asukoht ehk alternative display source. See sannab võimaluse näidata ühte sisu veebilõigu lisamisel ja teist sisu kui lemmikute real veebilõiku vajutatakse. Näide sellisest elemendist:
1: <a rel="entry-content" href="/Web%20slices/SliceOne.aspx" style="display: none;"
2: id="enetaForumAlternativeDisplayUrl"></a>
Tähelepanu! Nüüd üks tähtsamaid märkusi antud attribuudi juures on see, et kuigi veebilõigule vajutades kuvatakse nüüd sisu alternatiivselt aadressilt, siis sisu uuenemist käib IE jätkuvalt kontrollimas veebilõigu lisamise kohast (vähemalt hetkel – vaata nippe all pool).
Mainida on veel jäänud kaks kasulikku attribuuti – bookmark ja soovituslik värskendamise sagedus (ttl – time to live).
Bookmark võimaldab muuta aadressi, kuhu noolele (punase kastikese sees kõrval oleval pildil) vajutades kasutaja viiakse.
Time to live (ttl) ehk soovituslik värskendamise sagedus määrab ära vaikimisi seade, kui tihti IE peaks kontrollima veebilõigu sisu uuenemist. Seda saab kasutaja peale veebilõigu lisamist muuta. Järgnevalt näited mõlemast:
1: <p style="display: none;">
2: This item updates every <span class="ttl">15</span> minutes.</p>
3: <a rel="bookmark" href="http://www.eneta.ee/Foorum" style="display:none;">
4: Bookmark – Eneta foorum</a>
Pange tähele, et ttl puhul on elemendi klassiks “ttl” ja bookmark puhul on tegu lingiga millel on attribuut rel ja väärtus “bookmark”. ttl määratakse ära minutites ja 15 on minimaalne värskendamise sagedus.
Tähelepanu! Tasub veel mainida, et kui teil on veebilõigu sisu sees linke, millele eeldate et kasutaja vajutab, siis need lingid peavad kasutama sihina (target) _blank väärtust, et lingi sisu ei avaneks veebilõigu eelvaate aknas vaid uues tab –s. Näide:
1: <a href="http://mingiurl" id="link" class="link" target="_blank" title="pealkiri" />
Järgnevalt võiks luua veebilõigu, mis kuvab meile Eneta foorumi RSS –i põhjal viimati lisandunud foorumi teemasid koos autori, kommentaaride arvu ning lingiga teemale. Muidugi selliste andmete kuvamiseks peab RSS ka vajalikku informatsiooni sisaldama (mida eneta foorumi uudistevoog ka sisaldab).
Eneta foorumi teemade veebilõigu loomine
Samm 1 – veebilõigu lisamise lehekülg
Kasutades ees pool jagatud teadmisi lõin lehekülje, kust saaks kasutajad veebilõigu lisada. Originaalis saab selleks muidugi eneta foorumite lehekülg, aga hetkel ei ole integratsiooni veel toimunud ja toon ära vaid HTML –i, mis hiljem paigutub Eneta foorumi lehele. Võtke seda ASP.NET –i veebilehe koodi (peaaegu puhas HTML) kui kogu eelneva jutu kokkuvõtvat osa (näidet).
1: <div class="hslice" id="enetaForumWebSliceHeader">
2: <p class="entry-title" style="display: none;" id="enetaForumWebSliceTitle">
3: Eneta Foorum</p>
4: <div id="enetaForumWebSliceContent" class="entry-content">
5: <span id="enetaForumDescription">Eneta foorum - viimased teemad</span>
6: <br />
7: <span id="enetaForumWSLastUpdated" runat="server">
8: Webpage has expired;10.03.2010 11:57</span>
9: </div>
10: <a rel="entry-content" href="/Web%20slices/SliceOne.aspx" style="display: none;"
11: id="enetaForumAlternativeDisplayUrl"></a>
12: <p style="display: none;">
13: This item updates every <span class="ttl">15</span> minutes.</p>
14: <a rel="bookmark" href="http://www.eneta.ee/Foorum" style="display:none;">
15: Bookmark – Eneta foorum</a>
16: </div>
Antud koodis on ühel html elemendil runat=”server” attribuut ja see võimaldab mul veebilehe programmikoodis uuendada (muuta) veebilõigu sisu. Nii pea kui uus teema on Eneta foorumi uudistevoogu jõudnud saan ma sellest teada ja muudan veebilõigu sisu (kuupäev kellaajaga saab olema viimase teema oma).
Selle tulemusena kõik IE –d, kes jälgivad antud veebilõigu sisu muutumist – muutuvad rasvaseks ning annavad kasutajale märku, et sisu on uuenenud.
Samm 2 – alternatiivne veebilõigu sisu lehekülg
Tegin veebilehe, mis kuvab sisu vastavalt veebilõigu disaini juhendile (Internet Explorer 8 Web Slice Style Guide). Siin ei ole ühtegi eriklassi vaja elementidel enam kasutada, vaid saab disainida vastavalt oma soovile.
Eesmärk on kuvada sisu võimalikult mõnusalt ja arusaadavalt kasuaja jaoks. Üks tähelepanek on – sisu soovituslik suurus on 320x240px. See võib ka suurem olla, aga sellisel juhul on vaja oma html elemendis millel klass “hslice” ära määrata veebilõigu suurus (pikkus ja laius). Kusjuures see suuruse määramine mul päris korrektselt toimima ei läinudki, aga nii see vähemalt dokumentatsiooni järgi on.
Vasakul näete ka tulemust!
Koodi ei hakka siin juures ära tooma, lisaväärtust see ei paku. Hiljem on võimalik igal ühel see Eneta foorumi integreeritud kood codeplexist alla tõmmata.
Antud lehekülg salvestab 10 viimase teema RSS –i vahemälusse ning käib regulaarselt kontrollimas, kas on uus teema lisandunud. Kui on siis uuendatakse andmeid ja veebilõigu lisamise lehekülg kuvab viimase teema kuupäeva ning kellaaega ja iga IE, mis tuleb kontrollima veebilõigu sisu, saab teada et sisu on muutunud.
See nüüd on väga lihtne veebilõik. Ennast ei pea piirama puhta HTML –ga, võib ka kasutada Silverlighti või muud tehnoloogiat, et teha veebilõigu sisu attraktiivseks. Eesmärk on pakkuda konkreetset informatsiooni kasutajale võimalikult meeldival kujul nii et kasutaja ei peaks minema täis leheküljele alati.
Tüüpiliseks näiteks on oktsionid – kus kasutaja saab jälgida temale huvitavat objekti ja teha pakkumisi selle ostmiseks.
Veel seoses veebilõiguga
Nipp 1 - favicon
Selleks et veebilõigu disain oleks terviklik tasub ära määrata lemmiku ikoon (favicon).
1: <head>
2: <link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon" />
3: </head>
IE –s saab lemmikute riba konfigureerida nii, et peale ikooni midagi muud ei olegi nähtav ja lemmikute ikooni kasutamine teeb õige veebilõigu leidmise palju lihtsamaks, seega on tegu väga praktilise täiendusega.
Nipp 2 - alternatiivne uuendamise aadress
On olemas attribuut – a rel=”feedurl”. Näide:
1: <a rel="feedurl" href="/Web%20slices/Update.aspx" style="display: none;"
2: id="alternativeUpdateSource"></a>
Tähelepanu! See tuleb paigutada lehele, kust veebilõik lisatakse. Antud lingi lisamine suunab veebilõigu ümber alternatiivsele asukohale. Nii sisu muutumise kontrollimine kui ka muu metainfo veebilõigul loetakse seejärel alternatiivselt uuendamise leheküljelt! See tähendab et veebilõigu lisamise lehel on nüüd järgnev HTML:
1: <div class="hslice" id="enetaForumWebSliceHeader2">
2: <p class="entry-title" style="display: none;" id="enetaForumWebSliceTitle2">
3: Eneta Foorum - alternatiivne update source</p>
4: <a rel="feedurl" href="/Web%20slices/Update.aspx" style="display: none;"
5: id="alternativeUpdateSource"></a>
6: </div>
Ja Update.aspx leht sisaldab kõikki veebilõigu attribuute ja klasse ning võib suunata veebilõigu sisu edasi alternatiivsele sisu kuvamise lehele või siis kuvada sisu ise elemendis millel on entry-content klass.
1: <div class="hslice" id="enetaForumWebSliceHeader">
2: <p class="entry-title" style="display: none;" id="enetaForumWebSliceTitle">
3: Eneta Foorum - alternatiivne display source</p>
4: <p class="entry-content">
5: <span id="enetaForumWSLastUpdated" runat="server">
6: Webpage has expired;10.03.2010 11:57</span>
7: </p>
8: <a rel="entry-content" href="/Web%20slices/SliceOne.aspx" style="display: none;"
9: id="enetaForumAlternativeDisplayUrl"></a>
10: <p style="display: none;">
11: This item updates every <span class="ttl">15</span> minutes.</p>
12: <a rel="bookmark" href="http://www.eneta.ee/Foorum" style="display: none;">
13: Bookmark – Eneta foorum</a>
14: </div>
Antud juhul mina suunan edasi samale alternatiivsele sisu kuvamise lehele, mis ees pool juba näidatud.
Alternatiivse uuendamise aadressi kasutamisel on mitmed eelised. Alternatiivse uuendamise kohana saab kasutada lihtsamat lehekülge kui see, kust veebilõik lisatakse ning niimoodi saada parem jõudlus. Niisugune eraldatus võimaldab paremat hallatavust ning hiljem on lihtsam muuta.
Alternatiivne uuendamise url võib viidata ka RSS –le või Atom uudistevoole, mis tagastab vaid ühe elemendi.
Tähelepanu! Ainukene asi, mis hetkel ei toiminud alternatiivse uuendamise asukohaga oli ttl –i soovitusliku aja määramine. Seda lihtsalt ei võetud omaks, kuigi seadistatud on. By default on uuendamise sageduseks 60 minutit.
Nipp 3 – vaikimisi veebilõik
Ühel lehel võib olla mitmeid veebilõike. Sellest tulenevalt võib olla vajadus määrata ära missugune nendest on vaikimisi valitud veebilõik (et mis lisatakse vajutades lisamisnuppu kodu ikooni kõrval).
Selleks on olemas attribuut elemendiga link:
1: <link rel="default-slice" type="application/x-hatom" href="#auction" />
Kus, href viitab veebilõigu “hslice” klassiga elemendi id –le.
Nipp 4 – lihtne luua olemasolevale leheküljele
Veebilõiku saab ka väga lihtsalt luua olemasolevast lehest võttes kasutusele õiged klassid/või html elemendid koos klassidega.
Nipp 5 – IE8 lisandite lehekülg
Kohalike lisandite koondamise jaoks on loodud ka Eesti IE8 lisandite veeb aadressiga http://www.microsoft.ee/ielisandid. Oma lisandeid sinna lehele saab, kui kirjutate soovist aadressile eesti@microsoft.com.
Kes soovib hetkel juba Eneta foorumi teemade veebilõiku testida (antud kahte erinevat veebilõigu lähenemist laivis testida) leiab selle aadressilt http://dev.melborp.net/. Kui te lähete sellele lehele, siis leiate kaks veebilõiku lehelt kasutades rohelist ikooni IE8 –s (illustratsioon vasakul).
Ja sellega sai enamus veebilõigu loomisega seotud kirjeldatud. Juurde võite lugeda all olevatelt aadressidelt, kus kirjeldatatakse disainimise reegleid/praktikaid lähemalt kui ka veel mõnda attribuuti. Näiteks ei maininud ma midagi kasutajanime/parooli määramise võimalikkusest veebilõigule, nii et veebilõik käiks ligi parooliga kaitstud sisul.
Võimalikud kasulikud lingid