Hem amatör hem de profesyonellere yönelik hazırladığımız ipuçları Web Tasarımının karmaşık ortamında yolunuzu kolay
bulmanızı sağlayacak.

Web Tasarı’mı son birkaç yılın en popüler alanlarından biri. Bu konuda birbirine alternatif çok program bulunuyor. Üstelik iyi bir tasarım sadece tasarım bilmekle bitmiyor maalesef. Ucundan kıyısından programcılık, en azından kod bilginizin olması gerekiyor. Başarılı olmanın anahtarı çok çalışmak ve bunu yaparken de programlar arasında boğulmamayı başarmak. Aşağıda bulunan ipuçlarının, sizleri bu konuda rahatlatacağına inanıyoruz. Yazıda yer alan programları, şu sıralar Web tasarımında en çok kullanıldıklarını düşündüklerimizden seçtik. Yani Dreamweaver, Şash, Fireworks ve Photoshop. Bu bölümlerde programları kullanırken işlerinize yarayacak ipuçları ve daha pek çok şeyi bulacaksınız. Diğerleri bölümünde, tasarım yaparken dikkat etmeniz gereken noktaları, Web’de imaj kullanım şekillerini, bazı faydalı kod tavsiyelerini bulacaksınız. Kod ve programcılık alanında tavsiyeleri sınırlı tuttuk. Çünkü o başlı başına bir alan. ipuçlarını, farklı seviyelerden derledik ki bunlardan herkes faydalanabilsin.

.HTM’yi .HTML Yapın

.HTM’yi .HTML Yapın Dreamweaver’da HTML dosyalar default olarak .htm olarak kaydedilmektedir. Alışkanlıklarına bağlı olanlar için bu durumu değiştirmenin bir yolunu göstereceğiz. Öncelikle makinenizdeki “Macromedia / Dreamweaver MX / Configuration / DocumentTypes / MMDocumentTypes.xml” dosyasına ulaşın. Burada programımızın genişletme ayarları bulunmaktadır. Fakat dokümanı Dreamweaver’da kesinlikle AÇMAMAK gerekiyor. Doküman üzerindeki değişiklikler Notepad ya da HomeSite editörü kullanılarak yapılmalı. Dosya üzerindeki macfileextension=“htm,html, shtml,shtm,stm,lasso,xhtml,inc” kodu macfileextension=”html,htm,shtml,shtm,stm,lasso,xhtml,inc” kodu ile değiştirilmelidir.

Türkçe Karakter Kodu

Hazırladığınız Web sayfanızın browserlarda sorunsuz görünmesi için karakter kodlarının META tagında verilmesi gerekir. Türkçe karakterlerin görünmesini sağlayan karakter kodları, Mac ve Windows için aynıdır. Sayfanızın Machintosh’da sorunsuz görünebilmesi için, ISO kodunun windows- 1254’den önce yazılması gerekir. Yani;

<META http-equiv=”Content-Type” CONTENT=”text/html; charset=8859- 9”>

<META http-equiv=”Content-Type” CONTENT=”text/html; charset=windows-1254”>

Karmaşık Tabloları Hafişetin

Dreamweaver MX’de  tabloları  çabuk ve etkili hale getirmek çok kolay. 500 kolon ve 4 satırdan oluşan, bir sürü bilgi ile dolu bir tabloya sahip olduğumuzu düşünelim. Böyle bir tablonun yüklenmesi ve sunulması 56k bir modem ile yaklaşık 4 dakika sürer. Biraz olsun tabloyu rahatlatmak için kod içinde <colgroup> tagını kullanacağız. Bu tag browser’a, hafızasında belli miktardaki satır ve sütunlar için belli bir miktar bir yer ayırmasını söyler. Böylece browser tablonun yüklenmesi bitmeden önce tablonun taslağını yaratır. Bunun için HTML kodunuza <table> <colg- roup      span=”1”     width=”80%”>

</colgroup>  <tr>  <td>  </td> </tr>

</table> kodlarını yerleştirmeniz gerekiyor.

 

Link Vermenin Kolayı Var

Bir metin bağlantısı yaratırken çoğu Dreamweaver kullanıcısı metni mouse ile seçer ve sonra da ya properties panelindeki link alanına link verir ya da aynı panelde link alanının yanındaki Point to File ikonuna tıklayarak ilgili html dosyasına yönlendirme yapar. Ama link vermenin daha hızlı bir yolu var. Link verilecek metin seçilir ve sonrada klavyedeki Shift tuşu basılı iken linklenecek dokümana mouse ile direk yönlendirme yapılır.

MAC ÖZEL

Türkçe Web Fontlarımız Hazır mı?

Web, bugün için sadece Arial, Comic Sans MS, Courier, Helvetica, Times, Verdana sans-serif gibi sınırlı birkaç fontu destekliyor. Mac’in standart sis- tem fontları içinde bu fontların hepsi ne yazık ki ‘Türkçe karakterleri içerecek şekilde’ bulunmuyor. Sorunu gidermek için bu eksik fontları ayrıca yüklemek gerekiyor.

CSS’i işletim Sistemine Ayarlamak

Aynı CSS dosyası Mac ve Windows’da farklı sonuçlar verir. Yazılar Windows’da Mac’dekinden daha küçük ve daha koyu görünür. Bu nedenle önce Windows’a göre bir css dosyası hazırlanır (ör: win.css). Sonra ikinci bir dosya mac’de farklı olacak değerlere göre hazırlanır (ör: mac.ss). <link href=”win.css” rel=”styleSheet” type=”text/css”> tag’ı html belgesinin (Ör: homepage.html) <HEAD> kısmına eklenir. Ardından şu JavaScript kodunu devamına ekleriz:

<script language=”JavaScript”>

if ( (navigator.appVersion.homepageOf (‘Mac’) !=-1) ) {

document.write (‘>link href=”mac.css” rel=”styleSheet” type=”text/css”>’ ) ; }

</script>

Perl, CGI ve PHP Script’lerde Türkçe Karakter Problemi

Internet’ten indirdiğiniz scriptin için- deki yazıları Türkçeleştirdiğinizde, Türkçe karakterler sitenizde doğru görünmeyebilir. Çözüm, her karakterin Latin5 ASCII karşılığını bulup “Find & Change” yöntemi ile değiştirilmesindedir. Bu işi sizin yerinize yapan “Charo- ma Converter” programını kullanmak en kolay yöntem. Bunun için önce scripti (Örn: guestbook.php), bir text editörü ile açın (ör: BBEditLite) ve Türkçeleştirmek istediğiniz satırları yazın. Dokümanı kaydedin ve Charoma Converter’in üzerine sürükleyip bırakın. Program, dokümanın 3 ayrı versiyonunu yaratır (.L5, .L1 ve .Mac uzantılı). Guestbook.php.L5 dosyasının sonundaki (.L5) uzantısını silip, dökümanı yine text editörü ile açıp en sondaki yazıyı silin. Guestbook.php script’ini Web alanınıza yükleyin.

Banner Tasarımında Yazı Karakteri

Bir banner tasarlarken kullandığımız yazı karakterinin türü, yazıların kolay okunması için büyük önem taşır. Çünkü, ziyaretçiler banner’lara çok kısa süreli bakarlar. Eğer kolay okunulurluk sizin için önce geliyorsa “Sans Serif”, hatta “Bold Sans Serif” font kullanmak doğru olacaktır. Çünkü “Sans Serif” karakterler daha az şekil içermekte ve bu sebepten dolayı daha kolay algılanabilir ve daha hızlı okunabilir olmaktadır. Ürün kimliğinin öne çıktığı durumlarda ise “Serif” karak- terleri kullanılabilir.

GIF Fotoğrafları

Tam renk bir imajı, 8-bit (256 renk) Gif dosyasına dönüştürürken, Photoshop’un 256 renk seçmesine izin vermiş olursunuz. Bu en yüksek Gif imaj kalitesidir ama bazı dezavantajları da vardır. Eğer sitenizi ziyaret eden kişinin monitörü her seferinde 256 rengi göstermeye ayarlanmış sa, browserı imajı 216-renk browser paletini kullanarak açmaya çalışacağından resim bozulmaya uğrar. Bu sorunu halletmek için tüm renkli grafiklerinizi 216-renk browser paleti kullanan Gif dosyalarına dönüştürmelisiniz. Bu şekilde imajlarınızın nasıl görüneceklerinden emin olabilirsiniz. Ya da bunun yerine JPG dosya formatını kullanabilirsiniz. JPG’nin imaj sıkıştırma formatı Gif’in kinden daha etkilidir.

 

JPEG Fotoğrafları

JPEG dosyaları tam renk (24-bit) imajlardır, bu nedenle de dosyaya ait doğru korurlar. Ne var ki, JPEG imajlarını 8-bit ekranlarda yaşadıları dithering’e karşı korumanın bir yolu yok. Dithering, imaj kalitesi ile uzlaşamayan JPEG imajlarında görülür. JPEG formatında standardize edilmiş herhangi bir fotografik, diğer tam renkli fotoğraflar ya da grayscale imajları JPEG sıkıştırması için uygundur.

 

PNG Grafikleri

Portable Network Graphic uzun adlı PNG grafikleri grafik yazılım geliştiricileri konsorsiyumu tarafından geliştirilmiş Gif imaj formatına rakip bir dosya formatıdır. PNG formatı özellikle Web sayfalarında kullanılmak üzere geliştirilmiş bir format. Bu format pek çok özelliği destekliyor (ör: transparan özelliği gif’ten daha iyi) ancak ne yazık ki kendisi henüz browserlar tarafından tam olarak desteklenmiyor. Böyle de olsa, PNG’nin geleceğin Web grafik formatı olacağı düşünülüyor. PNG aynı zamanda Fireworks’ün de standart kayıt formatı.

Thumbnail Boyutu

Thumbnail’ler için ideal ölçü pek çok monitörde rahat algılanabilen 75 pixel’dir.

GIF’leriniz Interlacing ile Yüklensin

Resim dosyaları browserlara satır satır yüklenirler. Bir GIF dosyasının özelliklerinde Interlacing seçeneği aktif edilirse, resim browserda önce net olmayan hatlarla görüntülenir. Dosya yüklenirken resmin niteliği yavaş yavaş artar. Bu da sayfanın ziyaretçilerinin vakit kaybetmemelerini sağlar. Böylece uzun süre resmin tam olarak yüklenmesi önlenmiş olur.

Web tasarım ipuçlarını PDF dosyasından okuyabilirsiniz.

61-web-tasarim-ipucu

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir