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

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