Birkaç hafta önce FriendFeed'de bir bağlantı paylaşmıştım. Bir siteye giriyorsunuz ve tarayıcı tarihinize bakarak, sizin hangi cinsiyette olduğunuzu tahmin etmeye çalışıyordu bu site. Pek düzgün çalışmasa da verdiği sonuçları görmek biraz ürkütücüydü.

Şimdi sıra socialhistory.js'de. Socialhistory.js, eğer sitenizde yüklüyse giren ziyaretçilerin bazı popüler sosyal sitelerden hangisine girip girmediğini kontrol ederek ona göre davranış biçimleri oluşturmanızı sağlıyor.

Mesela yukarıdaki paylaşım araçlarını bilirsiniz. Blog yazılarını paylaşmanız için size N adet bağlantı verirler. Socialhistory.js ile kullanıcıya sadece kullandıklarını sunun, kafasını karıştırmayın diyorlar. %80 oranında da düzgün sonuçlar veriyor.

Buraya kadar her şey pembe gibi görünse de aslında korkutucu değil mi sizce de? Her ne kadar bu javascript sadece sosyal sitelerle sınırlı olsa da biraz modifiye edilerek başka alanlarda girdiğim siteler de pek rahat tahmin edilebilir. Bu da olayın boyutunu biraz değiştiriyor. Kim bu tür bilgilerini paylaşmak ister ki?

Socialhistory.js'nin çalışma mantığı aslında çok basit. Açık bile denilemeyecek bir yöntem kullanıyor. CSS kodluyorsanız, bağlantılara :visited pseudosu verebildiğimizi bilirsiniz. Yani tarayıcı üzerinde ziyaret edilen tüm bağlantılar, farklı bir stilde olabilir. Bu script de aynen bunu javascript tarafında sorguluyor.

Siz ne düşünüyorsunuz; bir CRM metodu bulmuş gibi sevinmeli miyiz, yoksa korkmalı mıyız?

Bazı durumlar olur, bir web sitesine gireriz ve etkilendiğimiz bir javascript uygulaması görürüz. Doğal olarak hemen kaynak kodlarına girip, araştırırız; acaba bizim kullandığımız javascript kütüphanesini mi kullanıyor diye.

Tüm bu kaynak kod aramasını bir kenara bıraktıran bir bookmarklet WTFramework, kolaylıkla sitelerde hangi javascript kütüphanesinin kullanıldığını söylüyor. Basit fakat eğlenceli bir uygulama değil mi? Tek yapmanız gereken sayfasına girip WTFramework bağlantısını favoriler barınıza sürüklemek.

Ardından merak ettiğiniz sitede WTFramework'e tıkladığınızda ne kullandığını görebileceksiniz:

WTFramework, şu an popüler birkaç javascript kütüphanesini destekliyor, fakat devamlı geliştirilmeye devam ediyor.

JavaScript ile haşir neşir olanların eminim ki dert yandıkları bir konu da çoğu zaman debug işlemleri için alert() komutunu kullanmak zorunda olmalarıdır.

Diğer dillerin aksine JavaScript gelişmiş bir debuggera sahip olmadığı için ek programlara ihtiyaç duyarsınız. Bu gibi durumlarda oldukça pratik ve şık bir çözüm olan Blackbird'ü tavsiye edebilirim (tabi hali hazırda bir Firefox eklentisi kullanmıyorsanız).

Blackbird, açık kaynak bir JavaScript debug aracı, sayfanıza ekleyeceğiniz bir JavaScript dosyası ile çalışıyor. Kullanıldığında ekrana yandaki resimdeki gibi bir pencere yaratan script, basit komutlarla istediğiniz debug işlemini kolaylıkla yapmanızı sağlıyor; sıkıcı mesaj kutuları olmadan.

Bir kullanıcı olarak üzerinde form olan bazı web sayfalarının yüklenmesi bittiğinde sayfadaki ilk form elementine odaklandığını farketmişsinizdir. Eğer bir web geliştiricisiyseniz zaten bunu yapıyor olabilirsiniz. Temel olarak işleyiş, aşağıdaki gibi bir kodu sayfa yüklenince çalıştırmaktan geçiyor:

document.getElementById('formElementi').focus()

Bu yöntem oldukça sık tercih edilen, fakat üzerinde düşünülmeden uygulandığında tam bir kullanıcı kabusu yaratan bir tercih.

Bu kabusu iki örnekle açıklayacağım:

Google GMail

GMail'in anasayfasına ilk girişinizde, sizin hiç fare kullanmadan direk bilgilerinizi girebilmeniz için kullanıcı adı alanına odaklanmanız otomatik olarak sağlanıyor. Buraya kadar her şey normal. Ancak benim gibi aceleci bir kullanıcı, bu aksiyonu beklemeden, daha sayfa yüklenirken bilgilerini girmeye çalışırsa bu durum tam bir kabus oluyor. Çünkü GMail, ben kullanıcı adımı girmeye başladığımda yüklenmesini tamamlarsa beni kullanıcı adı alanına değil, şifre alanına odaklıyor. Dolayısıyla kullanıcı adımı yarıda kesip şifre alanına girmeme neden oluyor.

Garanti Bankası Internet Şubesi

Garanti Bankası, form odaklamaya yeni geçen uygulamalardan birisi. Bundan birkaç ay öncesine kadar böyle bir şey yoktu. Garanti Bankası Internet Şubesi yine sayfa yüklenmesini tamamlayınca form elementine odaklamaya çalışıyor ancak GMail'den daha berbat bir şekilde. Onlar ben form elementlerini doldurmaya başladıysam, tüm bu yazdıklarımı silip, birinci form elementine odaklama yapıyorlar!? İnsan içinden, neden diye düşünmeden edemiyor her seferinde.

Ne zaman, nasıl form odaklama

• Eğer sayfanız içeriklerle doluysa, form elementleri ikinci veya üçüncü önem sırasındaysa asla odaklama yapmayın.
• Eğer sayfanız iletişim formu gibi form sayfasıysa odaklama yapın, ancak bunun kontrolünü de yapın. Kullanıcıyı bulunduğu form elementinden başka elemente göndermeyin veya yazdıklarını silmeyin.
• Eğer sayfanızdaki form elementleri birinci önceliğe sahipse fakat bu elementler sayfanın görünmeyen kısmındaysa (1024x768 çözünürlükte aşağıda kalıyorsa) asla ve asla odaklama yapmayın.
• Eğer Twitter'sanız odaklama yapın.
• Eğer sitenizde arama özelliği varsa, fakat arama sadece bir opsiyonsa odaklama yapmayın.
• Eğer form elementleri önemliyse, fakat form elementleriniz sayfanın ortalarına doğru yer alıyorsa dikkatlice yapın. Ya arayüzünüzü yenileyip, form elementlerini daha başlara almanız gereklidir ya da tabindex="1" yardımıyla, tüm sayfa senaryosunu elden geçirmeniz gereklidir. Tabindex, sayfada hangi elementin önceliğinin ne olacağını belirler. Bu klavyeden tab tuşuyla sitenizi gezen kullanıcıların, hangi sırada gezeceğini tanımlar. Örneğin sayfanın sonundaki bir elemente tabindex="1" verip, sayfanın en başındakine tabindex="2" verirseniz kullanıcı tab tuşu ile bir aşağı, bir yukarı gider.
• Eğer senaryonuz bunlardan hiç birisiyse, bu özelliği gerçekten düşünerek tercih edin.

Eğer Safari tarayıcı kullanıyorsanız buna bayılacaksınız. Eğer kullanmıyorsanız, buraya tıklayarak indirin ve bu yazıda göstereceğim nefis eğlenceye ortak olun.

Devamı

Her yeni teknoloji beraberinde yeni zorlukları ve yeni kolaylıkları getiriyor. Sorun, herkesin bunlara yabancı olmasından dolayı iyi mi yoksa kötü mü bunu ayırt etmekte. Web, tüm dünyanın anlık olarak deneyimini yaşadığı, herkesin beraber karar verdiği yeni mecra. Dolayısıyla bir şeyin iyi veya kötü olduğunun kararı, anlık deneyimlerle, topluluklarca karar veriliyor.

SiberKültür bunu yazsın için gelen başvurulardan birisi de sevgili Burak'ın kendisinin geliştirdiği sayfa içi düzenleme methoduydu (inline editing). Javascript ile geliştirilmiş sistem basit olarak bir web sayfasında, izin verilen alanlarda anlık düzenleme yapılmasına imkan sağlıyor. Aynen Web sitelerini görürken düzenleyin yazısında olduğu gibi, ancak bu sefer yaptığımız değişiklikler sunucuya da kaydediliyor.

Satır içi düzenleme aslında çok da yabancı olduğumuz bir uygulama değil. Mesela Flickr bunu senelerdir yapıyor:

Flickr örneğinde, bir fotoğrafınıza açıklama eklemek istediğinizde sayfa içinde, yeni sayfaya, yeni bir forma gitmeden anında değişikliğinizi yapıp kaydedebiliyorsunuz.

Daha gelişmiş bir arayüz olan Google Maps ise yine satır içi düzenlemeyi kullanan uygulamalardan birisi:

Google Maps'de yol rotası belirlerken, rotalardan birisini değiştirmek istediğinizde tüm sayfanın değişmesine gerek kalmadan, anında değişikliği yapabiliyorsunuz.

Ayrıca oldukça popüler proje yönetim uygulaması olan Basecamp de, uygulamanın birçok yerinde satır içi düzenleme metoduna başvuruyor.

Bu tür yeni kullanım alışkanlıkları getirecek uygulamalar tercih edilirken bence şunlara dikkat edilmeli:

1. Kullanıcı tarafından anlaşılması zor mu?
2. Kullanıcı tarafında ekstra bir gereksinimi var mı? (applet gibi)
3. Kullanıcıya zaman mı kazandırıyor, yoksa aksini mi yapıyor?

Satır içi düzenleme için konuşacak olursak, bu 3 maddeyi de olumlu olarak yerine getiriyor. Dolayısıyla -bildiğim kadarıyla- uygulanması kolay bu metodu, uygulamalarınızda kullanmak hem kullanıcılarınız için hem de sizin için (bu sayede ayrıca form sayfaları tasarlamak zorunda kalmazsınız) bir artı olacaktır.

Sadece 1 satır javascript kodu ile web tarayıcınız üzerinden herhangi bir web sayfasını anlık olarak düzenleyebileceğinizi biliyor muydunuz?

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Yukarıdaki kodu bir web sitesi açıkken, örneğin SiberKültür, adres satırı alanına yazar ve entera basarsanız site bir anda tasarım görünümüne geçecek ve sayfada istediğiniz alanı klavyeden değiştirebileceksiniz.

Bu pek göz önünde olan bir teknik olmasa da genellikle eğlence ve düzenbazlık (feed istatistiklerini fazla göstermek, bilgileri yanlış göstermek gibi) yapıp ekran görüntüleri almak için kullanılıyor. Tabi ki bu yapılanlar sadece kendi ekranınıza yansıyor.

Bir projemiz için şu saatlerde modal pencereleri açabileceğimiz, küçük ve sade bir lightbox klonu arıyordum. Biliyorsunuz lightbox, eski moda popup pencerelerden kurtulmak adına javascipt ile geliştirilmiş, sayfa içinde pencereler açan bir uygulama. Bir resim, video hatta AJAX içeriği getirmek için kullanabiliyorsunuz gelişmiş klonları sayesinde.

Kriterlerim çok olunca Google aramaları içinden çıkılmaz bir hal alıyor. Ancak rastladığım bir site neredeyse tüm dertlerimi bitirdi diyebilirim. The Lightbox Clones Matrix isimli site oldukça başarılı bir şekilde 40'dan fazla lightbox klonunu filtrelemenize imkan veriyor. Sitede sağ üstte bulunan kutu sayesinde hangi javascript kütüphanesini kullanması gerektiğini, hangi öğeleri göstermesini istediğinizi seçip kolaylıkla sıralayabiliyor ve istediğinizi bulabiliyorsunuz.

Benim için geriye kalan sadece 7 sonucu inceleyip, bana en uygununu bulmak.

Optimizasyon konusunda yapacaklarımız sayesinde hem sunucu yükünü azaltıyor hem de ziyaretçinin sitenizi daha hızlı gezmesini sağlıyor.

Şu ana kadar yaptığımız adımlar:

• İçerik optimizasyonları
• CSS optimizasyonları
• Görsel optimizasyonları

Devamını okuyun

Her yeni büyük uygulama, yeni bir trendi de beraberinde getiriyor.

Microsoft Vista da bunlardan birisi. Sağda solda rastgelmişsinizdir mutlaka Vista stili menü gibi birçok şey.

GlassBox da bunlardan birisi. Biraz daha şahane birşey sadece. GlossBox sayesinde, Vista tipi kenarlar yapabiliyorsunuz. Aynen şunun gibi:

3 kısa adımda, bu javascript uygulamasını sitenizde kullanabiliyorsunuz:

Glossbox'ı sayfanıza çağırın:

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

Sayfanızda şık kenarlığı olmasını istediğiniz elementi hazırlayın:

<div id="guzelKenarlar">
<!-- İçerik -->
</div>

ve scripti çalıştırın:
400px (genişlik), 300px (yükseklik), 290px (soldan ne kadar içeride), 35px (yukarıdan ne kadar içeride)

<script type="text/javascript">
var myGlassBox = new GlassBox();
myGlassBox.init( 'guzelKenarlar', '400px', '300px', 'auto' );
myGlassBox.apos( '290px', '35px' );
</script>

Sanırım tek eksiği, yükseklik vs gibi değerleri bizim ayarlamak durumunda olmamız.