Bir Web Tasarımcısı Günlüğü

Çünkü;

• 5dkk lık basit bir iş olarak görüyorsun
• Sabırlı değilsin
• Enerjin yok
• Fazla duygusal ve alıngansın
• Yaptığın işe güvenmiyorsun
• Tek amacın para kazanmak
• Harcamadan kazanacağına inanıyorsun
• w3.org, section 508 ve erişebilirlik sana birşey ifade etmiyor
• Günlük işlerinde hala “Internet Explorer 6″ kullanıyorsun
• Bilgisayar başında vakit geçirmekten sıkılıyorsun
• E-ticarete güvenmiyorsun, hiç kullanmadın

Eğer bu maddelerden bir tanesine dahi evet diyebiliyorsan ya web tasarımı yapmaya son vermelisin yada artık işini ciddiye almalısın.

Yanılıyorsam yada unuttuğum birşeyler varsa siz düzeltin lütfen.

Yapılan değişiklikler:

• Görsel tasarım değiştirildi
• AJAX kütüphanesi olarak kullanılan “ASPNET ATLAS” kullanımından vazgeçildi.
• AJAX kullanımı için yeni script yazıldı
• URL Mapping için gerekli olan “.aspx” dosya uzantısı gerekliliği kaldırıldı
• Yeni 36 tabanında URL Id’leri için Id üretici sınıf yazıldı.
• Eski Id’lerin geçerliliğini koruması ve veri kaybını önlemek için çalışma yapıldı

Şimdilik yapılan değişiklikler bukadar fakat hazırlamaya başladığım üyelik altyapısı ile daha kullanışlı hale getirmeyi planlıyorum.

http://www.kolayurl.com/

Önceki yazılarımda Jakob Nielsen’in web tasarımında yapılan 10 hata adlı listesinden bahsetmiştim. Jakob Nielsen’in bu yazısından sonraTürkiye’de genel olarak web tasarımında ne gibi hatalar yapıyoruz diye kendime bir liste oluşturdum. Tamamen kendi görüşlerim olan bu listede yazanlara katılabilirsiniz veya kendi görüşlerinizi iletebilirsiniz, belkide bu sayede Türkiye’de web tasarımı yapan insanlara görüşleriniz ve önerilerinizle yardımcı olmuş olursunuz.

Türkiye’de web tasarımında en çok yapılan 10 hata:

1-) Sitenin görsel şablonunu tablolu tasarım yöntemi ile hazırlamak.
2-) Siteye girişlerde kullanılan animasyonlu ön sayfalarda animasyonu geçmek için seçenek sunmamak veya bu seçeneği akılda tutmamak.
3-) Optimize edilmemiş yüksek boyutlu resimler kullanmak.
4-) PDF, word dosyası gibi bağlantıları internet tarayıcısı içinde açmaya çalışmak.
5-) CSS kodlarını yazarken internet tarayıcıları arasındaki farklara dikkat etmemek
6-) Açılır (rollower) Flash nesneleri siteye giriş yapılan veya kullanıcıdan bilgi alınan alanların üstüne gelecek şekilde kullanmak.
7-) Site içinde kullanılan imajlarda “alt” değerini kullanmamak veya boş bırakmak.
8-) Flash ile yapılmış sitelerde Flash içinde kullanılan yüksek boyutlu resim, ses ve videoları harici dosyalardan okutmamak.
9-) Sayfa başlıklarını tüm sayfalarda aynı kullanmak.
10-) Site içi bağlantıları yeni pencerelerde açmak.

Bazı durumlarda mesaj alanlarına yazılacak yazılar için girilen harf miktarını saymak ve bu rakamı görsel olarak kullanıcıya iletmek isteyebiliriz. Aşağıdaki kod örneği mesaj alanlarınıza girilen harf miktarını sayarak kullanıcıya iletmenizi sağlayacaktır.

Devamı »

Web sayfalarımızda çoğu zaman checkboxlar ile seçilmesi istenen listeler kullanırız, aşağıda checkbox listelerinin başında yer alan “Hepsini seç” ve “Temizle” fonksiyonlarının bir örneğini görebilirsiniz.

Devamı »

Katlanır menüler menüdeki öğeleri gizlemek ve görüntü kirliliğinden kurtulmak için çok iyi bir seçimdir. Bugünkü yazımda JavaScript ve CSS yardımıyla tablosuz (tableless) katlanır menü nasıl yapabiliriz ondan bahsetmek istiyorum.

Hazırlayacağımız katlanır menü aşağıdaki resimlere benzeyecek.

Bayram ve yılbaşı hediyesi olarak kabul edersiniz inşallah :)

Tablosuz (Tableless) katlanır menümüzü hazırlamak için öncelikle en çok kullandığımız HTML düzenleyicimizi açıyoruz ve daha sonra aşağıdaki kod bloklarını bir bir eklemeye başlıyoruz.

Devamı »

Bugün son zamanlar da oldukça ilgi gören tablosuz tasarımdan çok teknik konulara inmeden bahsetmek istiyorum.

Tablosuz Tasarım Nedir?

Tablosuz tasarım adından da kolayca anlaşılacağı gibi, web sayfalarımızı tasarlarken tablolu yerleşim planını terkedip, HTML 2.0′dan sonraki versiyonlarda desteklenmeye başlanan bölümlü yada bölmeli diyebileceğimiz yerleşim planına geçmemiz ve sayfalarımıza CSS ile stil vermemiz anlamına geliyor.

Tablosuz Tasarım İçin Nelere Yapmalıyız?

Öncelikle “CSS” yani “Cascading Style Sheets” (Stil şablonları: http://tr.wikipedia.org/wiki/CSS) kullanımı hakkında daha fazla bilgi edinmeliyiz. CSS hakkında daha fazla teknik bilgi edinmek için http://www.w3.org/Style/CSS/ adresini ziyaret edebilirsiniz. Evet CSS ile ilgili yeterli deneyime ve bilgiye sahipsek tablosuz tasarım yapmamamız için bir neden yok.

Web sayfalarımızın yerleşim planını <table><tr><td></td></tr></table> etiketleri yerine <div></div> etiketleri ile planlayıp CSS yardımıylada stil vermeliyiz.

Tablosuz yerleşim planı hakkında daha detaylı bilgi almak için http://www.w3.org/2002/03/csslayout-howto, http://www.andybudd.com/@media2005/ ve http://www.thenoodleincident.com/
tutorials/box_lesson/boxes.html adreslerindeki örneklere bakabilirsiniz.
Devamı »

Merhaba, bugün blog’umun istatistiklerini incelerken arama motorlarından kayan döviz bandı diye aramalar geldiğini gördüm. Kayan döviz bandları bir çok haber sitesinde gördüğümüz, haber sitelerinin, ekonomi sitelerinin ve portalların vazgeçilmez unsurlarından biri olmuştur. Bugünkü yazımda “C#” ile kayan bir döviz bandı nasıl yapabiliriz ondan bahsetmek istiyorum.

Öncelikle kayan bandımızı HTML olarak tasarlayalım.

<marquee>
<div id="DovizBandi">
  <p><strong>Amerikan Doları:</strong>
  <span class="tip">Döviz Alış</span>
  &nbsp;-&nbsp;
  <span>1,2YTL_</span>
  &nbsp;||&nbsp;
  <span class="tip">Döviz Satış:</span>
  &nbsp;-&nbsp;
  <span>1,2YTL_ </span>
  &nbsp;||&nbsp;
  <span class="tip">Efektif Alış:</span>
  &nbsp;-&nbsp;
  <span>1,2YTL_ </span>
  &nbsp;||&nbsp;
  <span class="tip">Efektif Satış:</span>
  &nbsp;-&nbsp;
  <span>1,2YTL_</span></p>
</div>
</marquee>

Devamı »

Ağaç menüler (tree menu) web sitelerinde bağlantıları kategorize edebilmek ve anlaşılması kolay hale getirebilmek için oldukça kullanışlıdırlar. Bugünkü yazımda C# ile XML tabanlı ağaç menü nasıl yapabiliriz ondan bahsetmek istiyorum.

Menümüze ait taslak görünümü HTML olarak hazırlayalım

<div id="MenuContainer">
<ul id="XmlTreeMenu">
<li><a href="#">Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a></li>
<li><a href="#">Alt Nesne 2</a></li>
<li><a href="#">Alt Nesne 3</a></li></ul></li>
<li><a href="#">Nesne 2</a><ul>
<li><a href="#">Alt Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a><ul>
<li><a href="#">Alt Nesne 1</a></li></ul></li>
<li><a href="#">Alt Nesne 2</a></li></ul></li></ul></li>
<li><a href="#">Nesne 3</a></li></ul>
</div>

Devamı »

Web sitelerinin vazgeçilmez unsuru olan menüler, web tasarımcılarının en çok zaman harcadıkları yerlerden biridir. Bugünkü yazımda “.Net Framework 2.0” platformunda “C#” dili ile basit ve kullanışlı bir tab menü nasıl oluşturabiliriz ondan bahsetmek istiyorum.

Önce Menümüzü HTML Olarak Kodlayalım

<div id="MenuContainer">
<ul id="XmlMenu">
<li><a href="#">Nesne 1</a></li>
<li><a href="#">Nesne 2</a></li>
<li><a href="#">Nesne 3</a></li>
<li><a href="#">Nesne 4</a></li>
<li><a href="#">Nesne 5</a></li>
</ul>
</div>

Devamı »