Bu cumartesi webseminerlerindeydim.

Hava muhalefetine rağmen katılım çok güzeldi ve sunumlar oldukça bilgilendirici ve eğlendiriciydi.

İkincisi gerçekleşen web seminerlerinde benim de “Web İçin Teknoloji Geliştirmek” başlığı altında bir sunumum oldu.

Sunumu slideshare sayfasından gözden geçirebilir,  Ya da buradan powerpoint formatında indirebilirsiniz.

dip not:
Bu aralar ne kadar yoğun olduğumu anlatmak için kelime bulamıyorum. Yazacak çook şeyim var. Ve elbet zamanı gelecek, yazacağım

Sevgiler,
D.K.

Yapacaklarımı planlamak için web tabanlı todoist uygulamasını kullandığımı daha önceden anlatmıştım.

Todoist iş bitirmek (GTD) için gerçekten kullanışlı bir web uygulaması. Bunula birlikte sadece “bugün ne yapacaktım bakayım…” demek için web tarayıcımı açıp, internete bağlanmak ve bir web adresine yönelmek gereğinden fazla yük ve zaman kaybı olarak göründü bana.

Sonuçta zaman yönetimi uygulamalarının temel amacı zaman kazandırmaktır, öyle değil mi?

Böyle arpacı kumrusu gibi düşündükçe

• her zaman gözümün önünde olacak,
• hızlıca düzenleyebileceğim,
• sadece bana özgü olacak,
• beni hızlandıracak ve bana zaman kazandıracak

biraz daha farklı bir uygulamaya ihtiyacım olduğunu fark ettim.

Amacım sadece basit bir “yapılacaklar listesi” idi ve todoist bu sade amacımı aşacak karmaşıklıktaydı. Biraz da joes goals‘dan esinlenerek yeni bir uygulama ürettim:

Gerekli Malzemeler

• biraz meraklılık,
• biraz yaratıcılık,
• sevdiğiniz metin tabanlı bir editör (Notepad bile olur)

Ve sizi DİTU ile tanıştırayım:
(Don Kişot İş Takibi Uygulaması — daha iyi bir isim önerisi olan var mı?)

Toplamda 2.3K hafıza kullanıyor, açılması saniyenin onda biri bile sürmüyor, rahatlıkla düzenlenebiliyor. Firefox’un harcadığı 95K hafızaya oranla epey bir ilerleme, ne dersiniz

Şimdi adım adım detaylarına geçelim:

Aslında ilk bakışta sayfanın bir salt metin dosyası olduğu, bir metin editörü tarafından renklendirildiği ve dosyada neyin ne işe yaradığı açık bir şekilde anlaşılıyor. Zaten amacım da bu:

• sade,
• ilk başışta anlaşılır,
• kolay düzenlenen,
• aradığımı kolayca bulabileceğim

bir görev takip uygulaması.

Parça parça incelemeye devam edelim:

Başlamadan önce dosyanın orijinalini incelemek isteyebilirsiniz. Dosya bildiğiniz bir metin dosyası.

Bu linki takip ederek indirebilirsiniz »».

Yukarıdaki cicili bicili dosyadan biraz farklı değil mi?

Yapacaklarımız:

• Öncelikle bu dosyanın farklı bölümlerini inceleyeceğiz,
• Daha sonra dosyamızı renklendireceğiz ,
• Gerekli ilişkilendirmeleri yapcak ve
• İşletim sistemimiz her açıldığında gözümüzün önünde olmasını sağlayacağız.

Yazdıklarımı M$ Windows odaklı anlatacağım.
Bunula birlikte Windoze’dan kat kat iyi olan Linux tabanlı yüzlerce işletim sisteminde de rahatlıkla benzerleri yapılabilir.

.

Not:
Yaptıklarımı adım adım detaylı bir şekilde anlatmaya çalışacağım.
Mümkün olduğunca basit bir dil kullanmaya çalıştım. Ama yapacaklarımız bir miktar temel işletim sistemi bilgisi (dosyaları yeniden adlandırma / bir dosya ile bir programı ilişkilendirme…) gerektiriyor.
Adım adım takip edince yapılamayacak bir şey değil.
Eğer işler bir noktadan sonra karışırsa ya da takıldığınız / merak ettiğiniz noktalar, ya da farklı önerileriniz olursa yorumlarınızla paylaşmaktan çekinmeyin.

İyi de… Bu dosya çok karışık, ne ne işe yarıyor çözemedim:

Sırayala:

• 1. Şu an üzerinde çalışılan işler
• 2. Yakında üzerinde çalışılacak işler
• 3. Düzenli olarak yapılan işler
• 4. Gerekiyorsa işler için detay etiketleri
• 5. Bu detay etiketlerinin ayrıntılandırıldığı alt bölüm
• 6. İşin ayrıntılı olarak detaylandırılması
• 7. Durum etiketleri (”işin hangi bölümü şu an ne durumda?” sorusunun cevabı)
  • ONAY_BEKLİYOR: Başka bir iş ya da kişiden bir kaynak beklediği için şu an yapılamıyor.
  • TAMAMLANDI: Bu alt bölüm tamamlandı.
  • BOŞVER: Yapılmayacak.
  • ÇALIŞILIYOR: Şu an üzerinde çalışılıyor.
  • BAŞLANMADI: Henüz başlanmadı.
  • BİLGİ: İş ile ilgili ekstra ayrıntı.
  • PROBLEM! : İşi engellemeyecek ama rahatsız eden bir sorun çıktı.
  • HATA! : İşin yapılmasını engelleyecek bir sorun.
  • ÖNŞART: Bu işin yapılması, diğer başka işlere bağlı.
• 8. Eylem belirteçleri ( << : şu an üzerinde çalışılıyor, ++ : bir sonraki eylem)
• 9. Puanlama
  (üst satır: o gün (ve önceki günler) kaç iş bitirdiğim)
  (alt satır: toplamda (geçmişe dönük) kaç iş bitirdiğim)
• 10. Kolay takip edebilmek için aktif satırı farklı renklendiriyorum.
• 11. Bir işin ayrıntısına kolayca erişebilmek için ayrıntı etiketlerine ayraç koyuyorum.

Tamam, Neyin Ne Olduğunu anladım … da bu Renklendirme İşini Nasıl Yapacağız?

Bu iş için EditPlus‘ı kullandım. Tabii ki sevdiğiniz metin editörünü kullanarak benzer sonuçlara erilebilirsiniz. Bunula birlikte EditPlus, kendi sentaks dosyalarımı da eklememi sağladığı için benim daha bir işime geldi.

EditPlus’ı bu linki takip ederek indirebilirsiniz (ücretsiz) »»

İndirip kurduktan sonra şu iki sentaks dosyasını winzip benzeri bir programla açıp içindekileri EditPlus kurulum dizinine atın. (Varsayılan konumu C:/Program Files/Editplus2 )

Eğer görev dosyanızı sıfırdan oluşturmak istemiyorsanız, bu şablon dosyasını kullanabilirsiniz.

Görev Dosyaları ile EditPlus’ı İlişkilendirmek

Görev dosyalarının uzantısını .txt değil .task olarak tutuyorum. Böylelikle .txt dosyalarının varsayılan windows not defteri uygulaması ile açmaya devam ederken .task dosyalarına farklı bir uygulama atayabiliyorum.

İşte 2 tane görev dosyası:

Buraya kadar sabırla takip ettiyseniz zaten queue.task ile tanıştınız: Yapmakta olduğum işleri listelediğim bir dosya.
done.task ise queue.task dosyasında tamamladığım işleri tarih atarak (timestamp) kesip kopyaladığım bir arşiv dosyası. Başka bir deyişle “bu ana kadar neler yaptın?” sorusunun geçmişe dönük cevabı.

Gelelim .task uzantısını az önce kurduğumuz EditPlus ile ilişkilendirmeye…

queue.task dosyasına sağ tıklayıp “özellikler” menüsünü açıp, birlikte açılacağı programı değiştirip,

Dosya tanımı için “görev dosyası” deyip,

Dosyayı açmak için “Editplus.exe” programını seçtikten sonra

Artık *.task dosyalarımızı EditPlus ile açılır hale getirmiş olduk.

Dosyamızı Renklendirelim

Bunun için EditPlus > Tools > Preferences > Files > Settings & Syntax > File Types > Add dedikten sonra

Description: Task File
File Extension: task
Syntax File: C:\Program Files\EditPlus 2\task.stx
Auto Completion: C:\Program Files\EditPlus 2\task.acp
Tab/Indent: Tab(4), Indent(4)
Column Markers: 84,0,0,0

ayarlarını yaptıktan sonra syntax colors sekmesinden görev dosyanızı renklendirebilir,
Tools > Preferences > General > Colors bölümünden ise diğer renklendirmeleri yapabilirsiniz.

Etiketlere Ayraç Atamak

Unutmadan Editplus kullanırken herhangi bir satırdayken F9 tuşuna basmak, o satır için bir ayraç atar (yukarıdaki resimde 11 numara ile gösterilen kesim). F4 tuşuna tıklayarak, atadığınız ayraçlar arasında kolayca gezinebilirsiniz.

Editplus kullanımı ile ilgili daha fazla ipucu için editplus.com sitesine bakılabilir (site İngilizce).

Son Olarak…

Başlangıç Menü’süne queue.task dosyasının bir kısayolunu atarsanız, windows her açıldığında bu dosya da açılacak ve o gün yapmanız gereken işleri size hatırlacataktır:

…

Bu yöntemi yaklaşık iki haftadır kullanıyorum, ve kullandıkça aklıma yeni şeyler gelip geliştiriyorum. Benim çok işime yaradı.

Eminim sizlerin de önerileri vardır.
Ne düşünüyorsunuz?

Bilenler bilir, epey bir zaman önce güncellemeyi durdurduğum “cre8ive hut” isimli bir blogum var. cre8ive hut‘da teknik konulardaki düşüncelerimi İngilizce olarak paylaşıyordum.

Şu ana kadar bu blogun ana temasıyla örtüşmediği için yazılım mimarisi / teknoloji vb. konularına pek değinmiyordum. Bununla birlikte “şunu da yazsam ne güzel olur” diye bir şeyler içimi kemirip duruyordu.

Artık yer yer Don Kişot‘ta meraklısına teknik içerikli yazılar da ekleyeceğim. Ve bu blogun dili Türkçe olduğu için yazılarım da (teknik terimler vs. hariç) Türkçe olacak.

Umarım hoşunuza gider.

Bugün web uygulamalarında MVC mimarisinin sağlamlığını AJAX‘ın gücüyle birleştirerek nasıl daha tepkisel bir web uygulaması oluşturacağımızı inceleyeceğiz. Eğer MVC hakkında bir fikriniz yoksa vikipedi ve wikipedia‘yı inceledikten sonra okumaya devam etmeniz daha yararlı olacaktır.

Öncelikle Web ortamında MVC mimarisinin nasıl çalıştığını hatırlayalım:

Sayfada bir işlem yapıldığında (örneğin bir butona tıklandığı zaman) sunucu tarafında sayfa (Page) Controller‘a üzerinden Modeli güncelleyecek, ve bu güncelleme işleminden sonra View nesnesinden güncel görüntüyü isteyecek ve son olarak tüm sayfayı yeniden oluşturacaktır (renderView).

Ancak bu işlem sayfanın ufak bir bölümü güncellense bile tüm sayfanın (web form) sunucuya gönderilmesini ve sunucudan tekrar tüm sayfayı almayı gerektirir. Bu durum hem kullanıcıyı gereksiz yere beklettiği için hem de gereksiz yere sunucu kaynaklarını tükettiği için verimli bir yöntem değildir.

AJAX (XmlHttpRequest) yardımıyla web sayfasını kısmen güncelleyebildiğimizi ve sunucu üzerinden bu yükü kaldırıp, kullanıcıya daha tepkisel bir uygulama sağlayabildiğimizi biliyoruz. Örneğin linkibol ana sayfasında herhangi bir linke oy verdiğinizde tüm sayfa yeniden yüklenmez, sadece ilgili bölüm yüklenir ve bu işlem oldukça hızlı gerçekleşir — deneyin görün isterseniz

Asıl sorun uygulamamızın MVC mimarisini bozmadan (yani Model ve View nesnelerini bozmadan) AJAX‘ı nasıl işin içine katacağımız. Bunun için yukarıdaki akış diagramını parçalamamız gerekecek:

İşe yukarıdaki diagramda Page nesnesi yerine bir arabulucu (proxy) sayfa yerleştirmekle başlayalım:

ControllerAJAXProxy nesnesi de aslında bir sayfadır (extends Page). Sayfa nasıl modeli güncelliyorsa bu nesne de aynı şekilde modeli günceller (updateModel). Tek bir fark ile. Nesnemiz bir sonraki işlemde ilgili View nesnesini çağırmak yerine bir durum kodu (statusCode) döner ve bütün bir sayfayı oluşturmak yerine sadece sayfaya bu durum kodunu yazar (renderStatusCode).

Benzer şekilde View nesnesi için de bir proxy oluşturabiliriz:

bu proxy de View ile etkileşimde bulunup sadece ilgili kısmın görüntüsünü alır (getPartialView) ve sadece bu kısmı sayfaya yazar (renderPartialView).

Bu şekilde yukarıdaki diagramı iki bölüme bölmüş olduk. Bu iki parça arasındaki etkileşimi ise AJAX ile sağlayacağız. Nasıl mı?
Ana sayfadan bu nesneleri AJAX aracılığıyla çağırarak.

Bir örnek verirsek daha anlaşılır olabilir. Başlangıçta linkibol‘dan verdiğimiz örneği inceleyelim isterseniz:

linkibol’da bir linke oy verildiği zaman:

• 1. Öncelikle LinkFactoryControllerAjaxProxy nesnesinin incrementRank metodu çağrılır.
• 2. LinkFactoryControllerAjaxProxy.incrementRank metodu da LinkFactoryModel nesnesinin incrementRank metodunu çağırır.
• 3. LinkFactoryModel.incrementRank metodu ilgili linkin linkipuanını güncelledikten sonra bir statusCode durum değişkeni döner. Eğer statusCode “0″(sıfr) ise güncellenme başarılı olmuştur. LinkFactoryControllerAjaxProxy.incrementRank bu aldığı statusCode değişkenini responseText olarak yazar (render status code).
• 4. JS tarafında bu statusCode alınıp incelendikten sonra LinkFactoryViewAjaxProxy nesnesi aracılığıyla LinkFactoryView nesnesinin getRank metodu çağrılır.
• 5. LinkFactoryView.getRank metodu ilgili linke ait linkipuan‘ı geri döner (getPartialView)
• 6. LinkFactoryViewAjaxProxy nesnesi aldığı bu değeri responseText olarak yazar (render partial view)
• 7. Daha sonrasında yine JS tarafında alınan bu responseText sayfanın ilgili bölümüne yazılır ve tek bir linke ait linkipuan sayfanın tamamını yeniden yüklemeye gerek kalmaksızın güncellenmiş olur.

Küçük uygulamalar için böylesi bir yapı gereğinden fazla ayrıntı ve zaman kaybı gibi görünebilse de, uygulamanızın boyutu büyüdükçe bu tarz bir yapının hayatınızı kolaylaştırdığını göreceksiniz.

Umarım birilerine yardımcı olmuştur.

Web geliştiricileri, sizin düşünceniz ne? Uygulamalarınızda MVC paradigmasını göz önünde bulunduruyor musunuz? MVC mimarisinini AJAX ile birleştirmek için denediğiniz benzer / farklı yöntemler var mı?

Blogumu RSS okuyucusu dışından takip edenler sol yan çubuğumdaki değişikliği fark etmiştir. Artık linkiboldan aldığım en güncel 10 linki ve benim linkibola eklediğim son 10 linki burada gösteriyoum.

Sizin de blogunuza benzer bir şey eklemeniz çok kolay:
google işin zor kısmını yapmış. Bize ise sadece kopyalayıp yapıştırmak kalıyor.

Yapmanız gereken:

1.
“key=YOUR-KEY” kısmından sonra kendi google API key’inizi eklemeniz önerilir.

Bu anahtarı eklemek çok kolay:
1.1. Öncelikle bu adrese girin ve gelecek ekrana aşağıdaki gibi kendi sitenizi ekleyin:

1.2. Bir sonraki ekranda gelecek kodu kopyalayın.

1.3. Aşağıdaki kodda YOUR-KEY yerine yukarıdaki değeri, volkan yerine ise kendi linkibol rumuzunuzu ekleyin ve blog/site şablonunuzda nereye isterseniz ekleyin. Bu kadar kolay!

<div id=”feed-control”><span style=”color:#676767;font-size:11px;margin:10px;padding:4px;”>Yükleniyor…</span></div>
<p><a style=”margin: 2px; padding: 4px; display: block; width: 100%;” href=”http://www.fikribol.com/donkisot/?p=70″>bu dinamik linklerden<br/>ben de istiyorum &raquo;&raquo;</a></p>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=YOUR-KEY“></script>
<script src=”http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js” type=”text/javascript”></script>
<style type=”text/css”>@import url(”http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css”);</style>
<script type=”text/javascript”>
function LoadDynamicFeedControl(){var feeds=[{title:”<strong>linkibol</strong>da neler oluyor?”,url:”http://www.linkibol.com/link.bul/atom/linkibolcu/volkan“}];
var options={stacked:true,horizontal:false,title:”linkibol en güncel 10″,numResults:10};
new GFdynamicFeedControl(feeds, ‘feed-control’, options);}
google.load(’feeds’, ‘1′);
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Afiyet olsun!

not:
http://www.linkibol.com/link.bul/atom/linkibolcu/volkan yazan yere herhangi bir RSS/ATOM beslemesi de konulabilir.

Türkiye’de başarılı web uygulaması nasıl yapılır kavramına odaklanmışken, linkibol üzerinde bugün yaptığım bir görsel kullanılırlık incelemesini paylaşmak istedim.

Tabii ki linkibola daha eklenecek pek çok özellik var (elimde linkibolculardan gelen istekler doğrultusunda şekillenen padişah fermanını aratmayan bir yapılacaklar listesi var. Bununla birlikte pek çok kişinin severek kullandığı bir sosyal platformu geliştirmek hem eğlenceli, hem de heyecan verici.

Bu yazıda ViewFinder algoritması yardımıyla oluşturduğum ısı haritası üzerinde birtakım incelemeler yapacağım:

Yukarıdaki ısı haritasında linkibola ziyaret edenlerin en çok odaklandığı noktaları görüyorsunuz.

Isı haritasını inceleyince uygulamanın kullanılırlığı açısından şu sonuçlara varılabilir:

• “10 saniyede üye ol” dikkat çeken alanlardan biri. Bunun iki avantajı var:
  • Siteye yeni giren bir ziyaretçi, ilk anda nereden üye olabileceğini görüyor.
  • Bu noktaya odaklanan kişi hemen altındaki “üye girişi” butonuna da ister istemez odaklanacaktır.
• “linkibol turu” da dikkat çeken bir odak noktası — ki bu da önemli bir ayrıntı.
  • “linkibol turu’na odaklanan göz aynı zamanda linkibol’un kısa tanımına da kayacaktır. — bu da kişinin ilk bakışta site hakkında bir fikir sahibi olması için yararlı bir konumlandırma.
• Sağ üst alandaki maviden beyaza olan gradient kullanıcının ilgisini gereğinden fazla uzağa çekiyor gibi görünse de gözün bir sonraki hareketi “en popüler linkibolcular” ve “atom beslemeleri” bölümüne kayacağı için dengeleyici bir unsur.
• linklerin sıralandığı ana alanda linklerden çok link puanlarına (linkipuan) odaklanma var. — Bu yapının kullanıcı davranışını nasıl etkilediği incelenmeli.
• ilgili sayfayı kısaca özetleyen ipucu (turuncu) alan yeterince dikkat çekiyor ve gözün bir sonraki hamlede ana içeriğe odaklanmasına yardımcı oluyor. — Bu güzel bir şey. Yine kullanıcının bir bakışta bulunduğu sayfada neleri yapabileceğine göz attıktan sonra asıl içeriği tarayacaktır — ve asıl güzel olan bunu istemsiz olarak yapacaktır.
• Üst navigasyondaki yukarıdaki aktif sekme “linkibol” dikkat çekiyor. Kullanıcının bir bakışta nerede olduğunu bilmesi açısından önemli.

…

Ek:
Konuyla dolaylı ilgili olarak Bülent Sakarya’nın bir yazısı var.

Biraz konu dağılacak ama orada yazdıklarımı buraya da eklemem yararlı olacaktır:

“sosyal imleme” ve “sosyal haber” kavramlarının Türkiye’de tam anlamıyla oturması için bir süre daha beklememiz gerekli.

Ancak, Türkiye (ve Türk blogküresi) çoğu kişinin tahmin ettiğinden çok daha hızlı bir ivmeyle ilerliyor.

Zaten bunu görüp eyleme geçenler de var (bkz. Arda Kutsal — blograzzi; Eray Endeş — bloglama)

Şu an için herhangi bir siteden bir slashdot ya da bir digg etkisi beklememiz olası değil.

Zaten böyle bir şey beklemeye gerek de yok.

Önemli olan sosyal imleme sitelerinin blogunuza kattığı anlık trafik değil; bu sitelere düzenli katkıda bulunarak kitlenin geneline kattığınız katma değerdir.

Tüm sosyal ağlarda durum böyle aslında. Yani siz bir sosyal ağa ne kadar çok değer katarsanız, sosyal ağdan da o kadar değer görürsünüz.

linkibol site istatistiklerinden birkaç gözlemim:

1. Popüler (en popüler 20) linkibolcuların eklediği linklere çok daha fazla geri dönüş oluyor.

2. Bu geri dönüş dağılımı bir zipf eğrisi gösteriyor.

Yani en popüler linkibolcu genel trafikten 100 birim pay alıyorsa, onuncu popüler linkibolcu genel trafikten 10 birim pay alıyor — ve bu böyle devam ediyor. — Aslında düşündürücü ve şaşırtıcı bir dağılım.

…

Gerek CTO olarak görev yaptığım cember.net‘ten gerekse geliştirmeye devam etttiğim linkibol.com‘dan bu konuda pek çok şey öğrendim/öğrenmeye devam ediyorum.

Bu öğrendiklerimden bir kısmını bağlı olduğum NDA çerçevesinde açıklayama. Bununla beraber, yer yer ilgimi çeken çarpıcı ayrıntıları sizlerle paylaşmaya çalışacağım.

Kusura bakmayın konu biraz dallanıp karıştı. Düşünce ve yorumlarınızla toparlarsınız artık