Popfly Bölüm 1 : Tanıtım ve Mashup Örnek Uygulaması

small-logo.pngBugün sizlere Microsoft’un yeni bir internet hizmetinden bahsetmek istiyorum. “Popfly” adındaki bu hizmet sayesinde çok kısa sürelerde, hiç kod bilgisi kullanmadan güzel ve etkileşimli web sayfaları hazırlayabiliyorsunuz. Microsoft’un Silver Light adındaki yeni sisteminin gelişmiş özelliklerini bir arada kullanbiliyorsunuz.

www.popfly.com adresinden siteye girip, bir msn hesabıyla sisteme giriş yaptıktan sonra karşınıza aşağıdaki şekilde bir ekran geliyor.

Burası popfly sitemizin ana ekranı.

“Create a Mashup” ve “Create a Page” linklerini kullanarak popfly hizmetlerinden yararlanmaya başlıyoruz.

Create a Mashup özelliği ile çok sayıdaki uygulamaları birleştirip, basit sayfalar hazırlayabiliyorsunuz. Sayfa demek aslında yanlış bir ifade olacak. Çünkü burada yaptıklarınız isterk kendi web sitenize, ister msn live space sayfanıza, isterseniz windows sidebar gadget olarak bilgisayarınızda veya email yoluyla arkadaşlarınıza gönderebiliyorsunuz. Basit bir mashup uygulaması nasıl yapıldığını yazının devamında resimlerle anlatacağız.

Create a Page hizmetiyle de kendinize kolayca web sayfaları oluşturabiliyorsunuz. Bu web sayfalarının temalarını ve düzenlerini istediğiniz gibi ayarlayıp, içeriğini istediğiniz şekilde hazırlayabiliyorsunuz. Ayrıca içerik olarak mashup bölümünde yaptıklarınızı da kolayca ekleyip kendinize özel sayfalar hazırlayabiliyorsunuz.

Şimdi Mashup ve Wep page hazırlamayı resimli olarak anlatalım.

Mashup bölümüne girdiğimizde karşımıza bu şekilde boş bir ekran geliyor. Sol tarafta Bloks adı verilen bölümde kullanabileceğiniz servisler yer alıyor. Fotoğfraf, video, harita, rss vb. birçok servisten yararlanabiliyorsunuz. Şimdi örnek olarak yapacağımız uygulamamızda flickr sitesindeki fotoğrafları kullnarak kendimize kolayca bir sayfanın nasıl hazırlanacağının göstereceğiz.

Sol taraftan Bloks bölümünden flickr maddesini sürükle-bırak yaparak sağ tarafa ekledik. Bir sonraki adımda flickr kutusunun sağ üstünde görülen ayar tuşuna basarak ne tür fotoğrafların çıkacağını ayarlayacağımız ekranı görelim.

Operators kısmında farklı özellikleri de seçebiliyoruz. Göstereceğimiz örnekte varsayılan olarak gelen “beach” isimli fotolardan 15 tanesinin çıkmasını ayarlıyoruz ve üstteki ingiliz anahtarı şeklindeki resme tıklayarak ayar penceresini kapatıyoruz.

Bu ayarı yaptıktan sonra üstte görülen “Preview” tuşuna bastığımızda ön izleme olarak hazırladığımız çalışmayı görebiliyoruz. Üstteki resimde olduğu gibi beach isimli 15 tane fotoğraf yan yana sıralanmış olarak çıktı. Bir sonraki aşamada “Display” başlıklı bloktaki özellikleri kullanarak bu fotoğrafların daha güzel bir arayüzle ekranda görüntülenmesini sağlayacağız.

Sol taraftaki bölümden “Photo Stack” özelliğini yine sürükle-bırak yaparak syafamıza ekledik. Daha sonra Flickrdaki fotoğraflarımızı PhotoStack arayüzünde görüntülenmesini sağlamak için önce flickr kutucuğuna artından da PhotoStack kutusuna tıklıyoruz ve iki kutucuk birbirine bağlanıyor. Bu işlemden sonra önizleme yaptığımızda karışımıza aşağıdaki resim gibi bir sonuç çıkıyor.

Mashup ile yapacağımız örneklerden birini bu şekilde tamamlamış olduk. İstediğimiz şekilde sayfamızı hazırladıktan sonra üst bölümde görülen “Save” tuşuna basak bu hazıladığımız çalışmayı kaydediyoruz.

Mashup ile bir örnek daha yapalım. Dünya haritasını görebileceğimiz bir çalışma hazırlayalım. Üstteki örnekte olduğu gibi bunu da hazırlamak oldukça basit ve hızlı. Sol taraftaki bölümden Maps başlığından Virtual Earth ü sayfamıza ekliyoruz. Daha sonra da üstteki save tuşuna basak bu çalışmamızı kayıt ediyoruz.

Yapmış olduğumuz bu çalışmları My Stuff menüsündeki Projects linkine tıklayarak ulaşabiliyoruz. Karşımıza aşağıdaki gibi bir ekran çıkıyor.

Burada yapmış olduğum çalışmaları görüyorsunuz. En son yaptığımız Virtual Earth adındaki çalışmayı nasıl paylaşacağımızdan bahsedelim. Virtual Earth projesinin altında bulunan linklerden “Share” linkine tıkladığımızda karşımıza aşağıdaki gibi bir menü çıkmakta

“Embed It” özelliği sayesinde bu çalışmanızı bikaç satır kod vasıtasıyla istediğiniz sayfada kullanabiliyorsunuz. Yazının giriş bölümünde bahsettiğim gibi bu çalışmanızı Sidebar gadget olarak bilgisayarınıza indirip kullanabiliyorsunuz. Bununla birlikte Live Space sayfanıza yada Facebook hesabınıza da bu çalışmanızı kolayca ekleyebiliyorsunuz. Email to a Friend ile de arkadaşınıza mail olarak gönderebiliyorsunuz. Biz burada emded it linkine tıklıyoruz.

Bize yaptığımız çalışmayı kullanmamızı sağlayacak kodu hemen hazırlıyor. Bu kodu da yaptığım örnek sayfada http://www.bilgiustam.com/virtual_earth.html sayfasında görebilirsiniz.

Yazımızın ilk bölümünde Popfly sitesinin tanıtımı ve mashup yapmayı anlattık. Elbetteki mashup ta yapabilecekleriniz bunlarla sınırlı değil. Daha birçok özelliği kullanarak farklı sayfalar oluşturabilirsiniz.

Birsonraki bölümde Popfly sitesinde web sayfası nasıl hazırlanacağını ve sitenin diğer özelliklerinden bahsedeceğiz.