Tasarımda Espri Anlayışı

Bu yazımın başlığı aslında “Espri Hayatın Her Anında Olmalı” şeklindeydi çünkü yazının çıkış noktası bugün gitmiş olduğu doğa ile iç içe bir lokantanın (bahçesinde koyunlar, tavuklar falan var) tuvaletindeki espriydi.

Gördüğünüz gibi basit bir resim bile insanı bir an için gülümsetmeye, hafif de olsa neşelendirmeye yetiyor. Kim tahmin edebilirdi ki erkek için horoz, bayan için tavuk resmi koyulabileceğini. İşte buradan çıktım bende yola ve tasarımlarımızda da bu şekilde ince espriler olmasının ziyaretçilerimiz için neşeli dakikalar anlamına geldiğini hatırlatmak istedim. Tabi böyle söyleyince söz biraz havada kalıyor. Gelin daha somut örneklerle devam edelim.

Nahnu ve Japon İzleyici Kitlesi

Bahsettiğimi espri anlayışını her tasarımında görebileceğiniz bir sitedir Nahnu.Org. Yazarı Bünyamin‘in tüm tasarımlarında gerek yazılı gerekse resimli şekilde mutlaka sizi eğlendirecek ince espriler bulabilirsiniz. Yukarıdaki resimde gördüğünüz japon izleyici kitlesi ise bu zamana kadar en çok hoşuma gideniydi. Türk televizyonlarına hangi programın kimler tarafından izlenebileceğini gösteren bu resimler geldiğinde Nahnu da japon izleyici kitlesine bu şekilde seslemişti ve inanın hala gülüyorum şu resimdeki tiplere

Tasarımda Espriye Google ve Netvibes Yaklaşımı

Bildiğindiği üzere Google oldukça minimalist bir tasarımla ziyaretçilerini karşılamaktadır ve tasarımdaki tek görsel Google logosudur. Fakat bu minimalist tasarımda dâhi ziyaretçi kitlesine hitap edecek güzel espriler olabiliyor. Bunun en güzel örneklerinden birisi de 23 Nisan’larda Türk ziyaretçilerine sunmuş olduğu görseller. Yukarıda Google’ın 23 Nisan 2007 tarihinde Türkiye’den gelen ziyaretçileri için kullanmış olduğu logoyu görmektesiniz. Her ne kadar farklı bir ülkenin sitesi olsa da ufak bir espriyle bizi kendi evimizde, yurdumuzda ve hatta bayramımızda hissettirmeyi başarmıştır.

Türkçeleştirme ekibinde yer aldığım Netvibes Merhaba Türkiye derken yukarıda gördüğünüz logoyu kullanmıştı. Dünya çapında bir sitenin logosunda dalgalanan Türk Bayrağı görmek beni nasıl mutlu etmişti anlatamam.

Alkışlarla Yaşıyorum İle Zamanda Yolculuk

Geçtiğimiz günlerde yayına giren Alkışlarla Yaşıyorum, bence içeriğini tasarımıyla en iyi bütünleştiren sitelerin başında gelir. Hasan Yalçın bu tasarımın anatomisini anlatırken sitede dikkat etmediğimiz, gözümüzden kaçan tüm esprileri açıklamış ve bize tam bir fikir cümbüşü yaşatmıştı.

Yukarıdaki görsele bir bakın: Atari 800xl, Atari oyun kolu, bir Mintax kutusu, Volkswagen kaplumbağa, bir teyp kasedi ve biraz daha 60′lara kayarak bir gökkuşağı… Hangimiz özlemiyor ki o günleri! Sitede karşımıza çıkan Voltran, Tsubasa, Uzay Yolu içimizdeki çocuğa sesleniyor adeta. İnceden bir sızlama ve ardından gelen müthiş bir rahatlık. Bir tasarım barındırdığı esprilerle nasıl etkileyebiliyor insanı görüyor musunuz?

2nci.com ve Yıkılan Tabular

Geçen gün Yılmaz Uğurlu‘nun sitesi 2nci.com‘a rastladım. Sitede gördüğüm kısa bir cümle bu siteye bağlanmam için yetti de arttı bile. Nedir bu cümle derseniz logonun hemen altındaki slogan; SELECT * FROM WEB. Bir SQL cümlesi (veritabanı sorgusu) olarak Web’deki her şeyi bul, getir anlamına gelen bu sözcük damardan enjekte edilen bir ilaç gibi anında etkisini gösterdi üzerimde. O dakikadan sonra bu sitenin tam benim alanıma hitap ettiğini anladım. Basit bir cümle ile sitesini özetlemeyi çok iyi başarmıştı yazar.

Bu paragrafın başlığı olarak Yıkılan Tabular dememin sebebi esprinin sadece görsellerle değil, yazılı metinlerle de olabileceğini göstermek istememdi. Sitenin başlığı, sloganı veya herhangi bir yerine düşülebilecek bir not bile tahmin ettiğinizden fazla bir etkileyebilir ziyaretçileriniz üzerinde.

Son Sözler

Sonuç olarak söylemek istediğim şudur ki sitenize ziyaretçi gözüyle uzaktan bir bakın. Hazır tasarım kullanıyor olabilirsiniz, hiç sorun değil, hepimiz hazır tasarımlarla başladık bu işe. Önemli olan sitenize (günlüğünüze) kendinizden neler katabildiğiniz, ziyaretçilerinize ne sıcaklıkta bir ” Merhaba ” dediğinizdir.

Daha nice esprili, keyifli tasarımlar görmek dileğiyle hoşçakalın…

Sponsorlar:WebGrup,
SEO Teknikleri,
TrSektor | yakuter.com © 2009 | 8 yorum | Çay içmeye de beklerim »

JQuery ile Şık Bir Teknik

Fatih Turan ile yaptığımız röportajdan sonra sık sık sohbet eder olduk. Kendisi bir süredir blogunda yeni paylaşım yayımlamıyordu.

Birgün bana tekrar paylaşımlarda bulunmak istediğini söyleyince bende bir atraksiyon yapalım dedim ona ve misafir paylaşımcı olarak birbirimizin bloglarında bu açılışı duyurmak, kutlamak amacı ile birer paylaşımda bulunmaya ve aynı anda yayınlamaya karar verdik.

Fatih Turan, Wordpress İçin SEO İpuçları adlı paylaşımda bulundu.

Ve Benim Paylaşım

Bu paylaşımda sizlere JQuery kullanarak çok basit bir şekilde oluşturabileceğimiz, şık bir teknikden bahsedeceğim. Şık bir teknikten kastımı bizzat kendi gözlerinizle görmek için şu sayfayı ziyaret edebilirsiniz.

Altyapımızı Hazırlamaya Başlayalım

JQuery ile çalışacaksak en öncelikle yapmamız gerekenler, JQuery web sitesinden, JQuery adlı JavaScript kütüphanesinin en son sürümünü indirmek (ben birde dosyanın ismini JQuery olarak değiştiriyorum, daha kısa oluyor) ve

1

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

kodunu HTML dökümanımızın head bloğu arasında kullanarak HTML dökümanımıza
jQuery.js dosyasının yolunu göstermek.

Ayrıca örneğimizde CSS ve JQuery kodları geliştireceğimiz için ve hazır head
kod bloğunun içindeyken atacağımız en mantıklı adım

1
2
3

<script type="text/javascript">
 
</script>

ile

1
2
3

<style type="text/css">
* {margin:0; padding:0}
</style>

kod bloklarını açmak ve işimizi görecek bir sıfırlama tekniği kullanmak olacak.

Alternatif olarakda bu paylaşım için başlangıç niteliğinde hazırladığım şu
klasörü bilgisayarınıza indirebilirsiniz.

Ne Yapmak İstiyoruz?

Yapmak istediğimiz şu, belirlediğim bir bağlantıya basılınca sayfanın üst kısmından x yükseklikte bir alanın, şık bir şekilde açılması.

Alan dediğimize göre bir div etiketine ihtiyacımız var.

1

<div id="acilacakAlan"></div>

İsterseniz birde div etiketimize yükseklik ve bir arkaplan rengi verelim.

1

#acilacakAlan {height:240px; background-color:#000}

Sayfamızı açıcak olursak, sayfanın üst kısmında, 240px yüksekliğinde, siyah renkli bir alan göreceğiz.

O zaman sayfamıza birde tetikleyici niteliğinde bir bağlantı ekleyelim ve HTML kısmı ile işimiz bitsin.

1

<a href="#" id="gosterici">Göster</a>

Burada href="#" tanımı önemli, çünkü href="" boş kaldığı zaman a etiketimiz bir bağlantı olarak görülmez ve basılır durumda olmaz, bu nedenle bir # işareti istediğimizi yapmak için yeterli.

JQuery’ye Giriş

JQuery’nin en sevdiğim yanı şu, JQuery geliştirmek için çok fazla bir JavaScript bilgisine sahip olmam gerekmiyor, ya da basit isteklerimi yapmak için sayfalarca kod yazmama gerek yok, önceden tanımlanmış fonksiyonları kullanabiliyorum.

Zaten JQuery’nin sloganı olan, Tasarımcılar için JavaScript, herşeyi anlatıyor.

Çalışmaya Başlayalım

JQuery kodu geliştireceğimiz zaman kullanmamız gereken bir kod var

1
2
3

$(document).ready(function() {
 
});

Bu kodun türkçesi “döküman hazır olduğunda” demek, dolayısı ile şimdi bu kod bloğunun içine yazacağımız kodlar döküman hazır olduğunda çalışacak.

Bir defa öncelikle o div‘i gizlemeliyiz sayfa ilk açıldığında gizli olmalı. Yani şöyle birşey demem lazım, acilacakAlan.gizle yani acilacakAlan’ı seçip ona gizlenme komutunu vermem lazım.

$('#acilacakAlan') kodu ile ben o div etiketini seçiyorum ve bu kodun sonuna .hide(); kodunu ekleyerek div etiketine gizlenmesini söylüyorum.

1
2
3

$(document).ready(function() {
$('#acilacakAlan').hide();
});

Sayfamızı açıcak olursak bomboş bir sayfa göreceğiz, güzel.

Bu noktadan sonra yapmak istediğimizi yeniden gözden geçirelim. Ben gosterici adlı bağlantıya tıklandığımda acilacakAlan’ın gözükmesini istiyorum.

O zaman önce gosterici’ye tıklandığı anı bilmem lazım.

1

$('#gosterici').click();

Yukarıdaki kod ile, gosterici bağlantısına tıklandığı bilgisi avcumun içinde, artık acilacakAlan‘ın gözükmesini sağlayacak fonksiyonu yazabilirim:

1
2
3

function() {
$('#acilacakAlan').show;
}

İki kodu birleştirince

1
2
3

$('a#gosterici').click(function() {
$('#acilacakAlan').show();
});

ortaya yukarıdaki kod çıkıyor, bir deneyelim bakalım ne olacak?

Evet bağlantıya basınca alanımız geliyor, ama bir sorun var şu anda alanımız direk açılıyor, hiç bir şıklık ya da güzellik yok.

Oysa ben yukarıdan aşağıya doğru şık bir şekilde açılmasını istiyorum, o zaman ben yanlış bir komut kullanıyorum, aşağıya(down) kaydırmak(slide) için slideDown komutunu deneyelim o zaman.

.show(); yerine .slideDown(); yazalım ve sayfamızı kontrol edelim.

Evet istediğim oldu, ve ayrıca ben

1

.slideDown('slow');

veya

1

.slideDown('fast');

değerlerini kullanarak ya da direk rakam girerek,

1

.slideDown(400);

kayma hızını ayarlayabilirim, dikkat edin metinlerde ‘ kullanıyoruz ama rakamlarda kullanmıyoruz.

.slideDown(); kodunu .slideDown(400); ile değiştirerek kayma hızını 400′e ayarlıyorum.

Ufak Bir Sorun Var

Herşey çok güzel ama ufak bir sorun var, bu alanı açtıktan sonra birde kapatmamız lazım. İsterseniz en baştaki

1

$('#acilacakAlan').hide();

kodunun başına // koyarak onu yorum yapalım ve alanımız direk açık gelsin.

Şimdik alanımızı kapatmak istiyoruz ama yukarıya (up) doğru kayarak (slide) kapanmasını istiyoruz.

.slideDown(400); kodunu .slideUp(400); ile değiştirelim ve, evet, amacımıza ulaşıyoruz.

Ama şimdide şöyle bir durum var az evvel alanı aşağıya doğru kaydırarak açtık şimdi ise yukarıya doğru kaydırarak açtık ama ben aynı bağlantıya ilk defa basıldığında açılmasını tekrar basıldığında kapanmasını istiyorum. Bu işlem için iki ayrı bağlantı oluşturmak istemiyorum.

Sihirli Komut, Toggle

Arkadaşlar JQuery harika çünkü toggle adlı hazır bir fonksiyonu var ve bu fonksiyon tam istediğimizi yapmamızı sağlayacak. Gelin şu şekilde kodumuzu değiştirelim ve sayfamızı kontrol edelim.

1

.slideToggle(400);

Harika değil mi? Toggle ilk basıldığında önündeki (slide) komutu gerçekleştiriyor ve diğer basışta, ilk yaptığının tam tersini yapıyor. Yani Aç Kapa şeklinde düşünebiliriz. Zaten Toggle kelimesinin türkçe karşılığı, iki konumlu düğme demekmiş.

Ne Kadar Kolaymış değil mi?

Artık elimizde şık bir teknik var ve bu tekniği istediğimiz gibi süsleyebiliriz. Ben şu şekilde bir örnek geliştirdim (Arkadaşlar, örneğe sadece FireFox3′de baktım, diğer tarayıcılar için optimize etmedim), Fatih Turan ise, Sinemalardan adlı blogunda (şu anda kapalı olarak test ediliyor yakında açılacak) bu tekniği çok şık bir şekilde kullanmış, kısacası sınır sizin hayal gücünüz, çok efektif ve şık kullanımlar çıkartılabilir.

Umarım sizde ne kadar kolaymış bunu yapmak demişsinizdir, faydalı bir paylaşım oldu ise ne mutlu bana.

Bu yazı Web Deneyimleri adlı blogdan Volkan Görgülü tarafından konuk yazar olarak yazılmıştır.

Bu yazı Fatih Turan tarafından 18 Eylül 2008 12:28 tarihinde yazıldı. 13 yorum var.