SlideShare ist ein Scribd-Unternehmen logo
1 von 89
Downloaden Sie, um offline zu lesen
Daron Yöndem
                                    IE8




           Hýzlý Kolay ve Daha Güvenli!




               KODLAB
               www.kodlab.com
INTERNET
EXPLORER 8
     daron
     yöndem




   Yay›n Da¤›t›m Yaz›l›m ve E¤itim
   Hizmetleri San. ve Tic. Ltd. fiti.
KODLAB 3

INTERNET EXPLORER 8
DARON YÖNDEM


ISBN 978-605-4205-03-5
Yay›nc›l›k Sertifika No: 13206


1. Bask›: Mart 2009


Yay›n Yönetmeni: Suat Özdemirci
Kapak Tasar›m: Nebi Y›karo¤lu
Sayfa Düzeni: Fikret Eldem
Sat›fl: Hüseyin Üstünel
Bask›: fiefik Matbaas›, Tel: (212) 671 59 81


Bu kitab›n bütün yay›n haklar› Kodlab Yay›n Da¤›t›m Yaz›l›m ve E¤i-
tim Hizmetleri San. ve Tic. Ltd. fiti.’ne aittir. Yay›nevimizin yaz›l› izni
olmaks›z›n k›smen veya tamamen al›nt› yap›lamaz, kopya çekilemez,
ço¤alt›lamaz ve yay›nlanamaz.




KODLAB Yay›n Da¤›t›m Yaz›l›m ve E¤itim Hizmetleri San ve Tic Ltd.fiti
Yerebatan Caddesi Salk›m Sö¤üt Sokak Keskinler ‹fl Han› No: 8
D: 401 Sultanahmet / ‹STANBUL


tel: (212) 514 55 66 fax: (212) 514 66 61
e-posta: bilgi@kodlab.com web: www.kodlab.com
Daron Yöndem

     DEVELOAD Yazılım kurucusu Daron Yöndem Microsoft tara-
     fından 2008 ve 2009 yıllarında ASP.NET alanında Most Valuab-
     le Professional olarak seçilmifltir. Uluslararası bir konuflmacı ola-
     rak Daron Yöndem aynı zamanda Microsoft Regional Director
     ünvanına sahiptir. Türkiye’de iki kitabı olan Daron Yöndem, In-
     ternational .NET Assocation’da Türkiye Baflkanlı¤ı ve Ortado¤u
     Afrika bölgesi konuflmacı ofisi baflkanlı¤ı yapmaktadır. Kendisine
     http://daron.yondem.com/tr/ adresinden blogundan ulaflabilirsiniz.
v


Önsöz
 Bundan y›llar önce bana ç›k›p “Bir gün Internet Explorer kitab› yaza-
 caks›n” deseler san›r›m güzel bir espri olarak karfl›lard›m. Nas›l olur
 da bir taray›c›n›n kitab› yaz›l›r? Ne gerek var? De¤il mi?
 Oysa bugün kendimi bu kitap盤› yazarken buluyorsam asl›nda bu ba-
 z› fleylerin de¤iflti¤inin de kan›t›. Belki de taray›c›lar› art›k haklar›nda
 kitap yaz›labilecek ifllevsellikte yaz›l›mlar olarak görmenin zaman›
 geldi. Bugün Internet Explorer 8’e bakt›¤›mda hakk›nda yaz›l›mc›la-
 ra ve tasar›mc›lara anlat›labilecek o kadar güzel fleyler görüyorum ki
 bunlar›n hepsini derleyip sizlere minik bir kitapç›k olarak ulaflt›rmay›
 uygun gördüm.
 Kitap盤›n yaz›m süreci Internet Explorer 8’in Beta 1 günlerinde bafl-
 lad› ve yay›nlad›¤› flu anda Internet Explorer 8 RC1 sürümü ile karfl›-
 m›zda. Son sürüme do¤ru ilerleyen bu yolda kitab›n yay›n›ndan son-
 ra oluflabilecek tüm geliflmeleri http://daron.yondem.com/tr/ adresin-
 den, blogumdan takip edebilirsiniz. Ayr›ca bana her türlü yorumunu-
 zu daron@yondem.com adresinden ulaflt›rabilirsiniz.
 Son olarak, unutmadan gönülleri rahatlatmak aç›s›ndan kitap盤›m›-
 z›n tamamen ücretsiz oldu¤unu ve ayn› sizin elinize geçti¤i gibi sizin
 de ücretsiz olarak dostlar›n›za ister dijital ister bask› kopyas›n› al›p
 gönderebilece¤inizi belirtmek isterim.
 Görüflmek üzere...

                                                  Daron Yöndem
                                     Microsoft Regional Director, MVP
vi




     Internet Explorer; her zaman internet deneyimini en üst seviyede, h›z-
     l› ve güvenli yaflayabilmemiz için Microsoft olarak gelifltirmifl oldu¤u-
     muz ve günlük online dünyam›z›n önemli bir parças› olan taray›c›m›z.
     Web 2.0 ile birlikte de¤iflen kullan›c› beklentileri ve Web 3.0 için
     önemli bir altyap› oluflturacak Anlamsal Web için tasarlanm›fl olan en
     yeni sürümü olan Internet Explorer 8 hakk›nda yaz›lm›fl elinizde tuttu-
     ¤unuz bu kitap tüm teknik geliflmeleri detaylar›yla içermektedir. Mic-
     rosoft Regional Director ve MVP ünvanlar›na sahip olan Daron Yön-
     dem taraf›ndan yaz›lm›fl bu kitap Türkiye’de Internet Explorer 8’e özel
     yeni içeriklerin nas›l gelifltirilebilece¤ini ve yeni gelen teknik özellik-
     lerle yeni nesil web teknolojilerine nas›l adapte olunabilece¤ini detay-
     lar›yla anlatmaktad›r. Daron Yöndem’i bu baflar›l› çal›flmas›ndan dola-
     y› kutluyor, bu kitaptaki paylafl›mlar›n yeni fikirler ve projeler geliflti-
     recek birçok internet giriflimcisine öncülük edece¤ini düflünüyorum.

                                         Mehmet Nuri Çankaya
                                         Windows Pazarlama Grup Müdürü
                                                           Microsoft Türkiye
‹Ç‹NDEK‹LER

    ÖNSÖZ

1   NEDEN INTERNET EXPLORER 8?                                    1
    Performans                                                    1
       Ayn› Anda 2 Yerine 6 Ba¤lant›                              2
       Script Performanslar›                                      2
    Kolay Kullan›m                                                2
       Yeni Trendler: Accelerator, Web Slice, Search Suggestion   2
       Güvenlik                                                   3
    Yaz›l›m Gelifltirici ve Tasar›mc› Dostu                        3
    Sistem Yöneticileri                                           4

2   INTERNET EXPLORER 8 DEVR‹M‹                                    7
    Ekstra Güvenlik                                                8
       InPrivate Pencereleri                                       8
       InPrivate Blocing                                           9
       Phishing Korumas› ve SmartScreen                            9
    Kolay Kullan›m                                                11
       ActiveX Yüklemeleri                                        11
       Sekme Renklendirme                                         12
       Ak›ll› Adres Çubu¤u                                        14
    Yeni Trendler                                                 15
       H›zland›r›c› (Accelerator)                                 15
       Görsel Arama (Visual Search)                               18
       Web Slice                                                  20

3   WEB’DE YEN‹ TRENDLER                                          25
    Bir H›zland›r›c› (Accelerator) Nas›l haz›rlan›r?              25
    Son Ad›mlar...                                                30
    Art›k Haz›r›z                                                 32
    Görsel Arama Nas›l Haz›rlan›r?                                32
       Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤i             35
       Sunucu Taraf›nda Neler Yapmal›?                            36
       Sunucuda Gerçek Zamanl› XML Üretimi                        39
           C# ve ASP.NET ile XML Üretmek                          39
           VB ve ASP.NET ile XML Üretmek                          41
viii INTERNET EXPLORER 8

             PHP ile XML Üretmek                         44
             Görsel Aramalar için JSON Veri Kayna¤›      46
       Web Dilimleri Nas›l Haz›rlan›r                    47
         Çal›flma Yap›s›                                  48
         Display Source De¤iflikli¤i                      48
         Farkl› Web Dilimleri’ni Birbirine Ba¤lamak      50
         Web Dilimi’ne Kaynak Olarak RSS Kullanmak       50

   4   YAZILIM GEL‹fiT‹R‹C‹LER ‹Ç‹N INTERNET EXPLORER 8   53
       JavaScript Yenilikleri                            53
          tostaticHTML Metodu                            53
          Dahili JSON S›n›flar›...                       55
       AJAX Navigasyon                                   57
       Online ve Offline Çal›flma Yap›s›                  58
       Cross Domain Request Nesnesi                      60
       DOM Veri Ambar›                                   64
          Session Storage                                64
          Local Storage                                  65
       Yaz›l›mc› Araçlar›                                65
          CSS ve HTML DOM Gerçek Zamanl› Düzenleme       65
          JavaScript Debuging                            67
          Profiler ile Optimizasyon                      68
          Image Optimizasyonu                            69
          Pratik Araçlar                                 70
       Önce Güvenlik                                     71
          Data Execution Prevention                      71
          Kullan›c›ya Özel ActiveX                       72
          Siteye Özel ActiveX                            73
          XSS Sald›r›lar›                                74
          MIME TYPE Kararlar›                            75
          O Uygulamay› Sitemde Çal›flt›rma!               75
       DOM Elementlerini Sorgulay›n                      75
   5   TASARIMCILAR ‹Ç‹N INTERNET EXPLORER 8             77
       Compatibility View                                77
         Sitemizi Nas›l Ayarlar›z?                       79
       Özel CSS Filtreleri                               80
1
  Neden Internet
  Explorer 8?
      Performans                           1
         Ayn› Anda 2 Yerine 6 Ba¤lant›     2
         Script Performanslar›             2
      Kolay Kullan›m                       2
         Yeni Trendler: Accelerator,
         Web Slice, Search Suggestion      2
         Güvenlik                          3
      Yaz›l›m Gelifltirici ve
      Tasar›mc› Dostu                      3
      Sistem Yöneticileri                  4


      Taray›c› savafllar› gün geçtikçe k›z›fl›yor. Global anlamda kullan›m
      oranlar›na bakt›¤›m›zda Internet Explorer bu savafl›n galibi gibi gö-
      zükse de bu durum savafl›n devam etmedi¤i anlam›na tabi ki gelmi-
      yor. Önümüzdeki dönemde Internet Explorer 8.0, bu savafl›n en a¤›r
      toplar›ndan biri diyebiliriz. Peki, neden Internet Explorer 8?

Performans
      Bir internet taray›c›s›ndan tek bekledi¤imiz özellik performans olma-
      sa da, bu durum performans›n önemini yads›yaca¤›m›z anlam›na gel-
      miyor. Internet Explorer 8.0 ile beraber performans noktas›nda yap›-
      lan belki de en büyük yenilik art›k her bir taray›c› sekmesinin arka
      planda ayr› birer uygulama olarak çal›fl›yor olmas›. Böylece tek bir
      uygulama içerisinde thread say›s› azalt›labilirken sekmelerin birbirin-
      den ba¤›ms›z olarak hata almas› halinde birbirlerini kurtarabilmeleri
      gibi avantajlar da ortaya ç›k›yor. Tüm bunlar›n detaylar›ndan kitab›-
      m›z›n ileriki bölümlerinde kullan›c› tarafl› yenilikleri ele al›rken de-
      tayl› olarak bahsedece¤iz.

        THREAD
NOT
        Herhangi bir uygulama içerisinde ayn› anda çal›flabilen ayr› kod bloklar›n›
        tan›mlar. Bir uygulama içerisinden birden çok Thread bulunup ayn› anda
        çal›flabildi¤i üzere ayn› uygulaman›n kaynaklar›n› Thread’ler beraber de kul-
        lanabilirler.
2 INTERNET EXPLORER 8

     Ayn› anda 2 yerine 6 ba¤lant›
     Y›llar önce, 1999 senesinde, HTTP 1.1 standartlar›na göre taray›c›lar›n
     ayn› anda bir sunucuya sadece iki ba¤lant› kurabileceklerine dair bir
     kural belirlenmifl. Aradan geçen 9 y›lda art›k bu s›n›r›n günümüz genifl
     bant internet altyap›s›nda çok da anlaml› olmad›¤›n› söyleyebiliriz. IE
     8.0 ile beraber bu s›n›r alt›ya yükseltiliyor. Ayn› anda 2 ba¤lant› yeri-
     ne 6 ba¤lant› teorik olarak yaklafl›k üç kat h›zlanma anlam›na geliyor.
     Bir yaz›l›mc› olarak sayfan›za ekledi¤iniz 6 harici JavaScript dosyas›-
     n›n, birbirlerini beklemek yerine hep beraber ayn› anda kullan›c› tara-
     f›na indirilmeye bafllanmas› ciddi performans art›fl› sa¤layacakt›r.
     Scr›pt Performanslar›
     AJAX’›n kullan›lmad›¤› web sitesi neredeyse kalmad›. ‹stemci taraf›n-
     da Script’ler kullanarak art›k ço¤u ifllemi sunucu yerine istemcide yap-
     may› tercih ediyoruz. Bu çerçevede Script’lerin çal›flma h›z› bir taray›-
     c›n›n genel performans› ile çok yak›ndan alakal›. Haberler güzel; IE
     8.0 JavaScript SunSpider testinde IE 7.0’a k›yasla %400 daha h›zl›!
     Kendi testinizi yapmak isterseniz SunSpider testine afla¤›daki adres-
     ten ulaflabilirsiniz;
     http://www2.webkit.org/perf/sunspider-0.9/sunspider.html

  Kolay Kullan›m
     Çok h›zl› bir taray›c›ya sahip olal›m derken tabi ki ifllevselliklerden de
     vazgeçemeyiz. IE 8.0 ile beraber belki de Internet Explorer tarihinde-
     ki en güzel araçlar geliyor. Bu araçlar hem do¤rudan kullan›c›lar›n ha-
     yat›n› kolaylaflt›r›rken hem de yaz›l›m gelifltiricileri ve tasar›mc›lar›
     da mutlu ediyor.
     Yeni Trendler: Accelerator,
     Web Sl›ce, Search Suggest›on
     Internet Explorer’› kullan›m flekliniz de¤iflecek. Kitab›m›z›n ileriki bö-
     lümlerinde hem kullan›c› tarafl› hem de yaz›l›mc› ve tasar›mc›lar için
     detayl› olarak inceleyece¤imiz Accelerator, Web Slice ve Search
     Suggestion yap›lar› sizi Internet Explorer’a gönülden ba¤layacak. Ac-
     celerator’lar ile sürekli internette gezinirken tekrarlad›¤›n›z ifllemlerin
     fark›na varacak ve kendinize daha h›zl› bir çal›flma ortam› sa¤layacak-
     s›n›z. Web Slice’lar ise sizin yerinize interneti takip edecek. Search
     Suggestion sistemini gördü¤ünüzde arad›¤›n›z› bulman›n ne kadar ko-
NEDEN INTERNET EXPLORER 8?                3

  laylaflt›¤›n› göreceksiniz. Detaylar› girmek için sab›rs›zland›¤›n›z› bili-
  yorum, az kald›.




  Internet Explorer ilk aç›l›fl›nda yeni özelliklere h›zl›ca ulaflabilece¤iniz
  linkler karfl›n›za geliyor.

  Güvenlik
  InPrivate taray›c› özelli¤i ile tan›flt›¤›n›zda gönlünüz o kadar rahat
  edecek ki kulland›¤›n›z bilgisayarlarda baflka bir internet taray›c› ara-
  mayacaks›n›z. Sadece size özel bir Internet Explorer oturumu düflünün
  ki siz kapatt›¤›n›zda sizinle ilgili hiçbir iz kalm›yor. Ne taray›c› geç-
  mifli, ne cookie (çerezler) ne de yazd›¤›n›z bilgiler ve flifreleriniz. Ta-
  ray›c›y› kapatt›¤›n›z anda her fley uçup gidiyor. Gönül daha ne ister?
  Phishing korumas›, XSS engelleme sistemleri ve daha birçok yenilik
  var. Tüm bunlar›n detaylar›n› da ileriki bölümlerde inceleyece¤iz.

Yaz›l›m Gelifltirici ve
Tasar›mc› Dostu
  IE 8.0 ile beraber yaz›l›m gelifltiriciler ve tasar›mc›lar olarak da mut-
  lulu¤un yollar›nda ilerliyoruz. CSS 2.1 deste¤i, HTML 5, AJAX ve
  JavaScript yenilikleri, Font Embedding düzenlemeleri ile art›k IE
  8.0’da çal›flacak web sitelerini tasarlamak ve programlamak çok daha
  zevkli olacakt›r. Kitab›m›z›n özellikle yaz›l›mc›lara ve tasar›mc›lara
4 INTERNET EXPLORER 8

        hitap eden bölümlerde teknik detaylardan da bahsederek Internet Exp-
        lorer 8.0’›n bir yaz›l›mc›n›n veya tasar›mc›n›n hayat›n› da nas›l kolay-
        laflt›rd›¤›na göz ataca¤›z.




        Internet Explorer 8.0 ile beraber gelen Developet Tools paketi
        yaz›l›mc›lar ve tasar›mc›lar›n iflini kolaylaflt›rmay› hedefliyor.

  Sistem Yöneticileri
        Birçok yeni özellik geliyor, tüm bunlar›n tabi ki güvenlik taraf›nda da
        kontrol mekanizmalar› ile ele al›nabilmesi flart. Windows Server 2008
        üzerinde Internet Explorer 8 ile beraber IE çerçeveli Group Policy sa-
        y›s› toplamda 1300’ü geçiyor. Tabi tüm bunlar› ancak istemcilere IE
        8.0 yükledikten sonra kullanabilirsiniz, bunun için de toplu yükleme
        seçeneklerinin yan› s›ra kendinize özel IE8.0 yükleme paketleri olufl-
        turman›z için gerekli detaylar› da kitab›m›zda inceliyoruz.

  NOT     GROUP POLICY
          Windows Server iflletim sistemlerinde Active Directory üzerinde bilgisa-
          yarlar›nda ve uzak kullan›c›nlar›n merkezi yönetim ve merkezi konfigü-
          rasyonunu sa¤lar.
NEDEN INTERNET EXPLORER 8?                5




Internet Explorer 8.0 ile beraber gelen GPO’lardan baz›lar›

‹flte tüm bu yenilikler ve eflsiz kolayl›klar nedeniyle Internet Explorer
8.0! Daha fazlas› için sayfay› çevirin...
6 INTERNET EXPLORER 8
2
 Internet
 Explorer 8 Devrimi
  Ekstra Güvenlik                 8   Yeni Trendler                  15
    InPrivate Pencereleri         8   H›zland›r›c› (Accelerator)     15
    InPrivate Blocing 9               Görsel Arama (Visual Search)   18
    Phishing Korumas› ve              Web Slice                      20
    SmartScreen                   9
  Kolay Kullan›m                 11
    ActiveX Yüklemeleri          11
    Sekme Renklendirme           12
    Ak›ll› Adres Çubu¤u          14



  Internet Explorer’›n tarihine bakt›¤›m›zda “Devrim” kelimesi art›k
  özledi¤imiz sözcükler aras›nda yerini alm›flt›. Peki, nas›l oluyor da 8.0
  sürümü ile bu özlem bitiyor? Kitab›m›z›n bu bölümünde Internet Exp-
  lorer 8’i bir son kullan›c›n›n gözünden inceleyerek ilk bak›flta göze
  çarpan yeniliklere de¤inece¤iz. Tüm bu yenilikler önümüzdeki dö-
  nemde günü birlik ifllerimizi kolaylaflt›racak ve hayat›m›z›n bir parça-
  s› haline gelecek yeni ifllevsellikleri kaps›yor.

Ekstra Güvenlik
  Normal hayatta oldu¤u gibi dijital hayatta da her fleyin yan› s›ra en
  çok önem verdi¤imiz detaylardan biri de Güvenlik konusu. Özellikle
  internette gezerken bizim bilgimiz dahilinde olsun veya olmas›n sis-
  temimizin güvenli¤i ile ilgili riskler belki de can›m›z› en çok s›kan
  noktalar aras›nda.
  Bir internet taray›c›n›n tüm “hayat›m›z› kolaylaflt›ran” özelliklerini
  bir kenara koyup söz konusu taray›c›y› kullan›p kullanmayaca¤›m›z
  karar›n› belki de sadece sa¤lad›¤› güvenlik özellikleri çerçevesinde
  bile verebiliriz. Özellikle E-Ticaret’in gün geçtikçe hayat›m›z›n göbe-
  ¤ine oturdu¤unu düflünürsek IE 8.0 ile beraber gelen kullan›c› taraf›n-
  daki güvenlik yenilikleri çok önemli.

  InPr›vate Pencereleri
  Bir yaz›l›mc› olarak inceledi¤imiz yaz›l›mlara gelen yeni özellikleri-
  ni baz›lar›n› gördü¤ümde “Neden bu kimsenin akl›na bugüne kadar
8 INTERNET EXPLORER 8

     gelmedi?” sorusunu kendime soruyorum. IE 8.0’›n InPrivate Brow-
     sing özelli¤i de bu özelliklerden biri.
     Bir Internet Explorer penceresi düflünün ki kapatt›¤›n›zda her fley es-
     kisi gibi olacak. Taray›c› geçmifli, cookie, Temp dosyalar› ve geri ka-
     lan her fley taray›c›y› kapatt›¤›n›z anda otomatik olarak yok olsa, si-
     linse ne kadar güzel olurdu de¤il mi? Tabi tüm bunlar›n varsay›lan
     ayarlarda olmamas› gerekiyor. Sadece istedi¤imizde böyle geçici bir
     pencere oluflturabilmeliyiz.




      InPrivate pencereleri açabilmek için taray›c› içerisindeki Safety menüsünden
      InPrivate Browsing komutunu verebilirsiniz.

     InPrivate taray›c› pencereleri bizim tüm bu isteklerimizi karfl›l›yor.
     InPrivate olarak açt›¤›m›z bir pencereyi kapatt›¤›m›zda o pencere ile
     ilgili her fley yok ediliyor. IE 8.0 içerisinde Safety InPrivate Brow-
     sing menüsünden açabildi¤imiz InPrivate pencerelerini adres çubu-
     ¤undaki InPrivate yaz›s›ndan da tan›yabiliyoruz.




      InPrivate pencerelerinde adres çubu¤unda InPrivate logosunu görebilirsiniz.

     InPrivate pencerelerini özellikle internet cafe gibi ortamlarda hat›rla-
     mak ve kendi bilgisayar›n›zda olmaman›za ra¤men özel bilgilerinizi
     girmek veya izlemek zorunda oldu¤unuz durumlarda s›kça kullan-
     makta güvenlik aç›s›ndan büyük fayda olacakt›r.
INTERNET EXPLORER 8 DEVR‹M‹                 9

InPr›vate Block›ng
Do¤rudan son kullan›c›n›n hissedece¤i bir sistem olmasa da InPriva-
te Browsing’e ek olarak ayr›ca bir de InPrivate Blocking mekaniz-
mas› var. Bu sistemi anlatman›n en kolay yolu sistemin engelledi¤i
güvenlik a盤›n› anlatmak geçiyor.
Varsayal›m ki birinci.com sitesini geziyoruz ve bu esnada sinsi.com
sitesinden bir JavaScript dosyas› ça¤r›ld›. Art›k sinsi.com bizi tan›-
yor, orada da bir oturumumuz var. Bir sonraki ad›mda ikinci.com
ad›nda bir siteyi ziyaret ettik ve flans eseri bu sitede de yine sin-
si.com’dan ayn› JavaScript dosyas› eklenmifl. An itibari ile sinsi.com
bizim ikinci.com’a gelmeden önce hangi sitede bulundu¤umuzu bili-
yor. Hatta bu senaryo daha da uzat›labilir ve ayn› taray›c› oturumu
içerisinde 20 önceki siteye kadar nereleri gezdi¤imiz sinsi.com tara-
f›ndan takip ediliyor olabilir. Tabi bunlar›n hepsinin gerçekleflmesi
için ayn› JavaScript’in tüm bu sitelerden ça¤r›lm›fl olmas› flart.
‹flte yukar›da anlatt›¤›m›z güvenlik a盤›n› engellemek amac› ile InP-
rivate Blocking gelifltirilmifltir. Sistemin amac› kullan›c›ya özel bilgi-
lerin farkl› sitelere kullan›c› fark›nda olmadan ulaflmas›n› engellemek.
E¤er InPrivate Blocking aktif ise taray›c› her sitede harici olarak yük-
lenen script’lerin listesini sakl›yor ve durumuna göre baz› script’leri
de aktif edebiliyor.

Ph›sh›ng Korumas› ve SmartScreen
Phishing olarak adland›rd›¤›m›z güvenlik a盤› asl›nda a¤›rl›kl› ola-
rak sosyal bir sald›r› mekanizmas› da say›labilir. Phishing’i teknik
olarak tamamen engellemek mümkün de¤il. Peki, nedir Phishing? Ba-
sit bir örnek olarak internet bankac›l›¤› mekanizmalar›n› ele alal›m.
Varsayal›mki her gün çal›flt›¤›n›z bankan›n web sitesi olan ban-
kam.com adresini ziyaret ediyorsunuz. fians eseri size bir e-posta gel-
di ve bankan›z›n web sitesinde bir ifllem yapman›z gerekti¤i söylenerek
“Buraya T›klay›n” tarz›nda bir link verildi. Taray›c›n›z aç›ld›¤›nda e-
bankam.com ad›nda bir adres görmeniz halinde e¤er bu durumdan ra-
hats›z olup adresin gerçekten sizin bankan›za ait olup olmad›¤›n› kont-
rol etmezseniz belki de çoktan düflman›n ellerine düfltünüz demektir.
Bu noktada, tabi ki Internet Explorer 8.0’›n hangi alan ad›n›n gerçek-
ten bankan›za ait olup olmad›¤›n› bilme flans› yok. Fakat en az›ndan
kontrol edilebilecek baflka noktalar var.
10 INTERNET EXPLORER 8




      SmartScreen Filter kullan›c›n›n ziyaret etti¤i adreste
      bir gariplik oldu¤unu alg›l›yor.


      Örne¤in, bir alan ad› de¤il de do¤rudan bir web sunucusunun IP adre-
      sine yönlendirilmifl iseniz büyük ihtimal ile bu dinamik bir IP adresi-
      dir ve söz konusu sunucu geçerli bir kurumsal web sunucusu de¤ildir.
      Bu gibi durumlar› alg›layan SmartScreen, Filter Phishing konusunda
      kullan›c›y› uyararak içerisine düflülebilecek kötü durumlar› azaltmay›
      hedefliyor.
INTERNET EXPLORER 8 DEVR‹M‹                    11




  SmartScreen Filter “Zararl›” olarak raporlanm›fl bir siteye eriflimi engelliyor.


Kolay Kullan›m
  Bilgisayar bafl›nda bulundu¤umuz süre boyunca en çok kulland›¤›m›z
  yaz›l›mlar› bir düflünelim. Akl›n›za gelenler aras›nda internet taray›c›-
  n›z›n ilk beflte olaca¤›ndan eminim. Bu kadar yo¤un bir flekilde kul-
  land›¤›m›z bir yaz›l›m›n tabi ki olabildi¤ince iflimizi kolaylaflt›rmas›
  ve h›zland›rmas› da gerekiyor. Birazdan IE 8.0 ile beraber gelen ve
  detaylarda sakl› olan ufak ama bir o kadar da de¤erli özelliklere göz
  ataca¤›z. Esas sürprizimi bölümün sonuna sakl›yorum.

  Act›veX Yüklemeleri
  ActiveX yüklemeleri için “bafl›m›z›n belalar›” desek herhalde hiç de
  yanl›fl olmaz. ActiveX yüklemesi gerektiren bir sayfada karfl›m›za ç›-
  kan güvenlik uyar›s› sonras› sayfay› tekrar açmak zorunda kalmak ve-
  ya yönetici haklar›na sahip olmad›¤›m›z bir bilgisayarda ActiveX’le-
  ri yükleyemedi¤imiz için çok basit web uygulamalar›n› bile kullana-
  mamak neredeyse günübirlik s›k›nt›lar›m›z aras›nda yer al›yor. Bu s›-
  k›nt›lar asl›nda sadece son kullan›c›n›n de¤il, dolayl› olarak sistem
  yöneticilerinin ve programc›lar›n da s›k›nt›lar› aras›nda.
12 INTERNET EXPLORER 8

      Özellikle Vista ile beraber gelen UAC (User Account Control) sonra-
      s›nda bu dertler gergin senaryolara sebep olabiliyor. Ama art›k her fley
      de¤iflti, kullan›c›lar yönetici haklar›na sahip olmasalar da kendi kulla-
      n›c› hesaplar›na özel olarak ActiveX uygulamalar› yükleyebilecekler.
      E¤er söz konusu ActiveX uygulamas› zararl› bir kod içeriyorsa bu du-
      rumun bilgisayara hiçbir flekilde zarar› dokunamayacak. En güzel ha-
      ber ise yaz›l›m gelifltiriciler için; var olan ActiveX uygulamalar› her-
      hangi bir sorun yaflamadan bu sistem ile çal›flabiliyor.
      Kullan›c›lar herhangi bir ActiveX kontrolü ile karfl›laflt›klar›nda kont-
      rolü sadece kendileri için veya tüm makine baz›nda yüklemek isteyip
      istemediklerini seçebilecekler. Bu seçim flu anki Internet Explorer içe-
      risinde ActiveX kontrolleri için gelen uyar› mekanizmas›na dahil edil-
      mifl durumda.




      ActiveX yüklemeleri art›k yönetici haklar› olmaks›z›n da çal›flabiliyor.

      Sekme Renklendirme
      Internet Explorer 7 ile beraber internet taray›c›s› içerisinde sekmeler
      (tabs) kullanmaya iyice al›flt›k. Fakat bazen çok say›da sekme aç›nca
      hangi sekmenin hangi konuyla iliflkili oldu¤unu bulmak zor olabiliyor.
      Varsayal›m ki, iki farkl› konuda live.com üzerinde birer arama yapt›-
      n›z ve arama sonuçlar›n›n bulundu¤u sayfalar› açarak ve yine o sayfa-
      lardan da baflka sayfalar› yeni sekmelerde açarak araflt›rman›za devam
      ediyorsunuz. Peki, hangi sekmeler hangi araman›zla iliflkiliydi?
INTERNET EXPLORER 8 DEVR‹M‹                13




Farkl› kaynaklardan aç›lan sekmeler farkl› renklerde gösteriliyor.

Internet Explorer 8.0 ile beraber art›k açt›¤›n›z her sekme kendi sahi-
bini tan›yor. Bir anlamda taray›c›n›z sizin iki veya daha fazla say›da
farkl› yoldan interneti gezdi¤inizi alg›layarak bu yollar› da aç›k bir fle-
kilde gösterebilmek ad›na sekmeleri farkl› renklerle grupluyor. Haya-
t› kolaylaflt›ran ufak ve hofl bir detay de¤il mi?




Sekme gruplar›n› sa¤ tufl ile gelen menüden yönetebilirsiniz.
14 INTERNET EXPLORER 8

      Ak›ll› Adres Çubu¤u
      Taray›c› içerisindeki adres çubu¤u bir taray›c›da en çok kullan›lan
      yerlerden biridir. Sürekli adres çubu¤una bir adres yazar›z, daha önce
      yazd›¤›m›z adresleri arar›z ve tüm internet gezintimiz boyunca sürek-
      li adres çubu¤unu kullan›r›z. Internet Explorer ekibi de bunun fark›n-
      da oldu¤u için adres çubu¤unda da baz› de¤ifliklikler yap›lm›fl. Bun-
      lardan ilki “Search Suggestion” entegrasyonu. Search Suggestion
      konusunda detaylara ileriki bölümlerde de¤inece¤iz fakat bu aflamada
      önemli olan bizim kullan›c› olarak istedi¤imiz bir arama mekanizma-
      s›n› IE içerisine entegre ettikten sonra adres çubu¤undan da bu siste-
      mi kullanabiliyor olmam›z.




      Adres çubu¤unda hem arama sonuçlar› hem de adres geçmifli beraber.

      Adres çubu¤unda do¤rudan arama yapt›rabilmek için tek yapman›z ge-
      reken arataca¤›n›z sözcükleri yazmadan önce bir soru iflareti (?) koy-
      mak. Böylece sistem otomatik olarak varsay›lan Search Provider’›n,
      varsa Search Suggestion mekanizmas›n› da kullanarak uygun arama so-
      nuçlar›n› taray›c› geçmifli ile beraber bir mini rapor olarak sunacakt›r.
INTERNET EXPLORER 8 DEVR‹M‹                  15




  Adres çubu¤unda diskteki klasör ve dosyalar› görerek
  istedi¤imiz dosyay› IE ile açabiliyoruz.

  Belki nadiren de olsa Internet Explorer içerisinde sistemimizdeki dos-
  yalar› da açmak isteyebiliriz. Bu dosyalar bazen basit birer JPEG re-
  sim dosyas› olabilirken belki de do¤rudan IE içerisinde aç›labilen XPS
  dosyalar› da olabilir. Bu gibi durumlarda adres çubu¤undan diskin
  içeri¤ini gezerek istedi¤imiz dosyay› h›zl›ca bulabilmek büyük avan-
  taj sa¤lar. ‹flte karfl›n›zda adres çubu¤unda Visual Studio içerisinde
  Intellisense yap›s›na benzeyen disk gezgini.
Yeni Trendler
  Geldik bölümün en heyecanl› k›sm›na. IE 8.0 ile beraber art›k inter-
  nette sörf sporuna yeni bir ak›m geliyor diyebiliriz. Bu ak›m› olufltu-
  ran kelimeleri Accelerator, Search Suggestion ve Web Slice fleklin-
  de özetleyebiliriz. Tüm bunlar internette sörf yapma fleklinizi, webi
  kullanma mant›¤›n›z› ve tüm al›flkanl›klar›n›z› de¤ifltirmeye aday yep-
  yeni araçlar. Hemen gelin bu yeni dünyaya dal›p h›zl› bir tur atal›m ve
  nas›l olacak da IE al›flkanl›klar›m›z› de¤ifltirecek görelim.
  H›zland›r›c› (Accelerator)
  ‹ngilizce kelime anlam› h›zland›r›c› olan Accelerator yap›s›, asl›nda
  fark›nda olmadan gün içerisinde defalarca kulland›¤›m›z web tabanl›
  servisleri daha rahat ve h›zl› kullanabilmemiz için gerekli altyap›y› su-
  nuyor. Gelin beraber bir düflünelim, internette gezinirken sürekli yap-
  t›¤›m›z ve tekrar etti¤imiz ifllemler nelerdir? San›r›m birincisi arama
  motorlar›n› kullanmak, kiflisel olarak düflündü¤ümde benim en s›k
  kulland›¤›m servislerden biri de harita servisleri. Bir web sitesinde gör-
  dü¤üm adresin tam olarak nerede oldu¤u? Oraya nas›l gidebilece¤im?
16 INTERNET EXPLORER 8

      Baflka neler olabilir düflünelim... Sözlük hizmetleri de bu servisler
      aras›nda yerini alabilir, bilmedi¤im bir kelimeyi h›zl› bir flekilde
      Türkçeye çevirerek anlam›n› ö¤renmek istedi¤imde kütüphaneye uza-
      n›p bir sözlük bulmaktansa hemen internette online bir sözlük kullan-
      may› tercih ederim.
      Tüm bu servislere bakt›¤›m›zda asl›nda sürekli ayn› fleyi tekrar etti¤i-
      mizi görebiliriz. ‹nternette karfl›laflt›¤›m›z bir kelimeyi, adresi veya
      bilgiyi al›r baflka bir internet servisine teslim eder ve uygun bir sonu-
      cu gözle görmek isteriz. Bu sonuç bazen bir harita, bazen bir arama
      sonucu bazen de farkl› dilde bir kelimenin aç›klamas› olabilir. Tüm bu
      örneklerde asl›nda hep ayn› mekanizma çal›fl›yor ve bu ifllemleri biz
      defalarca ayn› flekilde tekrarl›yoruz. ‹flte Accelerator’lar bu noktada
      devreye girip tekrarlad›¤›m›z bu süreçleri k›saltmay› hedefliyor.
      Accelerator’lara ulaflmak için Internet Explorer içerisinde herhangi
      bir web sitesini gezerken web sitesi üzerinde sa¤ tufl ile t›klamak ye-
      terli olacakt›r. Karfl›n›za ç›kan menüde her bir Accelerator yap›s› için
      birer komut göreceksiniz. Accelerator’lar›n baz›lar› sadece içerisinde
      bulunulan sayfan›n adresi ile ilgilenirken (Örne¤in içerisinde bulun-
      du¤unuz sayfay› baflka bir dile tercüme edecek bir Accelerator) baz›-
      lar› ise sadece fare ile söz konusu sayfada bir yaz› seçilmiflse çal›fla-
      cakt›r (Örne¤in seçili adresi haritada gösteren bir Accelerator).




      LiveMaps Accelerator’›n› kullanarak seçti¤imiz bir adresi
      do¤rudan haritada görebiliyoruz.
INTERNET EXPLORER 8 DEVR‹M‹                 17

Accelerator’lar›n baz›lar› an›nda sonucu ek bir pencerede gösterebilir-
ken baz›lar› sadece t›kland›¤›nda baflka bir sekme veya pencere aça-
rak sonucu gösterebilirler. Sisteminize yeni Accelerator’lar› ancak
Accelerator sa¤layan web sitelerinde uygun linklere t›klayarak yükle-
yebilirsiniz. Accelerator’lar›n programatik olarak nas›l haz›rland›¤›
ile ilgili detaylara bir sonraki bölümümüzde de¤inece¤iz.




Manage Accelerator k›sm›ndan sistemde yüklü tüm
Accelerator’lar› yönetebilirsiniz.

Herhangi bir Accelerator ilk defa sisteme yüklendi¤inde do¤rudan
menülerde yerini almaz. More Accelerators menüsüne yerleflen yeni
Accelerator’lar› kullan›c›lar isterlerse ana menüye tafl›yabilirler. Bu-
nun için taray›c› içerisinde sa¤ tufl ile gelen menüden Manage Acce-
lerator komutunu vererek uygun bölüme geçmeleri gerekir.
18 INTERNET EXPLORER 8




      Manage Accelerator bölümünden isterseniz sistemdeki
      Accelerator’lar› silebilirsiniz.


      Manage Accelerators bölümünde kullan›c›lar hangi Accelerator’la-
      r›n ana menüde gözükece¤ine karar vermek için istedikleri Accelera-
      tor’› seçerek sa¤ altta gelen dü¤melerden Set as Default dü¤mesine
      t›klayabilirler. Ayn› flekilde ana menüde yer alan bir Accelerator’› alt
      menüye göndermek için de Remove as default dü¤mesi kullan›labi-
      lir. Manage Accelerators penceresinde herhangi bir Accelerator se-
      çildi¤inde istenirse Disable dü¤mesi ile bu Acceletor pasif hale geti-
      rilebilir veya Remove dü¤mesi ile tamamen sistemden kald›r›labilir.

      Görsel Arama (V›sual Search)
      Internet Explorer 7.0 ile beraber gelen Search Provider yap›s› kullan›-
      c›lara taray›c› içerisine kendi tercih ettikleri arama motorlar›n› enteg-
      re etme olana¤› tan›d›. Böylece kullan›c›lar›n taray›c›n›n sol üstünde-
      ki ufak kutucu¤a yazd›klar› aramalar otomatik olarak taray›c›ya yük-
      lenmifl Search Provider içerisindeki kurallara göre söz konusu arama
      motoruna gönderilip taray›c› içerisinde sonuçlar gösteriliyordu.
      Internet Explorer 8.0 ile beraber Search Provider yap›s›na Visual Se-
      arch ad›nda yeni bir sistem eklendi. Bu sistemin amac› kullan›c›lar
      aramak istedikleri kelimeleri taray›c› içerisinde yazarken otomatik
      olarak olas› sonuçlar› yine taray›c› ile entegre olarak göstermek.
INTERNET EXPLORER 8 DEVR‹M‹                 19

Yaz›l›mc› kimli¤iyle konuya bakarsak asl›nda bir süredir web orta-
m›nda al›fl›k oldu¤umuz AJAX ile kurulan AutoComplete sistemleri-
nin bir türevi ile karfl› karfl›ya oldu¤umuzu söyleyebiliriz. Tabi bu sis-
temin kullan›labilmesi için Internet Explorer’a arama yap›lacak arama
motorunun Search Provider’›n›n yüklenmifl olmas› ve söz konusu Se-
arch Provider’›n da Visual Search sistemini desteklemesi gerekiyor.
Bu konudaki teknik detaylar› bir sonraki bölümümüzde derinlemesi-
ne inceleyece¤iz.




Görsel Arama sistemi aramalarda otomatik sonuçlar› gösteriyor.

Sisteminize herhangi bir Görsel Arama eklemek için özünde bu des-
te¤e sahip bir Search Provider eklemeniz gerekiyor. Search Provi-
der’lara farkl› web sitelerinden ulaflabilece¤iniz gibi isterseniz do¤ru-
dan Internet Explorer’›n web tabanl› Search Provider galerisini de
Find More Providers komutu ile ziyaret edebilirsiniz.
Yüklemifl oldu¤unuz Search Provider’lar› silmek veya varsay›lan ara-
ma motoru olarak atamak için arama kutucu¤unun yan›ndaki oka ba-
sarak Manage Search Providers komutunu verebilirsiniz.
20 INTERNET EXPLORER 8




      Search Provider’lar›n hepsini bu pencereden yönetebilirsiniz


      “Manage Search Providers” alt›nda kay›tl› arama motorlar›n›n taray›c›
      arayüzünde gösterilmesi s›ras›n› de¤ifltirebilece¤iniz gibi istedi¤iniz
      bir Provider yap›s›n› Remove dü¤mesi ile sistemden silebilirsiniz de.

      Web Sl›ce
      Benim en favori özelli¤ime geldik. Web Slice’lar›n mant›¤›nda bir
      web sitesinin belirli bir bölümünü kesip sürekli o bölümü takibe al-
      mak yat›yor. Söz konusu kesik bölümde herhangi bir de¤ifliklik oldu-
      ¤unda taray›c› sizi hemen haberdar ediyor ve ister yine o kesi¤i ister
      tüm sayfay› yeniden inceleyebiliyorsunuz.
      Tabi sanal ortamda bir fleyleri kesmek pek mümkün de¤il, o nedenle
      tam olarak neden bahsetti¤imize gerçek bir örnekle göz atal›m. Var-
      sayal›m ki en sevdi¤in haber sitesindeki haberleri takip etmek istiyor-
      sunuz veya bir aç›k artt›rma sitesindeki belirli bir ürünün durumunu
      sürekli kontrol etmeniz gerekiyor. Bu gibi senaryolarda kullanabilece-
      ¤imiz teknolojilerden biri RSS’ler. E¤er karfl› taraf size bir RSS kay-
      na¤› sa¤larsa söz konusu RSS’i RSS Okuyucu program›n›za ekleye-
      rek takip edebilirsiniz. Bu durum belki bir haber sitesini takip etmek
      için uygun olsa da maalesef aç›k artt›rma sitesindeki örnek için pek
      kolay bir çözüm olmayacakt›r. K›sa bir süre için takip etmek istedi¤i-
      niz ufak verileri tek tek bir RSS okuyucuya eklemenin zahmetini geç-
INTERNET EXPLORER 8 DEVR‹M‹                 21

sek bile maalesef araya ikinci bir program veya arayüz eklemifl olma-
n›n getirece¤i hantall›k da üzerimize çökecektir.
Tüm bu dertlerin içinde bo¤uflurken kahraman›m›z Web Slice yard›-
m›m›za kofluyor ve web sitelerinde desteklenen bölümleri kesip tara-
y›c›m›z›n bir parças› haline getirebiliyoruz. Tabi bu ifllemin yap›labil-
mesi için söz konusu web sitesi taraf›ndaki programc›lar›n ve tasar›m-
c›lar›n yapmalar› gereken baz› ufak ifller var. Bu ifllerin detaylar›na bir
sonraki bölümde de¤inece¤iz. fiimdilik hali haz›rda bu deste¤i veren
bir site ile yola ç›karak Web Slice’lar›n kullan›m›na göz atal›m.




‹stedi¤imiz ürüne Web Slice olarak al›p taray›c›m›za ekliyoruz

E¤er bir web sitesinde takip edebilece¤iniz, kesip alabilece¤iniz bir
Web Slice varsa söz konusu bölümün fare ile üzerine geldi¤inizde ye-
flil bir çerçeve ve Web Slice logosu karfl›n›za gelecektir. Bu görsellik
tabi ki farkl› web sitelerinde tasar›mc›lar taraf›ndan farkl› flekillerde
de¤ifltirilebilir. Web Slice logosunu gördü¤ünüz hemen o logoya t›k-
layarak web sitesinin söz konusu bölümünü kesip alabilirsiniz. Bu es-
nada Internet Explorer size nereden veri alaca¤›n›z› da gösteren bir
uyar› kutucu¤u gösterecektir.
22 INTERNET EXPLORER 8




      Ald›¤›m›z Web Slice taray›c›m›z›n araç çubu¤una yerleflti.

      Kesip alma ifllemi tamamland›¤›nda art›k Web Slice’›n›z Internet
      Explorer’›n araç çubu¤unda yerini alm›fl olacakt›r. ‹stedi¤iniz zaman
      Web Slice’›n bafll›¤›na t›klyarak web sitesinin kesti¤iniz bölümünü
      inceleyebilirsiniz. Bazen kesti¤iniz yer ile araç çubu¤unda gördükle-
      riniz bire bir birbirlerine benzeyebilece¤i gibi tamamen farkl› bir gör-
      sellikle de karfl›laflabilirsiniz. Bu noktadaki karar ziyaret etti¤iniz site-
      nin tasar›mc› ve programc›lar›n ait.
      Art›k Internet Explorer sizin için söz konusu kesi¤i sürekli kontrol
      edecek ve herhangi bir de¤ifliklik oldu¤unda Web Slice’›n bafll›¤› araç
      çubu¤unda parlayarak kal›n bir flekilde yaz›lacakt›r. Her Web Slice’›n
      kendi penceresinin sol alt›nda üç adet dü¤me yer alabilir. Bunlardan
      sa¤a ok iflareti fleklinde olan sizi Web Slice’›n kesildi¤i sayfaya yön-
      lendirecektir.
      Refresh (Yenile) dü¤mesinin logosuna benzer görsellikte olan dü¤me
      Web Slice’›n içeri¤inin ana kaynaktan tekrar al›nmas›n› sa¤larken,
      e¤er varsa sar› bir ünlem iflareti ise Web Slice’›n›z›n ne kadar süre
      sonra kullan›mdan kalkaca¤›na dair bilgiyi sa¤layacakt›r.
INTERNET EXPLORER 8 DEVR‹M‹                 23




                                                     Web Slice’›m›za
                                                     özel ayarlar.


Bir Web Slice’›n araç çubu¤undaki bafll›¤›na sa¤ t›klad›¤›n›zda gelen
menüden Properties komutunu verirseniz karfl›n›za söz konusu Web
Slice ile ilgili düzenleyebilece¤iniz ayarlar›n bulundu¤u özel bir pen-
cere gelecektir. Bu pencere içerisinde gerekiyorsa Web Slice için gü-
venlik bilgilerini girebilir veya Web Slice içeri¤inin ne kadar sürede
bir internetteki kaynaktan yenilenmesi gerekti¤ini ayarlayabilirsiniz.
Herhangi bir Web Slice’› silmek için yine sa¤ tufl ile Web Slice’›n
araç çubu¤undaki bafll›¤›na t›klayarak gelen menüden Delete komu-
tunu verebilirsiniz.
24 INTERNET EXPLORER 8
3
  Web’de Yeni Trendler
  Bir H›zland›r›c› (Accelerator)                  VB ve ASP.NET ile
  Nas›l Haz›rlan›r?                   25          XML Üretmek               41
  Son Ad›mlar...                      30          PHP ile XML Üretmek       44
  Art›k Haz›r›z                       32          Görsel Aramalar için
                                                  JSON Veri Kayna¤›         46
  Görsel Arama Nas›l Haz›rlan›r?      32
                                           Web Dilimleri Nas›l Haz›rlan›r   47
     Görsel Arama ve
     Arama Sa¤lay›c›lar›n ‹flbirli¤i   35     Çal›flma Yap›s›                 48
     Sunucu Taraf›nda                        Display Source De¤iflikli¤i     49
     Neler Yapmal›?                   36     Farkl› Web Dilimleri’ni
     Sunucuda Gerçek Zamanl›                 Birbirine Ba¤lamak             50
     XML Üretimi                      39     Web Dilimi’ne Kaynak Olarak
         C# ve ASP.NET ile                   RSS Kullanmak               50
         XML Üretmek                  39


  Internet Explorer 8 ile beraber gelen yeniliklere h›zl› bir flekilde göz
  att›ktan sonra son kullan›c›n›n ötesinde biz üreticiler, yani yaz›l›mc›-
  lar ve web tasar›mc›lar için neler nas›l iflliyor sorusuna cevap verece-
  ¤imiz bu bölümde odaklanaca¤›m›z ana üç konu var. ‹lk olarak H›z-
  land›r›c›lar›n (Accelerator) yap›s›n› inceleyerek hem tasar›m hem de
  yaz›l›m noktas›nda ne gibi bir altyap› haz›rlamam›z gerekti¤ine baka-
  ca¤›z. Sonras›nda hemen Internet Explorer 8’in Görsel Arama (Visu-
  al Search Suggestion) özelli¤i için gerekli programatik yap›n›n olufltu-
  rulmas›na de¤inecek ve Web Dilimleri’nin (Web Slices) oluflumu ve
  haz›rlanmas› ile ilgili detaylar ile bölümümüzü sonland›raca¤›z. Gelin
  h›zl› bir flekilde örnekler ile bu yeni web trendlerini inceleyece¤im.

Bir H›zland›r›c› (Accelerator)
Nas›l Haz›rlan›r?
  Accelerator’lar özünde birer XML dosyas›d›r. Bu XML dosyalar›n›n
  yaz›m standard› Microsoft taraf›ndan belirlenmifl olup OpenService-
  Description olarak geçer. Bu standarda uygun yaz›lan bir XML kodu
  ile taray›c›n›n hangi durumlarda ne gibi ifllemler yapaca¤›na dair h›z-
  land›r›c›lar çerçevesinde kararlar› biz yaz›l›mc›lar olarak al›r›z. Böy-
  lece XML içerisinde tan›ml› olan bir ayarlar Internet Explorer 8 içeri-
  sinde kullan›c›lar›n karfl›s›na birer H›zland›r›c› olarak ç›kar.

  <?xml version=”1.0” encoding=”utf-8” ?>
  <openServiceDescription xmlns=”http://www.micro-
26 INTERNET EXPLORER 8

      soft.com/schemas/openservicedescription/1.0”>
        <homepageUrl>http://www.zargan.com/</homepageUrl>
        <display>
          <name>Zargan’da ara</name>
          <icon>http://www.zargan.com/favicon.ico</icon>
        </display>
        <activity category=”search”>
          <activityAction context=”selection”>
             <execute method=”get” action=
      ”http://www.zargan.com/sozluk.asp”>
               <parameter name=”Sozcuk” value=”{selection}” />
             </execute>
          </activityAction>
        </activity>
      </openServiceDescription>

      Zargan.com Türkçe-‹ngilizce çeviri sitesinde kullan›lan h›zland›r›c›ya ait kod.

      Yukar›da görmüfl oldu¤unuz XML kodu flu anda Zargan.com ‹ngiliz-
      ce-Türkçe sözlük taraf›ndan kullan›lan H›zland›r›c›’n›n XML kodudur.
      Özünde basit bir h›zland›r›c›n›n haz›rlanmas› yolunda e¤er h›zland›r›c›
      Ön ‹zleme (Preview) ekran› içermiyorsa sunucu tarafl› olarak ek bir kod
      veya ifllem yap›lmas›, sayfa haz›rlanmas› gerekmez. Bir önceki bölüm-
      de de inceledi¤imiz üzere h›zland›r›c›lar›n amac› bir siteden herhangi bir
      veriyi al›p baka bir siteye tafl›makt›r. Yukar›daki örnekte herhangi bir si-
      tedeki kelime do¤rudan Zargan.com’daki çeviri sayfas›na tafl›narak ola-
      s› çeviri ifllemlerinin sonuçlar›n›n an›nda gösterilmesini sa¤l›yor.




      Zargan.com h›zland›r›c›s›n› Microsoft sitesinde kullan›rken.
WEB’DE YEN‹ TRENDLER               27

Bir h›zland›r›c› yazarken karar verilmesi gereken noktalardan biri h›z-
land›r›c›n›n hangi flekillerde kullan›c›ya sonuç gösterece¤i. Var olan
iki alternatiften biri kullan›c›n›n taray›c› içerisinde sa¤ tufla t›klay›nca
eriflebilece¤i bir menüden tekrar bir t›klama ile hedef siteye yönlendi-
rilmesi, bir di¤eri ise do¤rudan söz konusu menü üzerinde kullan›c›
gezerken an›nda bir Ön ‹zleme penceresi gösterilmesi. Bu iki alterna-
tif metodun her biri h›zland›r›c›n›n XML’i içerisinde birer action ola-
rak tan›mlanmak durumunda.

<activityAction context=”selection” >
  <preview action=”http://daron.yondem.com/aramasonuc.
aspx” method=” get” >
     <parameter name=”kelime” value=”{selection}” />
  </preview>
  <execute action=” http://daron.yondem.com/arama-
sonuc_ozel.aspx” method=” post” >
     <parameter name=”kelime” value=”{selection}” />
  </execute>
</activityAction>

Hemen yukar›daki kod örne¤inde kal›n olarak yaz›l› noktalara dikkat
edersek asl›nda farkl› durumlarda h›zland›r›c›n›n nas›l ifllemler yapaca-
¤›n› ayr› ayr› belirtti¤imizi görebiliriz. Standart olarak execute action
tüm h›zland›r›c›larda bulunmas› zorunlu elementlerden biri olsa da her
h›zland›r›c› preview action ile bir ön izleme ekran› sa¤lamak zorunda
de¤il. H›zland›r›c›lardaki ön izleme ekranlar› asl›nda basit birer IFRA-
ME olarak çal›fl›rlar ve içlerinde yine h›zland›r›c› içerisinde tan›ml›
web sayfas› uygun parametreler ile çal›flt›r›l›r. Bir h›zland›r›c›n›n ön iz-
leme ekran› kendi içinde Post veya Get ifllemleri de yapabilir böyle-
ce belki de gösterilecek sonuçlar sayfalama yap›larak gösterilebilir.
Maalesef ki gelen ön izleme ekran›n›n boyutunu de¤ifltirme flans›n›z
olmayacakt›r, bu denenle ön izleme ekran›nda sonuç gösterimi yapa-
cak olan sayfalar› özel olarak bu duruma uygun flekilde tasarlamak flart.

<activityAction context=”selection” >
......
......
</activityAction>
28 INTERNET EXPLORER 8

      Kodun en üstünde ve en alt›nda activityAction ad›nda bir XML tag’›
      daha göreceksiniz. Bu tag içerisindeki context parametresi bir h›z-
      land›r›c›n›n çal›flaca¤› durumu tan›ml›yor. Örne¤in e¤er context de-
      ¤eri selection olarak ayarlanm›fl ise söz konusu h›zland›r›c› sadece
      taray›c› içerisinde bir metin seçildi¤inde devreye girecek ve h›zland›-
      r›c›lar menüsünde yerini alacakt›r. Oysa ayn› context özelli¤ine
      link de¤erini verirseniz bu sefer de h›zland›r›c›n›z taray›c› içerisin-
      deki herhangi bir linke sa¤ t›kland›¤›nda gelen menüde yer alacakt›r.
      Tabi ki bu her iki durum için de ayr› ayr› execute action ve preview
      action’lar tan›mlamak mümkün. Tek yapman›z gereken bu tan›mla-
      malar› uygun activityAction tag’lar› aras›na almak.

        <execute action=” http://daron.yondem.com/arama-
      sonuc_ozel.aspx” method=” post” >
          <parameter name=”kelime” value=”{selection}” />
        </execute>

      fiimdi gelin detayl› olarak yukar›da kod ile taray›c›ya neler anlatmaya
      çal›flt›¤›m›z› inceleyelim. ‹lk olarak iki önceki paragrafta da bahsetti-
      ¤imiz üzere execute action tag’›n› açarak h›zland›r›c›ya h›zland›-
      r›c›lar menüsünde t›kland›¤›nda yap›lacak ifllemleri tan›ml›yoruz. So-
      nuç itibari ile ayr› bir siteye veri gönderme amac› ile yola ç›kt›¤›m›z
      için yap›lacak ifllem bir POST veya GET ifllemi olabilir. Bunu hemen
      method özelli¤inde belirtiyoruz. E¤er POST seçene¤ini seçerseniz tüm
      parametreler form olarak gönderilecektir, e¤er GET metodunu seçer-
      seniz tüm parametreler adrese query olarak eklenerek gönderilecek-
      tir. Tabi ki tüm bu parametrelerin gönderilece¤i bir de adres bulun-
      mak zorunda, iflte o adresi de action özelli¤ine at›yoruz. Böylece ar-
      t›k h›zland›r›c›m›z parametreleri nereye nas›l gönderece¤ini biliyor.
      Peki parametreler nelerdir?

      <parameter name=”kelime” value=”{selection}” />

      Yukar›daki flekilde herhangi bir action için istedi¤iniz say›da para-
      metre tan›mlayabilirsiniz. Her parametrenin bir ad› ve bir de de¤eri
      bulunmak zorunda. Bu de¤eri value özelli¤i olarak tan›mlarken ister-
      seniz elle sabit de¤erler girebilece¤iniz gibi taray›c› taraf›nda çal›flma
      zaman›nda belirlenecek dinamik de¤erleri de karfl› sunucuya göndere-
      bilirsiniz.
WEB’DE YEN‹ TRENDLER             29

Asl›nda bizim esas amac›m›z da kullan›c›n›n sayfada seçti¤i metin ve-
ya linkin bilgileri gibi dinamik bilgileri an›nda kendi sunucumuzdaki
uygulama gönderebilmek. Bu çerçevede örnekte oldu¤u üzere {se-
lection} gibi de¤iflken parametreler kullanarak kendi parametrele-
rimizin de¤erlerini Internet Explorer 8’in belirlemesini sa¤layabiliyo-
ruz. Kullan›labilecek farkl› parametreleri ve alaca¤› de¤erlerin anla-
m›n› afla¤›daki tabloda bulabilirsiniz.

   Ad›                    Aç›klamas›

   documentDomain         ‹çerisinde bulunan sayfan›n alan ad›.

   documentTitle          ‹çerisinde bulunan sayfan›n HTML bafll›k
                          (title) bilgisi.

   documentUrl            ‹çerisinde bulunan sayfan›n tam adresi.

   link                   E¤er kullan›c› bir linkte sa¤ t›klam›fl ise
                          bu linkin adresi.

   linkDomain             E¤er kullan›c› bir linkte sa¤ t›klam›fl ise
                          bu linkin hedefledi¤i ana alan ad›.

   linkRel                E¤er kullan›c› bir linkte sa¤ t›klam›fl ise
                          bu linkin rel microformat de¤eri.

   linkText               E¤er kullan›c› bir linkte sa¤ t›klam›fl ise
                          bu linkin içerisindeki yaz›.

   selection              Kullan›c›n›n taray›c› sayfas›nda seçmifl
                          oldu¤u metin.


Tüm bu ifllemleri tamamlad›ktan sonra ayn› parametreleri kullanarak
bir ön izleme ekran› da haz›rlayabilirsiniz.

  <preview action=”http://daron.yondem.com/aramasonuc.
aspx” method=” get” >
     <parameter name=”kelime” value=”{selection}” />
  </preview>

Üstte görebilece¤iniz kod içerisindeki tek farkl›l›k ana tag’›n execute
action yerine preview action olarak tan›mlanm›fl olas›. Ayr›ca ta-
bi ki bu sefer hedef adres olarak verdi¤imiz yerdeki web sayfam›z›n ta-
30 INTERNET EXPLORER 8

         sar›m› da normalden farkl› olarak ön izleme penceresi içerisine s›¤abi-
         lecek flekilde tasarlanm›fl olmal›.

   NOT     SUNUCU TARAFINDA NELER YAPMALI?
           H›zland›r›c›lar›n sunucu tarafl› programlama teknolojileri veya iflletim sis-
           temlerinden tamamen ba¤›ms›z olarak istemcide çal›fl›rlar. Önemli olan tek
           fley h›zland›r›c›ya ait tan›mlar›n yap›ld›¤› XML dosyas›n›n bir flekilde web su-
           nucusu taraf›ndan site ile ayn› port üzerinden yay›nlanabiliyor olmal›s›d›r.
           Bir h›zland›r›c› taraf›ndan siteye gönderilen parametreler programc›n›n
           tercihine göre standart POST veya GET ifllemleri ile gönderilir ve bu ve-
           rileri alabilmek için sunucu taraf›nda yine standart prosedürler uygulan›r.

           [ASP.NET C#]
                   //GET ile gelen veriyi almak için.
                   Request.QueryString[“sozcuk”];
                   //POST ile gelen veriyi almak için.
                   Request.Form[“sozcuk”);

           [ASP.NET VB]
                   ‘GET ile gelen veriyi almak için.
                   Request.QueryString(“sozcuk”)
                   ‘POST ile gelen veriyi almak için.
                   Request.Form(“sozcuk”)

           [PHP]
                   //GET ile gelen veriyi almak için.
                   $_GET[‘sozcuk’];
                   //POST ile gelen veriyi almak için.
                   $_POST[‘sozcuk’];


         Son Ad›mlar...
         H›zland›r›c›m›zla ilgili tüm ifllevselliklere karar verdi¤imize göre son
         olarak h›zland›r›c›m›z›n tan›mlar› ve kimli¤i ile ilgili ayarlar› da ya-
         parsak yay›na haz›r hale getirebiliriz.

         <?xml version=”1.0” encoding=”utf-8” ?>
         <openServiceDescription xmlns=”http://www.microsoft.
         com/schemas/
           openservicedescription/1.0”>
WEB’DE YEN‹ TRENDLER              31

   <homepageUrl>http://daron.yondem.com/</homepageUrl>
   <display>
     <name>Deneme ile çevir</name>
     <icon>http://daron.yondem.com/favicon.ico</icon>
   </display>
   <activity category=”translate”>
     <activityAction context=”selection” >
        <preview action=”http://daron.yondem.com/cevir.
asp”>
          <parameter name=”Sozcuk” value=”{selection}”
/>
        </preview>
        <execute action=”http://daron.yondem.com/cevir.
asp”>
          <parameter name=” Sozcuk “ value=”{selection}”
/>
        </execute>
     </activityAction>
   </activity>
</openServiceDescription>

‹lk olarak tan›mlad›¤›m›z tüm activityAction’lar› ayr› bir acti-
vity tag’› içerisine alarak bu tag’a da category de¤eri vermemiz
gerekiyor. Bu noktadaki category elementine verece¤iniz de¤er için
önceden haz›rlanm›fl bir liste yok. Category de¤eri için Microsoft ta-
raf›ndan belirlenen kural söz konusu de¤erin ‹ngilizce bir fiil içerme-
si gerekti¤i ve k›smen emir kipinde bulunmas› fleklinde tan›mlanabi-
lir. Bu de¤erler taray›c› taraf›ndan sadece gruplama amac› ile kullan›-
l›yor ve ayn› de¤erlere sahip h›zland›r›c›lar› h›zland›r›c› menüsünde
beraber gösteriliyor.

  <homepageUrl>http://daron.yondem.com/</homepageUrl>
  <display>
    <name>Deneme ile çevir</name>
    <icon>http://daron.yondem.com/favicon.ico</icon>
  </display>

Son olarak openServiceDescription dosyas›n›n bafl›nda h›zland›-
r›c›m›zla ilgili kimlik bilgilerini de giriyoruz. Hemen ufak bir uyar›da
bulunmak istiyorum homePageUrl olsun icon adresi olsun tüm bu ad-
32 INTERNET EXPLORER 8

      reslerin action adresleriniz ile ayn› alan ad›n› hedeflemesi flart. Aksi
      halde h›zland›r›c›n›z›n çal›flmas› ile ilgili sorunlar yaflayabilirsiniz.

      Art›k Haz›r›z
      H›zland›r›c›m›z› yay›na almaya haz›r›z. E¤er h›zland›r›c›n›n kullan›c›-
      lar› yönlendirece¤i sayfalarla ilgili tasar›msal veya programatik de¤i-
      fliklikler yapt›ysan›z ilk olarak söz konusu k›s›mlar› sunucunuza yük-
      lemenizde fayda var. Sonras›nda h›zland›r›c›n›z› sunucuya yüklemek
      için sadece openServiceDescription XML dosyas›n›n web sunucusu
      üzerinden ulafl›labilir bir konu koyman›z yeterli olacakt›r. Örne¤in
      web sitenizin adresinin deneme.com oldu¤unu düflünürsek dene-
      me.com/hizlandirici.xml fleklinde h›zland›r›c›n›z›n XML dosyas›na
      ulafl›labiliyor olmas› yükleme ifllemini tamamlam›fl olmak için yeterli.
      Peki kullan›c›lar›n bu h›zland›r›y› nas›l bulacaklar? Nereye t›klayarak
      bilgisayarlar›na yükleyecekler? ‹flte bu noktada karar sizin. Afla¤›daki
      JScript komutunu ça¤›rarak istedi¤iniz bir h›zland›r›c›y› istemci tara-
      f›na yüklenmek üzere gönderebilirsiniz.

      <div>
          <input id=”Button1” type=”button”
          value=”IE 8 Hızlandırıcımızı Yükleyin”
          onclick=”window.external.AddService(‘hizlandirici.
      xml’);” />
      </div>

      AddService metodu parametre olarak h›zland›r›c› tan›mlar›n›z›n bulun-
      du¤u XML dosyas›n›n yerini al›yor ve istemci taraf›ndaki yükleme ifl-
      lemlerine dair onay mekanizmas›n›n çal›flmas›n› sa¤l›yor. Art›k bu nok-
      tadan sonra tüm kontrol kullan›c›da, h›zland›r›c›n›z ziyaretçiye ulaflt›.

   Görsel Arama Nas›l Haz›rlan›r?
      Görsel Arama sistemleri haz›rlamadan önce hali haz›rda bir Arama
      Sa¤lay›c› dosyan›z›n bulunmas› gerekiyor. Görsel Arama sistemi es-
      ki Arama Sa¤lay›c› sisteminin üzerine infla edilmifl durumda oldu¤u
      için önce bir Arama Sa¤lay›c› nas›l oluflturulaca¤›n› inceleyelim.

      <?xml version=”1.0” encoding=”UTF-8”?>
      <OpenSearchDescription xmlns=”http://a9.com/-/spec/
      opensearch/1.1/”>
WEB’DE YEN‹ TRENDLER               33

  <ShortName>Deneme Arama Motoru</ShortName>
  <Url type=”text/html” template=”http://daron.yon-
dem.com/?aranan=
    {searchTerms}”/>
  <Image height=”16” width=”16” type=”image/icon”>
    http://daron.yondem.com/favicon.ico</Image>
</OpenSearchDescription>

OpenSearchDescription standard› çerçevesinde haz›rlanan arama
sa¤lay›c›lar çok say›da taray›c› taraf›ndan destekleniyor. Yukar›daki
flekilde tan›mlanan bir arama sa¤lay›c› taray›c›n›n arama kutucu¤un-
da yaz›lan herhangi bir verinin nereye nas›l gönderilece¤ini tan›ml›-
yor. ‹lk aflamada XML dosyas› içerisinde arama sa¤lay›c›n›n ad›
ShortName tag’lar› aras›nda yaz›ld›ktan sonra arama iflleminin nere-
ye yönlendirilece¤i ise bir Url tag› içerisinde belirtiliyor.

  <Url type=”text/html” template=”http://daron.yondem.
com/?aranan=
    {searchTerms}”/>

Yukar›da gördü¤ünüz kod içerisinde yönlendirilen yerdeki veri kayna-
¤› tipinin text/html oldu¤u belirtildikten sonra yönlendirilecek olan ad-
res de template de¤erine aktar›l›yor. Örne¤imizdeki adres flablonunu
incelerseniz en sonundaki {searchTerms} k›sm› dikkatinizi çekecek-
tir. ‹flte tam da bu noktada, adres içerisinde {searchTerms}’in yaz›l›
oldu¤u yere kullan›c›n›n taray›c› içerisinde yazm›fl oldu¤u aranacak ke-
limeler yerlefltirilecek ve söz konusu adres bu flekilde çal›flt›r›lacakt›r.
Örne¤in kullan›c› e¤er taray›c›s›nda aranacak kelime olarak “asp.net”
yazm›fl ise çal›flt›r›lacak olan sayfa http://daron.yondem.com/?ara-
nan=asp.net fleklinde olacakt›r. Böylece sunucu taraf›nda uygulama
ile adresten al›nabilecek bu parametre kullan›larak gerekli arama ifl-
lemleri yap›labilir ve sonuç do¤rudan kullan›c›ya gösterilebilir.
Son olarak arama sa¤lay›c›s›na ait taray›c› içerisinde gösterilecek bir
ikon dosyas› da afla¤›daki flekilde openSearchDescription dosyas›na
eklenir.

<Image height=”16” width=”16” type=”image/icon”>
    http://daron.yondem.com/favicon.ico</Image>
34 INTERNET EXPLORER 8

      Tüm bu ifllemleri yaparak kendi siteniz için bir arama sa¤lay›c› gelifl-
      tirdikten sonra tabi ki bu sa¤lay›c›n›n kullan›c›lar taraf›ndan buluna-
      bilmesi ve yüklenebilmesi için gerekli de¤ifliklikleri de yapmam›z ge-
      rekiyor. Örne¤in hemen bir yükleme dü¤mesi haz›rlayarak sitemize
      yerlefltirmek istersek arama sa¤lay›c›s›na ait yükleme ekranlar›n› aça-
      bilmek için afla¤›daki JScript komutunu kullanabiliriz.

      <a href=”#” onclick=”window.external.AddSearchProvider
      (‘http://
          daron.yondem.com/aramasaglayici.xml’)”> Arama Sağ-
      layıcımızı Yükleyin</a>

      Haz›rlad›¤›m›z arama sa¤lay›c›ya ait XML kodlar›n› sunucuya ara-
      masaglayici.xml dosyas› olarak yükledikten sonra ana sayfam›za yu-
      kar›daki gibi bir link ekleyerek AddSearchProvider metodunu ça-
      ¤›rabiliriz. Söz konusu metod parametre olarak arama sa¤lay›c›ya ait
      ayarlar›n bulundu¤u XML dosyas›n›n yolunu al›yor ve sonras›nda
      yükleme ifllemlerini istemci taraf›nda bafllat›yor.
      Bir di¤er alternatif ise taray›c›lar›n kendi kendilerin sayfa içerisinde-
      ki arama sa¤lay›c›lar› bulabilmesi için yap›labilecek linkleme ayar›-
      d›r. Böylece kullan›c›lar›n sayfadaki yükleme dü¤melerini bulamasa
      veya sayfada bir yükleme dü¤mesi olmasa da taray›c› söz konusu say-
      fada bir arama sa¤lay›c› oldu¤unu anlayarak kendi arayüzünde gerek-
      li mesajlar› kullan›c›ya gösterecektir.

      <link title=”Daron Yöndem Arama” rel=”search”
      type=”application/
      opensearchdescription+xml” href=”http://daron.yon-
      de.com/ aramasaglayici.xml” />

      Yukar›daki linki HTML sayfas›n›n Header bölümüne yerlefltirdi¤i-
      nizde art›k taray›c›lar›n sizin sitenizde arama sa¤lay›c›dan haberdar
      olacaklar. Link kodu içerisinde title de¤eri arama sa¤lay›c›n›z›n is-
      mini tan›mlarken rel ve type de¤erleri tam olarak örnekteki flekli ile
      de¤ifltirilmeden yaz›lmal›d›r. Taray›c› ancak bu flekilde söz konusu
      linkin bir arama sa¤lay›c›ya ait oldu¤unu anlayabilir. Son olarak href
      özelli¤ine ise arama sa¤lay›c›ya ait XML dosyas›n›n tam yolu verilir.
WEB’DE YEN‹ TRENDLER               35

Görsel Arama ve
Arama Sa¤lay›c›lar›n ‹flbirli¤i
Art›k elimizde haz›r bir arama sa¤lay›c› bulundu¤una göre bu arama
sa¤lay›c›ya görsel arama ifllevselli¤i eklemenin zaman› geldi. Afla¤›-
da nedirtv.com sitesinde kullan›lan ve görsel arama ifllevselli¤i de su-
nan arama sa¤lay›c›n›n XML OpenSearchDescription dosyas›n› in-
celeyebilirsiniz.

<?xml version=”1.0” encoding=”UTF-8”?>
<OpenSearchDescription xmlns=”http://a9.com/-
/spec/opensearch/1.1/”>
  <ShortName>NedirTV?com</ShortName>
  <Url type=”text/html” template=”http://www.ne-
dirtv.com/Arama.aspx?A={searchTerms}”/>
  <Url type=”application/x-suggestions+xml” template=
”http://www.nedirtv.com/RssVideo.ashx?SS={search-
Terms}”/>
  <Image height=”16” width=”16” type=”image/
icon”>http://www.nedirtv.com/favicon.ico</Image>
</OpenSearchDescription>

Bir önceki bölümde haz›rlad›¤›m›z arama sa¤lay›c›lar ile yukar›daki
kod aras›nda fark› incelerseniz asl›nda sadece yeni bir Url tag›n›n aç›l-
d›¤›n› ve bu sefer farkl› olarak type özelli¤in text/html de¤il de app-
lication/x-suggestions+xml oldu¤unu görebilirsiniz. Söz konusu ta-
n›mlama ile art›k arama sa¤lay›c›m›z kendi içerisinde bir de görsel
arama veri kayna¤› tan›ml›yor. Böylece adresi verilmifl olan veri kay-
na¤›ndan gerekli sonuçlar taray›c› taraf›ndan otomatik olarak çekile-
rek kullan›c›ya gösterilebilecek. Tüm bu ifllevsellik içerisinde bizim
tek yapmam›z gereken ek olarak gerekli veri kayna¤›n› do¤ru format-
ta sa¤layacak olan sunucu tarafl› mekanizmay› haz›rlamak.

  <Url type=”application/x-suggestions+xml”
template=”http://www.nedirtv.com/RssVideo.ashx?SS={se-
archTerms}”/>

Kodumuzun görsel arama ile ilgili k›sm›n› incelersek Url tag’›n›n ti-
pinde veri kayna¤› olarak XML format›n›n belirtildi¤ini görebilirsi-
niz. Veri kayna¤› adresi tan›mlan›rken de yine {searchTerms} para-
36 INTERNET EXPLORER 8

      metresi ile kullan›c›n›n yazd›¤› arama hedef adrese eklenerek sunucu-
      ya gönderilebilecek. Böylece sunucu taraf›ndan bu parametre al›nabi-
      lir ve uygun XML veri kayna¤› oluflturulabilir.

        <Url type=”application/x-suggestions+json” template=”
      http://www.nedirtv.com/RssVideo.ashx?SS={searchTerms}

      E¤er isterseniz veri kayna¤› olarak JSON format›n› da kullanabilirsi-
      niz. JSON format›nda maalesef ki Görsel Arama sistemindeki arama
      sonuçlar›nda resim gösterimi gibi özellikler kullan›lam›yor. O nedenle
      ço¤unlukla Görsel Arama altyap›lar›nda XML format› tercih ediliyor.
      Sunucu Taraf›nda Neler Yapmal›?
      Görsel arama sistemi ile ilgili yap›lmas› gereken çal›flman›n büyük k›s-
      m› sunucu taraf›nda yap›l›yor. Bunun nedeni asl›nda çok basit. Open-
      SearchDescription dosyam›zda tan›mlam›fl oldu¤umuz veri kayna¤›n›
      taray›c›n›n anlayabilece¤im bir formatta sa¤lamam›z flart. Aksi halde
      kullan›c›ya Görsel Arama sonuçlar› göstermemiz mümkün olmayacak-
      t›r. Peki Internet Explorer 8 bizden nas›l bir formatta XML istiyor?

      <SearchSuggestion>
          <Query>aranan</Query>
          <Section title=”İlk Bölüm”>
               <Item>
                   <Text>Sonuç 1</Text>
                   <Description>Açıklama</Description>
                   <Url>http://daron.yondem.com?id=3</Url>
               </Item>
               <Separator title=”Diğerleri”/>
               <Item>
                   <Text>Sonuç 2</Text>
                   <Description>Açıklama</Description>
                   <Url>http://daron.yondem.com?id=6</Url>
               </Item>
          </Section>
      </SearchSuggestion>

      Yukar›daki kod içerisinde basit bir arama sonucunda Internet Explo-
      rer’a döndürmemiz gereken XML veri kayna¤›n›n yap›s›n› inceleyebi-
      lirsiniz. Sat›r sat›r XML kodlar›n›n incelemeden önce bu veri kayna-
WEB’DE YEN‹ TRENDLER               37

¤›n›n sadece iki sonuç döndüren örnek bir veri kayna¤› oldu¤unu be-
lirtmekte fayda var. Normal flartlarda on adet sonuç gönderebilirsiniz.
<Query>aranan</Query>

Görsel arama için istemciye gönderdi¤imiz XML kodunun ilk sat›r›n-
da Query tag› bulunuyor. Bu tag içerisinde sunucu taraf›na aranmak
üzerine yollanan kelimeleri yazd›r›yoruz. Böylece Internet Explorer
kendisine gelen veri ile talep etti¤i arama verisinin ayn› olup olmad›-
¤›n› kontrol edebiliyor.
      <Section title=”İlk Bölüm”>

Section tag’lar› arama sonuçlar› gösterilirken sonuçlar› gruplamak
amac›yla kullan›labilir. Her section’un (bölüm) bir de title bilgisi,
yani bafll›¤› bulunuyor. Örnek bir kullan›m olarak herhangi bir arama-
n›n sonucunda farkl› kategorilerinde ürünlerinin getirildi¤i bir e-tica-
ret sitesi düflünülebilir.

   <Item>
       <Text>Sonuç 1</Text>
       <Description>Açıklama</Description>
       <Url>http://daron.yondem.com?id=3</Url>
   </Item>

‹flte geldik en can al›c› noktaya. Görsel arama ifllemi esnas›nda göste-
rilecek olan her bir sonucu tan›mlamak için Item tag’lar› ile gerekli
verileri XML içerisinde yazd›rmam›z flart. Her bir Item tag›n›n Text,
Description ve Url elementlerini içermesi gerekiyor. Text ve
Description sonuç listesinde gösterilirken Url ise söz konusu sonu-
ca t›kland›¤›nda kullan›c›n›n yönlendirilece¤i adresi tan›ml›yor. E¤er
arama sonuçlar›nda her bir ö¤e ile ilgili bir de ufak resim göstermek is-
tiyorsan›z Item tag›lar› aras›na Image elementi de yerlefltirmelisiniz.

   <Item>
       <Text>Sonuç 1</Text>
       <Description>Açıklama</Description>
       <Url>http://daron.yondem.com?id=3</Url>
            <Image Source=http://daron.yondem.com/
resim.jpg
     alt=”Bu bir resimdir” width=”70”></Image>
          </Item>
38 INTERNET EXPLORER 8

      Yukar›daki kod örne¤inde Item elementi içerisinde bir de Image ele-
      menti bulunuyor. Image elementi do¤rudan Source olarak bir resim
      dosyas›n›n tam yolunu içeriyor. Böylece Internet Explorer e¤er söz
      konusu resme eriflebilirse do¤rudan görsel arama sonuçlar›n› gösterir-
      ken resme de sol tarafta yer verecektir.




      Görsel Arama sonuçlar› ve resimli gösterim flekli.

      E¤er section taglar›, yani bölümler içerisinde ayr›ca sonuçlar› bir-
      birinden ay›rmak isterseniz. Separator elementini kullanabilirsiniz.
      Section elementindeki gibi Separator’lara da title (bafll›k) de¤e-
      ri verilebiliyor.

          <Separator title=”Diğerleri”/>

      Bahsetti¤imiz standartlara uygun flekilde gerekli veri taban› sorgular›-
      n› yapan ve uyumlu XML ç›kt›s› veren sunucu tarafl› kodlar› yazd›k-
      tan sonra arama sa¤lay›c› dosyan›z› eskisi gibi ayn› JScript kodlar› ile
      sitenizin ziyaretçilerine sunabilirsiniz. E¤er hedef taray›c›lar›n görsel
      arama sistemini destekliyorsa otomatik olarak sonuçlar gösterilecek-
      tir, aksi halde arama sa¤lay›c› sistemi eski taray›c›larda eski hali ile
      çal›flmaya devam eder.
WEB’DE YEN‹ TRENDLER             39

Sunucuda Gerçek Zamanl›
XML Üretimi
Görsel arama sistemlerini kullanabilmek için en önemli nokta sunucu
taraf›nda uygun XML ç›kt›s›n› oluflturabilmek. Bu çerçevede kitab›-
m›z›n bu bölümünde sunucu taraf›nda veri kayna¤› olarak basit bir
Array (Dizi) kullanarak gerekli XML kodunu nas›l yaratabilece¤imi-
zi inceleyece¤iz.

C# ve ASP.NET ile XML Üretmek
ASP.NET taraf›nda özellikle .NET Framework 3.5 ile beraber
LINQ’in de yard›m›m›za yetiflmesi XML üretimini ciddi anlamda ko-
laylaflt›r›yor. Biz de kodlar›m›zda LINQ’ten faydalanarak h›zl› bir fle-
kilde elimizde bulunan Generic bir List içerisinde veriyi XML’e dö-
nüfltürece¤iz.
XML kodunu istemciye do¤rudan gönderece¤imiz için HTML yara-
tan bir Web Form yerine bize daha esnek bir yap› sunan Generic
Handler’lar› kullanmam›zda fayda var. ‹lk olarak örne¤imizde kulla-
naca¤›m›z veri kayna¤›n› yaratal›m.

     public class Sonuc
     {
         public string Text { get; set; }
         public string Description { get; set; }
         public string Url { get; set; }
         public string Photo { get; set; }
     }

Veri kayna¤›m›zda her bir sonucu temsil edecek olan s›n›f›m›z› yuka-
r›daki flekilde tan›mlad›ktan sonra Generic Handler çal›flt›r›ld›¤›nda
hem örnek amaçl› olarak bir veri yarataca¤›z hem de o veri üzerinden
sonras›nda da XML üretece¤iz.

    System.Collections.Generic.List<Sonuc> Veri =
new System.Collections.Generic.List<Sonuc>();
            for (int i = 0; i < 10; i++)
                     {
                       Veri.Add(new Sonuc()
                {
40 INTERNET EXPLORER 8

                                  Text=”Sonuç” + i.ToString(),
                                  Description=”Açıklama” +
      i.ToString(),
                                  Photo=”Foto” + i.ToString() +
      “.jpg”,
                                  Url=”adres.aspx?ID=” + i.ToSt-
      ring()
                           });
                                   };


      Veri kayna¤›m›z› yaratma ifllemini tamamlad›¤›m›zda göre art›k eli-
      mizde yer alan Veri ad›ndaki Generic List üzerinden yola ç›karak uy-
      gun XML kodunu yaratabiliriz. Bunun için olarak sayfan›n ç›kt›s›na
      ait Content Type’› Text/Xml olarak de¤ifltirelim.

          context.Response.ContentType = “text/xml”;

      Bir sonraki ad›mda XML doküman›m›z›n ana elementlerini yaratal›m
      ve içerisine veri, yani Item nesneleri eklenebilecek hale getirelim.

               XDocument XMLFeed = new XDocument(new
      XDeclaration(“1.0”, “utf-8”, “yes”));
               XMLFeed.Add(new XElement(“SearchSuggestion”,
                    new XElement(“Query”, context.Request.
      QueryString[“aranacak”].ToString()),
                    new XElement(“Section”,
                        new XElement(“Separator”,
                             new XAttribute(“title”, “Bölüm
      1”)))));

      fiimdi s›ra geldi elimizdeki Generic List içerisinde gezerek yukar›da
      yaratm›fl oldu¤umuz doküman içerisinde SearchSuggestion ele-
      menti içindeki Section elementinin içine uygun Item elementlerini
      yerlefltirmeye.

               for (int i = 0; i < Veri.Count; i++)
                         {
                   XMLFeed.Element(“SearchSuggestion”).
      Element(“Section”).Add(
                    new XElement(“Item”,
WEB’DE YEN‹ TRENDLER             41

                    new   XElement(“Text”, Veri[i].Text),
                    new   XElement(“Image”,
                    new   XAttribute(“source”, Veri[i].Url),
                    new   XAttribute(“alt”, “Bir resim”),
                    new   XAttribute(“width”, “75”),
                    new   XAttribute(“height”, “50”)),
                    new   XElement(“Description”, Veri[i].
Description),
                   new XElement(“Url”, Veri[i].Url)));
                       }

Gördü¤ünüz gibi yaratt›¤›m›z yeni XElement ve içerisinde XAttri-
bute nesnelerine veri kayna¤› olarak For döngüsü içerisinde sürekli
Veri ad›ndaki Generic List’i kullan›yoruz. Böylece istedi¤imiz XML
DOM’u yaratabiliyoruz. Son olarak tüm bu XML’i istemciye gönde-
rilmek üzere sayfaya yazd›rmam›z gerekiyor.

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

Art›k Generic Handler dosyam›z kendisine gelecek olan aranacak
querystring parametresine göre farkl› XML’ler döndürmek için haz›r
durumda. Tek yapman›z gereken örne¤imizdeki Veri ad›ndaki List’i
farkl› veri kaynaklar› ile de¤ifltirmek.

VB ve ASP.NET ile XML Üretmek
Bir önceki bölümde C# ile ASP.NET taraf›nda nas›l XML ç›kt›s› üre-
tebilece¤imizi incelemifltik. C# ile VB aras›nda çok büyük farklar bu-
lunmasa da XML konusunda VB 9.0 ile beraber gelen XML Literals
yap›s›n› kullan›rsak XML yaratma ifllemi çok daha farkl› bir çehreye
bürünebiliyor. O nedenle gelin C# ile yapt›¤›m›z örne¤i bir de VB ile
yaparak nas›l ilerleyebilece¤imizi inceleyelim.

     Public Class Sonuc

           Private PText As String
           Public Property Text() As String
               Get
                    Return PText
               End Get
               Set(ByVal value As String)
                    PText = value
42 INTERNET EXPLORER 8

                     End Set
                 End Property

                 Private PDescription As String
                 Public Property Description() As String
                     Get
                          Return PDescription
                     End Get
                     Set(ByVal value As String)
                          PDescription = value
                     End Set
                 End Property

                 Private PUrl As String
                 Public Property Url() As String
                     Get
                          Return PUrl
                     End Get
                     Set(ByVal value As String)
                          PUrl = value
                     End Set
                 End Property

                 Private PPhoto As String
                 Public Property Photo() As String
                     Get
                          Return PPHoto
                     End Get
                     Set(ByVal value As String)
                          PPHoto = value
                     End Set
                 End Property

           End Class

      ‹lk aflamada yukar›daki flekli ile tüm veri kayna¤›m›z› üretirken kulla-
      naca¤›m›z Sonuc ad›ndaki s›n›f›m›z› tan›ml›yoruz.
      Bir sonraki ad›mda ise deneme amaçl› olarak kullanaca¤›m›z veri
      kayna¤›m›z› üretece¤iz.
WEB’DE YEN‹ TRENDLER              43

    Dim Veri As New System.Collections.Generic.List
(Of Sonuc)
        For index As Integer = 1 To 10
             Veri.Add(New Sonuc With {.Text = “Sonuç”
& index, _
                                      .Description =
“Açıklama” & index, _
                                      .Photo = “Photo”
& index & “.jpg”, _
                                      .Url = “adres.
aspx?ID=” & index})
        Next

Yukar›daki kodumuz ile deneme amaçl› olarak kullanaca¤›m›z veri
kayna¤›m›z› da yaratt›¤›m›za göre art›k s›ra geldi bu veri kayna¤› üze-
rinden gerekli XML’i yaratmaya. ‹lk olarak sayfan›n Content
Type’›n› do¤ru flekilde ayarlayal›m.

    Context.Response.ContentType = “text/xml”

Son olarak XML yaratma ifllemlerine bafllayabiliriz. Daha önce de bah-
setti¤im üzere VB art›k dil ile entegre XML yaz›m›n› destekliyor. O ne-
denle C#’da oldu¤u gibi XElement vs nesneler ile u¤raflmaya gerek
kalmadan do¤rudan istedi¤imiz XML format›n› dile dahil edebiliyoruz.

Dim XMLFeed = <?xml version=”1.0” encoding=”utf-8”?>
       <SearchSuggestion xmlns=”http://opensearch.org/
searchsuggest2” version=”1”>
         <Query><%= Context.Request.QueryString(“ara-
nacak”) %></Query>
         <Section title=”Bölüm 1”>
           <%= From inc In Veri Select <Item>
                    <Text><%= inc.Text %></Text>
                    <Description><%= inc.Description
%></Description>
                    <Url><%= inc.Url %></Url>
                    <Image source=<%= inc.Photo %>
alt=”Bilgi” width=”75” height=”75”/>

</Item> %>
44 INTERNET EXPLORER 8

                              </Section>
                          </SearchSuggestion>

      Kod içerisinde de görebilece¤iniz üzere do¤rudan XML kodlar› bir de-
      ¤iflkene eflitlenmifl durumda. Bu kodlar .NET içerisinde VB derleyicisi
      taraf›ndan derleme zaman›nda C#’da oldu¤u gibi XElement nesneleri-
      ne çevrilecektir. O nedenle herhangi bir performans farkl›l›¤› olmaya-
      cakt›r. Biz XML kodumuzu de¤iflkenimize eflitlerken bir de LINQ sor-
      gusu kulland›k. Böylece Veri ad›ndaki Generic List içerisinde kaç ta-
      ne kay›t varsa uygun flekilde Item XML nesnelerini de yaratm›fl olduk.
      Art›k XML kodumuzu sayfaya yazd›rabiliriz.

          Context.Response.Write(XMLFeed.ToString())

      PHP ile XML Üretmek
      Windows Server 2008 ve IIS 7 ile beraber gelen FastCGI ile art›k
      Windows sunucu üzerinde PHP kullan›m› hatta ASP.NET ile entegre
      ortak Forms Authentication kullan›mlar› ve Session paylafl›mlar› gi-
      bi özelliklerin hayat›m›za girdi¤i bu günlerde sunucu taraf›nda PHP
      kullanman›z halinde de tabi ki Görsel Arama için uygun XML kodla-
      r›n› üretebilirsiniz. Bunun için örne¤imizde herkesin sunucusunda
      PHP DOM’un kurulu olup olmad›¤›ndan emin olmad›¤›m›z için PHP
      DOM kullanmak yerine standart String ifllemleri ile devam edece¤iz.

          header(‘Content-type: text/xml’);

      ‹lk olarak yukar›daki kodumuz ile sayfam›z›n Content Type ayar›n›
      yapal›m. Böylece taray›c› kendisine bir XML gönderildi¤ini rahatl›k-
      la anlayabilecektir.

        $items = array();
        $items[] = array(‘text’ => ‘Sonuç 1’,
                                            ‘image’ => array
      (‘source’ => ‘http://x.com/resim1.jpg’,
                           ‘alt’ => ‘bir resim’,
                           ‘width’ => 75,
                           ‘height’ => 60),
                                            ‘description’ =>
      ‘Description 1!’,
                                            ‘url’ =>
      ‘http://daron.yondem.com’);
WEB’DE YEN‹ TRENDLER             45

  $items[] = array(‘text’ => ‘Sonuç 2’,
                                      ‘image’ => array
(‘source’ => ‘http://x.com/resim2.jpg’,
                     ‘alt’ => ‘baska resim’,
                     ‘width’ => 75,
                     ‘height’ => 60),
                                      ‘description’ =>
‘Description 2!’,
                                      ‘url’ =>
‘http://daron.yondem.com’);
  $items[] = array(‘text’ => ‘Sonuç 3’,
                                      ‘image’ => array
(‘source’ => ‘http://x.com/resim3.jpg’,
                     ‘alt’ => ‘baska bir resim daha’,
                     ‘width’ => 75,
                     ‘height’ => 60),
                                      ‘description’ =>
‘Description 3!’,
                                      ‘url’ =>
‘http://daron.yondem.com’);

Sonras›nda örne¤imizde kullanmak üzere yukar›daki gibi bir Array
tan›mlayal›m. Böylece bir sonraki ad›mda bu dizi içerisindeki verile-
ri kullanarak uygun XML ç›kt›s›n› yarataca¤›z.

$output   = “<SearchSuggestion>n”;
$output   .= “<Section>n”;
$output   .= “<Query>asp</Query>n”;
$output   .= “t<Separator title=”Bölüm 1” />n”;

foreach( $items AS $item ) {

    $output .= “tt<Item>n”;
    $output .= “ttt<Text>”. $item[‘text’] .”</Text>n”;
    $output .= “ttt<Image source=””. $item[‘image’]
[‘source’] .””n”;
    $output .= “ttt alt = ””. $item[‘image’][‘alt’]
.””n”;
    $output .= “ttt width = ””. $item[‘image’]
[‘width’] .””n”;
46 INTERNET EXPLORER 8

          $output .= “ttt height = ””. $item[‘image’]
      [‘height’] .””n”;
          $output .= “ttt /> n”;
          $output .= “ttt<Description>”. $item[“description”]
      .”</Description> n”;
          $output .= “ttt<Url>”. $item[“url”] .”</Url>n”;
          $output .= “tt</Item>n”;

      }


      $output .= “</Section>n”;
      $output .= “</SearchSuggestion>n”;

      echo $output;


      Yukar›daki kod içerisinde de görebilece¤iniz üzere standart string
      birlefltirme ifllemleri ile XML kodumuzu yarat›yoruz. XML’imizin
      bafllang›ç ve sonunu belirledikten sonra orta k›s›mda da bir For dön-
      güsü ile elimizdeki diziyi gezerek uygun Item XML elementlerini ya-
      rat›yoruz. Bu flekilde yarat›lan bir XML kodu da Görsel Arama alt-
      yap›lar› taraf›ndan rahatl›kla kullan›labilir.

      Görsel Aramalar için JSON Veri Kayna¤›
      Görsel aramalar için bu bölüme kadar veri kayna¤› olarak XML kul-
      land›k. Bunun nedeni bir alternatif olarak JSON format› gelse de
      JSON içerisinde hem Image nesneleri hem de Separator kullanam›-
      yor olmam›z. E¤er tüm bu dezavantajlar›na ra¤men JSON kullanma-
      y› düflünüyorsan›z oluflturman›z gereken JSON veri kayna¤›n›n bir ör-
      ne¤ini afla¤›da inceleyebilirsiniz.

      [“aranan”,
      [“sonuc1”, “sonuc2”, “sonuc3”],
      [“aciklama 1”, “aciklama 2”, “aciklama3”],
      [“http://daron.yondem.com/1”, “ http://daron.yondem.
      com/2”, “ http://daron.yondem.com/3”]]

      Gördü¤ünüz gibi JSON içerisinde toplam üç sonuç döndüren kodu-
      muzun bafl›nda yine Internet Explorer taraf›ndan parametre olarak
      gönderilen arama kelimeleri bulunuyor.
WEB’DE YEN‹ TRENDLER              47


Web Dilimleri Nas›l Haz›rlan›r
  Web dilimleri kullan›c›lar›n sitelerimizi takip edebilmeleri aç›s›ndan
  ilginç ifllevsellikler sa¤layabiliyor ve bu ifllemi çok kolaylaflt›rabili-
  yorlar. Bu çerçevede web dilimlerinin oluflturulmas› ile ilgili teknik
  aç›dan birkaç farkl› yol var. Bu bölümümüzde her farkl› yolu avantaj
  ve dezavantajlar›n› da de¤erlendirerek inceleyece¤iz.

   <div class=”hslice” id=”Urun1”>
    <h1 class=”entry-title”>
    Bu bir ürün!</h1>
    <div class=”entry-content”>
      <p>
      Ürün bilgisi burada.</p>
    </div>
  </div>

  Yukar›da gördü¤ünüz basit HTML kodu herhangi bir web sayfas›nda
  Web Slice’› tan›ml›yor. Web sayfalar› içerisinde Web Slice’lar tama-
  men microformatlar ile tan›mlan›r, normal flartlarda teknik olarak bir
  ifllevselli¤i olsun veya olmas›n kodlar›n taray›c› için farkl› anlamlar›
  vard›r. Örne¤in class özelli¤ine hslice alan bir HTML elementi ta-
  ray›c› için bir Web Slice tan›m› anlam›na gelir. Normalde bizler
  class de¤erlerine CSS s›n›flar›n› atar›z ve bu özelli¤i tasar›msal
  ayarlamalar için kullan›r›z, oysa Internet Explorer 8 için hslice
  ad›ndaki class de¤erinin çok daha farkl› bir önemi var. Tabi di¤er
  yandan e¤er isterse web tasar›mc› veya programc› hslice ad›nda bir
  CSS s›n›f› yaratarak bu durumdan görsel anlamda da faydalanabilir.
  Internet Explorer 8 için bir Web Slice tan›mlarken ilk olarak web di-
  liminin ana gövdesine hslice ismi ile bir class de¤eri vermelisiniz.
  Sonras›nda bu Web Dilimine ait gövdeyi teflkil edecek olan HTML
  elementinin kesinlikle sayfa içerisinde tekil bir ID de¤eri olmal›d›r.
  Buradaki ID de¤erinin önemi çok büyük çünkü Internet Explorer say-
  fa içerisindeki Web Dilimleri’ni bu ID üzerinden tan›yacakt›r. ‹leriki
  ad›mlarda da bahsedece¤imiz üzere kullan›c›lar›n bu web dilimini ke-
  sip taray›c›lar›na ald›ktan sonra e¤er söz konusu web diliminin ID bil-
  gisini de¤ifltirirseniz daha önce kesip al›nan dilimler ile bu dilim ara-
  s›ndaki iliflki kopacakt›r ve kullan›c›lar art›k kesmifl olduklar› dilimle
  ilgili güncellemeleri takip edemeyecektir.
48 INTERNET EXPLORER 8

      Son olarak basit bir Web Slice içerisinde bir de entry-content ve
      entry-title bulunmas› gerekir. Yine farkl› HTML elementlerine
      verilen class de¤erleri ile tan›mlanana bu özelliklerden entry-title
      bir web diliminin kullan›c›lar›n taraf›ndan taray›c›ya entegre edilmesi
      halinde araç çubu¤unda gösterilecek bafll›¤›n› tan›mlarken entry-
      content ise web diliminin ana içeri¤i tafl›r. Her iki de¤eri de class
      olarak alm›fl olan HTML elementleri içerisinde farkl› HTML kodlar›
      yerlefltirilebilir.

      Çal›flma Yap›s›
      Internet Explorer açt›¤› her sayfada hslice ile iflaretlenmifl HTML
      elementlerini arar ve iç yap›s› uygun olanlar› otomatik olarak birer
      web dilimi olarak kullan›c›ya gösterir. Kullan›c› bu web dilimini ta-
      ray›c›s›na ekledikten sonra kullan›c› veya programc› taraf›ndan ta-
      n›mlanm›fl aral›klar ile Internet Explorer web dilimini güncelleye-
      cektir.
      Bir önceki bölümde kendi içerisinde entry-content içeren bir Web
      Dilimi örne¤i gördük. E¤er herhangi bir web dilimi kendi içeri¤ini
      do¤rudan HTML kodlar› olarak kendi ana elementi içerisinde entry-
      content içinde tan›mlarsa Internet Explorer söz konusu web dilimi-
      nin bulundu¤u sayfay› belirli aral›klarla istemciye indirir.
      Sonras›nda gerekli parsing ifllemlerini de yapan Internet Explorer
      web dilimini ID’si üzerinden HTML kodunda bulup içerisindeki
      entry-content’te de¤ifliklik var ise kullan›c›y› uyar›r. Bu yap›
      programlama aç›s›ndan en kolay haz›rlanabilen yap›d›r. Tek yapma-
      n›z gereken sayfan›zda dilimlenmesini istedi¤ini bölümleri tespit
      edip gerekli yerlere hslice, entry-content ve entry-title
      CSS s›n›flar›n› atamak.
      Di¤er yandan farkl› senaryolarda daha esnek yap›lar oluflturabilmek
      ad›na Web Dilimler’inin içeriklerinin farkl› kaynaklardan çekilebil-
      mesi de mümkün. Seçeneklerden ilki web diliminin içeri¤ini ayr› bir
      web sayfas›ndan almak.
      D›splay Source De¤iflikli¤i
      Yaratt›¤›n›z bir web diliminin taray›c›n›n üzerinde aç›lan k›sm›n› ha-
      rici olarak tan›mlamak isteyebilirsiniz. Böyle bir talep asl›nda çok ba-
      sit bir nedeni olabilir. Web diliminizin kesildi¤i yerdeki hali ile tara-
      y›c›da kesilmifl halinin farkl› tasar›mlar ile gözükmesini isteyebilirsi-
WEB’DE YEN‹ TRENDLER              49

niz. Bu gibi durumlarda herhangi bir web dilimi tan›mlarken web di-
limi kesildikten sonra taray›c›n›n hangi veri kayna¤›ndan içerik taki-
bi yapabilece¤ini belirleyebilirsiniz.

<div class=”hslice” id=”Urun1”>
    <h1 class=”entry-title”>
         Yeni Ürün</h1>
    <div class=”entry-content” href=”http://daron.
yondem.com/baska.aspx?ID=2”>
    </div>
</div>

Yukar›daki kod içerisinde her zamanki gibi yine entry-content class
de¤erine sahip bir elementimiz var fakat bu sefer söz konusu elementin
bir de href de¤eri bulunuyor. Bir DIV elementinin HREF özelli¤ine sa-
hip olmas› normal flartlarda hiçbir fley ifade etmez. Oysa Internet Exp-
lorer 8 için bu çok anlaml› bir iflaretleme. Entry-content’e verilen
href de¤erinde web diliminin içeri¤ini saklayan baflka bir sayfan›n ad-
resi yer al›yor. Bu web dilimi flu anda bulundu¤u sayfada farkl› flekil-
lerde gözükebilse de kullan›c› taraf›ndan taray›c›ya eklendi¤inde tara-
y›c› de¤ifliklikler için href de¤erinde verilmifl sayfay› kontrol edecek
ve söz konusu sayfadaki içeri¤i kullan›c›ya gösterecektir. Böylece ana
sayfada yer alan web dilimi ve görsellik bozulmadan taray›c›n›n araç
çubu¤unda gözüken web dilimi tasar›m› tamamen özellefltirilebilir.

Farkl› Web Dilimleri’ni
Birbirine Ba¤lamak
Baz› durumlarda farkl› web dilimleri için ortak bir kaynak kullanmak
veya sitenizin farkl› yerlerinden kesilebilir flekilde gözükse de asl›nda
ayn› web dilimine yönlendirme yapmak isteyebilirsiniz. Bu gibi du-
rumlarda yaratt›¤›n›z yeni bir web dilimine feedurl verebilirsiniz.

<div class=”hslice” id=”Urun1”>
    <div class=”entry-title”>
         Urun Adı
    </div>
    <a rel=”feedurl” href=”http://daron.yondem.com/
         baska.aspx#Urun2”></a>
</div>
50 INTERNET EXPLORER 8

      Yukar›daki kod ile tan›mlanan bir web dilimi asl›nda baska.aspx say-
      fas›ndaki ID’si Urun2 olan web dilimini hedef göstermektedir. Gör-
      dü¤ünüz a tag’› ile koyulan link içerisinde herhangi bir yaz› yaz›lma-
      d›¤› için kullan›c›lar taraf›ndan söz konusu link alg›lanmayacak fakat
      Internet Explorer linkin rel ve href özelliklerinden yola ç›karak ge-
      rekli ifllemleri yapabilecektir.

      Web Dilimi’ne Kaynak Olarak
      RSS Kullanmak
      Bir web diliminin veri kayna¤›n› özellefltirme yolunda gidilebilecek
      son nokta olarak RSS XML kaynaklar›ndan bahsedilebilir. Normal
      flartlarda bir RSS içerisinde birden çok Item tag’› bulunur. Oysa bir
      web dilimi için tek bir Item yeterlidir. Internet Explorer RSS kayna-
      ¤› içerisinden her zaman ilk Item’› alarak içerisindeki HTML’i araç
      çubu¤unda kesilmifl bir web dilimi içerisinde gösterecektir.

      <div class=”hslice” id=”Urun1”>
          <div class=”entry-title”>
               Ürün Adı
          </div>
          <a rel=”feedurl” href=”/rssfeed.xml”></a>
      </div>

      Yukar›daki gördü¤ünüz örnek Web Dilimi kendi kayna¤›n› rssfe-
      ed.xml ad›nda bir dosya olarak tan›ml›yor. Dikkat ederseniz bu web di-
      liminin herhangi bir entry-content’i yok. Rel özelli¤i feedurl
      olarak atanm›fl a tag›n›n href özelli¤ine hedef veri kayna¤›n›n adresi
      yerlefltirilmifl durumda. Gelin bir de h›zl›ca RSS’in yap›s›na göz atal›m.

      <?xml version=”1.0” encoding=”utf-8” ?>
      <rss version=”2.0”>
        <channel>
          <title>Web Dilimi RSS</title>
          <ttl>120</ttl>
          <item>
             <title>Ürün Adı</title>
             <description>HTML &lt;b&gt;kodları&lt;/b&gt;
      kullanılabilir</description>
          </item>
WEB’DE YEN‹ TRENDLER              51

        </channel>
      </rss>

      RSS kayna¤› içerisinde sadece bir ITEM bulunuyor. Söz konusu
      Item’›n title de¤eri Internet Explorer içerisinde araç çubu¤unda gö-
      zükecekken description de¤eri ise Web Dilimi’nin içeri¤ini belir-
      leyecektir. Son olarak ttl taglar› aras›ndaki de¤er ise bu web dilimi-
      nin ne kadar sürede bir istemci taraf›nda kontrol edilmesi gerekti¤ini
      belirler. TTL (Time To Live) de¤eri olarak verilebilecek en düflük de-
      ¤er 15’dir (dakika).

      <div class=”hslice” id=”Urun2”>
        <h1 class=”entry-title”>
          Urun Adi </h1>
        <div class=”entry-content”>
          <p>
             Ürün açıklaması.</p>
          <div class=”ttl” style=”display: none;”>
             15</div>
        </div>
      </div>

      E¤er web diliminiz harici RSS kayna¤› kullanmayacaksa TTL de¤eri-
      ni HTML kodu içerisinde de yukar›daki gibi tan›mlayabilirsiniz.
      Class özelli¤ine ttl de¤eri verilen DIV elementi içerisinde de¤erin
      ekranda gözükmemesi için elementin CSS stil özelliklerinden disp-
      lay özelli¤i none olarak de¤ifltirilebilir.


        WEB D‹L‹MLER‹NE D‹NAM‹K RSS
NOT
        Görsel Arama bölümümüzde inceledi¤imiz üzere hem ASP.NET hem de
        PHP ile dinamik XML üretimi kolayca yap›labiliyor. Bu çerçevede harici
        RSS kaynaklar›na ba¤l› web dilimlerinin RSS kaynaklar› da özünde birer
        XML dosyas› oldu¤u için bu kaynaklar da rahatl›kla sunucu taraf›nda di-
        namik olarak oluflturulabilir. Böylece kullan›c›lar çok daha bir flekilde
        web sitenizi takip edebilirler.
52 INTERNET EXPLORER 8
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı
Internet Explorer 8 Kitapçığı

Weitere ähnliche Inhalte

Ähnlich wie Internet Explorer 8 Kitapçığı

programlama_ve_veriyapilari
programlama_ve_veriyapilariprogramlama_ve_veriyapilari
programlama_ve_veriyapilariguest551d01
 
YTU Web Gunleri
YTU Web GunleriYTU Web Gunleri
YTU Web Gunleriersanbilik
 
Proje Yonetimi 2.0
Proje Yonetimi 2.0Proje Yonetimi 2.0
Proje Yonetimi 2.0Ozgur Alaz
 
+Asp.Net3.5 Icindeki
+Asp.Net3.5 Icindeki+Asp.Net3.5 Icindeki
+Asp.Net3.5 Icindekiguest859f05
 
Web İçin Teknoloji Geliştirmek
Web İçin Teknoloji GeliştirmekWeb İçin Teknoloji Geliştirmek
Web İçin Teknoloji GeliştirmekVolkan Özçelik
 
CETurk Cevik Günü
CETurk Cevik GünüCETurk Cevik Günü
CETurk Cevik Günüersanbilik
 
Balkanay Web Sunum
Balkanay Web SunumBalkanay Web Sunum
Balkanay Web Sunumeroglu
 
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone MeetupsE-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone MeetupsTevfik Mert Azizoglu
 
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİCRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİCRYPTTECH
 
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİCRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİTulay Candar
 
10 Adimda Flash Icindekiler
10 Adimda Flash Icindekiler10 Adimda Flash Icindekiler
10 Adimda Flash Icindekilerguest34b5d5
 
Java Web Uygulama Geliştirme
Java Web Uygulama GeliştirmeJava Web Uygulama Geliştirme
Java Web Uygulama Geliştirmeahmetdemirelli
 
Sharepoint 2010 Sandboxed Çözümler
Sharepoint 2010 Sandboxed ÇözümlerSharepoint 2010 Sandboxed Çözümler
Sharepoint 2010 Sandboxed ÇözümlerEvren Ayan
 
PHPkonf'15 - PHP Uygulamanızı Güçlendirin
PHPkonf'15 - PHP Uygulamanızı GüçlendirinPHPkonf'15 - PHP Uygulamanızı Güçlendirin
PHPkonf'15 - PHP Uygulamanızı GüçlendirinMuhittin Özer
 

Ähnlich wie Internet Explorer 8 Kitapçığı (20)

Daron Yöndem - ie8 Ebook Tr
Daron Yöndem - ie8 Ebook TrDaron Yöndem - ie8 Ebook Tr
Daron Yöndem - ie8 Ebook Tr
 
programlama_ve_veriyapilari
programlama_ve_veriyapilariprogramlama_ve_veriyapilari
programlama_ve_veriyapilari
 
YTU Web Gunleri
YTU Web GunleriYTU Web Gunleri
YTU Web Gunleri
 
PHP MVC
PHP MVCPHP MVC
PHP MVC
 
Aspnet M V C
Aspnet M V CAspnet M V C
Aspnet M V C
 
10 Adimda Web
10 Adimda Web10 Adimda Web
10 Adimda Web
 
Proje Yonetimi 2.0
Proje Yonetimi 2.0Proje Yonetimi 2.0
Proje Yonetimi 2.0
 
+Asp.Net3.5 Icindeki
+Asp.Net3.5 Icindeki+Asp.Net3.5 Icindeki
+Asp.Net3.5 Icindeki
 
Web İçin Teknoloji Geliştirmek
Web İçin Teknoloji GeliştirmekWeb İçin Teknoloji Geliştirmek
Web İçin Teknoloji Geliştirmek
 
CETurk Cevik Günü
CETurk Cevik GünüCETurk Cevik Günü
CETurk Cevik Günü
 
Balkanay Web Sunum
Balkanay Web SunumBalkanay Web Sunum
Balkanay Web Sunum
 
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone MeetupsE-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
E-Ticaret Siteleri İçin 20 SEO Maddesi - Digitalzone Meetups
 
Ortakafe
OrtakafeOrtakafe
Ortakafe
 
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİCRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
 
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİCRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
CRYPTTECH NG ÜRÜNLERİ ÖZELLİKLERİ
 
10 Adimda Flash Icindekiler
10 Adimda Flash Icindekiler10 Adimda Flash Icindekiler
10 Adimda Flash Icindekiler
 
Java Web Uygulama Geliştirme
Java Web Uygulama GeliştirmeJava Web Uygulama Geliştirme
Java Web Uygulama Geliştirme
 
Sharepoint 2010 Sandboxed Çözümler
Sharepoint 2010 Sandboxed ÇözümlerSharepoint 2010 Sandboxed Çözümler
Sharepoint 2010 Sandboxed Çözümler
 
PHPkonf'15 - PHP Uygulamanızı Güçlendirin
PHPkonf'15 - PHP Uygulamanızı GüçlendirinPHPkonf'15 - PHP Uygulamanızı Güçlendirin
PHPkonf'15 - PHP Uygulamanızı Güçlendirin
 
Netduino
NetduinoNetduino
Netduino
 

Internet Explorer 8 Kitapçığı

  • 1. Daron Yöndem IE8 Hýzlý Kolay ve Daha Güvenli! KODLAB www.kodlab.com
  • 2. INTERNET EXPLORER 8 daron yöndem Yay›n Da¤›t›m Yaz›l›m ve E¤itim Hizmetleri San. ve Tic. Ltd. fiti.
  • 3. KODLAB 3 INTERNET EXPLORER 8 DARON YÖNDEM ISBN 978-605-4205-03-5 Yay›nc›l›k Sertifika No: 13206 1. Bask›: Mart 2009 Yay›n Yönetmeni: Suat Özdemirci Kapak Tasar›m: Nebi Y›karo¤lu Sayfa Düzeni: Fikret Eldem Sat›fl: Hüseyin Üstünel Bask›: fiefik Matbaas›, Tel: (212) 671 59 81 Bu kitab›n bütün yay›n haklar› Kodlab Yay›n Da¤›t›m Yaz›l›m ve E¤i- tim Hizmetleri San. ve Tic. Ltd. fiti.’ne aittir. Yay›nevimizin yaz›l› izni olmaks›z›n k›smen veya tamamen al›nt› yap›lamaz, kopya çekilemez, ço¤alt›lamaz ve yay›nlanamaz. KODLAB Yay›n Da¤›t›m Yaz›l›m ve E¤itim Hizmetleri San ve Tic Ltd.fiti Yerebatan Caddesi Salk›m Sö¤üt Sokak Keskinler ‹fl Han› No: 8 D: 401 Sultanahmet / ‹STANBUL tel: (212) 514 55 66 fax: (212) 514 66 61 e-posta: bilgi@kodlab.com web: www.kodlab.com
  • 4. Daron Yöndem DEVELOAD Yazılım kurucusu Daron Yöndem Microsoft tara- fından 2008 ve 2009 yıllarında ASP.NET alanında Most Valuab- le Professional olarak seçilmifltir. Uluslararası bir konuflmacı ola- rak Daron Yöndem aynı zamanda Microsoft Regional Director ünvanına sahiptir. Türkiye’de iki kitabı olan Daron Yöndem, In- ternational .NET Assocation’da Türkiye Baflkanlı¤ı ve Ortado¤u Afrika bölgesi konuflmacı ofisi baflkanlı¤ı yapmaktadır. Kendisine http://daron.yondem.com/tr/ adresinden blogundan ulaflabilirsiniz.
  • 5. v Önsöz Bundan y›llar önce bana ç›k›p “Bir gün Internet Explorer kitab› yaza- caks›n” deseler san›r›m güzel bir espri olarak karfl›lard›m. Nas›l olur da bir taray›c›n›n kitab› yaz›l›r? Ne gerek var? De¤il mi? Oysa bugün kendimi bu kitap盤› yazarken buluyorsam asl›nda bu ba- z› fleylerin de¤iflti¤inin de kan›t›. Belki de taray›c›lar› art›k haklar›nda kitap yaz›labilecek ifllevsellikte yaz›l›mlar olarak görmenin zaman› geldi. Bugün Internet Explorer 8’e bakt›¤›mda hakk›nda yaz›l›mc›la- ra ve tasar›mc›lara anlat›labilecek o kadar güzel fleyler görüyorum ki bunlar›n hepsini derleyip sizlere minik bir kitapç›k olarak ulaflt›rmay› uygun gördüm. Kitap盤›n yaz›m süreci Internet Explorer 8’in Beta 1 günlerinde bafl- lad› ve yay›nlad›¤› flu anda Internet Explorer 8 RC1 sürümü ile karfl›- m›zda. Son sürüme do¤ru ilerleyen bu yolda kitab›n yay›n›ndan son- ra oluflabilecek tüm geliflmeleri http://daron.yondem.com/tr/ adresin- den, blogumdan takip edebilirsiniz. Ayr›ca bana her türlü yorumunu- zu daron@yondem.com adresinden ulaflt›rabilirsiniz. Son olarak, unutmadan gönülleri rahatlatmak aç›s›ndan kitap盤›m›- z›n tamamen ücretsiz oldu¤unu ve ayn› sizin elinize geçti¤i gibi sizin de ücretsiz olarak dostlar›n›za ister dijital ister bask› kopyas›n› al›p gönderebilece¤inizi belirtmek isterim. Görüflmek üzere... Daron Yöndem Microsoft Regional Director, MVP
  • 6. vi Internet Explorer; her zaman internet deneyimini en üst seviyede, h›z- l› ve güvenli yaflayabilmemiz için Microsoft olarak gelifltirmifl oldu¤u- muz ve günlük online dünyam›z›n önemli bir parças› olan taray›c›m›z. Web 2.0 ile birlikte de¤iflen kullan›c› beklentileri ve Web 3.0 için önemli bir altyap› oluflturacak Anlamsal Web için tasarlanm›fl olan en yeni sürümü olan Internet Explorer 8 hakk›nda yaz›lm›fl elinizde tuttu- ¤unuz bu kitap tüm teknik geliflmeleri detaylar›yla içermektedir. Mic- rosoft Regional Director ve MVP ünvanlar›na sahip olan Daron Yön- dem taraf›ndan yaz›lm›fl bu kitap Türkiye’de Internet Explorer 8’e özel yeni içeriklerin nas›l gelifltirilebilece¤ini ve yeni gelen teknik özellik- lerle yeni nesil web teknolojilerine nas›l adapte olunabilece¤ini detay- lar›yla anlatmaktad›r. Daron Yöndem’i bu baflar›l› çal›flmas›ndan dola- y› kutluyor, bu kitaptaki paylafl›mlar›n yeni fikirler ve projeler geliflti- recek birçok internet giriflimcisine öncülük edece¤ini düflünüyorum. Mehmet Nuri Çankaya Windows Pazarlama Grup Müdürü Microsoft Türkiye
  • 7. ‹Ç‹NDEK‹LER ÖNSÖZ 1 NEDEN INTERNET EXPLORER 8? 1 Performans 1 Ayn› Anda 2 Yerine 6 Ba¤lant› 2 Script Performanslar› 2 Kolay Kullan›m 2 Yeni Trendler: Accelerator, Web Slice, Search Suggestion 2 Güvenlik 3 Yaz›l›m Gelifltirici ve Tasar›mc› Dostu 3 Sistem Yöneticileri 4 2 INTERNET EXPLORER 8 DEVR‹M‹ 7 Ekstra Güvenlik 8 InPrivate Pencereleri 8 InPrivate Blocing 9 Phishing Korumas› ve SmartScreen 9 Kolay Kullan›m 11 ActiveX Yüklemeleri 11 Sekme Renklendirme 12 Ak›ll› Adres Çubu¤u 14 Yeni Trendler 15 H›zland›r›c› (Accelerator) 15 Görsel Arama (Visual Search) 18 Web Slice 20 3 WEB’DE YEN‹ TRENDLER 25 Bir H›zland›r›c› (Accelerator) Nas›l haz›rlan›r? 25 Son Ad›mlar... 30 Art›k Haz›r›z 32 Görsel Arama Nas›l Haz›rlan›r? 32 Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤i 35 Sunucu Taraf›nda Neler Yapmal›? 36 Sunucuda Gerçek Zamanl› XML Üretimi 39 C# ve ASP.NET ile XML Üretmek 39 VB ve ASP.NET ile XML Üretmek 41
  • 8. viii INTERNET EXPLORER 8 PHP ile XML Üretmek 44 Görsel Aramalar için JSON Veri Kayna¤› 46 Web Dilimleri Nas›l Haz›rlan›r 47 Çal›flma Yap›s› 48 Display Source De¤iflikli¤i 48 Farkl› Web Dilimleri’ni Birbirine Ba¤lamak 50 Web Dilimi’ne Kaynak Olarak RSS Kullanmak 50 4 YAZILIM GEL‹fiT‹R‹C‹LER ‹Ç‹N INTERNET EXPLORER 8 53 JavaScript Yenilikleri 53 tostaticHTML Metodu 53 Dahili JSON S›n›flar›... 55 AJAX Navigasyon 57 Online ve Offline Çal›flma Yap›s› 58 Cross Domain Request Nesnesi 60 DOM Veri Ambar› 64 Session Storage 64 Local Storage 65 Yaz›l›mc› Araçlar› 65 CSS ve HTML DOM Gerçek Zamanl› Düzenleme 65 JavaScript Debuging 67 Profiler ile Optimizasyon 68 Image Optimizasyonu 69 Pratik Araçlar 70 Önce Güvenlik 71 Data Execution Prevention 71 Kullan›c›ya Özel ActiveX 72 Siteye Özel ActiveX 73 XSS Sald›r›lar› 74 MIME TYPE Kararlar› 75 O Uygulamay› Sitemde Çal›flt›rma! 75 DOM Elementlerini Sorgulay›n 75 5 TASARIMCILAR ‹Ç‹N INTERNET EXPLORER 8 77 Compatibility View 77 Sitemizi Nas›l Ayarlar›z? 79 Özel CSS Filtreleri 80
  • 9. 1 Neden Internet Explorer 8? Performans 1 Ayn› Anda 2 Yerine 6 Ba¤lant› 2 Script Performanslar› 2 Kolay Kullan›m 2 Yeni Trendler: Accelerator, Web Slice, Search Suggestion 2 Güvenlik 3 Yaz›l›m Gelifltirici ve Tasar›mc› Dostu 3 Sistem Yöneticileri 4 Taray›c› savafllar› gün geçtikçe k›z›fl›yor. Global anlamda kullan›m oranlar›na bakt›¤›m›zda Internet Explorer bu savafl›n galibi gibi gö- zükse de bu durum savafl›n devam etmedi¤i anlam›na tabi ki gelmi- yor. Önümüzdeki dönemde Internet Explorer 8.0, bu savafl›n en a¤›r toplar›ndan biri diyebiliriz. Peki, neden Internet Explorer 8? Performans Bir internet taray›c›s›ndan tek bekledi¤imiz özellik performans olma- sa da, bu durum performans›n önemini yads›yaca¤›m›z anlam›na gel- miyor. Internet Explorer 8.0 ile beraber performans noktas›nda yap›- lan belki de en büyük yenilik art›k her bir taray›c› sekmesinin arka planda ayr› birer uygulama olarak çal›fl›yor olmas›. Böylece tek bir uygulama içerisinde thread say›s› azalt›labilirken sekmelerin birbirin- den ba¤›ms›z olarak hata almas› halinde birbirlerini kurtarabilmeleri gibi avantajlar da ortaya ç›k›yor. Tüm bunlar›n detaylar›ndan kitab›- m›z›n ileriki bölümlerinde kullan›c› tarafl› yenilikleri ele al›rken de- tayl› olarak bahsedece¤iz. THREAD NOT Herhangi bir uygulama içerisinde ayn› anda çal›flabilen ayr› kod bloklar›n› tan›mlar. Bir uygulama içerisinden birden çok Thread bulunup ayn› anda çal›flabildi¤i üzere ayn› uygulaman›n kaynaklar›n› Thread’ler beraber de kul- lanabilirler.
  • 10. 2 INTERNET EXPLORER 8 Ayn› anda 2 yerine 6 ba¤lant› Y›llar önce, 1999 senesinde, HTTP 1.1 standartlar›na göre taray›c›lar›n ayn› anda bir sunucuya sadece iki ba¤lant› kurabileceklerine dair bir kural belirlenmifl. Aradan geçen 9 y›lda art›k bu s›n›r›n günümüz genifl bant internet altyap›s›nda çok da anlaml› olmad›¤›n› söyleyebiliriz. IE 8.0 ile beraber bu s›n›r alt›ya yükseltiliyor. Ayn› anda 2 ba¤lant› yeri- ne 6 ba¤lant› teorik olarak yaklafl›k üç kat h›zlanma anlam›na geliyor. Bir yaz›l›mc› olarak sayfan›za ekledi¤iniz 6 harici JavaScript dosyas›- n›n, birbirlerini beklemek yerine hep beraber ayn› anda kullan›c› tara- f›na indirilmeye bafllanmas› ciddi performans art›fl› sa¤layacakt›r. Scr›pt Performanslar› AJAX’›n kullan›lmad›¤› web sitesi neredeyse kalmad›. ‹stemci taraf›n- da Script’ler kullanarak art›k ço¤u ifllemi sunucu yerine istemcide yap- may› tercih ediyoruz. Bu çerçevede Script’lerin çal›flma h›z› bir taray›- c›n›n genel performans› ile çok yak›ndan alakal›. Haberler güzel; IE 8.0 JavaScript SunSpider testinde IE 7.0’a k›yasla %400 daha h›zl›! Kendi testinizi yapmak isterseniz SunSpider testine afla¤›daki adres- ten ulaflabilirsiniz; http://www2.webkit.org/perf/sunspider-0.9/sunspider.html Kolay Kullan›m Çok h›zl› bir taray›c›ya sahip olal›m derken tabi ki ifllevselliklerden de vazgeçemeyiz. IE 8.0 ile beraber belki de Internet Explorer tarihinde- ki en güzel araçlar geliyor. Bu araçlar hem do¤rudan kullan›c›lar›n ha- yat›n› kolaylaflt›r›rken hem de yaz›l›m gelifltiricileri ve tasar›mc›lar› da mutlu ediyor. Yeni Trendler: Accelerator, Web Sl›ce, Search Suggest›on Internet Explorer’› kullan›m flekliniz de¤iflecek. Kitab›m›z›n ileriki bö- lümlerinde hem kullan›c› tarafl› hem de yaz›l›mc› ve tasar›mc›lar için detayl› olarak inceleyece¤imiz Accelerator, Web Slice ve Search Suggestion yap›lar› sizi Internet Explorer’a gönülden ba¤layacak. Ac- celerator’lar ile sürekli internette gezinirken tekrarlad›¤›n›z ifllemlerin fark›na varacak ve kendinize daha h›zl› bir çal›flma ortam› sa¤layacak- s›n›z. Web Slice’lar ise sizin yerinize interneti takip edecek. Search Suggestion sistemini gördü¤ünüzde arad›¤›n›z› bulman›n ne kadar ko-
  • 11. NEDEN INTERNET EXPLORER 8? 3 laylaflt›¤›n› göreceksiniz. Detaylar› girmek için sab›rs›zland›¤›n›z› bili- yorum, az kald›. Internet Explorer ilk aç›l›fl›nda yeni özelliklere h›zl›ca ulaflabilece¤iniz linkler karfl›n›za geliyor. Güvenlik InPrivate taray›c› özelli¤i ile tan›flt›¤›n›zda gönlünüz o kadar rahat edecek ki kulland›¤›n›z bilgisayarlarda baflka bir internet taray›c› ara- mayacaks›n›z. Sadece size özel bir Internet Explorer oturumu düflünün ki siz kapatt›¤›n›zda sizinle ilgili hiçbir iz kalm›yor. Ne taray›c› geç- mifli, ne cookie (çerezler) ne de yazd›¤›n›z bilgiler ve flifreleriniz. Ta- ray›c›y› kapatt›¤›n›z anda her fley uçup gidiyor. Gönül daha ne ister? Phishing korumas›, XSS engelleme sistemleri ve daha birçok yenilik var. Tüm bunlar›n detaylar›n› da ileriki bölümlerde inceleyece¤iz. Yaz›l›m Gelifltirici ve Tasar›mc› Dostu IE 8.0 ile beraber yaz›l›m gelifltiriciler ve tasar›mc›lar olarak da mut- lulu¤un yollar›nda ilerliyoruz. CSS 2.1 deste¤i, HTML 5, AJAX ve JavaScript yenilikleri, Font Embedding düzenlemeleri ile art›k IE 8.0’da çal›flacak web sitelerini tasarlamak ve programlamak çok daha zevkli olacakt›r. Kitab›m›z›n özellikle yaz›l›mc›lara ve tasar›mc›lara
  • 12. 4 INTERNET EXPLORER 8 hitap eden bölümlerde teknik detaylardan da bahsederek Internet Exp- lorer 8.0’›n bir yaz›l›mc›n›n veya tasar›mc›n›n hayat›n› da nas›l kolay- laflt›rd›¤›na göz ataca¤›z. Internet Explorer 8.0 ile beraber gelen Developet Tools paketi yaz›l›mc›lar ve tasar›mc›lar›n iflini kolaylaflt›rmay› hedefliyor. Sistem Yöneticileri Birçok yeni özellik geliyor, tüm bunlar›n tabi ki güvenlik taraf›nda da kontrol mekanizmalar› ile ele al›nabilmesi flart. Windows Server 2008 üzerinde Internet Explorer 8 ile beraber IE çerçeveli Group Policy sa- y›s› toplamda 1300’ü geçiyor. Tabi tüm bunlar› ancak istemcilere IE 8.0 yükledikten sonra kullanabilirsiniz, bunun için de toplu yükleme seçeneklerinin yan› s›ra kendinize özel IE8.0 yükleme paketleri olufl- turman›z için gerekli detaylar› da kitab›m›zda inceliyoruz. NOT GROUP POLICY Windows Server iflletim sistemlerinde Active Directory üzerinde bilgisa- yarlar›nda ve uzak kullan›c›nlar›n merkezi yönetim ve merkezi konfigü- rasyonunu sa¤lar.
  • 13. NEDEN INTERNET EXPLORER 8? 5 Internet Explorer 8.0 ile beraber gelen GPO’lardan baz›lar› ‹flte tüm bu yenilikler ve eflsiz kolayl›klar nedeniyle Internet Explorer 8.0! Daha fazlas› için sayfay› çevirin...
  • 15. 2 Internet Explorer 8 Devrimi Ekstra Güvenlik 8 Yeni Trendler 15 InPrivate Pencereleri 8 H›zland›r›c› (Accelerator) 15 InPrivate Blocing 9 Görsel Arama (Visual Search) 18 Phishing Korumas› ve Web Slice 20 SmartScreen 9 Kolay Kullan›m 11 ActiveX Yüklemeleri 11 Sekme Renklendirme 12 Ak›ll› Adres Çubu¤u 14 Internet Explorer’›n tarihine bakt›¤›m›zda “Devrim” kelimesi art›k özledi¤imiz sözcükler aras›nda yerini alm›flt›. Peki, nas›l oluyor da 8.0 sürümü ile bu özlem bitiyor? Kitab›m›z›n bu bölümünde Internet Exp- lorer 8’i bir son kullan›c›n›n gözünden inceleyerek ilk bak›flta göze çarpan yeniliklere de¤inece¤iz. Tüm bu yenilikler önümüzdeki dö- nemde günü birlik ifllerimizi kolaylaflt›racak ve hayat›m›z›n bir parça- s› haline gelecek yeni ifllevsellikleri kaps›yor. Ekstra Güvenlik Normal hayatta oldu¤u gibi dijital hayatta da her fleyin yan› s›ra en çok önem verdi¤imiz detaylardan biri de Güvenlik konusu. Özellikle internette gezerken bizim bilgimiz dahilinde olsun veya olmas›n sis- temimizin güvenli¤i ile ilgili riskler belki de can›m›z› en çok s›kan noktalar aras›nda. Bir internet taray›c›n›n tüm “hayat›m›z› kolaylaflt›ran” özelliklerini bir kenara koyup söz konusu taray›c›y› kullan›p kullanmayaca¤›m›z karar›n› belki de sadece sa¤lad›¤› güvenlik özellikleri çerçevesinde bile verebiliriz. Özellikle E-Ticaret’in gün geçtikçe hayat›m›z›n göbe- ¤ine oturdu¤unu düflünürsek IE 8.0 ile beraber gelen kullan›c› taraf›n- daki güvenlik yenilikleri çok önemli. InPr›vate Pencereleri Bir yaz›l›mc› olarak inceledi¤imiz yaz›l›mlara gelen yeni özellikleri- ni baz›lar›n› gördü¤ümde “Neden bu kimsenin akl›na bugüne kadar
  • 16. 8 INTERNET EXPLORER 8 gelmedi?” sorusunu kendime soruyorum. IE 8.0’›n InPrivate Brow- sing özelli¤i de bu özelliklerden biri. Bir Internet Explorer penceresi düflünün ki kapatt›¤›n›zda her fley es- kisi gibi olacak. Taray›c› geçmifli, cookie, Temp dosyalar› ve geri ka- lan her fley taray›c›y› kapatt›¤›n›z anda otomatik olarak yok olsa, si- linse ne kadar güzel olurdu de¤il mi? Tabi tüm bunlar›n varsay›lan ayarlarda olmamas› gerekiyor. Sadece istedi¤imizde böyle geçici bir pencere oluflturabilmeliyiz. InPrivate pencereleri açabilmek için taray›c› içerisindeki Safety menüsünden InPrivate Browsing komutunu verebilirsiniz. InPrivate taray›c› pencereleri bizim tüm bu isteklerimizi karfl›l›yor. InPrivate olarak açt›¤›m›z bir pencereyi kapatt›¤›m›zda o pencere ile ilgili her fley yok ediliyor. IE 8.0 içerisinde Safety InPrivate Brow- sing menüsünden açabildi¤imiz InPrivate pencerelerini adres çubu- ¤undaki InPrivate yaz›s›ndan da tan›yabiliyoruz. InPrivate pencerelerinde adres çubu¤unda InPrivate logosunu görebilirsiniz. InPrivate pencerelerini özellikle internet cafe gibi ortamlarda hat›rla- mak ve kendi bilgisayar›n›zda olmaman›za ra¤men özel bilgilerinizi girmek veya izlemek zorunda oldu¤unuz durumlarda s›kça kullan- makta güvenlik aç›s›ndan büyük fayda olacakt›r.
  • 17. INTERNET EXPLORER 8 DEVR‹M‹ 9 InPr›vate Block›ng Do¤rudan son kullan›c›n›n hissedece¤i bir sistem olmasa da InPriva- te Browsing’e ek olarak ayr›ca bir de InPrivate Blocking mekaniz- mas› var. Bu sistemi anlatman›n en kolay yolu sistemin engelledi¤i güvenlik a盤›n› anlatmak geçiyor. Varsayal›m ki birinci.com sitesini geziyoruz ve bu esnada sinsi.com sitesinden bir JavaScript dosyas› ça¤r›ld›. Art›k sinsi.com bizi tan›- yor, orada da bir oturumumuz var. Bir sonraki ad›mda ikinci.com ad›nda bir siteyi ziyaret ettik ve flans eseri bu sitede de yine sin- si.com’dan ayn› JavaScript dosyas› eklenmifl. An itibari ile sinsi.com bizim ikinci.com’a gelmeden önce hangi sitede bulundu¤umuzu bili- yor. Hatta bu senaryo daha da uzat›labilir ve ayn› taray›c› oturumu içerisinde 20 önceki siteye kadar nereleri gezdi¤imiz sinsi.com tara- f›ndan takip ediliyor olabilir. Tabi bunlar›n hepsinin gerçekleflmesi için ayn› JavaScript’in tüm bu sitelerden ça¤r›lm›fl olmas› flart. ‹flte yukar›da anlatt›¤›m›z güvenlik a盤›n› engellemek amac› ile InP- rivate Blocking gelifltirilmifltir. Sistemin amac› kullan›c›ya özel bilgi- lerin farkl› sitelere kullan›c› fark›nda olmadan ulaflmas›n› engellemek. E¤er InPrivate Blocking aktif ise taray›c› her sitede harici olarak yük- lenen script’lerin listesini sakl›yor ve durumuna göre baz› script’leri de aktif edebiliyor. Ph›sh›ng Korumas› ve SmartScreen Phishing olarak adland›rd›¤›m›z güvenlik a盤› asl›nda a¤›rl›kl› ola- rak sosyal bir sald›r› mekanizmas› da say›labilir. Phishing’i teknik olarak tamamen engellemek mümkün de¤il. Peki, nedir Phishing? Ba- sit bir örnek olarak internet bankac›l›¤› mekanizmalar›n› ele alal›m. Varsayal›mki her gün çal›flt›¤›n›z bankan›n web sitesi olan ban- kam.com adresini ziyaret ediyorsunuz. fians eseri size bir e-posta gel- di ve bankan›z›n web sitesinde bir ifllem yapman›z gerekti¤i söylenerek “Buraya T›klay›n” tarz›nda bir link verildi. Taray›c›n›z aç›ld›¤›nda e- bankam.com ad›nda bir adres görmeniz halinde e¤er bu durumdan ra- hats›z olup adresin gerçekten sizin bankan›za ait olup olmad›¤›n› kont- rol etmezseniz belki de çoktan düflman›n ellerine düfltünüz demektir. Bu noktada, tabi ki Internet Explorer 8.0’›n hangi alan ad›n›n gerçek- ten bankan›za ait olup olmad›¤›n› bilme flans› yok. Fakat en az›ndan kontrol edilebilecek baflka noktalar var.
  • 18. 10 INTERNET EXPLORER 8 SmartScreen Filter kullan›c›n›n ziyaret etti¤i adreste bir gariplik oldu¤unu alg›l›yor. Örne¤in, bir alan ad› de¤il de do¤rudan bir web sunucusunun IP adre- sine yönlendirilmifl iseniz büyük ihtimal ile bu dinamik bir IP adresi- dir ve söz konusu sunucu geçerli bir kurumsal web sunucusu de¤ildir. Bu gibi durumlar› alg›layan SmartScreen, Filter Phishing konusunda kullan›c›y› uyararak içerisine düflülebilecek kötü durumlar› azaltmay› hedefliyor.
  • 19. INTERNET EXPLORER 8 DEVR‹M‹ 11 SmartScreen Filter “Zararl›” olarak raporlanm›fl bir siteye eriflimi engelliyor. Kolay Kullan›m Bilgisayar bafl›nda bulundu¤umuz süre boyunca en çok kulland›¤›m›z yaz›l›mlar› bir düflünelim. Akl›n›za gelenler aras›nda internet taray›c›- n›z›n ilk beflte olaca¤›ndan eminim. Bu kadar yo¤un bir flekilde kul- land›¤›m›z bir yaz›l›m›n tabi ki olabildi¤ince iflimizi kolaylaflt›rmas› ve h›zland›rmas› da gerekiyor. Birazdan IE 8.0 ile beraber gelen ve detaylarda sakl› olan ufak ama bir o kadar da de¤erli özelliklere göz ataca¤›z. Esas sürprizimi bölümün sonuna sakl›yorum. Act›veX Yüklemeleri ActiveX yüklemeleri için “bafl›m›z›n belalar›” desek herhalde hiç de yanl›fl olmaz. ActiveX yüklemesi gerektiren bir sayfada karfl›m›za ç›- kan güvenlik uyar›s› sonras› sayfay› tekrar açmak zorunda kalmak ve- ya yönetici haklar›na sahip olmad›¤›m›z bir bilgisayarda ActiveX’le- ri yükleyemedi¤imiz için çok basit web uygulamalar›n› bile kullana- mamak neredeyse günübirlik s›k›nt›lar›m›z aras›nda yer al›yor. Bu s›- k›nt›lar asl›nda sadece son kullan›c›n›n de¤il, dolayl› olarak sistem yöneticilerinin ve programc›lar›n da s›k›nt›lar› aras›nda.
  • 20. 12 INTERNET EXPLORER 8 Özellikle Vista ile beraber gelen UAC (User Account Control) sonra- s›nda bu dertler gergin senaryolara sebep olabiliyor. Ama art›k her fley de¤iflti, kullan›c›lar yönetici haklar›na sahip olmasalar da kendi kulla- n›c› hesaplar›na özel olarak ActiveX uygulamalar› yükleyebilecekler. E¤er söz konusu ActiveX uygulamas› zararl› bir kod içeriyorsa bu du- rumun bilgisayara hiçbir flekilde zarar› dokunamayacak. En güzel ha- ber ise yaz›l›m gelifltiriciler için; var olan ActiveX uygulamalar› her- hangi bir sorun yaflamadan bu sistem ile çal›flabiliyor. Kullan›c›lar herhangi bir ActiveX kontrolü ile karfl›laflt›klar›nda kont- rolü sadece kendileri için veya tüm makine baz›nda yüklemek isteyip istemediklerini seçebilecekler. Bu seçim flu anki Internet Explorer içe- risinde ActiveX kontrolleri için gelen uyar› mekanizmas›na dahil edil- mifl durumda. ActiveX yüklemeleri art›k yönetici haklar› olmaks›z›n da çal›flabiliyor. Sekme Renklendirme Internet Explorer 7 ile beraber internet taray›c›s› içerisinde sekmeler (tabs) kullanmaya iyice al›flt›k. Fakat bazen çok say›da sekme aç›nca hangi sekmenin hangi konuyla iliflkili oldu¤unu bulmak zor olabiliyor. Varsayal›m ki, iki farkl› konuda live.com üzerinde birer arama yapt›- n›z ve arama sonuçlar›n›n bulundu¤u sayfalar› açarak ve yine o sayfa- lardan da baflka sayfalar› yeni sekmelerde açarak araflt›rman›za devam ediyorsunuz. Peki, hangi sekmeler hangi araman›zla iliflkiliydi?
  • 21. INTERNET EXPLORER 8 DEVR‹M‹ 13 Farkl› kaynaklardan aç›lan sekmeler farkl› renklerde gösteriliyor. Internet Explorer 8.0 ile beraber art›k açt›¤›n›z her sekme kendi sahi- bini tan›yor. Bir anlamda taray›c›n›z sizin iki veya daha fazla say›da farkl› yoldan interneti gezdi¤inizi alg›layarak bu yollar› da aç›k bir fle- kilde gösterebilmek ad›na sekmeleri farkl› renklerle grupluyor. Haya- t› kolaylaflt›ran ufak ve hofl bir detay de¤il mi? Sekme gruplar›n› sa¤ tufl ile gelen menüden yönetebilirsiniz.
  • 22. 14 INTERNET EXPLORER 8 Ak›ll› Adres Çubu¤u Taray›c› içerisindeki adres çubu¤u bir taray›c›da en çok kullan›lan yerlerden biridir. Sürekli adres çubu¤una bir adres yazar›z, daha önce yazd›¤›m›z adresleri arar›z ve tüm internet gezintimiz boyunca sürek- li adres çubu¤unu kullan›r›z. Internet Explorer ekibi de bunun fark›n- da oldu¤u için adres çubu¤unda da baz› de¤ifliklikler yap›lm›fl. Bun- lardan ilki “Search Suggestion” entegrasyonu. Search Suggestion konusunda detaylara ileriki bölümlerde de¤inece¤iz fakat bu aflamada önemli olan bizim kullan›c› olarak istedi¤imiz bir arama mekanizma- s›n› IE içerisine entegre ettikten sonra adres çubu¤undan da bu siste- mi kullanabiliyor olmam›z. Adres çubu¤unda hem arama sonuçlar› hem de adres geçmifli beraber. Adres çubu¤unda do¤rudan arama yapt›rabilmek için tek yapman›z ge- reken arataca¤›n›z sözcükleri yazmadan önce bir soru iflareti (?) koy- mak. Böylece sistem otomatik olarak varsay›lan Search Provider’›n, varsa Search Suggestion mekanizmas›n› da kullanarak uygun arama so- nuçlar›n› taray›c› geçmifli ile beraber bir mini rapor olarak sunacakt›r.
  • 23. INTERNET EXPLORER 8 DEVR‹M‹ 15 Adres çubu¤unda diskteki klasör ve dosyalar› görerek istedi¤imiz dosyay› IE ile açabiliyoruz. Belki nadiren de olsa Internet Explorer içerisinde sistemimizdeki dos- yalar› da açmak isteyebiliriz. Bu dosyalar bazen basit birer JPEG re- sim dosyas› olabilirken belki de do¤rudan IE içerisinde aç›labilen XPS dosyalar› da olabilir. Bu gibi durumlarda adres çubu¤undan diskin içeri¤ini gezerek istedi¤imiz dosyay› h›zl›ca bulabilmek büyük avan- taj sa¤lar. ‹flte karfl›n›zda adres çubu¤unda Visual Studio içerisinde Intellisense yap›s›na benzeyen disk gezgini. Yeni Trendler Geldik bölümün en heyecanl› k›sm›na. IE 8.0 ile beraber art›k inter- nette sörf sporuna yeni bir ak›m geliyor diyebiliriz. Bu ak›m› olufltu- ran kelimeleri Accelerator, Search Suggestion ve Web Slice fleklin- de özetleyebiliriz. Tüm bunlar internette sörf yapma fleklinizi, webi kullanma mant›¤›n›z› ve tüm al›flkanl›klar›n›z› de¤ifltirmeye aday yep- yeni araçlar. Hemen gelin bu yeni dünyaya dal›p h›zl› bir tur atal›m ve nas›l olacak da IE al›flkanl›klar›m›z› de¤ifltirecek görelim. H›zland›r›c› (Accelerator) ‹ngilizce kelime anlam› h›zland›r›c› olan Accelerator yap›s›, asl›nda fark›nda olmadan gün içerisinde defalarca kulland›¤›m›z web tabanl› servisleri daha rahat ve h›zl› kullanabilmemiz için gerekli altyap›y› su- nuyor. Gelin beraber bir düflünelim, internette gezinirken sürekli yap- t›¤›m›z ve tekrar etti¤imiz ifllemler nelerdir? San›r›m birincisi arama motorlar›n› kullanmak, kiflisel olarak düflündü¤ümde benim en s›k kulland›¤›m servislerden biri de harita servisleri. Bir web sitesinde gör- dü¤üm adresin tam olarak nerede oldu¤u? Oraya nas›l gidebilece¤im?
  • 24. 16 INTERNET EXPLORER 8 Baflka neler olabilir düflünelim... Sözlük hizmetleri de bu servisler aras›nda yerini alabilir, bilmedi¤im bir kelimeyi h›zl› bir flekilde Türkçeye çevirerek anlam›n› ö¤renmek istedi¤imde kütüphaneye uza- n›p bir sözlük bulmaktansa hemen internette online bir sözlük kullan- may› tercih ederim. Tüm bu servislere bakt›¤›m›zda asl›nda sürekli ayn› fleyi tekrar etti¤i- mizi görebiliriz. ‹nternette karfl›laflt›¤›m›z bir kelimeyi, adresi veya bilgiyi al›r baflka bir internet servisine teslim eder ve uygun bir sonu- cu gözle görmek isteriz. Bu sonuç bazen bir harita, bazen bir arama sonucu bazen de farkl› dilde bir kelimenin aç›klamas› olabilir. Tüm bu örneklerde asl›nda hep ayn› mekanizma çal›fl›yor ve bu ifllemleri biz defalarca ayn› flekilde tekrarl›yoruz. ‹flte Accelerator’lar bu noktada devreye girip tekrarlad›¤›m›z bu süreçleri k›saltmay› hedefliyor. Accelerator’lara ulaflmak için Internet Explorer içerisinde herhangi bir web sitesini gezerken web sitesi üzerinde sa¤ tufl ile t›klamak ye- terli olacakt›r. Karfl›n›za ç›kan menüde her bir Accelerator yap›s› için birer komut göreceksiniz. Accelerator’lar›n baz›lar› sadece içerisinde bulunulan sayfan›n adresi ile ilgilenirken (Örne¤in içerisinde bulun- du¤unuz sayfay› baflka bir dile tercüme edecek bir Accelerator) baz›- lar› ise sadece fare ile söz konusu sayfada bir yaz› seçilmiflse çal›fla- cakt›r (Örne¤in seçili adresi haritada gösteren bir Accelerator). LiveMaps Accelerator’›n› kullanarak seçti¤imiz bir adresi do¤rudan haritada görebiliyoruz.
  • 25. INTERNET EXPLORER 8 DEVR‹M‹ 17 Accelerator’lar›n baz›lar› an›nda sonucu ek bir pencerede gösterebilir- ken baz›lar› sadece t›kland›¤›nda baflka bir sekme veya pencere aça- rak sonucu gösterebilirler. Sisteminize yeni Accelerator’lar› ancak Accelerator sa¤layan web sitelerinde uygun linklere t›klayarak yükle- yebilirsiniz. Accelerator’lar›n programatik olarak nas›l haz›rland›¤› ile ilgili detaylara bir sonraki bölümümüzde de¤inece¤iz. Manage Accelerator k›sm›ndan sistemde yüklü tüm Accelerator’lar› yönetebilirsiniz. Herhangi bir Accelerator ilk defa sisteme yüklendi¤inde do¤rudan menülerde yerini almaz. More Accelerators menüsüne yerleflen yeni Accelerator’lar› kullan›c›lar isterlerse ana menüye tafl›yabilirler. Bu- nun için taray›c› içerisinde sa¤ tufl ile gelen menüden Manage Acce- lerator komutunu vererek uygun bölüme geçmeleri gerekir.
  • 26. 18 INTERNET EXPLORER 8 Manage Accelerator bölümünden isterseniz sistemdeki Accelerator’lar› silebilirsiniz. Manage Accelerators bölümünde kullan›c›lar hangi Accelerator’la- r›n ana menüde gözükece¤ine karar vermek için istedikleri Accelera- tor’› seçerek sa¤ altta gelen dü¤melerden Set as Default dü¤mesine t›klayabilirler. Ayn› flekilde ana menüde yer alan bir Accelerator’› alt menüye göndermek için de Remove as default dü¤mesi kullan›labi- lir. Manage Accelerators penceresinde herhangi bir Accelerator se- çildi¤inde istenirse Disable dü¤mesi ile bu Acceletor pasif hale geti- rilebilir veya Remove dü¤mesi ile tamamen sistemden kald›r›labilir. Görsel Arama (V›sual Search) Internet Explorer 7.0 ile beraber gelen Search Provider yap›s› kullan›- c›lara taray›c› içerisine kendi tercih ettikleri arama motorlar›n› enteg- re etme olana¤› tan›d›. Böylece kullan›c›lar›n taray›c›n›n sol üstünde- ki ufak kutucu¤a yazd›klar› aramalar otomatik olarak taray›c›ya yük- lenmifl Search Provider içerisindeki kurallara göre söz konusu arama motoruna gönderilip taray›c› içerisinde sonuçlar gösteriliyordu. Internet Explorer 8.0 ile beraber Search Provider yap›s›na Visual Se- arch ad›nda yeni bir sistem eklendi. Bu sistemin amac› kullan›c›lar aramak istedikleri kelimeleri taray›c› içerisinde yazarken otomatik olarak olas› sonuçlar› yine taray›c› ile entegre olarak göstermek.
  • 27. INTERNET EXPLORER 8 DEVR‹M‹ 19 Yaz›l›mc› kimli¤iyle konuya bakarsak asl›nda bir süredir web orta- m›nda al›fl›k oldu¤umuz AJAX ile kurulan AutoComplete sistemleri- nin bir türevi ile karfl› karfl›ya oldu¤umuzu söyleyebiliriz. Tabi bu sis- temin kullan›labilmesi için Internet Explorer’a arama yap›lacak arama motorunun Search Provider’›n›n yüklenmifl olmas› ve söz konusu Se- arch Provider’›n da Visual Search sistemini desteklemesi gerekiyor. Bu konudaki teknik detaylar› bir sonraki bölümümüzde derinlemesi- ne inceleyece¤iz. Görsel Arama sistemi aramalarda otomatik sonuçlar› gösteriyor. Sisteminize herhangi bir Görsel Arama eklemek için özünde bu des- te¤e sahip bir Search Provider eklemeniz gerekiyor. Search Provi- der’lara farkl› web sitelerinden ulaflabilece¤iniz gibi isterseniz do¤ru- dan Internet Explorer’›n web tabanl› Search Provider galerisini de Find More Providers komutu ile ziyaret edebilirsiniz. Yüklemifl oldu¤unuz Search Provider’lar› silmek veya varsay›lan ara- ma motoru olarak atamak için arama kutucu¤unun yan›ndaki oka ba- sarak Manage Search Providers komutunu verebilirsiniz.
  • 28. 20 INTERNET EXPLORER 8 Search Provider’lar›n hepsini bu pencereden yönetebilirsiniz “Manage Search Providers” alt›nda kay›tl› arama motorlar›n›n taray›c› arayüzünde gösterilmesi s›ras›n› de¤ifltirebilece¤iniz gibi istedi¤iniz bir Provider yap›s›n› Remove dü¤mesi ile sistemden silebilirsiniz de. Web Sl›ce Benim en favori özelli¤ime geldik. Web Slice’lar›n mant›¤›nda bir web sitesinin belirli bir bölümünü kesip sürekli o bölümü takibe al- mak yat›yor. Söz konusu kesik bölümde herhangi bir de¤ifliklik oldu- ¤unda taray›c› sizi hemen haberdar ediyor ve ister yine o kesi¤i ister tüm sayfay› yeniden inceleyebiliyorsunuz. Tabi sanal ortamda bir fleyleri kesmek pek mümkün de¤il, o nedenle tam olarak neden bahsetti¤imize gerçek bir örnekle göz atal›m. Var- sayal›m ki en sevdi¤in haber sitesindeki haberleri takip etmek istiyor- sunuz veya bir aç›k artt›rma sitesindeki belirli bir ürünün durumunu sürekli kontrol etmeniz gerekiyor. Bu gibi senaryolarda kullanabilece- ¤imiz teknolojilerden biri RSS’ler. E¤er karfl› taraf size bir RSS kay- na¤› sa¤larsa söz konusu RSS’i RSS Okuyucu program›n›za ekleye- rek takip edebilirsiniz. Bu durum belki bir haber sitesini takip etmek için uygun olsa da maalesef aç›k artt›rma sitesindeki örnek için pek kolay bir çözüm olmayacakt›r. K›sa bir süre için takip etmek istedi¤i- niz ufak verileri tek tek bir RSS okuyucuya eklemenin zahmetini geç-
  • 29. INTERNET EXPLORER 8 DEVR‹M‹ 21 sek bile maalesef araya ikinci bir program veya arayüz eklemifl olma- n›n getirece¤i hantall›k da üzerimize çökecektir. Tüm bu dertlerin içinde bo¤uflurken kahraman›m›z Web Slice yard›- m›m›za kofluyor ve web sitelerinde desteklenen bölümleri kesip tara- y›c›m›z›n bir parças› haline getirebiliyoruz. Tabi bu ifllemin yap›labil- mesi için söz konusu web sitesi taraf›ndaki programc›lar›n ve tasar›m- c›lar›n yapmalar› gereken baz› ufak ifller var. Bu ifllerin detaylar›na bir sonraki bölümde de¤inece¤iz. fiimdilik hali haz›rda bu deste¤i veren bir site ile yola ç›karak Web Slice’lar›n kullan›m›na göz atal›m. ‹stedi¤imiz ürüne Web Slice olarak al›p taray›c›m›za ekliyoruz E¤er bir web sitesinde takip edebilece¤iniz, kesip alabilece¤iniz bir Web Slice varsa söz konusu bölümün fare ile üzerine geldi¤inizde ye- flil bir çerçeve ve Web Slice logosu karfl›n›za gelecektir. Bu görsellik tabi ki farkl› web sitelerinde tasar›mc›lar taraf›ndan farkl› flekillerde de¤ifltirilebilir. Web Slice logosunu gördü¤ünüz hemen o logoya t›k- layarak web sitesinin söz konusu bölümünü kesip alabilirsiniz. Bu es- nada Internet Explorer size nereden veri alaca¤›n›z› da gösteren bir uyar› kutucu¤u gösterecektir.
  • 30. 22 INTERNET EXPLORER 8 Ald›¤›m›z Web Slice taray›c›m›z›n araç çubu¤una yerleflti. Kesip alma ifllemi tamamland›¤›nda art›k Web Slice’›n›z Internet Explorer’›n araç çubu¤unda yerini alm›fl olacakt›r. ‹stedi¤iniz zaman Web Slice’›n bafll›¤›na t›klyarak web sitesinin kesti¤iniz bölümünü inceleyebilirsiniz. Bazen kesti¤iniz yer ile araç çubu¤unda gördükle- riniz bire bir birbirlerine benzeyebilece¤i gibi tamamen farkl› bir gör- sellikle de karfl›laflabilirsiniz. Bu noktadaki karar ziyaret etti¤iniz site- nin tasar›mc› ve programc›lar›n ait. Art›k Internet Explorer sizin için söz konusu kesi¤i sürekli kontrol edecek ve herhangi bir de¤ifliklik oldu¤unda Web Slice’›n bafll›¤› araç çubu¤unda parlayarak kal›n bir flekilde yaz›lacakt›r. Her Web Slice’›n kendi penceresinin sol alt›nda üç adet dü¤me yer alabilir. Bunlardan sa¤a ok iflareti fleklinde olan sizi Web Slice’›n kesildi¤i sayfaya yön- lendirecektir. Refresh (Yenile) dü¤mesinin logosuna benzer görsellikte olan dü¤me Web Slice’›n içeri¤inin ana kaynaktan tekrar al›nmas›n› sa¤larken, e¤er varsa sar› bir ünlem iflareti ise Web Slice’›n›z›n ne kadar süre sonra kullan›mdan kalkaca¤›na dair bilgiyi sa¤layacakt›r.
  • 31. INTERNET EXPLORER 8 DEVR‹M‹ 23 Web Slice’›m›za özel ayarlar. Bir Web Slice’›n araç çubu¤undaki bafll›¤›na sa¤ t›klad›¤›n›zda gelen menüden Properties komutunu verirseniz karfl›n›za söz konusu Web Slice ile ilgili düzenleyebilece¤iniz ayarlar›n bulundu¤u özel bir pen- cere gelecektir. Bu pencere içerisinde gerekiyorsa Web Slice için gü- venlik bilgilerini girebilir veya Web Slice içeri¤inin ne kadar sürede bir internetteki kaynaktan yenilenmesi gerekti¤ini ayarlayabilirsiniz. Herhangi bir Web Slice’› silmek için yine sa¤ tufl ile Web Slice’›n araç çubu¤undaki bafll›¤›na t›klayarak gelen menüden Delete komu- tunu verebilirsiniz.
  • 33. 3 Web’de Yeni Trendler Bir H›zland›r›c› (Accelerator) VB ve ASP.NET ile Nas›l Haz›rlan›r? 25 XML Üretmek 41 Son Ad›mlar... 30 PHP ile XML Üretmek 44 Art›k Haz›r›z 32 Görsel Aramalar için JSON Veri Kayna¤› 46 Görsel Arama Nas›l Haz›rlan›r? 32 Web Dilimleri Nas›l Haz›rlan›r 47 Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤i 35 Çal›flma Yap›s› 48 Sunucu Taraf›nda Display Source De¤iflikli¤i 49 Neler Yapmal›? 36 Farkl› Web Dilimleri’ni Sunucuda Gerçek Zamanl› Birbirine Ba¤lamak 50 XML Üretimi 39 Web Dilimi’ne Kaynak Olarak C# ve ASP.NET ile RSS Kullanmak 50 XML Üretmek 39 Internet Explorer 8 ile beraber gelen yeniliklere h›zl› bir flekilde göz att›ktan sonra son kullan›c›n›n ötesinde biz üreticiler, yani yaz›l›mc›- lar ve web tasar›mc›lar için neler nas›l iflliyor sorusuna cevap verece- ¤imiz bu bölümde odaklanaca¤›m›z ana üç konu var. ‹lk olarak H›z- land›r›c›lar›n (Accelerator) yap›s›n› inceleyerek hem tasar›m hem de yaz›l›m noktas›nda ne gibi bir altyap› haz›rlamam›z gerekti¤ine baka- ca¤›z. Sonras›nda hemen Internet Explorer 8’in Görsel Arama (Visu- al Search Suggestion) özelli¤i için gerekli programatik yap›n›n olufltu- rulmas›na de¤inecek ve Web Dilimleri’nin (Web Slices) oluflumu ve haz›rlanmas› ile ilgili detaylar ile bölümümüzü sonland›raca¤›z. Gelin h›zl› bir flekilde örnekler ile bu yeni web trendlerini inceleyece¤im. Bir H›zland›r›c› (Accelerator) Nas›l Haz›rlan›r? Accelerator’lar özünde birer XML dosyas›d›r. Bu XML dosyalar›n›n yaz›m standard› Microsoft taraf›ndan belirlenmifl olup OpenService- Description olarak geçer. Bu standarda uygun yaz›lan bir XML kodu ile taray›c›n›n hangi durumlarda ne gibi ifllemler yapaca¤›na dair h›z- land›r›c›lar çerçevesinde kararlar› biz yaz›l›mc›lar olarak al›r›z. Böy- lece XML içerisinde tan›ml› olan bir ayarlar Internet Explorer 8 içeri- sinde kullan›c›lar›n karfl›s›na birer H›zland›r›c› olarak ç›kar. <?xml version=”1.0” encoding=”utf-8” ?> <openServiceDescription xmlns=”http://www.micro-
  • 34. 26 INTERNET EXPLORER 8 soft.com/schemas/openservicedescription/1.0”> <homepageUrl>http://www.zargan.com/</homepageUrl> <display> <name>Zargan’da ara</name> <icon>http://www.zargan.com/favicon.ico</icon> </display> <activity category=”search”> <activityAction context=”selection”> <execute method=”get” action= ”http://www.zargan.com/sozluk.asp”> <parameter name=”Sozcuk” value=”{selection}” /> </execute> </activityAction> </activity> </openServiceDescription> Zargan.com Türkçe-‹ngilizce çeviri sitesinde kullan›lan h›zland›r›c›ya ait kod. Yukar›da görmüfl oldu¤unuz XML kodu flu anda Zargan.com ‹ngiliz- ce-Türkçe sözlük taraf›ndan kullan›lan H›zland›r›c›’n›n XML kodudur. Özünde basit bir h›zland›r›c›n›n haz›rlanmas› yolunda e¤er h›zland›r›c› Ön ‹zleme (Preview) ekran› içermiyorsa sunucu tarafl› olarak ek bir kod veya ifllem yap›lmas›, sayfa haz›rlanmas› gerekmez. Bir önceki bölüm- de de inceledi¤imiz üzere h›zland›r›c›lar›n amac› bir siteden herhangi bir veriyi al›p baka bir siteye tafl›makt›r. Yukar›daki örnekte herhangi bir si- tedeki kelime do¤rudan Zargan.com’daki çeviri sayfas›na tafl›narak ola- s› çeviri ifllemlerinin sonuçlar›n›n an›nda gösterilmesini sa¤l›yor. Zargan.com h›zland›r›c›s›n› Microsoft sitesinde kullan›rken.
  • 35. WEB’DE YEN‹ TRENDLER 27 Bir h›zland›r›c› yazarken karar verilmesi gereken noktalardan biri h›z- land›r›c›n›n hangi flekillerde kullan›c›ya sonuç gösterece¤i. Var olan iki alternatiften biri kullan›c›n›n taray›c› içerisinde sa¤ tufla t›klay›nca eriflebilece¤i bir menüden tekrar bir t›klama ile hedef siteye yönlendi- rilmesi, bir di¤eri ise do¤rudan söz konusu menü üzerinde kullan›c› gezerken an›nda bir Ön ‹zleme penceresi gösterilmesi. Bu iki alterna- tif metodun her biri h›zland›r›c›n›n XML’i içerisinde birer action ola- rak tan›mlanmak durumunda. <activityAction context=”selection” > <preview action=”http://daron.yondem.com/aramasonuc. aspx” method=” get” > <parameter name=”kelime” value=”{selection}” /> </preview> <execute action=” http://daron.yondem.com/arama- sonuc_ozel.aspx” method=” post” > <parameter name=”kelime” value=”{selection}” /> </execute> </activityAction> Hemen yukar›daki kod örne¤inde kal›n olarak yaz›l› noktalara dikkat edersek asl›nda farkl› durumlarda h›zland›r›c›n›n nas›l ifllemler yapaca- ¤›n› ayr› ayr› belirtti¤imizi görebiliriz. Standart olarak execute action tüm h›zland›r›c›larda bulunmas› zorunlu elementlerden biri olsa da her h›zland›r›c› preview action ile bir ön izleme ekran› sa¤lamak zorunda de¤il. H›zland›r›c›lardaki ön izleme ekranlar› asl›nda basit birer IFRA- ME olarak çal›fl›rlar ve içlerinde yine h›zland›r›c› içerisinde tan›ml› web sayfas› uygun parametreler ile çal›flt›r›l›r. Bir h›zland›r›c›n›n ön iz- leme ekran› kendi içinde Post veya Get ifllemleri de yapabilir böyle- ce belki de gösterilecek sonuçlar sayfalama yap›larak gösterilebilir. Maalesef ki gelen ön izleme ekran›n›n boyutunu de¤ifltirme flans›n›z olmayacakt›r, bu denenle ön izleme ekran›nda sonuç gösterimi yapa- cak olan sayfalar› özel olarak bu duruma uygun flekilde tasarlamak flart. <activityAction context=”selection” > ...... ...... </activityAction>
  • 36. 28 INTERNET EXPLORER 8 Kodun en üstünde ve en alt›nda activityAction ad›nda bir XML tag’› daha göreceksiniz. Bu tag içerisindeki context parametresi bir h›z- land›r›c›n›n çal›flaca¤› durumu tan›ml›yor. Örne¤in e¤er context de- ¤eri selection olarak ayarlanm›fl ise söz konusu h›zland›r›c› sadece taray›c› içerisinde bir metin seçildi¤inde devreye girecek ve h›zland›- r›c›lar menüsünde yerini alacakt›r. Oysa ayn› context özelli¤ine link de¤erini verirseniz bu sefer de h›zland›r›c›n›z taray›c› içerisin- deki herhangi bir linke sa¤ t›kland›¤›nda gelen menüde yer alacakt›r. Tabi ki bu her iki durum için de ayr› ayr› execute action ve preview action’lar tan›mlamak mümkün. Tek yapman›z gereken bu tan›mla- malar› uygun activityAction tag’lar› aras›na almak. <execute action=” http://daron.yondem.com/arama- sonuc_ozel.aspx” method=” post” > <parameter name=”kelime” value=”{selection}” /> </execute> fiimdi gelin detayl› olarak yukar›da kod ile taray›c›ya neler anlatmaya çal›flt›¤›m›z› inceleyelim. ‹lk olarak iki önceki paragrafta da bahsetti- ¤imiz üzere execute action tag’›n› açarak h›zland›r›c›ya h›zland›- r›c›lar menüsünde t›kland›¤›nda yap›lacak ifllemleri tan›ml›yoruz. So- nuç itibari ile ayr› bir siteye veri gönderme amac› ile yola ç›kt›¤›m›z için yap›lacak ifllem bir POST veya GET ifllemi olabilir. Bunu hemen method özelli¤inde belirtiyoruz. E¤er POST seçene¤ini seçerseniz tüm parametreler form olarak gönderilecektir, e¤er GET metodunu seçer- seniz tüm parametreler adrese query olarak eklenerek gönderilecek- tir. Tabi ki tüm bu parametrelerin gönderilece¤i bir de adres bulun- mak zorunda, iflte o adresi de action özelli¤ine at›yoruz. Böylece ar- t›k h›zland›r›c›m›z parametreleri nereye nas›l gönderece¤ini biliyor. Peki parametreler nelerdir? <parameter name=”kelime” value=”{selection}” /> Yukar›daki flekilde herhangi bir action için istedi¤iniz say›da para- metre tan›mlayabilirsiniz. Her parametrenin bir ad› ve bir de de¤eri bulunmak zorunda. Bu de¤eri value özelli¤i olarak tan›mlarken ister- seniz elle sabit de¤erler girebilece¤iniz gibi taray›c› taraf›nda çal›flma zaman›nda belirlenecek dinamik de¤erleri de karfl› sunucuya göndere- bilirsiniz.
  • 37. WEB’DE YEN‹ TRENDLER 29 Asl›nda bizim esas amac›m›z da kullan›c›n›n sayfada seçti¤i metin ve- ya linkin bilgileri gibi dinamik bilgileri an›nda kendi sunucumuzdaki uygulama gönderebilmek. Bu çerçevede örnekte oldu¤u üzere {se- lection} gibi de¤iflken parametreler kullanarak kendi parametrele- rimizin de¤erlerini Internet Explorer 8’in belirlemesini sa¤layabiliyo- ruz. Kullan›labilecek farkl› parametreleri ve alaca¤› de¤erlerin anla- m›n› afla¤›daki tabloda bulabilirsiniz. Ad› Aç›klamas› documentDomain ‹çerisinde bulunan sayfan›n alan ad›. documentTitle ‹çerisinde bulunan sayfan›n HTML bafll›k (title) bilgisi. documentUrl ‹çerisinde bulunan sayfan›n tam adresi. link E¤er kullan›c› bir linkte sa¤ t›klam›fl ise bu linkin adresi. linkDomain E¤er kullan›c› bir linkte sa¤ t›klam›fl ise bu linkin hedefledi¤i ana alan ad›. linkRel E¤er kullan›c› bir linkte sa¤ t›klam›fl ise bu linkin rel microformat de¤eri. linkText E¤er kullan›c› bir linkte sa¤ t›klam›fl ise bu linkin içerisindeki yaz›. selection Kullan›c›n›n taray›c› sayfas›nda seçmifl oldu¤u metin. Tüm bu ifllemleri tamamlad›ktan sonra ayn› parametreleri kullanarak bir ön izleme ekran› da haz›rlayabilirsiniz. <preview action=”http://daron.yondem.com/aramasonuc. aspx” method=” get” > <parameter name=”kelime” value=”{selection}” /> </preview> Üstte görebilece¤iniz kod içerisindeki tek farkl›l›k ana tag’›n execute action yerine preview action olarak tan›mlanm›fl olas›. Ayr›ca ta- bi ki bu sefer hedef adres olarak verdi¤imiz yerdeki web sayfam›z›n ta-
  • 38. 30 INTERNET EXPLORER 8 sar›m› da normalden farkl› olarak ön izleme penceresi içerisine s›¤abi- lecek flekilde tasarlanm›fl olmal›. NOT SUNUCU TARAFINDA NELER YAPMALI? H›zland›r›c›lar›n sunucu tarafl› programlama teknolojileri veya iflletim sis- temlerinden tamamen ba¤›ms›z olarak istemcide çal›fl›rlar. Önemli olan tek fley h›zland›r›c›ya ait tan›mlar›n yap›ld›¤› XML dosyas›n›n bir flekilde web su- nucusu taraf›ndan site ile ayn› port üzerinden yay›nlanabiliyor olmal›s›d›r. Bir h›zland›r›c› taraf›ndan siteye gönderilen parametreler programc›n›n tercihine göre standart POST veya GET ifllemleri ile gönderilir ve bu ve- rileri alabilmek için sunucu taraf›nda yine standart prosedürler uygulan›r. [ASP.NET C#] //GET ile gelen veriyi almak için. Request.QueryString[“sozcuk”]; //POST ile gelen veriyi almak için. Request.Form[“sozcuk”); [ASP.NET VB] ‘GET ile gelen veriyi almak için. Request.QueryString(“sozcuk”) ‘POST ile gelen veriyi almak için. Request.Form(“sozcuk”) [PHP] //GET ile gelen veriyi almak için. $_GET[‘sozcuk’]; //POST ile gelen veriyi almak için. $_POST[‘sozcuk’]; Son Ad›mlar... H›zland›r›c›m›zla ilgili tüm ifllevselliklere karar verdi¤imize göre son olarak h›zland›r›c›m›z›n tan›mlar› ve kimli¤i ile ilgili ayarlar› da ya- parsak yay›na haz›r hale getirebiliriz. <?xml version=”1.0” encoding=”utf-8” ?> <openServiceDescription xmlns=”http://www.microsoft. com/schemas/ openservicedescription/1.0”>
  • 39. WEB’DE YEN‹ TRENDLER 31 <homepageUrl>http://daron.yondem.com/</homepageUrl> <display> <name>Deneme ile çevir</name> <icon>http://daron.yondem.com/favicon.ico</icon> </display> <activity category=”translate”> <activityAction context=”selection” > <preview action=”http://daron.yondem.com/cevir. asp”> <parameter name=”Sozcuk” value=”{selection}” /> </preview> <execute action=”http://daron.yondem.com/cevir. asp”> <parameter name=” Sozcuk “ value=”{selection}” /> </execute> </activityAction> </activity> </openServiceDescription> ‹lk olarak tan›mlad›¤›m›z tüm activityAction’lar› ayr› bir acti- vity tag’› içerisine alarak bu tag’a da category de¤eri vermemiz gerekiyor. Bu noktadaki category elementine verece¤iniz de¤er için önceden haz›rlanm›fl bir liste yok. Category de¤eri için Microsoft ta- raf›ndan belirlenen kural söz konusu de¤erin ‹ngilizce bir fiil içerme- si gerekti¤i ve k›smen emir kipinde bulunmas› fleklinde tan›mlanabi- lir. Bu de¤erler taray›c› taraf›ndan sadece gruplama amac› ile kullan›- l›yor ve ayn› de¤erlere sahip h›zland›r›c›lar› h›zland›r›c› menüsünde beraber gösteriliyor. <homepageUrl>http://daron.yondem.com/</homepageUrl> <display> <name>Deneme ile çevir</name> <icon>http://daron.yondem.com/favicon.ico</icon> </display> Son olarak openServiceDescription dosyas›n›n bafl›nda h›zland›- r›c›m›zla ilgili kimlik bilgilerini de giriyoruz. Hemen ufak bir uyar›da bulunmak istiyorum homePageUrl olsun icon adresi olsun tüm bu ad-
  • 40. 32 INTERNET EXPLORER 8 reslerin action adresleriniz ile ayn› alan ad›n› hedeflemesi flart. Aksi halde h›zland›r›c›n›z›n çal›flmas› ile ilgili sorunlar yaflayabilirsiniz. Art›k Haz›r›z H›zland›r›c›m›z› yay›na almaya haz›r›z. E¤er h›zland›r›c›n›n kullan›c›- lar› yönlendirece¤i sayfalarla ilgili tasar›msal veya programatik de¤i- fliklikler yapt›ysan›z ilk olarak söz konusu k›s›mlar› sunucunuza yük- lemenizde fayda var. Sonras›nda h›zland›r›c›n›z› sunucuya yüklemek için sadece openServiceDescription XML dosyas›n›n web sunucusu üzerinden ulafl›labilir bir konu koyman›z yeterli olacakt›r. Örne¤in web sitenizin adresinin deneme.com oldu¤unu düflünürsek dene- me.com/hizlandirici.xml fleklinde h›zland›r›c›n›z›n XML dosyas›na ulafl›labiliyor olmas› yükleme ifllemini tamamlam›fl olmak için yeterli. Peki kullan›c›lar›n bu h›zland›r›y› nas›l bulacaklar? Nereye t›klayarak bilgisayarlar›na yükleyecekler? ‹flte bu noktada karar sizin. Afla¤›daki JScript komutunu ça¤›rarak istedi¤iniz bir h›zland›r›c›y› istemci tara- f›na yüklenmek üzere gönderebilirsiniz. <div> <input id=”Button1” type=”button” value=”IE 8 Hızlandırıcımızı Yükleyin” onclick=”window.external.AddService(‘hizlandirici. xml’);” /> </div> AddService metodu parametre olarak h›zland›r›c› tan›mlar›n›z›n bulun- du¤u XML dosyas›n›n yerini al›yor ve istemci taraf›ndaki yükleme ifl- lemlerine dair onay mekanizmas›n›n çal›flmas›n› sa¤l›yor. Art›k bu nok- tadan sonra tüm kontrol kullan›c›da, h›zland›r›c›n›z ziyaretçiye ulaflt›. Görsel Arama Nas›l Haz›rlan›r? Görsel Arama sistemleri haz›rlamadan önce hali haz›rda bir Arama Sa¤lay›c› dosyan›z›n bulunmas› gerekiyor. Görsel Arama sistemi es- ki Arama Sa¤lay›c› sisteminin üzerine infla edilmifl durumda oldu¤u için önce bir Arama Sa¤lay›c› nas›l oluflturulaca¤›n› inceleyelim. <?xml version=”1.0” encoding=”UTF-8”?> <OpenSearchDescription xmlns=”http://a9.com/-/spec/ opensearch/1.1/”>
  • 41. WEB’DE YEN‹ TRENDLER 33 <ShortName>Deneme Arama Motoru</ShortName> <Url type=”text/html” template=”http://daron.yon- dem.com/?aranan= {searchTerms}”/> <Image height=”16” width=”16” type=”image/icon”> http://daron.yondem.com/favicon.ico</Image> </OpenSearchDescription> OpenSearchDescription standard› çerçevesinde haz›rlanan arama sa¤lay›c›lar çok say›da taray›c› taraf›ndan destekleniyor. Yukar›daki flekilde tan›mlanan bir arama sa¤lay›c› taray›c›n›n arama kutucu¤un- da yaz›lan herhangi bir verinin nereye nas›l gönderilece¤ini tan›ml›- yor. ‹lk aflamada XML dosyas› içerisinde arama sa¤lay›c›n›n ad› ShortName tag’lar› aras›nda yaz›ld›ktan sonra arama iflleminin nere- ye yönlendirilece¤i ise bir Url tag› içerisinde belirtiliyor. <Url type=”text/html” template=”http://daron.yondem. com/?aranan= {searchTerms}”/> Yukar›da gördü¤ünüz kod içerisinde yönlendirilen yerdeki veri kayna- ¤› tipinin text/html oldu¤u belirtildikten sonra yönlendirilecek olan ad- res de template de¤erine aktar›l›yor. Örne¤imizdeki adres flablonunu incelerseniz en sonundaki {searchTerms} k›sm› dikkatinizi çekecek- tir. ‹flte tam da bu noktada, adres içerisinde {searchTerms}’in yaz›l› oldu¤u yere kullan›c›n›n taray›c› içerisinde yazm›fl oldu¤u aranacak ke- limeler yerlefltirilecek ve söz konusu adres bu flekilde çal›flt›r›lacakt›r. Örne¤in kullan›c› e¤er taray›c›s›nda aranacak kelime olarak “asp.net” yazm›fl ise çal›flt›r›lacak olan sayfa http://daron.yondem.com/?ara- nan=asp.net fleklinde olacakt›r. Böylece sunucu taraf›nda uygulama ile adresten al›nabilecek bu parametre kullan›larak gerekli arama ifl- lemleri yap›labilir ve sonuç do¤rudan kullan›c›ya gösterilebilir. Son olarak arama sa¤lay›c›s›na ait taray›c› içerisinde gösterilecek bir ikon dosyas› da afla¤›daki flekilde openSearchDescription dosyas›na eklenir. <Image height=”16” width=”16” type=”image/icon”> http://daron.yondem.com/favicon.ico</Image>
  • 42. 34 INTERNET EXPLORER 8 Tüm bu ifllemleri yaparak kendi siteniz için bir arama sa¤lay›c› gelifl- tirdikten sonra tabi ki bu sa¤lay›c›n›n kullan›c›lar taraf›ndan buluna- bilmesi ve yüklenebilmesi için gerekli de¤ifliklikleri de yapmam›z ge- rekiyor. Örne¤in hemen bir yükleme dü¤mesi haz›rlayarak sitemize yerlefltirmek istersek arama sa¤lay›c›s›na ait yükleme ekranlar›n› aça- bilmek için afla¤›daki JScript komutunu kullanabiliriz. <a href=”#” onclick=”window.external.AddSearchProvider (‘http:// daron.yondem.com/aramasaglayici.xml’)”> Arama Sağ- layıcımızı Yükleyin</a> Haz›rlad›¤›m›z arama sa¤lay›c›ya ait XML kodlar›n› sunucuya ara- masaglayici.xml dosyas› olarak yükledikten sonra ana sayfam›za yu- kar›daki gibi bir link ekleyerek AddSearchProvider metodunu ça- ¤›rabiliriz. Söz konusu metod parametre olarak arama sa¤lay›c›ya ait ayarlar›n bulundu¤u XML dosyas›n›n yolunu al›yor ve sonras›nda yükleme ifllemlerini istemci taraf›nda bafllat›yor. Bir di¤er alternatif ise taray›c›lar›n kendi kendilerin sayfa içerisinde- ki arama sa¤lay›c›lar› bulabilmesi için yap›labilecek linkleme ayar›- d›r. Böylece kullan›c›lar›n sayfadaki yükleme dü¤melerini bulamasa veya sayfada bir yükleme dü¤mesi olmasa da taray›c› söz konusu say- fada bir arama sa¤lay›c› oldu¤unu anlayarak kendi arayüzünde gerek- li mesajlar› kullan›c›ya gösterecektir. <link title=”Daron Yöndem Arama” rel=”search” type=”application/ opensearchdescription+xml” href=”http://daron.yon- de.com/ aramasaglayici.xml” /> Yukar›daki linki HTML sayfas›n›n Header bölümüne yerlefltirdi¤i- nizde art›k taray›c›lar›n sizin sitenizde arama sa¤lay›c›dan haberdar olacaklar. Link kodu içerisinde title de¤eri arama sa¤lay›c›n›z›n is- mini tan›mlarken rel ve type de¤erleri tam olarak örnekteki flekli ile de¤ifltirilmeden yaz›lmal›d›r. Taray›c› ancak bu flekilde söz konusu linkin bir arama sa¤lay›c›ya ait oldu¤unu anlayabilir. Son olarak href özelli¤ine ise arama sa¤lay›c›ya ait XML dosyas›n›n tam yolu verilir.
  • 43. WEB’DE YEN‹ TRENDLER 35 Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤i Art›k elimizde haz›r bir arama sa¤lay›c› bulundu¤una göre bu arama sa¤lay›c›ya görsel arama ifllevselli¤i eklemenin zaman› geldi. Afla¤›- da nedirtv.com sitesinde kullan›lan ve görsel arama ifllevselli¤i de su- nan arama sa¤lay›c›n›n XML OpenSearchDescription dosyas›n› in- celeyebilirsiniz. <?xml version=”1.0” encoding=”UTF-8”?> <OpenSearchDescription xmlns=”http://a9.com/- /spec/opensearch/1.1/”> <ShortName>NedirTV?com</ShortName> <Url type=”text/html” template=”http://www.ne- dirtv.com/Arama.aspx?A={searchTerms}”/> <Url type=”application/x-suggestions+xml” template= ”http://www.nedirtv.com/RssVideo.ashx?SS={search- Terms}”/> <Image height=”16” width=”16” type=”image/ icon”>http://www.nedirtv.com/favicon.ico</Image> </OpenSearchDescription> Bir önceki bölümde haz›rlad›¤›m›z arama sa¤lay›c›lar ile yukar›daki kod aras›nda fark› incelerseniz asl›nda sadece yeni bir Url tag›n›n aç›l- d›¤›n› ve bu sefer farkl› olarak type özelli¤in text/html de¤il de app- lication/x-suggestions+xml oldu¤unu görebilirsiniz. Söz konusu ta- n›mlama ile art›k arama sa¤lay›c›m›z kendi içerisinde bir de görsel arama veri kayna¤› tan›ml›yor. Böylece adresi verilmifl olan veri kay- na¤›ndan gerekli sonuçlar taray›c› taraf›ndan otomatik olarak çekile- rek kullan›c›ya gösterilebilecek. Tüm bu ifllevsellik içerisinde bizim tek yapmam›z gereken ek olarak gerekli veri kayna¤›n› do¤ru format- ta sa¤layacak olan sunucu tarafl› mekanizmay› haz›rlamak. <Url type=”application/x-suggestions+xml” template=”http://www.nedirtv.com/RssVideo.ashx?SS={se- archTerms}”/> Kodumuzun görsel arama ile ilgili k›sm›n› incelersek Url tag’›n›n ti- pinde veri kayna¤› olarak XML format›n›n belirtildi¤ini görebilirsi- niz. Veri kayna¤› adresi tan›mlan›rken de yine {searchTerms} para-
  • 44. 36 INTERNET EXPLORER 8 metresi ile kullan›c›n›n yazd›¤› arama hedef adrese eklenerek sunucu- ya gönderilebilecek. Böylece sunucu taraf›ndan bu parametre al›nabi- lir ve uygun XML veri kayna¤› oluflturulabilir. <Url type=”application/x-suggestions+json” template=” http://www.nedirtv.com/RssVideo.ashx?SS={searchTerms} E¤er isterseniz veri kayna¤› olarak JSON format›n› da kullanabilirsi- niz. JSON format›nda maalesef ki Görsel Arama sistemindeki arama sonuçlar›nda resim gösterimi gibi özellikler kullan›lam›yor. O nedenle ço¤unlukla Görsel Arama altyap›lar›nda XML format› tercih ediliyor. Sunucu Taraf›nda Neler Yapmal›? Görsel arama sistemi ile ilgili yap›lmas› gereken çal›flman›n büyük k›s- m› sunucu taraf›nda yap›l›yor. Bunun nedeni asl›nda çok basit. Open- SearchDescription dosyam›zda tan›mlam›fl oldu¤umuz veri kayna¤›n› taray›c›n›n anlayabilece¤im bir formatta sa¤lamam›z flart. Aksi halde kullan›c›ya Görsel Arama sonuçlar› göstermemiz mümkün olmayacak- t›r. Peki Internet Explorer 8 bizden nas›l bir formatta XML istiyor? <SearchSuggestion> <Query>aranan</Query> <Section title=”İlk Bölüm”> <Item> <Text>Sonuç 1</Text> <Description>Açıklama</Description> <Url>http://daron.yondem.com?id=3</Url> </Item> <Separator title=”Diğerleri”/> <Item> <Text>Sonuç 2</Text> <Description>Açıklama</Description> <Url>http://daron.yondem.com?id=6</Url> </Item> </Section> </SearchSuggestion> Yukar›daki kod içerisinde basit bir arama sonucunda Internet Explo- rer’a döndürmemiz gereken XML veri kayna¤›n›n yap›s›n› inceleyebi- lirsiniz. Sat›r sat›r XML kodlar›n›n incelemeden önce bu veri kayna-
  • 45. WEB’DE YEN‹ TRENDLER 37 ¤›n›n sadece iki sonuç döndüren örnek bir veri kayna¤› oldu¤unu be- lirtmekte fayda var. Normal flartlarda on adet sonuç gönderebilirsiniz. <Query>aranan</Query> Görsel arama için istemciye gönderdi¤imiz XML kodunun ilk sat›r›n- da Query tag› bulunuyor. Bu tag içerisinde sunucu taraf›na aranmak üzerine yollanan kelimeleri yazd›r›yoruz. Böylece Internet Explorer kendisine gelen veri ile talep etti¤i arama verisinin ayn› olup olmad›- ¤›n› kontrol edebiliyor. <Section title=”İlk Bölüm”> Section tag’lar› arama sonuçlar› gösterilirken sonuçlar› gruplamak amac›yla kullan›labilir. Her section’un (bölüm) bir de title bilgisi, yani bafll›¤› bulunuyor. Örnek bir kullan›m olarak herhangi bir arama- n›n sonucunda farkl› kategorilerinde ürünlerinin getirildi¤i bir e-tica- ret sitesi düflünülebilir. <Item> <Text>Sonuç 1</Text> <Description>Açıklama</Description> <Url>http://daron.yondem.com?id=3</Url> </Item> ‹flte geldik en can al›c› noktaya. Görsel arama ifllemi esnas›nda göste- rilecek olan her bir sonucu tan›mlamak için Item tag’lar› ile gerekli verileri XML içerisinde yazd›rmam›z flart. Her bir Item tag›n›n Text, Description ve Url elementlerini içermesi gerekiyor. Text ve Description sonuç listesinde gösterilirken Url ise söz konusu sonu- ca t›kland›¤›nda kullan›c›n›n yönlendirilece¤i adresi tan›ml›yor. E¤er arama sonuçlar›nda her bir ö¤e ile ilgili bir de ufak resim göstermek is- tiyorsan›z Item tag›lar› aras›na Image elementi de yerlefltirmelisiniz. <Item> <Text>Sonuç 1</Text> <Description>Açıklama</Description> <Url>http://daron.yondem.com?id=3</Url> <Image Source=http://daron.yondem.com/ resim.jpg alt=”Bu bir resimdir” width=”70”></Image> </Item>
  • 46. 38 INTERNET EXPLORER 8 Yukar›daki kod örne¤inde Item elementi içerisinde bir de Image ele- menti bulunuyor. Image elementi do¤rudan Source olarak bir resim dosyas›n›n tam yolunu içeriyor. Böylece Internet Explorer e¤er söz konusu resme eriflebilirse do¤rudan görsel arama sonuçlar›n› gösterir- ken resme de sol tarafta yer verecektir. Görsel Arama sonuçlar› ve resimli gösterim flekli. E¤er section taglar›, yani bölümler içerisinde ayr›ca sonuçlar› bir- birinden ay›rmak isterseniz. Separator elementini kullanabilirsiniz. Section elementindeki gibi Separator’lara da title (bafll›k) de¤e- ri verilebiliyor. <Separator title=”Diğerleri”/> Bahsetti¤imiz standartlara uygun flekilde gerekli veri taban› sorgular›- n› yapan ve uyumlu XML ç›kt›s› veren sunucu tarafl› kodlar› yazd›k- tan sonra arama sa¤lay›c› dosyan›z› eskisi gibi ayn› JScript kodlar› ile sitenizin ziyaretçilerine sunabilirsiniz. E¤er hedef taray›c›lar›n görsel arama sistemini destekliyorsa otomatik olarak sonuçlar gösterilecek- tir, aksi halde arama sa¤lay›c› sistemi eski taray›c›larda eski hali ile çal›flmaya devam eder.
  • 47. WEB’DE YEN‹ TRENDLER 39 Sunucuda Gerçek Zamanl› XML Üretimi Görsel arama sistemlerini kullanabilmek için en önemli nokta sunucu taraf›nda uygun XML ç›kt›s›n› oluflturabilmek. Bu çerçevede kitab›- m›z›n bu bölümünde sunucu taraf›nda veri kayna¤› olarak basit bir Array (Dizi) kullanarak gerekli XML kodunu nas›l yaratabilece¤imi- zi inceleyece¤iz. C# ve ASP.NET ile XML Üretmek ASP.NET taraf›nda özellikle .NET Framework 3.5 ile beraber LINQ’in de yard›m›m›za yetiflmesi XML üretimini ciddi anlamda ko- laylaflt›r›yor. Biz de kodlar›m›zda LINQ’ten faydalanarak h›zl› bir fle- kilde elimizde bulunan Generic bir List içerisinde veriyi XML’e dö- nüfltürece¤iz. XML kodunu istemciye do¤rudan gönderece¤imiz için HTML yara- tan bir Web Form yerine bize daha esnek bir yap› sunan Generic Handler’lar› kullanmam›zda fayda var. ‹lk olarak örne¤imizde kulla- naca¤›m›z veri kayna¤›n› yaratal›m. public class Sonuc { public string Text { get; set; } public string Description { get; set; } public string Url { get; set; } public string Photo { get; set; } } Veri kayna¤›m›zda her bir sonucu temsil edecek olan s›n›f›m›z› yuka- r›daki flekilde tan›mlad›ktan sonra Generic Handler çal›flt›r›ld›¤›nda hem örnek amaçl› olarak bir veri yarataca¤›z hem de o veri üzerinden sonras›nda da XML üretece¤iz. System.Collections.Generic.List<Sonuc> Veri = new System.Collections.Generic.List<Sonuc>(); for (int i = 0; i < 10; i++) { Veri.Add(new Sonuc() {
  • 48. 40 INTERNET EXPLORER 8 Text=”Sonuç” + i.ToString(), Description=”Açıklama” + i.ToString(), Photo=”Foto” + i.ToString() + “.jpg”, Url=”adres.aspx?ID=” + i.ToSt- ring() }); }; Veri kayna¤›m›z› yaratma ifllemini tamamlad›¤›m›zda göre art›k eli- mizde yer alan Veri ad›ndaki Generic List üzerinden yola ç›karak uy- gun XML kodunu yaratabiliriz. Bunun için olarak sayfan›n ç›kt›s›na ait Content Type’› Text/Xml olarak de¤ifltirelim. context.Response.ContentType = “text/xml”; Bir sonraki ad›mda XML doküman›m›z›n ana elementlerini yaratal›m ve içerisine veri, yani Item nesneleri eklenebilecek hale getirelim. XDocument XMLFeed = new XDocument(new XDeclaration(“1.0”, “utf-8”, “yes”)); XMLFeed.Add(new XElement(“SearchSuggestion”, new XElement(“Query”, context.Request. QueryString[“aranacak”].ToString()), new XElement(“Section”, new XElement(“Separator”, new XAttribute(“title”, “Bölüm 1”))))); fiimdi s›ra geldi elimizdeki Generic List içerisinde gezerek yukar›da yaratm›fl oldu¤umuz doküman içerisinde SearchSuggestion ele- menti içindeki Section elementinin içine uygun Item elementlerini yerlefltirmeye. for (int i = 0; i < Veri.Count; i++) { XMLFeed.Element(“SearchSuggestion”). Element(“Section”).Add( new XElement(“Item”,
  • 49. WEB’DE YEN‹ TRENDLER 41 new XElement(“Text”, Veri[i].Text), new XElement(“Image”, new XAttribute(“source”, Veri[i].Url), new XAttribute(“alt”, “Bir resim”), new XAttribute(“width”, “75”), new XAttribute(“height”, “50”)), new XElement(“Description”, Veri[i]. Description), new XElement(“Url”, Veri[i].Url))); } Gördü¤ünüz gibi yaratt›¤›m›z yeni XElement ve içerisinde XAttri- bute nesnelerine veri kayna¤› olarak For döngüsü içerisinde sürekli Veri ad›ndaki Generic List’i kullan›yoruz. Böylece istedi¤imiz XML DOM’u yaratabiliyoruz. Son olarak tüm bu XML’i istemciye gönde- rilmek üzere sayfaya yazd›rmam›z gerekiyor. context.Response.Write(XMLFeed.ToString()); Art›k Generic Handler dosyam›z kendisine gelecek olan aranacak querystring parametresine göre farkl› XML’ler döndürmek için haz›r durumda. Tek yapman›z gereken örne¤imizdeki Veri ad›ndaki List’i farkl› veri kaynaklar› ile de¤ifltirmek. VB ve ASP.NET ile XML Üretmek Bir önceki bölümde C# ile ASP.NET taraf›nda nas›l XML ç›kt›s› üre- tebilece¤imizi incelemifltik. C# ile VB aras›nda çok büyük farklar bu- lunmasa da XML konusunda VB 9.0 ile beraber gelen XML Literals yap›s›n› kullan›rsak XML yaratma ifllemi çok daha farkl› bir çehreye bürünebiliyor. O nedenle gelin C# ile yapt›¤›m›z örne¤i bir de VB ile yaparak nas›l ilerleyebilece¤imizi inceleyelim. Public Class Sonuc Private PText As String Public Property Text() As String Get Return PText End Get Set(ByVal value As String) PText = value
  • 50. 42 INTERNET EXPLORER 8 End Set End Property Private PDescription As String Public Property Description() As String Get Return PDescription End Get Set(ByVal value As String) PDescription = value End Set End Property Private PUrl As String Public Property Url() As String Get Return PUrl End Get Set(ByVal value As String) PUrl = value End Set End Property Private PPhoto As String Public Property Photo() As String Get Return PPHoto End Get Set(ByVal value As String) PPHoto = value End Set End Property End Class ‹lk aflamada yukar›daki flekli ile tüm veri kayna¤›m›z› üretirken kulla- naca¤›m›z Sonuc ad›ndaki s›n›f›m›z› tan›ml›yoruz. Bir sonraki ad›mda ise deneme amaçl› olarak kullanaca¤›m›z veri kayna¤›m›z› üretece¤iz.
  • 51. WEB’DE YEN‹ TRENDLER 43 Dim Veri As New System.Collections.Generic.List (Of Sonuc) For index As Integer = 1 To 10 Veri.Add(New Sonuc With {.Text = “Sonuç” & index, _ .Description = “Açıklama” & index, _ .Photo = “Photo” & index & “.jpg”, _ .Url = “adres. aspx?ID=” & index}) Next Yukar›daki kodumuz ile deneme amaçl› olarak kullanaca¤›m›z veri kayna¤›m›z› da yaratt›¤›m›za göre art›k s›ra geldi bu veri kayna¤› üze- rinden gerekli XML’i yaratmaya. ‹lk olarak sayfan›n Content Type’›n› do¤ru flekilde ayarlayal›m. Context.Response.ContentType = “text/xml” Son olarak XML yaratma ifllemlerine bafllayabiliriz. Daha önce de bah- setti¤im üzere VB art›k dil ile entegre XML yaz›m›n› destekliyor. O ne- denle C#’da oldu¤u gibi XElement vs nesneler ile u¤raflmaya gerek kalmadan do¤rudan istedi¤imiz XML format›n› dile dahil edebiliyoruz. Dim XMLFeed = <?xml version=”1.0” encoding=”utf-8”?> <SearchSuggestion xmlns=”http://opensearch.org/ searchsuggest2” version=”1”> <Query><%= Context.Request.QueryString(“ara- nacak”) %></Query> <Section title=”Bölüm 1”> <%= From inc In Veri Select <Item> <Text><%= inc.Text %></Text> <Description><%= inc.Description %></Description> <Url><%= inc.Url %></Url> <Image source=<%= inc.Photo %> alt=”Bilgi” width=”75” height=”75”/> </Item> %>
  • 52. 44 INTERNET EXPLORER 8 </Section> </SearchSuggestion> Kod içerisinde de görebilece¤iniz üzere do¤rudan XML kodlar› bir de- ¤iflkene eflitlenmifl durumda. Bu kodlar .NET içerisinde VB derleyicisi taraf›ndan derleme zaman›nda C#’da oldu¤u gibi XElement nesneleri- ne çevrilecektir. O nedenle herhangi bir performans farkl›l›¤› olmaya- cakt›r. Biz XML kodumuzu de¤iflkenimize eflitlerken bir de LINQ sor- gusu kulland›k. Böylece Veri ad›ndaki Generic List içerisinde kaç ta- ne kay›t varsa uygun flekilde Item XML nesnelerini de yaratm›fl olduk. Art›k XML kodumuzu sayfaya yazd›rabiliriz. Context.Response.Write(XMLFeed.ToString()) PHP ile XML Üretmek Windows Server 2008 ve IIS 7 ile beraber gelen FastCGI ile art›k Windows sunucu üzerinde PHP kullan›m› hatta ASP.NET ile entegre ortak Forms Authentication kullan›mlar› ve Session paylafl›mlar› gi- bi özelliklerin hayat›m›za girdi¤i bu günlerde sunucu taraf›nda PHP kullanman›z halinde de tabi ki Görsel Arama için uygun XML kodla- r›n› üretebilirsiniz. Bunun için örne¤imizde herkesin sunucusunda PHP DOM’un kurulu olup olmad›¤›ndan emin olmad›¤›m›z için PHP DOM kullanmak yerine standart String ifllemleri ile devam edece¤iz. header(‘Content-type: text/xml’); ‹lk olarak yukar›daki kodumuz ile sayfam›z›n Content Type ayar›n› yapal›m. Böylece taray›c› kendisine bir XML gönderildi¤ini rahatl›k- la anlayabilecektir. $items = array(); $items[] = array(‘text’ => ‘Sonuç 1’, ‘image’ => array (‘source’ => ‘http://x.com/resim1.jpg’, ‘alt’ => ‘bir resim’, ‘width’ => 75, ‘height’ => 60), ‘description’ => ‘Description 1!’, ‘url’ => ‘http://daron.yondem.com’);
  • 53. WEB’DE YEN‹ TRENDLER 45 $items[] = array(‘text’ => ‘Sonuç 2’, ‘image’ => array (‘source’ => ‘http://x.com/resim2.jpg’, ‘alt’ => ‘baska resim’, ‘width’ => 75, ‘height’ => 60), ‘description’ => ‘Description 2!’, ‘url’ => ‘http://daron.yondem.com’); $items[] = array(‘text’ => ‘Sonuç 3’, ‘image’ => array (‘source’ => ‘http://x.com/resim3.jpg’, ‘alt’ => ‘baska bir resim daha’, ‘width’ => 75, ‘height’ => 60), ‘description’ => ‘Description 3!’, ‘url’ => ‘http://daron.yondem.com’); Sonras›nda örne¤imizde kullanmak üzere yukar›daki gibi bir Array tan›mlayal›m. Böylece bir sonraki ad›mda bu dizi içerisindeki verile- ri kullanarak uygun XML ç›kt›s›n› yarataca¤›z. $output = “<SearchSuggestion>n”; $output .= “<Section>n”; $output .= “<Query>asp</Query>n”; $output .= “t<Separator title=”Bölüm 1” />n”; foreach( $items AS $item ) { $output .= “tt<Item>n”; $output .= “ttt<Text>”. $item[‘text’] .”</Text>n”; $output .= “ttt<Image source=””. $item[‘image’] [‘source’] .””n”; $output .= “ttt alt = ””. $item[‘image’][‘alt’] .””n”; $output .= “ttt width = ””. $item[‘image’] [‘width’] .””n”;
  • 54. 46 INTERNET EXPLORER 8 $output .= “ttt height = ””. $item[‘image’] [‘height’] .””n”; $output .= “ttt /> n”; $output .= “ttt<Description>”. $item[“description”] .”</Description> n”; $output .= “ttt<Url>”. $item[“url”] .”</Url>n”; $output .= “tt</Item>n”; } $output .= “</Section>n”; $output .= “</SearchSuggestion>n”; echo $output; Yukar›daki kod içerisinde de görebilece¤iniz üzere standart string birlefltirme ifllemleri ile XML kodumuzu yarat›yoruz. XML’imizin bafllang›ç ve sonunu belirledikten sonra orta k›s›mda da bir For dön- güsü ile elimizdeki diziyi gezerek uygun Item XML elementlerini ya- rat›yoruz. Bu flekilde yarat›lan bir XML kodu da Görsel Arama alt- yap›lar› taraf›ndan rahatl›kla kullan›labilir. Görsel Aramalar için JSON Veri Kayna¤› Görsel aramalar için bu bölüme kadar veri kayna¤› olarak XML kul- land›k. Bunun nedeni bir alternatif olarak JSON format› gelse de JSON içerisinde hem Image nesneleri hem de Separator kullanam›- yor olmam›z. E¤er tüm bu dezavantajlar›na ra¤men JSON kullanma- y› düflünüyorsan›z oluflturman›z gereken JSON veri kayna¤›n›n bir ör- ne¤ini afla¤›da inceleyebilirsiniz. [“aranan”, [“sonuc1”, “sonuc2”, “sonuc3”], [“aciklama 1”, “aciklama 2”, “aciklama3”], [“http://daron.yondem.com/1”, “ http://daron.yondem. com/2”, “ http://daron.yondem.com/3”]] Gördü¤ünüz gibi JSON içerisinde toplam üç sonuç döndüren kodu- muzun bafl›nda yine Internet Explorer taraf›ndan parametre olarak gönderilen arama kelimeleri bulunuyor.
  • 55. WEB’DE YEN‹ TRENDLER 47 Web Dilimleri Nas›l Haz›rlan›r Web dilimleri kullan›c›lar›n sitelerimizi takip edebilmeleri aç›s›ndan ilginç ifllevsellikler sa¤layabiliyor ve bu ifllemi çok kolaylaflt›rabili- yorlar. Bu çerçevede web dilimlerinin oluflturulmas› ile ilgili teknik aç›dan birkaç farkl› yol var. Bu bölümümüzde her farkl› yolu avantaj ve dezavantajlar›n› da de¤erlendirerek inceleyece¤iz. <div class=”hslice” id=”Urun1”> <h1 class=”entry-title”> Bu bir ürün!</h1> <div class=”entry-content”> <p> Ürün bilgisi burada.</p> </div> </div> Yukar›da gördü¤ünüz basit HTML kodu herhangi bir web sayfas›nda Web Slice’› tan›ml›yor. Web sayfalar› içerisinde Web Slice’lar tama- men microformatlar ile tan›mlan›r, normal flartlarda teknik olarak bir ifllevselli¤i olsun veya olmas›n kodlar›n taray›c› için farkl› anlamlar› vard›r. Örne¤in class özelli¤ine hslice alan bir HTML elementi ta- ray›c› için bir Web Slice tan›m› anlam›na gelir. Normalde bizler class de¤erlerine CSS s›n›flar›n› atar›z ve bu özelli¤i tasar›msal ayarlamalar için kullan›r›z, oysa Internet Explorer 8 için hslice ad›ndaki class de¤erinin çok daha farkl› bir önemi var. Tabi di¤er yandan e¤er isterse web tasar›mc› veya programc› hslice ad›nda bir CSS s›n›f› yaratarak bu durumdan görsel anlamda da faydalanabilir. Internet Explorer 8 için bir Web Slice tan›mlarken ilk olarak web di- liminin ana gövdesine hslice ismi ile bir class de¤eri vermelisiniz. Sonras›nda bu Web Dilimine ait gövdeyi teflkil edecek olan HTML elementinin kesinlikle sayfa içerisinde tekil bir ID de¤eri olmal›d›r. Buradaki ID de¤erinin önemi çok büyük çünkü Internet Explorer say- fa içerisindeki Web Dilimleri’ni bu ID üzerinden tan›yacakt›r. ‹leriki ad›mlarda da bahsedece¤imiz üzere kullan›c›lar›n bu web dilimini ke- sip taray›c›lar›na ald›ktan sonra e¤er söz konusu web diliminin ID bil- gisini de¤ifltirirseniz daha önce kesip al›nan dilimler ile bu dilim ara- s›ndaki iliflki kopacakt›r ve kullan›c›lar art›k kesmifl olduklar› dilimle ilgili güncellemeleri takip edemeyecektir.
  • 56. 48 INTERNET EXPLORER 8 Son olarak basit bir Web Slice içerisinde bir de entry-content ve entry-title bulunmas› gerekir. Yine farkl› HTML elementlerine verilen class de¤erleri ile tan›mlanana bu özelliklerden entry-title bir web diliminin kullan›c›lar›n taraf›ndan taray›c›ya entegre edilmesi halinde araç çubu¤unda gösterilecek bafll›¤›n› tan›mlarken entry- content ise web diliminin ana içeri¤i tafl›r. Her iki de¤eri de class olarak alm›fl olan HTML elementleri içerisinde farkl› HTML kodlar› yerlefltirilebilir. Çal›flma Yap›s› Internet Explorer açt›¤› her sayfada hslice ile iflaretlenmifl HTML elementlerini arar ve iç yap›s› uygun olanlar› otomatik olarak birer web dilimi olarak kullan›c›ya gösterir. Kullan›c› bu web dilimini ta- ray›c›s›na ekledikten sonra kullan›c› veya programc› taraf›ndan ta- n›mlanm›fl aral›klar ile Internet Explorer web dilimini güncelleye- cektir. Bir önceki bölümde kendi içerisinde entry-content içeren bir Web Dilimi örne¤i gördük. E¤er herhangi bir web dilimi kendi içeri¤ini do¤rudan HTML kodlar› olarak kendi ana elementi içerisinde entry- content içinde tan›mlarsa Internet Explorer söz konusu web dilimi- nin bulundu¤u sayfay› belirli aral›klarla istemciye indirir. Sonras›nda gerekli parsing ifllemlerini de yapan Internet Explorer web dilimini ID’si üzerinden HTML kodunda bulup içerisindeki entry-content’te de¤ifliklik var ise kullan›c›y› uyar›r. Bu yap› programlama aç›s›ndan en kolay haz›rlanabilen yap›d›r. Tek yapma- n›z gereken sayfan›zda dilimlenmesini istedi¤ini bölümleri tespit edip gerekli yerlere hslice, entry-content ve entry-title CSS s›n›flar›n› atamak. Di¤er yandan farkl› senaryolarda daha esnek yap›lar oluflturabilmek ad›na Web Dilimler’inin içeriklerinin farkl› kaynaklardan çekilebil- mesi de mümkün. Seçeneklerden ilki web diliminin içeri¤ini ayr› bir web sayfas›ndan almak. D›splay Source De¤iflikli¤i Yaratt›¤›n›z bir web diliminin taray›c›n›n üzerinde aç›lan k›sm›n› ha- rici olarak tan›mlamak isteyebilirsiniz. Böyle bir talep asl›nda çok ba- sit bir nedeni olabilir. Web diliminizin kesildi¤i yerdeki hali ile tara- y›c›da kesilmifl halinin farkl› tasar›mlar ile gözükmesini isteyebilirsi-
  • 57. WEB’DE YEN‹ TRENDLER 49 niz. Bu gibi durumlarda herhangi bir web dilimi tan›mlarken web di- limi kesildikten sonra taray›c›n›n hangi veri kayna¤›ndan içerik taki- bi yapabilece¤ini belirleyebilirsiniz. <div class=”hslice” id=”Urun1”> <h1 class=”entry-title”> Yeni Ürün</h1> <div class=”entry-content” href=”http://daron. yondem.com/baska.aspx?ID=2”> </div> </div> Yukar›daki kod içerisinde her zamanki gibi yine entry-content class de¤erine sahip bir elementimiz var fakat bu sefer söz konusu elementin bir de href de¤eri bulunuyor. Bir DIV elementinin HREF özelli¤ine sa- hip olmas› normal flartlarda hiçbir fley ifade etmez. Oysa Internet Exp- lorer 8 için bu çok anlaml› bir iflaretleme. Entry-content’e verilen href de¤erinde web diliminin içeri¤ini saklayan baflka bir sayfan›n ad- resi yer al›yor. Bu web dilimi flu anda bulundu¤u sayfada farkl› flekil- lerde gözükebilse de kullan›c› taraf›ndan taray›c›ya eklendi¤inde tara- y›c› de¤ifliklikler için href de¤erinde verilmifl sayfay› kontrol edecek ve söz konusu sayfadaki içeri¤i kullan›c›ya gösterecektir. Böylece ana sayfada yer alan web dilimi ve görsellik bozulmadan taray›c›n›n araç çubu¤unda gözüken web dilimi tasar›m› tamamen özellefltirilebilir. Farkl› Web Dilimleri’ni Birbirine Ba¤lamak Baz› durumlarda farkl› web dilimleri için ortak bir kaynak kullanmak veya sitenizin farkl› yerlerinden kesilebilir flekilde gözükse de asl›nda ayn› web dilimine yönlendirme yapmak isteyebilirsiniz. Bu gibi du- rumlarda yaratt›¤›n›z yeni bir web dilimine feedurl verebilirsiniz. <div class=”hslice” id=”Urun1”> <div class=”entry-title”> Urun Adı </div> <a rel=”feedurl” href=”http://daron.yondem.com/ baska.aspx#Urun2”></a> </div>
  • 58. 50 INTERNET EXPLORER 8 Yukar›daki kod ile tan›mlanan bir web dilimi asl›nda baska.aspx say- fas›ndaki ID’si Urun2 olan web dilimini hedef göstermektedir. Gör- dü¤ünüz a tag’› ile koyulan link içerisinde herhangi bir yaz› yaz›lma- d›¤› için kullan›c›lar taraf›ndan söz konusu link alg›lanmayacak fakat Internet Explorer linkin rel ve href özelliklerinden yola ç›karak ge- rekli ifllemleri yapabilecektir. Web Dilimi’ne Kaynak Olarak RSS Kullanmak Bir web diliminin veri kayna¤›n› özellefltirme yolunda gidilebilecek son nokta olarak RSS XML kaynaklar›ndan bahsedilebilir. Normal flartlarda bir RSS içerisinde birden çok Item tag’› bulunur. Oysa bir web dilimi için tek bir Item yeterlidir. Internet Explorer RSS kayna- ¤› içerisinden her zaman ilk Item’› alarak içerisindeki HTML’i araç çubu¤unda kesilmifl bir web dilimi içerisinde gösterecektir. <div class=”hslice” id=”Urun1”> <div class=”entry-title”> Ürün Adı </div> <a rel=”feedurl” href=”/rssfeed.xml”></a> </div> Yukar›daki gördü¤ünüz örnek Web Dilimi kendi kayna¤›n› rssfe- ed.xml ad›nda bir dosya olarak tan›ml›yor. Dikkat ederseniz bu web di- liminin herhangi bir entry-content’i yok. Rel özelli¤i feedurl olarak atanm›fl a tag›n›n href özelli¤ine hedef veri kayna¤›n›n adresi yerlefltirilmifl durumda. Gelin bir de h›zl›ca RSS’in yap›s›na göz atal›m. <?xml version=”1.0” encoding=”utf-8” ?> <rss version=”2.0”> <channel> <title>Web Dilimi RSS</title> <ttl>120</ttl> <item> <title>Ürün Adı</title> <description>HTML &lt;b&gt;kodları&lt;/b&gt; kullanılabilir</description> </item>
  • 59. WEB’DE YEN‹ TRENDLER 51 </channel> </rss> RSS kayna¤› içerisinde sadece bir ITEM bulunuyor. Söz konusu Item’›n title de¤eri Internet Explorer içerisinde araç çubu¤unda gö- zükecekken description de¤eri ise Web Dilimi’nin içeri¤ini belir- leyecektir. Son olarak ttl taglar› aras›ndaki de¤er ise bu web dilimi- nin ne kadar sürede bir istemci taraf›nda kontrol edilmesi gerekti¤ini belirler. TTL (Time To Live) de¤eri olarak verilebilecek en düflük de- ¤er 15’dir (dakika). <div class=”hslice” id=”Urun2”> <h1 class=”entry-title”> Urun Adi </h1> <div class=”entry-content”> <p> Ürün açıklaması.</p> <div class=”ttl” style=”display: none;”> 15</div> </div> </div> E¤er web diliminiz harici RSS kayna¤› kullanmayacaksa TTL de¤eri- ni HTML kodu içerisinde de yukar›daki gibi tan›mlayabilirsiniz. Class özelli¤ine ttl de¤eri verilen DIV elementi içerisinde de¤erin ekranda gözükmemesi için elementin CSS stil özelliklerinden disp- lay özelli¤i none olarak de¤ifltirilebilir. WEB D‹L‹MLER‹NE D‹NAM‹K RSS NOT Görsel Arama bölümümüzde inceledi¤imiz üzere hem ASP.NET hem de PHP ile dinamik XML üretimi kolayca yap›labiliyor. Bu çerçevede harici RSS kaynaklar›na ba¤l› web dilimlerinin RSS kaynaklar› da özünde birer XML dosyas› oldu¤u için bu kaynaklar da rahatl›kla sunucu taraf›nda di- namik olarak oluflturulabilir. Böylece kullan›c›lar çok daha bir flekilde web sitenizi takip edebilirler.