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

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