Internet Explorer 8.0 için Web Slice hazırlayalım.

0 dakikada yazıldı

9144 defa okundu

Düzenle

IE8.0 ile gelen ve biz web yazılım geliştiricilerin önümüzdeki dönemde
belki de en fazla uygulayacağımız yeniliklerden biri Web Slice
yapısı. Özellikle tasarımcılar için Expression Design ve Photoshop gibi
araçlardan tanıdık gelecek olan Slice mantığı ile birebir ayı mantıkla
bir uygulamadan bahsediyoruz. Kullanıcı hazırlamış olduğunuz web
sitesinin belirli bir bölümü keserek kendi tarayıcısının bir parçası
haline getiriyor. Tabi bu kesme işleminin nasıl yapılabileceği ve
sonucunun ne olacağı konusunda bire bir yazılımcılar olarak biz devreye
giriyoruz. Konuyu fazla uzatmadan ilk önce çalışan bir Web Slice
nasılmış onu inceleyelim.

Web Slice nedir? ne değildir?

Örnek olarak şu an yayında olan canlı bir siteyi inceleyelim. EBay'in IE
8 Beta 2 uyumlu sitesini buradan
inceleyebilirsiniz. Sitenin içerisinde ürünlerde bir aram
yaptırdığınızda arama sonucunda gelen listeden herhangi bir ürünün
üzerine fare ile gittiğinizde ürünün etrafında ilginç bir yeşil çerçeve
ve solunda da özel bir ikon beliriyor.

Canlı bir WebSlice'a ait ikon!
Canlı bir WebSlice'a ait ikon!

Yukarıdaki resimde gördüğünüz yeşil ikona tıkladığımızda karşımıza
"Subscripe to a Web Slice" uyarısı çıkıyor. "Add" düğmesine basarak bu
Slice'ı IE 8.0'ın arayüzüne eklemiş oluyoruz.

WebSlice'ımız artık IE 8.0 araç çubuğunda duruyor.
WebSlice'ımız artık IE 8.0 araç çubuğunda duruyor.

Biraz önce Web Slice'ını eklediğimiz ürünü artık IE 8.0 araç çubuğundan
takip edebiliyorum. Şu an için standart ayarlarda IE 2 saatlik
aralıklarla gidip bu Web Slice'ın yenilenip yenilenmediğini kontrol
edecek ve eğer yenilenmiş ise tarayıcının üst kısmında bu Web Slice
kalın yazılarla gözükecek. İsterseniz kontrol edilme süresini Web
Slice'a sağ tuş tıklayarak gelen menünden "Properties" komutunu vererek
siz de ayarlayabilirsiniz.

Peki bu iş nasıl yapılıyor?

İlk olarak hazırlamış olduğunuz web sitesinde nerelerin birer Web Slice
olacağına karar vermeniz gerekiyor. Web Slice olarak yerlere HTML
kodları içerisinde Microformats ile işaretlemeler yapıyoruz.
Microformats'ı bir HTML eklentisi gibi düşünebilirsiniz, HTML
elementlerine farklı anlamlar kazandırmak için kullanılan bir standart.
Buna bir örnek de XFN olabilir. Web Slice'lar da Microformats üzerinden
çalışıyorlar.

        <div class="hslice" id="urun1">

            <div class="entry-title item_title">

                ÜRÜN ADI

            </div>

            <div class="entry-content">

                Ürünle ilgili özellikler

            </div>

            <a rel="feedurl" href="/slicebilgi.ashx?ID=1"></a>

        </div>

Yukarıda gördüğünüz HTML kodu bir WebSlice'ı tanımlıyor. Bu kod
içerisindeki tagların DIV olmalarının hiçbir önemi yok. Esas önemli
olanlar Microformat'lar yani class isimleri!

Bir WebSlice'ın oluşturulabilmesi için kesinlikle tüm WebSlice'ın bir
ana HTML elementi içerisinde yer alması gerekiyor. Bu HTML elementinin
class ismi olarak hslice'a sahip olması şart. Unutmayın bu isimlerde
CSS sınıfları tanımlayarak aynı anda bu classları görsel değişiklikler
için de kullanabilirsiniz fakat WebSlice'ın yapısının IE 8.0'ın
anlayabilmesi için classların isimlerinin değiştirilmemesi gerekir.
hslice olan ana elementin kesinlikle bir ID'ye sahip olması
gerekiyor, bu ID'nin standart HTML kuralları çerçevesinde sayfada tek
olması da şart.

Yukarıdaki örnek kodumuzu incelersek bir de entry-title CSS sınıfını
göreceksiniz. Bu şekilde işaretlenmiş bir elementin içerisinde metin
tarayıcı tarafından Web Slice'ın ismi olarak algılanacak ve kullanıcıya
da bu şekilde gösterilecektir. Ayrıca Web Slice'ın IE içerisinde araç
çubuğunda ilk gözüken kısmı da entry-title'dan alınır.

entry-content şeklinde işaretli kısımlar bu sayfadan kesilerek Web
Slice'ın tarayıcının araç çubuğundan ulaşılacak kısımlarını tanımlıyor.
Araç çubuğunda herhangi bir WebSlice'a tıklandığında sadece site
içerisinde bu WebSlice ile ilişkili olarak entry-content şeklinde
işaretli yerler alınarak gösterilecektir. Bunun haricinde isterseniz
WebSlice'ın araç çubuğundan gösterilecek kısmını farklı kaynaklardan da
alabilirsiniz. Örneğin harici bir RSS kaynağı kullanılabilir.

Örneğimizde içinde yazı olmayan bir link "a" tagı görüyorsunuz. Bu tag
kullanıcıya gösterilmeyecek fakat önemli olan bu tagın rel
özelliğinde feedurl değerini taşıması. Böylece WebSlice tarayıcıya
eklendiğinde tarayıcı WebSlice içerisinde gösterilecek veriyi
entry-content olarak ayarlanmış bölümlerden değil de doğrudan harici
bir RSS kaynağından alacak.

RSS kaynağı nasıl ayarlanır?

Eğer WebSlice içerisinden harici kaynak kullanılacaksa en mantıklısı bir
RSS kullanmak olacaktır. Tabi WebSlice'ın sayfa içindeki rel
özelliği feedurl olan adresin bu WebSlice'a özel olması şart. Yani
bizim örneğimizde 1 numaralı ürünle ilgili RSS kaynağının gelmesi için
slicebilgi.ashx dosyasına parametre olarak ürün ID'sini gönderiyoruz.
Söz konusu adresten çıkan RSS içerisinde ilk item nesnesi doğrudan
IE tarafından alınarak Web Slice içerisinde gösterilecektir.

<rss version="2.0">

  <channel>

    <title>WebSlice RSS</title>

    <ttl>120</ttl>

    <item>

      <title>Ürün Bilgisi</title>

      <description>HTML <b>kod</b>
gider</description>

    </item>

  </channel>

</rss>

Yukarıdaki gibi basit bir RSS kaynağının Generic Handler(ASHX) üzerinden
aktarılıyor olması yeterli. ASHX'in arkasında VB veya C# kodunuzda
gelen ID parametresine göre veritabanından veri alabilir ve uygun
içeriği üretebilirsiniz. Item tagları içerisinde title IE
içerisinde araç çubuğunda WebSlice'da gözükecektir. Description
içerisinde kod ise doğrudan Web Slice'ın içeriğini tanımlar.

Yukarıdaki gibi bir RSS'i rahatlıkla XLINQ ile yaratabilirsiniz.

[VB]

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

    context.Response.ContentType = "text/xml"

 

    Dim RSS = New XDocument()

    RSS.Add(New XElement("rss", New XAttribute("version", "2.0"), _

               New XElement("channel", _

                  New XElement("title", "WebSlice RSS"), _

                  New XElement("ttl", "120"), _

                  New XElement("item", _

                    New XElement("title", "Ürün Bilgisi" &
context.Request.QueryString("id")),
_

                    New XElement("description", "HTML <b>kod</b> gider")))))

    context.Response.Write(RSS.ToString())

End Sub

[C#]

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/xml";

 

        XDocument RSS = new
XDocument();

        RSS.Add(new XElement("rss",

            new XAttribute("version", "2.0"),

            new XElement("channel",

                new XElement("title", "WebSlice RSS"),

                new XElement("ttl", "120"),

                new XElement("item",

                    new XElement("title", "Ürün Bilgisi" +
context.Request.QueryString["id"].ToString()),

                    new XElement("description", "HTML <b>kod</b> gider")))));

        context.Response.Write(RSS.ToString());

    }

İçerik kadar sürede bir yenilensin?

Yazımın başında da bahsettiğim gibi kullanıcı WebSlice içeriğinin ne
kadar zamanda bir yenilenmesi gerektiğine karar verebiliyor. Fakat bunun
haricinde yazılımcı olarak bizim de TTL (Time To Live) değeri vererek
içeriğin ne kadar zamana kadar geçerli olduğunu belirtebiliyoruz. Hemen
bir önceki örneğimizdeki RSS kaynağındaki TTL değeri de dikkatinizi
çekmiştir. TTL değerleri dakika üzerinden verilir. İsterseniz
WebSlice'ın ana sayfadaki HTML kodunun içerisinde de Class adı ttl
olan bir tag içerisinde bu değeri yazabilirsiniz.

Slice'lar var ama biraz kapalı kalsalar olmaz mı?

HTML kodunuz içerisinde Slice'lar var fakat bir süreliğine veya belirli
bir sayfada IE'nin yeşil Slice çerçevelerini ve düğmelerini göstermesini
istemiyorsunuz. İşte bu durumda aşağıdaki Meta taglarını
kullanabilirsiniz.

<meta name="slice" scheme="IE"
content="off" />

Yeşil düğmeler ortadan kaybolsa da Slice'lar çalışmaya devam eder ve
kullanıcılar isterlerse IE içerisinde Slice menüsünden tüm Slice'ları
görebilir. Ayrıca sayfadaki Slice'ları istemci tarafında dinamik olarak
yaratıyorsanız veya değiştiriyorsanız IE'nin Slice Discovery'sini
yenilemek ve Slice menüsündeki Slice listesinin güncellenmesini sağlamak
için aşağıdaki JavaScript komutunu çağırabilirsiniz.

window.external.contentDiscoveryReset()

Slice ekleme düğmelerinin tasarımını değiştirilir mi?

Slice'ların hepsi kendi özel yeşil düğmeleri ile eklenebilse de bu yeşil
düğmeleri yukarıdaki taktik ile kapattığınızda kendi düğmeleriniz ile
Slice'ları ekletmek isteyebilirsiniz. Bunun için özel olarak
kullanabileceğimiz bir JavaScript komutu yer alıyor.

window.external.addToFavoritesBar('http://sliceburada.com',
'SliceTitleBurada', 'slice')

Yukarıdaki JavaScript metoduna verdiğimiz üç parametreden ilki doğrudan
Slice'ın HTML hslice kodlarının bulunduğu adresin ta kendisi. İkinci
parametre sayfadaki hangi Slice'ı istediğimizi belirten Slice'ın ID
bilgisi. Son olarak eklenecek öğenin tipini de slice olarak
belirtiyoruz.

Hepinize kolay gelsin.