İster internet üzerinden yayınlanan makalelerde olsun ister blog sitenize yollayacağınız bir ipucunda, maalesef sayfanıza HTML kodu veya herhangi bir kod yerleştirmek istediğinizde Visual Studio içerisinden alışık olduğumuz renklendirmeyi almamız pek mümkün olmuyor. Bu durumda çoğu sitede ekran görüntülerinden oluşan resimlerle dolu makaleler görüyoruz. Ben bugüne kadar bu sorunu biraz uğraştırıcı bir yöntemle çözüyordum :)

Bugünden sonra ise CopySourceAsHtml adındaki bir Visual Studio 2005 add-in uygulamasını kullanacağım. Yaptığım testlerde epey başarılı sonuçlar aldım. Uygulama direk Visual Studio içerisindeki renklendirme üzerinden HTML kodu yaratabiliyor. Programı aşağıdaki adresten indirebilirsiniz.

http://www.jtleigh.com/people/colin/software/CopySourceAsHtml/

Web tasarımları ile uğraşırken HTML ve CSS kodlarını düzenleme aşamasında en sıkıntılı sorunlardan biri farklı tarayıcılarda aynı görsel sonucu almaya çalışmaktır. Bazen bu sorunu çözmek hiç mümkün olmayabilir. Sitemizin tüm görsel özelliklerini harici bir CSS dosyasında tuttuğumuzu düşünürsek, aslında tek yapmamız gereken farklı internet tarayıcıları için farklı CSS dosyaları hazırlayarak söz konusu tarayıcılar ile sitemiz açıldığında uygun CSS dosyasını sayfamıza ekliyor olmak.

Sayfamıza bir CSS dosyası eklemek için aşağıdaki kodu kullanacağız.

<style>
@import url("/ie.css");
</style>

Kod içerisinde import CSS komutunu kullanarak sayfaya adresini belirttiğim CSS dosyasının yüklenmesini sağlamış oluyorum. Sıra geldi tarayıcının Internet Explorer olup olmadığını anlamaya.

<!--[if IE]>
< style>
@import url("/ie.css");
</style>
<![endif]-->

Yukarıdaki kodun renginin yeşil olmasının nedeni aslında standart tarayıcılar tarafından kodun işlenmeyeceği anlamına geliyor. Başlangıcında <!-- ve sonunda --> olan bölgeler HTML kodlarında devre dışı bırakılmış sayılır. O nedenle yukarıdaki kod FireFox'da çalışmayacak. Oysa Internet Explorer kodun ilk kısmında yer alan [if IE] şart komutunu algılayacaktır. Böylece eğer tarayıcı Internet Explorer ise söz konusu CSS dosyası sayfaya eklenecek, değilse bu satırlar devre dışı sayılacağı için eklenmeyecek. Ayrıca isterseniz farklı Internet Explorer sürümleri için de kontroller yaparak farklı CSS dosyaları ekleyebilirsiniz.

<!--[if gt IE 5]>
< style>
@import url("/ie.css");
</style>
<![endif]-->

Yukarıdaki kodun ilk satırında yer alan gt komutu "daha yuksek" anlamına geliyor. Yani eğer tarayıcının Internet Explorer sürümü 5'den yüksek ise kod çalıştırılacaktır. Bunun gibi aşağıdaki farklı karşılaştırma komutlarını da kullanabilirsiniz.

gt - daha yuksek
gte - esit veya daha yuksek
lt - daha dusuk
lte - esit veya daha dusuk

Bana bu kadarı yetmez, ben kullanıcının tarayıcısının Safari, Camina, Konqueror vs olup olmadığını da anlamak istiyorum diyorsanız çözüm JavaScript. JavaScript ile kullanıcı tarafında gerekli kontrolleri yaparak sayfanıza uygun CSS dosyasını ekleyebilirsiniz. Gerekli kontrolleri yapacak olan uygun JavaScript fonksiyonunu http://www.quirksmode.org/js/detect.html adresinde bulabilirsiniz.

Kolay gelsin...

Bir web tasarımın ön grafik tasarımı yapılırken en önemli nokta birbiri ile uyumlu renkleri yakalayabiliyor olmaktır. Genel olarak sanat olarak nitelendirebileceğimiz bu ahengin aslında kısmen de olsa matematiksel sistemlerle de tanımlamak mümkün. Sıcak ve soğuk renklerin birbirleri ile veya kendi içlerindeki uyumları ile ilgili geliştirilmiş derin araştırmalara ve algoritmalara girmeyeceğim. Biraz daha pratiğe yönelerek aşağıda adresi yer alan siteyi ziyaret etmenizi rica ediyorum.

http://www.todotoh.com/rgb/rgbanalysis.aspx

Site, kendisine verilen başka bir adresteki web sitesinin ekran görüntüsünü alarak söz konusu web sitesinde ağırlıklı olarak kullanılmış olan renklerin bir şemasını çıkartıyor. Şemayı çıkartırken hemen kullanabilmeniz için Hex kodlarını yaratmayı da unutmuyor. Böylece beğendiğiniz web sitelerinin renk şemalarını elde edebiliyor ve birbiri ile uyumlu renkleri anında yakalamış oluyorsunuz. Bahsettiğimiz web sitesi John K. tarafından benim “How to take screenshot (thumbnail) of a web site with ASP.NET 2.0?” makalemdeki kod üzerinden gidilerek geliştirildi. (Umarım bir gün söz konusu makaleyi Türkçe’ye çevirmek için zaman ayırabileceğim)

Sizlerle tanıştırmak istediğim bir diğer web uygulaması da www.colormatch.dk sitesinde yer alıyor. Seçilen bir renk üzerinden otomatik olarak uyumlu renkleri bulmayı amaçlayan web sitesinin gerçekten başarılı bir iş çıkardığını söyleyebilirim.

Mayasoft Bilişim Akademi’sindeki son Web Tasarım sınıfımdan öğrencim sevgili Ersin Kılıç’a beni colormatch.dk ile tanıştırdığı için buradan ayrıca teşekkür etmek istiyorum.

Bu konuyu uzun süre önce, daha Türkçe blog sitemi açmadığım zamanlarda (17 Nisan 2006) İngilizce blog sitemde incelemiştim. İngilizce makaleye buradan ulaşabilirsiniz. Mayasoft Bilişim Akademi'sinde vermekte olduğum Web Tasarım dersinde öğrencilerimden biri bu konuya değinince sorunla ilgili çözümü Türkçe blog siteme de yazmam gerektiğini düşündüm. Halen çok sayıda eski ve yeni yapılan web sitesinde Flash animasyonlar ve Internet Explorer arasındaki sorun devam ediyor. İlk önce sorun nedir ve nerden çıktı, ona bakalım.

Güncel bir örnek olarak bugünlerde ziyaret edeceğim EducaTurk fuarının yeni web sitesini ele alabiliriz. Siteye girdikten sonra online davetiye almak için tıklamam gereken görsel link Flash ile hazırlanmış. Fakat gerekli düzenlemeler yapılmadığı için Internet Explorer ile siteye giriş yaptığımda düğmeye iki kere tıklamam gerekiyor. Birinci tıklamayı Flash animasyonunu aktive etmek için, ikinciyi de aktive edilmiş animasyona tıklayabilmek için yapmam gerekiyor.

Bu sorun sadece Internet Explorer için geçerli. 11 Nisan 2006 tarihinde Microsoft tarafından bir yama çıkarıldı ve tüm Windows'lara Windows Update aracılığı ile yüklendi. Microsoft, ActiveX objelerinin Internet Explorer'daki çalışma yapısını değiştirmek durumunda kaldı. Bu durum da sayfalarımıza eklediğimiz Flash objelerini etkiledi. Peki Microsoft neden bunu yaptı? Özetle patent sorunları diyebiliriz. Konuyla ilgili makaleyi (İngilizce) buradan inceleyebilirsiniz. Eolas ve California Üniversite'ine ait patent nedeniyle web sayfaları içerisine ActiveX ile dinamik içerik, animasyon eklenmesini sağlayan Microsoft 521m$ cezaya çarptırıldı. Sonuç olarak yukarıdaki manzara ortaya çıktı.

Peki bu sorundan nasıl kurtulabiliriz? Çözüm basit sayfanın içerisine direk ActiveX objeleri eklemeyeceğiz. Ekleme işlemini JavaScript ile istemci tarafında yapacağız. Bunun için Flash objemizi sayfaya yerleştirecek olan HTML kodunu JavaScript ile sayfaya yazan bir JavaScript fonksiyonu tanımlayarak harici bir JavaScript dosyasına yerleştirmemiz gerekiyor.

function GetLogo()
{
   document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="786" height="241" id="logo" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="banner.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="banner.swf" quality="high" bgcolor="#ffffff" width="786" height="241" name="logo" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>');
}

Yukarıdaki JavaScript fonksiyonu HTML kodunu document.write() JavaScript metodu ile sayfaya yazıyor. Bu fonksiyonu flash.js adında bir metin dosyasına kaydediyoruz. Flash animasyonu kullanacağımız sayfa ile aynı klasöre koyuyoruz. Kod içerisinde yer alan HTML kodundaki flash animasyon dosyasına ait dosya adını ve boyut bilgilerini kendi sitenize uygun şekilde değiştirebilirsiniz. Sıra geldi içerisinde yukarıdaki fonksiyonumuzun yer aldığı dosyayı sayfamıza eklemeye.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script language="javascript" type="text/javascript" src="flash.js"></script>
  <title>Örnek Sayfa </title>
</head>

Yukardaki şekli ile sayfamızın Header kısmına JavaScript dosyamızı linkledik. Böylece dosya içerisinde fonksiyonları sayfamızda kullanabileceğiz. Hazırladığımız fonksiyonun adı GetLogo şeklindeydi. Flash animasyon sayfada nereye eklenecekse oraya aşağıdaki kodu yazmamız gerekiyor.

   <script language="javascript" type="text/javascript">GetLogo()</script>

Sayfamızın tam kodu aşağıdaki şekilde olacaktır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script language="javascript" type="text/javascript" src="flash.js"></script>
 <title>Örnek Sayfa</title>
</head>
<body>
 <div style="position: absolute; left: 20px; top: 50px;">
   <script language="javascript" type="text/javascript">GetLogo()</script>
 </div>
</body>
</html> 

Yukarıdaki örnek içerisinde bir katman (div) içine flash animasyonumuzu yerleştiriyoruz. Gerekli HTML kodunun belgenin o kısmına yerleştirilmesi için önceden hazırlamış olduğumuz JavaScript fonksiyonunu çalıştırıyoruz. Tabi ki bir JavaScript fonksiyonu çalıştırabilmek için komutumuzu script tagları arasına koymalıyız.

Çözümümüz tamamlandı fakat yukarıdaki sistem farklı durumlarda sorun çıkartabilir. Örneğin hedef internet tarayıcı JavaScript desteklemiyorsa sistem çalışmayacaktır. Tüm tarayıcılara uygun bir sistem için aşağıdan indirebileceğiniz Adobe'a ait JavaScript dosyasını kullanabilirsiniz. Söz konusu dosyayı makalenin sonundaki download paketinde bulabilirsiniz. Dosyanın adı AC_RunActiveContent.js şeklinde. Yukarıdaki, bizim hazırladığımız JavaScript dosyası yerine bu dosyayı sitemize ekleyeceğiz. Ekledikten sonra da aşağıdaki JavaScript kodu ile animasyonu sayfamıza yazdıracağız.

   <script type="text/javascript">
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width','786','height','241','src','banner','quality','high','pluginspage',
'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie','banner' );//end AC code
   </script>

Kullandığımız JavaScript fonksiyonu Adobe tarafından hazırlanmış bir fonksiyon. Sayfamıza eklediğimiz AC_RunActiveContent.js dosyası içerisinde bulunuyor. Fonksiyonun aldığı parametreler arasında kalın yazılmış olanlara dikkat etmekte fayda var. Bunlar Flash animasyonun yüksekliği, genişliği ve dosya adını içeriyor. Adobe tarafından hazırlanmış olan bu fonksiyonu farklı tarayıcılarla ilgili uyumluluk sorunlarını halledecektir. Son olarak JavaScript desteklemeyen tarayıcılar için de aşağıdaki kodu sayfamıza yerleştireceğiz. Fakat unutmamakta fayda var, eğer tarayıcının JavaScript desteği kapatılmışsa maalesef Internet Explorer'da Flash animasyonlarda aktivasyon talebi devam edecektir.

   <noscript>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
       width="786" height="241">
       <param name="movie" value="banner.swf"/>
       <param name="quality" value="high"/>
       <embed src="banner.swf" width="786" height="241" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
         type="application/x-shockwave-flash"></embed>
     </object>
   </noscript>

Sonuç olarak tam çözümümüzün kodu aşağıdaki şekilde sonlanıyor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Untitled 1</title>
 <script language="javascript" type="text/javascript" src="AC_RunActiveContent.js"></script>
</head>
<body>
 <div style="position: absolute; left: 20px; top: 50px;">
 
   <script type="text/javascript">
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0', 'width','786','height','241','src','banner','quality','high','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'movie','banner' );//end AC code
   </script>
 
   <noscript>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
       width="786" height="241">
       <param name="movie" value="banner.swf"/>
       <param name="quality" value="high"/>
       <embed src="banner.swf" width="786" height="241" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
         type="application/x-shockwave-flash"></embed>
     </object>
   </noscript>
 </div>
</body>
</html>

Makale boyunca kullandığımız tüm dosyaları ve örnekleri aşağıdaki download paketine bulabilirsiniz.

Kolay gelsin.

27042007_2.rar - Örnekler (12.37 KB)

Sayfada kaydırma çubuğu ile web sitenizi gezen kullanıcılara sayfanızın belirli bölümü sürekli göstermek isteyebilirsiniz. Buna çok basit bir örnek olarak sitenizin menüsü veya sitenize almış olduğunuz bir reklam çalışması verilebilir. Kullanıcı yukarı ve aşağıya doğru sayfayı gezerken sizin belirlediğiniz içerik yine sizin belirlediğiniz bir konumda ekranda sürekli gözükecektir.

Bahsettiğimiz işlevselliği sağlamak için CSS komutlarından faydalanacağız. Sayfamızda sürekli belirli bir konumda gözükmesini istediğimiz kısmı bir DIV katmanı içerisine yerleştireceğiz ve söz konusu DIV katmanına CSS özellikleri olarak konumlandırma koordinatlarını ve sabit kalma komutunu vereceğiz. Gelin ilk olarak içerisinde bir resim bulunan DIV katmanımızı hazırlayalım.

<div>
    <img src="http://daron.yondem.com/tr/images/cert.gif" alt="" />
</div>

Katmanımız içerisinde bir resim bulunuyor. Siz kendi web sitenizde bu katman içerisinde her türlü HTML içerik yerleştirebilirsiniz. Bu bir reklam (Banner) çalışması olabileceği gibi sitenizin menüsü de olabilir. Fakat unutmayın ki DIV katmanı içerisine yerleştirdiğiniz HTML objelerinin dış objelerden bağımsız olması gerekiyor. Yani bir HTML tablonun bir satırını alıp bu katman içerisine yerleştiremezsiniz. Eğer böyle bir ihtiyacınız varsa söz konusu satırı tablodan ayırıp ayrı bir tablo olarak düzenlemeniz gerekir.

Bir sonraki adımda katmanımıza satır içi CSS özellikleri vererek ekran gözükmesi gereken konuma ait bilgileri aktaracağız.

<div style="top:10px;right:10px">
    <img src="http://daron.yondem.com/tr/images/cert.gif" alt="" />
</div>

CSS özelliği olarak top özelliğine 10px değeri vererek katmanın ekranın en üst noktasından 10px mesafede yer alacağını belirledik. Aynı şekilde right özelliğine de 10px değeri vererek katmanın ekranın sağından 10px mesafede gösterileceğini belirlemiş olduk. Yukarıdaki örneği bu hali ile çalıştırdığınızda maalesef çalışmadığını göreceksiniz. Yapmamız gereken son bir ayar daha var. Konumlandırma ile ilgili tüm ayarlarımızı yaptık fakat bunlara ek olarak kullandığımız katmanın konumlandırma metodunu da belirtmemiz gerekiyor.

<div style="position:fixed;top:10px;right:10px">
    <img src="http://daron.yondem.com/tr/images/cert.gif" alt="" />
</div>

CSS özelliği olarak position özelliğine fixed değerini vererek söz konusu katmanın sayfada gösterim metodu olarak sürekli aynı konumda gösterileceğini belirtmiş olduk. Artık kodumuzu çalıştırdığımızda herhangi bir sorun ile karşılaşmayacağız.

position:fixed CSS düzenlemesi Internet Explorer 7.0 ve FireFox 2.0+ internet tarayıcılarında doğru olarak çalışıyor. Maalesef Internet Explorer'ın eski sürümlerinde bu konuyla ilgili bir sorun vardı. Tabi ki her sorun gibi bu sorunun da çok sayıda çözümü var. Hatta Internet Explorer 6.0 ve 5.0 sürümleri için farklı farklı çözümler mevcut. Fakat ben yazımı burada sonlandırarak eski teknolojiye yatırım yapmayacağım. Sizin de yapmanızı tavsiye etmem :)

Web'de gezerken girdiğiniz her siteye göre farklı ikonların adres çubuğunda gösterildiğini farkına varmışsınızdır. Söz konusu adres çubuğunda gösterilen ikonlar aynı şekilde "Favorites" bölümlerine eklediğinizde de gözükecektir. Esas mesele biz bu ikonları web sitemiz nasıl koyarız sorusunda.

İlk olarak yapmamız gereken doğru ikon dosyasını bulmak veya hazırlamak. Doğru ikon dosyasının 16x16 piksel 8bit 256 renk olması gerekiyor. Eğer elinizde bu özelliklerde bir ikon yoksa kendi ikonunuzu da yaratabilirsiniz. Yapmanız gereken ilk olarak ikon haline çevirmek istediğiniz resmi bir JPEG dosyası olarak kaydetmek ve http://www.rw-designer.com/online_icon_maker.php adresindeki aracı kullanmak. "Online Icon Maker" adında araca elinizdeki JPEG dosyasını göndererek uygun bir ikon dosyası yaratmasını sağlayabiliyorsunuz. "Download Icon" linki ile siteden ikon dosyanızı alabilirsiniz.

Artık ikon dosyamız hazır olduğuna göre onu sitemizin ana klasörüne (root) yükleyebiliriz. Dosyamızın adının favicon.ico şeklinde düzenlenmiş olması şart. Yükleme işlemini de tamamladıktan sonra son olarak aşağıdaki gibi kodumuzu HTML sayfanızın Header bölümüne eklemelisiniz.

<head>
  <link rel="shortcut icon" href="/favicon.ico" />
  <title>İkon Sayfam</title>
</head>

Kolay gelsin ;)