Web Tasarım Rehberi
Bu başlık altında bulabileceğiniz bilgiler ana hatlarıyla aşağıda listelenmiştir.
1. Hazırlık Aşaması : Web sitesi tasarımına başlamadan önce yapmanız gereken ön hazırlık ve dikkat edilmesi gereken noktalar.
2. Web Tasarım Editörleri : Web sitesi tasarlamak için kullanabileceğiniz popüler web tasarım araçlarının tanıtımları.
3. Grafik Bölümü : Web sitesinde kullanılabilecek grafik dosya formatları, grafik konusunda bedava hizmet veren grafik kaynakları ve kendi grafiklerinizi üretmek için kullanabileceğiniz resim işleme programlarının tanıtımları.
Bu başlık, web tasarım'a giriş niteliği taşımasına rağmen; Web Tasarım konusunda ana hatlarıyla bilmeniz gereken bilgileri kapsamaktadır.
:: Bu bilgiler CHIP Dergisi'nin 100. sayısı içinde yer alan Web Tasarım Kılavuzu'ndan yardım alınarak düzenlenmiştir. CHIP Web Sitesi. ::
:: Web Tasarım Rehberi ::
Hazırlık Aşaması
1- Doğru Web Adresinin seçilmesi
Web üzerindeki özel barındırma servisleri internet servis sağlayıcınızın sunduğu ücretsiz barındırma hizmetine göre büyük avantajlar sağlar: Bu firmalar sayesinde sadece size özel web adresinizi edinebilirsiniz. Ticari bir hedefe sahip bağımsız kişi veya çalışma gruplarının özel bir domain adresine sahip olmaları gerekir.
Örneğin; http://abone.ISS.com / - FirmaAdı altından erişilebilen bir ticari site, müşterileri veya iş ortakları üzerinde profesyonel bir etki yaratmaz. Türkiyeyi temsil eden .tr uzantısına sahip domain adlarının tescil işlemleri, Ortadoğu Teknik Üniversitesi (ODTÜ) sorumluluğu altında gerçekleştiriliyor. http://dns.metu.edu.tr sitesi üzerinden istediğiniz anda bir veritabanı sorgulaması yapabilir. Satın almak istediğiniz domain adının ( www.şirketadı.com.tr ) veya ( www.adimsoyadim.gen.tr ) boşta olup olmadığını kontrol edebilirsiniz. Eğer istediğiniz domain kimse tarafından kullanılmıyorsa, yine http://dns.metu.edu.tr sayfalarında sıralanan prosedürleri izleyerek firma isim tescil belgenizi ibraz ederek .com.tr uzantılı domain adlarını veya önce gelen alır mantığıyla kişisel kullanıma yönelik .gen.tr adlarını satın alabilirsiniz.
2- Web sitenizin genel içeriğinin belirlenmesi[/#olor]
Web sitenizin içeriği, herhangi bir web editör ile veya el emeğinizle HTML komutlarıyla biçimlendireceğiniz web sayfalarından kat kat daha önemlidir. Birçok kullanıcı, aslında ziyaretçilerine sunacağı içerik konusunda herhangi bir fikre sahip olmamasına rağmen, kendi web sitesini yapma fikrinin çok cazip ve eğlenceli olacağını düşünür. İlk sayfanızı yaratmaya başlamadan önce, belirlediğiniz içeriğin önemli noktalarını belirten kısa bir liste oluşturun. Bu liste, sunumunuzun ilerde oluşturulacak oluşturulacak olan yapısını ve ilgi çekici tasarımını belirlemenizde yardımcı olur. Ardından, doğru içerik ve online sunumunuzun yaratılmasında temel oluşturması için çarpıcı kelimeler seçin:
Gezgin: Seyahati seviyorsunuz ve sık sık farklı ülkeleri geziyorsunuz. Eğlenceli, maceralı ve ilginç seyahatlerinizle ilgili bir seyahatname yazın ve bu yazıyı resim arşivinizdeki farklı ülkelerin ilginç mekanlarına ait resimleriyle veya eğlenceli sahnelerle süslemeyi ihmal etmeyin.
Sanatçı: Resim çizmekten, fotoğrafçılıktan veya kendi müziğinizi yapmaktan hoşlanıyorsunuz. Web siteniz üzerinde ziyaretçilerinize özel bir galeri oluşturun veya kendi bestelerinizden kısa parçaları, ücretsiz olarak indirilmek üzere suverici nitelikte olmaması gerekir. Eğer web siteniz üzerinde açık adresinizin, telefon ve faks numaralarınızın yayınlanmasında sakınca görüyorsanız, sunulan bilginin hemen altında en azından size erişilebilecek bir e-mail adresinin bulunmasına dikkat edin. Bu sayede hem eleştirileri değerlendirebilir ve ziyaretçilerin size ulaşmasını sağlar hem de istenmeyen durumlardan kurtulabilirsiniz. Ancak ticari bir web sitesinde kuşkusuz firmanızın açık adresinin bulunması gerekir.
3- Web sitenizin hedef kitlesinin tanımlanması
Listenizin ana kriterleri ışığında web siteniz üzerinde hangi içeriği sunacağınıza karar verin. Artık birinci sırada hangi kitlenin sunumuzla ilgileneceğini düşünebilirsiniz. Sonuca bağlı olarak, ileride web sitenizin tasarımını belirlenen hedef grubuna yönelik düzenleyebilirsiniz. Örneğin Star Wars veya Tomb Raider gibi konularda bir hayran sitesi üzerinde çalışırken çok renkli ve hareketli bir tasarım tercih edilebilir. Ancak buna karşılık, ziyaretçileriniz aynı tasarımı şirketinizin ve girişiminizin faaliyetlerinin sunulduğunu web sitesinden görmekten rahatsızlık duyabilirler.
4- Profesyonel web sitesi için
Eğer web sayfalarınızda sunacağınız içeriği kesinleştirdiyseniz, bir adım ileriye atlayabilirsiniz: İlerdeki adımlarda web sitenizin temel yapısının oluşturulmasında kullanacağınız konu listesini elinize alın. Liste üzerinde basit eklemeler yaparak, sunumunuzun ilerdeki adımları için temel bir taslak oluşturun. Eğer içerik yapısını kesinleştirirseniz, fikirlerinizin sunumu çok daha kolay bir biçimde gerçekleştirilebilir.
5- Yıldız biçiminde veya hiyerarşik yapıda
Planlanan sunumun genişliğine bağlı olarak, web sayfalarının yapısının oluşturulmasında prensip olarak iki farklı yol izlenir;
- Küçük ve orta büyüklükte içeriğe sahip sunumlarda web sayfalarının yapısı yıldız biçiminde planlanabilir. Yani böylelikle başlangıç sayfasından diğer alt sayfalara geçiş yapılabildiği gibi, alt sayfalardan tekrar sorunsuz olarak başlangıç sayfasına dönülebilir. Bu yapı, yeni web sayfalarının kolayca eklenmesine, silinmesine ya da değiştirilmesine imkan tanır.
- Bilgi havuzu büyüdükçe ve farklı projelerle ilgili web sayfalarınızın sayısı arttıkça hiyerarşik bir yapının kullanılması gerekir. Bu tür bir yapıyı tanımlamak için, sabit diskinizdeki klasör ve dosya düzenini örnek verebiliriz. Ziyaretçi başlangıç sayfasından herhangi bir konuyla ilgili ana alt sayfalara eriştikten sonra, yine bu sayfaların da alt sayfalarına ulaşabilir. Böylelikle ziyaretçiniz bir konudan konudan diğerine geçebilirken, aynı zamanda sunumunuzdaki her bir projenin derinliklerine de inebilir. Muhtemelen sunmayı planladığınız bilgilerin ve hizmetlerin taslak haline getirilmesi, ilk bakışta eğlenceli bir bulmaca gibi görünecektir. Ancak kuşkusuz web sitenizdeki her sayfanın, kolay kullanım açısından aynı şemaya göre planlanması ve eşleştirilmesi büyük önem taşır. Sunumunuzdaki her sayfanın aynı temel yapı üzerine hazırlanması, ziyaretçilerin her seferinde yaşayacakları uyum sorununu ortadan kaldırır. İlerdeki adımlarda yapı çalışmalarından tasarruf etmek için, temel yapıyı olabildiğince erken tanımlayın.
Örneğin tüm sayfalarda yönetim bağlantılarını aynı alana yerleştirin ve tüm web sayfalarından kolayca ana sayfaya dönüşü sağlayan bağlantıyı da unutmayın.
6- Klasör ve dosya adlarında önemli noktalar.
Planlamanın ilerleyen bölümlerinde klasör ve dosya adlarının seçimi konusunda iki önemli kurala dikkat etmelisiniz: Üzerinde web sitenizin yayınlanacağı birçok sunucu, Microsoft işletim sistemleri yerine çoğu zaman Unix ile çalışır.
Unix işletim sisteminde büyük ve küçük harfler birbirinden farklı olarak algılanır. Yerel bilgisayarınızda ise genelde Index. HTML, index.html, INDEX. html veya INDEX.HTML adı altında kaydedilen dosyalar arasında önemli bir farklılık görülmez. Unix sisteminde ise bunlar dört farklı dosya olarak kabul edilir. İleride web sayfaları arasında sinir bozucu erişim sorunları yaşamak istemiyorsanız, dosya adlarının yazımına dikkat edin ve en tüm kayıtlarınızı küçük harflerle yazın. Türkçede olanlar gibi bazı özel karakterlerin dosya ve klasör adları içerisinde kullanılması da sorunlara neden olabilir. Bu yüzden ü, ö, ş, ç, ğ ve ı gibi harfleri kesinlikle kullanmayın. Klasör ve dosya adları içerisinde boşluk karakterinin de kullanılmamasına özen gösterin. Bunun yerine uzun dosya adlarını ayırmak için alt çizgi _ karakterini kullanın. Kısacası dosya ve klasör adları içerisinde duruma göre Adan Zye İngiliz alfabesindeki harflerin ve 0dan 9a kadar olan sayıların kullanılması gerekir.
Uzun dosya adlarından da kaçının. İdeal adlandırma eski MS-DOS standardı olan 8+3 biçiminde yapılır. Yani sekiz karakter dosya adı için ve ek olarak üç karakter de dosya uzantısı için kullanılır.
7- Başlangıç sayfası üzerindeki hataların engellenmesi
Bir web sitesinin çalışmasında hatalara ve hoşnutsuzlara neden olacak birçok neden sayılabilir. Önemli düzenleme hatalarının yanı sıra, web tasarımcılarının zarafet açısından da dikkat etmeleri gereken özellikler vardır. Birçok tasarımcı ve ziyaretçi için bu durum, iki farklı açıdan değerlendirilir;
Zarafet ve güzellik, ziyaretçinin bakış açısına göre değişir. Ancak tüm bunlardan bağımsız olarak bazı temel kurallar vardır ki, online sunumunuzun kapısına gelen ziyaretçilerinizin sitenizi es geçmelerini önleyebilir. Eğer hoşnutsuzluklar daha ana sayfanızdan başlar ve bu durum ilgi çekici olmayan içerikle bir araya gelirse, muhtemelen ziyaretçi, sayfanız tam olarak yüklenmeden sunumuzun içeriği umursamadan uzaklaşacaktır.
Web sitenizin başlangıcında dikkat etmeniz gereken temel kurallar nelerdir, bunları inceleyelim;
:: Giriş sayfasının yüklenme süresini olabildiğince düşürmeye çalışın. Bu durum, kuşkusuz sunumunuzdaki tüm diğer web sayfaları için de geçerlidir. Giriş sayfasının yüklenmesi sırasında çok uzun bekleme süresi, ziyaretçinin sıkılmasına ve sayfanızı ziyaret etmekten vazgeçmesine neden olabilir.
:: Eğer web sayfanız çerçevelerden (Frame) oluşuyorsa, örneğin az da olsa bazı ziyaretçilerin sayfa yönetimini kullanırken başarısız olabileceklerini düşünmelisiniz. Buna rağmen çerçeve yapısından
vazgeçmeyecekseniz, sayfanızda mutlaka <noframe>-Tagine yer vermelisiniz: Bu özellik ziyaretçilerinizin, web sayfalarının içeriğini Frame yapısı olmadan kullanmasına imkan tanır.
:: Web sayfalarınız üzerinde reklam yayınlayarak para kazanabilirsiniz. Üstelik bu para, web sitenizin maliyetini rahatlıkla karşılamanıza yetecek miktarda olabilir. Ancak buna karşılık, online sunumunuzun girişine direkt olarak çok sayıda reklam bandı yerleştirerek, başarı elde edemezsiniz. Çünkü bu durumda web sayfalarınızın içeriğini görmek için gelecek olan ziyaretçi sayısı azalır. Ayrıca, sayfanızın yüklenmesini beklemek yerine, yerleştirdiğiniz reklam bantlarına tıklayacak kullanıcı sayısının daha fazla olmayacağını kim garanti edebilir ki?
:: Muhtemelen webde gezinirken önceden karşılaştığınız bir durum olan, web sayfalarının açılışı sırasında otomatik olarak birçok browser penceresinin açılması işleminden kaçınmalısınız. Bu durum birkaç saniye içerisinde web sayfanızın açılan pencereler ardında kaybolmasına neden olur. Eğer önceden böyle bir durumla karşılaştıysanız, zaten ziyaretçilerinizin hislerini tahmin etmek güç olmayacaktır.
:: Sunumunuzun web sayfalarını gereksiz bileşenler ve içerikle boğmaktan kaçının.Gerçekten sayfalarınızda çok geniş bilgiler sunmak isteseniz bile, bu içeriği ilk sayfa üzerinde harcamayın.Özellikle de sunumuzun ilk sayfalarının sayısız tuş (button) veya yanıp sönen animasyonlar arasında kaybolmamasına dikkat edin. Bu durum, ziyaretçilerinizin sayfa üzerinde yönetimini zorlaştırır ve online sunumunuzun derinlerine inmelerine engel olur.
:: Eğer ziyaretçilerinizin sayfalarınız arasında dolaşması için Imagemaplerdenyararlanıyorsanız, buna alternatif olacak yönetim yardımcıları kullanın. Araştırmalara göre internet kullanıcılarının yüzde 15i webde gezintileri sırasında grafik gösterimini devre dışı bırakıyor. Eğer Imagemaplere bir alternatif sunulmazsa, bu durumda ziyaretçiler sunumunuzu takip etme imkanını kaybederler.
:: Direkt olarak görüntülenme komutuyla ekrana gelen video ve Flash animasyonlarından kaçının. İlerdeki bölümlerde ayrıntılı olarak da anlatılacağı gibi, bu animasyonlar büyük bir ziyaretçi kitlesi tarafından doğru biçimde görüntülenemez. Çoğu web gezgini, çoklu ortam dosyalarının gösterimi ve web sayfasının ek içeriğinin görüntülenmesi için gerekli eklentileri ancak web sayfalarının yönlendirmeleri doğrultusunda
yükler. Prensip olarak sayfalarınız üzerinde ayrıntılı ziyaretçi bilgi formlarının kullanılması hoş karşılanmaz. Çünkü bu sayede ziyaretçilerin izni olmaksızın, verdikleri bilgiler istenmeyen amaçlar içinkullanılabilir.
Ancak basit ve istatistiksel sorularla okuyucularınızın ilgi alanlarını belirleyebilir ve sunumunuzu buna göre yönlendirebilirsiniz. Kişisel amaçlı web sitelerinde, ziyaretçilerin kişisel bilgilerini öğrenmeye yönelik formlar kullanılmamalıdır.
1- Doğru Web Adresinin seçilmesi
Web üzerindeki özel barındırma servisleri internet servis sağlayıcınızın sunduğu ücretsiz barındırma hizmetine göre büyük avantajlar sağlar: Bu firmalar sayesinde sadece size özel web adresinizi edinebilirsiniz. Ticari bir hedefe sahip bağımsız kişi veya çalışma gruplarının özel bir domain adresine sahip olmaları gerekir.
Örneğin; http://abone.ISS.com / - FirmaAdı altından erişilebilen bir ticari site, müşterileri veya iş ortakları üzerinde profesyonel bir etki yaratmaz. Türkiyeyi temsil eden .tr uzantısına sahip domain adlarının tescil işlemleri, Ortadoğu Teknik Üniversitesi (ODTÜ) sorumluluğu altında gerçekleştiriliyor. http://dns.metu.edu.tr sitesi üzerinden istediğiniz anda bir veritabanı sorgulaması yapabilir. Satın almak istediğiniz domain adının ( www.şirketadı.com.tr ) veya ( www.adimsoyadim.gen.tr ) boşta olup olmadığını kontrol edebilirsiniz. Eğer istediğiniz domain kimse tarafından kullanılmıyorsa, yine http://dns.metu.edu.tr sayfalarında sıralanan prosedürleri izleyerek firma isim tescil belgenizi ibraz ederek .com.tr uzantılı domain adlarını veya önce gelen alır mantığıyla kişisel kullanıma yönelik .gen.tr adlarını satın alabilirsiniz.
2- Web sitenizin genel içeriğinin belirlenmesi[/#olor]
Web sitenizin içeriği, herhangi bir web editör ile veya el emeğinizle HTML komutlarıyla biçimlendireceğiniz web sayfalarından kat kat daha önemlidir. Birçok kullanıcı, aslında ziyaretçilerine sunacağı içerik konusunda herhangi bir fikre sahip olmamasına rağmen, kendi web sitesini yapma fikrinin çok cazip ve eğlenceli olacağını düşünür. İlk sayfanızı yaratmaya başlamadan önce, belirlediğiniz içeriğin önemli noktalarını belirten kısa bir liste oluşturun. Bu liste, sunumunuzun ilerde oluşturulacak oluşturulacak olan yapısını ve ilgi çekici tasarımını belirlemenizde yardımcı olur. Ardından, doğru içerik ve online sunumunuzun yaratılmasında temel oluşturması için çarpıcı kelimeler seçin:
Gezgin: Seyahati seviyorsunuz ve sık sık farklı ülkeleri geziyorsunuz. Eğlenceli, maceralı ve ilginç seyahatlerinizle ilgili bir seyahatname yazın ve bu yazıyı resim arşivinizdeki farklı ülkelerin ilginç mekanlarına ait resimleriyle veya eğlenceli sahnelerle süslemeyi ihmal etmeyin.
Sanatçı: Resim çizmekten, fotoğrafçılıktan veya kendi müziğinizi yapmaktan hoşlanıyorsunuz. Web siteniz üzerinde ziyaretçilerinize özel bir galeri oluşturun veya kendi bestelerinizden kısa parçaları, ücretsiz olarak indirilmek üzere suverici nitelikte olmaması gerekir. Eğer web siteniz üzerinde açık adresinizin, telefon ve faks numaralarınızın yayınlanmasında sakınca görüyorsanız, sunulan bilginin hemen altında en azından size erişilebilecek bir e-mail adresinin bulunmasına dikkat edin. Bu sayede hem eleştirileri değerlendirebilir ve ziyaretçilerin size ulaşmasını sağlar hem de istenmeyen durumlardan kurtulabilirsiniz. Ancak ticari bir web sitesinde kuşkusuz firmanızın açık adresinin bulunması gerekir.
3- Web sitenizin hedef kitlesinin tanımlanması
Listenizin ana kriterleri ışığında web siteniz üzerinde hangi içeriği sunacağınıza karar verin. Artık birinci sırada hangi kitlenin sunumuzla ilgileneceğini düşünebilirsiniz. Sonuca bağlı olarak, ileride web sitenizin tasarımını belirlenen hedef grubuna yönelik düzenleyebilirsiniz. Örneğin Star Wars veya Tomb Raider gibi konularda bir hayran sitesi üzerinde çalışırken çok renkli ve hareketli bir tasarım tercih edilebilir. Ancak buna karşılık, ziyaretçileriniz aynı tasarımı şirketinizin ve girişiminizin faaliyetlerinin sunulduğunu web sitesinden görmekten rahatsızlık duyabilirler.
4- Profesyonel web sitesi için
Eğer web sayfalarınızda sunacağınız içeriği kesinleştirdiyseniz, bir adım ileriye atlayabilirsiniz: İlerdeki adımlarda web sitenizin temel yapısının oluşturulmasında kullanacağınız konu listesini elinize alın. Liste üzerinde basit eklemeler yaparak, sunumunuzun ilerdeki adımları için temel bir taslak oluşturun. Eğer içerik yapısını kesinleştirirseniz, fikirlerinizin sunumu çok daha kolay bir biçimde gerçekleştirilebilir.
5- Yıldız biçiminde veya hiyerarşik yapıda
Planlanan sunumun genişliğine bağlı olarak, web sayfalarının yapısının oluşturulmasında prensip olarak iki farklı yol izlenir;
- Küçük ve orta büyüklükte içeriğe sahip sunumlarda web sayfalarının yapısı yıldız biçiminde planlanabilir. Yani böylelikle başlangıç sayfasından diğer alt sayfalara geçiş yapılabildiği gibi, alt sayfalardan tekrar sorunsuz olarak başlangıç sayfasına dönülebilir. Bu yapı, yeni web sayfalarının kolayca eklenmesine, silinmesine ya da değiştirilmesine imkan tanır.
- Bilgi havuzu büyüdükçe ve farklı projelerle ilgili web sayfalarınızın sayısı arttıkça hiyerarşik bir yapının kullanılması gerekir. Bu tür bir yapıyı tanımlamak için, sabit diskinizdeki klasör ve dosya düzenini örnek verebiliriz. Ziyaretçi başlangıç sayfasından herhangi bir konuyla ilgili ana alt sayfalara eriştikten sonra, yine bu sayfaların da alt sayfalarına ulaşabilir. Böylelikle ziyaretçiniz bir konudan konudan diğerine geçebilirken, aynı zamanda sunumunuzdaki her bir projenin derinliklerine de inebilir. Muhtemelen sunmayı planladığınız bilgilerin ve hizmetlerin taslak haline getirilmesi, ilk bakışta eğlenceli bir bulmaca gibi görünecektir. Ancak kuşkusuz web sitenizdeki her sayfanın, kolay kullanım açısından aynı şemaya göre planlanması ve eşleştirilmesi büyük önem taşır. Sunumunuzdaki her sayfanın aynı temel yapı üzerine hazırlanması, ziyaretçilerin her seferinde yaşayacakları uyum sorununu ortadan kaldırır. İlerdeki adımlarda yapı çalışmalarından tasarruf etmek için, temel yapıyı olabildiğince erken tanımlayın.
Örneğin tüm sayfalarda yönetim bağlantılarını aynı alana yerleştirin ve tüm web sayfalarından kolayca ana sayfaya dönüşü sağlayan bağlantıyı da unutmayın.
6- Klasör ve dosya adlarında önemli noktalar.
Planlamanın ilerleyen bölümlerinde klasör ve dosya adlarının seçimi konusunda iki önemli kurala dikkat etmelisiniz: Üzerinde web sitenizin yayınlanacağı birçok sunucu, Microsoft işletim sistemleri yerine çoğu zaman Unix ile çalışır.
Unix işletim sisteminde büyük ve küçük harfler birbirinden farklı olarak algılanır. Yerel bilgisayarınızda ise genelde Index. HTML, index.html, INDEX. html veya INDEX.HTML adı altında kaydedilen dosyalar arasında önemli bir farklılık görülmez. Unix sisteminde ise bunlar dört farklı dosya olarak kabul edilir. İleride web sayfaları arasında sinir bozucu erişim sorunları yaşamak istemiyorsanız, dosya adlarının yazımına dikkat edin ve en tüm kayıtlarınızı küçük harflerle yazın. Türkçede olanlar gibi bazı özel karakterlerin dosya ve klasör adları içerisinde kullanılması da sorunlara neden olabilir. Bu yüzden ü, ö, ş, ç, ğ ve ı gibi harfleri kesinlikle kullanmayın. Klasör ve dosya adları içerisinde boşluk karakterinin de kullanılmamasına özen gösterin. Bunun yerine uzun dosya adlarını ayırmak için alt çizgi _ karakterini kullanın. Kısacası dosya ve klasör adları içerisinde duruma göre Adan Zye İngiliz alfabesindeki harflerin ve 0dan 9a kadar olan sayıların kullanılması gerekir.
Uzun dosya adlarından da kaçının. İdeal adlandırma eski MS-DOS standardı olan 8+3 biçiminde yapılır. Yani sekiz karakter dosya adı için ve ek olarak üç karakter de dosya uzantısı için kullanılır.
7- Başlangıç sayfası üzerindeki hataların engellenmesi
Bir web sitesinin çalışmasında hatalara ve hoşnutsuzlara neden olacak birçok neden sayılabilir. Önemli düzenleme hatalarının yanı sıra, web tasarımcılarının zarafet açısından da dikkat etmeleri gereken özellikler vardır. Birçok tasarımcı ve ziyaretçi için bu durum, iki farklı açıdan değerlendirilir;
Zarafet ve güzellik, ziyaretçinin bakış açısına göre değişir. Ancak tüm bunlardan bağımsız olarak bazı temel kurallar vardır ki, online sunumunuzun kapısına gelen ziyaretçilerinizin sitenizi es geçmelerini önleyebilir. Eğer hoşnutsuzluklar daha ana sayfanızdan başlar ve bu durum ilgi çekici olmayan içerikle bir araya gelirse, muhtemelen ziyaretçi, sayfanız tam olarak yüklenmeden sunumuzun içeriği umursamadan uzaklaşacaktır.
Web sitenizin başlangıcında dikkat etmeniz gereken temel kurallar nelerdir, bunları inceleyelim;
:: Giriş sayfasının yüklenme süresini olabildiğince düşürmeye çalışın. Bu durum, kuşkusuz sunumunuzdaki tüm diğer web sayfaları için de geçerlidir. Giriş sayfasının yüklenmesi sırasında çok uzun bekleme süresi, ziyaretçinin sıkılmasına ve sayfanızı ziyaret etmekten vazgeçmesine neden olabilir.
:: Eğer web sayfanız çerçevelerden (Frame) oluşuyorsa, örneğin az da olsa bazı ziyaretçilerin sayfa yönetimini kullanırken başarısız olabileceklerini düşünmelisiniz. Buna rağmen çerçeve yapısından
vazgeçmeyecekseniz, sayfanızda mutlaka <noframe>-Tagine yer vermelisiniz: Bu özellik ziyaretçilerinizin, web sayfalarının içeriğini Frame yapısı olmadan kullanmasına imkan tanır.
:: Web sayfalarınız üzerinde reklam yayınlayarak para kazanabilirsiniz. Üstelik bu para, web sitenizin maliyetini rahatlıkla karşılamanıza yetecek miktarda olabilir. Ancak buna karşılık, online sunumunuzun girişine direkt olarak çok sayıda reklam bandı yerleştirerek, başarı elde edemezsiniz. Çünkü bu durumda web sayfalarınızın içeriğini görmek için gelecek olan ziyaretçi sayısı azalır. Ayrıca, sayfanızın yüklenmesini beklemek yerine, yerleştirdiğiniz reklam bantlarına tıklayacak kullanıcı sayısının daha fazla olmayacağını kim garanti edebilir ki?
:: Muhtemelen webde gezinirken önceden karşılaştığınız bir durum olan, web sayfalarının açılışı sırasında otomatik olarak birçok browser penceresinin açılması işleminden kaçınmalısınız. Bu durum birkaç saniye içerisinde web sayfanızın açılan pencereler ardında kaybolmasına neden olur. Eğer önceden böyle bir durumla karşılaştıysanız, zaten ziyaretçilerinizin hislerini tahmin etmek güç olmayacaktır.
:: Sunumunuzun web sayfalarını gereksiz bileşenler ve içerikle boğmaktan kaçının.Gerçekten sayfalarınızda çok geniş bilgiler sunmak isteseniz bile, bu içeriği ilk sayfa üzerinde harcamayın.Özellikle de sunumuzun ilk sayfalarının sayısız tuş (button) veya yanıp sönen animasyonlar arasında kaybolmamasına dikkat edin. Bu durum, ziyaretçilerinizin sayfa üzerinde yönetimini zorlaştırır ve online sunumunuzun derinlerine inmelerine engel olur.
:: Eğer ziyaretçilerinizin sayfalarınız arasında dolaşması için Imagemaplerdenyararlanıyorsanız, buna alternatif olacak yönetim yardımcıları kullanın. Araştırmalara göre internet kullanıcılarının yüzde 15i webde gezintileri sırasında grafik gösterimini devre dışı bırakıyor. Eğer Imagemaplere bir alternatif sunulmazsa, bu durumda ziyaretçiler sunumunuzu takip etme imkanını kaybederler.
:: Direkt olarak görüntülenme komutuyla ekrana gelen video ve Flash animasyonlarından kaçının. İlerdeki bölümlerde ayrıntılı olarak da anlatılacağı gibi, bu animasyonlar büyük bir ziyaretçi kitlesi tarafından doğru biçimde görüntülenemez. Çoğu web gezgini, çoklu ortam dosyalarının gösterimi ve web sayfasının ek içeriğinin görüntülenmesi için gerekli eklentileri ancak web sayfalarının yönlendirmeleri doğrultusunda
yükler. Prensip olarak sayfalarınız üzerinde ayrıntılı ziyaretçi bilgi formlarının kullanılması hoş karşılanmaz. Çünkü bu sayede ziyaretçilerin izni olmaksızın, verdikleri bilgiler istenmeyen amaçlar içinkullanılabilir.
Ancak basit ve istatistiksel sorularla okuyucularınızın ilgi alanlarını belirleyebilir ve sunumunuzu buna göre yönlendirebilirsiniz. Kişisel amaçlı web sitelerinde, ziyaretçilerin kişisel bilgilerini öğrenmeye yönelik formlar kullanılmamalıdır.
Web Tasarım Editörleri
HTML editörleri kullanılarak ilgili menüler, araç çubukları ve program fonksiyonlarıyla istediğiniz HTML komutları, otomatik olarak web sayfanızın kaynak kodlarına eklenir. Ancak bu editörlerde tüm HTML komutlarını tam anlamıyla öğrenmenize ve el ile girmenize gerek duyulmaz ve bunun yerine direkt olarak bir web sitesinin önceden hazırlanmış HTML kaynak kodları üzerinde çalışılır. Wyswyg editörlerde, web sayfaları ileride web browser üzerinde görünecek biçimde gösterilir. Normalde bu editörler ile web sayfasının HTML kaynak kodlarının görülmesine bile gerek duyulmayabilir. Bu editörler, aynı zamandahazırladığınız internet sayfalarını tüm dünyayla paylaşmanıza aracı olacak metin düzenleme araçlarıdır.
--- --- ---
Frontpage: Kolay kullanım, sadeliği bozulan kodlar.
Eğer önceden Microsoftun Office uygulamalarında tecrübe sahibiyseniz, Frontpage yazılımına hızlı ve kolay bir biçimde alışabilirsiniz: Programın görünümü ve editörün kullanımı, Word ve Excele çok benziyor. Bu sayede nispeten azalan uyum zamanı sayesinde, kısa sürede başarılı sonuçlar elde edebilirsiniz. Dinamik bileşenler ve etkileşimli eklentiler, derin bir bilgi birikimine gerek duyulmadan kullanılabiliyor. Uzun web projeleri üzerinde çalışırken, site yönetimi üzerinde kolaylıklar sağlanıyor. Ancak yine de Frontpagede (yeni XP/2002 sürümü de dahil) gerçekten temiz kodlar oluşturmak oldukça zor, çünkü program kaynak kodları üzerinde kontrol edilmesi güç değişiklikler yapıyor.
Sonuç: Frontpage yeni başlayanlara olduğu kadar profesyonellere de hitap ediyor.
--- --- ---
Dreamweaver: Uzmanların tercihi, gelişmiş fonksiyonlar.
Macromedia firması, Dreamweaver yazılımı ile oldukça popüler ve kullanışlı bir web editörü sunuyor. Gerçekten de program bugüne kadar piyasada bulunan en iyi ve en sevilen editörlerden biri olmayı hak ediyor. Her şeye rağmen, programın kullanıcı arabiriminde yer alan birbirinden bağımsız çalışma pencereleri, ilk görüşte yeni başlayan web tasarımcılarının gözünü korkutabilir. Bu durumda ancak 21 inç büyüklüğündeki bir monitör veya iki monitörün birlikte kullanılmasıyla yaratılacak geniş alan sayesinde, konforlu bir biçimde kullanılabilir.
Sonuç: Yüksek beklentileri olan web tasarımcıları Macromedianın bu yazılımına ödedikleri paranın karşılığını, tam anlamıyla alabilirler. Çünkü Dreamweaver web tasarımında gerekli tüm araçlara sahip. Ancak yeni başlayanlar için programa alışmak biraz zor olabilir ve tam anlamıyla kullanıma geçmeden önce, ön çalışma zamanı ayırmanız tavsiye edilir. Ürün hakkında daha fazla bilgiyi www.macromedia.com sitesinden edinebilirsiniz.
--- --- ---
GoLive! Daha düşük renk derinliğindeki resimler için.
Adobenin GoLive! yazılımı daha çok grafikerlere ve tasarımcılara hitap ediyor. Bu program iddialı web siteleri hazırlamak isteyenlere birinci sınıf tasarım, sunum ve yönetim araçları sunuyor. İster ilk sitesini yapan bir amatör ister profesyonel bir girişimci olun, bu sayede eş zamanlı olarak çarpıcı web sayfaları veya e-ticaret siteleri tasarlayabilirsiniz. GoLive! bir web sitesinin başarılı görsel oluşumu (wysiwyg) için gerekli olan her şeyi hatta biraz daha fazlasını sunuyor.
Sonuç: Kullanıcı komutları her zaman anlaşılır ve mantıklı görünmeseler de, program veya HTML bilgisi olmayan amatörler bile bu program ile iddialı web siteleri geliştirebilirler. Ürün hakkında daha fazla bilgiyi üretici firmanın www.adobe.com sitesinden edinebilirsiniz.
--- --- ---
NetObjects Fusion: Hızlı çözüm.
NetObjects Fusion, kendi sayfalarını hızlı bir biçimde hazırlamak ve bunun için ayıracağı süreyi azaltmak isteyen tüm web tasarımcılarına hitap ediyor. Ancak Fusion çok geniş imkanlara ve çeşitliliğe sahip değil. Programın yardım ayarları orta seviyeli ve yeni başlayan kullanıcıların programı keşfetmeleri dışında çok kısa bir sürede ayrıntılı çözümler elde edilmesine imkan sağlıyor. Fusion, Sürükle&Bırak tekniğiyle kolay ve hızlı web siteleri tasarlayabileceğiniz nesneler ile çalışıyor.
Sonuç: Yeni başlayanlar ve olabildiğince az masraf ile en hızlı biçimde sonuç elde etmek isteyen kullanıcılar, NetObjects Fusionı gördüklerinde heyecanlanacaklar. Kolay ve etkili kullanıcı arabirimi, uygulama hatalarının önüne geçiyor. Daha fazla bilgiyi www.netobjects.com adresinden elde edebilirsiniz.
--- --- ---
HomeSite: Gerçek web tasarımcılarına özel.
Macromedia şirketiyle birleşme kararı alan Allairenin HomeSite Editor yazılımının, ilk bakışta dahi, HTML bilgisine ve programlama tekniklerine hakim web tasarımcılarına hitap ettiği açıkça görülüyor. Güçlü yönetim imkanları sayesinde kullanıcının tüm fonksiyonlara ana pencereden erişmesi sağlanıyor. Home Site yazılımı ile NetObjects Fusion veya GoLive!den farklı olarak, grafik nesneleri ile değil, direkt olarak web sayfasının kaynak kodları üzerinde çalışılıyor ve bu sayede eğer uzman bir tasarımcıysanız, yapılan işlemlerin kontrolünüz dışına çıkması engelleniyor.
Sonuç: HomeSite yeni başlayan ve wysiwyg tipi editörlere alışık kullanıcılara hitap etmiyor, ancak diğer web tasarımcıları için gerçekten değerli bir kaynak. Program, büyük oranda temiz kaynak kodlarının yaratılması mantığı üzerine çalışıyor. Daha fazla bilgiyi üretici firmanın web sitesinden edinebilirsiniz : www.macromedia.com
--- --- ---
HTML editörleri kullanılarak ilgili menüler, araç çubukları ve program fonksiyonlarıyla istediğiniz HTML komutları, otomatik olarak web sayfanızın kaynak kodlarına eklenir. Ancak bu editörlerde tüm HTML komutlarını tam anlamıyla öğrenmenize ve el ile girmenize gerek duyulmaz ve bunun yerine direkt olarak bir web sitesinin önceden hazırlanmış HTML kaynak kodları üzerinde çalışılır. Wyswyg editörlerde, web sayfaları ileride web browser üzerinde görünecek biçimde gösterilir. Normalde bu editörler ile web sayfasının HTML kaynak kodlarının görülmesine bile gerek duyulmayabilir. Bu editörler, aynı zamandahazırladığınız internet sayfalarını tüm dünyayla paylaşmanıza aracı olacak metin düzenleme araçlarıdır.
--- --- ---
Frontpage: Kolay kullanım, sadeliği bozulan kodlar.
Eğer önceden Microsoftun Office uygulamalarında tecrübe sahibiyseniz, Frontpage yazılımına hızlı ve kolay bir biçimde alışabilirsiniz: Programın görünümü ve editörün kullanımı, Word ve Excele çok benziyor. Bu sayede nispeten azalan uyum zamanı sayesinde, kısa sürede başarılı sonuçlar elde edebilirsiniz. Dinamik bileşenler ve etkileşimli eklentiler, derin bir bilgi birikimine gerek duyulmadan kullanılabiliyor. Uzun web projeleri üzerinde çalışırken, site yönetimi üzerinde kolaylıklar sağlanıyor. Ancak yine de Frontpagede (yeni XP/2002 sürümü de dahil) gerçekten temiz kodlar oluşturmak oldukça zor, çünkü program kaynak kodları üzerinde kontrol edilmesi güç değişiklikler yapıyor.
Sonuç: Frontpage yeni başlayanlara olduğu kadar profesyonellere de hitap ediyor.
--- --- ---
Dreamweaver: Uzmanların tercihi, gelişmiş fonksiyonlar.
Macromedia firması, Dreamweaver yazılımı ile oldukça popüler ve kullanışlı bir web editörü sunuyor. Gerçekten de program bugüne kadar piyasada bulunan en iyi ve en sevilen editörlerden biri olmayı hak ediyor. Her şeye rağmen, programın kullanıcı arabiriminde yer alan birbirinden bağımsız çalışma pencereleri, ilk görüşte yeni başlayan web tasarımcılarının gözünü korkutabilir. Bu durumda ancak 21 inç büyüklüğündeki bir monitör veya iki monitörün birlikte kullanılmasıyla yaratılacak geniş alan sayesinde, konforlu bir biçimde kullanılabilir.
Sonuç: Yüksek beklentileri olan web tasarımcıları Macromedianın bu yazılımına ödedikleri paranın karşılığını, tam anlamıyla alabilirler. Çünkü Dreamweaver web tasarımında gerekli tüm araçlara sahip. Ancak yeni başlayanlar için programa alışmak biraz zor olabilir ve tam anlamıyla kullanıma geçmeden önce, ön çalışma zamanı ayırmanız tavsiye edilir. Ürün hakkında daha fazla bilgiyi www.macromedia.com sitesinden edinebilirsiniz.
--- --- ---
GoLive! Daha düşük renk derinliğindeki resimler için.
Adobenin GoLive! yazılımı daha çok grafikerlere ve tasarımcılara hitap ediyor. Bu program iddialı web siteleri hazırlamak isteyenlere birinci sınıf tasarım, sunum ve yönetim araçları sunuyor. İster ilk sitesini yapan bir amatör ister profesyonel bir girişimci olun, bu sayede eş zamanlı olarak çarpıcı web sayfaları veya e-ticaret siteleri tasarlayabilirsiniz. GoLive! bir web sitesinin başarılı görsel oluşumu (wysiwyg) için gerekli olan her şeyi hatta biraz daha fazlasını sunuyor.
Sonuç: Kullanıcı komutları her zaman anlaşılır ve mantıklı görünmeseler de, program veya HTML bilgisi olmayan amatörler bile bu program ile iddialı web siteleri geliştirebilirler. Ürün hakkında daha fazla bilgiyi üretici firmanın www.adobe.com sitesinden edinebilirsiniz.
--- --- ---
NetObjects Fusion: Hızlı çözüm.
NetObjects Fusion, kendi sayfalarını hızlı bir biçimde hazırlamak ve bunun için ayıracağı süreyi azaltmak isteyen tüm web tasarımcılarına hitap ediyor. Ancak Fusion çok geniş imkanlara ve çeşitliliğe sahip değil. Programın yardım ayarları orta seviyeli ve yeni başlayan kullanıcıların programı keşfetmeleri dışında çok kısa bir sürede ayrıntılı çözümler elde edilmesine imkan sağlıyor. Fusion, Sürükle&Bırak tekniğiyle kolay ve hızlı web siteleri tasarlayabileceğiniz nesneler ile çalışıyor.
Sonuç: Yeni başlayanlar ve olabildiğince az masraf ile en hızlı biçimde sonuç elde etmek isteyen kullanıcılar, NetObjects Fusionı gördüklerinde heyecanlanacaklar. Kolay ve etkili kullanıcı arabirimi, uygulama hatalarının önüne geçiyor. Daha fazla bilgiyi www.netobjects.com adresinden elde edebilirsiniz.
--- --- ---
HomeSite: Gerçek web tasarımcılarına özel.
Macromedia şirketiyle birleşme kararı alan Allairenin HomeSite Editor yazılımının, ilk bakışta dahi, HTML bilgisine ve programlama tekniklerine hakim web tasarımcılarına hitap ettiği açıkça görülüyor. Güçlü yönetim imkanları sayesinde kullanıcının tüm fonksiyonlara ana pencereden erişmesi sağlanıyor. Home Site yazılımı ile NetObjects Fusion veya GoLive!den farklı olarak, grafik nesneleri ile değil, direkt olarak web sayfasının kaynak kodları üzerinde çalışılıyor ve bu sayede eğer uzman bir tasarımcıysanız, yapılan işlemlerin kontrolünüz dışına çıkması engelleniyor.
Sonuç: HomeSite yeni başlayan ve wysiwyg tipi editörlere alışık kullanıcılara hitap etmiyor, ancak diğer web tasarımcıları için gerçekten değerli bir kaynak. Program, büyük oranda temiz kaynak kodlarının yaratılması mantığı üzerine çalışıyor. Daha fazla bilgiyi üretici firmanın web sitesinden edinebilirsiniz : www.macromedia.com
--- --- ---
Grafik Bölümü
Resim ve animasyon gibi çoklu ortam öğeleri, başllangıçta yalnızca bilimsel amaçlar için kullanılan interneti, basın-yayın ortamına dönüştürdü. Günümüzde, kalitesi yüksek resim dosyalarını, düşük yükleme süreleriyle birleştirebilen veri sanatçıları revaçta. Bu yazıda profesyonel web tasarımı için altı ipucu ve yardımcı araçları bulacaksınız.
Web sayfası tasarımında, genellikle çok sayıda noktanın bir araya getirilmesiyle oluşturulan bitmap grafiklerin kullanımı gündeme gelir. Bu türden resimler, mercek altına alındığında noktaları (ing. Pixel) kolaylıkla ayırt edilebildiğinden, her biri üzerinde ayrı ayrı çalışmak mümkündür. Bitmap çözünürlüğü, dpi (dots per inch) birimiyle ifade edilir. Bilgisayar ekranlarının çoğunda 72 dpi fiziksel çözünürlük üst sınırı aşılamadığından, bu değer web grafiklerinin boyutlandırma normu olarak görülmektedir. Diğer resim türü, noktalar yerine renk alanlarından oluşan vektör grafikleridir. Ölçekleri, uzatılarak ya da bastırılarak değiştirilebilir.
Vektör grafikleri, web kullanımının inanılmaz boyutlara varmasından önce var olduysa da, Shockwave teknolojisinin (Flash) devreye girmesiyle birlikte saygınlık kazanmıştır. Bu tür, yine de diğer web kullanımları için uygunluk göstermez. Resim dosyaları farklı dosya biçimlerinde bulunabilir.
BMP (Windows Bitmap) veya TIF (Tagged Image File Format) en sık karşılaşılan grafik uzantılarıdır. Tasarımcılar, web için GIF (Grafics Interchange Format) ve JPG veya JPEGi ( Joint Photographic Experts Group) daha sık tercih ederler. Web grafikleri konusunda diğer bir alternatif, giderek daha geniş kullanım alanı bulan PNG (Portable Network Graphics) dosya biçimidir.
Bu format, GIF ve JPG dosyalarının Düflük renk derinliğine sahip resimler için GIF biçimi GIF dosya biçimi, programcılar tarafından özellikle World Wide Web kullanımı için geliştirilmiştir. GIF, web tasarımcılarının en fazla 256 renk kullanabilmesine izin verdiğinden, düşük çözünürlükteki resimler için idealdir ve bu yüzden özellikle düğme, logo ve reklam bantları gibi yönlendirme öğelerinin şekillendirilmesi sırasında faydalanılır. GIF biçimindeki resimleri, renk sayısını azaltma yoluna giderek, küçültmek ve yüklenme süresini iyileştirmek mümkün. Sınırlandırılmış renk derinliği nedeniyle webde fotoğraf yayını için elverişsiz formatın web tasarımcılarının gözündeki en cazip yanı saydamlık, interlacing ve animasyon imkanı.
Saydamlık: GIF biçimi, herhangi bir rengin, genellikle de seçilen arka planın saydam olarak tanımlanabilmesini sağlayabilir. Saydam alanlar, web browser üzerinde o anki web sayfasının arka planını görülebilir kılar. Bu yolla, istediğiniz her internet sayfasına rahatlıkla ekleyebileceğiniz düğme ve logolar oluşturabilirsiniz.
Interlacing: Resim dosyalarıInterlacing: Resim dosyaları browserda yüklenmeleri esnasında satır satır oluşturulur. Söz konusu resim dosyası ne kadar büyükse, izleyicisi, resmi tümüyle anlayabilmek için o kadar uzun süre beklemek durumundadır. Interlacing özelliğinin etkinleştirilmesi sayesinde, bir GIF resminin browser tarafından öncelikle net olmayan hatlarla görüntülenmesini sağlanır ve böylelikle sorun ortadan kalkar. Resmin netliği, dosya yüklenirken artmaya devam eder. Bu şekilde izleyici resmin içeriği hakkında çok önceden bilgi sahibi olur ve fazla vakit kaybetmek durumunda kalmaz.
Animasyon: GIF dosya biçimindeki resimler, animasyon oluşturmada kullanılabilir. Bu amaçla, gerekli sayıda resim hazırlanarak uygun bir araçla tek bir GIF dosyasında bir araya getirilir. Hareketlendirilmiş GIF dosyalarının gösterimi sırasında, resimler önceden belirlenen bir hızla birbiri ardına değiştirilerek gösterilir ve resmi gören için animasyon etkisi oluşturulur.
16.7 milyon renk: JPG türünde resimler JPG formatındaki resimler 16.7 milyon renk derinliğini destekler. Bu nedenle bu dosya biçimi fotoğrafların ve de 256 rengin üzerindeki diğer resimlerin gösterimi için mükemmel bir uygum sergiler. JPG biçimindeki bir resim dosyası, sıkıştırma yoluyla küçültülebilir ve bu yolla web sayfasının yüklenme süresi iyileştirilebilir.
PNG: Yüksek renk derinliğine sahip resimler için Web kullanımı için uygun bir diğer grafik formatı ise PNGdir. Bitmap resimlerin internette transferi için özel olarak geliştirilmiştir. PNG formatı, saydam alanlar da içeren yüksek renk derinliğine sahip resimler için uygun görülüyor. Resim dosyasının sıkıştırılması kalite kaybı yaşanmadan gerçekleştirilebiliyor ve resimler bu yolla netlik kaybına uğramı-yor. Ancak sadece dördüncü nesil browserlar PNG biçimindeki resimleri doğru olarak işleyip görüntüleyebiliyor. Bu yüzden en azından şimdilik bu formatı webde kullanırken dikkatli olmalısınız.Web grafiklerinin renk paletini ve resim kalitesini belirlemek İnternette kullanımınıza sunulan resim dosyalarının kalitesi, farklı etkenlere bağlı olarak değişir. Görüntülenen renkler, kullanılan grafik biçiminin dışında, işletim sistemi ve web-browser ayarlarından olduğu kadar, monitör ve ekran kartının değerlerinden de etkilenir. Tüm bu etkenler, resim dosyasının gösterimini hissedilir ölçülerde değiştirme gücüne sahiptir. Web grafiğinde kullanılan renk paleti, en önemli faktörlerden biri olarak görülür.
Kullanıcıların herhangi bir resim dosyasını çağırmaları halinde, browser resmin gösterimi için kendi dahili renk paletine başvurur. Internet Explorer prensipte renkleri Netscape Navigatordan farklı bir biçimde bir araya getirir. Yani Internet Explorer, Windows renklerinin paletine başvururken, Netscape Navigator kendi dahili renk tablosundaki renk kombinasyonlarından yardım alır. Browser, kendi dahili renk paletinde yer almayan bir rengi yorumlamak durumunda kaldığında, benzer bir renk seçer ve iki farklı renk tonunu birbirine karıştırarak yeni ve benzer bir renk elde eder. Renklerin karıştırılması Dithering olarak da adlandırılır ve gerçekte istenmeyen bir etkidir. Kuşkusuz web tasarımcısının resim şekillendirme sırasında kontrolü kaybetmemesini sağlayan bir çözüm bulunuyor... Bu durumda kesin olarak tanımlanabilecek 216 renkten oluşan ve kayıtlarının her güncel web browser tarafından eşit bir şekilde yorumlanacağı bir renk paleti kullanılır. Grafik şekillendirme sırasında bu paleti tercih etmeniz durumunda, sayfanızın görüntülenme garantisi sağlanır.
Web sayfanız için ücretsiz resim ve grafikler
Başka hiçbir öğe, bir web sayfasının tasarımına uygun yerleştirilmiş şık bir grafik ya da resim kadar güzel etki bırakamaz. Grafiksel eklentilerden mahrum bırakılmış metin alanları, pek çok sörfçü tarafından hoş karşılanmayacaktır. Ancak uygun resim veya grafik materyalinin nereden temin edilebileceği sorusu, hiçbir tasarımcı için gündemden düşmez. Kendi sitesini tasarlayan amatör kullanıcılar veya webmasterlar, gerekli öğeleri kendi başına oluşturabilecek kadar yetenekli bir tasarımcı olmayabilirler. Firmalar bu iş için genellikle grafiker, fotoğrafçı ve resim editörlerini görevlendirirken, aynı yöntem özel kişisel web sayfaları için yüksek maliyet nedeniyle alternatif olmaktan çıkar. Birazdan resim ve grafik temin edebileceğiniz adreslerin listesine ulaşacaksınız.
Söz konusu kaynakların sunduğu içeriğin tamamına yakınını kişisel web sayfanızın şekillendirmesi amacıyla ücret ödemeden kullanabilirsiniz. Dijital kamera veya tarayıcı resimlerini çoğu kez hemen web sayfanıza yerleştiremezsiniz. Bu materyal, öncelikle bir grafik işlem programı vasıtasıyla uygun formata dönüştürülmelidir.
Tarayıcı sayesinde, resim, grafik ya da diğer şablonlar basılı kağıt üzerinden PCye aktarılabilir ve bilgisayarda yeniden biçimlendirilir. Bu işi görecek nitelikte bir tarayıcının maliyeti markasına ve özelliklerine göre 50 dolar ile 200 dolar arasında değişir. Giderek daha da ucuzlayan dijital kameralar vasıtasıyla görüntü karelerini sadece yakalamakla kalmaz, onları aynı zamanda doğrudan fotoğraf makinesinden PCye aktarabilirsiniz. Üstelik genellikle dosya biçimini bile değiştirmeniz gerekmez. Bu tarz dijital kameralarla web sayfanız için resimler oluşturabilirsiniz. Kameraların fiyatları 200 ile 300 dolar civarında değişiyor. Resim negatifi ve diaları, fotoğrafçılarda yüksek kalitede CDye yazdırabilir ve ardından bilgisayara aktarabilirsiniz. Kitapçılarda, alışveriş merkezlerinde, PC mağazalarında ve online shoplarda çok sayıda fotoğraf, grafik ve simge içeren, çoğu kez Clip-Art Collection adıyla anılan uygun fiyatlı CD-ROMlar bulmak mümkün. Buradaki resimleri kendi web sayfalarınız için dilediğiniz gibi kullanabilirsiniz. Pek çok uygulama Clipart koleksiyonuyla birlikte gelir. Program CDlerine veya sabitdiskinizdeki program klasörlerine bakarak, ClipArt, Images, Bitmaps veya benzer isimli klasörlerin izini sürün. Microsoft Office paketiyle çalışıyorsanız ve orijinal CD-ROM elinizin altındaysa ClipArts klasörüne bakmanız yeterli
olacaktır. Her türden resim ve grafik için bir diğer kaynak da elbette webin kendisidir. Uygun resim materyalini bulmayı sağlayacak aramadan daha yakın pek az imkana sahibiz. İstediğiniz resmi internetten kendi kişisel bilgisayarınıza indirmek için sağ fare tuşuna tıklamak ve Resmi farklı kaydet komutunu seçmek yeterli. Pek çok arama motoru clipartlar için özel bölüm veya arşivlere sahip, diğerleriyse ClipArt veya GIF aramalarıyla isabetli sonuçlar elde edilmesini sağlıyorlar.
www.clip-art.com
www.freegraphics.com
www.clipartconnection.com
www.clipartcastle.com
Resim işleme için araç ve uygulamalar
Resim ve grafiklerin web kullanımına hazır hale gelmesi için, değiştirilmesi ve üzerinde çalışılması gerek. Bu nedenle grafik ve resim işlemede kullanabileceğiniz, çeşitli hizmetler sunan bazı yazılımları tanıtıyoruz. Bu programlar web editörleriyle birlikte web tasarımcıları için en önemli araçlar arasında yer alıyor.
--- --- ---
Paintshop Pro 7.0: Paintshop Pro, grafik ve resimleri küçük sanat eserlerine dönüştürebilmek için gereken tüm araçları sunuyor. Özellikle web grafikleri konusunda fark edilir sonuçlara çok hızlı şekilde erişilebiliyor. Dahili animation shop-araçları sayesinde kısa sürede istenen GIF, banner veya metin animasyonlarını elde edebilirsiniz. Fiyat-performans değerinin uygunluğu, programı düşük bütçeli web tasarımcılar için son derece elverişli kılıyor.
Bilgi için: www.jasc.com
--- --- ---
Phootshop 8 CS: Photoshop yazılımının, profesyonel çizgisi övgüye değer. Program web grafiklerinin değiştirilmesinde kullanılabilecek çok yönlü araçlar sunuyor. Photoshop hem vektör hem de bitmap grafikler konusunda hiçbir ihtiyacı karşılıksız bırakmıyor. Ama bu kez performansın bedeli bir hayli yüksek.
Bilgi için: www.adobe.com
--- --- ---
Fireworks MX: Fireworks, tasarım ve geliştirme arasındaki boşluğu örnek şekilde doldurmayı başarıyor. Yazılım, çok yönlü bitmap ve vektör araçları sayesinde, web grafiklerinin oluşturulmasını, işlenmesini ve hareketlendirilmesini sağlıyor. Resimlerinizi iyileştirebilir ve istenen HTML editörüne aktarabilirsiniz. Fireworks profesyonel istekleri hedef alan ama daha az tecrübe sahibi kullanıcıları da kolaylıkla net sonuçlara götürebilen performans özellikleri sergiliyor.
Bilgi için: www.macromedia.com
--- --- ---
Corel Draw 11: Corel Draw 11 Graphics, Suite Corelın şimdiye kadarki en yüksek performansı sağlayan paketi. Sayfa tasarımı, illüstrasyon, resim işleme ve vektör animasyonları için çeşitli araçlara sahip. Bitmap grafiklerin oluşturulması ve işlenmesi için PhotoPaint yazılımıyla birlikte geliyor. Web tasarımcılar bu programla hem profesyonel kullanım hem de ev kullanımı için gereken araçlarla donatılmış olacaklardır.
Bilgi için: www.corel.com
--- --- ---
Resim ve animasyon gibi çoklu ortam öğeleri, başllangıçta yalnızca bilimsel amaçlar için kullanılan interneti, basın-yayın ortamına dönüştürdü. Günümüzde, kalitesi yüksek resim dosyalarını, düşük yükleme süreleriyle birleştirebilen veri sanatçıları revaçta. Bu yazıda profesyonel web tasarımı için altı ipucu ve yardımcı araçları bulacaksınız.
Web sayfası tasarımında, genellikle çok sayıda noktanın bir araya getirilmesiyle oluşturulan bitmap grafiklerin kullanımı gündeme gelir. Bu türden resimler, mercek altına alındığında noktaları (ing. Pixel) kolaylıkla ayırt edilebildiğinden, her biri üzerinde ayrı ayrı çalışmak mümkündür. Bitmap çözünürlüğü, dpi (dots per inch) birimiyle ifade edilir. Bilgisayar ekranlarının çoğunda 72 dpi fiziksel çözünürlük üst sınırı aşılamadığından, bu değer web grafiklerinin boyutlandırma normu olarak görülmektedir. Diğer resim türü, noktalar yerine renk alanlarından oluşan vektör grafikleridir. Ölçekleri, uzatılarak ya da bastırılarak değiştirilebilir.
Vektör grafikleri, web kullanımının inanılmaz boyutlara varmasından önce var olduysa da, Shockwave teknolojisinin (Flash) devreye girmesiyle birlikte saygınlık kazanmıştır. Bu tür, yine de diğer web kullanımları için uygunluk göstermez. Resim dosyaları farklı dosya biçimlerinde bulunabilir.
BMP (Windows Bitmap) veya TIF (Tagged Image File Format) en sık karşılaşılan grafik uzantılarıdır. Tasarımcılar, web için GIF (Grafics Interchange Format) ve JPG veya JPEGi ( Joint Photographic Experts Group) daha sık tercih ederler. Web grafikleri konusunda diğer bir alternatif, giderek daha geniş kullanım alanı bulan PNG (Portable Network Graphics) dosya biçimidir.
Bu format, GIF ve JPG dosyalarının Düflük renk derinliğine sahip resimler için GIF biçimi GIF dosya biçimi, programcılar tarafından özellikle World Wide Web kullanımı için geliştirilmiştir. GIF, web tasarımcılarının en fazla 256 renk kullanabilmesine izin verdiğinden, düşük çözünürlükteki resimler için idealdir ve bu yüzden özellikle düğme, logo ve reklam bantları gibi yönlendirme öğelerinin şekillendirilmesi sırasında faydalanılır. GIF biçimindeki resimleri, renk sayısını azaltma yoluna giderek, küçültmek ve yüklenme süresini iyileştirmek mümkün. Sınırlandırılmış renk derinliği nedeniyle webde fotoğraf yayını için elverişsiz formatın web tasarımcılarının gözündeki en cazip yanı saydamlık, interlacing ve animasyon imkanı.
Saydamlık: GIF biçimi, herhangi bir rengin, genellikle de seçilen arka planın saydam olarak tanımlanabilmesini sağlayabilir. Saydam alanlar, web browser üzerinde o anki web sayfasının arka planını görülebilir kılar. Bu yolla, istediğiniz her internet sayfasına rahatlıkla ekleyebileceğiniz düğme ve logolar oluşturabilirsiniz.
Interlacing: Resim dosyalarıInterlacing: Resim dosyaları browserda yüklenmeleri esnasında satır satır oluşturulur. Söz konusu resim dosyası ne kadar büyükse, izleyicisi, resmi tümüyle anlayabilmek için o kadar uzun süre beklemek durumundadır. Interlacing özelliğinin etkinleştirilmesi sayesinde, bir GIF resminin browser tarafından öncelikle net olmayan hatlarla görüntülenmesini sağlanır ve böylelikle sorun ortadan kalkar. Resmin netliği, dosya yüklenirken artmaya devam eder. Bu şekilde izleyici resmin içeriği hakkında çok önceden bilgi sahibi olur ve fazla vakit kaybetmek durumunda kalmaz.
Animasyon: GIF dosya biçimindeki resimler, animasyon oluşturmada kullanılabilir. Bu amaçla, gerekli sayıda resim hazırlanarak uygun bir araçla tek bir GIF dosyasında bir araya getirilir. Hareketlendirilmiş GIF dosyalarının gösterimi sırasında, resimler önceden belirlenen bir hızla birbiri ardına değiştirilerek gösterilir ve resmi gören için animasyon etkisi oluşturulur.
16.7 milyon renk: JPG türünde resimler JPG formatındaki resimler 16.7 milyon renk derinliğini destekler. Bu nedenle bu dosya biçimi fotoğrafların ve de 256 rengin üzerindeki diğer resimlerin gösterimi için mükemmel bir uygum sergiler. JPG biçimindeki bir resim dosyası, sıkıştırma yoluyla küçültülebilir ve bu yolla web sayfasının yüklenme süresi iyileştirilebilir.
PNG: Yüksek renk derinliğine sahip resimler için Web kullanımı için uygun bir diğer grafik formatı ise PNGdir. Bitmap resimlerin internette transferi için özel olarak geliştirilmiştir. PNG formatı, saydam alanlar da içeren yüksek renk derinliğine sahip resimler için uygun görülüyor. Resim dosyasının sıkıştırılması kalite kaybı yaşanmadan gerçekleştirilebiliyor ve resimler bu yolla netlik kaybına uğramı-yor. Ancak sadece dördüncü nesil browserlar PNG biçimindeki resimleri doğru olarak işleyip görüntüleyebiliyor. Bu yüzden en azından şimdilik bu formatı webde kullanırken dikkatli olmalısınız.Web grafiklerinin renk paletini ve resim kalitesini belirlemek İnternette kullanımınıza sunulan resim dosyalarının kalitesi, farklı etkenlere bağlı olarak değişir. Görüntülenen renkler, kullanılan grafik biçiminin dışında, işletim sistemi ve web-browser ayarlarından olduğu kadar, monitör ve ekran kartının değerlerinden de etkilenir. Tüm bu etkenler, resim dosyasının gösterimini hissedilir ölçülerde değiştirme gücüne sahiptir. Web grafiğinde kullanılan renk paleti, en önemli faktörlerden biri olarak görülür.
Kullanıcıların herhangi bir resim dosyasını çağırmaları halinde, browser resmin gösterimi için kendi dahili renk paletine başvurur. Internet Explorer prensipte renkleri Netscape Navigatordan farklı bir biçimde bir araya getirir. Yani Internet Explorer, Windows renklerinin paletine başvururken, Netscape Navigator kendi dahili renk tablosundaki renk kombinasyonlarından yardım alır. Browser, kendi dahili renk paletinde yer almayan bir rengi yorumlamak durumunda kaldığında, benzer bir renk seçer ve iki farklı renk tonunu birbirine karıştırarak yeni ve benzer bir renk elde eder. Renklerin karıştırılması Dithering olarak da adlandırılır ve gerçekte istenmeyen bir etkidir. Kuşkusuz web tasarımcısının resim şekillendirme sırasında kontrolü kaybetmemesini sağlayan bir çözüm bulunuyor... Bu durumda kesin olarak tanımlanabilecek 216 renkten oluşan ve kayıtlarının her güncel web browser tarafından eşit bir şekilde yorumlanacağı bir renk paleti kullanılır. Grafik şekillendirme sırasında bu paleti tercih etmeniz durumunda, sayfanızın görüntülenme garantisi sağlanır.
Web sayfanız için ücretsiz resim ve grafikler
Başka hiçbir öğe, bir web sayfasının tasarımına uygun yerleştirilmiş şık bir grafik ya da resim kadar güzel etki bırakamaz. Grafiksel eklentilerden mahrum bırakılmış metin alanları, pek çok sörfçü tarafından hoş karşılanmayacaktır. Ancak uygun resim veya grafik materyalinin nereden temin edilebileceği sorusu, hiçbir tasarımcı için gündemden düşmez. Kendi sitesini tasarlayan amatör kullanıcılar veya webmasterlar, gerekli öğeleri kendi başına oluşturabilecek kadar yetenekli bir tasarımcı olmayabilirler. Firmalar bu iş için genellikle grafiker, fotoğrafçı ve resim editörlerini görevlendirirken, aynı yöntem özel kişisel web sayfaları için yüksek maliyet nedeniyle alternatif olmaktan çıkar. Birazdan resim ve grafik temin edebileceğiniz adreslerin listesine ulaşacaksınız.
Söz konusu kaynakların sunduğu içeriğin tamamına yakınını kişisel web sayfanızın şekillendirmesi amacıyla ücret ödemeden kullanabilirsiniz. Dijital kamera veya tarayıcı resimlerini çoğu kez hemen web sayfanıza yerleştiremezsiniz. Bu materyal, öncelikle bir grafik işlem programı vasıtasıyla uygun formata dönüştürülmelidir.
Tarayıcı sayesinde, resim, grafik ya da diğer şablonlar basılı kağıt üzerinden PCye aktarılabilir ve bilgisayarda yeniden biçimlendirilir. Bu işi görecek nitelikte bir tarayıcının maliyeti markasına ve özelliklerine göre 50 dolar ile 200 dolar arasında değişir. Giderek daha da ucuzlayan dijital kameralar vasıtasıyla görüntü karelerini sadece yakalamakla kalmaz, onları aynı zamanda doğrudan fotoğraf makinesinden PCye aktarabilirsiniz. Üstelik genellikle dosya biçimini bile değiştirmeniz gerekmez. Bu tarz dijital kameralarla web sayfanız için resimler oluşturabilirsiniz. Kameraların fiyatları 200 ile 300 dolar civarında değişiyor. Resim negatifi ve diaları, fotoğrafçılarda yüksek kalitede CDye yazdırabilir ve ardından bilgisayara aktarabilirsiniz. Kitapçılarda, alışveriş merkezlerinde, PC mağazalarında ve online shoplarda çok sayıda fotoğraf, grafik ve simge içeren, çoğu kez Clip-Art Collection adıyla anılan uygun fiyatlı CD-ROMlar bulmak mümkün. Buradaki resimleri kendi web sayfalarınız için dilediğiniz gibi kullanabilirsiniz. Pek çok uygulama Clipart koleksiyonuyla birlikte gelir. Program CDlerine veya sabitdiskinizdeki program klasörlerine bakarak, ClipArt, Images, Bitmaps veya benzer isimli klasörlerin izini sürün. Microsoft Office paketiyle çalışıyorsanız ve orijinal CD-ROM elinizin altındaysa ClipArts klasörüne bakmanız yeterli
olacaktır. Her türden resim ve grafik için bir diğer kaynak da elbette webin kendisidir. Uygun resim materyalini bulmayı sağlayacak aramadan daha yakın pek az imkana sahibiz. İstediğiniz resmi internetten kendi kişisel bilgisayarınıza indirmek için sağ fare tuşuna tıklamak ve Resmi farklı kaydet komutunu seçmek yeterli. Pek çok arama motoru clipartlar için özel bölüm veya arşivlere sahip, diğerleriyse ClipArt veya GIF aramalarıyla isabetli sonuçlar elde edilmesini sağlıyorlar.
www.clip-art.com
www.freegraphics.com
www.clipartconnection.com
www.clipartcastle.com
Resim işleme için araç ve uygulamalar
Resim ve grafiklerin web kullanımına hazır hale gelmesi için, değiştirilmesi ve üzerinde çalışılması gerek. Bu nedenle grafik ve resim işlemede kullanabileceğiniz, çeşitli hizmetler sunan bazı yazılımları tanıtıyoruz. Bu programlar web editörleriyle birlikte web tasarımcıları için en önemli araçlar arasında yer alıyor.
--- --- ---
Paintshop Pro 7.0: Paintshop Pro, grafik ve resimleri küçük sanat eserlerine dönüştürebilmek için gereken tüm araçları sunuyor. Özellikle web grafikleri konusunda fark edilir sonuçlara çok hızlı şekilde erişilebiliyor. Dahili animation shop-araçları sayesinde kısa sürede istenen GIF, banner veya metin animasyonlarını elde edebilirsiniz. Fiyat-performans değerinin uygunluğu, programı düşük bütçeli web tasarımcılar için son derece elverişli kılıyor.
Bilgi için: www.jasc.com
--- --- ---
Phootshop 8 CS: Photoshop yazılımının, profesyonel çizgisi övgüye değer. Program web grafiklerinin değiştirilmesinde kullanılabilecek çok yönlü araçlar sunuyor. Photoshop hem vektör hem de bitmap grafikler konusunda hiçbir ihtiyacı karşılıksız bırakmıyor. Ama bu kez performansın bedeli bir hayli yüksek.
Bilgi için: www.adobe.com
--- --- ---
Fireworks MX: Fireworks, tasarım ve geliştirme arasındaki boşluğu örnek şekilde doldurmayı başarıyor. Yazılım, çok yönlü bitmap ve vektör araçları sayesinde, web grafiklerinin oluşturulmasını, işlenmesini ve hareketlendirilmesini sağlıyor. Resimlerinizi iyileştirebilir ve istenen HTML editörüne aktarabilirsiniz. Fireworks profesyonel istekleri hedef alan ama daha az tecrübe sahibi kullanıcıları da kolaylıkla net sonuçlara götürebilen performans özellikleri sergiliyor.
Bilgi için: www.macromedia.com
--- --- ---
Corel Draw 11: Corel Draw 11 Graphics, Suite Corelın şimdiye kadarki en yüksek performansı sağlayan paketi. Sayfa tasarımı, illüstrasyon, resim işleme ve vektör animasyonları için çeşitli araçlara sahip. Bitmap grafiklerin oluşturulması ve işlenmesi için PhotoPaint yazılımıyla birlikte geliyor. Web tasarımcılar bu programla hem profesyonel kullanım hem de ev kullanımı için gereken araçlarla donatılmış olacaklardır.
Bilgi için: www.corel.com
--- --- ---
Web Tasarımında Ölçüler
Öğrenmeye, işin sonundan ya da ortasından değil, başından başlamanız gerekir.
Önemli Not: Eğer web sayfam sadece IE6.0 ile, Windows'ta ve 800x600 çözünürlükte düzgün görünsün yeter" diyorsanız o zaman bu yazıyı okumayınız. Ancak, belirtmeliyim ki, bunun "Ben loş ışıkta, profilden ve sadece sabahları çok yakışıklıyımdır" demekten fazla bir farkı yok.
Klasik grafik tasarımından Web tasarımına geçiş yapmak isteyenlerin karşılarına çıkan ilk sorun, alışmış oldukları standartların Web için geçerli olmamasıdır ! Bu aşamada şunu özellikle ve altını çizerek vurgulamak istiyorum... Web tasarımı içerdiği tüm öğelerle bir bütündür; yani gözleri görmeyen birinin bir fili dokunarak tarif etmesi gibi Web tasarımını oluşturan bir ya da birkaç öğeyi iyice öğrenip gerisini boş vererek sağlıklı web tasrımı yapmak imkansızdır. Bu öğelerin çokluğu ve detayları ilk bakışta göz korkutmakla birlikte, web tasarımının asıl keyfi de burada gizlidir...her gün sürekli, sürekli öğrenirsiniz ve öğrenmeye işin ortası ya da sonundan değil, başından başlamanız gerekir, çünkü bu öğelerin hepsi birbiriyle bağlantılıdır.
Şimdi bu yazıda web tasarımının en başına dönüyoruz. Çok güzel tasarımlar, bannerlar, rolloverlar yapabilirsiniz, ama öncelikle bu tasarımı "Çizeveğiniz" Web'deki "kağıdın" ölçüsünü biliyor olmamız gerekir.
Bir dergi ya da broşür tasarımı yaparken, çalışmanızda kağıt boyutlarının ne olması gerektiği, hangi puntoda font kullanacağınız bellidir. Size sunulmuş standart seçeneklerle hazırlanmış çalışma; örneğin A4 boyutunda bir kağıda basılı 18 punto başlık ve 12 punto yazılarla hazırladığınız bir broşür dünyanın her yeinde aynı görülür.
İnsanlar, hazırladığımız Web sayfalarını farklı işletim sistemlerine sahip bilgisayarlarla ve farklı özelliklere sahip Web tarayıcılarını kullanarak izliyorlar. Ve maalesef her Web tarayıcısı sayfaları görüntülerken bir standartta birleşmeyip, "kendi kafasına göre takıldığı" için Web sayfalarımızı yapmadan önce bazı püf noktalarını bilmemiz gerekiyor. Bu noktaları bilmeden yaptığımız bir sayfa, biz sayfayı kendi bilgisayarımızın şartlarında görerek yaptığımız için bize çok güzel görünecektir, ama başka birisi için görünen şey vahim olabilir.
Çalışma alanımız
A4 Kağıtta çalışma alanınız bellidir. Web'de ise bu çalışma alanı enine ve boyuna sınırsızdır; yani 5 metre eninde bir sayfa yaparsanız; tarayıcınız bunu sağa ve sola kaydırarak görüntüler. Ama tabii ki bu istenilen bir durum değildir.
Bu noktada tasarımımızın he koşulda düzgün görünmesi için sınırları bizim belirlememiz gerekir.
Kural 1 : Ziyaretçileriniz sayfanızın solundan sağına doğru tümünü görüntülemek için tarayıcının yatay kaydırma çubuğunu kullanmak zorunda kalmamalı.
Kural 2 : 800 x 600 çözünürlükte harika görünen siteniz, 1024 x 768 çözünürlükte ekranın sol üst köşesine yapışıp kalmamalı, etrafında çirkin beyaz boşluklar bırakmamalı.
Çalışma Alanımızı Belirleyelim;
Kendimize ilk sormamız gereken, sayfamızı hangi çözünürlük ayarlarına göre tasarlayacağımızdır. Özellikle laptopların yaygınlaşması ile artık insanların büyük bir çoğunluğu 1024 x 768 ekran çözünürlüğünü tercih etmekle birlikte, yine de hala 800 x 600 çözünürlük kullananların sayısı az değil. 600 x 480 gibi düşük çözünürlükleri ise artık kimse kullanmıyor.
Sayfanızı 800 x 600'e ya da 1024 x 768'e göre yapmak tabi ki sizin bileceğiniz iş. Ancak benim tavsiyem, sayfanızın 800 x 600 çözünürlükte düzgün görünmesini sağlayacak, ancak aynı zamanda 1024 x 768 çözünürlükte de güzelliğini koruyacak bir "orta yol" seçmeniz. Bu seçim, sayfanızı geniş kitlelerin aynı güzellikte izleyebilmesini sağlayacaktır.
Bunu yapabilmeniz için farklı işletim sistemleri ve farklı taraıcıların özelliklerini bilmeniz gerekecektir. Örneğin Windows işletim sisteminde ekranın en altında boydan boya uzanan çubuk, sayfanızın görüntü alanından çalmaktadır. Bu da Macintosh ile tasarladığınız bir sayfanın giriş sayfasının altında görünmesini istediğiniz logoyu, müşterinizin PC'sinde ilk başta görmemesi demektir ! Aynı şekilde, tarayıcıların kaydırma çubuklarının en olarak ölçüleri de farklıdır.
Çalışma alanımı hangi boyutlara göre planlamak istiyorsak o yönde ölçüler seçmeleyiz.
------------------------------
800 x 600 Çözünürlük için;
Windows işletim sistemi
IE 5.X En : 780 Boy : 410
IE 6.0 En : 780 Boy : 413
N 4.X En : 780 Boy : 422
N 6.X En : 776 Boy : 446
Macintosh Klasik
IE 4.5 En: 744 Boy : 446
IE 5.x En: 748 Boy : 439
N 4.7 En: 768 Boy : 437
N 6.2 En: 763 Boy : 464
Mac OS X
IE 5.x En : 748 Boy : 436
N 6.2 En : 769 Boy : 463
------------------------------
800 X 600 çözünürlükte farklı tarayıcı ve işletim sistemlerine göre sayfanın görüntülenen bölümü pixel cinsinden şöyledir. Yukarıda ki çizelgeye baktığımızda, 800 x 600 özünürlükte en ve boy olarak ekrana tam olarak sığmasını istediğimiz bir tasarımın aşağıda ki ölçüler içinde olması gerekiyor.
Önerilen en güvenli ölçü : 744 En x 410 Boy, hem Windows hem de Mac'te tam görüntü için: 748 En x 410 Boy.
"Yok ben sadece 1024 x 768 çözünürlükte görüntülenecek sayfa yapmak istiyorum" diyorsanız, o zaman seçmeniz gereken çalışma alanları şöyle olmalıdır.
Önerilen en güvenli ölçü : 968 en x 578 boy, hem Windows hem de Mac'te tam görüntü için : 972 en x 578 boy, Sadece Windows'ta tam görüntü için : 1000 en x 578 boy.
Tabi ki çözünürlüğe ve pencere boyutuna göre enlemesine açılıp kapanan esenek tablolarla görüntü sorununu bir derecede halletmek mümkün. Ancak bu sorunu tam anlamıyla çözmüyor. Sayfanızın grafik tasarımında yine de yukarıda verilen ölçüleri göz önüne almanız lazım.
Püf Noktası: Dreamweaver ile çalışırken sayfanın alt sağ köşesinde sayfa ölçüsünü gösteren bir menü vardır. Bu menü farklı çözünürlüklere göre çalışabileceğiniz maksimum alan ölçüsünü gösterir. (Örneğin, 760 x 420 (800 x 600 maximazed) gibi.) Bu menüden ölçüyü değiştirdiğimizde Dreamweaver penceresi enlemesine ve boylamasına açılıp kapanarak size sayfanızın farklı çözünürlükte nasıl görüntüleneceğini gösterir. Unutmamanız gereken şey, Dreamwevaer'ın size çalışabileceğiniz "ideal alanı" değil "Maksimum alanı" gösterior olmasıdır. Yani yukarıda verdiğimiz değerler yine de daha güvenlidir.
Kaynak :MacLine
Öğrenmeye, işin sonundan ya da ortasından değil, başından başlamanız gerekir.
Önemli Not: Eğer web sayfam sadece IE6.0 ile, Windows'ta ve 800x600 çözünürlükte düzgün görünsün yeter" diyorsanız o zaman bu yazıyı okumayınız. Ancak, belirtmeliyim ki, bunun "Ben loş ışıkta, profilden ve sadece sabahları çok yakışıklıyımdır" demekten fazla bir farkı yok.
Klasik grafik tasarımından Web tasarımına geçiş yapmak isteyenlerin karşılarına çıkan ilk sorun, alışmış oldukları standartların Web için geçerli olmamasıdır ! Bu aşamada şunu özellikle ve altını çizerek vurgulamak istiyorum... Web tasarımı içerdiği tüm öğelerle bir bütündür; yani gözleri görmeyen birinin bir fili dokunarak tarif etmesi gibi Web tasarımını oluşturan bir ya da birkaç öğeyi iyice öğrenip gerisini boş vererek sağlıklı web tasrımı yapmak imkansızdır. Bu öğelerin çokluğu ve detayları ilk bakışta göz korkutmakla birlikte, web tasarımının asıl keyfi de burada gizlidir...her gün sürekli, sürekli öğrenirsiniz ve öğrenmeye işin ortası ya da sonundan değil, başından başlamanız gerekir, çünkü bu öğelerin hepsi birbiriyle bağlantılıdır.
Şimdi bu yazıda web tasarımının en başına dönüyoruz. Çok güzel tasarımlar, bannerlar, rolloverlar yapabilirsiniz, ama öncelikle bu tasarımı "Çizeveğiniz" Web'deki "kağıdın" ölçüsünü biliyor olmamız gerekir.
Bir dergi ya da broşür tasarımı yaparken, çalışmanızda kağıt boyutlarının ne olması gerektiği, hangi puntoda font kullanacağınız bellidir. Size sunulmuş standart seçeneklerle hazırlanmış çalışma; örneğin A4 boyutunda bir kağıda basılı 18 punto başlık ve 12 punto yazılarla hazırladığınız bir broşür dünyanın her yeinde aynı görülür.
İnsanlar, hazırladığımız Web sayfalarını farklı işletim sistemlerine sahip bilgisayarlarla ve farklı özelliklere sahip Web tarayıcılarını kullanarak izliyorlar. Ve maalesef her Web tarayıcısı sayfaları görüntülerken bir standartta birleşmeyip, "kendi kafasına göre takıldığı" için Web sayfalarımızı yapmadan önce bazı püf noktalarını bilmemiz gerekiyor. Bu noktaları bilmeden yaptığımız bir sayfa, biz sayfayı kendi bilgisayarımızın şartlarında görerek yaptığımız için bize çok güzel görünecektir, ama başka birisi için görünen şey vahim olabilir.
Çalışma alanımız
A4 Kağıtta çalışma alanınız bellidir. Web'de ise bu çalışma alanı enine ve boyuna sınırsızdır; yani 5 metre eninde bir sayfa yaparsanız; tarayıcınız bunu sağa ve sola kaydırarak görüntüler. Ama tabii ki bu istenilen bir durum değildir.
Bu noktada tasarımımızın he koşulda düzgün görünmesi için sınırları bizim belirlememiz gerekir.
Kural 1 : Ziyaretçileriniz sayfanızın solundan sağına doğru tümünü görüntülemek için tarayıcının yatay kaydırma çubuğunu kullanmak zorunda kalmamalı.
Kural 2 : 800 x 600 çözünürlükte harika görünen siteniz, 1024 x 768 çözünürlükte ekranın sol üst köşesine yapışıp kalmamalı, etrafında çirkin beyaz boşluklar bırakmamalı.
Çalışma Alanımızı Belirleyelim;
Kendimize ilk sormamız gereken, sayfamızı hangi çözünürlük ayarlarına göre tasarlayacağımızdır. Özellikle laptopların yaygınlaşması ile artık insanların büyük bir çoğunluğu 1024 x 768 ekran çözünürlüğünü tercih etmekle birlikte, yine de hala 800 x 600 çözünürlük kullananların sayısı az değil. 600 x 480 gibi düşük çözünürlükleri ise artık kimse kullanmıyor.
Sayfanızı 800 x 600'e ya da 1024 x 768'e göre yapmak tabi ki sizin bileceğiniz iş. Ancak benim tavsiyem, sayfanızın 800 x 600 çözünürlükte düzgün görünmesini sağlayacak, ancak aynı zamanda 1024 x 768 çözünürlükte de güzelliğini koruyacak bir "orta yol" seçmeniz. Bu seçim, sayfanızı geniş kitlelerin aynı güzellikte izleyebilmesini sağlayacaktır.
Bunu yapabilmeniz için farklı işletim sistemleri ve farklı taraıcıların özelliklerini bilmeniz gerekecektir. Örneğin Windows işletim sisteminde ekranın en altında boydan boya uzanan çubuk, sayfanızın görüntü alanından çalmaktadır. Bu da Macintosh ile tasarladığınız bir sayfanın giriş sayfasının altında görünmesini istediğiniz logoyu, müşterinizin PC'sinde ilk başta görmemesi demektir ! Aynı şekilde, tarayıcıların kaydırma çubuklarının en olarak ölçüleri de farklıdır.
Çalışma alanımı hangi boyutlara göre planlamak istiyorsak o yönde ölçüler seçmeleyiz.
------------------------------
800 x 600 Çözünürlük için;
Windows işletim sistemi
IE 5.X En : 780 Boy : 410
IE 6.0 En : 780 Boy : 413
N 4.X En : 780 Boy : 422
N 6.X En : 776 Boy : 446
Macintosh Klasik
IE 4.5 En: 744 Boy : 446
IE 5.x En: 748 Boy : 439
N 4.7 En: 768 Boy : 437
N 6.2 En: 763 Boy : 464
Mac OS X
IE 5.x En : 748 Boy : 436
N 6.2 En : 769 Boy : 463
------------------------------
800 X 600 çözünürlükte farklı tarayıcı ve işletim sistemlerine göre sayfanın görüntülenen bölümü pixel cinsinden şöyledir. Yukarıda ki çizelgeye baktığımızda, 800 x 600 özünürlükte en ve boy olarak ekrana tam olarak sığmasını istediğimiz bir tasarımın aşağıda ki ölçüler içinde olması gerekiyor.
Önerilen en güvenli ölçü : 744 En x 410 Boy, hem Windows hem de Mac'te tam görüntü için: 748 En x 410 Boy.
"Yok ben sadece 1024 x 768 çözünürlükte görüntülenecek sayfa yapmak istiyorum" diyorsanız, o zaman seçmeniz gereken çalışma alanları şöyle olmalıdır.
Önerilen en güvenli ölçü : 968 en x 578 boy, hem Windows hem de Mac'te tam görüntü için : 972 en x 578 boy, Sadece Windows'ta tam görüntü için : 1000 en x 578 boy.
Tabi ki çözünürlüğe ve pencere boyutuna göre enlemesine açılıp kapanan esenek tablolarla görüntü sorununu bir derecede halletmek mümkün. Ancak bu sorunu tam anlamıyla çözmüyor. Sayfanızın grafik tasarımında yine de yukarıda verilen ölçüleri göz önüne almanız lazım.
Püf Noktası: Dreamweaver ile çalışırken sayfanın alt sağ köşesinde sayfa ölçüsünü gösteren bir menü vardır. Bu menü farklı çözünürlüklere göre çalışabileceğiniz maksimum alan ölçüsünü gösterir. (Örneğin, 760 x 420 (800 x 600 maximazed) gibi.) Bu menüden ölçüyü değiştirdiğimizde Dreamweaver penceresi enlemesine ve boylamasına açılıp kapanarak size sayfanızın farklı çözünürlükte nasıl görüntüleneceğini gösterir. Unutmamanız gereken şey, Dreamwevaer'ın size çalışabileceğiniz "ideal alanı" değil "Maksimum alanı" gösterior olmasıdır. Yani yukarıda verdiğimiz değerler yine de daha güvenlidir.
Kaynak :MacLine
-
- Benzer Konular
- Cevaplar
- Görüntüleme
- Son mesaj
Kimler çevrimiçi
Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 0 misafir