Erişilebilirlik ve Test

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 15 Erişilebilirlik ve Test Şu ana kadarki derslerde Web sayfalarını (genellikle bir uygulamayı tamamladıktan sonra) bir Web tarayıcısında önizleyerek test ettiniz. Sayfaları ya da bölümleri tek tek oluştururken bu sayfaların nasıl göründüğünü kontrol etme ve gerektiğinde düzeltme yapma şansına sahiptiniz. Bir siteyi ziyaretçilerin kullanımına açmadan önce bir adım daha ileri giderek bütün siteyi test etmeniz gerekir. Ortaya çıkabilecek bütün sorunları engellediğinizden emin olmak için gereken zamanı muhakkak ayırın. Eğer bir test sunucusuna erişebiliyorsanız, sitenizi bu sunucuya yüklemeniz ve her türlü farklı bilgisayar tipi ve olabildiğince çok Web tarayıcısı sürümüyle sayfalara erişmeye çalışmanız iyi olacaktır. Test sunucuları, kullanıma açmadan önce sitelerinizi deneyebileceğiniz uzak sunuculardır. Sayfaları normal kullanıcı koşullarında test edin. Ziyaretçilerinizin büyük bir kısmının çevirmeli ağ modemi kullandığını düşünüyorsanız, sayfaların yüklenme hızını görmek için siz de bir çevirmeli ağ modemi kullanın. Web sitesini asıl geliştiren kişi sizseniz, sayfalarınızı diğer insanların da test etmesini sağlayın. Diğer insanların sitenizde nasıl gezindiğini izleyerek sitenin kullanılabilirlik durumunu şu kriterlere göre değerlendirin: Site sezgisel olarak kullanılabiliyor mu ve işlevsel mi? Her bağlantıyı kontrol ettiğinizden ve sorunlu bütün bağlantıları düzelttiğinizden emin olun. Her ziyaretçinin aynı şekilde düşünmediğini unutmayın. Siteyi test ederken normalde yapılmasını beklemediğiniz hareketlere de hazırlıklı olun. Bir ziyaretçinin hangi olası yolları deneyebileceğini düşünün. Ziyaretçilerin gerçekleştirebileceği Bu projede Dreamweaver ı kullanarak Web sayfalarının erişilebilirlik durumunu test edeceksiniz. Ayrıca proje sitenizdeki bağlantıları kontrol edecek ve sitenizin nasıl çalıştığını ve sitenize erişirken hangi Web tarayıcılarının sorun yaşayabileceğini öğrenmek için raporlardan faydalanacaksınız.

2 olası işlemlerin (bir öğeyi aramak ve satın almak, irtibat bilgilerini aramak, vs) bir listesini yapın ve ziyaretçilerin bu işlemleri tamamlamak için ne yapmaları gerektiğini adım adım analiz edin. En iyisi, test işlemine başlamak için Web sitesi tamamlanana kadar beklememektir. Test işlemini erkenden başlatır ve üretim sürecinin bir parçası haline getirirseniz sorunları daha kolay görebilir ve daha hızlı bir şekilde çözebilirsiniz. Test işlemi için site hazırlama işlemini tamamlamayı beklerseniz (saatlerce ya da haftalarca uğraştıktan sonra) çözmek için çok fazla zaman harcamanızı gerektirecek bir hata yakalayabilirsiniz. Bu tür sorunları erken görürseniz hemen müdahale edebilir ve hem kendinize hem de birlikte çalıştığınız ekibe önemli ölçüde zaman kazandırabilirsiniz. İster küçük ister büyük olsun, herhangi bir sitenin test edilmesi insanın gözünü korkutur. Siz içerik ve tasarım için o kadar çalışırsınız. Sonra da ziyaretçiler hatalı bağlantılar, kendi Web tarayıcılarında çalışmayan sayfalar ya da çok yavaş yüklenen sayfalar yüzünden sinir olur ve sitenize bir daha uğramazlar. Bu derste test işlemi için Macromedia Dreamweaver ı nasıl kullanacağınızı öğreneceksiniz. Bunun için sayfaların belirli Web tarayıcılarıyla uyumlu olup olmadığını görmek için sitenizde rapor özelliğini kullanacaksınız. Ayrıca bütün sitenizdeki bağlantıları nasıl kontrol edeceğinizi ve erişilebilirlik testi yapmayı öğreneceksiniz. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Sitenizi erişilebilirlik açısından test edeceksiniz. Sitenizi Web tarayıcısı uyumluluğunu görmek için test edeceksiniz. Sitenizdeki bağlantıları test edeceksiniz. Site raporları oluşturacaksınız. Artık dosyalar olup olmadığını kontrol edeceksiniz. Yazım denetimi yapacaksınız. Yaklaşık Süre Bu dersin tamamlanması yaklaşık yarım saat sürecektir. Ders Dosyaları Ortam Dosyaları: Lesson_15_Testing/Images/ (bütün dosyalar) Başlangıç Dosyaları: Lesson_15_Testing/ (bütün dosyalar) 498 DERS 15

3 Erişilebilirlik Testi Sitenizdeki sayfalarda rapor özelliğini kullanarak sayfaların erişilebilirlik standartlarına ne kadar uyduğunu görebilirsiniz. 1. Lesson_15_Testing klasöründe yer alan access_.check.html dosyasını açın. Site > Reports komutunu seçin. Reports iletişim kutusu açılacaktır. 2. Report on menüsünde Current Document seçeneğini işaretleyin. HTML Reports bölümündeki Accessibility seçeneğini yanındaki kutuya tıklayarak işaretleyin. Diğer seçenekleri işaretsiz olarak bırakın ve Run düğmesine tıklayın. Results panelinin Site Reports sekmesinde bir sonuç listesi görüntülenecektir. Burada her öğe, içinde bulunduğu belgenin dosya adı (burada geçerli belge olan access_check. html), öğenin kodda bulunduğu satırın numarası ve öğenin kısa bir açıklaması ile birlikte gösterilmektedir. Erİşİlebİlİrlİk ve Test 499

4 3. Listedeki beşinci öğeyi ( Color is not essential ifadesiyle başlayan öğe) seçin. Results penceresinin sol tarafındaki More Info simgesine tıklayın. Reference panelinde (Results panel grubunda yer alır) çok daha ayrıntılı bir açıklama belirecektir. Bu açıklama, söz konusu erişilebilirlik kanunuyla ilgili özel bilgileri ve sayfalarınız daha erişilebilir hale getirmek için kullanabileceğiniz yöntem önerilerini içerir. 500 DERS 15

5 Bir Web sitesi oluştururken renk, parlaklık ve kontrast, dikkate alınması gereken önemli elemanlardır. Monitörlerin verdiği görüntü ciddî ölçüde farklılıklar gösterebilir. Windows ekranları Macintosh ekranlarına göre genelde daha koyudur. Monitörünüzü kalibre etmek için farklı ayarlar kullanarak sayfalarınızı test edebilirsiniz. Sayfaları test etmek için farklı monitörler kullanmak da faydalı olacaktır. Dreamweaver, Reference panelinde Web sayfaları oluşturmak için kullanılan kodlar hakkında bilgi alabileceğiniz bir dizi kitap sunmaktadır. UsableNet Accessibility Reference ile, Section 508 in (Ders 5 te görmüştük) gerektirdiği pek çok standardın ayrıntılı açıklamasına kolayca erişebilirsiniz. Bütün panellerde olduğu gibi Reference panelini de yeniden boyutlandırabilirsiniz. Paneli büyüterek içeriği daha rahat okuyabilirsiniz. Panel küçükken içerdiği bilgileri okumak zor olabilir. 4. Reference panelinin üst kısmındaki Book açılır menüsünde UsableNet Accessibility Reference seçeneğinin işaretli olduğundan emin olun. Yine Reference panelindeki Rule menüsünde Spacer IMG with Valid ALT ı seçin. Seçtiğiniz erişilebilirlik standardıyla ilgili açıklama Reference panelinde görüntülenecektir. Açıklamanın hemen üzerinde yeşil karakterlerle bu erişilebilirlik standardının Section 508 deki konumu gösterilmektedir. Bu açıklamada, bütün boşluk resimleri ve dekoratif resimlerde (bunlarda şart değil) uygun alternatif metinler kullanmanın gerekliliği hakkında bilgi verilmektedir. Resimler için alternatif bir metin belirlemeyi Ders 5 te öğrenmiştiniz. Yine aynı derste boşluk resimleri ve sadece grafiksel, estetik bir görünüm oluşturmak için kullanılan benzer resimler (bu resimler ziyaretçiye önemli bir bilgi iletmezler) için Properties denetçisindeki Alt menüsünde <empty> seçeneğini kullanmıştınız. 5. Results panelini ve access_check.html dosyasını kapatın (Macintosh ta) ya da daraltın (Windows ta). Reference paneli, Ders 16 da öğreneceğiniz gibi doğrudan kodla çalışmaya başladıktan sonra özellikle erişilebilir Web siteleri hazırlamak için faydalıdır. Erİşİlebİlİrlİk ve Test 501

6 Tarayıcı Uyumluluğunu Kontrol Etmek Web sayfalarınıza ekleyebileceğiniz pek çok eleman Web tarayıcılarının sadece yeni sürümlerinde çalışır. Örneğin CSS ve katmanlar sadece 4.0 sürümlerinde ya da daha yeni sürümlerde desteklenir. Bir siteyi kullanıma açmadan önce sayfalarınızı test etmeniz ve varsa hataları düzeltmeniz gerekir. Böylece ziyaretçilerinizi sayfalarınızı sizin istediğiniz şekilde görebilir. Erişilebilir bir site hazırlamak için hedef tarayıcıları belirleyebilir ve sayfalarınızı bu tarayıcıları düşünerek tasarlayabilirsiniz. Eğer sayfalarınız elde taşınan cihazlar, okuyucular ya da standart tarayıcılar dışında araçlar kullanan insanlara yönelikse, sitenizi bu cihazlarla ve yazılımlarla test etmelisiniz. Bu uygulamada Dreamweaver ı kullanarak sayfalarınızdaki HTML kodlarını bir tarayıcı profili kullanarak test edecek ve bu tarayıcının sayfalarınızdaki kodları destekleyip desteklemediğini göreceksiniz. Kaydedilmiş bir dosya, bir klasör ya da tüm sitede tarayıcı kontrolü yapabilirsiniz. Dreamweaver sadece hataları bildirir, dosyalarınızda herhangi bir değişiklik yapmaz. Sitenizi uyumlu hale getirmek için Dreamweaver tarafından bildirilen hataları dikkate almanız ve sitenizin sayfalarında kabul edilir bir çözüme ulaşana kadar buna göre değişiklik yapmanız gerekir. Kabul edilirlik düzeyi, siteden siteye göre değişebilir ve hedeflediğiniz ziyaretçilere bağlıdır. 1. Lesson_15_Testing/Check_Browser klasöründeki check_browser.html adlı dosyayı açın. Aşağıdaki adımlarda, bu dosyada bir hedef tarayıcı kontrolü yapacaksınız. 2. Document araç çubuğundaki Check Target Browser menüsüne tıklayın ve Show All Errors komutunu seçin. Auto-check on Open seçeneğinin etkin olduğundan emin olun. Aynı işlemi, File > Check Page > Check Target Browsers komutunu seçerek de gerçekleştirebilirsiniz. Bir belgeyi açtığınızda tarayıcı hatası olup olmadığını görmek için Dreamweaver sayfayı otomatik olarak tarar. Document araç çubuğundaki Check Target Browser simgesi bir hatanın 502 DERS 15

7 algılanıp algılanmamasına bağlı olarak değişir. Hata yoksa, ancak belki uyarılar ve bilgi mesajları varsa yeşil bir onay işareti görüntülenir. Hata bulunursa sarı bir uyarı simgesi görüntülenir. Results panelinin Target Browser Check sekmesi açılacaktır. Results panelinde hatalar, içlerinde beyaz ünlem işaretleri bulunan sekizgenlerle gösterilir. Uyarılar için siyah ünlem işaretli sarı üçgenler kullanılır. Hatalar (errors), kodda tarayıcı hatalarına ya da başka ciddî görüntüleme problemlerine yol açan bir sorun olduğunu gösteren işaretlerdir. Uyarılar (warnings) ise, potansiyel görüntüleme sorunlarını (bunlar hatalar kadar ciddî olmayan ve genellikle bir sayfanın görüntülenmesini ya da çalışmasını etkilemeyen sorunlar olsalar da) gösterir. Results panelinde bilgilendirici mesajlar da görebilirsiniz. Bunlar genellikle ilgili kod parçasının belirli bir tarayıcıda desteklenmeyebileceği ve göz ardı edileceği konusunda sizi uyarırlar. Burada check_browser.html belgesinde bir hata ve iki uyarı bulundu. Results panelini kapatabilir ya da yan tarafa taşıyabilirsiniz. 3. Document araç çubuğundaki Check Target Browser menüsünde Settings seçeneğini işaretleyin ve sayfayla tarayıcıyı test etmek için Netscape Navigator sürüm menüsünde 3.0 ı seçin. OK düğmesine tıklayın. Erİşİlebİlİrlİk ve Test 503

8 Document araç çubuğundaki Check Target Browser simgesinde sarı bir üçgen göreceksiniz. Bu işaret sizi, belgenin bazı bölümlerinin Dreamweaver da test etmek üzere ayarlanan Web tarayıcılarından biriyle uyumsuz olduğu konusunda uyarır. Results paneli tazelenecek ve belgeyle ilişkilendirilen hatayı ya da hataları görüntüleyecektir. Eğer tazelenmezse Results panelini kapatın ve Document araç çubuğundaki Check Target Browser menüsünden Show All Errors komutunu seçin. 4. Results panelinde üstten üçüncü olarak görüntülenen Style tag (Style etiketi) hatasına çift tıklayın. Results panelinde, üçüncü hata olan Style tag hatasını bulmak için ekranı yukarıya doğru kaydırmanız gerekebilir. Bir hataya çift tıkladığınızda Dreamweaver size o hatanın tam olarak nerede oluştuğunu gösterir. Belge penceresindeki görünümü değişir ve Split görünümüne geçersiniz. Kodda <style> etiketinin vurgulu olduğuna dikkat edin. Sorunlu kodun altı kırmızı dalgalı bir çizgiyle çizilir (kod seçildiğinde bu rengi görmek zor olabilir). Kodda bu kırmızı çizgiyle sadece hatalar gösterilir. Uyarılar ve bilgilendirici mesajlar sadece raporlarda ve Results panelinde görüntülenir. Bu seçenek, belgelerinizdeki hataları düzeltmeye çalışırken çok işinize yarayabilir. 504 DERS 15

9 Burada herhangi bir değişiklik yapmanıza gerek yok, çünkü Netscape in 3.0 sürümü bu etiketi görmezden gelir. Bu öğe, uyarı olarak değil, bir hata olarak değerlendirilir. Çünkü söz konusu etiket görmezden gelinse bile, bununla sağlanan desteğin eksik olması görüntüleme sorunlarına ya da beklenmeyen sonuçlara sebep olabilir. Bir Web sitesi hazırlarken sayfalarınızı, belirli tarayıcılarda desteklenmeyen bütün kodların ya da elemanların ciddi bir sorun çıkarmayacağından emin olacak şekilde test etmeniz en iyisidir. Bir davranış ciddi bir sorun çıkarmıyorsa, tarayıcıda herhangi bir hata ya da uyarı oluşmaz (gerçi Dreamweaver da bazı hatalar ve uyarılar görebilirsiniz) ve tarayıcı desteklemediği elemanları göz ardı eder. Eğer tarayıcınızda bir hata ortaya çıkarsa, sayfanızı buna göre değiştirmek, görünür bir hata oluşturmayan bir alternatif sayfa hazırlamak istersiniz. 5. Document araç çubuğundaki Check Target Browser menüsünden Settings i seçin ve Opera seçeneğini işaretleyerek Opera tarayıcısını da Web tarayıcısı kontrolüne dahil edin. OK düğmesine tıklayın. Results panelinde, popüler bir alternatif tarayıcı olan Opera nın farklı sürümlerinde ortaya çıkabilecek ilâve bazı hatalar görüntülenecektir. Dreamweaver, belgelerinizde hata kontrolü yaparken tarayıcı profillerinden faydalanır. Tarayıcı profillerine; desteklenen etiketler, nitelikler ve elemanlarla ilgili bilgiler, uyarılar, hata mesajları ve alternatif etiket önerileri dahil edilebilir. Daha önceden hazırlanmış bir tarayıcı profilini kullanarak ya da kendiniz bir tane oluşturarak listede bulunmayan tarayıcılar (WebTV ve cep telefonu tarayıcıları gibi) için profil ekleyebilir ya da oluşturabilirsiniz. İlave tarayıcı profillerini Dreamweaver Exchange Web sitesinde ( com/go/dreamweaver_exchange/) ya da Adobe Exchange Web sitesinde ( bulabilirsiniz. Erİşİlebİlİrlİk ve Test 505

10 6. Results iletişim kutusunun sol tarafındaki Browse Report simgesine tıklayın. Web tarayıcısında verilen bilgileri inceleyin ve tekrar Dreamweaver a dönün. Tarayıcı penceresinde ayrıntılı bir rapor görüntülenecektir. Hedef tarayıcıların verildiği listede, buradaki her tarayıcı sürümünde bulunan hatalar ve uyarıların sayısını göreceksiniz. Check Target Browser özelliği, bir belgeyi açtığınızda ve Check Target Browser menüsünden Show All Errors komutunu seçerek test işlemini elle gerçekleştirdiğinizde çalışır. Siz çalışırken Document araç çubuğundaki simge sürekli güncellenmez. 7. Files panelini kullanarak Lesson_15_Testing klasörü içinde yer alan Check_Browser klasörünü seçin. Results panelinde Check Target Browser menüsüne tıklayın (bu menü, Target Browser Check sekmesinin sol üst köşesinde yeşil bir okla gösterilir) ve Check Target Browsers For Selected Files/Folders In Site komutunu seçin. 506 DERS 15

11 Macintosh ta Check Target Browser menüsü/düğmesi, siz Check Target Browsers for Selected Files/Folders in Site seçeneğini işaretledikten sonra vurgulu olarak görünecektir. Kontrol işlemini başlatmak için düğmeye tıklamanız gerekir. Windows ta kontrol işlemi siz seçiminizi yaptıktan sonra otomatik olarak gerçekleştirilir, tekrar tıklamanıza gerek yoktur. Results panelindeki Show menüsünde bir seçim yapmanız gerekmez. Siz Check Target Browsers for Selected Files/Folders in Site komutunu seçtiğinizde Dreamweaver otomatik olarak Site Report seçeneğine geçer. Test işlemi gerçekleştirilir ve Results iletişim kutusunun Target Browser Check sekmesinde bir rapor görüntülenir. Sitenizin görüntülenme şekli, her farklı tarayıcı sürümünde bazı farklılıklar içerir. Sayfaların görünmesiyle ilgili olarak bazı ödünler vermeniz gerekebilir. Örneğin belirli JavaScript rutinleri, kendilerini desteklemeyen tarayıcılarda hata mesajlarının görüntülenmesine sebep olur. Bazı JavaScript rutinleri hiç çalışmaz ve ziyaretçinin bundan haberi bile olmayabilir. Olabildiğince fazla sayıda ziyaretçiye erişmek için eski tarayıcılarda hataya sebep olmayacak bir Web sitesi hazırlamanız gerekir. Ziyaretçiler açısından hata mesajlarını görmek yerine bazı özelliklerden faydalanamamak çok daha iyidir. Ziyaretçileriniz farklı tarayıcı sürümleri kullanıyorsa, sayfalarınızın gezinti sisteminde eski tarayıcılarca desteklenmeyen özellikler kullanmaz ya da tarayıcıların en yeni sürümlerini kullanmayanlar veya çok farklı Internet uygulamaları kullananlar için alternatif sayfalar sunarsınız. 8. Document araç çubuğundaki Check Target Browser menüsünden Settings i seçin. Netscape Navigator menüsünden 4.0 ı seçerek, Microsoft Internet Explorer onay kutusunu işaretleyip bu menüden 5.0 ı seçerek ve Opera onay kutusunun işaretini kaldırarak bu ayarları varsayılan değerine getirin OK düğmesine tıklayarak iletişim kutusunu kapatın. Settings komutunu Results panelindeki Check Target Browser menüsünü kullanarak da seçebilirsiniz. Erİşİlebİlİrlİk ve Test 507

12 Check Target Browser ayarları Dreamweaver ın orijinal varsayılan ayarlarına dönecektir. Hangi tarayıcıları hedefleyeceğim diye düşünüyorsanız, en popüler yeni tarayıcıları ve hedef kitlenizi hesaba katın. Siteniz kullanıma açılmaya hazır hale geldikten sonra da ziyaretçilerinizin en çok hangi tarayıcıları tercih ettiğini bulmak üzere gereken bilgileri toplayan ve değerlendiren programları ve ilgili Web sitelerinin yaptığı istatistikleri kullanarak hedef tarayıcılarınızı belirleme çalışmalarına devam edebilirsiniz. Daha fazla bilgi edinmek için Web host unuzla, servis sağlayıcınızla ya da sistem yöneticinizle konuşmanız gerekebilir. Pek çok Web tasarımcısı sayfalarını Netscape, Explorer ve diğer tarayıcıların birçok sürümünü kullanarak test eder. Bu nedenle bilgisayarınızda tarayıcıların farklı sürümlerini bulundurmanız iyi olacaktır. Açık dosyaları kapatabilirsiniz. Sitedeki Bağlantıları Kontrol Etmek Web tasarımcıları geliştirme sürecinde sayfaların dosya adlarını değiştirmek, yeni dosyalar eklemek ya da mevcut dosyaları silmek gibi işlemleri sık sık gerçekleştirir. Silinmiş ya da yeniden adlandırılmış ve güncellenmemiş dosyalara bağlı sayfalar gözünüzden kaçabilir. File Not Found hata mesajının görüntülenmesi ziyaretçiler açısından çok can sıkıcı olabilir. Bu mesaj, ziyaretçilerin tıkladığı bağlantının gitmesi gereken sayfanın mevcut olmadığını gösterir. Şimdiki uygulamada hatalı bağlantıları bulmak için Check Links özelliğini kullanacaksınız. Dreamweaver sadece site içindeki dosyalara giden bağlantıların varlığını doğrulayabilir. Haricî bağlantılar da listelenir, ama haricî bağlantıların geçerli URL lere bağlandığından emin olmak için bunları test etmek size kalmıştır. 1. Lesson_15_Testing klasöründeki Check_Link klasöründe yer alan links.html dosyasını açın. File > Check Page > Check Links komutunu seçin. Results iletişim kutusu Link Checker sekmesi etkin olacak şekilde açılacaktır. Check Links özelliğini çalıştırdığınızda varsayılan olarak Broken Links seçili hale gelir. Hatalı bağlantıların tamamı Broken Links sütununda görüntülenir. Eğer seçili değilse Show menüsünden Broken Links i seçin. Bu uygulamada listede sadece tek bir hatalı bağlantının görüntülendiğine dikkat edin. 508 DERS 15

13 Link Checker rapor penceresini açmak için Shift+F8 klavye kısayolunu da kullanabilirsiniz. 2. Broken Links sütununda gösterilen dosyanın adına tıklayın:../about.html. Dosya adı vurgulu hale gelecek ve hatalı bağlantının sağ tarafında bir klasör simgesi belirecektir. 3.../About.html metninin üzerine About.html yazın, sonra da Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Klasör simgesine tıklayarak bağlantının gitmesi gereken doğru dosyaya bu şekilde de ulaşabilirsiniz. Aynı dosyaya ait başka hatalı referanslar varsa, bir iletişim kutusu açılır ve diğer referansları da düzeltmek isteyip istemediğinizi sorar. Yes düğmesine tıkladığınızda bu dosyaya ait bütün referanslar düzeltilir. Dosyaları ve klasörleri, Files panelinde seçtikten sonra Files panelinin bağlam menüsüne tıklayıp File > Check Links komutunu seçerek de kontrol edebilirsiniz. Properties denetçisini kullanarak bağlantıları düzeltmek ya da belgeyi görüntülemek isterseniz, Link Checker penceresinde dosya adına çift tıklayarak dosyayı açın. Files panelindeki bağlam menüsünü Ders 14 te kullanmıştınız. Bu dosyayı kaydedip kapattıktan sonra Results panelini açık bırakabilirsiniz. Artık Dosyaları Kontrol Etmek Bir Web sitesi hazırlarken yeni dosyalar oluşturur, ayrıca kimi dosyaları yeniler ve yeni dosyalarla eski dosyaları değiştirirsiniz. Geliştirme sürecinde belirli dosyaların birden fazla versiyonunu oluşturabilir ya da diğer dosyaları tamamen göz ardı edebilirsiniz. Artık dosyalar (orphan files), site dosyaları arasında bulunan, ama sitede kullanılmayan dosyalara denir. Bunlar, kendilerine atanmış bir bağlantı olmayan HTML dosyaları ya da hiçbir bir sayfada kullanılmayan resimler olabilir. Erİşİlebİlİrlİk ve Test 509

14 1. Files panelinde Web sitenize ait yerel kök klasörünü (Site - Yoga Sangha) seçin. Artık dosyalar raporu özelliğini kullanabilmek için önce bütün sitede bir bağlantı kontrolü yapmanız gerekir. 2. Results iletişim kutusunun Link Checker sekmesine tıklayın ve Show açılır menüsünde Broken Links in seçili olduğundan emin olun. Check Links simgesine (yeşil ok) tıklayın ve Check Links menüsünden Check Links For Entire Current Local Site komutunu seçin. 510 DERS 15

15 Bağlantı kontrolü işlemini başlatmak için Macintosh kullanıcılarının vurgulu durumdaki Check Links menüsüne/düğmesine tıklaması gerekir. Windows ta ise Check Links for Entire Site komutu seçildikten sonra kontrol işlemi hemen başlar. Results panelinin durum çubuğunda Dreamweaver ın siteyi kontrol ettiğini görebilirsiniz. İşlem tamamlandıktan sonra iletişim kutusunda büyük bir liste belirir. Results panelinin durum çubuğunda raporun bir özetini görürsünüz. 3. Show menüsünde Orphaned Files seçeneğini işaretleyin. İletişim kutusunda artık dosyalardan oluşan bir liste belirecektir. 4. Results panelini kapatın (Macintosh ta) ya da daraltın (Windows ta). Artık dosyaların silinmesi, sitenizin kapladığı disk alanını azaltabilir. Büyük sitelerde düzenli bakım işlemleri uygulamak çok faydalıdır. Bütün artık dosyaların belirlenmesi ve silinmesi sitenizin büyüklüğünü önemli ölçüde etkileyebilir. Artık dosyaları silerken dosya listesini ayrıntılı bir şekilde incelediğinizden emin olun. Siteniz için gerekli ama herhangi bir dosyaya bağlanmamış durumda olan ya da başka bir dosyada kullanılan dosyalar olabilir. Bu uygulama için listede bulunan artık dosyaların hiçbirini silmeyin. Yoga Sangha proje sitesindeki dosyalar bu kitaptaki derslerin tamamlanması için gereklidir. Sonuç listesinde birçok hatalı bağlantı ve artık dosya mevcuttur, çünkü bu proje sitesi derslere eşlik etmesi düşünülen dosyaları oluşturmak için tasarlanmıştır ve gerçek bir site değildir.. Erİşİlebİlİrlİk ve Test 511

16 Site İçin Rapor Oluşturmak Sitenizi test ederken Reports komutunu kullanarak çeşitli HTML nitelikleriyle ilgili raporlar derleyip oluşturabilirsiniz. Bu komut, çeşitli seçenekleri kontrol etmenizi sağlar (başlıksız belgeleri ve gereksiz yuvalanmış etiketleri aramak da bunlara dahildir). Rapor özelliğini tek bir belgede, bir klasörde ya da sitenin tamamında kullanarak sitenizi kullanıma açmadan önce olası sorunları yakalayabilir ve hataları gidebilirsiniz. 1. Files panelini kullanarak Lesson_15_Testing klasöründe yer alan Reports klasörünü seçin. Files panel grubundaki bağlam menüsüne (sadece Macintosh ta) tıklayın ve Site > Reports komutunu seçin. Reports iletişim kutusu açılacaktır. 2. Report on menüsünde Selected Files In Site seçeneğini işaretleyin. Workflow alanındaki bütün seçenekleri işaretsiz olarak bırakın. HTML Reports alanında Accessibility dışındaki bütün seçenekleri işaretleyin. Workflow seçenekleri daha çok bir ekiple birlikte çalışırken ve dosyaları kimlerin aldığını ve oluşturulan tasarım notlarını görmeniz gerektiğinde faydalı olur. Alma-gönderme (Check In/Out) ve tasarım notları (Design Notes) özelliklerini Ders 14 te görmüştük. HTML Reports bölümünde birleştirilebilir yuvalanmış fon etiketleri (Combinable Nested Font Tags), erişilebilirlik (Accessibility), eksik alternatif metinler (Missing Alt Text), gereksiz yuvalanmış etiketler (Redundant Nested Tags), silinebilir boş etiketler (Removable Empty Tags) ve başlıksız belgelerle (Untitled Documents) ilgili seçenekler yer alır. Rapor özelliğini geçerli belgede, bir yerel sitenin tamamında, bir sitede seçilen dosyalarda ve belirli bir klasörde kullanabilirsiniz. 512 DERS 15

17 3. Raporu oluşturmak için Run düğmesine tıklayın. Results panelinde sonuçlar bir liste halinde görüntülenecektir. Burada Dreamweaver About.html belgesine henüz bir başlık verilmediğini bildirerek sizi uyarır. 4. Results panelinin sol alt köşesinde yer alan Save Report düğmesine tıklayın ve raporu Lesson_15_Testing klasörüne kaydedin. Bütün raporlar.xml dosya uzantısıyla XML dosyaları olarak kaydedilir. Reports komutu, sayfalarınızdaki sorunları listeler, ama çözmez. Rapor özelliğini kullandıktan sonra Commands > Clean Up HTML komutunu seçerek istediğiniz bir açık belgede Clean Up HTML özelliğini kullanabilirsiniz. Bu komut, site raporunda bulunan sorunların hepsini olmasa da çoğunu çözer. Bir dizi öğenin yer aldığı bir iletişim kutusu açılır. Dreamweaver dan silmesini istediğiniz öğeleri seçebilirsiniz: Boş etiketler (Empty Tags), gereksiz yuvalanmış etiketler (Redundant Nested Tags), Dreamweaver a ait olmayan HTML açıklamaları (non-dreamweaver HTML comments), Dreamweaver HTML açıklamaları (Dreamweaver special markup) ve özel etiketler (specific tags). Mümkün olan yerlerde (eğer sayfalarınızda <font> etiketleri kullanılıyorsa) yuvalanmış <font> etiketlerini birleştirmeyi ve işlemin tamamlanmasından sonra günlüğün gösterilmesini de tercih edebilirsiniz. Günlük, belgede yapılan değişikliklerin ayrıntılı bir listesini sunar. Bu özellikle ilgili ayrıntılı bilgileri Ders 16 da kodlarla çalışırken göreceğiz. Yazım Denetimi Metinlerde yazım hatalarının olmaması, Web sitesinin görünümü açısından önemli bir noktadır. Dreamweaver, Web sayfalarınızda bir kelime işlem programı gibi (örneğin Microsoft Word) yazım denetimi yapabilir. Dreamweaver'da (diğer Macromedia yazılımlarında olduğu gibi) Türkçe yazım denetimi bulunmamaktadır. 1. Lesson_15_Testing klasöründe yer alan check_spelling.html dosyasını açın. Text > Check Spelling komutunu seçin. Check Spelling iletişim kutusu açılacaktır. Sangha sözcüğünün seçili olduğunu göreceksiniz. Erİşİlebİlİrlİk ve Test 513

18 2. Ignore düğmesine tıklayarak Sangha sözcüğünü atlayın ve Anusara sözcüğünü de atlamak için bu düğmeye tekrar tıklayın. Trainning sözcüğü seçilecektir. Benzer şekilde yazılan bazı (önerilen) sözcükleri içeren bir liste göreceksiniz. Listeden Training i seçin ve Change düğmesine tıklayın. check_spelling.html belgesini kaydedip kapatabilir ve sonra da bağlam menüsüne tıklayıp Close panel group komutunu seçerek Results panelini kapatabilirsiniz. Ne Öğrendiniz? Bu derste şunları öğrendiniz: Dreamweaver ın erişilebilir Web sayfaları oluşturma konusunda size nasıl yardımcı olabileceğini öğrendiniz (Sayfa ). Tarayıcı uyumluluğunu kontrol etmek ve herhangi bir hata ya da desteklenmeyen bir etiket olup olmadığını görmek üzere sayfaları, klasörleri ya da bir sitenin tamamını test etmek için tarayıcı profillerinden faydalandınız (Sayfa ). Sitenizde herhangi bir hatalı bağlantı olup olmadığını anlamak için sayfalarınızdaki bağlantıları test ettiniz (Sayfa ). Sitenizde artık dosya olup olmadığını kontrol ettiniz ve bunları bir liste halinde görüntülediniz (Sayfa ). Gereksiz yuvalanmış etiketler ve başlıksız belgeler gibi Web sitelerinde sık karşılaşılan sorunları belirlemek için site raporları oluşturdunuz (Sayfa ). Bir belgede yazım denetimi yaptınız ve yanlış yazılmış sözcükleri düzelttiniz (Sayfa ). 514 DERS 15