Graph API Kullanımı ve Graph API Hakkında

Facebook ivmesini hızla yükseltmekte. Şuan için Facebook bütün sosyal ağlardan en popüleri konumunda. Haliyle firmalar dijital mecradaki rekabetlerinide facebook üzerinden sürdürüyor. Online kampanyalar advergameler artık facebook aracılığıyla aplikasyonlar sayesinde  kullanıcılarını sunuyor. Türkiye başarılı facebook uygulamaları yapan bir çok şirketler mevcut. Hedefe yönelik başarılı uygulamalar yapılıyor. 29.663.140 Aktif kullanıcı saysına bakarsak büyük firmaların neden bu yöne yöneldiklerini anlamak pekte zor olmasa gerek. Kısa bir ön yazıdan sonra asıl konumuza dönerek Graph API den bahsedeyim.

Advertisements

as3 Paradox Yapısı

Projelerimizde referanslarımızı ya da içerikleri otomatik ya da kullanıcı etkileşilmi bir uygulama yapıyorsak böyle bir şey işimize yarayabilir diye düşünüyorum.  Burda yapılan şey aslında basit yaptığım uygulamada bir array atıyorum ve bu arrayın içine projelerimi yerleştiriyorum… Ardından bir değişken oluşturup sağ ve sol ok tuşlara basılıp arttırıp azaltma işlemini gerçekleştiriyorum. If koşulu ile de değerlerimi kontrol edip istediğim olayların gerçekleşmesini sağlıyorum.

var arr:Array = new Array("Proje1","Proje2","Proje3","Proje4");

var i:Number=-1;

next.addEventListener(MouseEvent.CLICK,nextClick);
prev.addEventListener(MouseEvent.CLICK,prevClick);

function nextClick(event:MouseEvent):void
{
	i++;
	if(i == arr.length)
	{
		i=0;
	}

	txt.text = arr[i];
}

function prevClick(event:MouseEvent):void
{
	if(i <= 0)
	{
		i=0;
	}
	else
	{
		i--;
	}

	txt.text = arr[i];
}

HTML5 ?

Html5 ile gelen yeni özellikler oldukça cezbedici ve web tasarımcısının(htmlci) işini kolaylaştırmaktadır. CSS tarafında iş aynı Html tarafına gelince işler değişiyor haliyle. Ama artık yeni sabit bir yapı geldi ve bizim ne id ler ile nede classlar ile uğraşmamıza gerek kalmadı. Tabii işe göre değişiklik gösterilebilir ancak bu özellikler baya bir zaman kazandıracaktır.

Ayrıca belirtmek isterim ki html5 ile ilgili bir çok yazı internette mevcut. Benim tamamen kendi görüşlerim ve gözlemlerim araştırmalarım sonucunda edindiğim bilgilerimi paylaşmak istediğim için böyle bir yazı oluşturmak istedim.

Yeni özelliklerden kısaca bahsedelim

!DOCTYPE html  ——   Html sayfamızın hangi formatlarda yazılacağını belirliyoruz.

<!DOCTYPE html>

bunun gibi uzun kodlar kullanıyorduk ya da kopyala-yapıştır yoluyla alıyorduk artık gerek kalmadı. !DOCTYPE html işimizi kolaylaştırıyor ve elle yazma imkanı veriyor.

Meta charset  ——   Html sayfalarımızın kodlama dilini belirttiğimiz alan artık aşağıdaki gibi.

<meta charset=”utf-8″>

Header <header>  —— Sayfamızın üst kısmıdır. Önceleri bir header oluşturabilmek için class ya da id tanımlamamız gerekiyordu. Şimdi buna gerek kalmadan <header> işimizi görüyor.

Nav <nav>  —— Menü alanımız. Artık CSS sayfalarımzda fazladan id tanımlamalarına gerek kalmadı!

Article <article>  ——  Article alanı bizim eskiden mainContent diye hitap ettiğimiz içerik alanımız.

Section <section>  ——  Türkçe -kısım , bölüm- olarak hitap edebileceğimiz içeriğin liste alanı. Yani paragraf tagı da diyebiliriz.

Aside <aside>  —— Sidebar evet artık id sınıfımıza herhangi bir isim atamak zorunda değiliz. Aside bu işi kolaylıkla hallediyor. Sizin sadece içeriğe menü vb. işlemler yapmanız kalıyor.

Footer <footer>  —— Web Sayfamızın en alt elemanı yani copyright ve iletişim bilgilerini paylaşacağımız alan.

Ayrıca aşağıdaki şablona bakarak yenilikleri daha iyi anlayabilirsiniz.

Şimdi html5 çıktı ve web arayüz tasarımcılarının işi bir nebze kolaylaştırdı. Html5 kullanılmasının amacı hem CSS tarafını hem Html tarafını optimize ediyor hem de fazla kod yükünü azaltıp web sitemizi uçuruyor. Aşağıda html5 ile yapılmış bir web site yapısı bulunuyor.

<!DOCTYPE html>
<html>
<head>
<title>Serhat SEZER’Blog – HTML5 ile Örnek</title>
<script>
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘section’);
document.createElement(‘article’);
document.createElement(‘aside’);
document.createElement(‘footer’);
</script>
<style>
header,nav,section,article,aside,footer {display:block;border:1px solid #bbb;padding:1em;}

header,nav,section,article,aside,footer {border:1px solid #bbb;padding:1em;}
header{background-color:#EFFBFF;}
h1,h2,nav li {font-family:helvetica,arial,sans-serif;}
nav{margin:1.5em 0;}
nav li {display: inline;list-style-type: none;padding-right:1em;}
article,aside{float:left;margin-bottom:1.5em;}
article {width:60%;}
aside {width:28%;margin-left:1em;}
footer {clear:both;}
.identifier {background-color:#FFF79F;font-style:italic;}
</style>
</head>
<body>
<header>
<p>SERHAT SEZER’BLOGS</p>
<h1>http://serhatsezer.blogspot.com</h1&gt;
</header>
<nav>
<p>Linkler</p>
<ul>
<li>Anasayfa</li>
<li>Hakkımda</li>
<li>İletişim</li>
</ul>
</nav>
<article>
<p>Tarih: 20.12.2010 Pzts</p>
<h2>HTML5 ile Proje Geliştirme İlk Adım!</h2>
<section>
<p>Author: Serhat SEZER | Kategori : Genel</p>
<ul>
<li>Bak postacı geliyor, Selam veriyor! Herkes ona bakıyor merak ediyor ?</li>
<li>Bir kulunu çok sevdim o da beni sevdi. İyiyiz yani bi sıkıntı yok.</li>
<li>Daha bir şey bulamadım :)</li>
</ul>
</section>
</article>
<aside>
<p>Kıssadan Hisse</p>
<h2>Hangileri Taze ? </h2>
<section>
<p>&raquo; Postacıdan haber!</p>
<p>&raquo; Bir Cool.</p>
<p>&raquo; Hiç.</p>
</section>
</aside>
<footer>
<p align=”center”>2011 &copy; Serhat SEZER Tüm hakları saklı değildir. &nbsp; &nbsp; &nbsp;  serhat.szr@gmail.com
</p>
</footer>
</body>
</html>

Nesne Yönelimli Programlama (Object Oriented Programing)

Bugün internette dolaşırken nesne yönelimli programcılığın özelliklerine ve getirilerene bakarken facebook’un wiki arşivinden böyle bir yazı buldum ve hemen blogumda paylaşmak istedim.

Hangi programlama dilini kullanırsak kullanalım yazdığımız yazılımların parça parça bir bütünü oluşturması kanaatindeyim.  Nesne Yönelimli Programlama (OOP) da  parça parça ayırdığınız bütün classlarınız birer nesne gibi düşünebilirsiniz. Bu nesnelerinizin de ayrı ayrı işlemleri olduğunu düşünün. Her bir parçayı ayrı ayrı kontrol etmek hem vakitten hem de saatlerce sorun aramanızdan kurtaracaktır. Çünki kurduğunuz nesnelerinizin hepsini tek tek kontrol edebiliyor olacaksınız.  Bu güzel bir şey değil mi ? Aşağıdaki yazı size daha da iyi fikir verebilir;

Nesne yönelimli programlama (NYP), (İngilizce:Object Oriented Programming) özetle bir bilgisayar programlama yaklaşımıdır. Günümüzde pekçok çağdaş programlama dili tarafından desteklenmektedir.

1960‘lı yılların sonuna doğru ortaya çıkan bu yaklaşım, o dönemin yazılım dünyasında beliren bir bunalımın sonucudur. Yazılımların karmaşıklığı ve boyutları sürekli artıyor, ancak belli bir nitelik düzeyi korumak için gereken bakımın maliyeti zaman ve çaba olarak daha da hızlı artıyordu. NYP’yi bu soruna karşı bir çözüm haline getiren başlıca özelliği, yazılımda birimselliği (modularity) benimsemesidir. NYP ayrıca, bilgi gizleme (information hiding), veri soyutlama (data abstraction), çok biçimlilik(polymorphism) ve kalıtım (inheritance) gibi yazılımın bakımını ve aynı yazılım üzerinde birden fazla kişinin çalışmasını kolaylaştıran kavramları da yazılım literatürüne kazandırmıştır. Sağladığı bu avantajlardan dolayı, NYP günümüzde geniş çaplı yazılım projelerinde yaygın olarak kullanılmaktadır.

NYP’nın altında yatan birimselliğin ana fikri, her bilgisayar programının (izlence), etkileşim içerisinde olan birimler veya nesneler kümesinden oluştuğu varsayımıdır. Bu nesnelerin her biri, kendi içerisinde veri işleyebilir, ve diğer nesneler ile çift yönlü veri alışverişinde bulunabilir. Halbuki NYP’den önce var olan tek yaklaşımda (Yordamsal programlama), programlar sadece bir komut dizisi veya birer işlev (fonksiyon) kümesi olarak görülmektediler…

Nesne yönelimli programlama dilleri yukarıda adı geçen tüm öğelere sahip olurken, Visual Basic gibinesne tabanlı programlama dilleri birkaçından yoksundur.

Ayrıca Bkz.

Türkçe ActionScript 3 Nesne Yönemli Programlama Eğitimleri

BulkLoader Gelişmiş Preloading

/*
*
* serhat sezer
* BULKLOADER CLASSINI TANIMAK VE KULLANMAK
*
*/

var loader:BulkLoader = new BulkLoader();
loader.add("resim.jpg");
loader.add("icerik.xml");
loader.add("muzik.mp3");
loader.add("video.flv");
loader.addEventListener(BulkLoader.PROGRESS,onProgress);
loader.addEventListener(BulkLoader.COMPLETE,onComplete);

function onProgress(event:BulkProgressEvent):void
{
	trace("yüzde yüklendi" + event.percentLoaded);
}

function onComplete(event:Event):void
{
	// Resim için kullanım
	
	var bgBmp:Bitmap = loader.getBitmap("resim.jpg");
	addChild(bgBmp);
	
	// Video için kullanım
	
	var video:Video = new Video();
	video.attachNetStream(loader.getStream("video.flv"));
	addChild(video);
	parseConfig(loader.getXML("icerik.xml"));
	
}

SwfFit ile SWF Boyutlandırmak

SwfFit. SwfFit Html üzerine gömülü olan Swf dosyalarımızı As3 ve As2 desteği ile içeriden tekrar boyutlandırmamızı sağlıyor. Arkasına ise Javascript var. Mesela arkadaşlar bir site yaptınız. Fakat bazı yerlerde 800-600 olan boyutlarınızdan taşan noktalar var. O zaman içeriden boyutu 900-600 yapıyorsunuz ve bum! Scrollbar’ ımızı tarayıcı oluşturuyor…

Evet; scrollbar Flash konusunda oldukça sorunlu bir araç. Bir sürü hesap, olay dinleyicisi derken boşuna sistemi yoruyoruz. Halbuki “normal Html sayfaları” gibi, biz boyutumuzu ayarlasak ve işin geri kalanını tarayıcı yapsa ne hoş olurdu değil mi? Olurdu değil; oldu! SwfFit ile artık bu mümkün…

Öncelikle arkadaşlar. Paketimizi buradan indiriyoruz. İçerisinde As2 ve As3 olmak üzere iki türlü sınıf var. Biz As3′ ü kullanacağız. Şimdi arkadaşlar öncelikle projemizin olduğu dizine, indirdiğimiz dosyadan şunları çıkarıyoruz;

1. si: AS_Class -> As3 ve onun altındaki com isimli dosya.
2. si: Ana dizinde bulunan swffit isimli javascript dosyası.

Evett bunları projemizin olduğu dizine aktarıyoruz. Artık kaynak kodlara geçeceğiz. Arkadaşlar Swffit’ in Javascript yani External Api ile çalıştığını söylemiştim. Bu yüzden Html tarafında bazı işlemler yapacağız. Şimdi Html dosyamızı açalım ve şu kodu bir ekleyelim;

<scripttype="text/javascript"src="swffit.js"></script>
<scripttype="text/javascript">
swfobject.embedSWF("example.swf", "my_flash", "550", "400", "8.0.0");
swffit.fit("my_flash",800,600);
</script>

Öncelikle swffit.js isimli dosyamızı içeriye davet ediyoruz. Sonrasında ise kullanacağımız swf dosyasını SwfAddress betiği ile içeriye alıyoruz;

NOT: Burada SwffAddress ile birlikte kullanılabileceğine örnek vermek amaçlı ekledim. Yoksa illa SwffAddress kullanmak zorunda değiliz! Normal; babadan kalma yöntemlede çalışmaktadır!!!

Swf dosyamızı Html dosyasına gömerken bir id kullanırız. Burada my_flash demişsiz. Swffit fonksiyonunu da o id ile bağlıyoruz. Ardından genişlik ve yükselik olmak üzere iki tane veri giriyoruz. Bu veriler Swf dosyanızın asıl boyutu. Arkadaşlar bunlar vermemiz gereken asıl kodlar. İstersek bu verilerden sonra maksimum yükselik ve genişlik, merkez tanımlayabiliriz;

swffit.fit('flashID', minGenişlik, minYükselik, maxGenişlik, maxYükselik, yükseklikMerkezi, genişlikMerkezi);

Merkez tanımlayarak nereden uzatması gerektiğini belirtebilirsiniz. Bu sayede kaymaların önüne geçilir…

Evett böylece Html tarafında birşey kalmadı. Sonrasında ise Swf dosyamızı açıyoruz ve içeriye şu kodları ekiyoruz;

importcom.millermedeiros.swffit.SWFFit;
importcom.millermedeiros.swffit.SWFFitEvent;
boyut_degistir.addEventListener(MouseEvent.MOUSE_DOWN,boyutlari_degistir);
functionboyutlari_degistir(evt:Event) {
SWFFit.configure( { minWid: 1000, minHei: 700} );
}

Mesela bu kod sayesinde boyut_degistir isimli butona tıklandığı anda swf dosyasının boyutu 1000 e 700 olarak değiştirilir. Ardından tarayıcı durumu anlar ve scrollbar çıkarır. Bu sayede sahneden taşan kısımlar görünür hale gelir.

Arkadaşlar SWFFit.configure methoduyla sadece min değerleri değil; max ve merkez değerlerini de değiştirebilirsiniz…

Swffit’ in en basit kullanımı bu halde. İsterseniz indirdiğiniz dosya içerisindeki örnekleri inceleyebilir; isterseniz sitesinden fonksiyonlara bakabilirsiniz…

 

Kaynak : Bir Öğrenci Klasiği

Substr ve SubString

Actionscriptte proje geliştirirken metinlerimizde çeşitli işlemler yapmak isteyebiliriz. String classımız bizim metinlerle oynamamıza olanak sağlar. Ben substr ve substring metodlarını genelde butonun ya da movieclibin isimini değiştirmek ya da eklemek için kullanıyorum. Kısaca substr ve substring ne işe yarar ?

Substr();

String classı içindeki bu metod bize başlangıç indeksinden sonra kaç karakter alacağımızı belirtmemize yarar. Örnek;

metin.substr(baslangicIndex, kactaneAlcak);

var metin:String = “SerhatSezer”;
var strBol:String = metin.substr(0,6);
trace(strBol)     // çıktısı Serhat olacaktır.

Bir diğer kullanımında ise başlangıc noktasını veripte alabilirsiniz. Ancak o zaman tek harf alabilme imkanı sunuyor. Yani;

var metin:String = “SerhatSezer”;
var strBol:String = metin.substr(6);
trace(strBol);    // çıktısı bu sefer “t” olarak verdi.

SubString();

String içindeki bir deiğer classımız substring() classı ise diğer substr classıyla aynı mantıkta çalışır. Arasındaki tek fark ise substr metodunda kaç karakter alınacak diye belirlerken substring metodunda ise bitiş indeksini belirtmiş oluyoruz. Örnek;

metin.substring(baslangicIndex, kactaneAlcak);

var metin:String = “SerhatSezer”;
var strBol:String = metin.substring(0,11);
trace(strBol)     // çıktısı SerhatSezer olacaktır.

Bunda tek sayı ile almamız mümkün değil bunun için eğer 0 değerini verirsek bize bütün stringi verecektir.

var metin:String = “SerhatSezer”;
var strBol:String = metin.substring(0);
trace(strBol);    // çıktısı bu sefer “SerhatSezer” olarak verdi.

Not: Substr ve Substring metodlarında eksi(-) değer veremiyoruz. Bunu yapmak istiyorsak slice metoduyla gerçekleştirebiliriz. Slice metodundaki mantık – eksi değer verdiğimizde sondan alma işlemini sağlıyor.

JavaScript ile Form bilgileri

Javascript ile kullanıcı bilgilerini istersek db(database) ye istersek kullanıcıya istersekte html sayfamızda yazdırabiliriz. Ben burada alert() metodunu kullandım yani kullanıcı butona basar basmaz karşısına uyarı mesajı gelecektir.

<html>
<head>
<title>Javascript - Serhat Sezer</title>

<script type="text/javascript">

function fnk(_deger)
{
	var arr = new Array();
	arr = document.getElementsByName(_deger);
	/*	TOPLAM DA KAÇ ADET GİRİLDİĞİNİ HESAPLIYORUZ...	*/
	alert("Toplam Değer " + arr.length + " kadar nesne bulunmaktadır.");
	
	for(var i=0; i<arr.length; i++)
	{
		var obj = document.getElementsByName(_deger).item(i);
		
		/*	HANGİ NESNELERE NELER UYGULANMIŞ ONLARI KONTROL EDİYORUZ.
		*
		* obj.id değeri bize uyguladığımız objenin id bilgisini vermektedir.
		* obj.value değeri ise bizim input aracılığıyla girdiğimiz değerleri döndürür.
		*
		*/
		
		alert("Nesne id bilgisi " + obj.id + " Nesne değeri " + obj.value );
	}
}

</script>

</head>

<body>
<strong>İsim :</strong> <br /> <input name="kutu" id="kutu1" type="text" value="isim giriniz..." /><br />
<strong>Soyisim :</strong> <br /> <input name="kutu" id="kutu2" type="text" value="soyisim giriniz..." /><br />
<strong>Yaş :</strong> <br /> <input name="kutu" id="kutu3" type="text" value="yaş giriniz..." />
<br />
<input type="button" value="Değerleri Getir" onclick="fnk('kutu');" />
</body>
</html>

Uygulama 1

Şu adresde gezinirken birden aklıma değişik bir şey yapmak geldi. Tam olarak istediğimi yapamamış olsam da yine de farklı uygulamarda iş göreceğini düşünüyorum.

import com.greensock.TweenMax;
import flash.events.MouseEvent;

var arr:Array = [btn1,btn2,btn3];
var nameArr:Array = new Array();
var btnXArr:Array = new Array();

for (var i:int = 0; i<arr.length; i++)
{
	nameArr.push(arr[i]);
	btnXArr.push(arr[i].x);
	TweenMax.to(nameArr[i],1,{ x: 90 * i ,delay: i*.2});
	nameArr[i].addEventListener(MouseEvent.MOUSE_OVER,mOver);
}

function mOver(event:MouseEvent):void
{
	for (var k:int=0; k<btnXArr.length; k++)
	{
		TweenMax.to(nameArr[k],1,{x: event.currentTarget.name.substr(3) * btnXArr[k]});
	}
}

As3 getDefinitionByName classı

Bu classda name parametresinin içerisinde belirlediğimiz bir class ismindeki özellikleri kullanabiliyoruz.

var classReference:Class = getDefinitionByName("flash.display.Sprite") as Class;
var obj:Object = new classReference();
obj.graphics.beginFill(0xFFCC00);
obj.graphics.drawRect(10,10,200,200);
obj.graphics.endFill();
addChild(DisplayObject(obj));