Daron Yöndem - ie8 Ebook Tr

Daron Yöndem

Hýzlý Kolay ve Daha Güvenli!

KODLABwww.kodlab.com

Daron Yöndem



Daron Yöndem



Daron Yöndem



Daron Yöndem



düðüm

Daron Yöndem



Daron Yöndem



IE8Daron Yöndem



IE8Daron Yöndem



IE8

Daron Yöndem



IE8Daron Yöndem

IE8



sýrt 5-50

Daron Yöndem



IE8.Son kullanýcýlarýn gözünden IE 8 yenilikleri

.Web Tasarýmcýlar için notlar

.Web Dilimleri

.Görsel Arama Altyapýlarý

.Hýzlandýrýcýlar

.Yazýlým Geliþtiricilere Araçlar

Internet Explorer kendi geçmiþine perde çeken farklýlýklarla dolu yepyeni bir sürüm ile bu sefer hem son kullanýcýlarýn, hem tasarýmcýlarýn hem de yazýlým geliþtiricilerin hayatlarýný deðiþtirecek güçte yenilikler ile karþýmýza çýkýyor. HTML 5 gibi yeni standartlarýn uygulanmasýndan baþlayarak Web Dilimleri, Hýzlandýrýcýlar gibi eklenti altyapýlarýna kadar bir çok parlak özelliðin bulunduðu Internet Explorer 8 tüm gücü ve detaylarý ile kitap içerisinde sizi bekliyor.

DEVELOAD Yazýlým kurucusu Daron Yöndem Microsoft tarafýndan 2008 ve 2009 yýllarýnda ASP.NET alanýnda Most Valuable Professional olarak seçilmiþtir. Uluslararasý bir konuþmacý olarak Daron Yöndem ayný zamanda Microsoft Regional Director ünvanýna sahiptir. Türkiye’de iki kitabý olan Daron Yöndem, International .NET Assocation’da Türkiye Baþkanlýðý ve Ortadoðu Afrika bölgesi konuþmacý ofisi baþkanlýðý yapmaktadýr. Kendisine http://daron.yondem.com/tr/ adresinden blogundan ulaþabilirsiniz.

Daron YÖNDEM

KO

DLA

BD

aro

n Y

ön

de

m


Daron Yöndem





.Web Dilimleri






Daron YÖNDEMK

OD

LA

BD

aro

n Y

ön

de

m


INTERNETEXPLORER 8

Yay›n Da¤›t›m Yaz›l›m ve E¤itim

Hizmetleri San. ve Tic. Ltd. fiti.

daronyöndem

EXPLORER-kunye 3/14/09 10:21 PM Page i

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: [email protected] web: www.kodlab.com

EXPLORER-kunye 3/14/09 10:21 PM Page ii

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¤uAfrika bölgesi konuflmacı ofisi baflkanlı¤ı yapmaktadır. Kendisinehttp://daron.yondem.com/tr/ adresinden blogundan ulaflabilirsiniz.

EXPLORER-kunye 3/14/09 10:21 PM Page iii

ÖnsözBundan 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 olurda 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›ndakitap 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 kibunlar›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 [email protected] 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 sizinde ücretsiz olarak dostlar›n›za ister dijital ister bask› kopyas›n› al›pgönderebilece¤inizi belirtmek isterim.

Görüflmek üzere...

Daron YöndemMicrosoft Regional Director, MVP

v

EXPLORER-kunye 3/14/09 10:21 PM Page v

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 enyeni 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 özelyeni 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

vi

EXPLORER-kunye 3/14/09 10:21 PM Page vi

ÖNSÖZ

1 NEDEN INTERNET EXPLORER 8? 1Performans 1

Ayn› Anda 2 Yerine 6 Ba¤lant› 2Script Performanslar› 2

Kolay Kullan›m 2Yeni Trendler: Accelerator, Web Slice, Search Suggestion 2Güvenlik 3

Yaz›l›m Gelifltirici ve Tasar›mc› Dostu 3Sistem Yöneticileri 4

2 INTERNET EXPLORER 8 DEVR‹M‹ 7Ekstra Güvenlik 8

InPrivate Pencereleri 8InPrivate Blocing 9Phishing Korumas› ve SmartScreen 9

Kolay Kullan›m 11ActiveX Yüklemeleri 11Sekme Renklendirme 12Ak›ll› Adres Çubu¤u 14

Yeni Trendler 15H›zland›r›c› (Accelerator) 15Görsel Arama (Visual Search) 18Web Slice 20

3 WEB’DE YEN‹ TRENDLER 25Bir H›zland›r›c› (Accelerator) Nas›l haz›rlan›r? 25Son Ad›mlar... 30Art›k Haz›r›z 32Görsel Arama Nas›l Haz›rlan›r? 32

Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤i 35Sunucu Taraf›nda Neler Yapmal›? 36Sunucuda Gerçek Zamanl› XML Üretimi 39

C# ve ASP.NET ile XML Üretmek 39VB ve ASP.NET ile XML Üretmek 41

‹Ç‹NDEK‹LER

EXPLORER-icindekiler 3/14/09 10:22 PM Page vii

PHP ile XML Üretmek 44Görsel Aramalar için JSON Veri Kayna¤› 46

Web Dilimleri Nas›l Haz›rlan›r 47Çal›flma Yap›s› 48Display Source De¤iflikli¤i 48Farkl› Web Dilimleri’ni Birbirine Ba¤lamak 50Web Dilimi’ne Kaynak Olarak RSS Kullanmak 50

4 YAZILIM GEL‹fiT‹R‹C‹LER ‹Ç‹N INTERNET EXPLORER 8 53JavaScript Yenilikleri 53

tostaticHTML Metodu 53Dahili JSON S›n›flar›... 55

AJAX Navigasyon 57Online ve Offline Çal›flma Yap›s› 58Cross Domain Request Nesnesi 60DOM Veri Ambar› 64

Session Storage 64Local Storage 65

Yaz›l›mc› Araçlar› 65CSS ve HTML DOM Gerçek Zamanl› Düzenleme 65JavaScript Debuging 67Profiler ile Optimizasyon 68Image Optimizasyonu 69Pratik Araçlar 70

Önce Güvenlik 71Data Execution Prevention 71Kullan›c›ya Özel ActiveX 72Siteye Özel ActiveX 73XSS Sald›r›lar› 74MIME TYPE Kararlar› 75O 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

INTERNET EXPLORER 8viii

EXPLORER-icindekiler 3/14/09 10:22 PM Page viii

Taray›c› savafllar› gün geçtikçe k›z›fl›yor. Global anlamda kullan›moranlar›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¤›rtoplar›ndan biri diyebiliriz. Peki, neden Internet Explorer 8?

PerformansBir 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 arkaplanda ayr› birer uygulama olarak çal›fl›yor olmas›. Böylece tek biruygulama içerisinde thread say›s› azalt›labilirken sekmelerin birbirin-den ba¤›ms›z olarak hata almas› halinde birbirlerini kurtarabilmelerigibi 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

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.

NOT

Neden InternetExplorer 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

1

EXPLORER-01 3/14/09 10:27 PM Page 1

Ayn› anda 2 yerine 6 ba¤lant›Y›llar önce, 1999 senesinde, HTTP 1.1 standartlar›na göre taray›c›lar›nayn› anda bir sunucuya sadece iki ba¤lant› kurabileceklerine dair birkural belirlenmifl. Aradan geçen 9 y›lda art›k bu s›n›r›n günümüz geniflbant internet altyap›s›nda çok da anlaml› olmad›¤›n› söyleyebiliriz. IE8.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; IE8.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 devazgeç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›onInternet 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çindetayl› olarak inceleyece¤imiz Accelerator, Web Slice ve SearchSuggestion yap›lar› sizi Internet Explorer’a gönülden ba¤layacak. Ac-celerator’lar ile sürekli internette gezinirken tekrarlad›¤›n›z ifllemlerinfark›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. SearchSuggestion sistemini gördü¤ünüzde arad›¤›n›z› bulman›n ne kadar ko-

INTERNET EXPLORER 82


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

GüvenlikInPrivate taray›c› özelli¤i ile tan›flt›¤›n›zda gönlünüz o kadar rahatedecek ki kulland›¤›n›z bilgisayarlarda baflka bir internet taray›c› ara-mayacaks›n›z. Sadece size özel bir Internet Explorer oturumu düflününki 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 yenilikvar. 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 veJavaScript yenilikleri, Font Embedding düzenlemeleri ile art›k IE8.0’da çal›flacak web sitelerini tasarlamak ve programlamak çok dahazevkli olacakt›r. Kitab›m›z›n özellikle yaz›l›mc›lara ve tasar›mc›lara

NEDEN INTERNET EXPLORER 8? 3

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


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.

Sistem YöneticileriBirçok yeni özellik geliyor, tüm bunlar›n tabi ki güvenlik taraf›nda dakontrol 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 IE8.0 yükledikten sonra kullanabilirsiniz, bunun için de toplu yüklemeseçeneklerinin yan› s›ra kendinize özel IE8.0 yükleme paketleri olufl-turman›z için gerekli detaylar› da kitab›m›zda inceliyoruz.


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

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.

NOT


‹flte tüm bu yenilikler ve eflsiz kolayl›klar nedeniyle Internet Explorer8.0! Daha fazlas› için sayfay› çevirin...

NEDEN INTERNET EXPLORER 8? 5

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




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.0sü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üvenlikNormal hayatta oldu¤u gibi dijital hayatta da her fleyin yan› s›ra ençok önem verdi¤imiz detaylardan biri de Güvenlik konusu. Özellikleinternette gezerken bizim bilgimiz dahilinde olsun veya olmas›n sis-temimizin güvenli¤i ile ilgili riskler belki de can›m›z› en çok s›kannoktalar aras›nda.

Bir internet taray›c›n›n tüm “hayat›m›z› kolaylaflt›ran” özelliklerinibir kenara koyup söz konusu taray›c›y› kullan›p kullanmayaca¤›m›zkarar›n› belki de sadece sa¤lad›¤› güvenlik özellikleri çerçevesindebile 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 PencereleriBir 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

Internet Explorer 8 DevrimiEkstra Güvenlik 8

InPrivate Pencereleri 8

InPrivate Blocing 9

Phishing Korumas› veSmartScreen 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

2


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›lanayarlarda olmamas› gerekiyor. Sadece istedi¤imizde böyle geçici birpencere oluflturabilmeliyiz.

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 ileilgili 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 pencerelerini özellikle internet cafe gibi ortamlarda hat›rla-mak ve kendi bilgisayar›n›zda olmaman›za ra¤men özel bilgilerinizigirmek veya izlemek zorunda oldu¤unuz durumlarda s›kça kullan-makta güvenlik aç›s›ndan büyük fayda olacakt›r.


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

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


InPr›vate Block›ngDo¤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¤igüvenlik aç›¤›n› anlatmak geçiyor.

Varsayal›m ki birinci.com sitesini geziyoruz ve bu esnada sinsi.comsitesinden bir JavaScript dosyas› ça¤r›ld›. Art›k sinsi.com bizi tan›-yor, orada da bir oturumumuz var. Bir sonraki ad›mda ikinci.comad›nda bir siteyi ziyaret ettik ve flans eseri bu sitede de yine sin-si.com’dan ayn› JavaScript dosyas› eklenmifl. An itibari ile sinsi.combizim ikinci.com’a gelmeden önce hangi sitede bulundu¤umuzu bili-yor. Hatta bu senaryo daha da uzat›labilir ve ayn› taray›c› oturumuiçerisinde 20 önceki siteye kadar nereleri gezdi¤imiz sinsi.com tara-f›ndan takip ediliyor olabilir. Tabi bunlar›n hepsinin gerçekleflmesiiç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’leride aktif edebiliyor.

Ph›sh›ng Korumas› ve SmartScreenPhishing 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 teknikolarak 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›ndankontrol edilebilecek baflka noktalar var.

INTERNET EXPLORER 8 DEVR‹M‹ 9


Ö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 konusundakullan›c›y› uyararak içerisine düflülebilecek kötü durumlar› azaltmay›hedefliyor.


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

EXPLORER-02 3/14/09 10:28 PM Page 10

Kolay Kullan›mBilgisayar bafl›nda bulundu¤umuz süre boyunca en çok kulland›¤›m›zyaz›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 vedetaylarda sakl› olan ufak ama bir o kadar da de¤erli özelliklere gözataca¤›z. Esas sürprizimi bölümün sonuna sakl›yorum.

Act›veX YüklemeleriActiveX yüklemeleri için “bafl›m›z›n belalar›” desek herhalde hiç deyanl›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 sistemyöneticilerinin ve programc›lar›n da s›k›nt›lar› aras›nda.


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

EXPLORER-02 3/14/09 10:28 PM Page 11

Özellikle Vista ile beraber gelen UAC (User Account Control) sonra-s›nda bu dertler gergin senaryolara sebep olabiliyor. Ama art›k her fleyde¤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 isteyipistemediklerini seçebilecekler. Bu seçim flu anki Internet Explorer içe-risinde ActiveX kontrolleri için gelen uyar› mekanizmas›na dahil edil-mifl durumda.

Sekme RenklendirmeInternet Explorer 7 ile beraber internet taray›c›s› içerisinde sekmeler(tabs) kullanmaya iyice al›flt›k. Fakat bazen çok say›da sekme aç›ncahangi 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 devamediyorsunuz. Peki, hangi sekmeler hangi araman›zla iliflkiliydi?


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

EXPLORER-02 3/14/09 10:28 PM Page 12

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›dafarkl› 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?


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

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

EXPLORER-02 3/14/09 10:28 PM Page 13

Ak›ll› Adres Çubu¤uTaray›c› içerisindeki adres çubu¤u bir taray›c›da en çok kullan›lanyerlerden biridir. Sürekli adres çubu¤una bir adres yazar›z, daha önceyazd›¤›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 Suggestionkonusunda 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 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.


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

EXPLORER-02 3/14/09 10:28 PM Page 14

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 XPSdosyalar› da olabilir. Bu gibi durumlarda adres çubu¤undan diskiniç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çerisindeIntellisense yap›s›na benzeyen disk gezgini.

Yeni TrendlerGeldik 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, webikullanma 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 venas›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›ndafark›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 aramamotorlar›n› kullanmak, kiflisel olarak düflündü¤ümde benim en s›kkulland›¤›m servislerden biri de harita servisleri. Bir web sitesinde gör-dü¤üm adresin tam olarak nerede oldu¤u? Oraya nas›l gidebilece¤im?


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

EXPLORER-02 3/14/09 10:28 PM Page 15

Baflka neler olabilir düflünelim... Sözlük hizmetleri de bu servisleraras›nda yerini alabilir, bilmedi¤im bir kelimeyi h›zl› bir flekildeTü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 veyabilgiyi 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 aramasonucu bazen de farkl› dilde bir kelimenin aç›klamas› olabilir. Tüm buörneklerde asl›nda hep ayn› mekanizma çal›fl›yor ve bu ifllemleri bizdefalarca ayn› flekilde tekrarl›yoruz. ‹flte Accelerator’lar bu noktadadevreye girip tekrarlad›¤›m›z bu süreçleri k›saltmay› hedefliyor.

Accelerator’lara ulaflmak için Internet Explorer içerisinde herhangibir 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çinbirer komut göreceksiniz. Accelerator’lar›n baz›lar› sadece içerisindebulunulan 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 adresido¤rudan haritada görebiliyoruz.

EXPLORER-02 3/14/09 10:28 PM Page 16

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› ancakAccelerator 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.

Herhangi bir Accelerator ilk defa sisteme yüklendi¤inde do¤rudanmenülerde yerini almaz. More Accelerators menüsüne yerleflen yeniAccelerator’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.


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

EXPLORER-02 3/14/09 10:28 PM Page 17

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ü¤mesinet›klayabilirler. Ayn› flekilde ana menüde yer alan bir Accelerator’› altmenü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 aramamotoruna 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›lararamak istedikleri kelimeleri taray›c› içerisinde yazarken otomatikolarak olas› sonuçlar› yine taray›c› ile entegre olarak göstermek.


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

EXPLORER-02 3/14/09 10:28 PM Page 18

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 aramamotorunun 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.

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 deFind 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.


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

EXPLORER-02 3/14/09 10:28 PM Page 19

“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¤inizbir Provider yap›s›n› Remove dü¤mesi ile sistemden silebilirsiniz de.

Web Sl›ceBenim en favori özelli¤ime geldik. Web Slice’lar›n mant›¤›nda birweb 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 istertüm sayfay› yeniden inceleyebiliyorsunuz.

Tabi sanal ortamda bir fleyleri kesmek pek mümkün de¤il, o nedenletam 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 durumunusü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 etmekiçin uygun olsa da maalesef aç›k artt›rma sitesindeki örnek için pekkolay 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ç-


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

EXPLORER-02 3/14/09 10:28 PM Page 20

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 birsonraki bölümde de¤inece¤iz. fiimdilik hali haz›rda bu deste¤i verenbir site ile yola ç›karak Web Slice’lar›n kullan›m›na göz atal›m.

E¤er bir web sitesinde takip edebilece¤iniz, kesip alabilece¤iniz birWeb 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örselliktabi ki farkl› web sitelerinde tasar›mc›lar taraf›ndan farkl› flekillerdede¤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 biruyar› kutucu¤u gösterecektir.


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

EXPLORER-02 3/14/09 10:28 PM Page 21

Kesip alma ifllemi tamamland›¤›nda art›k Web Slice’›n›z InternetExplorer’›n araç çubu¤unda yerini alm›fl olacakt›r. ‹stedi¤iniz zamanWeb 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 kontroledecek 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’›nkendi penceresinin sol alt›nda üç adet dü¤me yer alabilir. Bunlardansa¤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ü¤meWeb 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üresonra kullan›mdan kalkaca¤›na dair bilgiyi sa¤layacakt›r.


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

EXPLORER-02 3/14/09 10:28 PM Page 22

Bir Web Slice’›n araç çubu¤undaki bafll›¤›na sa¤ t›klad›¤›n›zda gelenmenüden Properties komutunu verirseniz karfl›n›za söz konusu WebSlice 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üredebir internetteki kaynaktan yenilenmesi gerekti¤ini ayarlayabilirsiniz.

Herhangi bir Web Slice’› silmek için yine sa¤ tufl ile Web Slice’›naraç çubu¤undaki bafll›¤›na t›klayarak gelen menüden Delete komu-tunu verebilirsiniz.


Web Slice’›m›zaözel ayarlar.

EXPLORER-02 3/14/09 10:28 PM Page 23


EXPLORER-02 3/14/09 10:28 PM Page 24

Internet Explorer 8 ile beraber gelen yeniliklere h›zl› bir flekilde gözatt›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 deyaz›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 vehaz›rlanmas› ile ilgili detaylar ile bölümümüzü sonland›raca¤›z. Gelinh›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›nyaz›m standard› Microsoft taraf›ndan belirlenmifl olup OpenService-Description olarak geçer. Bu standarda uygun yaz›lan bir XML koduile 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-

Web’de Yeni TrendlerBir 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 veArama 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

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 49

Farkl› Web Dilimleri’niBirbirine Ba¤lamak 50

Web Dilimi’ne Kaynak Olarak RSS Kullanmak 50

3

EXPLORER-03 3/14/09 10:45 PM Page 25

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 kodveya 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 birveriyi 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.

EXPLORER-03 3/14/09 10:45 PM Page 26

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 olaniki alternatiften biri kullan›c›n›n taray›c› içerisinde sa¤ tufla t›klay›ncaeriflebilece¤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 dikkatedersek asl›nda farkl› durumlarda h›zland›r›c›n›n nas›l ifllemler yapaca-¤›n› ayr› ayr› belirtti¤imizi görebiliriz. Standart olarak execute actiontüm h›zland›r›c›larda bulunmas› zorunlu elementlerden biri olsa da herh›zland›r›c› preview action ile bir ön izleme ekran› sa¤lamak zorundade¤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›zolmayacakt›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>

WEB’DE YEN‹ TRENDLER 27

EXPLORER-03 3/14/09 10:45 PM Page 27

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› sadecetaray›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¤inelink 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 previewaction’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›ziçin yap›lacak ifllem bir POST veya GET ifllemi olabilir. Bunu hemenmethod özelli¤inde belirtiyoruz. E¤er POST seçene¤ini seçerseniz tümparametreler 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¤eribulunmak zorunda. Bu de¤eri value özelli¤i olarak tan›mlarken ister-seniz elle sabit de¤erler girebilece¤iniz gibi taray›c› taraf›nda çal›flmazaman›nda belirlenecek dinamik de¤erleri de karfl› sunucuya göndere-bilirsiniz.


EXPLORER-03 3/14/09 10:45 PM Page 28

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 sunucumuzdakiuygulama 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.

Tüm bu ifllemleri tamamlad›ktan sonra ayn› parametreleri kullanarakbir ö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 executeaction 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-


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.

EXPLORER-03 3/14/09 10:45 PM Page 29

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

Son Ad›mlar...H›zland›r›c›m›zla ilgili tüm ifllevselliklere karar verdi¤imize göre sonolarak 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”>


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 tekfley 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›ntercihine 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’];

NOT

EXPLORER-03 3/14/09 10:45 PM Page 30

<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 vermemizgerekiyor. 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ündeberaber 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›dabulunmak istiyorum homePageUrl olsun icon adresi olsun tüm bu ad-


EXPLORER-03 3/14/09 10:45 PM Page 31

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

Art›k Haz›r›zH›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üklemekiçin sadece openServiceDescription XML dosyas›n›n web sunucusuüzerinden ulafl›labilir bir konu koyman›z yeterli olacakt›r. Örne¤inweb 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›naulafl›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›klayarakbilgisayarlar›na yükleyecekler? ‹flte bu noktada karar sizin. Afla¤›dakiJScript 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 AramaSa¤lay›c› dosyan›z›n bulunmas› gerekiyor. Görsel Arama sistemi es-ki Arama Sa¤lay›c› sisteminin üzerine infla edilmifl durumda oldu¤uiç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/”>


EXPLORER-03 3/14/09 10:45 PM Page 32

<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 aramasa¤lay›c›lar çok say›da taray›c› taraf›ndan destekleniyor. Yukar›dakiflekilde 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 flablonunuincelerseniz 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 uygulamaile 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 birikon dosyas› da afla¤›daki flekilde openSearchDescription dosyas›naeklenir.

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


EXPLORER-03 3/14/09 10:45 PM Page 33

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 sitemizeyerlefltirmek 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 aitayarlar›n bulundu¤u XML dosyas›n›n yolunu al›yor ve sonras›ndayü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 bulamasaveya 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 haberdarolacaklar. 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 ilede¤ifltirilmeden yaz›lmal›d›r. Taray›c› ancak bu flekilde söz konusulinkin 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.


EXPLORER-03 3/14/09 10:45 PM Page 34

Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤iArt›k elimizde haz›r bir arama sa¤lay›c› bulundu¤una göre bu aramasa¤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›dakikod 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örselarama 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 bizimtek 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-


EXPLORER-03 3/14/09 10:45 PM Page 35

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 aramasonuç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 haldekullan›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-


EXPLORER-03 3/14/09 10:45 PM Page 36

¤›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 Explorerkendisine 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› gruplamakamac›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>

‹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 gerekliverileri XML içerisinde yazd›rmam›z flart. Her bir Item tag›n›n Text,Description ve Url elementlerini içermesi gerekiyor. Text veDescription 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¤erarama 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.


<Image Source=http://daron.yondem.com/resim.jpg

alt=”Bu bir resimdir” width=”70”></Image></Item>


EXPLORER-03 3/14/09 10:46 PM Page 37

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

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› ilesitenizin ziyaretçilerine sunabilirsiniz. E¤er hedef taray›c›lar›n görselarama 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.


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

EXPLORER-03 3/14/09 10:46 PM Page 38

Sunucuda Gerçek Zamanl› XML ÜretimiGörsel arama sistemlerini kullanabilmek için en önemli nokta sunucutaraf›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 birArray (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 beraberLINQ’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 GenericHandler’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›¤›ndahem örnek amaçl› olarak bir veri yarataca¤›z hem de o veri üzerindensonras›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()

{


EXPLORER-03 3/14/09 10:46 PM Page 39

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›naait 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›mve içerisine veri, yani Item nesneleri eklenebilecek hale getirelim.

XDocument XMLFeed = new XDocument(newXDeclaration(“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›dayaratm›fl oldu¤umuz doküman içerisinde SearchSuggestion ele-menti içindeki Section elementinin içine uygun Item elementleriniyerlefltirmeye.

for (int i = 0; i < Veri.Count; i++){

XMLFeed.Element(“SearchSuggestion”).Element(“Section”).Add(

new XElement(“Item”,


EXPLORER-03 3/14/09 10:46 PM Page 40

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ürekliVeri ad›ndaki Generic List’i kullan›yoruz. Böylece istedi¤imiz XMLDOM’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 aranacakquerystring parametresine göre farkl› XML’ler döndürmek için haz›rdurumda. Tek yapman›z gereken örne¤imizdeki Veri ad›ndaki List’ifarkl› 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 Literalsyap›s›n› kullan›rsak XML yaratma ifllemi çok daha farkl› bir çehreyebürünebiliyor. O nedenle gelin C# ile yapt›¤›m›z örne¤i bir de VB ileyaparak nas›l ilerleyebilece¤imizi inceleyelim.

Public Class Sonuc

Private PText As StringPublic Property Text() As String

GetReturn PText

End GetSet(ByVal value As String)

PText = value


EXPLORER-03 3/14/09 10:46 PM Page 41

End SetEnd Property

Private PDescription As StringPublic Property Description() As String

GetReturn PDescription


PDescription = valueEnd Set

End Property

Private PUrl As StringPublic Property Url() As String

GetReturn PUrl


PUrl = valueEnd Set

End Property

Private PPhoto As StringPublic Property Photo() As String

GetReturn PPHoto


PPHoto = valueEnd 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 verikayna¤›m›z› üretece¤iz.


EXPLORER-03 3/14/09 10:46 PM Page 42

Dim Veri As New System.Collections.Generic.List(Of Sonuc)

For index As Integer = 1 To 10Veri.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 verikayna¤›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 ContentType’›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 gerekkalmadan 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> %>


EXPLORER-03 3/14/09 10:46 PM Page 43

</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 derleyicisitaraf›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›kWindows sunucu üzerinde PHP kullan›m› hatta ASP.NET ile entegreortak Forms Authentication kullan›mlar› ve Session paylafl›mlar› gi-bi özelliklerin hayat›m›za girdi¤i bu günlerde sunucu taraf›nda PHPkullanman›z halinde de tabi ki Görsel Arama için uygun XML kodla-r›n› üretebilirsiniz. Bunun için örne¤imizde herkesin sunucusundaPHP DOM’un kurulu olup olmad›¤›ndan emin olmad›¤›m›z için PHPDOM 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’);


EXPLORER-03 3/14/09 10:46 PM Page 44

$items[] = array(‘text’ => ‘Sonuç 2’,‘image’ => array

(‘source’ => ‘http://x.com/resim2.jpg’, ‘alt’ => ‘baska resim’, ‘width’ => 75, ‘height’ => 60),


‘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),


‘url’ =>‘http://daron.yondem.com’);

Sonras›nda örne¤imizde kullanmak üzere yukar›daki gibi bir Arraytan›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 .= “\t\t<Item>\n”;$output .= “\t\t\t<Text>”. $item[‘text’] .”</Text>\n”;$output .= “\t\t\t<Image source=\””. $item[‘image’]

[‘source’] .”\”\n”;$output .= “\t\t\t alt = \””. $item[‘image’][‘alt’]

.”\”\n”;$output .= “\t\t\t width = \””. $item[‘image’]

[‘width’] .”\”\n”;


EXPLORER-03 3/14/09 10:46 PM Page 45

$output .= “\t\t\t height = \””. $item[‘image’][‘height’] .”\”\n”;

$output .= “\t\t\t /> \n”;$output .= “\t\t\t<Description>”. $item[“description”]

.”</Description> \n”;$output .= “\t\t\t<Url>”. $item[“url”] .”</Url>\n”;$output .= “\t\t</Item>\n”;

}

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

echo $output;

Yukar›daki kod içerisinde de görebilece¤iniz üzere standart stringbirlefltirme ifllemleri ile XML kodumuzu yarat›yoruz. XML’imizinbafllang›ç 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 deJSON 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 olarakgönderilen arama kelimeleri bulunuyor.


EXPLORER-03 3/14/09 10:46 PM Page 46

Web Dilimleri Nas›l Haz›rlan›rWeb dilimleri kullan›c›lar›n sitelerimizi takip edebilmeleri aç›s›ndanilginç ifllevsellikler sa¤layabiliyor ve bu ifllemi çok kolaylaflt›rabili-yorlar. Bu çerçevede web dilimlerinin oluflturulmas› ile ilgili teknikaç›dan birkaç farkl› yol var. Bu bölümümüzde her farkl› yolu avantajve 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›ndaWeb Slice’› tan›ml›yor. Web sayfalar› içerisinde Web Slice’lar tama-men microformatlar ile tan›mlan›r, normal flartlarda teknik olarak birifllevselli¤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 bizlerclass de¤erlerine CSS s›n›flar›n› atar›z ve bu özelli¤i tasar›msalayarlamalar için kullan›r›z, oysa Internet Explorer 8 için hslicead›ndaki class de¤erinin çok daha farkl› bir önemi var. Tabi di¤eryandan e¤er isterse web tasar›mc› veya programc› hslice ad›nda birCSS 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 HTMLelementinin 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. ‹lerikiad›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› dilimleilgili güncellemeleri takip edemeyecektir.


EXPLORER-03 3/14/09 10:46 PM Page 47

Son olarak basit bir Web Slice içerisinde bir de entry-content veentry-title bulunmas› gerekir. Yine farkl› HTML elementlerineverilen class de¤erleri ile tan›mlanana bu özelliklerden entry-titlebir web diliminin kullan›c›lar›n taraf›ndan taray›c›ya entegre edilmesihalinde 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 classolarak alm›fl olan HTML elementleri içerisinde farkl› HTML kodlar›yerlefltirilebilir.

Çal›flma Yap›s›Internet Explorer açt›¤› her sayfada hslice ile iflaretlenmifl HTMLelementlerini arar ve iç yap›s› uygun olanlar› otomatik olarak birerweb 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 WebDilimi örne¤i gördük. E¤er herhangi bir web dilimi kendi içeri¤inido¤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 Explorerweb dilimini ID’si üzerinden HTML kodunda bulup içerisindekientry-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 tespitedip gerekli yerlere hslice, entry-content ve entry-titleCSS s›n›flar›n› atamak.

Di¤er yandan farkl› senaryolarda daha esnek yap›lar oluflturabilmekad›na Web Dilimler’inin içeriklerinin farkl› kaynaklardan çekilebil-mesi de mümkün. Seçeneklerden ilki web diliminin içeri¤ini ayr› birweb sayfas›ndan almak.

D›splay Source De¤iflikli¤iYaratt›¤›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-


EXPLORER-03 3/14/09 10:46 PM Page 48

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 classde¤erine sahip bir elementimiz var fakat bu sefer söz konusu elementinbir 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 verilenhref 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 edecekve söz konusu sayfadaki içeri¤i kullan›c›ya gösterecektir. Böylece anasayfada 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¤lamakBaz› durumlarda farkl› web dilimleri için ortak bir kaynak kullanmakveya sitenizin farkl› yerlerinden kesilebilir flekilde gözükse de asl›ndaayn› 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>


EXPLORER-03 3/14/09 10:46 PM Page 49

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 fakatInternet 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 gidilebilecekson nokta olarak RSS XML kaynaklar›ndan bahsedilebilir. Normalflartlarda bir RSS içerisinde birden çok Item tag’› bulunur. Oysa birweb 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 feedurlolarak atanm›fl a tag›n›n href özelli¤ine hedef veri kayna¤›n›n adresiyerlefltirilmifl 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 <b>kodları</b>

kullanılabilir</description></item>


EXPLORER-03 3/14/09 10:46 PM Page 50

</channel></rss>

RSS kayna¤› içerisinde sadece bir ITEM bulunuyor. Söz konusuItem’›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¤inibelirler. 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¤erinekranda 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

Görsel Arama bölümümüzde inceledi¤imiz üzere hem ASP.NET hem dePHP ile dinamik XML üretimi kolayca yap›labiliyor. Bu çerçevede hariciRSS kaynaklar›na ba¤l› web dilimlerinin RSS kaynaklar› da özünde birerXML 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 flekildeweb sitenizi takip edebilirler.

NOT

EXPLORER-03 3/14/09 10:46 PM Page 51


EXPLORER-03 3/14/09 10:46 PM Page 52

Kitab›m›z›n bu bölümünde Internet Explorer 8.0 ile beraber gelen veözünde sadece biz yaz›l›mc›lar› ilgilendiren özelliklere göz ataca¤›z.Yeri gelecek çok basit fakat hayat›m›z› kolaylaflt›ran JScript yenilik-lerine de¤inecek, yeri gelecek uygulamalar›m›z›n tüm yap›s›n› de¤ifl-tirecek altyap›lardan bahsedece¤iz. Gelin konuyu daha fazla uzatma-dan örneklerimiz ile Internet Explorer 8.0 içerisinde bizleri gizli sak-l› neler bekliyor göz atal›m.

JavaScr›pt YenilikleriÖzellikle istemci tarafl› programlama söz konusu oldu¤unda ço¤un-lukla akl›m›za JavaScript gelir ve yazd›¤›m›z JavaScript kodlar›n›nkontrol edilmesinden tutun performans›na ve güvenli¤ine kadar ço¤unoktada farkl› testler yapmam›z gerekir. Bu bölümde Internet Explo-rer 8.0 ile beraber gelen baz› JavaScript yeniliklerinden bahsedece¤iz.

tostat›cHTML MetoduKullan›c›lardan veri girifli alan ekranlarda ald›¤›n›z veri giriflini do¤-rudan sayfa içerisinde kulland›¤›n›zda Script Injection dedi¤imiz gü-venlik aç›¤› ile karfl› karfl›ya kalabilirsiniz. Asl›nda kodumuz kulla-n›c›ndan bir metin de¤eri beklerken söz konusu metin içerisinde bu-lunan ve kullan›c›n›n kas›tl› olarak yazm›fl oldu¤u JScript kodlar›n›fark›nda olmadan sayfada farkl› yerlere yerlefltirmifl olabiliriz. Budurumda web sayfam›zda çal›flacak kodlar› do¤rudan d›flar›dan alm›-fl›z demektir. ‹flte bu gibi bir güvenlik aç›¤›ndan kaç›nabilmek ad›na

Yaz›l›m Gelifltiricileriçin Internet Explorer 8JavaScript Yenilikleri 53

tostaticHTML Metodu 53Dahili JSON S›n›flar›... 55

AJAX Navigasyon 57Online ve Offline Çal›flma Yap›s› 58Cross Domain Request Nesnesi 60DOM Veri Ambar› 64

Session Storage 64Local Storage 65

Yaz›l›mc› Araçlar› 65CSS ve HTML DOM Gerçek Zamanl› Düzenleme 65

JavaScript Debuging 67Profiler ile Optimizasyon 68Image Optimizasyonu 69Pratik Araçlar 70

Önce Güvenlik 71Data Execution Prevention 71Kullan›c›ya Özel ActiveX 72Siteye Özel ActiveX 73XSS Sald›r›lar› 74MIME TYPE Kararlar› 75O Uygulamay› Sitemde Çal›flt›rma! 75DOM Elementlerini Sorgulay›n 75

4

EXPLORER-04 3/14/09 10:31 PM Page 53

kullan›c›lar›n girifl yapt›¤› tüm ekranlardaki verileri kullanmadan ön-ce gerekli kontrolleri de yapmam›z gerekir.

Internet Explorer 8.0 ile beraber gelen tostaticHTML metodu para-metre olarak kendisine bir HTML verisi al›r ve bu veriyi bir metne çe-virecek flekilde gerekli filtreleme ve temizleme ifllemlerini yapar.

<%@ Page Language=”VB” AutoEventWireup=”false” Code-File=”Default.aspx.vb” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transi-tional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head runat=”server”>

<title></title>

<script type=”text/javascript”>function Goster() {

alert(toStaticHTML(document.getElementB-yId(‘icerik’).innerHTML));

}</script>

</head><body>

<form id=”form1” runat=”server”><div>

<input id=”Text1” type=”text” /><input id=”Button1” onclick=”Goster()”

type=”button” value=”button” /><div id=”icerik”>

DENEME<script type=”text/javascript”>

function Deneme() {document.getElementById(“icerik”).

innerHTML = document.getElementById(“Text1”).value;}

</script></div>


EXPLORER-04 3/14/09 10:31 PM Page 54

</div></form>

</body></html>

Yukar›daki örnekte içinde JavaScript kodu bulunan bir DIV elemen-tini alarak içeri¤ini kullan›c›ya göstermek istiyoruz. Tam da bu ifllemiyaparken arada toStaticHTML metodunu kullan›yoruz. Böylece tümscript’ler kodumuzdan temizleniyor ve ortaya sadece “DENEME”metni ç›k›yor. Bu sistemi özellikle farkl› alan adlar›nda al›nan verile-rin kontrolü için de rahatl›kla kullan›labilir.

Dahili JSON S›n›flar›...AJAX ile programlama yaparken en s›k kulland›¤›m›z veri tafl›ma for-matlar›ndan biri JSON (JavaScript Object Notation). Detaylar›na bak-t›¤›m›zda ASP.NET AJAX içerisinde de tüm PageMethod’lar sunu-cundan istemciye JSON format›ndan veri gönderiyor. Bunun tabi kianlaml› nedenleri var; JSON XML’e k›yasla çok daha düflük boyuttaçok daha fazla veri tafl›yabiliyor. Ayr›ca JSON’un JavaScript taraf›n-da kullan›m› XML’e göre daha kolay. JSON’un art›k neredeyse tümAJAX kütüphanelerinde kullan›ld›¤›n› düflünürsek Microsoft taraf›n-da da IE 8.0’a JSON ile ilgili özelliklerin eklenmesi gerekti¤i karar›al›narak Beta 2 ile beraber do¤rudan JSON’a özel yeni JavaScriptözellikleri sunuluyor. Gelin neler varm›fl beraber inceleyelim.

AJAX kullan›lan sitelerdeki en büyük güvenlik aç›klar›n›n arkas›nabakt›¤›m›zda belki de ço¤u zaman Eval metodu karfl›m›za ç›kacakt›r.Peki Eval metodu ne yapar? Eval kendisine String olarak verilen birde¤iflkenin içindekileri bir kodmufl gibi çal›flt›r›r. Örne¤in afla¤›dakikod çal›flt›r›ld›¤›nda ekrana normalde alert JavaScript metodu çal›flt›-r›larak getirilen bir mesaj kutusu gelecektir.

var Degisken = “alert(‘DENEME’);”;eval(Degisken);

Gördü¤ünüz gibi asl›nda çal›flt›r›lan kod do¤rudan bir metin olarakbaflka bir de¤iflkenin içerisinde saklan›yor. Güvenlik aç›¤› nerede?JSON kulland›¤›n›zda sunucudan gelen bir metni do¤rudan Eval ileçal›flt›rarak JSON’un bir JavaScript dizisi olmas›n› sa¤lar›z. Bu nok-tada e¤er veri harici bir kaynaktan geliyorsa veya bu veriyi daha ön-ce kullan›c› girmiflse asl›nda kullan›c›n›n do¤rudan sitenizde çal›flt›r›-

YAZILIM GEL‹fiT‹R‹C‹LER ‹Ç‹N INTERNET EXPLORER 8 55

EXPLORER-04 3/14/09 10:31 PM Page 55

lacak bir JavaScript kodunu girmesini sa¤lam›fl olursunuz. Bunu en-gellemenin tabi ki yollar› var, harici kütüphanelerde yine JavaScriptile eval’e verilen metinleri Parse ederek inceleyen metodlar mevcut,hatta baz›lar› bunun için Regular Expression bile kullanabiliyor. Fa-kat bunlar›n hepsi unutmayal›m ki yine JavaScript metodlar› kullan›-larak yap›lan ifllemler. Oysa bizim do¤rudan taray›c› motorunda bu ifl-lemleri yapan bir sistemimiz olsa daha h›zl› ve güvenli olmaz m›?

IE 8.0 ile beraber do¤rudan JSON’u parse edebilme özelli¤i geliyor.Serialization ve Deserialization ifllemlerini do¤rudan IE içerisindeNative kodla yapt›¤› için tabi ki ortaya çok daha yüksek performans-l› bir çözüm ç›k›yor.

var KitaplarMetin = “{\”kitaplar\”:{\”kitap\”:[\”ASP.NET AJAX\”,\”ASP.NET 3.5 AJAX\”]}}”;

var Kitaplar = JSON.parse(KitaplarMetin);alert(Kitaplar.kitaplar.kitap[0]);

Yukar›daki kod içerisinde KitaplarMetin de¤iflkenine bir JSON met-ni aktar›yoruz. Bu metnin bir flekilde JavaScript nesnelerine çevrilme-si gerekiyor. Bunun için klasik eval metodunu kullanmaktansa do¤ru-dan IE 8.0 ile beraber gelen JSON nesnesinin parse özelli¤ini kulla-n›yoruz. Son sat›rda ise art›k Kitaplar de¤iflkenimize aktar›lan JSONnesnelerinin içerisinden ilk kitab›n ad›n› al›yoruz.

Peki ya eldeki JavaScript nesnelerini JSON’dan standart metne çevir-mek istersek ne yapaca¤›z? Bu durumda da yard›m›m›za yine JSONnesnesinin stringify metodu yetifliyor.

var Kitaplar = {kitaplar:{

kitap:[‘ASP.NET AJAX’,‘ASP.NET 3.5 AJAX’

]}

};

alert(JSON.stringify(Kitaplar));


EXPLORER-04 3/14/09 10:31 PM Page 56

Yukar›daki örnekte yaratt›¤›m›z Kitaplar ad›ndaki nesneyi stringifymetodu ile bir JSON metnine çeviriyoruz. Ayr›ca isteyenler haricen.toJSON metodunu da kullanabilirler. IE 8.0 ile beraber standart ola-rak Boolean, String, Date, Number s›n›flar›n›n prototiplerine toJ-SON metodu eklenmifl durumda.

Bugüne kadar harici kütüphanelerle yukar›daki ifllemleri yapt›¤›m›ziçin tabi ki bu kütüphanelerin JSON nesnesi tan›mlad›klar›n› unutma-d›k. Böyle bir durumda afla¤›daki gibi ufak bir kontrol ile taray›c›n›nJSON nesnesini tan›mlay›p tan›mlamad›¤›n› kontrol edip e¤er tan›m-l› de¤ilse harici scriptler üzerinden ilerlemeyebilirsiniz.

if(!this.JSON){

JSON = .....;}

AJAX Nav›gasyonWeb sitelerinde AJAX kullan›m› gün geçtikçe art›yor ve neredeyseart›k AJAX kullan›lmayan sitelere demode gözüyle bakmaya baflla-d›k. Bu çerçevede AJAX’l› sitelerde yaflad›¤›m›z en büyük sorunlar-dan biri taray›c›n› geri ve ileri dü¤melerinin çal›flmamas›. Konu ile il-gili farkl› taray›c›lar için farkl› taktiksel çözümler gelifltirilmifl olsa daart›k IE 8 ile beraber standart bir çözüm de geliyor.

AJAX ile sayfalar› programatik olarak yeniledi¤imizde sayfa adresi-nin de¤iflmiyor olmas› asl›nda sorunumuzun esas nedeni. E¤er sayfa-n›n adresini de¤ifltirebilseydik taray›c› da bu adresi kendi taray›c› geç-mifline ekleyebilecekti. Tam da bu noktada web adreslerinin sonunaekleyebildi¤imiz çapalar ak›l›m›za geliyor. Örne¤in default.aspx#1 iledefault.aspx#2 asl›nda ayn› sayfa olsalar da ayr› adresler fleklinde ta-n›mlan›yor. Bu adresin çapa k›sm›, yani # iflaretinden sonraki k›sm›de¤iflse de taray›c› sayfay› bafltan yüklemeyecektir çünkü konsept ola-rak ayn› sayfa içerisinde farkl› bir konum arayacakt›r. Çapalar›n buözelli¤inden faydalanarak normal kullan›mlar›n›n yan› s›ra sadece ad-res çubu¤undaki adresi de¤ifltirebilmek için de kullanabiliriz. Pekitüm bunlar› nas›l yapaca¤›z?

window.location.hash

Yukar›da gördü¤ünüz kod AJAX kulland›¤›m›z web sitelerinde haya-t›m›z› kurtaracak olan kodun sadece ufak bir parças›. Do¤rudan win-


EXPLORER-04 3/14/09 10:31 PM Page 57

dow.location.hash de¤erine aktard›¤›n›z de¤erler art›k taray›c›n›n ad-res çubu¤unda # iflaretinden sonras›na eklenecek ve hash de¤eri herde¤ifltirildi¤inde bir önceki adres de taray›c› geçmifline kaydedilecek.Böylece h›zl› bir flekilde AJAX sitemizde ileri ve geri dü¤melerininaktif hale gelmesini sa¤layabiliyoruz. Fakat bir sonraki ad›mda kulla-n›c›n›n ileri veya geri dü¤melerine bast›¤›n› da alg›lamam›z gerekiyorki duruma göre gerekli AJAX isteklerini tekrar yaparak sayfay› eskihaline getirebilelim. Unutmay›n sayfa hiçbir flekilde tekrar yüklenme-yecek o nedenle sayfay› eski haline getirmek de tamamen bize kal›-yor. Hash de¤erine daha önce söz konusu sayfalar› tan›mlayacak birde¤er verdiyseniz kullan›c› taray›c›da gezerken gidilmek isteyen say-fan›n hash de¤eri size verildi¤inde sayfan›n eski halini üretebilmenizhiç de zor olmayacakt›r.

<body onhashchange=”HashChanged();”>

Yine IE 8 ile beraber gelen AJAX navigasyon sisteminin bir parças›da kullan›c›n›n taray›c› içerisinde ileri veya geri dü¤melerini kulland›-¤›nda bizi haberdar edecek olan event-listener. Standart flekli ile her-hangi bir HTML sayfada yer alan Body tag›n›n onhashchangeevent’›na özel bir JavaScript listener fonksiyonu ekleyebilirsiniz. Böy-lece art›k ileri veya geri navigasyonlar›nda bizim HashChanged me-todumuz çal›flt›r›lacak. Peki ne yapaca¤›z HashChanged içerisinde?Hash de¤iflti¤inde göre yeniden window.location.hash üzerinden ye-ni hash de¤erini al›p ona uygun AJAX isteklerini gerçeklefltirerek si-teyi eski haline getirmemiz gerekiyor.

Tüm bu manzara içerisinde önemli olan noktalardan biri de AJAX si-telerinde yaflad›¤›m›z bir di¤er sorunu daha gidermifl olmam›z. Bildi-¤iniz üzere AJAX sitelerinde sitenin farkl› durumlar›na ait farkl› URLadresleri de bulunmaz. Oysa bizim # implementasyonu ile beraber ar-t›k sitemizin hash bilgisini de¤ifltirdi¤imiz her noktada yeni bir sayfave URL de yaratm›fl oluyoruz.

Onl›ne ve Offl›ne Çal›flma Yap›s›Özellikle RIA uygulamalar›ndaki en büyük sorunlardan biri anl›k in-ternet ba¤lant›s› kesintilerinde sayfan›n bir daha geri ulafl›lamayacakflekilde ekrandan kaybolmas› veya farkl› hatalar›n ortaya ç›karak geridönüflü imkans›z hale getirmesidir. Bu hofl olmayan durumu art›k In-ternet Explorer 8.0 ile beraber çözebiliyoruz. IE 8.0 içerisinde navig-


EXPLORER-04 3/14/09 10:31 PM Page 58

tor.offline nesnesi ile istemci taraf›nda internet ba¤lant›s›n›n o an içinolup olmad›¤› kontrol edebildi¤imiz gibi internet ba¤lant›s› ile ilgilide¤ifliklikleri alg›layacak event-handler tan›mlamalar› da yapabiliyo-ruz. Bu kolayl›klar ile art›k AJAX veya Silverlight uygulamalar›n›nistemci taraf›ndaki kesintileri alg›layarak uygun bir flekilde kullan›c›-y› uyarmalar› mümkün. Hatta belki de internet ba¤lant›s›n›n koptu¤u-nu alg›layan uygulama veriyi DOMStorage’a saklay›p bir sonraki ça-l›flt›¤›nda sunucuya gönderebilir. Minik bir örnek ile bu ifllemleri na-s›l yapabilece¤imize göz atal›m.

<body ononline=”VarMi();” onoffline=”VarMi();”><form id=”form1”>

<div id=”icerik”></div><input onclick=”VarMi();” id=”Button1”

type=”button” value=”button” /></form>

</body>

Yukar›daki HTML kodu içerisinde özellikle koyu yaz›l› noktalara dik-kat etmemiz gerekiyor. Birazdan yazaca¤›m›z VarMi ad›ndaki Ja-vaScript fonksiyonumuz istemcide internet ba¤lant›s› olup olmad›¤›n›kontrol edecek. Fakat hangi durumlarda bu kontrolü yapaca¤›z? ‹lkolarak söz konusu fonksiyonumuzu sayfam›zda bir dü¤meye ba¤la-d›k. Böylece istedi¤imiz zaman t›klayarak internet ba¤lant›s› olup ol-mad›¤›n› ö¤renebiliriz. Di¤er yandan istemcide internet ba¤lant›s›koptu¤unda veya internet ba¤lant›s› geldi¤inde de VarMi fonksiyo-numuzun çal›flarak gerekli de¤ifliklikleri yapmas›n› istiyoruz. O ne-denle body’nin ononline ve onoffline özelliklerine de söz konusufonksiyonumuzun ad›n› yaz›yoruz. Böylece online durumunda yaniinternet ba¤lant›s› geldi¤inde veya onoffline durumunda yani internetba¤lant›s› kesildi¤inde de an›nda VarMi fonksiyonumuz çal›flt›r›la-cak. Gelelim flimdi de VarMi fonksiyonumuzu yazmaya.

function VarMi() {if (window.navigator.onLine) {

$get(“icerik”).innerHTML = “İnternet Var”;}else {


EXPLORER-04 3/14/09 10:31 PM Page 59

$get(“icerik”).innerHTML = “İnternet YOK”;};

}

Asl›nda kod çok basit. navigator.onLine metodu bize geriye bir Bo-olean de¤eri döndürüyor. E¤er taray›c›da o an internet ba¤lant›s› varsasayfadaki bir DIV içerisine uygun uyar› mesaj›n› yaz›yoruz. Ayn› fle-kilde e¤er ba¤lant› yoksa bu sefer de farkl› bir uyar› mesaj› yaz›yoruz.Siz örneklerinizde bu durumlara göre farkl› ifllemler yapabilirsiniz.Böylece haz›rlad›¤›n›z web sitesi yeri geldi¤inde belki baz› ifllemleribir süreli¤ine sunucudan ba¤›ms›z olarak da yapabilir ve nas›l çal›flaca-¤›na internet ba¤lant›s›n›n durumuna bakarak kendisi karar verebilirim.

Cross Doma›n Request NesnesiBir alan ad›ndan yola ç›karak baflka bir alan ad›ndan veri almak istedi-¤iniz oldu mu? Veya tam tersi, belki de veri göndermek istediniz. Nor-mal flartlarda bu gibi alan adlar› aras› veri trafi¤i güvenlik nedeni ile ta-ray›c›larda kapal›d›r. Oysa gönül isterdi ki en az›ndan her iki alan ad›-n›n da sahibiysek veya her iki alan ad›na da admin olarak eriflimimizvar ise karfl› taraftan veriye eriflmek isteyenlere izin verme hakk›m›zolsun. ‹flte Internet Explorer 8 ile beraber gelen XDomainRequest nes-nesi eski XmlHttpRequestler’e benzer kullan›m› ile tam da bu ifllev-selli¤i sa¤l›yor. Normal bir XmlHttpRequest’ten farkl› olarak XDo-mainRequest gerekti¤inde karfl› alan ad› ile ilgili kontrolleri de yapa-rak birden çok alan ad› aras›ndaki iletiflimi rahatl›kla sa¤layabiliyor.

Internet Explorer 8 üzerinden bir XDomainRequest nesnesi yarataraksunucudan talepte bulundu¤unuzda talebiniz ile beraber otomatik ola-rak XDomainRequest: 1 http header bilgisi gönderilecektir. E¤er buheader bilgisine karfl›l›k olarak uzak noktadan da XDomainReques-tAllowed: 1 header bilgisi gelirse art›k her iki taraf da birbiri ile ileti-flime geçebilir demektir.

Bahsetti¤imiz flekilde kendi sunucunuzda bulunan baz› veri kaynakla-r›na bu flekilde farkl› alan adlar›ndan da eriflilebilmesini istiyorsan›zsunucu taraf›ndan dinamik olarak gerekli olan http Header bilgilerinieklemeniz yeterli olacakt›r.

[ASP.NET / C#]

Response.AppendHeader(“XDomainRequestAllowed”,”1”);


EXPLORER-04 3/14/09 10:31 PM Page 60

Unutmay›n ki Cross Domain Request yarat›rken talebin bafllad›¤›adrese ait protokol ile hedef adresin protokolü ayn› olmal›d›r. Örne-¤in http:// ile bafllayan bir adresten https:// ile bafllayan bir adresetalep hiçbir flekilde gönderemezsiniz.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Tran-sitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti-onal.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”><head>

<title></title><script type=”text/javascript”>

var xdr;function Getir() {

xdr = new XDomainRequest();xdr.onload = geldi;xdr.open(“GET”, “http://twitter.com/

statuses/public_timeline.xml”);xdr.send();

}function geldi() {

alert(xdr.responseText);}

</script></head>

<body><input id=”Button1” onclick=”Getir();” type=”button”value=”button” /></body></html>

Yukar›daki örnek kod içerisinde basit bir flekilde XDomainRequestnesnesinin yarat›lma fleklini görebilirsiniz. XDR’›n onload durumuveri geldi¤inde çal›flt›r›lacak olan event-listener’› tan›mlar. Bizim ör-ne¤imizde geldi ad›ndaki JavaScript fonksiyonu veri geldi¤inde çal›fl-t›r›lacakt›r. Geldi fonksiyonu çal›flt›r›ld›¤›nda anda tekrar elimizdekiXDR üzerinden responseText alarak gelen veriye ulaflabiliyoruz.


EXPLORER-04 3/14/09 10:31 PM Page 61

Daha detayl› bir örnek için afla¤›daki kodu inceleyebilirsiniz. Sat›raralar›ndaki yorumlara dikkat etmenizde fayda var.

<html><script type=”text/javascript”>

var xdr;

function readdata() {var dRes = document.getElementById(‘dResponse’);dRes.innerText = xdr.responseText;// Gelen verinin tipini gösteriralert(“Content-type: “ + xdr.contentType); // Gelen verinin toplam boyutunu gösterir.alert(“Boyut: “ + xdr.responseText.length);

}

function err() {alert(“XDR’da hata oldu”);

}function timeo() {

alert(“XDR zaman aşımına uğradı”);}function loadd() {

alert(“XDR’a veri geldi”);alert(“Geldi: “ + xdr.responseText);

}function progres() {

alert(“XDR çalışıyor”);alert(“Geldi: “ + xdr.responseText);

}

function stopdata() {xdr.abort();

}

function mytest() {var url = document.getElementById(‘tbURL’);var timeout = document.getElementById(‘tbTO’);if (window.XDomainRequest) {

xdr = new XDomainRequest();


EXPLORER-04 3/14/09 10:31 PM Page 62

if (xdr) {xdr.onerror = err;xdr.ontimeout = timeo;xdr.onprogress = progres;xdr.onload = loadd;

xdr.timeout = tbTO.value;xdr.open(“get”, tbURL.value);xdr.send();

}else {

alert(‘Yaratılamadı’);}

}else {

alert(‘XDR nesnesi yok, IE 8 yok!’);}

}</script><body>

<h2>XDomainRequest</h2><input type=”text” id=”tbURL” va-

lue=”http://www.contoso.com/xdr.txt”style=”width:300px”><br>

<input type=”text” id=”tbTO” value=”10000”><br><input type=”button” onclick=”mytest()” value=

”Getir”> <input type=”button” onclick=”stopdata()” value=

”Durdur”> <input type=”button” onclick=”readdata()” value=

”Oku”><br><div id=”dResponse”></div>

</body></html>

Örne¤imizde sayfada yer alan metin kutular›na XDR’›n nereden veriçekece¤ini ve bu ifllemin en fazla ne kadar sürebilece¤ini belirtebilir-siniz. Böylece gere¤inden uzun süren ifllemlerin durdurulmas›n› veyaXDR ile ilgili farkl› durumlar›n yakalanmas›n› da sa¤layabilirsiniz.


EXPLORER-04 3/14/09 10:31 PM Page 63

DOM Veri Ambar›DOM Storage olarak adland›r›lan, benim ise veri ambar› dedi¤im me-kanizmay› hali haz›rda kulland›¤›n›z Cookie’lere benzetebilirsiniz.Fakat benzetme noktas› durup asl›nda aradaki farklar› incelemek ge-rek. ‹lk olarak Cookie’ler ile DOM Storage aras›ndaki en büyük farkbirinin 4KB alan sa¤larken di¤erinin standart olarak 10MB alan sa¤-layabiliyor olmas›. Tahmin edece¤iniz gibi asl›nda basit de¤erler sak-layaca¤›m›z bir ortamdan bahsetmiyoruz belki de art›k web tabanl›yaz›l›mlar›n dokümanlar›n› sa¤layabilecekleri kendilerine özgü kulla-n›c› verilerini tutacaklar› bir ortamdan bahsedebiliriz.

DOM Storage’u özellikle Internet Explorer 8’in online ve offline ça-l›flma mant›¤› ile de birlefltirirseniz asl›nda ortaya çok ilginç bir man-zara ç›kabiliyor. Taray›c› içerisinde rahatl›kla kullan›c›n›n verilerinisunabilen ve kullan›c›n›n internet ba¤lant›s› duruma göre verileri ge-çici olarak DOM Storage üzerindeki ortama kaydedebilen uygulama-lar çok yak›nda internet ortam›nda bizleri flafl›rtacakt›r.

Hemen akla gelen sorulardan biri de eminim ki DOM Storage’›n daCookie’ler gibi sunucuya gönderilen her iste¤e eklenip eklenmedi¤iolacakt›r. Kesinlikle hay›r, DOM Storage içerisindeki veriler sunucu-ya gönderilmez hatta Cookie’ler gibi son kullanma tarihleri de yoktur.

Sess›on StorageDOM Storage içerisinde kullanabilece¤iniz yap›lardan ilki tamamensession bazl› olarak verilerin tutulmas› olabilir. Böyle bir durumda ve-rilen Session’›n kaybedilmesi ile beraber kaybolacakt›r.

<input type=”checkbox” onchange=”sessionStorage.kargo = checked”>

Bu siparişte kargo isteniyor.

Yukar›daki flekli ise basit olarak session Store içerisine veri kaydede-bilirsiniz. Sonras›nda da tahmin edece¤iniz üzere ayn› flekilde söz ko-nusu veriyi geri alabilirsiniz.

E¤er tan›mlamakta oldu¤unuz session Store ö¤esi o ana kadar yarat›l-mam›fl ise otomatik olarak yarat›lacakt›r.


EXPLORER-04 3/14/09 10:31 PM Page 64

Local StorageSession Store’dan farkl› olarak Local Store içerisine saklanan verileralan ad› bafl›na saklan›r ve tüm oturumlar taraf›ndan rahatl›kla kulla-n›labilir.

<p>Bu sayfayı <span id=”count”>0</span>kez gördünüz.

</p><script>

var storage = window.localStorage;if (!storage.pageLoadCount) storage.pageLoadCount = 0;storage.pageLoadCount = parseInt(storage.pageLoad-

Count, 10) + 1;document.getElementById(‘count’).innerHTML = storage.

pageLoadCount;</script>

Yukar›daki örnek içerisinde basit bir flekilde yarat›lan pageLoadCo-unt de¤iflkeni içerisinde sayfan›n kaç defa istemci taraf›na yüklendi-¤i takip ediliyor. Bafllang›çta s›f›r olan de¤er her sayfa aç›ld›¤›nda birtane artt›r›larak ayr› bir element içerisine yazd›r›l›yor.

Yaz›l›mc› Araçlar›Internet Explorer içerisinde en büyük eksikliklerden biri de biz yaz›-l›m gelifltiriciler için gerekli profilleme, hata bulma araçlar›na sahipolmamas›yd›. Bunun için baz› durumlarda harici eklentiler kullan›r-ken bazen alternatif taray›c›lara da yönelmek zorunda kal›yorduk. Ge-lin beraberce bu sorunlar› çözme amac›yla Internet Explorer 8.0’a ek-lenmifl olan “Developer Tools” uygulamas›n› inceleyelim.

CSS ve HTML DOMGerçek Zamanl› DüzenlemeInternet Explorer 8.0 içerisinde Tools menüsünden ulaflabilece¤iniz“Developer Tools” ayr› bir pencerede ayr› bir programm›fl gibi aç›lsada tabi ki taray›c› ile entegre çal›fl›yor. Aç›lan “Developer Tools” pen-ceresinin sa¤ üst köflesinde “Pin” dü¤mesine basarsan›z bu pencerekendini IE içerisine yerlefltirecektir. Açt›¤›n›z herhangi bir sitenin


EXPLORER-04 3/14/09 10:31 PM Page 65

HTML DOM’unu incelemenin yan› s›ra CSS konusunda raporlar daalabiliyorsunuz. Hangi CSS s›n›f›n›n nereden geldi¤i, ve sayfada ge-çerli olup olmad›¤›n› görebiliyorsunuz. Örne¤in harici bir CSS ayar›local sat›r içi bir stil ayar› ile devre d›fl› b›rak›lm›fl olabilir. Tüm bun-lar› rahatl›kla bir liste olarak görmek mümkün.

Yukar›da gördü¤ünüz ekranda sol tarafta sayfan›n DOM a¤ac›n› ince-leyebilirsiniz. DOM içerisinde herhangi bir element özel olarak seçil-di¤inde o elementi etkileyen tüm CSS s›n›flar›, özellikleri ve bu özel-liklerin nereden geldikleri sa¤ tarafta görülebiliyor. Daha da güzeli sa¤taraftaki herhangi bir özelli¤e t›klarsan›z istedi¤iniz bir de¤eri de¤iflti-rerek IE içerisinde gerçek zamanl› olarak sonucu görebiliyorsunuz.

‹sterseniz “Developer Tools” içerisinde HTML tab›ndan CSS tab›nageçerek do¤rudan sayfadaki tüm CSS özelliklerini yakalayabilir vegerçek zamanl› olarak de¤ifliklikler de yapabilirsiniz. Tüm bu de¤iflik-likleri tamamlad›ktan sonra araç çubu¤undaki “Kaydet” dü¤mesinebasman›z CSS dosyan›z›n o anki hali ile kaydedilmesi için yeterli.


CSS ve DOM kontrol alt›nda!

EXPLORER-04 3/14/09 10:31 PM Page 66

JavaScr›pt Debug›ngVisual Studio içerisinde JavaScript Debuging’e k›yasla çok daha ba-flar›l› buldu¤um IE 8.0 Developer Tools içerisinde JavaScript araçla-r›n›n en büyük avantaj› do¤rudan IE ile beraber çal›flt›klar› için tara-y›c› içerisindeki tüm aktiviteyi takip edebiliyor olmak. ‹sterseniz her-hangi bir JavaScript de¤iflkenine ayn› Visual Studio içerisinde VB ve-ya C# kodlar›na yapt›¤›m›z gibi Watch’lar ekleyin veya istedi¤iniz birad›ma BreakPoint yerlefltirin. Hatta F10 ve F5 gibi Visual Studio k›-sayollar› bile ayn›.

Özellikle Silverlight 1.0 taraf›nda yaz›lan JavaScript kodlar›n›n veyaAJAX taraf›nda yaz›lan veri ulafl›m kodlar›n›n incelenmesi ve hatala-r›n bulunmas› epey kolaylaflm›fl durumda. Afla¤›daki görsel içerisindeJavaScript ile tan›mlanm›fl bir Silverlight nesnesinin Source özelli¤i-ne verilen de¤eri do¤rudan “Locals” tab› üzerinden giderek sayfada ta-n›mlanm›fl tüm JavaScript nesnelerini listeleyip bulabiliyoruz.

Tüm bunlar› yaparken istedi¤iniz anda herhangi bir de¤iflkenin de¤e-rini Developer Tools içerisinde de¤ifltirebilirsiniz, sonucu gerçek za-manl› olarak IE içerisinde göreceksiniz.


JavaScript taraf›nda Watch koyarak durumu takip edin.

EXPLORER-04 3/14/09 10:31 PM Page 67

Prof›ler ile OptimizasyonYazd›¤›m›z kodun ne kadar optimize oldu¤unu anlamak çok önemli.Bunun için tam olarak hangi kodun daha çok zaman ald›¤›n› bilmeli-yiz. Özellikle SQL taraf›nda al›fl›k oldu¤umuz Profiler sistemine ben-zeyen bir yap› ile art›k IE üzerinde de Developer Tools içerisinde birProfiler bulunuyor. “Start Profiler” dü¤mesine bast›ktan sonra IE pen-ceresine geçip site üzerinde istedi¤iniz ifllemleri yapabiliyorsunuz.

Sonra Developer Tools’a dönerek “Stop Profiler” dedi¤inizde geçensüre içerisinde yapt›¤›n›z tüm ifllemlerin bir listesi karfl›n›za ç›k›yor. Bulisteyi ister bir “Function” listesi olarak al›n ister bir a¤aç görüntüsün-de hangi function’›n hangisini ça¤›rd›¤›na bakarak inceleyin. Önemliolan art›k hangi ifllemin ne kadar sürdü¤ünü görebiliyor olmam›z.


JavaScript taraf›ndaki sayfada bulunan tüm nesneler ve de¤iflkenler düzenlenebiliyor.

EXPLORER-04 3/14/09 10:31 PM Page 68

Image OptimizasyonuBaz› durumlarda bir web sitesine koydu¤umuz resmin hem en ve boyboyutu hem de dosya boyutuna bakabilmek için do¤rudan dosyan›nkendisini bulmam›z gerekebilir.

Developer Tools içerisinde Image menüsü böyle bir durumda yard›-m›m›za kofluyor ve do¤rudan gerçek zamanl› olarak gezdi¤iniz tümsitelerdeki resimlerin boyutlar›n› resimlerin üzerine yaz›yor. Gerçek-ten hofl bir özellik.


Kod optimizasyonu için Profiler.

EXPLORER-04 3/14/09 10:31 PM Page 69

Pratik AraçlarBir sayfadaki tüm DIV’leri görmek mi istiyorsunuz, tek yapman›z ge-reken “Outline” menüsünden DIV seçene¤ini iflaretlemek. Böylecegerçek zamanl› olarak sayfa içerisinde tüm DIV’ler ayr›ca birer çer-çeve içine al›nacakt›r. Sadece DIV elementleri de¤il istedi¤iniz birelementi kendiniz de belirterek aranmas›n› sa¤layabilirsiniz.

Tools menüsünden “Show Ruler” özelli¤i ile fare ile ekranda t›klad›-¤›n›z iki nokta aras›nda mesafeyi piksel olarak ölçebilir bu mesafeleraras›nda X ve Y koordinatlar› farklar› görebilirsiniz.


Gerçek zamanl› olarak sitedeki resimlerle ilgili detaylar› görebilirsiniz.

EXPLORER-04 3/14/09 10:31 PM Page 70

Ayn› menüdeki “Show Color Picker” ile gezdi¤iniz sitedeki herhangibir rengi seçebilir RGB ve HEX renk kodlar›n› alabilirsiniz. “Resize”menüsünden ekran çözünürlükleri seçerek taray›c›n›n otomatik olarakfarkl› ekran çözünürlü¤ündeymifl gibi boyutland›r›lmas›n› sa¤layabi-lirsiniz.

Burada daha bahsedemedi¤imiz bir çok özellik “Developer Tools” ileberaber Internet Explorer 8 içerisinde geliyor. Bir yaz›l›mc› olarak bugeliflme beni çok mutlu etti diyebilirim.

Önce GüvenlikNeredeyse her yaz›l›m›n yeni sürümde art›k “Daha Güvenli” sözleri-ni duymaktan b›kt›k. Peki nedir daha güvenli olan? diye sordu¤umuz-da ço¤u zaman tatmin edici cevaplar alam›yoruz. O nedenle ben bubölümde sizlerle Internet Explorer 8 içerisindeki güvenli¤e bak›fl› tek-nik bir aç›dan inceleyece¤im.

Data Execut›on Prevent›onK›sa ad› DEP olan sistemin asl›nda do¤rudan IE ile bir iliflkisi yoktu.Windows XP ve 2003 ile beraber gelen altyap› sistemde belirli bellekalanlar›n›n korunmas›n› ve bu alanlardan kod çal›flt›r›lmas›n› engelle-nebilmesini sa¤l›yor. Böylece Buffer Overrun sald›r›lar›na ait bofl-luklar›n bulunmas› çok daha zor bir hal al›yor. Tabi “Managed Code”yazarlar› olarak VB.NET ve C#.NET programc›lar›na bu yap› yaban-c› gelecektir. Maalesef flimdilik çok detaylar›na girme flans›m›z yok.


Pratik araçlardan biri: Cetvel!

EXPLORER-04 3/14/09 10:31 PM Page 71

fiu ana kadar bu altyap› Windows’da olmas›na karfl›n maalesef IE 7.0ile beraber varsay›lan ayarlarda aç›k gelmiyor. Bunun mant›kl› bir ne-deni var; DEP ile uyumsuz programlar›n bugüne kadar çal›flmas› ge-rekiyordu, özellikle IE 7.0 için yaz›lm›fl ço¤u Plug-In maalesef bu du-rumdayd›. ATL 7.1 ve öncesindeki uygulamalar›n DEP ile karfl› karfl›-ya gelmesi durumunda uygulaman›n kendisine izin verilmeyen bir ha-f›za alan›na yazmaya çal›flmas› sonucu do¤rudan uygulaman›n son-land›r›lmas› söz konusu. Tabi ki var olan Plug-In’leri ve uygulamala-r› uygun flekillder düzelterek (IMAGE_SCN_MEM_EXECUTE flek-linde iflaretlemeler ile) sorunu gidermek mümkün.

Internet Explorer 8.0 taraf›nda art›k DEP Vista SP1 ve Server 2008içerisinde otomatik olarak aç›k gelecek. DEP ile beraber bir de Vis-ta’da gelen ASLR (Address Space Layout Randomization)’yi de bir-lefltirdi¤imizde ortaya güvenlik anlam›nda hofl bir manzara ç›k›yor.ASLR’nin yapt›¤› ise sistem her aç›ld›¤›nda Kernel32 gibi belle¤eyüklenen sistem ö¤elerinin her seferinde farkl› bellek noktalar›nayüklenmesini sa¤lamak. Böylece kötü niyetli bir kodun sald›rma ön-cesinde do¤ru hedefi bulmas› daha zor oluyor.

Vista içerisinde hangi uygulamalar›n DEP taraf›ndan korundu¤unugörmek isterseniz do¤rudan “Görev Yöneticisi”/ “Task Manager” içe-risinde “View/Select Columns” alt›ndan “Data Execution Prevention”kolonunu seçerek ilerleyebilirsiniz.

IE 7.0 içerisinde DEP’yi aktif hale getirmek için “Tools/Internet Op-tions/Advanced” sekmesine giderek uygun seçene¤i iflaretleyebilirsi-niz. Unutmay›n bunu yapabilmeniz için IE’yi Admin haklar› ile açm›flolman›z gerekecektir.

Kullan›c›ya Özel Act›veXÖzellikle Vista ile beraber gelen UAC (User Account Control) sonra-s›nda gelen en büyük flikayetlerden biri ActiveX kontrolleri yüklerkenadmin haklar›n›n gerekmesiydi. Kiflisel olarak kulland›¤›n›z bilgisa-yar›n›zda bu bir sorun teflkil etmese de flirket içi domainlere kay›tl› vefarkl› güvenlik s›n›rlamalar›n› olan bilgisayarlarda bu durum s›k›c›sonuçlar do¤uruyordu.

Art›k her fley de¤iflti, kullan›c›lar›n Admin haklar›na sahip olmasalarda kendi kullan›c› hesaplar›na özel olarak ActiveX uygulamalar› yük-leyebilecekler. E¤er söz konusu ActiveX uygulamas› zararl› bir kod


EXPLORER-04 3/14/09 10:31 PM Page 72

içeriyorsa bu durumun bilgisayar hiçbir flekilde zarar görmeyecektir.Var olan ActiveX uygulamalar› herhangi bir sorun yaflamadan bu sis-tem ile çal›flacak.

Kullan›c›lar›n herhangi bir ActiveX kontrolü ile karfl›laflt›klar›ndakontrolü sadece kendileri için veya tüm makine baz›nda yüklemek is-teyip istemediklerini seçebilecekler. Bu seçim flu anki Internet Explo-rer içerisinde ActiveX kontrolleri için gelen uyar› mekanizmas›na da-hil edilmifl durumda.

Siteye Özel Act›veXHaz›rlad›¤›n›z ActiveX kontrollerinin sadece belirli bir sitede çal›fl-mas›n› isteyebilirsiniz. Özellikle yüksek güvenlik amac›yla bankac›-l›k uygulamalar›nda kullan›lan ActiveX kontrolleri buna bir örnekolarak gösterilebilir. Bu k›s›tlaman›n yap›labilmesi için ActiveX uy-gulamas› gelifltirilirken “SiteLock Active Template Library”nin kul-lan›lmas› gerekiyor. Arka planda çal›flan mant›k asl›nda çok basit; In-ternet Explorer içerisinde çal›flabilecek ActiveX kontrollerinin “Safe”fleklinde iflaretlenmesi gerekir. E¤er bir ActiveX kontrolü kendi iste-di¤i alan adlar› haricinde çal›flt›r›ld›¤›nda kendisini “UnSafe” olaraktan›mlarsak IE do¤rudan söz konusu ActiveX’i pasif hale getiriyor.

Standart ATL flablonunun yerine oturan SiteLock flablonu IObject-Safety ve IObjectSafetySiteLockImpl üzerinden türüyerek Buildesnas›ndan tan›mlanan siteler d›fl›nda çal›flm›yor. SiteLock 1.14 flab-lonunu afla¤›daki adresten indirebilirsiniz.

http://www.microsoft.com/downloads/details.aspx?FamilyID=43cd7e1e-5719-45c0-88d9-ec9ea7fefbcb&displaylang=en

Kullan›c›lar ActiveX uygulamalar›n› IE 8.0 içerisinde birer Add-Onolarak görecekleri için istedikleri ayar› “Manage Add-ons” pencere-sinden yaparak belirli ActiveX’lerin sadece istedikleri sitelerde çal›fl-


ActiveX’ler art›k birer Add-On ve siteye özel yüklenebiliyorlar.

EXPLORER-04 3/14/09 10:31 PM Page 73

mas›n› sa¤layabilirler. Bu ayar “Group Policy” üzerinden de art›k ya-p›labiliyor.

HKEY_CURRENT_USER\Software\Microsoft\Windows\Current-Version\Ext\Stats\{ID}\iexplore\AllowedDomains\{Domain}

Yukar›da adres üzerinden Registry içerisinde gerekli ayarlar buluna-bilir. {ID} yerine kontrol edilmesi hedeflenen ActiveX kontrolününClass ID’si, {Domain} yerine de izin verilen domainler atanabilir.

XSS Sald›r›lar›Son dönemde XSS (Cross Site Scripting) sald›r›lar› belki de en s›kkarfl›laflt›¤›m›z güvenlik aç›klar›ndan. Bu teknik ile rahatl›kla bir websitesi ile kullan›c›s› aras›na girerek kullan›c›n›n bast›¤› tufllara kadarher tür bilgi al›nabiliyor. Bu konuda tam bir koruma sunman›n kulla-n›c› deneyimini ciddi flekilde kötü durumlara sürükleyece¤i için mini-mal koruma mekanizmalar› devreye sokulmufl.

Yaz›l›m gelifltiriciler isterler bu korumalar› sunucu taraf›ndan kapata-biliyorlar. Tek yapmalar› gereken X-XSS-Protection: 0 fleklinde ge-rekli HTTP Header bilgisinin sayfalar›na eklemek.

Bu noktada özellikle bir uyar›da bulunmak istiyorum. ‹stemci taraf›n-da bir taray›c› olarak IE 8.0’›n XSS korumas› her çeflit XSS sald›r›s›-n› korumamakla beraber kesinlikle bir yaz›l›m gelifltiricinin bu siste-me “güvenerek” hareket etmesine neden olabilecek bir yap› de¤ildir.Unutmamak gerek ki herkese IE kullanmayabilir.


XSS Korumas›.

EXPLORER-04 3/14/09 10:31 PM Page 74

MIME TYPE Kararlar›MIME Type ayarlar› normal flartlarda HTTP Header bilgisi içerisin-de saklansa da bugüne kadar Internet Explorer kendi kendine kararlarvererek daha kolay bir kullan›m sa¤lamak için MIME Type de¤iflik-likleri yapabiliyordu. Örne¤in text/plain olarak ayarlanm›fl bir dosyaiçerisinde HTML kodu varsa bu dosya aç›ld›¤›nda IE içerisinde birHTML sayfa olarak render edilir. Oysa dosya bir text dosyas›d›r ve oflekilde gösterilmelidir.

IE 8.0 ile beraber e¤er sunucudan authoritative=true HTTP headerbilgisini gönderirseniz IE sizin sunucu taraf›nda düzenledi¤iniz MIMEType ayarlar›n› sayg› göstererek herhangi bir de¤ifliklik yapmayacakt›r.

O Uygulamay› Sitemde Çal›flt›rma!Bir di¤er güvenlik aç›¤› da sitelerde t›klanarak istemci taraf›na indiri-len herhangi bir uygulaman›n veya farkl› kodun do¤rudan sitenin üze-rinde çal›flt›r›labiliyor olmas›yd›. Örne¤in bir PDF dosyas›na t›klad›-¤›nda dosyay› indirerek do¤rudan IE içerisinde açabilirsiniz. Bu ifllemiyapabilmeniz için karfl›n›zda uygun seçenekler IE taraf›nda getirilir.

E¤er kullan›c›ya sunulacak dosyay› kesinlikle kullan›c› taraf›nda dis-ke kaydedilmesini ve do¤rudan site üzerinden aç›lamamas›n› istiyor-san›z X-Download-Options: noopen HTTP Header bilgisini vererekbu ifllemin tamamlanmas›n› sa¤layabilirsiniz.

DOM Elementlerini Sorgulay›nDOM içerisinde istedi¤imiz bir nesneyi bulmak bazen çok zor olabi-liyor. Asl›nda biz k›smen bu ifllemi CSS tan›mlamalar›nda yap›yoruz.Örne¤in bir sayfadaki tüm a elementlerini seçebiliyor veya belirli birelementin içindeki farkl› elementleri de buldurabiliyoruz. ‹flte tam dabu noktada QuerySelector yap›lar› devreye giriyor ve ayn› CSS ko-mutlar› gibi komutlarla DOM’u sorgulayarak sonucunda elimizeHTML elementlerinin ulaflmas›n› sa¤l›yor.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transi-tional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head>

<title></title>


EXPLORER-04 3/14/09 10:31 PM Page 75

<meta http-equiv=”X-UA-Compatible” content=”IE=8”>

<script type=”text/javascript”>function Goster() {

var oDiv = document.getElementById(“icerik”);

var oSpan = oDiv.querySelectorAll(“div.siyah span”);

alert(oSpan[0].innerHTML);}

</script>

</head><body>

<input onclick=”Goster();” id=”Button1”type=”button” value=”button” />

<div id=”icerik”><div class=”kirmizi”>

<span>Deneme1</span></div><div class=”siyah”>

<span>Deneme2</span></div><div class=”kirmizi”>

<span>Deneme3</span></div></div>

</body></html>

Yukar›daki örnekte gördü¤ünüz üzere sayfa içerisinde icerik ad›ndabir DIV var ve bu DIV içerisinde de birden çok DIV elementleri bulu-nuyor. Bizim hedefimiz icerik DIV’i içindeki DIV’lerden class özel-li¤i siyah olan›n içindeki SPAN’in içindeki de¤eri almak. Bunu yapa-bilmek için basit bir flekilde div.siyah diyerek sorgumuzda CSS s›n›f›Siyah olan DIV’Leri buluyoruz sonras›nda da bir boflluk b›rakarakSPAN elementlerini al›yoruz. querySelectorAll komutuna verdi¤imizsorgumuz sonras›nda elimize sorguya uygun elementler ulafl›yor. Bunoktadan sonra eldeki elementler ile farkl› ifllemler yap›labilir. QuerySelector yap›lar› W3C taraf›ndan standart olarak gelifltiriliyor. Stan-dart ile ilgili tüm detaylara afla¤›daki adresten ulaflabilirsiniz.

http://www.w3.org/TR/selectors-api/


EXPLORER-04 3/14/09 10:31 PM Page 76

Her yeni taray›c› web tasar›mc›lar için yeni bir dert anlam›na gelir.Maalesef bu durum taray›c›n›n standartlara uymas› veya uymamas› ileiliflki de¤il. Bugün Internet Explorer 8.0 standartlara uygun yeni tara-ma altyap›s› ile gelse de bu sefer de eski standartlara uygun olmayansitelerimizle ilgili sorun yaflayaca¤›m›z kesin. O neden bizler için In-ternet Explorer 8.0’›n yeni özelliklerinden faydalanman›n önemi ka-dar hali haz›rda var olan sitelerimizi de hemen Internet Explorer 8 ilerahatl›kla çal›fl›r hale getirebilmek de çok önemli.

Compat›b›l›ty V›ewInternet Explorer 8.0 ile beraber asl›nda eski taray›c› motorlar› da ha-len gelmekte. Bunun nedeni eski sitelerin eski taray›c› motoru ile gös-terilmesinin flart olmas›. Bir anda tüm sitelerin yeni motora uygun fle-kilde haz›rlanmas› mümkün de¤il. Bu sistem Compatibility View ad›alt›nda farkl› bir ifllevsellik ile karfl›m›za ç›kmas›. IE8.0 eski sistemiçin haz›rlanm›fl siteleri alg›lay›p kullan›c›y› uyarabiliyor ve farkl› ta-ray›c› motorlar› aras›nda geçifl taray›c›n›n kapat›l›p tekrar aç›lmas›n›gerektirmiyor.

Compatibility View dü¤mesi.

Tasar›mc›lar için Internet Explorer 8Compatibility View 77

Sitemizi Nas›l Ayarlar›z? 79

Özel CSS Filtreleri 80

5

EXPLORER-05 3/14/09 10:31 PM Page 77

“Compatibility View” dü¤mesine basarak eski standartlara göre açt›-¤›n›z bir web sitesiyle ilgili ayar› IE 8 saklayarak bir dahaki sefere ay-n› siteyi ziyaret etti¤inizde otomatik olarak “Compatibiltiy View” se-çene¤i aktif hale getiriyor. ‹nternet üzerinden aç›lan tüm siteler nor-mal modda çal›fl›rken intranet üzerinden aç›lan tüm siteler ise otoma-tik olarak “Compatilibity View” modunda aç›l›yor. Burada önemliolan bir di¤er nokta da User Agent bilgisi. Özellikle istatistik sistem-leri için ASP.NET taraf›ndan taray›c›n›n sürüm bilgisinin al›nd›¤› du-rumlarda unutmamak gerek ki IE 8.0 “Compatibility View” içerisin-deyse sunucuya User Agent olarak IE 7 bilgisi gönderecektir. Hangisitelerin nas›l gösterilece¤ine ayr›ca Tools menüsünden “Compatibi-lity View Settings” k›sm›ndan ulaflabilirsiniz. Buradan ister tüm site-lerin IE 7 gibi gösterilmesini veya sadece adresini iletti¤iniz sitelerinIE 7 olarak aç›lmas›n› sa¤layabilirsiniz.


Hangi sitelerinde “Compatibility View” modunda aç›laca¤›n› belirleyebiliyorsunuz.

EXPLORER-05 3/14/09 10:31 PM Page 78

Sitemizi Nas›l Ayarlar›z?Tavsiye edilen tabi ki tüm sitenizi gözden geçirerek IE 8’e uygun fle-kilde gerekli düzenlemeleri yapman›z. Fakat bu süreçte h›zl› bir adap-tasyon sa¤lamak için isterseniz sitenizin IE 8 içerisinde otomatik IE 7motoru ile, yani “Compatibility View” içerisinde aç›lmas›n› da sa¤la-yabilirsiniz. Bunun için iki seçene¤iniz var;

E¤er tüm site baz›nda bu ifllemi yapmak istiyorsan›z HTTP Headerolarak afla¤›daki kodu kullanabilirsiniz;

X-UA-Compatible: IE=EmulateIE7

Sitenizdeki sadece bir sayfan›n bu modda çal›flt›r›lmas›n› istiyorsan›z,bu sefer de Meta Tag’lar›ndan faydalanabilirsiniz;

<meta http-equiv=”X-UA-Compatible” content=”IE=Emu-lateIE7” />

IIS 7.0 üzerinde bir site için genel HTTP Header tan›mlamak için afla-¤›daki kodu Web.Config dosyas›na koyman›z yeterli olacakt›r.

<system.webServer><httpProtocol>

<customHeaders><add name=”X-UA-Compatible” value=

”IE=EmulateIE7” /></customHeaders>

</httpProtocol></system.webServer>

Peki sitenizi ilk baflta IE7 moduna göre çal›flacak flekilde ayarlad›n›zve “Compatibility View” içerisinde gösterildi. Tüm istemcilerde art›ksiteniz bu modda gösterilecek flekilde kaydedildi¤i için IE8.0 ile ilgi-li uyumluluk sorunlar›n›z› halletseniz ve HTTP header bilgisi ile me-ta taglar› kald›rsan›z da herkes hala IE 7.0 modunda sitenizi ziyaret et-meye devam edecektir. Bunu aflman›n yolu ise tüm istemcileri IE 8.0modunda çal›flmaya zorlamaktan geçiyor.

X-UA-Compatible: IE=EmulateIE8

Yukar›daki gördü¤ünüz flekilde ister HTTP Header ayarlay›n ister me-ta taglar kullan›r hiç fark etmez. Art›k siteniz kesinlikle IE8.0 modunda

TASARIMCILAR ‹Ç‹N INTERNET EXPLORER 8 79

EXPLORER-05 3/14/09 10:31 PM Page 79

gösterilecek ve istemcilerde kullan›c›lar isteseler de “Compatibility Vi-ew” modunu aktif hale getiremeyecekler. E¤er siteniz daha öncesindeistemcide “Compatibility View” ile gösterilecek siteler listesinde yeral›yorduysa IE 8.0 taraf›ndan otomatik olarak o listeden de silinecektir.

Özel CSS FiltreleriCSS kurallar›na ayk›r› olsa da bugüne kadar sadece Internet Exploreriçerisinde çal›flan filtrelemeler kulland›ysan›z art›k Internet Explorer8.0 ile söz konusu filtrelemelerin yaz›m›n› de¤ifltirmeniz gerekecek-tir. Gelin ilk olarak nas›l bir filtrelemeden bahsetti¤imize bakal›m.

#seffafDiv { filter: progid:DXImageTransform.Microsoft.

Alpha(Opacity=50); }

Yukar›daki CSS s›n›f›ndaki gibi çok say›da farkl› filtre sadece Inter-net Explorer içerisinde kullan›labilir flekilde tan›mlanabiliyordu. Bufiltreleme sisteminin yaz›m›ndaki sorun tek sat›rda birden çok üst üs-te iki noktan›n bulunuyor olmas›. CSS kurallar› gere¤i bu flekilde biryaz›m mümkün de¤il. IE 8.0 ile beraber bu yaz›m flekli afla¤›daki fle-kilde de¤ifltiriliyor.

#seffafDiv { -ms-filter: “progid:DXImageTransform.Microsoft.

Alpha(Opacity=50)”; }

Böylece art›k herhangi bir sorun yaflamadan rahatl›kla bu filtreleriCSS s›n›flar›n›z aras›nda kullanabilirsiniz. Di¤er yandan flu an içinhem eski hem yeni sürüm IE taray›c›lar›nda kodlar›n›z çal›flmas› içinher iki yaz›m› da beraber kullanmak durumundas›n›z.

#seffafDiv { -ms-filter: “progid:DXImageTransform.Microsoft.

Alpha(Opacity=50)”; filter: progid:DXImageTransform.Microsoft.Alpha

(Opacity=50); opacity: .5;

}


EXPLORER-05 3/14/09 10:31 PM Page 80

Daron Yöndem



Daron Yöndem



Daron Yöndem



Daron Yöndem



Daron Yöndem



düðüm

Daron Yöndem



Daron Yöndem



IE8Daron Yöndem



IE8Daron Yöndem



IE8

Daron Yöndem



IE8Daron Yöndem

IE8



sýrt 5-50

Daron Yöndem





.Web Dilimleri






Daron YÖNDEM

KO

DLA

BD

aro

n Y

ön

de

m


Daron Yöndem





.Web Dilimleri






Daron YÖNDEM

KO

DLA

BD

aro

n Y

ön

de

m


Daron Yöndem - ie8 Ebook Tr

Education