tarihinde Fatih Hayrioğlu

Web Sitesi Hakkında Bilgi ve İçerik Toplama Süreci - Tasarım Süreci - HTML/CSS/JS Süreci - Programlama Süreci - Test ve Yayına Alma Süreci

Genel bir web sitesinin oluşum aşamaları genel hatları ile yukarıdaki gibidir.

Bir web sitesinin evrelerinden birisi; Tasarımı bitmiş web sitesinin Arayüz geliştiriyiciye (HTML-ci) teslim etmesidir. İyi bir web sitesi çıkarmak için çok iyi bir ekibe sahip olmak gerektiğini çeşitli platformlarda değinmiştim. Bu ekipte en çok iletişimde olması gereken iki kişi veya iki bölüm tasarım ve arayüz geliştiricileri arasında olmalıdır. Tasarımcı ve arayüz geliştirici arasındaki iletişimin sağlam olması projenin sağlığı açısından önemlidir. Hadi programcılarıda kızdırmayalım onlarda olmazsa olmaz.

Bir arayüz geliştirici olarak tasarımcıdan beklentilerimiz var tabiki. Aynı şekilde Tasarımcının ve programcının da çeşitli beklentileri olabilir. Ancak ben burada kendi açımdan bakarak bir tasarımcıdan beklentilerimin ne olduğunu yazacağım.

Kaynak Dosyaları

  • Tasarımı çıkmış sayfaların eksiksiz kaynak dosyaları(psd veya katmanlı png) bu kaynak dosyalarının temiz ve düzenli olması önemle rica olunur
  • Kullanılan yazı tipleri
  • Renk paleti
  • Favori ikon
  • Sitenin yapısına göre sitedeki buton tipleri, kullanılacak ikonlar vb. yapılarda beklenenler listesine girer.

Site Şablonları ve Yerleşim

Web sitelerinin belli sayfalarını tasarlayan tasarımcıdan tüm sitedeki alanların bir özeti olan şablonlar hazırlamalıdır. Genel bir web sitesi şablonunda Metinlerin rengi, boyutları, listeler, form alanları, resimlerin durumu ve konumunu göstermelidir.

Ayrıca site içinde flash olacak kısımları belirlemelidir. Flash olacak kısımları Flash geliştirici ile koordineli olarak Arayüz geliştirici siteye eklemelidir.

Etkileşimli Alanların Farklı Durumları

Sitedeki etkileşimli alanları kullanıcı hareketine göre aldığı farklı durumlar için hazırlanmış ise. Örneğin butonları :hover halleri, forum elemanlarına odaklanma durumları vb. yapıların her durumunu gösteren görseller

  • :hover
  • :focus
  • :active

halleri

Genel Beklentiler

Arayüz Geliştiricileri olarak bizlerin en büyük sorunları farklı tarayıcılar için kod yazmaktır. Buradaki en büyük sorunumuz tabi ki İnternet Explorer 6 ve sorunlarıdır. İnternet Explorer 6’nın kısıtladığı özellikler düşünülerek tasarımcılardan bazı beklentilerimiz olacaktır. Tasarımcı tasarımını yaparken bazı kısıtlamalar ve zorluklarımız olduğunu bilirse yapılan tasarımın html çevrilmesi aşamasında o kadar az fark olur(HTML-ci sabunlama gereği duymaz) Örneğin yapılan bir tasarımda renk geçişi olan bir alan üzerine konulan gölgeli alanlar arayüz geliştiriciyi zorlayacak eylemlerdir. Ayrıca birbiri üzerine çok fazla binen kısımların olması bizleri zorlar, z-index problemleri ile uğraşmamıza neden olur.

Sonuç

Ekip arasındaki iletişim sağlam olması bir çok sorunu çözecektir ve birlikte çalışma süreleride bu listeyi azaltacak etkenlerden birisidir. Benim listem bu kadar sizlerde bişeyler eklemek isterseniz aşağıdaki yorum kutusuna yazın.

Kalın sağlıcakla

tarihinde Fatih Hayrioğlu

Genelde menülerde kullanılan bir durumdur bu. Menü öğelerini ayırmak için araya çizilen çizgilerin iki farklı renkte olması durumunda nasıl bir çözüm üretmek gerektiğine dair bir ipucu. Bazen resim olarak kullanıyorum, ama bazende soldaki öğenin sağ kenar çizgisine bir renk, sağdaki öğenin sol kenar çizgisine farklı bir renk atayarak çözüm üretmeyi deniyorum.

.clearfix:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.clearfix{
	display: inline-block;
}

* html .clearfix{
	height: 1%;
}

.clearfix{
	display: block;
}

ul{
	background-color: #008bc6;
	margin: 0 auto;
	padding: 10px;
	width: 450px;
}

ul li{
	border-left: 1px solid #05a3e6;
	border-right: 1px solid #046e9b;
	float: left;
	list-style: none;
}

ul li a{
	color: #fff;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-right: 10px;
	padding: 0 10px;
	text-decoration: none;
}

HTML

<ul class="clearfix">
   <li><a href="">Bak postacı</a></li>
    <li><a href="">geliyor</a></li>
    <li><a href="">selam veriyor</a></li>
    <li><a href="">her kes ona bakıyor</a></li>
</ul>

Örneği görmek için tıklayınız.

İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.

ul li.ilkOge{
	border-left:0;
}

ul li.sonOge{
	border-right:0;
}

Örneği görmek için tıklayınız.

Bu uygulamayı dikey menü olarakta yapabiliriz.

ul{
	background-color: #008bc6;
	margin: 0 auto;
	padding: 10px;
	width: 200px;
}

ul li{
	border-bottom: 1px solid #05a3e6;
	border-top: 1px solid #046e9b;
	list-style: none;
}

ul li.ilkOge{
	border-top: 0;
}

ul li.sonOge{
	border-bottom: 0;
}

ul li a{
	color: #fff;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-right: 10px;
	padding: 10px 0;
	text-decoration: none;
}

Örneği görmek için tıklayınız.

Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.

HTML kodu

<a href="">
	+ <span>Çizgili buton</span>
</a>

CSS kodu

a{
	background-color:#ed145b;
	padding:5px 10px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	font-size:16px;
}

a span{
	border-left:2px groove rgba(144, 71, 95, 0.55);
	display:inline-block;
	padding-left:6px
}

Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.

Örneği görmek için tıklayınız.

tarihinde Fatih Hayrioğlu

Butonlar web sitelerinin oluşturan önemli öğelerden biridir. Butonlar; formlardaki eylemin son noktasıdır veya bir eylemi çağırmak için kullanılan bir öğedir. Butonlar bir bağlantı çeşidi gibi düşünülsede aslında bağlantılardan farklı yapılardır. Bağlantılar site içinde dolaşmayı sağlayan yapılardır(örneğin menü gibi), butonlar ise bir eylemi gerçekleştirmek için kullanılan bir öğedir.(örnek: formun gönder butonu)

Butonların önemine binaen her yönü ile düşünülüp karar verilmesi gereken öğelerdir. Boyutu, konumu, halleri, görünüm gibi bir çok faktör düşünülerek tasarlanır ve uygulamaya geçirilir. Ben burada tasarımsal kısmına değinmeden kodlama kısmını ilgilendiren bölümlerine değinmeye çalışacağım.

Basit Butonlar

<button> ve <input type=”button” /> html elemanları w3c tarafından standartlaştırılmış buton elemanlarıdır, bu elemanlar butonların ne kadar önemli öğeler olduğunun göstergesidir. 

Her ne kadar bu etiketler ile standartlaştırılsa da biz bu etiketlere bağlı kalmak zorunda değiliz. Genelde butonlar <a href=””>Gönder</a> şeklinde kullanırız.

<button> ve <input type=”button” /> kullanımlarında html bizim için bir buton görünüm oluşturur, ancak burada şöyle bir sorun varki farklı tarayıcı ve işletim sistemlerinde farklı farklı göründüğü için css ile ortak bir kod yazmak genelde tercih edilir. 

Butonların Halleri

Butonların kullanıcı hareketine göre çeşitli halleri vardır. Aktif buton, fare üzerine geldiğindeki hali(:hover), odaklanma durumundaki hali(:focus) olmak üzere 3 hali vardır. İyi bir tasarım için butonların tüm hallerini kullanıcıya hissettirecek ufak farklılıklar tasarımsal olarak hazırlamalıdır.

:active Butonun aktif hali :hover Butonun fare üzerine geldiğindeki hali :focus Buton üzerine odaklanmış hali

Basit butona bir örnek yapalım;

CSS ile Erişilebilir Formlar Yapmak – I kullandığım butonu örnek olarak alabiliriz basit butonlara

HTML kodu

<input type="submit" class="gonder" value="Gönder" />

CSS kodu

input.gonder{
    color: #224059;
    background-color: #b5c9e2;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
    font:bold 12px Arial, Helvetica, sans-serif;
}

<input type=”submit” /> yerine genelde <button> elemanını tercih ediyorum. Yukarıdaki örnekte olduğu gibi <input type=”submit” /> kullanımıda doğrudur, ancak form elemanlarında bir çok <input> olduğu zaman butona erişmek zor oluyor ek olarak bir sınıf tanımlamak gerekiyor, <button> tanımına ise daha kolay erişebiliyoruz. 

3 boyutlu buton oluşturmak

Bir iki ufak nüansla butonlarımıza 3 boyutlu bir görünüm kazandırabiliriz. Buradaki örneğimizde biz bunu bir bağlantı(<a>) ve içine <span> elemanı ekleyerek sağlayacağız. Üst ve sol kenar çizgileri açık renkli alt ve sağ kenar çizgileri daha kapalı renkli atamalar yaparız. Ayrıca bağlantı içindeki <span> etiketinin alt ve sağ kenar çizgilerinede daha kapalı renkli bir atama yaparak 3 boyutlu bir buton elde ederiz. Fare üzerinde geldiğinde kenar çizgilerine atadığımız renk değerlerini karşılıklı olarak değiştirerek daha bir efektli görünüm elde ederiz.

HTML Kodu

 <a class="buton" href="#">
	<span>3 boyutlu buton</span>
</a>

CSS kodumuzu yukarıdaki belirttiğimiz gib yazalım

a.buton{
    float:left;
    font-size:14px;
    font-weight:bold;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    color:#333;
    width:auto;
    text-decoration:none
}

a.buton:hover{
    border-top:1px solid #333;
    border-left:1px solid #333;
    border-right:1px solid #999;
    border-bottom:1px solid #999;
    color:#333;
}

a.buton span{
    background:#d4d0c8 url(buton_ard.gif) repeat-x;
    float:left;
    line-height:24px;
    height:24px;
    padding:0 10px;
    border-right:1px solid #777;
    border-bottom:1px solid #777;
}

a.buton:hover span{
    border:none;
    border-top:1px solid #777;
    border-left:1px solid #777;
    background:#d4d0c8 url(buton_fare_ard.gif) repeat-x;
    cursor:pointer;
}

Örneği görmek için tıklayınız.

Görselliği Arttırılmış Esnek Yapılı Butonlar

Butonların önemine yukarıda değindik, bu öneminden dolayı bir çok tasarımcı ve arayüz geliştirici butonları nasıl daha hoş ve çekici yapacağı konusunda çalışmış ve güzel örnekler çıkarmışlardır. 

Yukarıdaki görünen butonun kodunu yazalım. Butonu kodlarken dikkat edeceğimiz bir kaç husus var;

  • Buton farklı alanlarda kullanılabileceği için genişleyebilir olmalıdır
  • Kullanışlı olması için az kodlama ile sonuca gidilmelidir
  • Hızlı yorumlandırılmalıdır. Bunun için tek resimden oluşturacağız örneğimizi
  • Belli başlı tarayıcılarda çalışmalıdır. (ff, chrome, safari, opera, ie6, ie7, ie8)
  • Javascript gerektirmemelidir

Yukarıda görüldüğü gibi resmimizi iki kısma böleceğiz. Sol kısmını bir elemana(muhtemlen <a>), sağ kısmını başka bir elemana(fazladan bir elman olarak <span>) ekleyeceğiz. Bir elemana birden fazla background resmi atayamadığımız için bu yöntemi uyguluyoruz.

Resmin sol kısmını butonun muhtemelen yüksek genişliğini düşünerek uzatmalıyız. Böylece buton metin genişledikçe backgorund resmi uzayacaktır ve görünüm bozulmadan standart buton görünümü sağlanmış olacaktır.

Yukarıdaki resimde bölümleri göstermek için rakamlar gösterilmiştir. Normalde resmimiz aşağıdaki gibi olacaktır.

Yukarıdaki resmi eskiden iki farklı resim olarak hazırlar ve ilgili elemanların background resmi olarak eklerdik, ancak sprite tekniği ile bu resmi tek bir resim olarak kaydediyoruz ve background-position özelliği yardımı ile ilgili elemanın background’unda ilgili background resmini gösteriyoruz. Kodu yazarsak daha iyi anlayacaksınız.

HTML kodu;

<a href="#"><span>Örnek Buton Metni</span></a>

CSS Kodu

a{
	display:block; 
	float:left; 
	width:auto; 
	background:url(cancanli_butonlar_normal.gif) 0 0 no-repeat; 
	text-decoration:none; 
	font-size:14px; 
	font-weight:bold
}

a span{
	display:block; 
	float:left; 
	cursor:pointer; 
	background:url(cancanli_butonlar_normal.gif) right -36px no-repeat; 
	height:28px; 
	padding:0 20px; 
	line-height:28px; 
	color:#363636
}

a span için eklenen

float:left; 
cursor:pointer;

özellikleri ie6’daki genişlik sorununu gidermek için eklenmiştir.

Bu örneğe fare üzerine geldiğindeki halinide ekleyelim

/* fare geldi kac */
a:hover{
	background:url(cancanli_butonlar_ard.gif) 0 -68px no-repeat;
}

a:hover span{
	background:url(cancanli_butonlar_ard.gif) right -100px no-repeat; 
	color:#706e6e
}

Son olarakta odaklanma halini ekleyerek bu örneği bitirelim.

/* buraya odaklan odaklan */
a:focus{
	background:url(cancanli_butonlar_ard.gif) 0 -134px no-repeat;
}

a:focus span{
	background:url(cancanli_butonlar_ard.gif) right -164px no-repeat; 
	color:#363636
}

Örneği görmek için tıklayınız.

CSS3 ile Buton Yapmak

CSS3’ün gelişmiş özellikleri sayesinde resimlere ihtiyaç duymadan janjanlı güzel butonlar geliştirebiliyoruz. Ayrıca bu işi çok kolay bir şekilde bir iki satır kod ile yapabilme imkanı sağlıyor CSS3 bize. 

HTML kodu

<a href="#" class="buton">CSS3 Buton</a>

Evet html kodummuz bu kadar.

CSS Kodlarını yazalım

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 14px Arial, Helvetica, sans-serif;
}

Şimdide CSS3 özellikleri ile bu örneğimizi geliştirelim.

İlk olarak köşeleri yuvarlatıyoruz.

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 14px Arial, Helvetica, sans-serif;
    border-radius: 7px;
}

Gölge verelim

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 20px Arial, Helvetica, sans-serif;
    border-radius: 7px;
    box-shadow: 3px 3px 4px #000;
}

Metine gölge verelim

a.buton{
    background:#2981E4;
    padding:5px 10px;
    text-decoration:none;
    color:#fff;
    font:bold 20px Arial, Helvetica, sans-serif;
    border-radius: 7px;
    box-shadow: 0 1px 2px #000;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

Şimdide fare üzerine geldiğindeki halinide ekleyelim.

a.buton:hover{
    background-color:#006699;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

İkinci bir örnek yapalım.

Bu sefer CSS3’ün renk geçişi(gradients) özelliğindende yararlanalım.

a.buton{
    background:#d21b00;
    background: linear-gradient(top, #d21b00, #8e0700);
    padding:20px 25px;
    text-decoration:none;
    color:#fff;
    font:bold 36px Arial, Helvetica, sans-serif;
    border-radius: 7px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.75);
    border:5px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

a.buton:hover{
    background: linear-gradient(top, #8e0700, #d21b00);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.75);
}

CSS3 özellikleri yardımı ile resim kullanmadan bir çok örnek yapabiliriz.  http://speckyboy.com/2010/02/15/20-css3-tutorials-and-techiques-for-creating-buttons/ sitesindeki örneklere bir göz atın.

Ayrıca CSS3 ile çevrimiçi buton geliştirme araçları var incelemeye değer siteler.

Sonuç

Baştada bahsettiğimiz gibi butonlar web sitelerinin önemli parçalarından biridir. Yerinde ve güzel kullanılmaları halinde web sitelerine farklı bir görsellik ve işlevsellik katacaklardır. Bir çok sitede bir çok buton tasarımları bulunmaktadır, bu butonları gördükçe ne kadar çeşitli butonlar olabileceğini görüyoruz. http://www.smileycat.com/design_elements/buttons/#002024 sitesindeki örnekler dikkat çekici.

CSS3’ün yaygınlaşması butonları daha esnek hale getirecektir. Daha kolay düzenlenebilir ve esnek bir yapı kazandıracaktır. CSS3 özellikleri yavaş yavaş web programcıların hayatına girmektedir. Ümit ediyoruz ki yakın bir zamanda bu uygulamaları tüm tarayıcılar destekler ve bizlerde projelerimizde rahatça kullanabiliriz.

Son olarak buton dünyası çok büyük ben burada sizlere kıyısından köşesinden bahsetmeye çalıştı isemde çok az bir kısmını anlatabildim, kaynaklar kısmındaki linklerin her birinde değerli çalışmalar bulunmaktadır aşağıdaki bağlantıları incelemenizi önemle rica ediyorum.

Kaynaklar