Za većinu veb sajtova se može reći da su sastavljeni iz delova. Neki delovi su više, a neki manje zanimljivi. Baš kao kad volite određeni sladoled zbog neke voćne glazure, čokoladnih mrvica ili karameliziranog lešnika, pa vam je to jedino zanimljivo, jer mu je mlečni ostatak isti kao i kod bilo kog drugog. Tako je i sa sajtovima. Nekada ih posećujete zbog samo jedne male, slatke rubrike, koja i nije uvek na dohvat ruke. Čekajući da se učitaju brojni (mlečni) sadržaji glomaznog sajta, žrtvujete strpljenje i vreme jer nemate izbora. I sve to radite da biste na kratko bacili pogled na vremensku prognozu, sportske rеzultate, top listu, onlajn aukciju ili možda naslove najnovijih vesti. A kako bi to bilo kada bi sajt bio podeljen na sitne komadiće, pa da vi izaberete ono što vam se sviđa i svoju pažnju poklonite baš tom segmentu? Ako vam se ova ideja sviđa, niste jedini kome je to palo na pamet. Zato je počev od Internet Explorera 8, uvedena tehnologija za seckanje i pregled delimičnog sadržaja Internet stranica, nazvana web slices (isečci veba, odnosno mreže). U ovom Supertezinom tekstu savladaćemo veštinu izrade veb isečaka (za web mastere) i saznati sve prednosti njihove upotrebe (za posetioce sajtova).Zbog dobrog prijema, web slices su obezbedili svoje mesto i u narednim verzijama Internet Explorera. Veb isečci (web slices) se dodaju u traku omiljenih Internet lokacija (Favorites) pa su korisnicima Internet Explorera lako dostupni. Postupak njihove instalacije izvodi se u dva klika mišem, a korist je očigledna. Dok vam glavni prozor browsera prikazuje jednu stranicu, klikom na neki od isečaka, dobijate njegov sadržaj u manjem prozoru. Dovoljno je da bacite kratak pogled na prozor isečka i odmah vidite traženi sadržaj. Tako ćete brzo utoliti glad za informacijom i ujedno proceniti zanimljivost sadržaja. Dalje akcije mogu biti gašenje prozora isečka (klikom bilo gde van njega) ili odlazak nastranicu prikazanog sadržaja (obično klikom na link unutar veb isečka).

Kako napraviti web slice?

Budući da je web slice ništa drugo do minijaturna HMTL stranica, svako ko se iole razume u taj nemušti jezik, potencijalni je kandidat za izradu samostalnog veb isečka. Postoji par stvar na koje treba obratiti pažnju, ostalo je klasika (ili možda džez).

<div id="vreme" class="hslice">
    <h3 class="entry-title"><span>Beograd</span>, Vremenski podaci</h3>
    <img src="images/sunce.png" id="image" alt="Sunčano, za koji mesec." height="128" width="128" />
    <div class="entry-content" style="font-size:2.5em;margin-top:24px;font-weight:bold;">28&deg; C</div>
    <p>Sunčano</p>
    <p><i>Biće, na leto!</i></p>
    <p>Prognoza za narednih 6 meseci</p>
</div>

Posmatrajući gornji primer veb isečka, uočićemo 3 važna elementa koji su praktično jedini (neophodni) uslovi za njegovu izradu:

  • class=”hslice” klasa koja saopštava Internet Exploreru postojanje veb isečka.
  • class=”entry-title”, klasa koja definiše naslov veb isečka.
  • class=”entry-title” klasa koja definiše sadržaj veb isečka.

Za one manje upućene, reći ćemo da klase predstavljaju skup pravila kojim se određuje (uglavnom) vizuelni identitet nekog veb sadržaja. Stranice koje lepo izgledaju iza sebe imaju na tone malih klasa u kojima je definisan font, boja, veličina teksta, margine i još mnogo sitnih detalja. U našem primeru oznakom DIV obeleženi su segmenti čiji je izgled (ali i ponašanje) definisano nekom od pomenutih klasa.

Dakle, priprema veb isečka (web slice) prilično je jednostavna, čak i za laike. Ukoliko sebe smatrate manje iskusnim kreatorima HTML sadržaja, slobodno iskopirajte gornji primer i tekstove označene zelenom bojom zamenite prema vašim potrebama i željama.

Dodavanje veb isečka u traku Favorites Internet Explorera

Ovaj zadatak je prava boza, što bi rekli iskusni posetioci tradicionalnih poslastičarnica. Čim odete na neku stranicu koja krije veb isečke (web slices) Internet Explorer će pozeleneti jednu od ikonica na traci sa komandama (command bar; kod tačke 1). U slučaju da posetite stranicu dnevnih novina Blic, osim kod tačke 1, primetićete zelenu ikonicu i kad se nađete u blizini segmenta sa najnovijim vestima (tačka 2). Ukoliko levim tasterom miša klilknete na ovu ikonicu, pokrenućete postupak instalacije, preciznije rečeno, dodavanja veb isečka u vašu traku omiljenih veb lokacija (Favorites). Na nekim sajtovima, kao recimo na Supertezi postoji dugme čijim se klikom pokreće instalacija. Dugme se kreira veoma jednostavnim kodom:

<input type=”button” value=”Superteza Web Slice za Internet Explorer 8 i 9” onclick=’window.external.AddToFavoritesBar(“http://www.superteza.com/webslice.php“,”Superteza“, “slice”);’ />

Naslov dugmeta upisujete unutar value sekcije, putanju do samog veb isečka unosite kao prvi parametar unutar zagrade, dok je drugi rezervisan za ime samog isečka. Sve se lepo vidi gore, tako da bi svako dalje razglabanje bilo suvišno. Evo i dugmeta, pa vi kliknite.

Čim se pojavi ovaj dijalog, pred vama je samo još jedan klik do kraja instalacije. Ne štedeći levi taster miša, jednom pritisnite dugme Add to Favorites bar (dodaj u traku omiljenih; kod tačke 1) i posao dodavanja veb isečka biće završen.

Sad preostaje samo čisto uživanje u plodovima minulog rada: Klikom na ime veb isečka (tačka 1), pokrenuće se minijaturni prozor (tačka 2) u kome ćete istog momenta dobiti tražene sadržaje. U većini slučajeva biće to informacije o trenutnoj ponudi na aukcijskom sajtu, vremenskim podacima, stanju na putevima ili (kao što je Supertezin slučaj) o najnovijim tekstovima. Prozor veb isečka ima još dva elementa (tačka 3) od kojih jedan predstavlja strelica udesno, a drugi simbol za osvežavanje stranice (refresh). Prvi vas vodi na lokaciju samog veb isečka, a drugi radi baš ono što mu je i namena: osvežava sadržaj.

Otkrivamo tajni Supertezin veb isečak

<html><head>
<title>Superteza – Mesto za svakog</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<style>
a:link { font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;font-size: x-small; color: #090; text-decoration: none; }
</style>
</head>
<body>
<div id=”1″ class=”hslice”>

<h2 class=”entry-title”>
<img src=”http://www.superteza.com/superteza_logo.jpg” alt=”" width=”160″ height=”80″ />
</h2>
<div class=”entry-content”>
<ol>

<?php
require_once(‘wp-load.php’);
$results = $wpdb->get_results(“SELECT post_title, guid
FROM $wpdb->posts where post_status = ‘publish’
ORDER BY ID DESC LIMIT 5″);
foreach($results as $row) {
echo “<li><a href=’”.$row->guid . “‘>”
. $row->post_title .”</a></li> \n”;
}
?>

</ol>
</div>
</div>
</body>
</html>

Ovaj ingeniozni komad HTML koda stavljamo na raspolaganje svim zainteresovanim vlasnicima blogova koje pogoni WordPress. Posle mnogo muke, Superteza je uspela da obuzda nestašni spoj HTML-a i PHP skripta i potera svoj web slice. Gornji primer je rezultat našeg veb isečka (web slice) koji nije ništa spektakularno, ali je zato funkcionalan. Od vas zavisi hoćete li se zadovoljiti ovim rešenjem ili tražiti nešto više. Za one veštije, slede resursi iz kojih ćete moći da unapredite svoja znanja o veb isečcima. Želimo vam puno sreće!

http://msdn.microsoft.com/en-us/library/cc956159%28v=VS.85%29.aspx

http://blogs.msdn.com/b/ie/archive/2009/03/03/create-a-dynamic-web-slice-in-5-minutes.aspx

http://www.labnol.org/internet/write-ie8-web-slice-for-blogs/8013/