Epey zamandır dribbble.com‘ un popüler sayfasını takip ediyorum. Web ile ilgili olan tasarımlar tabii ki özel ilgi alanıma giriyor. Geçtiğimiz günlerde buraya hangi konular ile ilgili yazılar yazsam mı düşünürken, beğendiğim tasarımları html+css gerekiyorsa js sinide yazıp paylaşmak aklıma geldi. Öyle nasıl yapılır vb.. konulara çok girmeyi de düşünmüyorum. Maksat muhabbet olsun.
İlk olarak şurada ki profil kart tasarımını çevirdim. Aşağıda örneğin demosuna bakabilir ve indirebilirsiniz.
Repeater asp.net aleminin bana göre en delikanlı kontrolüdür. Kafasından hiç bir şey yapmaz, biz ne dersek onu yapar. Bu sebepten dolayı veriyle ilgili kontrollerin en az özelliklisidir, hatta özelliği yoktur bile :) Madem hiç bir özelliği yok neden var bu kontrol ? Hemen anlatayım.
Repeater’ ın abisi olan DataList bir çok güzel özelliği üzerinde barındıran bir kontroldür. GridView ise bu iki kontrolden farklı bir mantıkta çalışır bu sebepten ötürü kulvarları çok farklıdır. GridView veriyi satır satır (row) ekrana basar, DataList ve Repeater ise eleman elaman (item) basar. GridView’ da DataList’ de veriyi ekrana basarken kendi html şablonunu kullanır, Repeater ise hiç bir şablonu kullanmaz, etiketsiz, biçimsiz bir veri ekrana basar. Şöyleki, sanki bir döngü yazdınız ve veritabanından gelen saf veriyi ekrana bastınız. Bunun neresi güzel diye sorabilirsiniz. İstediğiniz gibi şekillendirebilirsiniz, kendiniz şekillendireceğiniz için w3 kurallarına uygun ve arama motorlarının sevdiği cinsten bir tasarım yapabilirsiniz. Burada şöyle bir durum da var, DataList ile 5 dakikada yapacağınız bir işi Repeater’ la 25 dakikada yaparsınız. Arada ki fark ise birinde kurallara uygun bir tasarım ve tamamen kontrolü sizde olan bir tasarım, diğerinde ise kuralsız ve zaman zaman kontrolün sizde olmadığı bir tasarım. Bu sebepten dolayı, sitelerin kullanıcı arayüzünde Repeater, yönetici kısmında ise DataList kullanmak gerekiyor diye düşünüyorum. Okumaya devam et Repeater ile çalışmak
Nasıl başlık ama :) Geçenlerde bir rapor ekranında ay aralıklarına göre işlem yaptırmam gerekiyordu. İki tane takvim koyup, kullanıcıya istediğin aralığı seç demek istemedim, çünkü erişebilirlilik adına hoş olmayan bir durum ortaya çıkıyor. Aradım taradım ayların aralığını seçmek için bir mekanızma bulamadım. Madem öyle dedim kendim yapayım. Bize lazım olanlar jQuery, jQuery Ui ve Ui ile birlikte gelen slider. Yapmak istediğimiz şey hemen aşağıda ki fotoğrafta gördüğünüz mekanızma. Kullanıcı tarih aralıklarını basit bir şekilde belirtiyor ve alacağımız raporu ona göre filtreliyoruz.
Basit bir açılır menü (drop down) nasıl yapılır, mantığı nasıldır bunu anlatmaya çalışacağım. Bu örnekteki açılır menü, üzerine tıklandığında açılıyor, basit bir değişiklikle üzerine gelindiğinde de açılmasını sağlayabilirsiniz.
Hemen html ve css kodlarımıza bir bakalım.
<style type="text/css">
body{font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;background-color:#3c3c3c;}
h1{
text-shadow:0 1px 1px #575656;
font-size:50px;
color:#d1d1d1;
margin:0
}
.container{width:500px;}
.dd{
border:1px solid #575656;
padding:5px;
background:#e9e9e9 url('images/arrow.png') top right no-repeat;
color:#4d4d4d;
cursor:pointer;
font-weight:bold;
}
.dd:hover{color:Black;}
.dd ul{
position:relative;
background-color:#e9e9e9;
list-style:none;
margin:5px;
padding:0;
display:none;
font-weight:normal;
}
.dd ul li{border-bottom:1px solid #c0c0c0;font-size:14px}
.dd ul li a{color:#4d4d4d;text-decoration:none;display:block;padding:5px;}
.dd ul li:last-child{border-bottom:none}
.dd ul li:hover{background-color:#c0c0c0;border-bottom:1px solid #a8a8a8}
</style>
<div class="container">
<div class="dd">
Select item
<ul>
<li><a href="#">İtem 1</a></li>
<li><a href="#">İtem 2</a></li>
<li><a href="#">İtem 3</a></li>
<li><a href="#">İtem 4</a></li>
<li><a href="#">İtem 5</a></li>
</ul>
</div>
</div>
Yaz geldi, okullar da bitti, bundan istifade etmek isteyen genç arkadaşlar, yeni maceralara yelken açmak istiyorlar. Ne rahatsız bir giriş cümlesi oldu bu ya, başlık da güzel olmadı zaten :S Son zamanlarda asp.net nasıl öğrenebilirim, css nasıl örğenebilirim, php nasıl öğrenebilirim gibisinden sayısız şey görüyorum. İnsanlar da cevap veriyor, o siteye bak bu siteye bak, şu kitabı al vs.. Esasında bu arkadaşların öğrenmeleri gereken şey bence dinamik bir web sayfasını oluşturan temellerin neler olduğu. Adam php öğrenmeye başlıyor sonra bakıyor ki javascript diye bir şey de varmış ya da bakıyor ki arkadaş tasarım için css, html vs.. şeyler de varmış, aklı gidiyor ve her şeyden bir anda soğuyor ki bu gayet normal. Halbuki yapıyı kabaca bilse kendine yakın gördüğü kısımdan başlayabilir ve en azından karşısına zart çıkan x bir şeyi gördüğünde şaşırmaz. Okumaya devam et Web işine nasıl başlamalıyım ?
Daha dün hiç bir şey yazmayacağım diyordum bugün yazıyorum, elimde değil dayanamıyorum. Geçenlerde bir projede kullanmak üzere kendimce css ile web 2.0 butonlar hazırlamıştım. Tasarımdan çok fazla anlamadığımı her seferinde dile getiriyorum ama inanıyorum ki bu butonlar birilerinin işine yaracaktır. Dosyaların içerisinde .psd dosyası da bulunuyor, css kodlarıyla da oynayarak istediğiniz gibi şekillendirebilirsiniz.
