Internet Explorer 9–Sabitlenmiş Siteler

 Internet Explorer 9  Internet Explorer 9’la birlikte masaüstü uygulamaları ile web uygulamaları arasındaki uçurum giderek kapanmakta. Artık web tabanlı uygulamalar hem daha hızlı hem de daha renkli. Klasik browser’larda görüntüyü oluşturma yükü tamamen işlemci üzerine yıkılmışken IE9’da bu işlemler grafik işlem birimi (GPU) üzerinde gerçekleştirilmekte. Bunun sonucu olarak da oldukça hızlı bir browser oluşmakta.

   Masaüstü uygulamaların web uygulamalarıyla kıyaslandığında öne çıkan özellikleri kullanıcıyla olan etkileşimleridir. Kullanıcı, oluşturduğu bir kısayola tıklayarak kolaylıkla masaüstü uygulamasına ulaşabilir; uygulama içerisinde kullanıcıyı etkileyecek önemli bir olay gerçekleştiğinde ikon değiştirerek, görev çubunda yanıp sönerek kullanıcıyı uyarabilir ya da sıçrama listesi (jump list) içerisine kullanıcının sık yapabileceği işlemleri yerleştirerek yüksek bir kullanıcı deneyimi sunabilir. Bu öne çıkan özellikler birazda uygulamaların kendi doğal ortamlarında, masaüstü işletim sisteminde, çalışıyor olmasından dolayıdır. Web uygulamaları şimdiye kadar gerek grafiksel, gerekse yukarıda örneklemeye çalıştığım kullanıcı etkileşimi konusunda oldukça geride kalmaktalardı. Şimdiye kadar diyorum, çünkü Internet Explorer 9’un çıkışı ile birlikte desteklenen Html5, GPU kullanımı ve sabitlenmiş siteler sayesinde aradaki fark kapanacak gibi görünüyor. Web uygulamaları artık browserların sunduğu ek özelliklerle daha yüksek bir kullanıcı deneyimi sunabilecekler.

Sabitlenmiş Site (Pinned Site)

   Internet Explorer 9 tarafından Windows 7 ve üzeri işletim sistemleri için kullanıcılara sunulan sabitlenmiş site özelliğiyle birlikte kullanıcı web uygulamasını işletim sistemi masaüstüne kolaylıkla entegre edebilmekte.

Segme Sürükleme

   Sabitlenmiş site özelliği sayesinde kullanıcı isterse siteyi hızlı erişim için görev çubuğuna ya da başlat menüsüne sabitleyebilir. Bunun için yapması gereken tek şey Internet Explorer 9 ile sitede dolaşırken sitenin açık olduğu segmeyi görev çubuğuna sürüklemek. Aşağıdaki resimde Internet Explorer 9’un hemen yanında görev çubuğuna sabitlenmiş olarak Enterprisecoding.com web sitesi görülebilir.

Enterprisecoding.com, Görev Çubuğuna Sabitlenmiş durumda

   Bir site sabitlenirken Internet Explorer otomatik olarak sitenin icon’unu kullanmakta, bu da daha iyi bir kullanıcı deneyimi sağlamakta. Ek olarak; site içeriğine bağlı olarak Internet Explorer arayüzde de bazı ufak düzenlemeler bulunmakta. Örneğin; site logosu Internet Explorer’ın sol üst köşesinde gösterilmekte ve ileri-geri butonları sitenizin renklerine göre şekillenmekte.

Sabitlenmiş Siteyi Özelleştirme

   Internet Explorer bir siteyi sabitlenmiş site moduna geçirirken site üzerinde sabit olarak sunulan meta verilerle özelleştirme yapılmasına olanak sunmaktadır. Özelleştirme için verilecek olan bu meta verilerin aşağıdaki formatta olması gerekli;

<meta name="[Meta Veri Adı]" content="[Meta Veri İçeriği]"/>

   Bir sitenin araç çubuğuna sabitlenmesi sırasında Internet Explorer’a aşağıdaki bilgiler sunulabilir;

Meta Veri Adı

Açıklama

application-name Uygulama adı. Varsayılan olan doküman başlığı kullanılmaktadır.
msapplication-tooltip Kullanıcının fare ile uygulama için oluşturulan kısa yolun üzerinde beklediğinde gösterilecek olan tooltip.
msapplication-starturl Uygulama başlangıç sayfa URL’si. HTTP, HTTPS ve FTP protokollerinin desteklendiği bu alan varsayılan olarak aktif sayfa URL’sini kullanmaktadır.
msapplication-navbutton-color Uygulama penceresinde bulunan ileri ve geri butonları için kullanılacak olan renk. Varsayılan olarak uygulama kısayol simgesinde bulunan hakim renk kullanılmaktadır.
msapplication-window Uygulama penceresinin açılıştaki boyutu. width ve height alt değerleri bulunmaktadır.

   Bu alanların kullanımını örneklemek gerekirse, Enterprisecoding.com sitesi için aşağıdaki kullanım sözkonusudur;

<meta name="application-name" content="Fatih&#039;in Notları" />
<meta name="msapplication-tooltip" content="Site modunda Fatih&#039;in Notları web sitesi" />
<meta name="msapplication-starturl" content="http://www.enterprisecoding.com" />
<meta name="msapplication-navbutton-color" content="#205D7A" />

Sıçrama Listesi (Jump List)

Sıçrama Listesi

   Sıçrama listelerin Windows 7 ile birlikte gelen ve uygulamaya özel bazı işlemlere hızlıca erişmemizi sağlayan bir özelliktir. Internet Explorer 9 ile birlikte kullanıcı tarafından sabitlenen bir site, aynı  bir masaüstü uygulaması gibi, bizlere özelleşmiş bir sıçrama listesi (jump list) sunabilir. Bu jump list sayesinde kullanıcıya sitenizde sunduğunuz ve sık kullanılan içeriklere hızlı ve doğrudan erişim sunabilirsiniz. Yukarıda Enterprisecoding.com sitesince sunulan bu hızlı erişimleri örnekleyen bir jump list’in ekran görüntüsünü bulabilirsiniz.

   Sıçrama listeleri, sitenizdeki statik URL’ye sahip ve normal bir web browser ile de görüntülenebilen sayfalara verilebilir. Tanımlanmaları sırasında kullanıcının göreceği adı ve ikonu ile içerik URL’si verilmelidir. Internet Explorer 9 ile birlikte sunulan sıçrama listesinin bir diğer güzel yanı da herhangi bir browser ile siteniz açılmamışken bile sabitlenmiş site ikonunuza sağ tıklamak suretiyle ulaşılabiliyor olmasıdır. Bu özellik aynı zamanda size kullanıcılarınızı sitenizin en sık kullanılmasını istediğiniz bölümlerine yönlendirme olanağı sunacaktır.

   Sıçrama listesinde yer alan girdiler de aynı site özelleştirmelerinde olduğu gibi sabit meta verilerle bildirilmektedir. Eklenecek olan girdi için meta veri adı olarak msapplication-task kullanılmalıdır, içerik alanında ise sırasıyla girdinin kullanıcının görülecek adı (name), açılacak olan sayfa adresi (action-uri) ve kullanılacak olan ikon adresi (icon-uri) bilgileri noktalı virgül ile ayrılmış şekilde verilmelidir. Kullanıcı sıçrama listesinde yer alan bir girdiye tıkladığında Internet Explorer verilen linkteki adresi açacaktır. Açılacak olan sayfanın adresinin belirtildiği action-uri değeri site içerisindeki bir adres olabileceği gibi tamamen farklı bir siteye ait adreste olabilir.

   Yukarıdaki resimde görülen sıçrama listesini oluşturabilmek için web sitenize koymanız gereken meta verileri aşağıda bulabilirsiniz;

<meta name="msapplication-task" 
      content="name=Ana Sayfa;action-uri=http://www.enterprisecoding.com/;icon-uri=http://www.enterprisecoding.com/msapplication/home.ico" />
<meta name="msapplication-task" 
      content="name=Arşiv;action-uri=http://www.enterprisecoding.com/archives;icon-uri=http://www.enterprisecoding.com/msapplication/archive.ico" />
<meta name="msapplication-task" 
      content="name=Hakkında;action-uri=http://www.enterprisecoding.com/about;icon-uri=http://www.enterprisecoding.com/msapplication/about.ico" />
<meta name="msapplication-task" 
      content="name=Galeri;action-uri=http://www.enterprisecoding.com/gallery;icon-uri=http://www.enterprisecoding.com/msapplication/gallery.ico" />
<meta name="msapplication-task" 
      content="name=Yıldızlı Makaleler;action-uri=http://www.enterprisecoding.com/post/tag/featured;icon-uri=http://www.enterprisecoding.com/msapplication/featured.ico" />

   İsterseniz sıçrama listesinde yeni bir kategori oluşturup bu kategori altına yeni girdiler de ekleyebilirsiniz. Örneğin; aşağıdaki resimde görüldüğü gibi bir blog sitesi için “Populer Makaleler” başlıklı bir kategori açarak sitenizdeki populer n makalenizi bu kategori altında kullanıcılarınıza listeleyebilir ve bu makalelerinize hızlı bir erişim sunabilirsiniz.

"Populer Makaleler" kategori eklenmiş bir sıçrama listesi

   Özelleştirmeler ve sıçrama listesi tasklarından farklı olarak kategori ve kategori girdileri dinamik içeriklerdir ve sayfaya konulan meta veriler ile oluşturulmazlar. Sabitlenmiş olan sitenizde kategori işlemlerini Internet Explorer tarafından sunulan API’leri kullanarak javascript ile gerçekleştirebilirsiniz.

    Kategori işlemlerinde ilk yapmanız gereken girdileri ekleyebileceğiniz bir kategori oluşturmak olmalı. Bunun için kategori adını parametre olarak alan ve yeni bir kategori oluşturan msSiteModeCreateJumplist metodunu kullanabilirsiniz. Yukarıdaki örnekten yola çıkacak olursak, “Populer Makaleler” kategorisini oluşturmak için aşağıdaki javascript kodunu kullanmalısınız;

window.external.msSiteModeCreateJumplist('Populer Makaleler');

   Bir kategori oluşturduktan sonra, sıradaki adımınız bu kategori altına girdilerinizi eklemek olmalı.  Bu işlem için msSiteModeAddJumpListItem metodu bizlere sunulmuş durumda. Bu metod parametre olarak sırasıyla kullanıcıya gösterilecek olan text, kullanıcı girdiyi tıkladığında açılacak olan sayfa adresi ve girdi için kullanılacak olan ikon dosyasını kabul etmektedir. Yukarıda oluşturduğumuz kategori içerisine girdilerin eklendiği örnek bir kodu aşağıda bulabilirsiniz;

window.external.msSiteModeAddJumpListItem('Windows Kayıp İkonları Geri Getirme', 'http://www.enterprisecoding.com/post/windows-kayip-ikonlari-geri-getirme', 'http://www.enterprisecoding.com/msapplication/makale.ico');
window.external.msSiteModeAddJumpListItem('Üçüncü IE9 Platform Preview Yayınlandı', 'http://www.enterprisecoding.com/post/ucuncu-ie9-platform-preview-yayinlandi', 'http://www.enterprisecoding.com/msapplication/makale.ico');
window.external.msSiteModeAddJumpListItem('Visual Studio 2010 Katılımsız Kurulumu', 'http://www.enterprisecoding.com/post/visual-studio-2010-katilimsiz-kurulumu', 'http://www.enterprisecoding.com/msapplication/makale.ico');
window.external.msSiteModeAddJumpListItem('dynamic vs object', 'http://www.enterprisecoding.com/post/dynamic-vs-object', 'http://www.enterprisecoding.com/msapplication/makale.ico');
window.external.msSiteModeAddJumpListItem('C# ile Windows Server AppFabric Önbellek Etkileşimi', 'http://www.enterprisecoding.com/post/c-ile-windows-server-appfabric-onbellek-etkilesimi', 'http://www.enterprisecoding.com/msapplication/makale.ico');

   Dikkat edecek olursanız bu örnekteki girdiler yukarıda sizinle paylaşmış olduğum ekran görüntüsündekilere göre ters sırada eklenmekte. Bunun nedeni Internet Explorer’ın her yeni eklenen girdiyi sıranın üstüne taşıması. Makaleleri populer olanlar üstte olacak şekilde sıralayarak kullanıcıya göstermek istediğim için, eklemeye en sonuncudan başladım.

   Geldiğimiz noktada işin büyük bölümünü yapmış olsakta, henüz kategori ve girdilerimizi sıçrama listesinde göremeyiz. Yaptığımız bu düzenlemelerin sıçrama listesinde görülebilir olması için aşağıda örneklediğim şekilde msSiteModeShowJumplist metodu çağırılmalıdır;

window.external.msSiteModeShowJumplist();

   Herhangi bir zamanda, oluşturduğumuz bu kategori listesini temizleme istersek aşağıda örneklendiği gibi msSiteModeClearJumplist metodu kullanılmalıdır;

window.external.msSiteModeClearJumplist();

   Kategoriler ile ilgili olarak aşağıdaki konulara dikkat etmelisiniz;

  • Bir kategori altında maksimum 20 girdi desteklenmektedir. Bir kategori altında maksimum sayıda girdiye ulaşılması durumunda eklenen her yeni girdi de listedeki en eski girdi silinmektedir.
  • Aynı anda sadece tek bir kategori desteklenmektedir. Birden fazla kategori eklenmesi durumunda son eklenen kategori geçerli olacaktır.
  • Bir kategori altına girdi eklenmediği sürece menüde kategoriye ait etkiket görünür olmayacaktır.

   Internet Explorer 9 bizlere aynı zamanda bir kategori altındaki girdinin kullanıcı tarafından kaldırıldığından haberdar olma imkanı da sunmaktadır. Bu sayede kullanıcıların kaldırdıkları kategori girdilerinden yola çıkarak web sitemizde kendi iş mantığımızı işletebiliriz.

Bir makalenin sıçrama listesinden çıkartılması

   Bir kategori girdisinin listeden kaldırıldığından haberdar olmak için  document nesnesi içerisinde bulunan addEventListener ya da attachEvent metodları kullanılabilir. Her iki metodun kullanımına ait birer örnek aşağıda bulunabilir;

document.addEventListener('mssitemodejumplistitemremoved', kategoriGirdisiKaldirildi, false);
document.attachEvent('onmssitemodejumplistitemremoved', kategoriGirdisiKaldirildi);

  Bu örneklerde yer alan ilk parametre haberdar olunmak istenen olayın adı iken, ikinci parametre ise olay gerçekleştiğinde çalıştırılacak olan metodu belirtmekte. Bu metod parametre olarak kaldırılan girdiye ait url bilgisini kabul etmelidir;

function kategoriGirdisiKaldirildi(url) {
 … 
}

   Site domain’i içerisindeki herhangi bir sayfa bu siteye ait kategori listesinde düzenleme yapmak hakkına sahiptir.

   Aynı bir masaüstü uygulamasında olduğu  gibi, kullanıcı isterse sunmuş olduğunuz kategori girdilerinden dilediğini listede sabitleyebilir;

Bir makale sabitlenmiş sıçrama listesi

Kaplama (Overlay) İkon Gösterimi

Yeni bir yorum yapılmasıyla site ikonunda yorum ikonunu belirdi

   Masaüstü uygulamalarının bilgilendirme ve durumu bildirimi gibi konularda kullanıcıyla etkileşimde sıkça kullandıkları değişen program konları Internet Explorer ekibince unutulmayarak sabitlenmiş sitelerde desteklenmekte. Web sitenizde kullandığınız iş mantığı doğrultusunda görev çubuğundaki ikonunuzu güncelleyebilir ve kullanıcılarınızı bilgilendirebilirsiniz. Aynı masaüstü uygulamalarında olduğu gibi kaplanmış ikonlar sadece sitenize ait browser penceresi açık iken kullanıcıya gösterilebilir. Yukarıdaki resimde Enterprisecoding.com sitesinde açık olan makale sayfasında yeni bir yorum girildiği kullanıcıya yeni bir kaplama ile haber verilmekte. Bu işlem için bize sunulan msSiteModeSetIconOverlay metodu kullanılabilir. Aşağıda ekran görüntüsüne ait kullanımı örneklenen msSiteModeSetIconOverlay metodu sırasıyla ikon url’si ve kullanıcıya gösterilecek olan tooltip parametrelerini kabul etmektedir.

window.external.msSiteModeSetIconOverlay('http://www.enterprisecoding.com/msapplication/info.ico', 'Yeni bir yorum yapıldı');

   Bir web sitesi ikonu öncekiler silinmeden birden fazla defa kaplanabilir ve bunların hepsi kullanıcıya gösterilir; ama bu konuda dikkat edilmesi gerek nokta, kaplamalar kaldırılırken en son eklenenden başlanıyor olmasıdır. Eklediğiniz bir kaplama ikonu kaldırmak için tek yapmanız gereken aşağıda örneklendiği şekliyle msSiteModeClearIconOverlay metodunu çağırmak olacak;

window.external.msSiteModeClearIconOverlay();

Pul Önizleme Butonlar

Pul Önizleme Butonları

   Masaüstü uygulamalarının kullanıcı ile etkileşimde sıkça kullandığı yöntemlerden biriside pul önizleme ekranında yer alan pul araç çubuğu butonlarıdır. Bu butonlar ve pul önizleme özelliği sayesinde kullanıcı araç çubuğu üzerinden uygulama penceresini dahi açmadan uygulamaya komut gönderebilir. Windows 7 kullanıcılarının Windows Media Player ile bu özelliği sıkça kullanarak oynayan video ya da müziği durdurduğunu/devam ettirdiğini hatırlayalım. Internet Explorer 9 sabitlenmiş siteler için aynı desteği bizlere sunmakta. Yukarıdaki resimde Enterprisecoding.com sitesine ait bir makale görüntülenirken önceki ve sonraki makalelere hızlı geçiş imkanı sunan pul araç çubuğu butonlarını görebilirsiniz. msSiteModeAddThumbBarButton metodu yardımıyla ekleyebileceğiniz bu butonlar için sırasıyla butonda gösterilecek ikon dosyasının url’si ve butonun üzerine gelindiğinde kullanıcıya gösterilecek olan tooltip parametreleri verilmelidir. Aşağıda yer alan kod parçacığı resimde görülen önceki ve sonraki makale butonlarının eklenmesinde kullanılmıştır;

btnOnceki = window.external.msSiteModeAddThumbBarButton( 'http://www.enterprisecoding.com/msapplication/button_blue_rew.ico', 'Önceki Makale');
btnSonraki = window.external.msSiteModeAddThumbBarButton( 'http://www.enterprisecoding.com/msapplication/button_blue_ffw.ico', 'Sonraki Makale');

  Butonları yukarıdaki şekilde ekledikten sonra siteniz içerisinde pul önizleme penceresindeki butonlara basıldığını msthumbnailclick olay bildirimini dinleyerek yakalayabilirsiniz. Aşağıdaki örnek kodda bu olay bildirimi dinlenerek basılan butonun id bilgisi kullanıcıya gösterilmekte;

document.addEventListener('msthumbnailclick', pulButonunaBasildi, false);

function pulButonunaBasildi (buton) {
    alert ("Basılan Bul buton id'si : " + buton.buttonID);
}

   Pul ön izleme ekranına buton eklemek için yukarıda sıraladığım adımların takip edilmesi sonrasında sıçrama listesi kategori ve girdilerinde yapılana benzer şekilde msSiteModeShowThumbBar metodu yardımıyla aşağıda örneklendiği şekliyle değişiklikler onaylanır.

window.external.msSiteModeShowThumbBar();

  Pul araç çubuğu üzerinde yer alan her bir buton bir komutu temsil etmektedir ve bu komutlar ilgili pencere mimize edilmişken dahi kullanılabilir. Pul ön izleme ekranı boş alanı kısıtı nedeniyle Internet Explorer bize maksimumda 7 buton oluşturma izni vermektedir.

   Bazı durumlarda siteler iş mantıkları gereği pul önizleme ekranına ekledikleri butonların görünürlükleri ve/veya aktif/pasif durumlarını değiştirmek isteyebilir. Bu durumlarda kullanılabilecek olan msSiteModeUpdateThumbBarButton metodu sırasıyla değişiklik yapılacak olan butonu, bu butonun aktif/pasif durumunu ve butonun görünürlük durumunu parametre olarak kabul etmektedir. Aşağıdaki örnek kodda Enteprisecoding.com sitesi için eklemiş olduğumuz “Sonraki Makale” butonunun son makaleye gelindiğinde nasıl pasif hale getirilebileceğini göstermekte;

window.external.msSiteModeUpdateThumbBarButton(btnSonraki, false, true);

   Kimi zamanda pul ön izleme ekranındaki butonları ikonlarını değiştirmek isteyebilirsiniz. Böylesi durumlarda öncelikle butonlarınızda kullanmak üzere stiller tanımlamalısınız;

ornekStil = window.external.msSiteModeAddButtonStyle(btnSonraki, 'http://www.enterprisecoding.com/msapplication/ornekIcon.ico', 'ornekStil');

   Tanımlaması yapılan bu stil artık butonlar üzerinde kullanılabilir;

window.external.msSiteModeShowButtonStyle(btnSonraki, ornekStil);

Araç Çubuğu Butonunun Parlaması

Enterprisecoding.com sitesi butonu parlaması

   Web uygulamanızın iş mantığı gereği bazı durumlarda kullanıcıların dikkatini çekmesi gerekebilir. Web tabanlı bir mesajlaşma sitesini ele alalım örneğin, kullanıcı site penceresini minimize etmişken bir mesaj gelmesi durumunda siteye ait araç çubuğu butonunun yanıp sönmesi kullanıcı ile etkileşimi üst düzeyde tutacaktır. Bu amaçla sabitlenmiş sitelere araç çubuğu ikonunu parlatabilme özelliği sunulmuştur. Yanıp sönmesi aktif hale getirilen bir web sitesi için en fazla 20 yanıt sönme işlemi yapılır. Bu süre zarfında kullanıcının web sitesi penceresini aktive etmesi durumunda araç çubuğu butonu otomatik olarak yeniden eski haline geri dönecektir. msSiteModeActivate metodunun aşağıdaki şekildeki kullanımı sitenizin araç çubuğundaki butonunun yanıt sönmesini sağlayacaktır;

window.external.msSiteModeActivate();

Sabitlenmiş Site Modu kontrolü

   Yukarıda saydığım komutlar her zaman için sitenin sabitlenmiş modda olduğu varsayımıyla örneklenmiştir. Gerçek uygulamalarda bu komutların çalıştırılması öncesi sabitlenmiş site modunda çalıştığınızdan emin olmanız gereklidir. Aşağıda örneklendiği gibi msIsSiteMode metodu yardımıyla sitenizin site modunda olup olmadığını kolaylıkla test edebilirsiniz;

if (window.external.msIsSiteMode()){
    //web siteniz sabitlenmiş site modunda
}else{
    //web siteniz sabitlenmiş site modunda değil
}

Fatih Boy

Ankara'da yaşayan Fatih, bir kamu kurumunda danışman olarak çalışmaktadır. ALM süreçleri, kurumsal veri yolu sistemleri, kurumsal altyapı ve yazılım geliştirme konularında destek vermektedir. Boş zamanlarında açık kaynak kodlu projeler geliştirmeyi ve bilgisini yazdığı makalelerle paylaşmayı seven Fatih, aynı zamanda Visual C# ve Visual Studio teknolojileri konusundan Microsoft tarafından altı yıl üst üste MVP (En Değerli Profesyonel) ödülüne layık görülmüştür. İş hayatı boyunca masaüstü uygulamaları, web teknolojileri, akıllı istemciler gibi konularda Asp.Net, Php, C#, Java programlama dilleri ve MySql, MsSql ve Oracle gibi veritabanı yönetim yazılımları ile çalışmıştır. İngilizce ve Türkçe olarak yayınlanan makalelerini gerek İngilizce bloğunda, gerekse de Türkçe bloğunda bulabileceğiniz gibi web sitesinden de açık kaynak kodlu geliştirdiği yazılımlarına ulaşabilirsiniz. vCard - Twitter - Facebook - Google+

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir