Hüseyin Berberoğlu'nun web günlüğü » Web Tasarım http://www.birazkisisel.com Wordpress Hacker / Web Developer Sun, 27 Jun 2010 20:23:01 +0000 en hourly 1 http://wordpress.org/?v=3.0 Kullanılabilir Giriş Formları Yapın http://www.birazkisisel.com/kullanilabilir-giris-formlari-yapin/ http://www.birazkisisel.com/kullanilabilir-giris-formlari-yapin/#comments Wed, 10 Jun 2009 14:31:34 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/?p=574 Giriş formlarını tab ile kullanılabilecek şekilde tasarlayın. Kullanılabilirliği en üst seviyede tutmak istiyorsanız size önerim alanları şu şekilde yerleştirmeniz;

  1. Kullanıcı adı
  2. Şifre
  3. Beni hatırla
  4. Giriş
  5. Şifre hatırlat

Bunları alt alta koyun ve tab tuşuna basıldığında bu sırada ilerlensin.

Aslında genelde yapılan da bu ancak Twitter’a giriş yapmaya çalışırken aşağıdaki gibi bir giriş formu ile karşılaştım ve bu konuya değinmek istedim.

twitter-login

Bu formu Twitter’a gidip yanlış kullanıcı adı ve şifre ile giriş yapmaya çalışarak görebilirsiniz.

Buradaki sorun araya “Forgot?” linkinin girmesi ve şifre yazdıktan sonra tab tuşuna bastığımızda o linkin seçilmesi. Bu bence büyük bir kullanılabilirlik sorunu, kullanılabilir bir formda 3 tabda ya “beni hatırla” ya da “giriş” olmalı.

Giriş yaparken 3′ten fazla tab tuşuna basmak bir kullanılabilirlik sorunudur. Yanılıyor muyum?

]]> http://www.birazkisisel.com/kullanilabilir-giris-formlari-yapin/feed/ 9 Web Geliştiriciler İçin Yazılar http://www.birazkisisel.com/web-gelistiriciler-icin-yazilar/ http://www.birazkisisel.com/web-gelistiriciler-icin-yazilar/#comments Fri, 27 Mar 2009 08:36:35 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/?p=460 Web geliştirme ile uğraşanlar için şimdiye kadar yazdığım yazılardan oluşan bir derleme;

]]> http://www.birazkisisel.com/web-gelistiriciler-icin-yazilar/feed/ 2 CSS öğrenmek mi istiyorsunuz ? Bu kitap tam size göre ! http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/ http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/#comments Tue, 26 Feb 2008 22:31:21 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/ CSS kitabıBir süredir takip ettiğim birisi olan Fatih Hayrioğlu tüm css makalelerini derleyerek bir e-kitap çıkardı ! Bu projesini zaten uzun zamandır biliyorduk, gerçekleşmesinden dolayı sevindim. CSS’e Başlangıç kitabını indirmek istiyorsanız sizi buraya alalım..

Fatih Hayrioğlu’nun css makaleleri gerçekten çok faydalı, kitabı da eminim öyledir. CSS öğrenmek isteyenlere tavsiye ederim…

]]> http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/feed/ 3 Nifty Corners Cube – CSS ile resimsiz yuvarlak köşeli kutular http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/ http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/#comments Sun, 13 Jan 2008 22:37:27 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/ Nifty Corners Cube ile hiç resim kullanmadan sitelerde kullandığınız kutucukların köşelerini yuvarlak yapabilirsiniz. İlk gördüğümde çok sevmiştim.. Resim kullarak yuvarlak köşeler yapmak zahmetli bir iş.. Nifty Corners Cube ile bu iş çok basit.. Nasıl yapılacağı yazının devamında..

Resimsiz yuvarlak köşeler oluşturabilmek için üç şeye ihtiyacımız var;

  • niftycornerscube.js dosyası
  • niftycorners.css dosyası
  • nifty cornerı çağıracak olan javascript kodumuz..

Dosyaları buradan indirebilirsiniz. Dosyaları indirip sayfanızın bulunduğu klasöre açınız. Daha sonra html kodlarındaki <head> ile </head> arasında şu kodu yapıştırın;

<script type="text/javascript" src="niftycube.js"></script>

Sonra body bölümünüzde şu kodlar ile kutu oluşturun;

<div id="box">
<h1>Nifty Corners Cube™</h1>
<p>One call. Two parameters. Three sizes.</p>
</div>

Kutumuzun id’si box oldu.. Bu kutudaki öğelerin stillerini de head bölümüne yerleştireceğimiz şu kodlarla verelim

<style type="text/css">
body{padding: 30px 0 0;background:#FFF;font: 100.01%/1.3 Verdana,Arial,sans-serif;text-align:center}
div#box{width: 18em;padding: 20px;margin:0 auto;background:#E6E6E6;color:#000}
h1{font: lighter 200% "Trebuchet MS",Arial sans-serif;color: #208BE1}
h1,p{margin:0;padding:10px 20px}
</style>

Bu son eklediğimiz kod tamamen size kalmış, istediğiniz gibi değiştirebilirsiniz. Oluşturduğumuz “box” idli kutunun içindeki öğelerin stilini bu kod ile belirledik. Şimdi sırada bu kutunun kenarlarnı yuvarlak yapmaya geldi… Bunu da head kısmına ekleyeceiğimiz şu kod ile yapıyoruz.

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

bu kodda bulunan “div#box” box idsine sahip div’i köşeli yap diyor… Bu örnek indirdiğiniz zip dosyasının içinde bulunan örneklerden birincisi.. Dosyanın içinde daha değişik örneklerde mevcut.. Onları da incelemenizi tavsiye ederim..

]]> http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/feed/ 10