Internet Explorer 8 Kitabını İndirmek için tıklayın

Transkript

Daron Yöndem
IE8
.Son kullanýcýlarýn gözünden IE 8 yenilikleri
.Web Tasarýmcýlar için notlar
.Görsel Arama Altyapýlarý
.Hýzlandýrýcýlar
Daron Yöndem
.Web Dilimleri
.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.
Daron YÖNDEM
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.
KODLAB
KODLAB
www.kodlab.com
Hýzlý Kolay ve Daha Güvenli!
KODLAB
www.kodlab.com
EXPLORER-kunye
3/14/09
10:21 PM
Page i
INTERNET
EXPLORER 8
daron
yöndem
Yay›n Da¤›t›m Yaz›l›m ve E¤itim
Hizmetleri San. ve Tic. Ltd. fiti.
EXPLORER-kunye
3/14/09
10:21 PM
Page ii
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¤itim 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 iii
Daron Yöndem
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çilmifltir. Uluslararası bir konuflmacı 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 Baflkanlı¤ı ve Ortado¤u
Afrika bölgesi konuflmacı ofisi baflkanlı¤ı yapmaktadır. Kendisine
http://daron.yondem.com/tr/ adresinden blogundan ulaflabilirsiniz.
EXPLORER-kunye
3/14/09
10:21 PM
Page v
v
Önsöz
Bundan y›llar önce bana ç›k›p “Bir gün Internet Explorer kitab› yazacaks›n” deseler san›r›m güzel bir espri olarak karfl›lard›m. Nas›l olur
da bir taray›c›n›n kitab› yaz›l›r? Ne gerek var? De¤il mi?
Oysa bugün kendimi bu kitapç›¤› yazarken buluyorsam asl›nda bu baz› fleylerin de¤iflti¤inin de kan›t›. Belki de taray›c›lar› art›k haklar›nda
kitap yaz›labilecek ifllevsellikte yaz›l›mlar olarak görmenin zaman›
geldi. Bugün Internet Explorer 8’e bakt›¤›mda hakk›nda yaz›l›mc›lara ve tasar›mc›lara anlat›labilecek o kadar güzel fleyler görüyorum ki
bunlar›n hepsini derleyip sizlere minik bir kitapç›k olarak ulaflt›rmay›
uygun gördüm.
Kitapç›¤›n yaz›m süreci Internet Explorer 8’in Beta 1 günlerinde bafllad› 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 sonra oluflabilecek tüm geliflmeleri http://daron.yondem.com/tr/ adresinden, blogumdan takip edebilirsiniz. Ayr›ca bana her türlü yorumunuzu [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 sizin
de ücretsiz olarak dostlar›n›za ister dijital ister bask› kopyas›n› al›p
gönderebilece¤inizi belirtmek isterim.
Görüflmek üzere...
Daron Yöndem
Microsoft Regional Director, MVP
EXPLORER-kunye
3/14/09
10:21 PM
Page vi
vi
Internet Explorer; her zaman internet deneyimini en üst seviyede, h›zl› ve güvenli yaflayabilmemiz için Microsoft olarak gelifltirmifl oldu¤umuz ve günlük online dünyam›z›n önemli bir parças› olan taray›c›m›z.
Web 2.0 ile birlikte de¤iflen kullan›c› beklentileri ve Web 3.0 için
önemli bir altyap› oluflturacak Anlamsal Web için tasarlanm›fl olan en
yeni sürümü olan Internet Explorer 8 hakk›nda yaz›lm›fl elinizde tuttu¤unuz bu kitap tüm teknik geliflmeleri detaylar›yla içermektedir. Microsoft Regional Director ve MVP ünvanlar›na sahip olan Daron Yöndem taraf›ndan yaz›lm›fl bu kitap Türkiye’de Internet Explorer 8’e özel
yeni içeriklerin nas›l gelifltirilebilece¤ini ve yeni gelen teknik özelliklerle yeni nesil web teknolojilerine nas›l adapte olunabilece¤ini detaylar›yla anlatmaktad›r. Daron Yöndem’i bu baflar›l› çal›flmas›ndan dolay› kutluyor, bu kitaptaki paylafl›mlar›n yeni fikirler ve projeler gelifltirecek 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
EXPLORER-icindekiler
3/14/09
10:22 PM
Page vii
‹Ç‹NDEK‹LER
ÖNSÖZ
1
NEDEN INTERNET EXPLORER 8?
Performans
Ayn› Anda 2 Yerine 6 Ba¤lant›
Script Performanslar›
Kolay Kullan›m
Yeni Trendler: Accelerator, Web Slice, Search Suggestion
Güvenlik
Yaz›l›m Gelifltirici ve Tasar›mc› Dostu
Sistem Yöneticileri
1
1
2
2
2
2
3
3
4
2
INTERNET EXPLORER 8 DEVR‹M‹
Ekstra Güvenlik
InPrivate Pencereleri
InPrivate Blocing
Phishing Korumas› ve SmartScreen
Kolay Kullan›m
ActiveX Yüklemeleri
Sekme Renklendirme
Ak›ll› Adres Çubu¤u
Yeni Trendler
H›zland›r›c› (Accelerator)
Görsel Arama (Visual Search)
Web Slice
7
8
8
9
9
11
11
12
14
15
15
18
20
3
WEB’DE YEN‹ TRENDLER
Bir H›zland›r›c› (Accelerator) Nas›l haz›rlan›r?
Son Ad›mlar...
Art›k Haz›r›z
Görsel Arama Nas›l Haz›rlan›r?
Görsel Arama ve Arama Sa¤lay›c›lar›n ‹flbirli¤i
Sunucu Taraf›nda Neler Yapmal›?
Sunucuda Gerçek Zamanl› XML Üretimi
C# ve ASP.NET ile XML Üretmek
VB ve ASP.NET ile XML Üretmek
25
25
30
32
32
35
36
39
39
41
EXPLORER-icindekiler
3/14/09
10:22 PM
Page viii
viii INTERNET EXPLORER 8
PHP ile XML Üretmek
Görsel Aramalar için JSON Veri Kayna¤›
Web Dilimleri Nas›l Haz›rlan›r
Çal›flma Yap›s›
Display Source De¤iflikli¤i
Farkl› Web Dilimleri’ni Birbirine Ba¤lamak
Web Dilimi’ne Kaynak Olarak RSS Kullanmak
44
46
47
48
48
50
50
4
YAZILIM GEL‹fiT‹R‹C‹LER ‹Ç‹N INTERNET EXPLORER 8
JavaScript Yenilikleri
tostaticHTML Metodu
Dahili JSON S›n›flar›...
AJAX Navigasyon
Online ve Offline Çal›flma Yap›s›
Cross Domain Request Nesnesi
DOM Veri Ambar›
Session Storage
Local Storage
Yaz›l›mc› Araçlar›
CSS ve HTML DOM Gerçek Zamanl› Düzenleme
JavaScript Debuging
Profiler ile Optimizasyon
Image Optimizasyonu
Pratik Araçlar
Önce Güvenlik
Data Execution Prevention
Kullan›c›ya Özel ActiveX
Siteye Özel ActiveX
XSS Sald›r›lar›
MIME TYPE Kararlar›
O Uygulamay› Sitemde Çal›flt›rma!
DOM Elementlerini Sorgulay›n
53
53
53
55
57
58
60
64
64
65
65
65
67
68
69
70
71
71
72
73
74
75
75
75
5
TASARIMCILAR ‹Ç‹N INTERNET EXPLORER 8
Compatibility View
Sitemizi Nas›l Ayarlar›z?
Özel CSS Filtreleri
77
77
79
80
EXPLORER-01
3/14/09
10:27 PM
Page 1
Neden Internet
Explorer 8?
Performans
1
Ayn› Anda 2 Yerine 6 Ba¤lant›
2
Script Performanslar›
2
Kolay Kullan›m
2
Yeni Trendler: Accelerator,
Web Slice, Search Suggestion
2
Güvenlik
3
Yaz›l›m Gelifltirici ve
Tasar›mc› Dostu
3
4
Taray›c› savafllar› gün geçtikçe k›z›fl›yor. Global anlamda kullan›m
oranlar›na bakt›¤›m›zda Internet Explorer bu savafl›n galibi gibi gözükse de bu durum savafl›n devam etmedi¤i anlam›na tabi ki gelmiyor. Önümüzdeki dönemde Internet Explorer 8.0, bu savafl›n en a¤›r
toplar›ndan biri diyebiliriz. Peki, neden Internet Explorer 8?
Performans
Bir internet taray›c›s›ndan tek bekledi¤imiz özellik performans olmasa da, bu durum performans›n önemini yads›yaca¤›m›z anlam›na gelmiyor. Internet Explorer 8.0 ile beraber performans noktas›nda yap›lan belki de en büyük yenilik art›k her bir taray›c› sekmesinin arka
planda ayr› birer uygulama olarak çal›fl›yor olmas›. Böylece tek bir
uygulama içerisinde thread say›s› azalt›labilirken sekmelerin birbirinden ba¤›ms›z olarak hata almas› halinde birbirlerini kurtarabilmeleri
gibi avantajlar da ortaya ç›k›yor. Tüm bunlar›n detaylar›ndan kitab›m›z›n ileriki bölümlerinde kullan›c› tarafl› yenilikleri ele al›rken detayl› olarak bahsedece¤iz.
NOT
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 kullanabilirler.
1
EXPLORER-01
3/14/09
10:27 PM
Page 2
2 INTERNET EXPLORER 8
Ayn› anda 2 yerine 6 ba¤lant›
Y›llar önce, 1999 senesinde, HTTP 1.1 standartlar›na göre taray›c›lar›n
ayn› anda bir sunucuya sadece iki ba¤lant› kurabileceklerine dair bir
kural belirlenmifl. Aradan geçen 9 y›lda art›k bu s›n›r›n günümüz genifl
bant internet altyap›s›nda çok da anlaml› olmad›¤›n› söyleyebiliriz. IE
8.0 ile beraber bu s›n›r alt›ya yükseltiliyor. Ayn› anda 2 ba¤lant› yerine 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› taraf›na indirilmeye bafllanmas› ciddi performans art›fl› sa¤layacakt›r.
Scr›pt Performanslar›
AJAX’›n kullan›lmad›¤› web sitesi neredeyse kalmad›. ‹stemci taraf›nda Script’ler kullanarak art›k ço¤u ifllemi sunucu yerine istemcide yapmay› tercih ediyoruz. Bu çerçevede Script’lerin çal›flma h›z› bir taray›c›n›n genel performans› ile çok yak›ndan alakal›. Haberler güzel; IE
8.0 JavaScript SunSpider testinde IE 7.0’a k›yasla %400 daha h›zl›!
Kendi testinizi yapmak isterseniz SunSpider testine afla¤›daki adresten ulaflabilirsiniz;
http://www2.webkit.org/perf/sunspider-0.9/sunspider.html
Kolay Kullan›m
Çok h›zl› bir taray›c›ya sahip olal›m derken tabi ki ifllevselliklerden de
vazgeçemeyiz. IE 8.0 ile beraber belki de Internet Explorer tarihindeki en güzel araçlar geliyor. Bu araçlar hem do¤rudan kullan›c›lar›n hayat›n› kolaylaflt›r›rken hem de yaz›l›m gelifltiricileri ve tasar›mc›lar›
da mutlu ediyor.
Yeni Trendler: Accelerator,
Web Sl›ce, Search Suggest›on
Internet Explorer’› kullan›m flekliniz de¤iflecek. Kitab›m›z›n ileriki bölümlerinde hem kullan›c› tarafl› hem de yaz›l›mc› ve tasar›mc›lar için
detayl› olarak inceleyece¤imiz Accelerator, Web Slice ve Search
Suggestion yap›lar› sizi Internet Explorer’a gönülden ba¤layacak. Accelerator’lar ile sürekli internette gezinirken tekrarlad›¤›n›z ifllemlerin
fark›na varacak ve kendinize daha h›zl› bir çal›flma ortam› sa¤layacaks›n›z. Web Slice’lar ise sizin yerinize interneti takip edecek. Search
Suggestion sistemini gördü¤ünüzde arad›¤›n›z› bulman›n ne kadar ko-
EXPLORER-01
3/14/09
10:27 PM
Page 3
laylaflt›¤›n› göreceksiniz. Detaylar› girmek için sab›rs›zland›¤›n›z› biliyorum, az kald›.
Internet Explorer ilk aç›l›fl›nda yeni özelliklere h›zl›ca ulaflabilece¤iniz
linkler karfl›n›za geliyor.
Güvenlik
InPrivate taray›c› özelli¤i ile tan›flt›¤›n›zda gönlünüz o kadar rahat
edecek ki kulland›¤›n›z bilgisayarlarda baflka bir internet taray›c› aramayacaks›n›z. Sadece size özel bir Internet Explorer oturumu düflünün
ki siz kapatt›¤›n›zda sizinle ilgili hiçbir iz kalm›yor. Ne taray›c› geçmifli, ne cookie (çerezler) ne de yazd›¤›n›z bilgiler ve flifreleriniz. Taray›c›y› kapatt›¤›n›z anda her fley uçup gidiyor. Gönül daha ne ister?
Phishing korumas›, XSS engelleme sistemleri ve daha birçok yenilik
var. Tüm bunlar›n detaylar›n› da ileriki bölümlerde inceleyece¤iz.
Yaz›l›m Gelifltirici ve
Tasar›mc› Dostu
IE 8.0 ile beraber yaz›l›m gelifltiriciler ve tasar›mc›lar olarak da mutlulu¤un yollar›nda ilerliyoruz. CSS 2.1 deste¤i, HTML 5, AJAX ve
JavaScript yenilikleri, Font Embedding düzenlemeleri ile art›k IE
8.0’da çal›flacak web sitelerini tasarlamak ve programlamak çok daha
zevkli olacakt›r. Kitab›m›z›n özellikle yaz›l›mc›lara ve tasar›mc›lara
3
EXPLORER-01
3/14/09
10:27 PM
Page 4
hitap eden bölümlerde teknik detaylardan da bahsederek Internet Explorer 8.0’›n bir yaz›l›mc›n›n veya tasar›mc›n›n hayat›n› da nas›l kolaylaflt›rd›¤›na göz ataca¤›z.
Internet Explorer 8.0 ile beraber gelen Developet Tools paketi
yaz›l›mc›lar ve tasar›mc›lar›n iflini kolaylaflt›rmay› hedefliyor.
Birçok yeni özellik geliyor, tüm bunlar›n tabi ki güvenlik taraf›nda da
kontrol mekanizmalar› ile ele al›nabilmesi flart. Windows Server 2008
üzerinde Internet Explorer 8 ile beraber IE çerçeveli Group Policy say›s› toplamda 1300’ü geçiyor. Tabi tüm bunlar› ancak istemcilere IE
8.0 yükledikten sonra kullanabilirsiniz, bunun için de toplu yükleme
seçeneklerinin yan› s›ra kendinize özel IE8.0 yükleme paketleri oluflturman›z için gerekli detaylar› da kitab›m›zda inceliyoruz.
NOT
GROUP POLICY
Windows Server iflletim sistemlerinde Active Directory üzerinde bilgisayarlar›nda ve uzak kullan›c›nlar›n merkezi yönetim ve merkezi konfigürasyonunu sa¤lar.
EXPLORER-01
3/14/09
10:27 PM
Page 5
Internet Explorer 8.0 ile beraber gelen GPO’lardan baz›lar›
‹flte tüm bu yenilikler ve eflsiz kolayl›klar nedeniyle Internet Explorer
8.0! Daha fazlas› için sayfay› çevirin...
5
EXPLORER-01
3/14/09
10:27 PM
Page 6
EXPLORER-02
3/14/09
10:28 PM
Page 7
2
Internet
Explorer 8 Devrimi
Ekstra Güvenlik
InPrivate Pencereleri
8
Yeni Trendler
15
8
15
InPrivate Blocing 9
Görsel Arama (Visual Search)
18
Phishing Korumas› ve
SmartScreen
Web Slice
20
Kolay Kullan›m
9
11
ActiveX Yüklemeleri
11
Sekme Renklendirme
12
14
Internet Explorer’›n tarihine bakt›¤›m›zda “Devrim” kelimesi art›k
özledi¤imiz sözcükler aras›nda yerini alm›flt›. Peki, nas›l oluyor da 8.0
sürümü ile bu özlem bitiyor? Kitab›m›z›n bu bölümünde Internet Explorer 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ças› haline gelecek yeni ifllevsellikleri kaps›yor.
Ekstra Güvenlik
Normal hayatta oldu¤u gibi dijital hayatta da her fleyin yan› s›ra en
çok önem verdi¤imiz detaylardan biri de Güvenlik konusu. Özellikle
internette gezerken bizim bilgimiz dahilinde olsun veya olmas›n sistemimizin güvenli¤i ile ilgili riskler belki de can›m›z› en çok s›kan
noktalar aras›nda.
Bir internet taray›c›n›n tüm “hayat›m›z› kolaylaflt›ran” özelliklerini
bir kenara koyup söz konusu taray›c›y› kullan›p kullanmayaca¤›m›z
karar›n› belki de sadece sa¤lad›¤› güvenlik özellikleri çerçevesinde
bile verebiliriz. Özellikle E-Ticaret’in gün geçtikçe hayat›m›z›n göbe¤ine oturdu¤unu düflünürsek IE 8.0 ile beraber gelen kullan›c› taraf›ndaki güvenlik yenilikleri çok önemli.
InPr›vate Pencereleri
Bir yaz›l›mc› olarak inceledi¤imiz yaz›l›mlara gelen yeni özelliklerini baz›lar›n› gördü¤ümde “Neden bu kimsenin akl›na bugüne kadar
EXPLORER-02
3/14/09
10:28 PM
Page 8
gelmedi?” sorusunu kendime soruyorum. IE 8.0’›n InPrivate Browsing özelli¤i de bu özelliklerden biri.
Bir Internet Explorer penceresi düflünün ki kapatt›¤›n›zda her fley eskisi gibi olacak. Taray›c› geçmifli, cookie, Temp dosyalar› ve geri kalan her fley taray›c›y› kapatt›¤›n›z anda otomatik olarak yok olsa, silinse ne kadar güzel olurdu de¤il mi? Tabi tüm bunlar›n varsay›lan
ayarlarda olmamas› gerekiyor. Sadece istedi¤imizde böyle geçici bir
pencere oluflturabilmeliyiz.
InPrivate pencereleri açabilmek için taray›c› içerisindeki Safety menüsünden
InPrivate Browsing komutunu verebilirsiniz.
InPrivate taray›c› pencereleri bizim tüm bu isteklerimizi karfl›l›yor.
InPrivate olarak açt›¤›m›z bir pencereyi kapatt›¤›m›zda o pencere ile
ilgili her fley yok ediliyor. IE 8.0 içerisinde SafetyèInPrivate Browsing menüsünden açabildi¤imiz InPrivate pencerelerini adres çubu¤undaki InPrivate yaz›s›ndan da tan›yabiliyoruz.
InPrivate pencerelerinde adres çubu¤unda InPrivate logosunu görebilirsiniz.
InPrivate pencerelerini özellikle internet cafe gibi ortamlarda hat›rlamak ve kendi bilgisayar›n›zda olmaman›za ra¤men özel bilgilerinizi
girmek veya izlemek zorunda oldu¤unuz durumlarda s›kça kullanmakta güvenlik aç›s›ndan büyük fayda olacakt›r.
EXPLORER-02
3/14/09
10:28 PM
Page 9
InPr›vate Block›ng
Do¤rudan son kullan›c›n›n hissedece¤i bir sistem olmasa da InPrivate Browsing’e ek olarak ayr›ca bir de InPrivate Blocking mekanizmas› var. Bu sistemi anlatman›n en kolay yolu sistemin engelledi¤i
güvenlik aç›¤›n› anlatmak geçiyor.
Varsayal›m ki birinci.com sitesini geziyoruz ve bu esnada sinsi.com
sitesinden bir JavaScript dosyas› ça¤r›ld›. Art›k sinsi.com bizi tan›yor, orada da bir oturumumuz var. Bir sonraki ad›mda ikinci.com
ad›nda bir siteyi ziyaret ettik ve flans eseri bu sitede de yine sinsi.com’dan ayn› JavaScript dosyas› eklenmifl. An itibari ile sinsi.com
bizim ikinci.com’a gelmeden önce hangi sitede bulundu¤umuzu biliyor. Hatta bu senaryo daha da uzat›labilir ve ayn› taray›c› oturumu
içerisinde 20 önceki siteye kadar nereleri gezdi¤imiz sinsi.com taraf›ndan takip ediliyor olabilir. Tabi bunlar›n hepsinin gerçekleflmesi
için ayn› JavaScript’in tüm bu sitelerden ça¤r›lm›fl olmas› flart.
‹flte yukar›da anlatt›¤›m›z güvenlik aç›¤›n› engellemek amac› ile InPrivate Blocking gelifltirilmifltir. Sistemin amac› kullan›c›ya özel bilgilerin farkl› sitelere kullan›c› fark›nda olmadan ulaflmas›n› engellemek.
E¤er InPrivate Blocking aktif ise taray›c› her sitede harici olarak yüklenen script’lerin listesini sakl›yor ve durumuna göre baz› script’leri
de aktif edebiliyor.
Ph›sh›ng Korumas› ve SmartScreen
Phishing olarak adland›rd›¤›m›z güvenlik aç›¤› asl›nda a¤›rl›kl› olarak sosyal bir sald›r› mekanizmas› da say›labilir. Phishing’i teknik
olarak tamamen engellemek mümkün de¤il. Peki, nedir Phishing? Basit 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 bankam.com adresini ziyaret ediyorsunuz. fians eseri size bir e-posta geldi 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 ebankam.com ad›nda bir adres görmeniz halinde e¤er bu durumdan rahats›z olup adresin gerçekten sizin bankan›za ait olup olmad›¤›n› kontrol 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çekten bankan›za ait olup olmad›¤›n› bilme flans› yok. Fakat en az›ndan
kontrol edilebilecek baflka noktalar var.
9
EXPLORER-02
3/14/09
10:28 PM
Page 10
SmartScreen Filter kullan›c›n›n ziyaret etti¤i adreste
bir gariplik oldu¤unu alg›l›yor.
Örne¤in, bir alan ad› de¤il de do¤rudan bir web sunucusunun IP adresine yönlendirilmifl iseniz büyük ihtimal ile bu dinamik bir IP adresidir ve söz konusu sunucu geçerli bir kurumsal web sunucusu de¤ildir.
Bu gibi durumlar› alg›layan SmartScreen, Filter Phishing konusunda
kullan›c›y› uyararak içerisine düflülebilecek kötü durumlar› azaltmay›
hedefliyor.
EXPLORER-02
3/14/09
10:28 PM
Page 11
SmartScreen Filter “Zararl›” olarak raporlanm›fl bir siteye eriflimi engelliyor.
Kolay Kullan›m
Bilgisayar bafl›nda bulundu¤umuz süre boyunca en çok kulland›¤›m›z
yaz›l›mlar› bir düflünelim. Akl›n›za gelenler aras›nda internet taray›c›n›z›n ilk beflte olaca¤›ndan eminim. Bu kadar yo¤un bir flekilde kulland›¤›m›z bir yaz›l›m›n tabi ki olabildi¤ince iflimizi kolaylaflt›rmas›
ve h›zland›rmas› da gerekiyor. Birazdan IE 8.0 ile beraber gelen ve
detaylarda sakl› olan ufak ama bir o kadar da de¤erli özelliklere göz
ataca¤›z. Esas sürprizimi bölümün sonuna sakl›yorum.
Act›veX Yüklemeleri
ActiveX yüklemeleri için “bafl›m›z›n belalar›” desek herhalde hiç de
yanl›fl olmaz. ActiveX yüklemesi gerektiren bir sayfada karfl›m›za ç›kan güvenlik uyar›s› sonras› sayfay› tekrar açmak zorunda kalmak veya yönetici haklar›na sahip olmad›¤›m›z bir bilgisayarda ActiveX’leri yükleyemedi¤imiz için çok basit web uygulamalar›n› bile kullanamamak neredeyse günübirlik s›k›nt›lar›m›z aras›nda yer al›yor. Bu s›k›nt›lar asl›nda sadece son kullan›c›n›n de¤il, dolayl› olarak sistem
yöneticilerinin ve programc›lar›n da s›k›nt›lar› aras›nda.
11
EXPLORER-02
3/14/09
10:28 PM
Page 12
Özellikle Vista ile beraber gelen UAC (User Account Control) sonras›nda bu dertler gergin senaryolara sebep olabiliyor. Ama art›k her fley
de¤iflti, kullan›c›lar yönetici haklar›na sahip olmasalar da kendi kullan›c› hesaplar›na özel olarak ActiveX uygulamalar› yükleyebilecekler.
E¤er söz konusu ActiveX uygulamas› zararl› bir kod içeriyorsa bu durumun bilgisayara hiçbir flekilde zarar› dokunamayacak. En güzel haber ise yaz›l›m gelifltiriciler için; var olan ActiveX uygulamalar› herhangi bir sorun yaflamadan bu sistem ile çal›flabiliyor.
Kullan›c›lar herhangi bir ActiveX kontrolü ile karfl›laflt›klar›nda kontrolü sadece kendileri için veya tüm makine baz›nda yüklemek isteyip
istemediklerini seçebilecekler. Bu seçim flu anki Internet Explorer içerisinde ActiveX kontrolleri için gelen uyar› mekanizmas›na dahil edilmifl durumda.
ActiveX yüklemeleri art›k yönetici haklar› olmaks›z›n da çal›flabiliyor.
Sekme Renklendirme
Internet Explorer 7 ile beraber internet taray›c›s› içerisinde sekmeler
(tabs) kullanmaya iyice al›flt›k. Fakat bazen çok say›da sekme aç›nca
hangi sekmenin hangi konuyla iliflkili oldu¤unu bulmak zor olabiliyor.
Varsayal›m ki, iki farkl› konuda live.com üzerinde birer arama yapt›n›z ve arama sonuçlar›n›n bulundu¤u sayfalar› açarak ve yine o sayfalardan da baflka sayfalar› yeni sekmelerde açarak araflt›rman›za devam
ediyorsunuz. Peki, hangi sekmeler hangi araman›zla iliflkiliydi?
EXPLORER-02
3/14/09
10:28 PM
Page 13
Farkl› kaynaklardan aç›lan sekmeler farkl› renklerde gösteriliyor.
Internet Explorer 8.0 ile beraber art›k açt›¤›n›z her sekme kendi sahibini tan›yor. Bir anlamda taray›c›n›z sizin iki veya daha fazla say›da
farkl› yoldan interneti gezdi¤inizi alg›layarak bu yollar› da aç›k bir flekilde gösterebilmek ad›na sekmeleri farkl› renklerle grupluyor. Hayat› kolaylaflt›ran ufak ve hofl bir detay de¤il mi?
Sekme gruplar›n› sa¤ tufl ile gelen menüden yönetebilirsiniz.
13
EXPLORER-02
3/14/09
10:28 PM
Page 14
Taray›c› içerisindeki adres çubu¤u bir taray›c›da en çok kullan›lan
yerlerden biridir. Sürekli adres çubu¤una bir adres yazar›z, daha önce
yazd›¤›m›z adresleri arar›z ve tüm internet gezintimiz boyunca sürekli adres çubu¤unu kullan›r›z. Internet Explorer ekibi de bunun fark›nda oldu¤u için adres çubu¤unda da baz› de¤ifliklikler yap›lm›fl. Bunlardan ilki “Search Suggestion” entegrasyonu. Search Suggestion
konusunda detaylara ileriki bölümlerde de¤inece¤iz fakat bu aflamada
önemli olan bizim kullan›c› olarak istedi¤imiz bir arama mekanizmas›n› IE içerisine entegre ettikten sonra adres çubu¤undan da bu sistemi kullanabiliyor olmam›z.
Adres çubu¤unda hem arama sonuçlar› hem de adres geçmifli beraber.
Adres çubu¤unda do¤rudan arama yapt›rabilmek için tek yapman›z gereken arataca¤›n›z sözcükleri yazmadan önce bir soru iflareti (?) koymak. Böylece sistem otomatik olarak varsay›lan Search Provider’›n,
varsa Search Suggestion mekanizmas›n› da kullanarak uygun arama sonuçlar›n› taray›c› geçmifli ile beraber bir mini rapor olarak sunacakt›r.
EXPLORER-02
3/14/09
10:28 PM
Page 15
Adres çubu¤unda diskteki klasör ve dosyalar› görerek
istedi¤imiz dosyay› IE ile açabiliyoruz.
Belki nadiren de olsa Internet Explorer içerisinde sistemimizdeki dosyalar› da açmak isteyebiliriz. Bu dosyalar bazen basit birer JPEG resim dosyas› olabilirken belki de do¤rudan IE içerisinde aç›labilen XPS
dosyalar› da olabilir. Bu gibi durumlarda adres çubu¤undan diskin
içeri¤ini gezerek istedi¤imiz dosyay› h›zl›ca bulabilmek büyük avantaj sa¤lar. ‹flte karfl›n›zda adres çubu¤unda Visual Studio içerisinde
Intellisense yap›s›na benzeyen disk gezgini.
Yeni Trendler
Geldik bölümün en heyecanl› k›sm›na. IE 8.0 ile beraber art›k internette sörf sporuna yeni bir ak›m geliyor diyebiliriz. Bu ak›m› oluflturan kelimeleri Accelerator, Search Suggestion ve Web Slice fleklinde özetleyebiliriz. Tüm bunlar internette sörf yapma fleklinizi, webi
kullanma mant›¤›n›z› ve tüm al›flkanl›klar›n›z› de¤ifltirmeye aday yepyeni araçlar. Hemen gelin bu yeni dünyaya dal›p h›zl› bir tur atal›m ve
nas›l olacak da IE al›flkanl›klar›m›z› de¤ifltirecek görelim.
‹ngilizce kelime anlam› h›zland›r›c› olan Accelerator yap›s›, asl›nda
fark›nda olmadan gün içerisinde defalarca kulland›¤›m›z web tabanl›
servisleri daha rahat ve h›zl› kullanabilmemiz için gerekli altyap›y› sunuyor. Gelin beraber bir düflünelim, internette gezinirken sürekli yapt›¤›m›z ve tekrar etti¤imiz ifllemler nelerdir? San›r›m birincisi arama
motorlar›n› kullanmak, kiflisel olarak düflündü¤ümde benim en s›k
kulland›¤›m servislerden biri de harita servisleri. Bir web sitesinde gördü¤üm adresin tam olarak nerede oldu¤u? Oraya nas›l gidebilece¤im?
15
EXPLORER-02
3/14/09
10:28 PM
Page 16
Baflka neler olabilir düflünelim... Sözlük hizmetleri de bu servisler
aras›nda yerini alabilir, bilmedi¤im bir kelimeyi h›zl› bir flekilde
Türkçeye çevirerek anlam›n› ö¤renmek istedi¤imde kütüphaneye uzan›p bir sözlük bulmaktansa hemen internette online bir sözlük kullanmay› tercih ederim.
Tüm bu servislere bakt›¤›m›zda asl›nda sürekli ayn› fleyi tekrar etti¤imizi görebiliriz. ‹nternette karfl›laflt›¤›m›z bir kelimeyi, adresi veya
bilgiyi al›r baflka bir internet servisine teslim eder ve uygun bir sonucu gözle görmek isteriz. Bu sonuç bazen bir harita, bazen bir arama
sonucu bazen de farkl› dilde bir kelimenin aç›klamas› olabilir. Tüm bu
örneklerde asl›nda hep ayn› mekanizma çal›fl›yor ve bu ifllemleri biz
defalarca ayn› flekilde tekrarl›yoruz. ‹flte Accelerator’lar bu noktada
devreye girip tekrarlad›¤›m›z bu süreçleri k›saltmay› hedefliyor.
Accelerator’lara ulaflmak için Internet Explorer içerisinde herhangi
bir web sitesini gezerken web sitesi üzerinde sa¤ tufl ile t›klamak yeterli olacakt›r. Karfl›n›za ç›kan menüde her bir Accelerator yap›s› için
birer komut göreceksiniz. Accelerator’lar›n baz›lar› sadece içerisinde
bulunulan sayfan›n adresi ile ilgilenirken (Örne¤in içerisinde bulundu¤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›flacakt›r (Örne¤in seçili adresi haritada gösteren bir Accelerator).
LiveMaps Accelerator’›n› kullanarak seçti¤imiz bir adresi
do¤rudan haritada görebiliyoruz.
EXPLORER-02
3/14/09
10:28 PM
Page 17
Accelerator’lar›n baz›lar› an›nda sonucu ek bir pencerede gösterebilirken baz›lar› sadece t›kland›¤›nda baflka bir sekme veya pencere açarak sonucu gösterebilirler. Sisteminize yeni Accelerator’lar› ancak
Accelerator sa¤layan web sitelerinde uygun linklere t›klayarak yükleyebilirsiniz. Accelerator’lar›n programatik olarak nas›l haz›rland›¤›
ile ilgili detaylara bir sonraki bölümümüzde de¤inece¤iz.
Manage Accelerator k›sm›ndan sistemde yüklü tüm
Accelerator’lar› yönetebilirsiniz.
Herhangi bir Accelerator ilk defa sisteme yüklendi¤inde do¤rudan
menülerde yerini almaz. More Accelerators menüsüne yerleflen yeni
Accelerator’lar› kullan›c›lar isterlerse ana menüye tafl›yabilirler. Bunun için taray›c› içerisinde sa¤ tufl ile gelen menüden Manage Accelerator komutunu vererek uygun bölüme geçmeleri gerekir.
17
EXPLORER-02
3/14/09
10:28 PM
Page 18
Manage Accelerator bölümünden isterseniz sistemdeki
Accelerator’lar› silebilirsiniz.
Manage Accelerators bölümünde kullan›c›lar hangi Accelerator’lar›n ana menüde gözükece¤ine karar vermek için istedikleri Accelerator’› seçerek sa¤ altta gelen dü¤melerden Set as Default dü¤mesine
t›klayabilirler. Ayn› flekilde ana menüde yer alan bir Accelerator’› alt
menüye göndermek için de Remove as default dü¤mesi kullan›labilir. Manage Accelerators penceresinde herhangi bir Accelerator seçildi¤inde istenirse Disable dü¤mesi ile bu Acceletor pasif hale getirilebilir 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› entegre etme olana¤› tan›d›. Böylece kullan›c›lar›n taray›c›n›n sol üstündeki ufak kutucu¤a yazd›klar› aramalar otomatik olarak taray›c›ya yüklenmifl Search Provider içerisindeki kurallara göre söz konusu arama
motoruna gönderilip taray›c› içerisinde sonuçlar gösteriliyordu.
Internet Explorer 8.0 ile beraber Search Provider yap›s›na Visual Search ad›nda yeni bir sistem eklendi. Bu sistemin amac› kullan›c›lar
aramak istedikleri kelimeleri taray›c› içerisinde yazarken otomatik
olarak olas› sonuçlar› yine taray›c› ile entegre olarak göstermek.
EXPLORER-02
3/14/09
10:28 PM
Page 19
Yaz›l›mc› kimli¤iyle konuya bakarsak asl›nda bir süredir web ortam›nda al›fl›k oldu¤umuz AJAX ile kurulan AutoComplete sistemlerinin bir türevi ile karfl› karfl›ya oldu¤umuzu söyleyebiliriz. Tabi bu sistemin kullan›labilmesi için Internet Explorer’a arama yap›lacak arama
motorunun Search Provider’›n›n yüklenmifl olmas› ve söz konusu Search Provider’›n da Visual Search sistemini desteklemesi gerekiyor.
Bu konudaki teknik detaylar› bir sonraki bölümümüzde derinlemesine inceleyece¤iz.
Görsel Arama sistemi aramalarda otomatik sonuçlar› gösteriyor.
Sisteminize herhangi bir Görsel Arama eklemek için özünde bu deste¤e sahip bir Search Provider eklemeniz gerekiyor. Search Provider’lara farkl› web sitelerinden ulaflabilece¤iniz gibi isterseniz do¤rudan Internet Explorer’›n web tabanl› Search Provider galerisini de
Find More Providers komutu ile ziyaret edebilirsiniz.
Yüklemifl oldu¤unuz Search Provider’lar› silmek veya varsay›lan arama motoru olarak atamak için arama kutucu¤unun yan›ndaki oka basarak Manage Search Providers komutunu verebilirsiniz.
19
EXPLORER-02
3/14/09
10:28 PM
Page 20
Search Provider’lar›n hepsini bu pencereden yönetebilirsiniz
“Manage Search Providers” alt›nda kay›tl› arama motorlar›n›n taray›c›
arayüzünde gösterilmesi s›ras›n› de¤ifltirebilece¤iniz gibi istedi¤iniz
bir Provider yap›s›n› Remove dü¤mesi ile sistemden silebilirsiniz de.
Web Sl›ce
Benim en favori özelli¤ime geldik. Web Slice’lar›n mant›¤›nda bir
web sitesinin belirli bir bölümünü kesip sürekli o bölümü takibe almak yat›yor. Söz konusu kesik bölümde herhangi bir de¤ifliklik oldu¤unda taray›c› sizi hemen haberdar ediyor ve ister yine o kesi¤i ister
tüm sayfay› yeniden inceleyebiliyorsunuz.
Tabi sanal ortamda bir fleyleri kesmek pek mümkün de¤il, o nedenle
tam olarak neden bahsetti¤imize gerçek bir örnekle göz atal›m. Varsayal›m ki en sevdi¤in haber sitesindeki haberleri takip etmek istiyorsunuz veya bir aç›k artt›rma sitesindeki belirli bir ürünün durumunu
sürekli kontrol etmeniz gerekiyor. Bu gibi senaryolarda kullanabilece¤imiz teknolojilerden biri RSS’ler. E¤er karfl› taraf size bir RSS kayna¤› sa¤larsa söz konusu RSS’i RSS Okuyucu program›n›za ekleyerek takip edebilirsiniz. Bu durum belki bir haber sitesini takip etmek
için uygun olsa da maalesef aç›k artt›rma sitesindeki örnek için pek
kolay bir çözüm olmayacakt›r. K›sa bir süre için takip etmek istedi¤iniz ufak verileri tek tek bir RSS okuyucuya eklemenin zahmetini geç-
EXPLORER-02
3/14/09
10:28 PM
Page 21
sek bile maalesef araya ikinci bir program veya arayüz eklemifl olman›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 taray›c›m›z›n bir parças› haline getirebiliyoruz. Tabi bu ifllemin yap›labilmesi için söz konusu web sitesi taraf›ndaki programc›lar›n ve tasar›mc›lar›n yapmalar› gereken baz› ufak ifller var. Bu ifllerin detaylar›na bir
sonraki bölümde de¤inece¤iz. fiimdilik hali haz›rda bu deste¤i veren
bir site ile yola ç›karak Web Slice’lar›n kullan›m›na göz atal›m.
‹stedi¤imiz ürüne Web Slice olarak al›p taray›c›m›za ekliyoruz
E¤er bir web sitesinde takip edebilece¤iniz, kesip alabilece¤iniz bir
Web Slice varsa söz konusu bölümün fare ile üzerine geldi¤inizde yeflil bir çerçeve ve Web Slice logosu karfl›n›za gelecektir. Bu görsellik
tabi ki farkl› web sitelerinde tasar›mc›lar taraf›ndan farkl› flekillerde
de¤ifltirilebilir. Web Slice logosunu gördü¤ünüz hemen o logoya t›klayarak web sitesinin söz konusu bölümünü kesip alabilirsiniz. Bu esnada Internet Explorer size nereden veri alaca¤›n›z› da gösteren bir
uyar› kutucu¤u gösterecektir.
21
EXPLORER-02
3/14/09
10:28 PM
Page 22
Ald›¤›m›z Web Slice taray›c›m›z›n araç çubu¤una yerleflti.
Kesip alma ifllemi tamamland›¤›nda art›k Web Slice’›n›z Internet
Explorer’›n araç çubu¤unda yerini alm›fl olacakt›r. ‹stedi¤iniz zaman
Web Slice’›n bafll›¤›na t›klyarak web sitesinin kesti¤iniz bölümünü
inceleyebilirsiniz. Bazen kesti¤iniz yer ile araç çubu¤unda gördükleriniz bire bir birbirlerine benzeyebilece¤i gibi tamamen farkl› bir görsellikle de karfl›laflabilirsiniz. Bu noktadaki karar ziyaret etti¤iniz sitenin tasar›mc› ve programc›lar›n ait.
Art›k Internet Explorer sizin için söz konusu kesi¤i sürekli kontrol
edecek ve herhangi bir de¤ifliklik oldu¤unda Web Slice’›n bafll›¤› araç
çubu¤unda parlayarak kal›n bir flekilde yaz›lacakt›r. Her Web Slice’›n
kendi penceresinin sol alt›nda üç adet dü¤me yer alabilir. Bunlardan
sa¤a ok iflareti fleklinde olan sizi Web Slice’›n kesildi¤i sayfaya yönlendirecektir.
Refresh (Yenile) dü¤mesinin logosuna benzer görsellikte olan dü¤me
Web Slice’›n içeri¤inin ana kaynaktan tekrar al›nmas›n› sa¤larken,
e¤er varsa sar› bir ünlem iflareti ise Web Slice’›n›z›n ne kadar süre
sonra kullan›mdan kalkaca¤›na dair bilgiyi sa¤layacakt›r.
EXPLORER-02
3/14/09
10:28 PM
Page 23
Web Slice’›m›za
özel ayarlar.
Bir Web Slice’›n araç çubu¤undaki bafll›¤›na sa¤ t›klad›¤›n›zda gelen
menüden Properties komutunu verirseniz karfl›n›za söz konusu Web
Slice ile ilgili düzenleyebilece¤iniz ayarlar›n bulundu¤u özel bir pencere gelecektir. Bu pencere içerisinde gerekiyorsa Web Slice için güvenlik bilgilerini girebilir veya Web Slice içeri¤inin ne kadar sürede
bir internetteki kaynaktan yenilenmesi gerekti¤ini ayarlayabilirsiniz.
Herhangi bir Web Slice’› silmek için yine sa¤ tufl ile Web Slice’›n
araç çubu¤undaki bafll›¤›na t›klayarak gelen menüden Delete komutunu verebilirsiniz.
23
EXPLORER-02
3/14/09
10:28 PM
Page 24
EXPLORER-03
3/14/09
10:45 PM
Page 25
Web’de Yeni Trendler
Bir H›zland›r›c› (Accelerator)
Nas›l Haz›rlan›r?
25
VB ve ASP.NET ile
XML Üretmek
41
Son Ad›mlar...
30
44
Art›k Haz›r›z
32
32
Görsel Aramalar için
JSON Veri Kayna¤›
46
47
Görsel Arama ve
Arama Sa¤lay›c›lar›n ‹flbirli¤i
35
Sunucu Taraf›nda
Neler Yapmal›?
36
Sunucuda Gerçek Zamanl›
XML Üretimi
39
C# ve ASP.NET ile
XML Üretmek
Web Dilimi’ne Kaynak Olarak
RSS Kullanmak
50
39
48
Display Source De¤iflikli¤i
49
Farkl› Web Dilimleri’ni
Birbirine Ba¤lamak
50
Internet Explorer 8 ile beraber gelen yeniliklere h›zl› bir flekilde göz
att›ktan sonra son kullan›c›n›n ötesinde biz üreticiler, yani yaz›l›mc›lar ve web tasar›mc›lar için neler nas›l iflliyor sorusuna cevap verece¤imiz bu bölümde odaklanaca¤›m›z ana üç konu var. ‹lk olarak H›zland›r›c›lar›n (Accelerator) yap›s›n› inceleyerek hem tasar›m hem de
yaz›l›m noktas›nda ne gibi bir altyap› haz›rlamam›z gerekti¤ine bakaca¤›z. Sonras›nda hemen Internet Explorer 8’in Görsel Arama (Visual Search Suggestion) özelli¤i için gerekli programatik yap›n›n oluflturulmas›na de¤inecek ve Web Dilimleri’nin (Web Slices) oluflumu ve
haz›rlanmas› ile ilgili detaylar ile bölümümüzü sonland›raca¤›z. Gelin
h›zl› bir flekilde örnekler ile bu yeni web trendlerini inceleyece¤im.
Bir H›zland›r›c› (Accelerator)
Nas›l Haz›rlan›r?
Accelerator’lar özünde birer XML dosyas›d›r. Bu XML dosyalar›n›n
yaz›m standard› Microsoft taraf›ndan belirlenmifl olup OpenServiceDescription olarak geçer. Bu standarda uygun yaz›lan bir XML kodu
ile taray›c›n›n hangi durumlarda ne gibi ifllemler yapaca¤›na dair h›zland›r›c›lar çerçevesinde kararlar› biz yaz›l›mc›lar olarak al›r›z. Böylece XML içerisinde tan›ml› olan bir ayarlar Internet Explorer 8 içerisinde 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-
3
EXPLORER-03
3/14/09
10:45 PM
Page 26
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 ‹ngilizce-Türkçe sözlük taraf›ndan kullan›lan H›zland›r›c›’n›n XML kodudur.
Özünde basit bir h›zland›r›c›n›n haz›rlanmas› yolunda e¤er h›zland›r›c›
Ön ‹zleme (Preview) ekran› içermiyorsa sunucu tarafl› olarak ek bir kod
veya ifllem yap›lmas›, sayfa haz›rlanmas› gerekmez. Bir önceki bölümde de inceledi¤imiz üzere h›zland›r›c›lar›n amac› bir siteden herhangi bir
veriyi al›p baka bir siteye tafl›makt›r. Yukar›daki örnekte herhangi bir sitedeki kelime do¤rudan Zargan.com’daki çeviri sayfas›na tafl›narak olas› ç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 27
Bir h›zland›r›c› yazarken karar verilmesi gereken noktalardan biri h›zland›r›c›n›n hangi flekillerde kullan›c›ya sonuç gösterece¤i. Var olan
iki alternatiften biri kullan›c›n›n taray›c› içerisinde sa¤ tufla t›klay›nca
eriflebilece¤i bir menüden tekrar bir t›klama ile hedef siteye yönlendirilmesi, bir di¤eri ise do¤rudan söz konusu menü üzerinde kullan›c›
gezerken an›nda bir Ön ‹zleme penceresi gösterilmesi. Bu iki alternatif metodun her biri h›zland›r›c›n›n XML’i içerisinde birer action olarak 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/aramasonuc_ozel.aspx” method=” post” >
</execute>
</activityAction>
Hemen yukar›daki kod örne¤inde kal›n olarak yaz›l› noktalara dikkat
edersek asl›nda farkl› durumlarda h›zland›r›c›n›n nas›l ifllemler yapaca¤›n› ayr› ayr› belirtti¤imizi görebiliriz. Standart olarak execute action
tüm h›zland›r›c›larda bulunmas› zorunlu elementlerden biri olsa da her
h›zland›r›c› preview action ile bir ön izleme ekran› sa¤lamak zorunda
de¤il. H›zland›r›c›lardaki ön izleme ekranlar› asl›nda basit birer IFRAME 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 izleme ekran› kendi içinde Post veya Get ifllemleri de yapabilir böylece belki de gösterilecek sonuçlar sayfalama yap›larak gösterilebilir.
Maalesef ki gelen ön izleme ekran›n›n boyutunu de¤ifltirme flans›n›z
olmayacakt›r, bu denenle ön izleme ekran›nda sonuç gösterimi yapacak olan sayfalar› özel olarak bu duruma uygun flekilde tasarlamak flart.
......
......
</activityAction>
27
EXPLORER-03
3/14/09
10:45 PM
Page 28
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›zland›r›c›n›n çal›flaca¤› durumu tan›ml›yor. Örne¤in e¤er context de¤eri selection olarak ayarlanm›fl ise söz konusu h›zland›r›c› sadece
taray›c› içerisinde bir metin seçildi¤inde devreye girecek ve h›zland›r›c›lar menüsünde yerini alacakt›r. Oysa ayn› context özelli¤ine
link de¤erini verirseniz bu sefer de h›zland›r›c›n›z taray›c› içerisindeki herhangi bir linke sa¤ t›kland›¤›nda gelen menüde yer alacakt›r.
Tabi ki bu her iki durum için de ayr› ayr› execute action ve preview
action’lar tan›mlamak mümkün. Tek yapman›z gereken bu tan›mlamalar› uygun activityAction tag’lar› aras›na almak.
<execute action=” http://daron.yondem.com/aramasonuc_ozel.aspx” method=” post” >
</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. Sonuç itibari ile ayr› bir siteye veri gönderme amac› ile yola ç›kt›¤›m›z
için yap›lacak ifllem bir POST veya GET ifllemi olabilir. Bunu hemen
method özelli¤inde belirtiyoruz. E¤er POST seçene¤ini seçerseniz tüm
parametreler form olarak gönderilecektir, e¤er GET metodunu seçerseniz tüm parametreler adrese query olarak eklenerek gönderilecektir. Tabi ki tüm bu parametrelerin gönderilece¤i bir de adres bulunmak zorunda, iflte o adresi de action özelli¤ine at›yoruz. Böylece art›k h›zland›r›c›m›z parametreleri nereye nas›l gönderece¤ini biliyor.
Peki parametreler nelerdir?
Yukar›daki flekilde herhangi bir action için istedi¤iniz say›da parametre tan›mlayabilirsiniz. Her parametrenin bir ad› ve bir de de¤eri
bulunmak zorunda. Bu de¤eri value özelli¤i olarak tan›mlarken isterseniz elle sabit de¤erler girebilece¤iniz gibi taray›c› taraf›nda çal›flma
zaman›nda belirlenecek dinamik de¤erleri de karfl› sunucuya gönderebilirsiniz.
EXPLORER-03
3/14/09
10:45 PM
Page 29
Asl›nda bizim esas amac›m›z da kullan›c›n›n sayfada seçti¤i metin veya linkin bilgileri gibi dinamik bilgileri an›nda kendi sunucumuzdaki
uygulama gönderebilmek. Bu çerçevede örnekte oldu¤u üzere {selection} gibi de¤iflken parametreler kullanarak kendi parametrelerimizin de¤erlerini Internet Explorer 8’in belirlemesini sa¤layabiliyoruz. Kullan›labilecek farkl› parametreleri ve alaca¤› de¤erlerin anlam›n› afla¤›daki tabloda bulabilirsiniz.
Ad›
Aç›klamas›
documentDomain
‹çerisinde bulunan sayfan›n alan ad›.
documentTitle
documentUrl
link
linkDomain
linkRel
linkText
selection
‹çerisinde bulunan sayfan›n HTML bafll›k
(title) bilgisi.
‹çerisinde bulunan sayfan›n tam adresi.
E¤er kullan›c› bir linkte sa¤ t›klam›fl ise
bu linkin adresi.
bu linkin hedefledi¤i ana alan ad›.
bu linkin rel microformat de¤eri.
bu linkin içerisindeki yaz›.
Kullan›c›n›n taray›c› sayfas›nda seçmifl
oldu¤u metin.
Tüm bu ifllemleri tamamlad›ktan sonra ayn› parametreleri kullanarak
bir ön izleme ekran› da haz›rlayabilirsiniz.
<preview action=”http://daron.yondem.com/aramasonuc.
aspx” method=” get” >
</preview>
Üstte görebilece¤iniz kod içerisindeki tek farkl›l›k ana tag’›n execute
action yerine preview action olarak tan›mlanm›fl olas›. Ayr›ca tabi ki bu sefer hedef adres olarak verdi¤imiz yerdeki web sayfam›z›n ta-
29
EXPLORER-03
3/14/09
10:45 PM
Page 30
sar›m› da normalden farkl› olarak ön izleme penceresi içerisine s›¤abilecek flekilde tasarlanm›fl olmal›.
NOT
SUNUCU TARAFINDA NELER YAPMALI?
H›zland›r›c›lar›n sunucu tarafl› programlama teknolojileri veya iflletim sistemlerinden tamamen ba¤›ms›z olarak istemcide çal›fl›rlar. Önemli olan tek
fley h›zland›r›c›ya ait tan›mlar›n yap›ld›¤› XML dosyas›n›n bir flekilde web sunucusu taraf›ndan site ile ayn› port üzerinden yay›nlanabiliyor olmal›s›d›r.
Bir h›zland›r›c› taraf›ndan siteye gönderilen parametreler programc›n›n
tercihine göre standart POST veya GET ifllemleri ile gönderilir ve bu verileri alabilmek için sunucu taraf›nda yine standart prosedürler uygulan›r.
[ASP.NET C#]
//GET ile gelen veriyi almak için.
Request.QueryString[“sozcuk”];
//POST ile gelen veriyi almak için.
Request.Form[“sozcuk”);
[ASP.NET VB]
‘GET ile gelen veriyi almak için.
Request.QueryString(“sozcuk”)
‘POST ile gelen veriyi almak için.
Request.Form(“sozcuk”)
[PHP]
//GET ile gelen veriyi almak için.
$_GET[‘sozcuk’];
//POST ile gelen veriyi almak için.
$_POST[‘sozcuk’];
Son Ad›mlar...
H›zland›r›c›m›zla ilgili tüm ifllevselliklere karar verdi¤imize göre son
olarak h›zland›r›c›m›z›n tan›mlar› ve kimli¤i ile ilgili ayarlar› da yaparsak yay›na haz›r hale getirebiliriz.
<openServiceDescription xmlns=”http://www.microsoft.
com/schemas/
openservicedescription/1.0”>
EXPLORER-03
3/14/09
10:45 PM
Page 31
<homepageUrl>http://daron.yondem.com/</homepageUrl>
<display>
<name>Deneme ile çevir</name>
<icon>http://daron.yondem.com/favicon.ico</icon>
</display>
<activity category=”translate”>
<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 activity tag’› içerisine alarak bu tag’a da category de¤eri vermemiz
gerekiyor. Bu noktadaki category elementine verece¤iniz de¤er için
önceden haz›rlanm›fl bir liste yok. Category de¤eri için Microsoft taraf›ndan belirlenen kural söz konusu de¤erin ‹ngilizce bir fiil içermesi gerekti¤i ve k›smen emir kipinde bulunmas› fleklinde tan›mlanabilir. Bu de¤erler taray›c› taraf›ndan sadece gruplama amac› ile kullan›l›yor ve ayn› de¤erlere sahip h›zland›r›c›lar› h›zland›r›c› menüsünde
beraber gösteriliyor.
<homepageUrl>http://daron.yondem.com/</homepageUrl>
<display>
<name>Deneme ile çevir</name>
<icon>http://daron.yondem.com/favicon.ico</icon>
</display>
Son olarak openServiceDescription dosyas›n›n bafl›nda h›zland›r›c›m›zla ilgili kimlik bilgilerini de giriyoruz. Hemen ufak bir uyar›da
bulunmak istiyorum homePageUrl olsun icon adresi olsun tüm bu ad-
31
EXPLORER-03
3/14/09
10:45 PM
Page 32
reslerin action adresleriniz ile ayn› alan ad›n› hedeflemesi flart. Aksi
halde h›zland›r›c›n›z›n çal›flmas› ile ilgili sorunlar yaflayabilirsiniz.
Art›k Haz›r›z
H›zland›r›c›m›z› yay›na almaya haz›r›z. E¤er h›zland›r›c›n›n kullan›c›lar› yönlendirece¤i sayfalarla ilgili tasar›msal veya programatik de¤ifliklikler yapt›ysan›z ilk olarak söz konusu k›s›mlar› sunucunuza yüklemenizde fayda var. Sonras›nda h›zland›r›c›n›z› sunucuya yüklemek
için sadece openServiceDescription XML dosyas›n›n web sunucusu
üzerinden ulafl›labilir bir konu koyman›z yeterli olacakt›r. Örne¤in
web sitenizin adresinin deneme.com oldu¤unu düflünürsek deneme.com/hizlandirici.xml fleklinde h›zland›r›c›n›z›n XML dosyas›na
ulafl›labiliyor olmas› yükleme ifllemini tamamlam›fl olmak için yeterli.
Peki kullan›c›lar›n bu h›zland›r›y› nas›l bulacaklar? Nereye t›klayarak
bilgisayarlar›na yükleyecekler? ‹flte bu noktada karar sizin. Afla¤›daki
JScript komutunu ça¤›rarak istedi¤iniz bir h›zland›r›c›y› istemci taraf›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 bulundu¤u XML dosyas›n›n yerini al›yor ve istemci taraf›ndaki yükleme ifllemlerine dair onay mekanizmas›n›n çal›flmas›n› sa¤l›yor. Art›k bu noktadan sonra tüm kontrol kullan›c›da, h›zland›r›c›n›z ziyaretçiye ulaflt›.
Görsel Arama sistemleri haz›rlamadan önce hali haz›rda bir Arama
Sa¤lay›c› dosyan›z›n bulunmas› gerekiyor. Görsel Arama sistemi eski Arama Sa¤lay›c› sisteminin üzerine infla edilmifl durumda oldu¤u
için önce bir Arama Sa¤lay›c› nas›l oluflturulaca¤›n› inceleyelim.
<?xml version=”1.0” encoding=”UTF-8”?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/
opensearch/1.1/”>
EXPLORER-03
3/14/09
10:45 PM
Page 33
<ShortName>Deneme Arama Motoru</ShortName>
<Url type=”text/html” template=”http://daron.yondem.com/?aranan=
{searchTerms}”/>
<Image height=”16” width=”16” type=”image/icon”>
http://daron.yondem.com/favicon.ico</Image>
</OpenSearchDescription>
OpenSearchDescription standard› çerçevesinde haz›rlanan arama
sa¤lay›c›lar çok say›da taray›c› taraf›ndan destekleniyor. Yukar›daki
flekilde tan›mlanan bir arama sa¤lay›c› taray›c›n›n arama kutucu¤unda 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 nereye 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 adres de template de¤erine aktar›l›yor. Örne¤imizdeki adres flablonunu
incelerseniz en sonundaki {searchTerms} k›sm› dikkatinizi çekecektir. ‹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 kelimeler 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/?aranan=asp.net fleklinde olacakt›r. Böylece sunucu taraf›nda uygulama
ile adresten al›nabilecek bu parametre kullan›larak gerekli arama ifllemleri yap›labilir ve sonuç do¤rudan kullan›c›ya gösterilebilir.
Son olarak arama sa¤lay›c›s›na ait taray›c› içerisinde gösterilecek bir
ikon dosyas› da afla¤›daki flekilde openSearchDescription dosyas›na
eklenir.
<Image height=”16” width=”16” type=”image/icon”>
http://daron.yondem.com/favicon.ico</Image>
33
EXPLORER-03
3/14/09
10:45 PM
Page 34
Tüm bu ifllemleri yaparak kendi siteniz için bir arama sa¤lay›c› gelifltirdikten sonra tabi ki bu sa¤lay›c›n›n kullan›c›lar taraf›ndan bulunabilmesi ve yüklenebilmesi için gerekli de¤ifliklikleri de yapmam›z gerekiyor. Örne¤in hemen bir yükleme dü¤mesi haz›rlayarak sitemize
yerlefltirmek istersek arama sa¤lay›c›s›na ait yükleme ekranlar›n› açabilmek 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 aramasaglayici.xml dosyas› olarak yükledikten sonra ana sayfam›za yukar›daki gibi bir link ekleyerek AddSearchProvider metodunu ça¤›rabiliriz. Söz konusu metod parametre olarak arama sa¤lay›c›ya ait
ayarlar›n bulundu¤u XML dosyas›n›n yolunu al›yor ve sonras›nda
yükleme ifllemlerini istemci taraf›nda bafllat›yor.
Bir di¤er alternatif ise taray›c›lar›n kendi kendilerin sayfa içerisindeki arama sa¤lay›c›lar› bulabilmesi için yap›labilecek linkleme ayar›d›r. Böylece kullan›c›lar›n sayfadaki yükleme dü¤melerini bulamasa
veya sayfada bir yükleme dü¤mesi olmasa da taray›c› söz konusu sayfada bir arama sa¤lay›c› oldu¤unu anlayarak kendi arayüzünde gerekli mesajlar› kullan›c›ya gösterecektir.
<link title=”Daron Yöndem Arama” rel=”search”
type=”application/
opensearchdescription+xml” href=”http://daron.yonde.com/ aramasaglayici.xml” />
Yukar›daki linki HTML sayfas›n›n Header bölümüne yerlefltirdi¤inizde art›k taray›c›lar›n sizin sitenizde arama sa¤lay›c›dan haberdar
olacaklar. Link kodu içerisinde title de¤eri arama sa¤lay›c›n›z›n ismini tan›mlarken rel ve type de¤erleri tam olarak örnekteki flekli ile
de¤ifltirilmeden yaz›lmal›d›r. Taray›c› ancak bu flekilde söz konusu
linkin bir arama sa¤lay›c›ya ait oldu¤unu anlayabilir. Son olarak href
özelli¤ine ise arama sa¤lay›c›ya ait XML dosyas›n›n tam yolu verilir.
EXPLORER-03
3/14/09
10:45 PM
Page 35
Görsel Arama ve
Arama Sa¤lay›c›lar›n ‹flbirli¤i
Art›k elimizde haz›r bir arama sa¤lay›c› bulundu¤una göre bu arama
sa¤lay›c›ya görsel arama ifllevselli¤i eklemenin zaman› geldi. Afla¤›da nedirtv.com sitesinde kullan›lan ve görsel arama ifllevselli¤i de sunan arama sa¤lay›c›n›n XML OpenSearchDescription dosyas›n› inceleyebilirsiniz.
<?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.nedirtv.com/Arama.aspx?A={searchTerms}”/>
<Url type=”application/x-suggestions+xml” template=
”http://www.nedirtv.com/RssVideo.ashx?SS={searchTerms}”/>
<Image height=”16” width=”16” type=”image/
icon”>http://www.nedirtv.com/favicon.ico</Image>
</OpenSearchDescription>
Bir önceki bölümde haz›rlad›¤›m›z arama sa¤lay›c›lar ile yukar›daki
kod aras›nda fark› incelerseniz asl›nda sadece yeni bir Url tag›n›n aç›ld›¤›n› ve bu sefer farkl› olarak type özelli¤in text/html de¤il de application/x-suggestions+xml oldu¤unu görebilirsiniz. Söz konusu tan›mlama ile art›k arama sa¤lay›c›m›z kendi içerisinde bir de görsel
arama veri kayna¤› tan›ml›yor. Böylece adresi verilmifl olan veri kayna¤›ndan gerekli sonuçlar taray›c› taraf›ndan otomatik olarak çekilerek kullan›c›ya gösterilebilecek. Tüm bu ifllevsellik içerisinde bizim
tek yapmam›z gereken ek olarak gerekli veri kayna¤›n› do¤ru formatta sa¤layacak olan sunucu tarafl› mekanizmay› haz›rlamak.
<Url type=”application/x-suggestions+xml”
template=”http://www.nedirtv.com/RssVideo.ashx?SS={searchTerms}”/>
Kodumuzun görsel arama ile ilgili k›sm›n› incelersek Url tag’›n›n tipinde veri kayna¤› olarak XML format›n›n belirtildi¤ini görebilirsiniz. Veri kayna¤› adresi tan›mlan›rken de yine {searchTerms} para-
35
EXPLORER-03
3/14/09
10:45 PM
Page 36
metresi ile kullan›c›n›n yazd›¤› arama hedef adrese eklenerek sunucuya gönderilebilecek. Böylece sunucu taraf›ndan bu parametre al›nabilir 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 kullanabilirsiniz. JSON format›nda maalesef ki Görsel Arama sistemindeki arama
sonuçlar›nda resim gösterimi gibi özellikler kullan›lam›yor. O nedenle
ço¤unlukla Görsel Arama altyap›lar›nda XML format› tercih ediliyor.
Sunucu Taraf›nda Neler Yapmal›?
Görsel arama sistemi ile ilgili yap›lmas› gereken çal›flman›n büyük k›sm› sunucu taraf›nda yap›l›yor. Bunun nedeni asl›nda çok basit. OpenSearchDescription dosyam›zda tan›mlam›fl oldu¤umuz veri kayna¤›n›
taray›c›n›n anlayabilece¤im bir formatta sa¤lamam›z flart. Aksi halde
kullan›c›ya Görsel Arama sonuçlar› göstermemiz mümkün olmayacakt›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>
</Item>
</Section>
</SearchSuggestion>
Yukar›daki kod içerisinde basit bir arama sonucunda Internet Explorer’a döndürmemiz gereken XML veri kayna¤›n›n yap›s›n› inceleyebilirsiniz. Sat›r sat›r XML kodlar›n›n incelemeden önce bu veri kayna-
EXPLORER-03
3/14/09
10:46 PM
Page 37
¤›n›n sadece iki sonuç döndüren örnek bir veri kayna¤› oldu¤unu belirtmekte 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›nda Query tag› bulunuyor. Bu tag içerisinde sunucu taraf›na aranmak
üzerine yollanan kelimeleri yazd›r›yoruz. Böylece Internet Explorer
kendisine gelen veri ile talep etti¤i arama verisinin ayn› olup olmad›¤›n› kontrol edebiliyor.
<Section title=”İlk Bölüm”>
Section tag’lar› arama sonuçlar› gösterilirken sonuçlar› gruplamak
amac›yla kullan›labilir. Her section’un (bölüm) bir de title bilgisi,
yani bafll›¤› bulunuyor. Örnek bir kullan›m olarak herhangi bir araman›n sonucunda farkl› kategorilerinde ürünlerinin getirildi¤i bir e-ticaret sitesi düflünülebilir.
<Item>
</Item>
‹flte geldik en can al›c› noktaya. Görsel arama ifllemi esnas›nda gösterilecek olan her bir sonucu tan›mlamak için Item tag’lar› ile gerekli
verileri XML içerisinde yazd›rmam›z flart. Her bir Item tag›n›n Text,
Description ve Url elementlerini içermesi gerekiyor. Text ve
Description sonuç listesinde gösterilirken Url ise söz konusu sonuca t›kland›¤›nda kullan›c›n›n yönlendirilece¤i adresi tan›ml›yor. E¤er
arama sonuçlar›nda her bir ö¤e ile ilgili bir de ufak resim göstermek istiyorsan›z Item tag›lar› aras›na Image elementi de yerlefltirmelisiniz.
<Item>
<Image Source=http://daron.yondem.com/
resim.jpg
alt=”Bu bir resimdir” width=”70”></Image>
</Item>
37
EXPLORER-03
3/14/09
10:46 PM
Page 38
Yukar›daki kod örne¤inde Item elementi içerisinde bir de Image elementi bulunuyor. Image elementi do¤rudan Source olarak bir resim
dosyas›n›n tam yolunu içeriyor. Böylece Internet Explorer e¤er söz
konusu resme eriflebilirse do¤rudan görsel arama sonuçlar›n› gösterirken resme de sol tarafta yer verecektir.
Görsel Arama sonuçlar› ve resimli gösterim flekli.
E¤er section taglar›, yani bölümler içerisinde ayr›ca sonuçlar› birbirinden ay›rmak isterseniz. Separator elementini kullanabilirsiniz.
Section elementindeki gibi Separator’lara da title (bafll›k) de¤eri 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›ktan sonra arama sa¤lay›c› dosyan›z› eskisi gibi ayn› JScript kodlar› ile
sitenizin ziyaretçilerine sunabilirsiniz. E¤er hedef taray›c›lar›n görsel
arama sistemini destekliyorsa otomatik olarak sonuçlar gösterilecektir, aksi halde arama sa¤lay›c› sistemi eski taray›c›larda eski hali ile
çal›flmaya devam eder.
EXPLORER-03
3/14/09
10:46 PM
Page 39
Sunucuda Gerçek Zamanl›
XML Üretimi
Görsel arama sistemlerini kullanabilmek için en önemli nokta sunucu
taraf›nda uygun XML ç›kt›s›n› oluflturabilmek. Bu çerçevede kitab›m›z›n bu bölümünde sunucu taraf›nda veri kayna¤› olarak basit bir
Array (Dizi) kullanarak gerekli XML kodunu nas›l yaratabilece¤imizi inceleyece¤iz.
C# ve ASP.NET ile XML Üretmek
ASP.NET taraf›nda özellikle .NET Framework 3.5 ile beraber
LINQ’in de yard›m›m›za yetiflmesi XML üretimini ciddi anlamda kolaylaflt›r›yor. Biz de kodlar›m›zda LINQ’ten faydalanarak h›zl› bir flekilde 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 yaratan bir Web Form yerine bize daha esnek bir yap› sunan Generic
Handler’lar› kullanmam›zda fayda var. ‹lk olarak örne¤imizde kullanaca¤›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› yukar›daki flekilde tan›mlad›ktan sonra Generic Handler çal›flt›r›ld›¤›nda
hem örnek amaçl› olarak bir veri yarataca¤›z hem de o veri üzerinden
sonras›nda da XML üretece¤iz.
System.Collections.Generic.List<Sonuc> Veri =
new System.Collections.Generic.List<Sonuc>();
for (int i = 0; i < 10; i++)
{
Veri.Add(new Sonuc()
{
39
EXPLORER-03
3/14/09
10:46 PM
Page 40
Text=”Sonuç” + i.ToString(),
Description=”Açıklama” +
i.ToString(),
Photo=”Foto” + i.ToString() +
“.jpg”,
ring()
Url=”adres.aspx?ID=” + i.ToSt});
};
Veri kayna¤›m›z› yaratma ifllemini tamamlad›¤›m›zda göre art›k elimizde yer alan Veri ad›ndaki Generic List üzerinden yola ç›karak uygun XML kodunu yaratabiliriz. Bunun için olarak sayfan›n ç›kt›s›na
ait Content Type’› Text/Xml olarak de¤ifltirelim.
context.Response.ContentType = “text/xml”;
Bir sonraki ad›mda XML doküman›m›z›n ana elementlerini yaratal›m
ve içerisine veri, yani Item nesneleri eklenebilecek hale getirelim.
XDocument XMLFeed = new XDocument(new
XDeclaration(“1.0”, “utf-8”, “yes”));
XMLFeed.Add(new XElement(“SearchSuggestion”,
new XElement(“Query”, context.Request.
QueryString[“aranacak”].ToString()),
new XElement(“Section”,
new XElement(“Separator”,
new XAttribute(“title”, “Bölüm
1”)))));
fiimdi s›ra geldi elimizdeki Generic List içerisinde gezerek yukar›da
yaratm›fl oldu¤umuz doküman içerisinde SearchSuggestion elementi içindeki Section elementinin içine uygun Item elementlerini
yerlefltirmeye.
for (int i = 0; i < Veri.Count; i++)
{
XMLFeed.Element(“SearchSuggestion”).
Element(“Section”).Add(
new XElement(“Item”,
EXPLORER-03
3/14/09
10:46 PM
Page 41
Description),
new
new
new
new
new
new
new
XElement(“Text”, Veri[i].Text),
XElement(“Image”,
XAttribute(“source”, Veri[i].Url),
XAttribute(“alt”, “Bir resim”),
XAttribute(“width”, “75”),
XAttribute(“height”, “50”)),
XElement(“Description”, Veri[i].
new XElement(“Url”, Veri[i].Url)));
}
Gördü¤ünüz gibi yaratt›¤›m›z yeni XElement ve içerisinde XAttribute nesnelerine veri kayna¤› olarak For döngüsü içerisinde sürekli
Veri ad›ndaki Generic List’i kullan›yoruz. Böylece istedi¤imiz XML
DOM’u yaratabiliyoruz. Son olarak tüm bu XML’i istemciye gönderilmek üzere sayfaya yazd›rmam›z gerekiyor.
context.Response.Write(XMLFeed.ToString());
Art›k Generic Handler dosyam›z kendisine gelecek olan aranacak
querystring parametresine göre farkl› XML’ler döndürmek için haz›r
durumda. Tek yapman›z gereken örne¤imizdeki Veri ad›ndaki List’i
farkl› veri kaynaklar› ile de¤ifltirmek.
VB ve ASP.NET ile XML Üretmek
Bir önceki bölümde C# ile ASP.NET taraf›nda nas›l XML ç›kt›s› üretebilece¤imizi incelemifltik. C# ile VB aras›nda çok büyük farklar bulunmasa da XML konusunda VB 9.0 ile beraber gelen XML Literals
yap›s›n› kullan›rsak XML yaratma ifllemi çok daha farkl› bir çehreye
bürünebiliyor. O nedenle gelin C# ile yapt›¤›m›z örne¤i bir de VB ile
yaparak nas›l ilerleyebilece¤imizi inceleyelim.
Public Class Sonuc
Private PText As String
Public Property Text() As String
Get
Return PText
End Get
Set(ByVal value As String)
PText = value
41
EXPLORER-03
3/14/09
10:46 PM
Page 42
End Set
End Property
Private PDescription As String
Public Property Description() As String
Get
Return PDescription
End Get
PDescription = value
End Set
End Property
Private PUrl As String
Public Property Url() As String
Get
Return PUrl
End Get
PUrl = value
End Set
End Property
Private PPhoto As String
Public Property Photo() As String
Get
Return PPHoto
End Get
PPHoto = value
End Set
End Property
End Class
‹lk aflamada yukar›daki flekli ile tüm veri kayna¤›m›z› üretirken kullanaca¤›m›z Sonuc ad›ndaki s›n›f›m›z› tan›ml›yoruz.
Bir sonraki ad›mda ise deneme amaçl› olarak kullanaca¤›m›z veri
kayna¤›m›z› üretece¤iz.
EXPLORER-03
3/14/09
10:46 PM
Page 43
Dim Veri As New System.Collections.Generic.List
(Of Sonuc)
For index As Integer = 1 To 10
Veri.Add(New Sonuc With {.Text = “Sonuç”
& index, _
.Description =
“Açıklama” & index, _
.Photo = “Photo”
& index & “.jpg”, _
.Url = “adres.
aspx?ID=” & index})
Next
Yukar›daki kodumuz ile deneme amaçl› olarak kullanaca¤›m›z veri
kayna¤›m›z› da yaratt›¤›m›za göre art›k s›ra geldi bu veri kayna¤› üzerinden gerekli XML’i yaratmaya. ‹lk olarak sayfan›n Content
Type’›n› do¤ru flekilde ayarlayal›m.
Context.Response.ContentType = “text/xml”
Son olarak XML yaratma ifllemlerine bafllayabiliriz. Daha önce de bahsetti¤im üzere VB art›k dil ile entegre XML yaz›m›n› destekliyor. O nedenle C#’da oldu¤u gibi XElement vs nesneler ile u¤raflmaya gerek
kalmadan do¤rudan istedi¤imiz XML format›n› dile dahil edebiliyoruz.
Dim XMLFeed = <?xml version=”1.0” encoding=”utf-8”?>
<SearchSuggestion xmlns=”http://opensearch.org/
searchsuggest2” version=”1”>
<Query><%= Context.Request.QueryString(“aranacak”) %></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> %>
43
EXPLORER-03
3/14/09
10:46 PM
Page 44
</Section>
</SearchSuggestion>
Kod içerisinde de görebilece¤iniz üzere do¤rudan XML kodlar› bir de¤iflkene eflitlenmifl durumda. Bu kodlar .NET içerisinde VB derleyicisi
taraf›ndan derleme zaman›nda C#’da oldu¤u gibi XElement nesnelerine çevrilecektir. O nedenle herhangi bir performans farkl›l›¤› olmayacakt›r. Biz XML kodumuzu de¤iflkenimize eflitlerken bir de LINQ sorgusu kulland›k. Böylece Veri ad›ndaki Generic List içerisinde kaç tane kay›t varsa uygun flekilde Item XML nesnelerini de yaratm›fl olduk.
Art›k XML kodumuzu sayfaya yazd›rabiliriz.
Context.Response.Write(XMLFeed.ToString())
Windows Server 2008 ve IIS 7 ile beraber gelen FastCGI ile art›k
Windows sunucu üzerinde PHP kullan›m› hatta ASP.NET ile entegre
ortak Forms Authentication kullan›mlar› ve Session paylafl›mlar› gibi özelliklerin hayat›m›za girdi¤i bu günlerde sunucu taraf›nda PHP
kullanman›z halinde de tabi ki Görsel Arama için uygun XML kodlar›n› üretebilirsiniz. Bunun için örne¤imizde herkesin sunucusunda
PHP DOM’un kurulu olup olmad›¤›ndan emin olmad›¤›m›z için PHP
DOM kullanmak yerine standart String ifllemleri ile devam edece¤iz.
header(‘Content-type: text/xml’);
‹lk olarak yukar›daki kodumuz ile sayfam›z›n Content Type ayar›n›
yapal›m. Böylece taray›c› kendisine bir XML gönderildi¤ini rahatl›kla 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 45
‘alt’ => ‘baska resim’,
‘width’ => 75,
‘height’ => 60),
‘url’ =>
‘alt’ => ‘baska bir resim daha’,
‘width’ => 75,
‘height’ => 60),
‘url’ =>
Sonras›nda örne¤imizde kullanmak üzere yukar›daki gibi bir Array
tan›mlayal›m. Böylece bir sonraki ad›mda bu dizi içerisindeki verileri kullanarak uygun XML ç›kt›s›n› yarataca¤›z.
$output
$output
$output
$output
= “<SearchSuggestion>\n”;
.= “<Section>\n”;
.= “<Query>asp</Query>\n”;
.= “\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”;
45
EXPLORER-03
3/14/09
10:46 PM
Page 46
$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 string
birlefltirme ifllemleri ile XML kodumuzu yarat›yoruz. XML’imizin
bafllang›ç ve sonunu belirledikten sonra orta k›s›mda da bir For döngüsü ile elimizdeki diziyi gezerek uygun Item XML elementlerini yarat›yoruz. Bu flekilde yarat›lan bir XML kodu da Görsel Arama altyap›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 kulland›k. Bunun nedeni bir alternatif olarak JSON format› gelse de
JSON içerisinde hem Image nesneleri hem de Separator kullanam›yor olmam›z. E¤er tüm bu dezavantajlar›na ra¤men JSON kullanmay› düflünüyorsan›z oluflturman›z gereken JSON veri kayna¤›n›n bir örne¤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 kodumuzun bafl›nda yine Internet Explorer taraf›ndan parametre olarak
gönderilen arama kelimeleri bulunuyor.
EXPLORER-03
3/14/09
10:46 PM
Page 47
Web dilimleri kullan›c›lar›n sitelerimizi takip edebilmeleri aç›s›ndan
ilginç ifllevsellikler sa¤layabiliyor ve bu ifllemi çok kolaylaflt›rabiliyorlar. Bu çerçevede web dilimlerinin oluflturulmas› ile ilgili teknik
aç›dan birkaç farkl› yol var. Bu bölümümüzde her farkl› yolu avantaj
ve dezavantajlar›n› da de¤erlendirerek inceleyece¤iz.
<div class=”hslice” id=”Urun1”>
<h1 class=”entry-title”>
Bu bir ürün!</h1>
<div class=”entry-content”>
<p>
Ürün bilgisi burada.</p>
</div>
</div>
Yukar›da gördü¤ünüz basit HTML kodu herhangi bir web sayfas›nda
Web Slice’› tan›ml›yor. Web sayfalar› içerisinde Web Slice’lar tamamen microformatlar ile tan›mlan›r, normal flartlarda teknik olarak bir
ifllevselli¤i olsun veya olmas›n kodlar›n taray›c› için farkl› anlamlar›
vard›r. Örne¤in class özelli¤ine hslice alan bir HTML elementi taray›c› için bir Web Slice tan›m› anlam›na gelir. Normalde bizler
class de¤erlerine CSS s›n›flar›n› atar›z ve bu özelli¤i tasar›msal
ayarlamalar için kullan›r›z, oysa Internet Explorer 8 için hslice
ad›ndaki class de¤erinin çok daha farkl› bir önemi var. Tabi di¤er
yandan e¤er isterse web tasar›mc› veya programc› hslice ad›nda bir
CSS s›n›f› yaratarak bu durumdan görsel anlamda da faydalanabilir.
Internet Explorer 8 için bir Web Slice tan›mlarken ilk olarak web diliminin ana gövdesine hslice ismi ile bir class de¤eri vermelisiniz.
Sonras›nda bu Web Dilimine ait gövdeyi teflkil edecek olan HTML
elementinin kesinlikle sayfa içerisinde tekil bir ID de¤eri olmal›d›r.
Buradaki ID de¤erinin önemi çok büyük çünkü Internet Explorer sayfa içerisindeki Web Dilimleri’ni bu ID üzerinden tan›yacakt›r. ‹leriki
ad›mlarda da bahsedece¤imiz üzere kullan›c›lar›n bu web dilimini kesip taray›c›lar›na ald›ktan sonra e¤er söz konusu web diliminin ID bilgisini de¤ifltirirseniz daha önce kesip al›nan dilimler ile bu dilim aras›ndaki iliflki kopacakt›r ve kullan›c›lar art›k kesmifl olduklar› dilimle
ilgili güncellemeleri takip edemeyecektir.
47
EXPLORER-03
3/14/09
10:46 PM
Page 48
Son olarak basit bir Web Slice içerisinde bir de entry-content ve
entry-title bulunmas› gerekir. Yine farkl› HTML elementlerine
verilen class de¤erleri ile tan›mlanana bu özelliklerden entry-title
bir web diliminin kullan›c›lar›n taraf›ndan taray›c›ya entegre edilmesi
halinde araç çubu¤unda gösterilecek bafll›¤›n› tan›mlarken entrycontent ise web diliminin ana içeri¤i tafl›r. Her iki de¤eri de class
olarak alm›fl olan HTML elementleri içerisinde farkl› HTML kodlar›
yerlefltirilebilir.
Internet Explorer açt›¤› her sayfada hslice ile iflaretlenmifl HTML
elementlerini arar ve iç yap›s› uygun olanlar› otomatik olarak birer
web dilimi olarak kullan›c›ya gösterir. Kullan›c› bu web dilimini taray›c›s›na ekledikten sonra kullan›c› veya programc› taraf›ndan tan›mlanm›fl aral›klar ile Internet Explorer web dilimini güncelleyecektir.
Bir önceki bölümde kendi içerisinde entry-content içeren bir Web
Dilimi örne¤i gördük. E¤er herhangi bir web dilimi kendi içeri¤ini
do¤rudan HTML kodlar› olarak kendi ana elementi içerisinde entrycontent içinde tan›mlarsa Internet Explorer söz konusu web diliminin bulundu¤u sayfay› belirli aral›klarla istemciye indirir.
Sonras›nda gerekli parsing ifllemlerini de yapan Internet Explorer
web dilimini ID’si üzerinden HTML kodunda bulup içerisindeki
entry-content’te de¤ifliklik var ise kullan›c›y› uyar›r. Bu yap›
programlama aç›s›ndan en kolay haz›rlanabilen yap›d›r. Tek yapman›z gereken sayfan›zda dilimlenmesini istedi¤ini bölümleri tespit
edip gerekli yerlere hslice, entry-content ve entry-title
CSS s›n›flar›n› atamak.
Di¤er yandan farkl› senaryolarda daha esnek yap›lar oluflturabilmek
ad›na Web Dilimler’inin içeriklerinin farkl› kaynaklardan çekilebilmesi de mümkün. Seçeneklerden ilki web diliminin içeri¤ini ayr› bir
web sayfas›ndan almak.
D›splay Source De¤iflikli¤i
Yaratt›¤›n›z bir web diliminin taray›c›n›n üzerinde aç›lan k›sm›n› harici olarak tan›mlamak isteyebilirsiniz. Böyle bir talep asl›nda çok basit bir nedeni olabilir. Web diliminizin kesildi¤i yerdeki hali ile taray›c›da kesilmifl halinin farkl› tasar›mlar ile gözükmesini isteyebilirsi-
EXPLORER-03
3/14/09
10:46 PM
Page 49
niz. Bu gibi durumlarda herhangi bir web dilimi tan›mlarken web dilimi kesildikten sonra taray›c›n›n hangi veri kayna¤›ndan içerik takibi yapabilece¤ini belirleyebilirsiniz.
Yeni Ürün</h1>
<div class=”entry-content” href=”http://daron.
yondem.com/baska.aspx?ID=2”>
</div>
</div>
Yukar›daki kod içerisinde her zamanki gibi yine entry-content class
de¤erine sahip bir elementimiz var fakat bu sefer söz konusu elementin
bir de href de¤eri bulunuyor. Bir DIV elementinin HREF özelli¤ine sahip olmas› normal flartlarda hiçbir fley ifade etmez. Oysa Internet Explorer 8 için bu çok anlaml› bir iflaretleme. Entry-content’e verilen
href de¤erinde web diliminin içeri¤ini saklayan baflka bir sayfan›n adresi yer al›yor. Bu web dilimi flu anda bulundu¤u sayfada farkl› flekillerde gözükebilse de kullan›c› taraf›ndan taray›c›ya eklendi¤inde taray›c› de¤ifliklikler için href de¤erinde verilmifl sayfay› kontrol edecek
ve söz konusu sayfadaki içeri¤i kullan›c›ya gösterecektir. Böylece ana
sayfada yer alan web dilimi ve görsellik bozulmadan taray›c›n›n araç
çubu¤unda gözüken web dilimi tasar›m› tamamen özellefltirilebilir.
Farkl› Web Dilimleri’ni
Birbirine Ba¤lamak
Baz› durumlarda farkl› web dilimleri için ortak bir kaynak kullanmak
veya sitenizin farkl› yerlerinden kesilebilir flekilde gözükse de asl›nda
ayn› web dilimine yönlendirme yapmak isteyebilirsiniz. Bu gibi durumlarda yaratt›¤›n›z yeni bir web dilimine feedurl verebilirsiniz.
<div class=”entry-title”>
Urun Adı
</div>
<a rel=”feedurl” href=”http://daron.yondem.com/
baska.aspx#Urun2”></a>
</div>
49
EXPLORER-03
3/14/09
10:46 PM
Page 50
Yukar›daki kod ile tan›mlanan bir web dilimi asl›nda baska.aspx sayfas›ndaki ID’si Urun2 olan web dilimini hedef göstermektedir. Gördü¤ünüz a tag’› ile koyulan link içerisinde herhangi bir yaz› yaz›lmad›¤› için kullan›c›lar taraf›ndan söz konusu link alg›lanmayacak fakat
Internet Explorer linkin rel ve href özelliklerinden yola ç›karak gerekli ifllemleri yapabilecektir.
Web Dilimi’ne Kaynak Olarak
RSS Kullanmak
Bir web diliminin veri kayna¤›n› özellefltirme yolunda gidilebilecek
son nokta olarak RSS XML kaynaklar›ndan bahsedilebilir. Normal
flartlarda bir RSS içerisinde birden çok Item tag’› bulunur. Oysa bir
web dilimi için tek bir Item yeterlidir. Internet Explorer RSS kayna¤› içerisinden her zaman ilk Item’› alarak içerisindeki HTML’i araç
çubu¤unda kesilmifl bir web dilimi içerisinde gösterecektir.
<div class=”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› rssfeed.xml ad›nda bir dosya olarak tan›ml›yor. Dikkat ederseniz bu web diliminin herhangi bir entry-content’i yok. Rel özelli¤i feedurl
olarak atanm›fl a tag›n›n href özelli¤ine hedef veri kayna¤›n›n adresi
yerlefltirilmifl durumda. Gelin bir de h›zl›ca RSS’in yap›s›na göz atal›m.
<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 51
</channel>
</rss>
RSS kayna¤› içerisinde sadece bir ITEM bulunuyor. Söz konusu
Item’›n title de¤eri Internet Explorer içerisinde araç çubu¤unda gözükecekken description de¤eri ise Web Dilimi’nin içeri¤ini belirleyecektir. Son olarak ttl taglar› aras›ndaki de¤er ise bu web diliminin ne kadar sürede bir istemci taraf›nda kontrol edilmesi gerekti¤ini
belirler. TTL (Time To Live) de¤eri olarak verilebilecek en düflük de¤er 15’dir (dakika).
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¤erini HTML kodu içerisinde de yukar›daki gibi tan›mlayabilirsiniz.
Class özelli¤ine ttl de¤eri verilen DIV elementi içerisinde de¤erin
ekranda gözükmemesi için elementin CSS stil özelliklerinden display özelli¤i none olarak de¤ifltirilebilir.
NOT
WEB D‹L‹MLER‹NE D‹NAM‹K RSS
Görsel Arama bölümümüzde inceledi¤imiz üzere hem ASP.NET hem de
PHP ile dinamik XML üretimi kolayca yap›labiliyor. Bu çerçevede harici
RSS kaynaklar›na ba¤l› web dilimlerinin RSS kaynaklar› da özünde birer
XML dosyas› oldu¤u için bu kaynaklar da rahatl›kla sunucu taraf›nda dinamik olarak oluflturulabilir. Böylece kullan›c›lar çok daha bir flekilde
web sitenizi takip edebilirler.
51
EXPLORER-03
3/14/09
10:46 PM
Page 52
EXPLORER-04
3/14/09
10:31 PM
Page 53
Yaz›l›m Gelifltiriciler
için Internet
Explorer 8
JavaScript Yenilikleri
tostaticHTML Metodu
AJAX Navigasyon
Online ve Offline Çal›flma Yap›s›
Cross Domain Request Nesnesi
DOM Veri Ambar›
Session Storage
Local Storage
CSS ve HTML DOM
Gerçek Zamanl› Düzenleme
53
53
55
57
58
60
64
64
65
65
65
JavaScript Debuging
Profiler ile Optimizasyon
Image Optimizasyonu
Pratik Araçlar
Önce Güvenlik
Data Execution Prevention
Kullan›c›ya Özel ActiveX
Siteye Özel ActiveX
67
68
69
70
71
71
72
73
74
75
O Uygulamay› Sitemde Çal›flt›rma! 75
DOM Elementlerini Sorgulay›n 75
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 yeniliklerine de¤inecek, yeri gelecek uygulamalar›m›z›n tüm yap›s›n› de¤ifltirecek altyap›lardan bahsedece¤iz. Gelin konuyu daha fazla uzatmadan örneklerimiz ile Internet Explorer 8.0 içerisinde bizleri gizli sakl› neler bekliyor göz atal›m.
JavaScr›pt Yenilikleri
Özellikle istemci tarafl› programlama söz konusu oldu¤unda ço¤unlukla akl›m›za JavaScript gelir ve yazd›¤›m›z JavaScript kodlar›n›n
kontrol edilmesinden tutun performans›na ve güvenli¤ine kadar ço¤u
noktada farkl› testler yapmam›z gerekir. Bu bölümde Internet Explorer 8.0 ile beraber gelen baz› JavaScript yeniliklerinden bahsedece¤iz.
tostat›cHTML Metodu
Kullan›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 kullan›c›ndan bir metin de¤eri beklerken söz konusu metin içerisinde bulunan ve kullan›c›n›n kas›tl› olarak yazm›fl oldu¤u JScript kodlar›n›
fark›nda olmadan sayfada farkl› yerlere yerlefltirmifl olabiliriz. Bu
durumda 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
4
EXPLORER-04
3/14/09
10:31 PM
Page 54
kullan›c›lar›n girifl yapt›¤› tüm ekranlardaki verileri kullanmadan önce gerekli kontrolleri de yapmam›z gerekir.
Internet Explorer 8.0 ile beraber gelen tostaticHTML metodu parametre olarak kendisine bir HTML verisi al›r ve bu veriyi bir metne çevirecek flekilde gerekli filtreleme ve temizleme ifllemlerini yapar.
<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<script type=”text/javascript”>
function Goster() {
alert(toStaticHTML(document.getElementById(‘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
function Deneme() {
document.getElementById(“icerik”).
innerHTML = document.getElementById(“Text1”).value;
}
</script>
</div>
EXPLORER-04
3/14/09
10:31 PM
Page 55
</div>
</form>
</body>
</html>
Yukar›daki örnekte içinde JavaScript kodu bulunan bir DIV elementini alarak içeri¤ini kullan›c›ya göstermek istiyoruz. Tam da bu ifllemi
yaparken arada toStaticHTML metodunu kullan›yoruz. Böylece tüm
script’ler kodumuzdan temizleniyor ve ortaya sadece “DENEME”
metni ç›k›yor. Bu sistemi özellikle farkl› alan adlar›nda al›nan verilerin kontrolü için de rahatl›kla kullan›labilir.
AJAX ile programlama yaparken en s›k kulland›¤›m›z veri tafl›ma formatlar›ndan biri JSON (JavaScript Object Notation). Detaylar›na bakt›¤›m›zda ASP.NET AJAX içerisinde de tüm PageMethod’lar sunucundan istemciye JSON format›ndan veri gönderiyor. Bunun tabi ki
anlaml› 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›nda kullan›m› XML’e göre daha kolay. JSON’un art›k neredeyse tüm
AJAX kütüphanelerinde kullan›ld›¤›n› düflünürsek Microsoft taraf›nda 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›na
bakt›¤›m›zda belki de ço¤u zaman Eval metodu karfl›m›za ç›kacakt›r.
Peki Eval metodu ne yapar? Eval kendisine String olarak verilen bir
de¤iflkenin içindekileri bir kodmufl gibi çal›flt›r›r. Örne¤in afla¤›daki
kod ç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 olarak
baflka 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 noktada e¤er veri harici bir kaynaktan geliyorsa veya bu veriyi daha önce kullan›c› girmiflse asl›nda kullan›c›n›n do¤rudan sitenizde çal›flt›r›-
55
EXPLORER-04
3/14/09
10:31 PM
Page 56
lacak bir JavaScript kodunu girmesini sa¤lam›fl olursunuz. Bunu engellemenin tabi ki yollar› var, harici kütüphanelerde yine JavaScript
ile eval’e verilen metinleri Parse ederek inceleyen metodlar mevcut,
hatta baz›lar› bunun için Regular Expression bile kullanabiliyor. Fakat bunlar›n hepsi unutmayal›m ki yine JavaScript metodlar› kullan›larak yap›lan ifllemler. Oysa bizim do¤rudan taray›c› motorunda bu ifllemleri 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çerisinde
Native kodla yapt›¤› için tabi ki ortaya çok daha yüksek performansl› 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 metni aktar›yoruz. Bu metnin bir flekilde JavaScript nesnelerine çevrilmesi gerekiyor. Bunun için klasik eval metodunu kullanmaktansa do¤rudan IE 8.0 ile beraber gelen JSON nesnesinin parse özelli¤ini kullan›yoruz. Son sat›rda ise art›k Kitaplar de¤iflkenimize aktar›lan JSON
nesnelerinin içerisinden ilk kitab›n ad›n› al›yoruz.
Peki ya eldeki JavaScript nesnelerini JSON’dan standart metne çevirmek istersek ne yapaca¤›z? Bu durumda da yard›m›m›za yine JSON
nesnesinin 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 57
Yukar›daki örnekte yaratt›¤›m›z Kitaplar ad›ndaki nesneyi stringify
metodu ile bir JSON metnine çeviriyoruz. Ayr›ca isteyenler haricen
.toJSON metodunu da kullanabilirler. IE 8.0 ile beraber standart olarak Boolean, String, Date, Number s›n›flar›n›n prototiplerine toJSON metodu eklenmifl durumda.
Bugüne kadar harici kütüphanelerle yukar›daki ifllemleri yapt›¤›m›z
için tabi ki bu kütüphanelerin JSON nesnesi tan›mlad›klar›n› unutmad›k. Böyle bir durumda afla¤›daki gibi ufak bir kontrol ile taray›c›n›n
JSON nesnesini tan›mlay›p tan›mlamad›¤›n› kontrol edip e¤er tan›ml› de¤ilse harici scriptler üzerinden ilerlemeyebilirsiniz.
if(!this.JSON)
{
JSON = .....;
}
AJAX Nav›gasyon
Web sitelerinde AJAX kullan›m› gün geçtikçe art›yor ve neredeyse
art›k AJAX kullan›lmayan sitelere demode gözüyle bakmaya bafllad›k. Bu çerçevede AJAX’l› sitelerde yaflad›¤›m›z en büyük sorunlardan biri taray›c›n› geri ve ileri dü¤melerinin çal›flmamas›. Konu ile ilgili farkl› taray›c›lar için farkl› taktiksel çözümler gelifltirilmifl olsa da
art›k IE 8 ile beraber standart bir çözüm de geliyor.
AJAX ile sayfalar› programatik olarak yeniledi¤imizde sayfa adresinin de¤iflmiyor olmas› asl›nda sorunumuzun esas nedeni. E¤er sayfan›n adresini de¤ifltirebilseydik taray›c› da bu adresi kendi taray›c› geçmifline ekleyebilecekti. Tam da bu noktada web adreslerinin sonuna
ekleyebildi¤imiz çapalar ak›l›m›za geliyor. Örne¤in default.aspx#1 ile
default.aspx#2 asl›nda ayn› sayfa olsalar da ayr› adresler fleklinde tan›mlan›yor. Bu adresin çapa k›sm›, yani # iflaretinden sonraki k›sm›
de¤iflse de taray›c› sayfay› bafltan yüklemeyecektir çünkü konsept olarak ayn› sayfa içerisinde farkl› bir konum arayacakt›r. Çapalar›n bu
özelli¤inden faydalanarak normal kullan›mlar›n›n yan› s›ra sadece adres çubu¤undaki adresi de¤ifltirebilmek için de kullanabiliriz. Peki
tüm bunlar› nas›l yapaca¤›z?
window.location.hash
Yukar›da gördü¤ünüz kod AJAX kulland›¤›m›z web sitelerinde hayat›m›z› kurtaracak olan kodun sadece ufak bir parças›. Do¤rudan win-
57
EXPLORER-04
3/14/09
10:31 PM
Page 58
dow.location.hash de¤erine aktard›¤›n›z de¤erler art›k taray›c›n›n adres çubu¤unda # iflaretinden sonras›na eklenecek ve hash de¤eri her
de¤ifltirildi¤inde bir önceki adres de taray›c› geçmifline kaydedilecek.
Böylece h›zl› bir flekilde AJAX sitemizde ileri ve geri dü¤melerinin
aktif hale gelmesini sa¤layabiliyoruz. Fakat bir sonraki ad›mda kullan›c›n›n ileri veya geri dü¤melerine bast›¤›n› da alg›lamam›z gerekiyor
ki duruma göre gerekli AJAX isteklerini tekrar yaparak sayfay› eski
haline getirebilelim. Unutmay›n sayfa hiçbir flekilde tekrar yüklenmeyecek o nedenle sayfay› eski haline getirmek de tamamen bize kal›yor. Hash de¤erine daha önce söz konusu sayfalar› tan›mlayacak bir
de¤er verdiyseniz kullan›c› taray›c›da gezerken gidilmek isteyen sayfan›n hash de¤eri size verildi¤inde sayfan›n eski halini üretebilmeniz
hiç 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 herhangi bir HTML sayfada yer alan Body tag›n›n onhashchange
event’›na özel bir JavaScript listener fonksiyonu ekleyebilirsiniz. Böylece art›k ileri veya geri navigasyonlar›nda bizim HashChanged metodumuz çal›flt›r›lacak. Peki ne yapaca¤›z HashChanged içerisinde?
Hash de¤iflti¤inde göre yeniden window.location.hash üzerinden yeni hash de¤erini al›p ona uygun AJAX isteklerini gerçeklefltirerek siteyi eski haline getirmemiz gerekiyor.
Tüm bu manzara içerisinde önemli olan noktalardan biri de AJAX sitelerinde yaflad›¤›m›z bir di¤er sorunu daha gidermifl olmam›z. Bildi¤iniz üzere AJAX sitelerinde sitenin farkl› durumlar›na ait farkl› URL
adresleri de bulunmaz. Oysa bizim # implementasyonu ile beraber art›k sitemizin hash bilgisini de¤ifltirdi¤imiz her noktada yeni bir sayfa
ve 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 internet ba¤lant›s› kesintilerinde sayfan›n bir daha geri ulafl›lamayacak
flekilde ekrandan kaybolmas› veya farkl› hatalar›n ortaya ç›karak geri
dönüflü imkans›z hale getirmesidir. Bu hofl olmayan durumu art›k Internet Explorer 8.0 ile beraber çözebiliyoruz. IE 8.0 içerisinde navig-
EXPLORER-04
3/14/09
10:31 PM
Page 59
tor.offline nesnesi ile istemci taraf›nda internet ba¤lant›s›n›n o an için
olup olmad›¤› kontrol edebildi¤imiz gibi internet ba¤lant›s› ile ilgili
de¤ifliklikleri alg›layacak event-handler tan›mlamalar› da yapabiliyoruz. Bu kolayl›klar ile art›k AJAX veya Silverlight uygulamalar›n›n
istemci 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¤unu alg›layan uygulama veriyi DOMStorage’a saklay›p bir sonraki çal›flt›¤›nda sunucuya gönderebilir. Minik bir örnek ile bu ifllemleri nas›l yapabilece¤imize göz atal›m.
<body ononline=”VarMi();” onoffline=”VarMi();”>
<form id=”form1”>
</div>
<input onclick=”VarMi();” id=”Button1”
</form>
</body>
Yukar›daki HTML kodu içerisinde özellikle koyu yaz›l› noktalara dikkat etmemiz gerekiyor. Birazdan yazaca¤›m›z VarMi ad›ndaki JavaScript fonksiyonumuz istemcide internet ba¤lant›s› olup olmad›¤›n›
kontrol edecek. Fakat hangi durumlarda bu kontrolü yapaca¤›z? ‹lk
olarak söz konusu fonksiyonumuzu sayfam›zda bir dü¤meye ba¤lad›k. Böylece istedi¤imiz zaman t›klayarak internet ba¤lant›s› olup olmad›¤›n› ö¤renebiliriz. Di¤er yandan istemcide internet ba¤lant›s›
koptu¤unda veya internet ba¤lant›s› geldi¤inde de VarMi fonksiyonumuzun çal›flarak gerekli de¤ifliklikleri yapmas›n› istiyoruz. O nedenle body’nin ononline ve onoffline özelliklerine de söz konusu
fonksiyonumuzun ad›n› yaz›yoruz. Böylece online durumunda yani
internet ba¤lant›s› geldi¤inde veya onoffline durumunda yani internet
ba¤lant›s› kesildi¤inde de an›nda VarMi fonksiyonumuz çal›flt›r›lacak. Gelelim flimdi de VarMi fonksiyonumuzu yazmaya.
function VarMi() {
if (window.navigator.onLine) {
$get(“icerik”).innerHTML = “İnternet Var”;
}
else {
59
EXPLORER-04
3/14/09
10:31 PM
Page 60
}
};
$get(“icerik”).innerHTML = “İnternet YOK”;
Asl›nda kod çok basit. navigator.onLine metodu bize geriye bir Boolean de¤eri döndürüyor. E¤er taray›c›da o an internet ba¤lant›s› varsa
sayfadaki bir DIV içerisine uygun uyar› mesaj›n› yaz›yoruz. Ayn› flekilde 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› ifllemleri
bir 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 Nesnesi
Bir 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. Normal flartlarda bu gibi alan adlar› aras› veri trafi¤i güvenlik nedeni ile taray›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 eriflimimiz
var ise karfl› taraftan veriye eriflmek isteyenlere izin verme hakk›m›z
olsun. ‹flte Internet Explorer 8 ile beraber gelen XDomainRequest nesnesi eski XmlHttpRequestler’e benzer kullan›m› ile tam da bu ifllevselli¤i sa¤l›yor. Normal bir XmlHttpRequest’ten farkl› olarak XDomainRequest gerekti¤inde karfl› alan ad› ile ilgili kontrolleri de yaparak birden çok alan ad› aras›ndaki iletiflimi rahatl›kla sa¤layabiliyor.
Internet Explorer 8 üzerinden bir XDomainRequest nesnesi yaratarak
sunucudan talepte bulundu¤unuzda talebiniz ile beraber otomatik olarak XDomainRequest: 1 http header bilgisi gönderilecektir. E¤er bu
header bilgisine karfl›l›k olarak uzak noktadan da XDomainRequestAllowed: 1 header bilgisi gelirse art›k her iki taraf da birbiri ile iletiflime geçebilir demektir.
Bahsetti¤imiz flekilde kendi sunucunuzda bulunan baz› veri kaynaklar›na bu flekilde farkl› alan adlar›ndan da eriflilebilmesini istiyorsan›z
sunucu taraf›ndan dinamik olarak gerekli olan http Header bilgilerini
eklemeniz yeterli olacakt›r.
[ASP.NET / C#]
Response.AppendHeader(“XDomainRequestAllowed”,”1”);
EXPLORER-04
3/14/09
10:31 PM
Page 61
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 adrese
talep hiçbir flekilde gönderemezsiniz.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<title></title>
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 XDomainRequest
nesnesinin yarat›lma fleklini görebilirsiniz. XDR’›n onload durumu
veri geldi¤inde çal›flt›r›lacak olan event-listener’› tan›mlar. Bizim örne¤imizde geldi ad›ndaki JavaScript fonksiyonu veri geldi¤inde çal›flt›r›lacakt›r. Geldi fonksiyonu çal›flt›r›ld›¤›nda anda tekrar elimizdeki
XDR üzerinden responseText alarak gelen veriye ulaflabiliyoruz.
61
EXPLORER-04
3/14/09
10:31 PM
Page 62
Daha detayl› bir örnek için afla¤›daki kodu inceleyebilirsiniz. Sat›r
aralar›ndaki yorumlara dikkat etmenizde fayda var.
<html>
var xdr;
function readdata() {
var dRes = document.getElementById(‘dResponse’);
dRes.innerText = xdr.responseText;
// Gelen verinin tipini gösterir
alert(“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 63
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” value=”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 belirtebilirsiniz. Böylece gere¤inden uzun süren ifllemlerin durdurulmas›n› veya
XDR ile ilgili farkl› durumlar›n yakalanmas›n› da sa¤layabilirsiniz.
63
EXPLORER-04
3/14/09
10:31 PM
Page 64
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 gerek. ‹lk olarak Cookie’ler ile DOM Storage aras›ndaki en büyük fark
birinin 4KB alan sa¤larken di¤erinin standart olarak 10MB alan sa¤layabiliyor olmas›. Tahmin edece¤iniz gibi asl›nda basit de¤erler saklayaca¤›m›z bir ortamdan bahsetmiyoruz belki de art›k web tabanl›
yaz›l›mlar›n dokümanlar›n› sa¤layabilecekleri kendilerine özgü kullan›c› verilerini tutacaklar› bir ortamdan bahsedebiliriz.
DOM Storage’u özellikle Internet Explorer 8’in online ve offline çal›flma mant›¤› ile de birlefltirirseniz asl›nda ortaya çok ilginç bir manzara ç›kabiliyor. Taray›c› içerisinde rahatl›kla kullan›c›n›n verilerini
sunabilen ve kullan›c›n›n internet ba¤lant›s› duruma göre verileri geçici olarak DOM Storage üzerindeki ortama kaydedebilen uygulamalar çok yak›nda internet ortam›nda bizleri flafl›rtacakt›r.
Hemen akla gelen sorulardan biri de eminim ki DOM Storage’›n da
Cookie’ler gibi sunucuya gönderilen her iste¤e eklenip eklenmedi¤i
olacakt›r. Kesinlikle hay›r, DOM Storage içerisindeki veriler sunucuya gönderilmez hatta Cookie’ler gibi son kullanma tarihleri de yoktur.
Sess›on Storage
DOM Storage içerisinde kullanabilece¤iniz yap›lardan ilki tamamen
session bazl› olarak verilerin tutulmas› olabilir. Böyle bir durumda verilen 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 kaydedebilirsiniz. Sonras›nda da tahmin edece¤iniz üzere ayn› flekilde söz konusu veriyi geri alabilirsiniz.
E¤er tan›mlamakta oldu¤unuz session Store ö¤esi o ana kadar yarat›lmam›fl ise otomatik olarak yarat›lacakt›r.
EXPLORER-04
3/14/09
10:31 PM
Page 65
Local Storage
Session Store’dan farkl› olarak Local Store içerisine saklanan veriler
alan ad› bafl›na saklan›r ve tüm oturumlar taraf›ndan rahatl›kla kullan›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.pageLoadCount, 10) + 1;
document.getElementById(‘count’).innerHTML = storage.
pageLoadCount;
</script>
Yukar›daki örnek içerisinde basit bir flekilde yarat›lan pageLoadCount 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 bir
tane artt›r›larak ayr› bir element içerisine yazd›r›l›yor.
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 sahip
olmamas›yd›. Bunun için baz› durumlarda harici eklentiler kullan›rken bazen alternatif taray›c›lara da yönelmek zorunda kal›yorduk. Gelin beraberce bu sorunlar› çözme amac›yla Internet Explorer 8.0’a eklenmifl olan “Developer Tools” uygulamas›n› inceleyelim.
CSS ve HTML DOM
Gerçek Zamanl› Düzenleme
Internet Explorer 8.0 içerisinde Tools menüsünden ulaflabilece¤iniz
“Developer Tools” ayr› bir pencerede ayr› bir programm›fl gibi aç›lsa
da tabi ki taray›c› ile entegre çal›fl›yor. Aç›lan “Developer Tools” penceresinin sa¤ üst köflesinde “Pin” dü¤mesine basarsan›z bu pencere
kendini IE içerisine yerlefltirecektir. Açt›¤›n›z herhangi bir sitenin
65
EXPLORER-04
3/14/09
10:31 PM
Page 66
HTML DOM’unu incelemenin yan› s›ra CSS konusunda raporlar da
alabiliyorsunuz. 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 bunlar› rahatl›kla bir liste olarak görmek mümkün.
CSS ve DOM kontrol alt›nda!
Yukar›da gördü¤ünüz ekranda sol tarafta sayfan›n DOM a¤ac›n› inceleyebilirsiniz. DOM içerisinde herhangi bir element özel olarak seçildi¤inde o elementi etkileyen tüm CSS s›n›flar›, özellikleri ve bu özelliklerin 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¤ifltirerek IE içerisinde gerçek zamanl› olarak sonucu görebiliyorsunuz.
‹sterseniz “Developer Tools” içerisinde HTML tab›ndan CSS tab›na
geçerek do¤rudan sayfadaki tüm CSS özelliklerini yakalayabilir ve
gerçek zamanl› olarak de¤ifliklikler de yapabilirsiniz. Tüm bu de¤ifliklikleri tamamlad›ktan sonra araç çubu¤undaki “Kaydet” dü¤mesine
basman›z CSS dosyan›z›n o anki hali ile kaydedilmesi için yeterli.
EXPLORER-04
3/14/09
10:31 PM
Page 67
JavaScr›pt Debug›ng
Visual Studio içerisinde JavaScript Debuging’e k›yasla çok daha baflar›l› buldu¤um IE 8.0 Developer Tools içerisinde JavaScript araçlar›n›n en büyük avantaj› do¤rudan IE ile beraber çal›flt›klar› için taray›c› içerisindeki tüm aktiviteyi takip edebiliyor olmak. ‹sterseniz herhangi bir JavaScript de¤iflkenine ayn› Visual Studio içerisinde VB veya C# kodlar›na yapt›¤›m›z gibi Watch’lar ekleyin veya istedi¤iniz bir
ad›ma BreakPoint yerlefltirin. Hatta F10 ve F5 gibi Visual Studio k›sayollar› bile ayn›.
JavaScript taraf›nda Watch koyarak durumu takip edin.
Özellikle Silverlight 1.0 taraf›nda yaz›lan JavaScript kodlar›n›n veya
AJAX taraf›nda yaz›lan veri ulafl›m kodlar›n›n incelenmesi ve hatalar›n bulunmas› epey kolaylaflm›fl durumda. Afla¤›daki görsel içerisinde
JavaScript ile tan›mlanm›fl bir Silverlight nesnesinin Source özelli¤ine verilen de¤eri do¤rudan “Locals” tab› üzerinden giderek sayfada tan›mlanm›fl tüm JavaScript nesnelerini listeleyip bulabiliyoruz.
Tüm bunlar› yaparken istedi¤iniz anda herhangi bir de¤iflkenin de¤erini Developer Tools içerisinde de¤ifltirebilirsiniz, sonucu gerçek zamanl› olarak IE içerisinde göreceksiniz.
67
EXPLORER-04
3/14/09
10:31 PM
Page 68
JavaScript taraf›ndaki sayfada bulunan tüm nesneler ve
de¤iflkenler düzenlenebiliyor.
Prof›ler ile Optimizasyon
Yazd›¤›m›z kodun ne kadar optimize oldu¤unu anlamak çok önemli.
Bunun için tam olarak hangi kodun daha çok zaman ald›¤›n› bilmeliyiz. Özellikle SQL taraf›nda al›fl›k oldu¤umuz Profiler sistemine benzeyen bir yap› ile art›k IE üzerinde de Developer Tools içerisinde bir
Profiler bulunuyor. “Start Profiler” dü¤mesine bast›ktan sonra IE penceresine geçip site üzerinde istedi¤iniz ifllemleri yapabiliyorsunuz.
Sonra Developer Tools’a dönerek “Stop Profiler” dedi¤inizde geçen
süre içerisinde yapt›¤›n›z tüm ifllemlerin bir listesi karfl›n›za ç›k›yor. Bu
listeyi ister bir “Function” listesi olarak al›n ister bir a¤aç görüntüsünde hangi function’›n hangisini ça¤›rd›¤›na bakarak inceleyin. Önemli
olan art›k hangi ifllemin ne kadar sürdü¤ünü görebiliyor olmam›z.
EXPLORER-04
3/14/09
10:31 PM
Page 69
Kod optimizasyonu için Profiler.
Image Optimizasyonu
Baz› durumlarda bir web sitesine koydu¤umuz resmin hem en ve boy
boyutu hem de dosya boyutuna bakabilmek için do¤rudan dosyan›n
kendisini 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üm
sitelerdeki resimlerin boyutlar›n› resimlerin üzerine yaz›yor. Gerçekten hofl bir özellik.
69
EXPLORER-04
3/14/09
10:31 PM
Page 70
Gerçek zamanl› olarak sitedeki resimlerle ilgili detaylar› görebilirsiniz.
Pratik Araçlar
Bir sayfadaki tüm DIV’leri görmek mi istiyorsunuz, tek yapman›z gereken “Outline” menüsünden DIV seçene¤ini iflaretlemek. Böylece
gerç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 bir
elementi 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 mesafeler
aras›nda X ve Y koordinatlar› farklar› görebilirsiniz.
EXPLORER-04
3/14/09
10:31 PM
Page 71
Pratik araçlardan biri: Cetvel!
Ayn› menüdeki “Show Color Picker” ile gezdi¤iniz sitedeki herhangi
bir 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 olarak
farkl› ekran çözünürlü¤ündeymifl gibi boyutland›r›lmas›n› sa¤layabilirsiniz.
Burada daha bahsedemedi¤imiz bir çok özellik “Developer Tools” ile
beraber Internet Explorer 8 içerisinde geliyor. Bir yaz›l›mc› olarak bu
geliflme beni çok mutlu etti diyebilirim.
Önce Güvenlik
Neredeyse her yaz›l›m›n yeni sürümde art›k “Daha Güvenli” sözlerini duymaktan b›kt›k. Peki nedir daha güvenli olan? diye sordu¤umuzda ço¤u zaman tatmin edici cevaplar alam›yoruz. O nedenle ben bu
bölümde sizlerle Internet Explorer 8 içerisindeki güvenli¤e bak›fl› teknik bir aç›dan inceleyece¤im.
Data Execut›on Prevent›on
K›sa ad› DEP olan sistemin asl›nda do¤rudan IE ile bir iliflkisi yoktu.
Windows XP ve 2003 ile beraber gelen altyap› sistemde belirli bellek
alanlar›n›n korunmas›n› ve bu alanlardan kod çal›flt›r›lmas›n› engellenebilmesini sa¤l›yor. Böylece Buffer Overrun sald›r›lar›na ait boflluklar›n bulunmas› çok daha zor bir hal al›yor. Tabi “Managed Code”
yazarlar› olarak VB.NET ve C#.NET programc›lar›na bu yap› yabanc› gelecektir. Maalesef flimdilik çok detaylar›na girme flans›m›z yok.
71
EXPLORER-04
3/14/09
10:31 PM
Page 72
fiu ana kadar bu altyap› Windows’da olmas›na karfl›n maalesef IE 7.0
ile beraber varsay›lan ayarlarda aç›k gelmiyor. Bunun mant›kl› bir nedeni var; DEP ile uyumsuz programlar›n bugüne kadar çal›flmas› gerekiyordu, özellikle IE 7.0 için yaz›lm›fl ço¤u Plug-In maalesef bu durumdayd›. ATL 7.1 ve öncesindeki uygulamalar›n DEP ile karfl› karfl›ya gelmesi durumunda uygulaman›n kendisine izin verilmeyen bir haf›za alan›na yazmaya çal›flmas› sonucu do¤rudan uygulaman›n sonland›r›lmas› söz konusu. Tabi ki var olan Plug-In’leri ve uygulamalar› uygun flekillder düzelterek (IMAGE_SCN_MEM_EXECUTE fleklinde iflaretlemeler ile) sorunu gidermek mümkün.
Internet Explorer 8.0 taraf›nda art›k DEP Vista SP1 ve Server 2008
içerisinde otomatik olarak aç›k gelecek. DEP ile beraber bir de Vista’da gelen ASLR (Address Space Layout Randomization)’yi de birlefltirdi¤imizde ortaya güvenlik anlam›nda hofl bir manzara ç›k›yor.
ASLR’nin yapt›¤› ise sistem her aç›ld›¤›nda Kernel32 gibi belle¤e
yüklenen sistem ö¤elerinin her seferinde farkl› bellek noktalar›na
yüklenmesini sa¤lamak. Böylece kötü niyetli bir kodun sald›rma öncesinde do¤ru hedefi bulmas› daha zor oluyor.
Vista içerisinde hangi uygulamalar›n DEP taraf›ndan korundu¤unu
görmek isterseniz do¤rudan “Görev Yöneticisi”/ “Task Manager” içerisinde “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 Options/Advanced” sekmesine giderek uygun seçene¤i iflaretleyebilirsiniz. Unutmay›n bunu yapabilmeniz için IE’yi Admin haklar› ile açm›fl
olman›z gerekecektir.
Kullan›c›ya Özel Act›veX
Özellikle Vista ile beraber gelen UAC (User Account Control) sonras›nda gelen en büyük flikayetlerden biri ActiveX kontrolleri yüklerken
admin haklar›n›n gerekmesiydi. Kiflisel olarak kulland›¤›n›z bilgisayar›n›zda bu bir sorun teflkil etmese de flirket içi domainlere kay›tl› ve
farkl› 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 olmasalar
da kendi kullan›c› hesaplar›na özel olarak ActiveX uygulamalar› yükleyebilecekler. E¤er söz konusu ActiveX uygulamas› zararl› bir kod
EXPLORER-04
3/14/09
10:31 PM
Page 73
içeriyorsa bu durumun bilgisayar hiçbir flekilde zarar görmeyecektir.
Var olan ActiveX uygulamalar› herhangi bir sorun yaflamadan bu sistem ile çal›flacak.
Kullan›c›lar›n herhangi bir ActiveX kontrolü ile karfl›laflt›klar›nda
kontrolü sadece kendileri için veya tüm makine baz›nda yüklemek isteyip istemediklerini seçebilecekler. Bu seçim flu anki Internet Explorer içerisinde ActiveX kontrolleri için gelen uyar› mekanizmas›na dahil edilmifl durumda.
Siteye Özel Act›veX
Haz›rlad›¤›n›z ActiveX kontrollerinin sadece belirli bir sitede çal›flmas›n› isteyebilirsiniz. Özellikle yüksek güvenlik amac›yla bankac›l›k uygulamalar›nda kullan›lan ActiveX kontrolleri buna bir örnek
olarak gösterilebilir. Bu k›s›tlaman›n yap›labilmesi için ActiveX uygulamas› gelifltirilirken “SiteLock Active Template Library”nin kullan›lmas› gerekiyor. Arka planda çal›flan mant›k asl›nda çok basit; Internet Explorer içerisinde çal›flabilecek ActiveX kontrollerinin “Safe”
fleklinde iflaretlenmesi gerekir. E¤er bir ActiveX kontrolü kendi istedi¤i alan adlar› haricinde çal›flt›r›ld›¤›nda kendisini “UnSafe” olarak
tan›mlarsak IE do¤rudan söz konusu ActiveX’i pasif hale getiriyor.
Standart ATL flablonunun yerine oturan SiteLock flablonu IObjectSafety ve IObjectSafetySiteLockImpl üzerinden türüyerek Build
esnas›ndan tan›mlanan siteler d›fl›nda çal›flm›yor. SiteLock 1.14 flablonunu afla¤›daki adresten indirebilirsiniz.
http://www.microsoft.com/downloads/details.aspx?FamilyID=
43cd7e1e-5719-45c0-88d9-ec9ea7fefbcb&displaylang=en
ActiveX’ler art›k birer Add-On ve siteye özel yüklenebiliyorlar.
Kullan›c›lar ActiveX uygulamalar›n› IE 8.0 içerisinde birer Add-On
olarak görecekleri için istedikleri ayar› “Manage Add-ons” penceresinden yaparak belirli ActiveX’lerin sadece istedikleri sitelerde çal›fl-
73
EXPLORER-04
3/14/09
10:31 PM
Page 74
mas›n› sa¤layabilirler. Bu ayar “Group Policy” üzerinden de art›k yap›labiliyor.
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Ext\Stats\{ID}\iexplore\AllowedDomains\
{Domain}
Yukar›da adres üzerinden Registry içerisinde gerekli ayarlar bulunabilir. {ID} yerine kontrol edilmesi hedeflenen ActiveX kontrolünün
Class ID’si, {Domain} yerine de izin verilen domainler atanabilir.
Son dönemde XSS (Cross Site Scripting) sald›r›lar› belki de en s›k
karfl›laflt›¤›m›z güvenlik aç›klar›ndan. Bu teknik ile rahatl›kla bir web
sitesi ile kullan›c›s› aras›na girerek kullan›c›n›n bast›¤› tufllara kadar
her tür bilgi al›nabiliyor. Bu konuda tam bir koruma sunman›n kullan›c› deneyimini ciddi flekilde kötü durumlara sürükleyece¤i için minimal koruma mekanizmalar› devreye sokulmufl.
XSS Korumas›.
Yaz›l›m gelifltiriciler isterler bu korumalar› sunucu taraf›ndan kapatabiliyorlar. Tek yapmalar› gereken X-XSS-Protection: 0 fleklinde gerekli HTTP Header bilgisinin sayfalar›na eklemek.
Bu noktada özellikle bir uyar›da bulunmak istiyorum. ‹stemci taraf›nda 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 sisteme “güvenerek” hareket etmesine neden olabilecek bir yap› de¤ildir.
Unutmamak gerek ki herkese IE kullanmayabilir.
EXPLORER-04
3/14/09
10:31 PM
Page 75
MIME Type ayarlar› normal flartlarda HTTP Header bilgisi içerisinde saklansa da bugüne kadar Internet Explorer kendi kendine kararlar
vererek daha kolay bir kullan›m sa¤lamak için MIME Type de¤ifliklikleri yapabiliyordu. Örne¤in text/plain olarak ayarlanm›fl bir dosya
içerisinde HTML kodu varsa bu dosya aç›ld›¤›nda IE içerisinde bir
HTML sayfa olarak render edilir. Oysa dosya bir text dosyas›d›r ve o
flekilde gösterilmelidir.
IE 8.0 ile beraber e¤er sunucudan authoritative=true HTTP header
bilgisini gönderirseniz IE sizin sunucu taraf›nda düzenledi¤iniz MIME
Type 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 indirilen herhangi bir uygulaman›n veya farkl› kodun do¤rudan sitenin üzerinde ç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 ifllemi
yapabilmeniz için karfl›n›zda uygun seçenekler IE taraf›nda getirilir.
E¤er kullan›c›ya sunulacak dosyay› kesinlikle kullan›c› taraf›nda diske kaydedilmesini ve do¤rudan site üzerinden aç›lamamas›n› istiyorsan›z X-Download-Options: noopen HTTP Header bilgisini vererek
bu ifllemin tamamlanmas›n› sa¤layabilirsiniz.
DOM Elementlerini Sorgulay›n
DOM içerisinde istedi¤imiz bir nesneyi bulmak bazen çok zor olabiliyor. 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 bir
elementin içindeki farkl› elementleri de buldurabiliyoruz. ‹flte tam da
bu noktada QuerySelector yap›lar› devreye giriyor ve ayn› CSS komutlar› gibi komutlarla DOM’u sorgulayarak sonucunda elimize
HTML elementlerinin ulaflmas›n› sa¤l›yor.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>
<head>
<title></title>
75
EXPLORER-04
3/14/09
10:31 PM
Page 76
<meta http-equiv=”X-UA-Compatible” content=”IE=8”>
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”
<div class=”kirmizi”>
<span>Deneme1</span></div>
<div class=”siyah”>
<div class=”kirmizi”>
</div>
</body>
</html>
Yukar›daki örnekte gördü¤ünüz üzere sayfa içerisinde icerik ad›nda
bir DIV var ve bu DIV içerisinde de birden çok DIV elementleri bulunuyor. Bizim hedefimiz icerik DIV’i içindeki DIV’lerden class özelli¤i siyah olan›n içindeki SPAN’in içindeki de¤eri almak. Bunu yapabilmek için basit bir flekilde div.siyah diyerek sorgumuzda CSS s›n›f›
Siyah olan DIV’Leri buluyoruz sonras›nda da bir boflluk b›rakarak
SPAN elementlerini al›yoruz. querySelectorAll komutuna verdi¤imiz
sorgumuz sonras›nda elimize sorguya uygun elementler ulafl›yor. Bu
noktadan sonra eldeki elementler ile farkl› ifllemler yap›labilir. Query
Selector yap›lar› W3C taraf›ndan standart olarak gelifltiriliyor. Standart ile ilgili tüm detaylara afla¤›daki adresten ulaflabilirsiniz.
http://www.w3.org/TR/selectors-api/
EXPLORER-05
3/14/09
10:31 PM
Page 77
Tasar›mc›lar için
Internet Explorer 8
Compatibility View
77
79
80
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› ile
iliflki de¤il. Bugün Internet Explorer 8.0 standartlara uygun yeni tarama altyap›s› ile gelse de bu sefer de eski standartlara uygun olmayan
sitelerimizle ilgili sorun yaflayaca¤›m›z kesin. O neden bizler için Internet Explorer 8.0’›n yeni özelliklerinden faydalanman›n önemi kadar hali haz›rda var olan sitelerimizi de hemen Internet Explorer 8 ile
rahatl›kla çal›fl›r hale getirebilmek de çok önemli.
Compat›b›l›ty V›ew
Internet Explorer 8.0 ile beraber asl›nda eski taray›c› motorlar› da halen gelmekte. Bunun nedeni eski sitelerin eski taray›c› motoru ile gösterilmesinin flart olmas›. Bir anda tüm sitelerin yeni motora uygun flekilde 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 sistem
için haz›rlanm›fl siteleri alg›lay›p kullan›c›y› uyarabiliyor ve farkl› taray›c› motorlar› aras›nda geçifl taray›c›n›n kapat›l›p tekrar aç›lmas›n›
gerektirmiyor.
Compatibility View dü¤mesi.
5
EXPLORER-05
3/14/09
10:31 PM
Page 78
“Compatibility View” dü¤mesine basarak eski standartlara göre açt›¤›n›z bir web sitesiyle ilgili ayar› IE 8 saklayarak bir dahaki sefere ayn› siteyi ziyaret etti¤inizde otomatik olarak “Compatibiltiy View” seçene¤i aktif hale getiriyor. ‹nternet üzerinden aç›lan tüm siteler normal modda çal›fl›rken intranet üzerinden aç›lan tüm siteler ise otomatik olarak “Compatilibity View” modunda aç›l›yor. Burada önemli
olan bir di¤er nokta da User Agent bilgisi. Özellikle istatistik sistemleri için ASP.NET taraf›ndan taray›c›n›n sürüm bilgisinin al›nd›¤› durumlarda unutmamak gerek ki IE 8.0 “Compatibility View” içerisindeyse sunucuya User Agent olarak IE 7 bilgisi gönderecektir. Hangi
sitelerin nas›l gösterilece¤ine ayr›ca Tools menüsünden “Compatibility View Settings” k›sm›ndan ulaflabilirsiniz. Buradan ister tüm sitelerin IE 7 gibi gösterilmesini veya sadece adresini iletti¤iniz sitelerin
IE 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 79
TASARIMCILAR ‹Ç‹N INTERNET EXPLORER 8
Tavsiye edilen tabi ki tüm sitenizi gözden geçirerek IE 8’e uygun flekilde gerekli düzenlemeleri yapman›z. Fakat bu süreçte h›zl› bir adaptasyon sa¤lamak için isterseniz sitenizin IE 8 içerisinde otomatik IE 7
motoru ile, yani “Compatibility View” içerisinde aç›lmas›n› da sa¤layabilirsiniz. Bunun için iki seçene¤iniz var;
E¤er tüm site baz›nda bu ifllemi yapmak istiyorsan›z HTTP Header
olarak 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=EmulateIE7” />
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›z
ve “Compatibility View” içerisinde gösterildi. Tüm istemcilerde art›k
siteniz bu modda gösterilecek flekilde kaydedildi¤i için IE8.0 ile ilgili uyumluluk sorunlar›n›z› halletseniz ve HTTP header bilgisi ile meta taglar› kald›rsan›z da herkes hala IE 7.0 modunda sitenizi ziyaret etmeye devam edecektir. Bunu aflman›n yolu ise tüm istemcileri IE 8.0
modunda çal›flmaya zorlamaktan geçiyor.
X-UA-Compatible: IE=EmulateIE8
Yukar›daki gördü¤ünüz flekilde ister HTTP Header ayarlay›n ister meta taglar kullan›r hiç fark etmez. Art›k siteniz kesinlikle IE8.0 modunda
79
EXPLORER-05
3/14/09
10:31 PM
Page 80
gösterilecek ve istemcilerde kullan›c›lar isteseler de “Compatibility View” modunu aktif hale getiremeyecekler. E¤er siteniz daha öncesinde
istemcide “Compatibility View” ile gösterilecek siteler listesinde yer
al›yorduysa IE 8.0 taraf›ndan otomatik olarak o listeden de silinecektir.
CSS kurallar›na ayk›r› olsa da bugüne kadar sadece Internet Explorer
içerisinde çal›flan filtrelemeler kulland›ysan›z art›k Internet Explorer
8.0 ile söz konusu filtrelemelerin yaz›m›n› de¤ifltirmeniz gerekecektir. 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 Internet Explorer içerisinde kullan›labilir flekilde tan›mlanabiliyordu. Bu
filtreleme sisteminin yaz›m›ndaki sorun tek sat›rda birden çok üst üste iki noktan›n bulunuyor olmas›. CSS kurallar› gere¤i bu flekilde bir
yaz›m mümkün de¤il. IE 8.0 ile beraber bu yaz›m flekli afla¤›daki flekilde de¤ifltiriliyor.
#seffafDiv {
-ms-filter: “progid:DXImageTransform.Microsoft.
Alpha(Opacity=50)”;
}
Böylece art›k herhangi bir sorun yaflamadan rahatl›kla bu filtreleri
CSS s›n›flar›n›z aras›nda kullanabilirsiniz. Di¤er yandan flu an için
hem eski hem yeni sürüm IE taray›c›lar›nda kodlar›n›z çal›flmas› için
her 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;
}
Daron Yöndem
IE8
.Son kullanýcýlarýn gözünden IE 8 yenilikleri
.Web Tasarýmcýlar için notlar
.Görsel Arama Altyapýlarý
.Hýzlandýrýcýlar
Daron Yöndem
.Web Dilimleri
.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.
Daron YÖNDEM
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.
KODLAB
KODLAB
www.kodlab.com
Hýzlý Kolay ve Daha Güvenli!
KODLAB
www.kodlab.com

Internet Explorer 8 Kitabını İndirmek için tıklayın

Transkript

Benzer belgeler

PE Körkasa Bandı

ButylSeal (TDS)

NEne VARvar NEne YOKyok NEne VARvar NEne YOKyok

Grout XL

Workcube Eğitim ve Hizmetler

AÇ - ekolojikmim.com

Çekomastik 888