Bootstrap, jQuery’ den sonra gelen yeni nesil web in en büyük nimetidir

Javascript ve sonrasında Ajax ile tanıştığım yılları dün gibi hatırlıyorum, hatta “Nereden Nereye” adında ki bitmeyen yazımda da bu süreçten bahsediyorum. Google, Facebook ve Twitter gibi büyük abiler sadece verdikleri hizmetlerle değil geliştirdikleri teknolojilerlede günümüz webine yön verdiler ve vermeye de devam ediyorlar. Belki de bu yüzden büyükdürler he :|

Yazının hemen başında bir saplama yapayım :D jQuery; JavaScript framework lerinin WordPress’ idir desem bundan ne anlarsınız? Ben şunu anlıyorum;

  • Javascript bilmeyen jQuery’ i bilen bir sürü insan var. Hiç bir web programlama dili bilmeyen ama WordPress bilende bir sürü insan var.
  • jQuery geliştiricilere JavaScript’ i sevdirdi, WordPress ise interneti, içerik üretmeyi.
  • WordPress e bir kaç tıkta stabil çalışan temalar, eklentiler ekleyip çıkartıyoruz. jQuery’ de de durum aynı.
  • İkiside işini öyle düzgün yapıyor ki performans çoğu zaman kimsenin umurunda olmuyor.
  • “WordPress de jQuery de insanları yazar – geliştirici yaptı.”

Web geliştirme teknikleri, teknolojileri gerek ön tarafta (client) gerekse arka tarafta (server) o kadar acayip ve hızlı şekilde ilerliyorki, zaman zaman hangisini nerede, nasıl kullansak diye günlerce değerlendirme yaptığımız oluyor.

İşin ön ve arka tarafını bilen biri olarak kesin ve net olarak söylemeliyim ki en bok taraf ön taraftır. Bu sebepten dolayı ön taraftaki gelişmeler yeni teknolojilerden ziyade yeni bakış açıları, farklı kullanım şekilleri yada işleri kolaylaştırmaya yönelik oluyor.

Ön tarafın karmaşıklığı; bir çok katmanın ve unsurun bir arada düzgün çalışabilmesinden ileri geliyor. En kaba şekliyle (Görsel Tasarım) -> (Html, Css, Js) -> (Mobil, Bilgisayarlar) -> (Tarayıcılar) Burada js ye köşeli parantez açıp detaylandırmak isterdim ama başka zaman inşallah.. İşin birde, arka tarafla ön tarafın bağlanması meselesi varki doğru planlanmaz ise tam bir cinnet sebebi..

Konu o kadar derin ki çat diye BootStrap meselesine geçmek istiyorum ama geçemiyorum. Ama direksiyonu kırmak zorundayım. Günümüz tasarımları 2-3 sene öncesine göre çok daha sade ve az karmaşık durumda. Görünümler sadeleşip, basitleşince, ister istemez bazı kalıplar oluşmaya, oturmaya başladı. Bu arada, dünyanın en zor işlerinden biri; fonksiyonaliteden ödün vermeden bir şeyi sadeleştirip, basitleştirmektir.

Günlerden bir gün Twitter’ da ki abiler yada bir abi kuvvetle muhtemel, yine yeniden “border:1px solid #ededed; border-radius:5px” yazarken çıldırdı ve ben çektim insanlık çekmesin diyerekten sık kullanılan elementleri kolayca kullanabilelim diye Bootstrap adıyla bir araya getirdi. Nedir bu sık kullanılan elementler? Navigasyonlar, form elementleri, butonlar, uyarı kutucukları, ikonlar, tooltip, tablar ve bence daha da önemlisi grid sistemi..

Eğer Bootstrap’ ın sunduklarına bağlı kalarak bir tasarım yaparsak, farklı tarayıcılarda en az hatayla görüntülenen ve ekran çözünürlüğüne göre kendini uyarlayan (responsive) bir tasarım elde edebiliriz.

Her geçen gün Bootstrap için geliştirilen eklentiler, renk paletleri, şablonlarda çoğalıyor. Aslında jQuery’ nin geçtiği yollardan geçiyor dersem cuk oturur. Buda zaman içinde aynı jQuery örneğinde olduğu gibi insanların html yi, css i ve işin mantığını öğrenmeleri için bir sebep olacaktır.

Ama Neden BAY J, böyle bir şeye gerek var mı?

Çünkü bizler çok elit insanlarız, kurallarımız, sınırlarımız var! Adam arka tarafta kod yazıyor, kesinlikle html, css, js yi öğrenmek istemiyor yada bu ayağa yatıyor bilemiyorum. Öbürü de ben daha ince işlerin adamıyım arka tarafın a sını öğrenmek istemiyorum havasında. Burada yine bir saplama yapayım. Bu adamlar javaScript de ki gelişmelerin gösterdiği kadarıyla, yakında javaScript ide bizim işimiz değil diye tamamen bir kenara itecekler. Görsel tasarımı yapan adam css ve html yi öğrenmemekte ısrarcı davranıyor. Geçenlerde ios ile ilgili uygulama geliştirme videosu izliyordum, arkadan biri soruyu patlattı, json nedir diye. Bu neyin kafası lan? Birde bizim işe bakalım.. Adam css + html ile tasarımı parçalıyor, amiyane tabirle götü bir yanda, başı başka bir yanda. Bu adama çoğu zaman kızamazsınız çünkü yukarıdan tasarım öyle bir gelmiştir ki web için değilde sanki bizim sanayide ki pideciye menü tasarlanmıştır. Be yaratıcılığı gelişkin insan, be ilhamın gelmesini bekleyen insan, az yaptığın işe saygın olsun da, biraz daha az gezde ucundan da olsa öğren şu işi yav! Devamında bu css ve html can bulmak üzere aşağıya gelir. Bu sefer aşağıda ki adam yukarılardan bir haber olduğundan, ortaya öyle bir iş çıkarki ne ilk tasarlanan tasarıma benzer, ne de işlevler adam gibi çalışır. Revizyon falan hiç girmiyorum bile. Sonra iki günlük proje dinazorlardan kalma gibi çatır çatur zor çalışıyor.  Hele birde biri çıkıp demez mi 2px kaymış diye, bu da olayın en acayip kısmıdır.

İşin şöylede bir kısmı var, iş bitti bitecek yada her neyse, adam bekliyor. Ne bekliyorsun? js de hata var üstteki adamı bekliyorum, css de hata var üstteki adamı. Ne bekliyorsun? Şuranın renginde problem var da tasarımı bekliyorum. O kafalarla daha çok beklersiniz benden söylemesi..

Normalde bu yazıyı podcast şeklinde yapayım dedim ama edeceğim küfürlerden ötürü vazgeçtim. Şimdi bakıyorum da iyi ki yazmayı tercih etmişim..

Özetle, işiniz web ise her yerinden, her şeyinden en azından fikriniz olacak kadar, yahu çok değil Google’ a sorabilecek kadar bilgi sahibi olmak zorundasınız. jQuery sayesinde insanlar öcü gibi görünen javaScript’ i öğrenmeye başladı. İnşallah Bootstrap ile de html ve css kısmının bir tarafından tutarlarda köprüyü tamamlamış olur.

Tamam beyler, logoyu 1 tık sola çekip dağılıyoruz..

*Back-End, Front-End, Ui Designer, Ux Designer gibi ifadeleri kasıtlı olarak kullanmadım, sebebi ise tamamen kişisel..

 

jQuery More eklentisi

Tahmin ediyorum 3 hafta sonra kaldığım yerden yazılarıma devam edeceğim. Bir proje için yazının tamamını gör olayını yaptım, bugünde bu olayı eklenti haline getireyim hemde jQuery e nasıl eklenti yazılıyor bunu bir göreyim diyerek more eklentisini yazdım :) (Hayatımın en garip duygulu günlerinden birini geçiriyorum, bu sebepten dolayı cümlelerde anormallikler olabilir, kodlarda da, sonra uğrar düzeltirim.)

Eklenti şu işi yapıyor; diyelim uzunca bir yazı var ve siz bunun ilk 100 karakterini göstermek istiyorsunuz, 100 karakterden sonra çıkan bir düğmeylede yazının tamamını gösteriyorsunuz. Yada kendi belirlediğiniz bir ayraçla bu işlemi yapabiliyorsunuz. Bu arada eğer özellik açıksa ki varsayılan olarak açık, html etiketlerini kaldırıyor, devam et düğmesine basıncada yazının orjinal halini getiriyor.  Örneklere bakarak demek istediğimi daha iyi anlayabilirsiniz.

$(document).ready(function () {
  $(".more").more();
  $(".more").more({text:' ..more',textClass:'moreLink',character:50,splitChar:'{devam}'});
});

Eklentinin git adresi: https://github.com/apoStyLEE/jQuery-More-plugin

Örnek: http://95.0.146.135/jqueryMore/

jQuery UI sürükle bırak ile alış veriş sepeti mantığı

Uzun zaman önce hayalini çok kurduğumuz fakat yeterince javascript bilmemekten ve kütüphanelerin bu denli gelişmiş olamayışından dolayı bir türlü gerçekleştiremediğimiz bir olaydı bu. Nereden aklıma geldi bilmiyorum, fakir bir çocuğun zengin olduğunda hayalini kurup bir türlü yapamadığı şeyi yapması heyecanıyla sarıldım web matrixe :) Heeeeeman, güç bende artık !

Okumaya devam et jQuery UI sürükle bırak ile alış veriş sepeti mantığı

jQuery serialize ve serializeArray fonksiyonları

Bu yazıda jQuery ile serileştirme (serialize) olaylarına değineceğim. Serileştirme, bir grup form elemanın elemanAdi ve içindeki değer olarak bir string haline yada dizi (array) haline getirilmesine diyoruz. Bu yöntem özellikle ajax ile veritabanı işlemleri yaparken kullanılıyor.


Okumaya devam et jQuery serialize ve serializeArray fonksiyonları

Profil sayfası kişiselleştirme ve ComplexType

Başlık biraz karışık oldu sanırım, biraz açayım. Profil sayfası kişiselleştirme dediğim; Twitter, FriendFeed gibi sayfalarda arkaplan resmini, konumunu ve renkleri isteğimize göre düzenleyebiliyoruz, yani profilimizi kişiselleştirebiliyoruz. ComplexType ise ilk konudan bir hayli alakasız aynı zamanda ComplexType olayını anlamak için çok alakalı. En kaba tabirle; modelimizde ki belirli özellekleri kümelediğimiz ve kod yazarken bize çok büyük kolaylık sağlayan bir yaklaşım.

Okumaya devam et Profil sayfası kişiselleştirme ve ComplexType

Ajax ile daha fazla kayıt göster olayı (Load More Data)

Yine kullanımını ilk olarak Facebook ve Twitter’ dan gördüğümüz bu olayın temel mantığını bildiğimiz sayfalama oluşturuyor. Neden bu şekilde bir sayfalama kullanmak gerekiyor isterseniz bunlara bir bakalım.

  1. Sayfa komple yenilenmeyeceğinden daha işlevsel. Örneğin; kullanıcı video izlerken altında ki yorumları sayfa sayfa dolaşmak isterse, video yarıda kesilmeyecektir.
  2. Sayfanın sadece ilgili yerini, ilgili kayıtlar kadar güncelleyeceğimizden daha performanslı. Bu performans sunucu tarafında; daha az sistem kaynağı tüketimi, kullanıcı tarafında ise; sayfanın yüklenme süresi olarak gözlenebilir. Özetlersek sunucudan yapılan isteği minimize etmiş oluyoruz.

Çektiğim videoların birinde dile getirdiğim bir konu vardı, yukarıda ki maddeleri görünce yazılı olarak da eklemek istedim. Anlık çok fazla kullanıcıya, çok fazla isteğe cevap verme durumunda olan siteler ajaxı bizim kara kaşımıza yada şekilli olsun afilli olsun diye kullanmıyor. Örneğin Facebook her işlemde sayfayı yeniden yüklemeye kalkarsa altından kalkılamaz bir yükle karşı karşıya kalır. Anlık Facebook’ a yazılan yorum, mesaj yada benzeri girdileri düşündüğümüzde ajaxın hava yastığı görevi gördüğünü hayal etmek güç olmasa gerek. Özetlemek gerekirse, ajax yaklaşımı şekilden ibaret değildir ;) Konumuza geri dönelim.

Okumaya devam et Ajax ile daha fazla kayıt göster olayı (Load More Data)

DataAnnotationsExtensions ile form doğrulama (validation)

Asp.Net Mvc’ de doğrulama (validation) işlemleri için modelimizdeki alanlara açıklamalar (Annotations) yazıyoruz. Bu alan zorunludur yada en fazla 10 karakter girilebilir gibi en temel doğrulama kuralları varsayılan olarak gelirken, e-posta yada adres doğrulama gibi işlemler için kendi doğrulama fonksiyonlarımızı yazıyoruz. Nuget Gallery deki DataAnnotationsExtensions.MVC3 paketiyle bu ekstra yükten kurtulabiliyoruz. İlk göze çarpanlar; e-posta doğrulama, en az uzunluk, adres doğrulama, şifre uyumu ve dosya uzantısı kontrolü. Daha fazlası için projenin ana sayfasına bakabilirsiniz.

Paketleri projemize nasıl eklediğimizi şurada yazmıştım. Örnek kullanım şu şekilde.

    public class modelim
    {
        public int id { get; set; }

        [Email]
        [Required]
        public string eposta { get; set; }

        [FileExtensions("png|jpg|jpeg|gif")]
        public string dosyaAdi { get; set; }

        [Min(2,ErrorMessage="en az uzunluk 2")]
        public int sayi { get; set; }

        [Required]
        public string sifre { get; set; }
        [Required]
        [EqualTo("sifre",ErrorMessage="Şifreler aynı değil")]
        public string sifreTekrar { get; set; }

        [Url]
        public string adres { get; set; }
    }

jQuery ile Laz İşi Ajax Push

Özellikle Friendfeed, Twitter, FaceBook gibi sosyal ağlarda sayfa yenilenmeden verilerin güncellendiğini biliyoruz. Bu tür bir durumu gerçekleştirmek için akla ilk gelen yöntem ajax ile verinin bulunduğu yeri belirli zaman aralıklarında yenilemek geliyor, fakat veri trafiğinin çok üst düzey olduğu bu sistemlerde sürekli yenileme yapmak aşırı kaynak tüketimine hatta sistemin durmasına sebep olur. Bu işi şüphesiz en iyi yapan site FriendFeed, o kadar iyi yaptılar ki FaceBook bu siteyi ve geliştiricilerini satın aldı :) Neyse oralara daha fazla girmeden konumuza dönelim.

Okumaya devam et jQuery ile Laz İşi Ajax Push

Mvc 3 ile Ziyaretçi Defteri

Çok sevdiğim bir öğrenci arkadaşım, “abi ziyaretçi defteri yapar mısın bana ?” dedi,  yaparım dedim. Ne kadar sürer dedi, taş patlasa 1 saat dedim. Mvc 3 sağolsun 15 dakika da istediğimiz özelliklerdeki ziyaretçi defterini yaptık :) Yeni başlayan arkadaşların işine yarar diye bu örneği paylaşmak istedim. Bu basit defterde, code-first ile model ve doğrulama (validation), jQuery Ajax ve sql compact 4.0 kullandık. Örneği buradan indirebilirsiniz, umarım faydalı olur.

Bu görseli başka bir yazı için hazırlamıştım, sanırım bundan sonra sık sık kullanacam, çok güzel oldu yav :) Okumaya devam et Mvc 3 ile Ziyaretçi Defteri

jQuery ile performans hareketleri – 3

Bir menümüz var diyelim, kullanıcı herhangi bir elemana tıkladı ve o sayfaya gitti. Kullanıcının nerede olduğu göstermek için menüden ilgili bölümü işaretlememiz yada bir şekilde belli etmemiz gerekiyor. Yada bir kategori menümüz var ve kategorilerin alt kategorileri şeklinde de bir hiyerarşimiz bulunuyor, kategori seçildiğinde altındaki diğer kategorileride belli etmemiz gerekiyor. İşte bu tip seçme durumlarında jQuery ile işimizi çok basit bir şekilde görüyoruz. Bunu asp, php vb.. dillerle yapmak için heleki menü dinamik oluşmuyorsa kaç satır yazmanız gerekiyor tahmin bile edemiyorum, basit bir hesapla menüdeki eleman sayıları kadar, yani çOOook. Lafı uzatmadan örneklerimize geçiyoruz. Unutmadan buradaki ve buradaki hareketlere göz atmanızda fayda var ;)
Okumaya devam et jQuery ile performans hareketleri – 3

jQuery ile performans hareketleri – 2

İlk yazımızda count işlemlerine bakmıştık. Bu yazımızda ise başımızda ki en büyük sıkıntılardan biri olan selectbox, radiobutton, checkbox gibi elemanların form düzenleme ekranında yada benzeri bir durumda ilgili seçeneğin nasıl seçileceğine yada işaretleneceğine değineceğiz. Yani kullanıcıya önceden seçtirdiğimiz yada işaretlettiğimiz seçeneğin tekrar kullanıcıya gösterildiğinde ilgili değerlerin seçilmesi olayından bahsediyorum :) (cümleler epey bir devrildi) Örneğin kullanıcı dinamik oluşturmadığımız, içinde 5 tane eleman olan bir selectbox dan bir seçenek seçti ve kaydetti. Kullanıcının formu düzenlemesi gerektiğinde bir if bloğuyla türlü taklalar atıp ilgili seçeneğe “selected” niteliğini (attribute) eklememiz gerekiyor. Bu durum diğer elementler içinde geçerli bir durum. Mesela 5 seçenekli bir checkbox grubumuz var, kullanıcı içlerinden herhangi 3 tanesini işaretledi ve tekrar düzenlemek istedi, if senaryosunı aynen tekrarlamamız gerekiyor. Bu noktada yine jQuery Selector() imdadımıza yetişiyor ve ufak kod parçalarıyla taklalardan uzaklaşıyoruz. Hemen örneklerimize göz atalım;
Okumaya devam et jQuery ile performans hareketleri – 2

jQuery ile performans hareketleri – 1

Bu yazı serisinde jQuery ile nasıl performans çakallıkları yapabiliriz bunlara değineceğim. Zaman zaman çok ufak nüanslar ile ciddi yüklerden kurtulabiliyoruz, önemli olan bu nüansları görebilmek. Yaptığım işlerde jQuery’ i sadece bu amaçlarla kullandığım bile oluyor. Neyse lafı fazla uzatmadan ilk hareketimize geçelim.


Okumaya devam et jQuery ile performans hareketleri – 1