bir site tasarımcısının en büyük dertlerinden biri de yaptığı tasarımın farklı internet tarayıcılarında farklı şekillerde görülmesidir. bu sebeple genellikle tasarımcılar, tasarımın hemen her evresinde tasarımlarının nasıl göründüğünü bilmek ister. bu konuda tarayıcı test araçlarından faydalanmak mümkün.
web tasarımcıların en büyük sorunlarından biri de çapraz tarayıcı sorunlarıdır. adobe firması bu sorunun çözümüne yardımcı olabilmek için online olarak çapraz tarayıcı testleri yapabileceğiniz adobe browserlab sistemini geliştirmiştir. buyrun hep birlikte bu sistemi daha detaylı bir şekilde inceleyelim...
sisteme adobe id ile bağlandıktan sonra test edeceğiniz özellikleri beliryip sitenizin resim halinde, belirlediğiniz özelliklerdeki tarayıcı ve işletim sisteminde nasıl göründüğüne bakabiliyorsunuz.
Desteklediği tarayıcı ve işletim sistemleri:
Eğer web tasarımı ile uğraşıyorsanız @font-face tanımlamaları ile istediğiniz fontları sitenizde kullanmanın olağan olduğunu biliyorsunuzdur. OTF ve TTF gibi değişik uzantılı fontları birçok tarayıcıda sorunsuz olarak gösterebiliyorsunuz. Fakat iş bu fontları Internet Explorer’da kullanmaya gelince malesef tahmin edeceğiniz gibi yine bir sorunla karşı karşıya kalıyoruz.
@font-face desteği aslında Internet Explorer 4’ten beri Microsoft’un desteklediği bir deklerasyon. Fakat bu destekleri biraz tutucu. Çünkü IE serisi sadece EOT (Embedded Open Type) fotmatlı fontları desteklemekte. Bu formatın seçilmesinin nedeni ise bu formatlı font dosyalarının kopyalanarak kişisel kullanıma izin vermemesidir.
Bu yazıda sevdiğiniz fontları nasıl EOT formatına çevireceğinizi ve sitelerinizde nasıl kullanacağınız konusunda ipuçlarını kullanarak sitelerimizin albenisini arttıracağız.
Birinci Adım: Ücretsiz bir font seçin
Internet’te birçok ücretsiz font sunan site var. Lisans problemleri ile karşılaşmak istemiyorsanız tamamen ücretsiz lisansla yüklenmeye sunulan fontları bularak sitelerinizde kullanmaya bakın. Bu tarz fontların sıralandığı fontex.org mutlaka göz atılması gereken kaynaklardan.
CSS'e yeni başlayanlar reset.css dosyasının önemini tam olarak kavrayamamış olabilirler. Herbir tarayıcı (browser)'nın kendi "default" (varsayılan) netrenderer'ı olduğunu öğrenmeden önce kendisini "buradaki boşlukta neyin nesi ?" gibi sorularla boğuşurken bulacaktır. Bunu gibi baş ağrılarından kurtulmak için kendi reset.css dosyanızı yazmanız gerekir. Reset.css dosyasını kendiniz yazmasanız da
buradan(YUI), buradan(Eric Meyer) ve buradan(David Walsh) bulabilirsiniz.
Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.
Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.
css konusuyla ilgiliyseniz muhtemelen css reset (sıfırlama) tekniğini duymuşsunuzdur. Daha önce css sıfırlama dosyası yazısında da bahsettiğim bu teknik, web sitenizin cross browser uyumluluğu açısından çok yararlı bir tekniktir.
Fakat internette bu konuda araştırma yapınca farklı css reset teknikleriyle karşılaşabiliyorsunuz. İşte tam bu sayfada bunların en popülerleri bir araya toplanmış ve kısa kısa açıklaması yapılmış. incelemenizi tevsiye ederim.
Tasarlamış olduğunuz bir web sitesinin farklı işletim sistemlerinde ve web tarayıcılarında nasıl göründüğüne canlı olarak bakmak ister misiniz? O zaman Cross Browser Testing servisi tam size göre.
Bu servis ile kendi belirlediğiniz bir işletim sistemine uzak masaüstü erişimi kurmuş oluyorsunuz. Bağlandığınız işletim sisteminde ise hazır olarak Firefox, Internet Explorer, Safari... gibi popüler web tarayıcıları bulunuyor. Bunlardan herhangi birisini çalıştırarak da web sitenizi test etmeye başlıyorsunuz.
openWYSIWYG, ne görürsen onu alırsın (WYSIWYG) mantığında çalışan bir editör. En büyük özelliği cross-browser olması yani tüm web tarayıcılarıyla çalışabilmesi. Diğer önemli özelliği ise muhteşem bir hızda yüklenmesi ve çalışması (gerçekten çok hızlı).
Tek bir JavaScript dosyasından oluşan openWYSIWYG, son derece kolay kuruluyor. Web sayfanızın asp, php veya jsp olması da farketmiyor. Web sayfanıza yalnızca 1-2 satır kod ekleyerek textarea alanlarında openWYSIWYG kullanabilirsiniz. Yazılarınızı her zamankinden daha hızlı ve kolay bir şekilde biçimlendirebilirsiniz.
bildirgec.org içeriği kullanıcıları tarafından üretilen kolektif bir blogdur.
