Sürekli yeni projeler üretiyor, çoğunlukla hızlı bir şekilde basit arayüzler hazırlıyorsanız elinizin altında bir ui library oluşturmuşsunuz veya hazır bir arayüz setini kullanıyor olabilirsiniz. İnternette onlarcasını bulabileceğiniz kitlerin hepsi farklı amaçlara hizmet eden farklı çözümler sunan kitler genelde.

Çok basit bir örnek senaryo vereceğim, php tabanlı bir proje hazırlıyorsunuz, on yüzünü yazdınız ve implemente ettiniz. Sırada bir yönetim paneli hazırlamak var yazdığını koda ve veritabanına. Bunun için çok farklı yollar izledim yıllardır, son birkaç yıldır artık oturttuğum bir html4, less/css altyapım var. Basit bir MVC ile phptal ile view'lar phptal templateleri olarak buluyor ve less'leri derleyerek sade bir arayüzde kullanıyorum herşeyi.

Ama twitter bootstrap fikirlerimi biraz değiştirmeye başladı. View'larima çok fazla dökünmadan sadece html çıktılarımı biraz oynayarak twitter bootstrap'i projelerimden birine çok pratikçe entegre etmeyi başardım ve her geçen gün isimi daha kolaylaştırdığını görüyorum.

Güzel yani twitter tarafından geliştirilen bir arayüz kiti, daha da güzel yani açık kaynak kodlu ve birçok kişinin geliştirilmesine katkıda bulunduğu bir proje. Dolayısıyla crossbrowser problemleri çok fazla yok. Hatta eğer arayüzünüzü doğru tasarlarsanız responsive bir arayüzü de çok kafa yormadan sağlayabiliyorsunuz.http://twitter.github.com/bootstrap/scaffolding.html

Neredeyse bütün arayüz elementlerini düşünmüşler. Dolayısıyla bir web uygulaması için birçok hammal is yükünü üstünüzden alıyor.http://twitter.github.com/bootstrap/components.html

Neyse, proje sayfasından örnek uygulamaları, jquery geliştirmelerini ve github deposuna ulaşacağınız linki bulabilisiniz.

http://twitter.github.com/bootstrap/
Bir web sayfasındaki yüklenmeyen resimleri çoğu zaman doğru yönetilmediği için bozuk resim olarak görüyoruz hatta bazen de tasarımın kaymasını, arayüzde bozukluklar olabiliyor.

Örnek bir senaryo: bir makele yazdınız ve internette başka bir sitedeki resimi kullandınız, 1 ay sonra resim o siteden kaldırıldığı zaman, veya site kapandığı zaman sizin sitenizdeki yazıda resimler bozuk görünecektir. Tabi ki bunun tek cözümü resimleri bulmaya çalışmak, ya da o şekilde bırakmak isteyebilirsiniz. Fakat siz bu değişiklikleri yapana kadar, sitenizde bozuk resim (yuklenemeyen) olarak görünecek.

Bir resim yükleyemediğinizde yapabileceğiniz birkaç şey var, birincisi yüklenmemiş resimleri ortadan kaldırabilirsiniz, ama resimler içerikle çok ilişkili ise, mesela yazınızda ekran görüntüsünden bahsediyorsanız ve oratada bir ekran görüntusü yoksa resmin bozuk görünmesinden daha büyük bir yanlış anlaşılma ile karşılaşabilirsiniz. Resmi kaldırabilir veya jenerik bir "yuklenemis resim" imaji gösterebilirsiniz.

Eğer kaldırmak istiyorsanız img etiketi içindeki onerror özelliğinde resminizi kaldırabilirsiniz.

Not: Sayfanızda jQuery kullanıldığını varsayıyorum.
<img src="..." onerror="$(this).remove();" alt="" />
Böylece resminiz yüklenmede başarısız olursa ortadan kaldırılacaktır.

Eğer jenerik bir resime çevirmek istiyorsanız:
<img src="..." onerror="$(this).attr('src', 'basarisiz.png');" alt="" />
Bu örnekler sadece tek imaj için yazılmış örnekler,

Eğer tüm sayfanıza etki edecek daha jenerik bir uygulama yapmak için;
$(function(){
	$('img').bind('error', function(){
		//$(this).remove();
		// or
		$(this).attr('src', 'basarisiz.png');
	});
});
Ancak böyle bir uygulamada sitenizdeki tüm imajlar etkileneceği için tasarımınızı şekillendiren imajların bundan etkilenmesini istemeyebilirsiniz. Bunu yapmak için de jquery seçicisini kısıtlandırabilirsiniz: "img.hatadaKaldir" veya ".yazi img"
Twitter'in kendi widgetları sayesinde twitter hesabınızın public timeline yani akışını sitenize ekleyebiliyorsunuz fakat o widgetı kullanmak zorunda değilsiniz. Twitter api ile akışınızı jquery ile alıp kendiniz çizebilirsiniz. Aslında çok basit. Twitter apisi zaten size public timeline'ınızı json nesnesi olarak veriyor herhangi bir api key kayıdı yapmaya gerek kalmadan.

Bu json nesnesinin adresi
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mfyz&count=10&callback=?
Adresteki mfyz benim twitter kullanıcı adım. count parametresiyle de en son pos edilen içeriklerin listesinin boyutunu belirleyebiliyorsunuz, sanırım bu parametrede bir üst limit var.

Yukaridaki adresi tarayıcınıza yapıştırırsanız json nesnesi alırsınız. jQuery ile bu json nesnesini işleyecegiz. Bunun için jquery'deki getJSON() fonksiyonunu kullanacağız. jQuery, normal .ajax() fonksiyonu gibi bu json nesnesini xmlhttprequest yani ajax ile alıp sonucunda işleyebileceğimiz bir javascript objesi olarak bize sunuyor.

Size bu işi yapan tüm kodu verip sonra kod üstünden açıklayacağım:
var $tweetList;
var $tweetUrl = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mfyz&&count=10&callback=?';

$.getJSON($tweetUrl, function (data) {
	$.each(data, function (i, item) {
		if (i == 0) {
			$tweetList = $('<ul class="tweetList">');
		}

		// handle @reply filtering
		if (item.in_reply_to_status_id === null) {
			$tweetList.append('<li class="tweet_content_' + i + '">' +
				'<p class="tweet_link_' + i + '">' +
				item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>')
					.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ')
					.replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2') +
				'</p></li>');
		}
	});

	$('#tweetStream').html($tweetList);
});
Yukaridaki kod 2 tane değişken tanımlaması ile başlıyor. Birisi api url'i diğeri de html kodunu üreteceğimiz taşıyıcı değişken. Gördüğünüz gibi getJSON fonksiyonu ile url'i belirtip ikinci parametre olarak callback fonksiyonunu tanımladık. Callback fonksiyonu, dönen json nesnesini içerir, bu örnekte "data" adındaki değişken olarak geçiyor. data dizisini dönerek tüm elemanları html kodu üreterek ekleyecegiz listeye.

Döngü içindeki ilk kontrolde eğer taşıyıcı değişken daha üretilmediyse html listesi olarak üretiliyor. Sonrasında bu liste içine satır olarak ekleyecegiz tüm twitter girdilerini.

Bir diğer kontrol ise sadece doğrudan yazılan tweet'leri işleyecegiz, bunu da yazılan tweet'in cevap olmamasını kontrol ederek yapıyoruz. Sonra da taşıyıcı listeye ekliyoruz tweet edilen yazıyı işleyerek. Bu aşamada ise regular expressions ile @username, #hashtag veya url gibi özel yazıları linklere dönüştürüyoruz.

Döngü bittiğinde de html'inizdeki herhangi bir elemanın içine bu üretilen listeyi basabilirsiniz, bu örnekte tweetStream kimliğine sahip nesnenin içine basılıyor.

Bu kodun calışan örneğini anasayfadaki sağdaki kolonda görebilirsiniz.
Home.js dosyasında yukarıdaki örnegi görebilirsiniz.

Hazırlayan: Mehmet Fatih YILDIZ
3 Eylül Cumartesi ´11   —   4 Yorum
Biliyorsunuz site ustunde buyuk degisikliklerle mesguldum. Nihayet mimari degisiklikler sonuclanmaya basladi, cogu bitti diyebilirim. Hala var fakat artik on yuzde gorunur seyleri de degistirmeye basliyorum. Bunun bir kismi 2-3 haftadir mootools ile jquerynin beraber calisarak bir tasima surecinde olmasi seklinde gecti.

Simdi mootools bagimliligi olan herseyi temizledim. Bazi seyleri sadelestirdim, zamaninda fazla gorseli destekleyen bir javascript yaklasimda kodluyormusum.

Sonuc olarak site artik tamamen jquery ustunde sekilleniyor, eski seyleri tasima bitti. Simdi yavas yavas bunun uzerine gelistirme olarak ilerleyecegim.
Gorunur degisikliklerden biri de footer oldu. Yakinda eskisine yakin bir hale getirecegim fakat tamamen tasarim degisimine de ugrayabilir. Su an fonksiyonel olarak bir kayip yok eskisine gore.

Popüler Etiketler

facebook api auth apple macosx license google chart osx applications free session cookie startups örnek kod css firefox logo kontrol yapıları if while ruffles wanda oyun optimizasyon mdb2 pear sql injection mootools ipucu compile nedir social network app developer search cache php apache kurulum web app open source tebrik internet statistics mail newsletter subscription javascript jquery rss xml iphone ipad less language development style dokuman portfolio js ajax wordpress ios itunes mobile banner ingilizce blog iOS ie css3 support browser zaman url service tool ide editor phpstorm jetbrains deployment version control svn git html linux konsol login framework plugin query htaccess mysql media sosyal medya twitter doritos http mssql lisans subdomain optimization gimp table code terminal laptop notebook subversion html5 form input route router mod_rewrite internet explorer export date diff tarih istatistik graph pharma hack lifestream parse server proje wireless windows fstab ntfs signature imza opengraph fql prepare execute pgsql button insanlar object coding kampanya integration mfyz app store store in-app purchase purchase verification storekit itunes connect share db sitemap seo analyse procedure xmlhttprequest job tytz radio switch textarea calendar generator workspace meta player regex ui ux webkit screen bootstrap music howto widget connect box icon ikon grafik download spam browsers database compiler on-the-fly www redirect crossdomain icons xhtml digital cms ubuntu assets design link nasıl kitap select