19 Eylül Çarşamba ´12   —   4 Yorum
Javascript alert'in tarayıcılara göre farklı pencere şekillerinde çizdirildiğini biliyorsunuz. Sadece farklı pencere şekilleri değil aynı zamanda içinde sistem fontu kullanılması, pencere başlığına veya onay tuşunda yazan yazıya müdahale edilememesi veya sayfanın çalışmasını durdurması gibi engelleri olduğunu zaten biliyorsunuz.

Şimdi gelelim çok basit bir kullanımıyla
alert('Mesajınız başarıyla iletildi. En kısa sürede cevaplamaya çalışacağım.');
şeklinde ürettiğiniz onay/hata/mesaj kutusunu



çok benzer kullanımla
alertf('<h3>Mesajiniz başarıyla iletildi.</h3> En kısa sürede cevaplamaya çalışacağım.\
<br /><br /> Bu sırada <a href="/blog">blogumu</a> inceleyebilirsiniz.');
şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya



çevirmeye.

Gereksinimler

Projenizde jQuery kullandığınızı varsayıyorum. jQuery ile kullanabileceğiniz hatta belki halihazırda kullanmakta olduğunuz lightbox kütüphanesi olan fancybox'u kullanarak basit bir javascript alert fonksiyonu hazırlayacağız. fancybox yerine kendi lightbox kütüphanenizi veya jquery dışında kullandığınız framework'ü de kullanabilirsiniz. Aşağıda kodu doğrudan vererek açıklayacağım.
function alertf(html){
	if (arguments[1]) closehref = arguments[1];
	else closehref = 'javascript:$.fancybox.close();';

	contentHTML  = '<div style="text-align:center; font-size: 18px; min-width: 200px; margin: 20px 40px;">'+ html +'</div>';
	contentHTML += '<div style="text-align:center;"><a href="' + closehref + '" class="button">Tamam</a></div>';

	$.fancybox({
		content: contentHTML
	});
}
Hem alert fonksiyonuna yakın olması hem de "alert fancy" yani süslü/havalı mesaj kutusu anlamına geldiği için de "alerf" adında bir fonksiyon yazarak, zorunlu tek parametre tanımlayacağız. Zorunlu olan tek ve ilk parametre mesajınızın içeriği olacaktır. Bu parametre HTML de olabilir düz metin de olabilir.

Her lightbox kütüphanesinin, bir şekilde sadece javascript çağrısı yapılarak bir kullanımı vardır. fancybox'un bu şekildeki kullanımı için, basitçe $.fancybox fonksiyonu çağrılıp içeriği "content" parametresiyle belirtiyoruz.
$.fancybox({
	content:"Merhaba dostlar"
});
alertf fonksiyonunda aslında basitçe içinde mesaj ve buton olan bir lightbox kutusu çizdiriyoruz. "button" sınıfıyla da link olarak tanımlanan elementi buton görüntüsüne çeviriyoruz. Bunun için herhangi bir css buton stili yeterli olacaktır. Mesaji çevreleyen div'i, stillerini, butonu temsil eden linki ve onu çevreleyen div'i ve stillerini javascript fonksiyonumuzda string olarak kodluyoruz. Sonrasında zaten fancybox ile ekrana çizdirmek kalıyor.

Fonksiyonun ilk satırlarında dikkatinizi çekeceği üzere, basit bir kontrolle, bu fonksiyon cağırıldığında ikinci bir parametre belirlenip belirlenmediğini kontrol ediyoruz. Bunun nedeni ise, tek buton olan "Tamam" butonuna basıldığında yapılacak aksiyonu değişitebilme kabiliyeti eklemek. Bir çok noktada ihtiyacınız olabilecek olan bu özellik, bir mesaj kutusu çizdirdiğinizde butona basıldığında başka bir sayfaya yönlendirme veya kutuyu kapatmak yerine başka bir javascript cağrısı yapmak gibi şeyler yapmanızı sağlayacak. Bunu da alertf fonksiyonunun ikinci parametresini kullanarak yapabileceksiniz.

Örneğin
alertf('<h3>Mesajiniz başarıyla iletildi.</h3>', 'tesekkurler.html');
kullanımı, "Tamam" butonuna basıldığında kullanıcıyı tesekkurler.html sayfasına yönlendirecektir.

Bu methodla normal alert fonksiyonu yerine alertf fonksiyonunu kullanarak çok daha zengin bir mesaj kutusu çizdirebilirsiniz. Bu noktadan sonra projenizdeki tüm alert çağrılarınızda fonksiyon adına f eklemeniz, javascript kutularını havalı hale getirmeye yeterli olacaktır.
5 Ocak Perşembe ´12   —   2 Yorum
Şu an kullandığımız bilgisayarların ilk prototiplerinden beri insanoğluyla etkileşimini sağlayan araçlar, kontrolleri oldu ilk kontrol tabi ki klavye, numpad gibi düğmeli cihazlardı. 90’larda Apple’ın bilgisayar faresini üretmesiyle daha hassas etkileşimi sağlar olduk. Hâlâ da klavye ve fare, en güçlü iki kontrol olarak hayatımızda. Bir yandan her gün taşıdığımız ve bilgisayar kadar etkileşimde olduğumuz mobil cihazların minimal olma zorunluluğu nedeniyle çok farklı kontrol denemelerine şahit olduk cep telefonlarında. Tekerlekler, navigasyon topları, dokunmatik butonlar ve nihayetinde dokunabilir ekranlar…



Elektronik cihazlarlar ile etkileşimi sağlayan kontrollerin gelişimini destekleyen en büyük şey bence oyun endüstrisi oldu. Hâlâ da oyun endüstrisi bu alana ciddi katkılar yapıyor. Aynen uzay araştırmaları veya savaşların araba, uçak üretimine katkısı gibi. Oyun endüstrisinin katkısının bu kadar büyük olmasının nedeni ise oyunların her geçen gün daha gercekçi bir deneyim sunmaya calışmaları. Bunu zaten yazılımsal olarak uç noktalara götürmeyi başardı oyun sektörü. Şu an gerçeklikten ayırmakta zorlanacağınız kalitede oyun grafikleri görebiliyoruz hemen hemen her oyunda. Bu gerçekliğe yakınlaşma arzusu tabi ki insan vücudunun yaptığı fiziksel hareketleri dijital ortamda tanımlayabilme üzerine geliştirilen teknolojik cihazların üretimini tetikledi. Bunlar, eğer bir kontrol varsa fiziksel dünyaya tepki veriyor, hareket yönünü, şiddetini, doğrultusunu, ivmesini gibi her detayı büyük bir hassasiyetle yakalar hale getirdi şu anki oyun kontrollerini.

Bu gelişimin iş dünyasına yansıması bence çok olumlu. Çünkü bu uyarlamayı uzun süre oyun konsolları - bilgisayar ayrımı şeklinde gördük ve bu uyarlamayı yakalayamadı iş dünyasına hizmet veren teknoloji şirketleri. Mobil cihazlar ise kullanım amaçlarından dolayı ne oyun endüstrisiyle ne de gerçek dünyayı kopyalama eğiliminde idi.

Apple iPhone’u çıkardığında bu uyarlamaların bazılarını yaptı. Telefon olarak kullanılmaya başlanan bu elektronik cihaz, aslında gerçek dünyaya tepki veren en küçük cihazlardan biriydi ilk çıktığında. Apple’ın yaptığı bu uyarlama sadece farkedildi, uzun süre bu farklılığın avantajını yakalayamadı girişimciler. Bunun üstüne çok çalışma yapıldığını da zannetmiyorum ilk iPhone dünyada yayıldığı dönemde. Asıl ivmeyi iPad ile gördüğümü söyleyebilirim. Çünkü büyük bir ekran üstündeki dokunmatik etkileşim çok farklı bir deneyimdi tüm teknoloji tüketicileri için. Bunu ilk uyarlayan tabi ki uygulama geliştiren şirketler oldu, daha çok oyun şirketleri bunu yaptı ama zaten aynı cihaz üstünde olduğu için bir çok uygulamada da oyunlara benzer el hareketleri ile uygulamayı yönetme alışkanlıkları oturdu tüketicilerde. Sürüklemek, iki parmak ile büyütmek, birden fazla parmak kullanarak etkileşime girmek vs…

Şimdi ise web tarayıcıları üstünde bir çok site arayüzünü sadece görüntü olarak tablet cihazlarda uygun görünecek hale getirmiyor, aynı zamanda etikleşimlerini de bu cihazlara ve dokunabilirlik özelliklerine göre değiştiriyorlar.

Bir örnek vermek gerekirse, bir alış-veriş sitesi ürünleri listelerken sepete atmak için veya sepetteki ürünleri çıkartmak için ekle/sil gibi butonlar kullanıyor sitesinde. Tablet uyumlu sitesi ise aynı işi, ürünü kullanıcının parmaklarını kullanarak ürünü sürükleyerek sepet resmi olan bir kutuya bırakmasını isteyerek sunuyor bu özelliğini. Benzer şekile ürünü sepetten çıkarmak için de kullanıcının ürünü çöp kutusuna atmasını isteyerek yapıyor. Eskiden bu kadar radikal alışkanlıkları kullanıcıya sunmak intihar olarak sayılırdı, şimdi ise kullanıcı bu alışkanlıklara zaten sahip, bu alışkanlığa sahip olmasa bile çok kolay kabul edebiliyor çünkü uygulamanın kullanıcıdan istediği şey, kullanıcının normal hayatta yaptığı şeyler ve daha doğal. Çünkü gerçek dünyayı kopyalıyor. Aynen masanızın üstünde, ürün fotograflarını çöpe atmak veya bir kutuya toplayıp biriktirmek gibi düşünün bu uyarlamayı.

Daha basit bir örnek ise, bir resim galerisinde ileri/geri butonlarına basarak bir önceki veya bir sonraki resmi görüntüleyen bir site, artık resmin üstünde parmakları kaydırma hareketini algılayıp buna göre tepki veren siteler olarak yeniden tasarlanıyorlar.

Evet çok fazla örnek yok bunu kolaylıkla farkedebileceğiniz ancak şu an web sitelerindeki kullanıcı deneyimi trendi bu yöne doğru gidiyor.

Son kullanıcıya yakın örnekler bu gelişimi hissetmek için doğru örnekler olmayabilir. Fakat çevremde çok fazla kurumsal dünyada bu uygulamaları geliştiren veya bu tarz uygulamaları geliştirmek için büyük bütçelerle projelendirmeye calışan büyük kurumsal markalar var.

Biraz daha ilerisine bakmaya calışırsak, şu an Microsoft’un oyun konsolu Xbox’un hiç bir kontrol olmadan oyundaki kontrolleri yapmanızı sağlaması bence vizyonel bir örnek. Xbox’un Kinect konsolunda oyunda eğer bir boksörü canlandırıyor ve bir dövüş içinde iseniz, karakterinizi gerçekten yumruk atarak, televizyonun karşısında fiziksel olarak eğilerek veya sağa sola kayarak kontrol ediyorsunuz. Ufak bir kamera aracılığı ile hareketleriniz 3 boyutlu dünyada yansılanıyor ve bunu oldukça başarılı bir şekilde yapıyor.

Kontrolsüz olmak zorunda değil, dokunmatik ekranlar da kontrolsüz bir ortam olarak görülebilir. Yani artık gördüğümüz şeylere dokunarak veya dokunmadan işaret ederek yönetiyoruz dijital dünyayı. Yani artık teknolojik aletleri bir aracı kontrol ile yönlendirmekten çok onların bizi anlamasını sağlıyoruz etkileşime girebilmek için.

Oldukça heyecan verici şeyler göreceğiz önümüzdeki yıllarda.

Kullanıcı yorumlarının kullanım alanları

Şu an neredeyse her şeyi internette paylaşmaya başladık. En basit kullanıcı bile birkaç saatte çeşitli araçlarla veya kendi yazarak bir web sayfası üretebiliyor. Bu sayfalarda tecrübelerini, fotograflarını paylaşıyorlar. Bu paylaşımın bir yanı da, aslında interaktif yanı diğer ziyaretçilerin içerik hakkında yorum yapması, tartışabilmesi. Bu iletişim o kadar önemli ve detaylı olmaya başladı ki, çok basit bir ruh halinizi paylaştığınız Facebook status'de bile kullanıcılar yorum yazıyorlar. Facebook yorumları ve yönetimini bu noktada oldukça başarılı şekilde yapıyor.

Son dönemde connect aracılığı ile bazı kaynaklarını dış sitelere de açmaya başladığından bu yorumlama mekanizmasını paylaştığı bir yapı var: Facebook Connect Comment Box. Bu dökümanda facebook connect ile commentbox uygulamasını herhangi bir web sayfasına nasıl entegre edeceğimizi göstereceğim.

Facebook Connect'e giriş

Facebook connect ile ilgili ana sistematiği Facebook connect ile kullanıcı giriş çıkış dökümanında anlatmıştım. Comment box kullanabilmek için facebook connect kurulumunu sayfanıza yapmanız gerekiyor. Tabiki bunun için de bir uygulama oluşturmak zorundasınız. Basitçe özetlersem :
  • "Developers" uygulamasını ekleyin
  • Kendinize yeni bir uygulama oluşturun ve bir api anahtarı edinmiş olun
  • Uygulama ayarlarında facebook connect URL olarak comment box kullanacağınız sayfanın adresini girin
  • Site ayarlarını yapmaya html etiketinize fbml sözlüğü yolunu girin
  • Facebook JS Api'nin javascript kütüphanesini include edin
  • Facebook connect init fonksiyonu ile api key'inizi belirterek facebook connect'i etkinleştirin

Bu adımlardan sonra yaptığımız şey FBML yardımı facebook connect butonu eklemek, login ise kendi fonksiyonumuzu çağırarak giriş yapmış kullanıcı aksiyonlarını belirlemek idi. Fakat şimdi bunları kullanmayacağız ve çok basit bir yolla sayfamıza yine FBML yardımı ile yorum kutusu ekleyeceğiz.

Uygulayalım

Şimdi basit bir fotograf sayfasına yorum kutusu eklemeyi örnekleyeceğim. Sayfamız şu şekilde olsun :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Facebook Connect</title>
	<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
</head>
<body>
	<div>
		<h2>Sevimli Kedi</h2>

		<img src="http://www.fulyavet.com/images/cat17.jpg" alt="Cat" />
		<br>
		<br>

	</div>

	<script type="text/javascript">
		// facebook init
		FB.init("--API-KEY--", "xd_receiver.htm");
	</script>
</body>
</html>
Bu sayfanın görünümü :

Figür 1

Gördüğünüz gibi klasik bir fotograf sergilenen sayfa.
Kodda gördüğünüz gibi html etiketinde fbml sözlük adresi tanımlı, facebook javascript api import edilmiş ve en sonda da facebook connect init edilmiş durumda. Yani facebook connect çalışır durumda. Fakat sayfada henüz facebook esintisi yok.

Şimdi fotografın hemen altına yorum kutusu eklemek istersek img etiketinin hemen altına <fb:comments></fb:comments> fbml etiket grubunu eklememiz yeterli olacak.

Evet sadece bu kadar. İnanması zor ama bu şekilde :-)
Şimdi bu fbml etiketlerini eklediğimizde ortaya çıkacak sonuç şu şekilde olacak :

Figür 2

Oldukça basit bir şekilde sayfamıza yorum özelliği eklemiş olduk. Burada işin güzel yanı, insanlar facebook hesapları ile connect olup misafir yerine gerçek bir kişi olarak hareket edebilecekler. Eğer connect tuşuna basarlarsa iki durum söz konusu :
eğer facebook'a giriş yapmışlarsa sadece bu siteye bağlanıp bağlanmamasını soran bir kutu, eğer giriş yapılmamışsa facebook giriş ekranı gelecek.

Figür 3


Kullanıcı bilgileri ile giriş yapınca misafir yerine kullanıcı bilgileri, fotografı gelecek.

Figür 4

Burada işin güzel yanı, kullanıcı oraya yorum yaparken varsayılan olarak seçili olan "Post comment to my Facebook profile" seçeneğini seçerse burada yazdığı yazı, uygulama adınız ile birlikte facebook profilindeki duvarında görünecek. İnsanlar duvardan da cevap yazabilecekler ve duvardan yani facebook üzerinde iken yazdıkları yorum da sitenizde görünecek.

Bunun yanı sıra uygulamanızda admin/moderator olan kişiler giriş yaptıkları zaman yukarıda gördüğünüz gibi "Administer Comments" bağlantısı ile o sayfadaki yorum kutusuna ait ayarlar yapabilecekler. Yani misafirlerin yazıp yazamaması gibi özellikleri. Aynı zamanda yapılan yorumları da kaldırma seçenekleri olacak. İsterseniz o sayfadaki yorumları yönetmesi için insanları davet edebileceksiniz.

Figür 5


Şimdi bu uygulamayı her türlü sayfada yapabileceğinizi düşünürsek, bunun için herhangi bir veritabanı, javascript yazmanıza da gerek kalmadığı düşünülürse statik sitelerde oldukça kullanışlı bir uygulama halini alıyor.

Keyifli kullanımlar...

Hazırlayan : Mehmet Fatih YILDIZ
Kaynak Video :http://www.vimeo.com/3289354
19 Eylül Cuma ´08   —   3 Yorum
Virtualbox Bilmeyenler içinhttp://tr.wikipedia.org/wiki/Sanal_Makine sanallaştırma eskiden sadece fantezi ürünü idi. Yani bir makine içinde başka bir makine çalıştırmanın avantajlarını ilk başta göremedik. Ama sonraları sanallaştırma ile sunucu sektöründe VirtualPrivateServer'lar ortaya çıktı ve işlerimizi kolaylaştırmaya başladı. Çoğu sunucuda da tek makine üzerinde farklı işletim sistemlerindeki sunucu yazılımları haberleştirilip kullanılmaya başlandı.

Yani mesela müşteriniz mail server olarak zamanında binlerce dolar verip exchange server lisansı almış. Şimdi yeni projesindeki sunucusunda python, php linux vs yardırıp kod yazmışsınız, bash ile sürü sepet yönetim zamazingosu üretip adama güzel bir sistem vermişsiniz. Ama müşteriniz mail sunucusundan vazgeçmiyor. İşte bu noktada xen veya vmware ya da virtualbox gibi alternatifler devreye giriyor. Linux sunucunuzun üstünde windows server sanallaştırarak exchange server'ı kurup kullanıyorsunuz. Aynen 2 makineyi haberleştirir gibi bu sanal makineleri kulanıyorsunuz. Ya da sırf fantezi olsun diye bütün sunucu işlerini ayrı ayrı sanal makinelere bölüyorsunuz. Mesela httpd bir makinede mysql bir makinede eposta bir makinede dns farklı bir makinede çalışıyormuş gibi oluyor. Elinize ne geçiyor? Belki güvenlik, yani bir açıktan dolayı bir sanal makineyi ele geçiren bir salırgan kuracağınız iyi kurallarla diğer servislere dalamıyor veya gerçek olan makineyi ele geçiremiyor.

Neyse buraya kadar hikaye anlattım size ;-) Şimdi gerçeğe dönelim. Daha önce Vmware Fusion, linuxta vmware player kullanarak (bana zorla satıp kakaladıkları) lisanslı bir windowsumu sanal makineye kurarak internet explorer testlerimi ek bir makineye gerek kalmadan yapıyordum.

Tabiki vmware fusion beta olduğu için ücretsiz, vmware player da ücretsiz olduğu için rahattım. Fakat işlerimi daha özgür bir yazılım çözmeliydi. Sun zamanında innotek'i dolayısıyla virtualbox'u satın almıştı (ya da ben öyle hatırladığımı zannediyorum). Ellerine sağlık çok da kaliteli bir çözüm sunmuşlar. Virtualbox ile ie testlerimi rahatça yapabiliyorum. Açıkcası vmware-tools'dan daha başarılı bir sürücü seçeneği var. Yakın zamanda aldığım macbookpro'mu hiç yormadan 2-3 tane işletim sistemi açıp testlerimi rahatça yapabiliyorum. Bir web geliştiricisi için gerekli birşey, sizlere de öneririm.

VirtualBox hakkında sitesinden bilgi alıp indirip kullanabilirsiniz. Tabiki GPL ve crossplatform çalışması da dadundan yinmez hale getiriyor.

http://www.virtualbox.org/

Popüler Etiketler

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