Arayüz geliştiriciliği kolay bir iş değildir. Bir Web Tasarımcısı olmak kodlamayı, tasarlamayı, düzenlemeyi, planlamayı ve daha bir çok alanı bir arada yürütmeyi becerebilen kişidir. Bu durum da saydığımız bu alanlar içinde usta olmayı gerektirir.
Tasarımın bazı kuralları vardır. Bu kurallar hem geliştiricinin hem de kullanıcının yararına olan çalışmalardır. Aynı zamanda bu kurallar tasarımın suitable yani "satılabilirliğini" gösterir. Gelin bu önemli kuralları hep beraber gözden geçirelim.
1. Kodlamada İşlevsellik
Tasarımın en önemli noktalarından birisi neyi nerede kullanacağımızı tam olarak bilmektir. Örneğin HTML 'de h1 etiketi başlığı içerir, p ise paragrafı siz burada her ikisini de
p veya
h1-
2-
3 gibi etiketler ile tasarlayabilirsiniz. Ancak bu işlem düzene aykırı olur.
2. Tasarımda Tutumluluk
Belki de en çok önemsemediğimiz alan budur. Bir tasarımcı, proje üzerinde gereksiz kod yazılımından kaçınmalıdır.
Tasarımda hangi kodu nerede kullanacağımızı iyi bilmeliyiz. Aksi taktirde 1-2 satır yerine 5-10 satır kodlamalarla tasarımı karmaşık ve düzensiz bir hale getirebiliriz. Örneğin elimizde iki adet kalın yazılmış cümle olsun.
<b>Gokhan</b>
<b>Gokhan</b>
Bu iki kelime sayfada şu şekilde görünecektir:
GokhanGokhan
Peki bu iki kelimeyi birer nesne olarak düşünün. Birinci nesneyi üste çıkarmak için ne yapardınız.
En bilindik şekli ile
float:left; &
width:100%;
Ama kolayca şunu da verebilirdiniz
display:block; ve aynı işlemi yapacaktır.
3. HTML Validate
HTML 'de kodlamanın bir yapısı vardır. Bu yapıya aykırı bir düzende kodlama yapmak yanlıştır. BU yapıyı basitçe ifade etmek gerekirse örneğin bir listeleme(ul-ol) elemanı içerisinde form(input-textarea) elemanı kullanamazsınız. Bu HTML 'in standardına aykırıdır.
Aynı şekilde kodlama yaparken <style> etiketini body tag 'ı içerisinde kullanamazsınız. Bu etiket yalnızca head tag 'ı içerisinde kullanılır.
Bir diğer unsur da etiket kapatırken yaptığımız hatalardır. Örneğin div etiketi içerisinde bir link tanımlayalım ancak o anki esnada şöyle bir yanlış yaptınız.
<div><b>Detaylı Bilgi için: </b><a href="#"> Buraya Tıklayınız... </div></a>
Normalde
div etiketi içinde olması gereken
a etiketi dışarda kaldı. Bu da yanlış bir kodlamadır ve tarayıcılar bu hataları bastırsa da kodlama içeriği düzeltilmelidir. Bu yanlışları önlemenin en kolay yolu da gelişmiş bir
IDE kullanmaktır.
4. Temiz Tasarım
Tasarımda düzen hem bir kodlayıcı için hemde kullanıcı için önemini koruyan bir kavramdır. Bir tasarımın belirli bir düzen ile kodlanması, gerekli yerlerde açıklayıcı alanlar bulunması, kodlamaların gruplar halinde başlangıç ve bitiş etiketlerinin/yorumların bulunması çok önemlidir.
5. Dosyalama
Dosyalama sisteminin düzenli olması js, css, img ve fonts tarzında klasörler ile tasarım dosyalarının düzenlenmesi gerekmektedir. Bir tasarıma ait dosyalar bu düzen içerisinde kolayca erişilebilir olmalıdır.
6. Cross Browser Ayarları
Vee, zurnanın öttüğü yere geldik. Bu kısım bir tasarımcının can alıcı noktasıdır. Web tarayıcıları, örneğin her
CSS özelliğini diğer tarayıcılar ile birlikte desteklemez. Bu şu demek, örneğin siz CSS3 ile gelen yeni bir özelliği
Chrome üzerinde kullanabilirken(transition, animation, Opacity vs.) Explorer 'da kullanamayabilirsiniz. Bu yüzden bir Web sayfasını her tarayıcıda görüntülenebilecek şekilde kodlamalısınız.
Bazı özellikleri her tarayıcıda kullanmanız gerekmeyebilir. Bazı özellikleri de kullanmak istersiniz ve kullanmak için aşağıdaki gibi bir kodlamaya ihtiyaç duyabilirsiniz.
background:linear-gradient(#fff,#eee);
background:-webkit-linear-gradient(#fff,#eee); /* Webkit tabanlı tarayıcılar */
background:-moz-linear-gradient(#fff,#eee); /* Firefox */
background:-o-linear-gradient(#fff,#eee); /* Opera */
background:-ms-linear-gradient(#fff,#eee); /* Internet Explorer */
İşte bu şekilde kodlamaya da "Tarayıcıdan Bağımsız" kodlama diyoruz.
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.