HTML 5 - II

HTML 5 - II

(Bu makalem mobillife dergisi şubat 2012 sayısında yayınlanmıştır.)
Geçen yazımda HTML 5 in semantik yapısından bahsetmiştim. Şimdi bu konuyu biraz daha açıp HTML 5 in yapısal tag’larının bazılarını yakından inceleyeceğiz. Ve bunların CSS 3 ile nasıl kullanıldığını anlatmaya çalışacağım. Bunu yaparken de HTML 4 ile kıyaslamalar yapacağım.

Aşağıdaki sayfayı hem HTML 4 tag’larıyla hem de HTML 5 ile oluşturacağım:

Sayfanın yapısına bakarsak, sol üst köşede bir başlık (Header), hemen altında site Navigasyon (gezinim) linkleri, sağ ortada içerik kısımları ve son olarak en altta ufak metinlerle bir altlık (footer) bulunmakta. Bu şablon bir çok sitede kullanılmakta. Şimdi bu yapının HTML 4 ve 5 de nasıl oluşturulduğunu görelim ve arasındaki farklara bakalım. Önce  HTML 4:

Şimdi de HTML 5 ile kodlara bakalım:

Bu iki HTML kodlaması da yukarıdaki sayfa görünümünü üretir. Ancak Tag’ların detaylarına bakacak olursak aslında epey farklı bir kodlama olduğunu hemen görebiliriz.
Kodlara uzaktan baktığımızda bile bu fark görülebilir. HTML 5 daha derli toplu ve anlaşılabilir bir yapı sunar. Özellikle ilk satırdaki  şema bildirimi  HTML 4 e göre oldukça sadedir. HTML 4 de bir sürü ifade kullanılırken HTML 5 de ilk satır bildirimi sadece DOCTYPE ve kullanılacak dilin belirtilmesidir.
Devamında HTML 5 deki semantik yapı açıkça görülüyor. Başlığın nerede başladığı ve bittiği header taglarıyla açıkça belirtiliyor. Aynı şekilde Menü yani navigasyonun nerede olduğu

taglarıyla, içeriğin hangi alanlarda olduğu

taglarıyla belirtiliyor.

Ve son olarak sayfamızın altlığı “footer” taglarıyla belirtiliyor. Bu tip bir semantik yapının kolay okunması dışında, programsal olarak da faydası var.
Örneğin bu yapıyla CSS kullanımı, yani sayfayı görsel olarak formatlamak, düzenlemek daha az karmaşık ve kolay bir hale geliyor.
Dikkat ederseniz HTML 5 tagları sayfanın konumsal durumu hakkında bir şey söylemez. Diğer bir ifadeyle Başlığın sol üstte mi? sağ üstte mi? olduğunu veya menünün yatay mı? dikey mi? konumlanacağı, sayfa kenarından ne kadar uzakta bulunacağı gibi şekilsel, renksel ve konumsal emirler vermez. O sadece neyin ne olduğunu söyler.

Bu biçimlendirmeleri, formatları ancak CSS ile yapabiliriz. İşte bu yüzden HTML 5 in CSS ile Semantik yapıda kullanımı önemlidir. Daha da önemlisi anlamsal olarak bu kadar kolay bir yapı sunuyor olmasıdır.

Örneğin HTML 4 de İçerik kısmının CSS ile nasıl şekillendirildiğini inceleyim. Bunun için  “

” tagı içinde class ifadesinin “content” olduğu belirtiliyor. Diğer bir ifadeyle bu alandaki şeklin CSS ifadelerinin content başlığında tanımlandığını belirtiyor.

CSS tanımına bakacak olursak content in

.content{float: right;width: 69%;}

şeklinde sağ tarafa %69 görece sayfa oranıyla yaslandığı söyleniyor.
Burada class ifadesi ayrıca isimlendiriliyor ve karşılığı CSS ifadesinde aranıyor.
Oysa HTML 5 yapısında işler daha kolay. Ek bildirimlere gerek yok. HTML 5 article tag’ı CSS dosyasında doğrudan ifade edilebiliyor:
article {float:right; width:69%;} 
Böylece

tagları arasındaki içerik formatı her seferinde CSS dosyasında tanımlandığı gibi oluyor. Bunun haricinde yeni bir Class ismi vermeye gerek yok.
Bu yapı hem kod’un sade olmasını sağlıyor hem de bu sadelikten dolayı daha anlaşılabilir kılıyor.

Canvas Elemanı
HTML 5 ile birlikte  grafik, video ve ses ile çalışmak artık çok daha kolay oldu. Çünkü artık bu uygulamaları karşılayan taglar HTML 5 ile birlikte gelmektedir (Native). Aslında HTML’in bu sürümünün (5) oluşturulma sebeplerinden biri de budur.
HTML 5 bu yapısıyla eskiden başka teknolojiler kullanılarak yapılan multimedya uygulamalarının geliştirilmesine sadece javascript ve CSS kullanarak olanak sağlıyor.
HTML 5 de grafiksel uygulamalar Canvas tag’ı veya elementiyle geliştirilebiliyor. Canvas tag’ı sayfadaki 2-3 boyutlu geometrik şekil ve çizgilerin bilgisini tutuyor. Örneğin sayfaya bir dikdörtgen çizmek isterseniz bunu canvas bildirimiyle yapabilirsiniz.
Bildirimi oldukça basit olmasına rağmen Canvas element’i tek başına bir şey ifade etmez. Canvas çoğunlukla Javascript’le birlikte kullanılır. Aşağıdaki görüntüye bakalım:

Burada dikdörtgen lacivert çizgiler canvas alanımızın sınırını belirler. Yeşil dikdörtgen’de bu Canvasın içinde çizilen geometrik şekli gösterir.
Sadece canvas’ı ifade etmek için:

 

 

şeklinde bir bildirim yapmak yeterli. Bu bize canvas’ın sayfa içindeki büyüklüğünü ve bir border’ı olup olmadığını ifade eder. Örneğin burada border 2 piksel kalınlığında ve mavi renktedir. Ancak henüz yeşil dikdörtgenimiz bu ifadeyle gözükmez. Bunun için javascript kodlarına ihtiyacımız var:

 

Buradaki kod’da canvas elemanımız javascript koduyla temin edilip bunun içine 150 ye 175 piksel boyutlarında ve rengi  7CEF76 (yani yeşil) olan bir dikdörtgen çizileceği belirtiliyor. Sonuç olarak canvas element ‘imiz kullanılarak ve javascript kodlar yazılarak grafiksel bir uygulama geliştirmiş olduk.
İşte HTML 5 de grafiklerle çalışmak bu kadar kolay. Bunun haricinde herhangi bir plugin, yardımcı program veya herhangi bir şeye ihtiyaç yok.

HTML 5

HTML 5

(Bu makalem ocak 2012 mobillife dergisinde yayınlanmıştır)
Uzun zamandır bahsettiğim HTML 5’in teknik detaylarına değinmenin zamanı geldi sanırım. HTML 5 bundan önceki sürümlerine pek çok yeni özellik ilave ederek geliyor. Aslında HTML 5 ile birlikte her 10 yılda bir kırılma yaşayan web’in görsel arabirim alt yapısı yeniden tanımlanıyor denebilir. 

Halen geliştirilme aşamasında olan ve epey de bu aşamada kalacak olan HTML 5; bulut- pc-mobile-smart devices teknolojilerinin - css ile birlikte- arabirimini sağlayacak teknikleri, web’in doğal tag’lama (etiketleme) alt yapısıyla sunan yeni bir HTML sürümü. 

Daha yalın anlatmak istersem; HTML ve javascript bir karışım olan HTML5 kolay etiketlemeler vasıtasıyla bir browser üzerinde animasyon, video, navigasyon gibi yeni nesil arabirimleri kolayca oluşturmamızı sağlayan yeni teknikler-etiketlemeler sunuyor. 

Böyle bir şeye ihtiyaç vardı çünkü artık browser üzerinden talep edilen şeyler oldukça fazlalaşmıştı. Örneğin bir navigasyon-haritalama işinin daha kolay yapılması isteniyordu. Bir video’nun sadece bir tag’la ilave edilmesi neden olmasın ki? Veya animasyonları neden doğal etiketlemeler ve bir takım javascript alt yapılarla oluşturmayalım? Böylece kimse kendine ait standartlaşmalar yoluna gitmez. Henüz geliştirme aşamasında olan ve daha uzun bir süre bu aşamada olacak olan HTML 5 şu anki haliyle bile pek çok soruna çözüm üretmiştir.  Artık pek çok site HTML5 standartlarına dayalı yapılıyor.

HTML5 sadece yukarıda içerdiğim popüler maddeleri kapsamıyor tabii ki, aslında alt yapısal olarak pek çok farklı yapıyla geliyor. Tarihsel sürece ve bütün bu alt yapısal teknik konularla kafa karıştırmadan doğrudan işin pratik yönlerini sizinle paylaşacağım.

Öncelikli olarak şunu belirtmeliyim HTML5 kodlarınızın (etiketleme) çalışması için browser’ımızın HTML 5 uyumlu olması gerekiyor.  Günümüzdeki hemen her  browser en yeni sürümleriyle HTML 5’i desteklemektedir. Bazısı bazı HTML5 özelliklerini desteklerken bazısı desteklememektedir.

Bunun sebebi de şudur. HTML5 halen geliştirilme aşamasındadır. Browser üreticileri her yeni sürümde bazı yeni özellikleri eklemektedir. Dolayısı ile mutlak bir ortak uyumluluktan şu an için söz etmek zor. Ancak pek çok bilinen HTML5 özelliğini hemen her bilinen browser desteklemektedir.

Browser’ınızın Hangi HTML5 özelliklerini  desteklediğini öğrenmek istiyorsanız, bunun için pek çok site var. Bunlar karşılaştırmalı tablolar sunarak hangisinin hangi özelliği desteklediğini detaylı olarak gösteriyor. Daha pratik bir site de http://www.html5test.com/ bu siteye girdiğinizde, kullandığınız browser’ın hangi HTML5 özelliklerini desteklediğini maddeler halinde görebiliyorsunuz. Hatta daha da ileri gidip bir puanlama da yapıyor.

Örneğin önce ben Firefox’un 8.01 sürümüyle www.html5test.com/ a bağlandım :

aşağıya doğru uzun bir liste olan HTML5 elemanlarını destekleme puanlamasından 314 almış Firefox 8.01 sürümü.

Aynı test’i chrome 16.0.912.63 sürümüyle yaptığımızda:

343 almış. Detayları dikkatlice incelerseniz HTM5 ile ilgili yenilikleri görürsünüz. Buradan da anlaşılacağı üzere HTML5 bazı özelliklerini bazı browser sürümleri desteklerken bazıları desteklememektedir. Ancak temel HTML 5 elementlerinin hemen her browser’ca desteklendiğini tekrar vurgulamakta fayda  var. Ben de zaten ağırlıklı olarak Temel özelliklerden bahsedeceğim.

HTML 5’ in temel yapısı

HTML5 ile ilgili kaynakları incelediğinizde hemen hepsi semantik bir yapıya sahip olduğundan bahseder. Peki nedir semantik yapı?

Burada semantik kavramı en basit, temel anlamıyla kullanılmıştır. Yani HTML5 tagları aslında ne dediklerini ifade ederler. Mesela HTML5

tagı bir başlık olduğu açıklamasına gerek duymaz. Zaten tag’ın kendisi bunu gösteriyor.

Veya footer

veya article

HTML5 de taglar bu şekilde oluşturulmuştur ve kullanımı, algılanması son derece kolaydır.

HTML5 Koduna uzaktan baktığınızda son derece  düzenli, simetrik ve anlaşılır bir yapı görürsünüz

Bu HTML 5 kodunu incelerseniz ne demek istediğimi daha iyi anlayacaksınız. Gördüğünüz gibi yapı son derece simetrik, açık ve anlaşılır. Başlık
< header  >

etiketleri arasına konumlandırılmış. İçerikler

< article  >

 altlık

< footer  >

tagları arasında yazılmış. HTML5 dosyasını ve kullanılan dili tanımlayan ifadeler de

<!DOCTYPE html> 
<html lang="en" >

şeklinde son derece basitleştirilmiş.

HTML 5 de XML e ait açılan tag kapanır gibi yazım teknikleri geçerlidir.  Yukarıdaki sayfada CSS tanımlamalarına da dikkatinizi çekmek isterim. Bunlar da semantik yapıdadır. İlk bakışta hangi elementle ilgili işlem yapıldığı kolayca anlaşılmaktadır.

Özet olarak HTML5 daha ana yapısından başlayarak HTML e yeni bir anlamsal yapı getirmiş ve kullanımı daha sade anlaşılabilir kılmıştır.

Bir dahaki yazımda HTML5 taglarını ve kullanımlarını incelemeye devam edeceğim.

JQuery Mobile – II

JQuery Mobile – 2

 (Bu Makalem Aralık  2011 tarihinde mobillife dergisinde yayınlanmıştır)

Bir önceki makalemde jquery mobile’a bir giriş yapmıştım. Orada Visual Studio, Dreamweaver gibi gelişkin editörlerin jquery mobile’ı desteklediğini yazmıştım. Bu yazımda bu konuyu biraz daha detaylandıracağım.

Örneğin Dreamweaver’da (5.5 sürümü) proje oluşturma seçenekleri içinde

“More...” a tıkladığınızda

Resimdeki gibi size jquery mobile şablonu oluşturan bir seçenek sunuluyor. Burayı tıkladığınızda gerekli sayfa(lar) ve bağlantılar oluşturulup getiriliyor:

Burada da görüldüğü gibi pencerenin sol tarafında jquery mobile’a ait tag’lar (etiketler), sağ tarafta da bunların sayfa üzerindeki konumları gözükür. Gerçek çıktıyı görmek için yukarıdaki “Live View” butonuna basmak gerekli:

Böylece yazdığımız tag’ların nasıl çıktı üreteceği anında görülür. Her şeyin bildirimsel (tag-etiketlerle) olarak yapılması Jquery mobile kullanımını son derece kolay hale getiriyor. Gerekli şekilsel düzenlemeler yukarıdaki linklerde belirtilen javascript kütüphaneleri ve CSS ler tarafından yapılıyor.

Sayfa Mimarisi

Jquery mobile’da sayfa mimarisi bildirimsel bir yapıya sahiptir. Diğer bir ifadeyle Jquery mobile sayfaları  tek bir html sayfası (veya aspx, php vs) üzerinde bildirimsel olarak yapılandırılan sayfalardan oluşur ve bu etiket veya tag ise:

gibi “data” rolünü “page” olarak belirten bildirimdir. Dikkatle baktığınız zaman  Jquery mobile nitelik bildirimlerinin “data”  ile başladığını  görürsünüz.

“data“ bildirimleri “jquery mobile” ı temsil eder.

Yeni bir sayfa bildirimi de aynen yukarıda oluğu gibi bu rolün bir sayfa yani “page” oluşturmak olduğunu söyler.

Devamında bir mobil sayfada gereken bildirimler yapılır. Bunlar temel olarak başlık, içerik ve altlıktır. Böylece tipik bir “jquery mobile” sayfa yapısı:

şeklindedir.

Burada dikkat edilmesi gereken diğer bir husus her bir sayfanın bir “id” ile kimliklendirilmiş olmasıdır. Bu bize birazdan anlatacağım sayfalar arası “gezinim” (Navigasyon) imkanını sağlar. Nitekim birinci sayfa bildirimine baktığımız zaman:

Şeklinde # (hash) ile başlayan link adresleri görüyoruz.

Bu link adresleri fiziksel olarak aynı dosyada bulunan fakat sunumsal olarak sadece bir tek sayfa görünümü sağlayan jquery mobile  sayfaları arasında bağlantı kurma imkanı verir.

Nitekim link adresleri sayfa “id” lerinden oluşuyor. Bu sayede işte o meşhur yana kayan sayfalar arası gezinim imkanı oluşuyor.

Konu linklerden açılmışken, örneğin linkinizin bir buton görünümünde olmasını istiyorsanız sadece:

data-role="button"

ifadesini kullanmanız yeterli:

Veya tıkladığınız linkin bir “pop up” “dialog” şeklinde gözükmesini istiyorsanız:

data-rel="dialog" data-transition="pop"

şeklinde bildirimlerde bulunmanız veya diğer bir ifadeyle nitelikleri tanımlamanız gerekir:

Toolbar’lar

Jquery mobile’da standart iki toolbar mevcuttur. Bunlar “header” ve “footer” dır.

Yukarıda da açıkça görüldüğü gibi:

şeklinde bir bildirimle oluşturulurlar ve görüntüsü de aksi belirtilmedikçe siyah arka plana beyaz metin şeklindedir.

Toolbarlar’a aşağıdaki gibi butonlar eklemek istiyorsanız:

Şu şekilde bir bildirimde bulunmalısınız:

 

data-icon bildirimi buton üzerindeki icon’u belirtir. Bu bildirimi yapmazsak “icon” suz bir buton görünümü alınır:

Başka bir açıdan bakarsak Toolbarlar da tanımlanan linkler buton şeklinde gözüküyor eğer özel “icon” lar isteniyorsa bunu da açıkça bildirimsel olarak belirtmeliyiz.

jquery mobile’a gelecek yazılarımda devam edeceğim.

jquery mobile

JQuery Mobile
(Bu yazım kasım 2011 mobillife dergisinde yayınlanmıştır)
Geçen yazılarımda da anlattığım gibi mobil yazılım geliştirme iki ana teknikte ilerliyor. Bunlardan bir tanesi mobil cihazın kendine ait olan platformu üzerinden uygulama geliştirmek (Native) diğeriyse standart web teknolojileriyle browser uygulamaları geliştirmek. Bunların artı ve eksilerini daha öncedeki yazılarımda aktarmıştım. Bugünkü makalemde mobile web uygulamalarının (development) yükselen yıldızı JQuery Mobile’ı tanıtmaya çalışacağım.
JQuery Mobile bütün popüler mobil cihazları destekleyen, dokunmatik ekranlar için optimize edilmiş bir framework. Alt yapısında JQuery ve JQuery UI framework’lerini kullanan JQuery Mobile kullanıcı arabirimi olarak HTML5 üst yapısını kullanıyor.
Daha da basit anlatmaya çalışırsam dokunmatik ekran arabirimleri, tuş takımlı mobil cihazlara göre daha farklı tasarlanır. İşte JQuery bu arabirimleri oluşturmak için geliştirilmiş ve bu yapılırken de web’in doğal teknolojilerinden başka teknik kullanılmamış. Yani JQuery kütüphaneleri, CSS ve HTML5 teknolojileri kullanılmış.
JQuery Mobile ile sadece etiketlerden (tag) oluşan bir bildirimle çok hızlı dokunmatik arabirimler oluşturulabiliyor. Üstelik bunların şekil ve renkleri tek bir bildirimle değişebiliyor.
http://jquerymobile.com/ adresinden erişebileceğiniz bu kütüphaneyi web sayfasının altında yazan adobe, Nokia, blackberry  dahil pek çok firma destekliyor.
“Docs and Demo” linkindeki  sayfada  JQuery Mobile a ait örnekleri hemen görüyorsunuz, çünkü bunlarda JQuery Mobile tekniği ile dokunmatik ekran mantığına göre hazırlanmış:



Bu sayfaya iphone’dan baktığınızda:

  Görünüm sanki native bir uygulamaymış gibidir. Kolay kolay bir web uygulaması olduğu anlaşılmaz.
İşte bu arabirimleri uygulama geliştiricilerin kolayca oluşturabilmesi için JQuery Mobile kütüphanesi veya Framework’ü geliştirilmiştir. Şu an nihai sürümden önceki son sürümlerinden biri olan (RC2) JQuery Mobile çok yakında nihai sürümüyle kullanımda olacak. Ancak bu hali de hemen hemen nihai sürüm gibi. Çünkü RC sürümler de sadece ufak değişiklikler yapılır.

JQuery Mobile’ı Kullanmak
JQuery Mobile ‘ı kullanmak için bilgisayarınıza hiçbir şey kurmanıza gerek yok. Hatta hiçbir şey depolamanıza da. Birer js ve CSS dosyası olan kütüphaneleri linkleyerek hemen kullanmaya başlayabilirsiniz.
Dilerseniz bu dosyaları kendi bilgisayarınızda da saklayıp referans gösterebilirsiniz.
http://jquerymobile.com/download/ linkini tıkladığınızda, JQuery Mobile’ı kullanmak için  size bir çok seçenek sunuyor.
Buraya baktığınızda 3 temel dosyanın kullanılması gerektiğini görüyorsunuz. Bunlar uzantıları js olan JQuery, JQuery.Mobile ve uzantısı css  olan JQuery.Mobile. İfadelerin devamında gelen sayılar ise hangi sürüm olduklarını belirtir. Daha net bir ifadeyle şu dosyalarla çalışılır:

Bu dosyaları indirip kendi bilgisayarınızda da kullanabilirsiniz veya doğrudan bunların web adresini vererek referans gösterip kullanabilirsiniz:

 

Bu linklerden CSS ile biteni, kullanıcı arabirimini CSS tekniğine dayanarak oluşturan dosya. JS lerde bildiğimiz javascript altyapılı JQuery kütüphaneleri. Bunlar işleyişi kontrol ederler.
yapmanız gereken html sayfanızın head tagları arasına yukarıdaki referansları kopyalamak:

artık JQuery Mobile ile çalışmaya hazırsınız. Bundan sonrası sanki HTML tagı yazıyormuşçasına JQuery Mobile’a ait bildirimleri sayfaya eklemek. Bu bildirimlerden bir kaçını birazdan örnekleyeceğim. Ancak bütün bildirimleri ve ifadeleri bulmak için http://jquerymobile.com/demos/1.0rc2/ sayfasından veya diğer referans kaynaklardan faydalanabilirsiniz.
JQuery Mobile ile çalışan editörler mevcut. Bunun anlamı şudur; JQuery Mobile’ı otomatik olarak ekleyip, bildirimlerini otomatik olarak kullanıcıya sunar bu editörler. Bunlardan biri  Visual Studio diğeriyse Dreamweaver’dır.
Dreamweaver CS 5.5 sürümünde JQuery Mobile ifadelerini yazmaya başladığınızda kullanabileceğiniz bildirimler otomatik olarak  sunuluyor. Diğer bir ifadeyle kod tamamlama var:

Tipik bir JQuery Mobile sayfa yapısı aşağıdaki gibidir:

Mobil cihazımızda dokunarak yana kaydırdığımız her bir ekran “page” (sayfa) denilen bölümlerden oluşur bu bölümlerde kendi içinde Başlık, içerik ve taban olarak ayrılır. Bir html sayfası içinde birden fazla “page” bildirimi yapılabilir.

yukarıdaki ekranda, sayfanın cihazımıza tam olarak sığmadığını görüyoruz. Bunun için head etiketleri arasına şöyle bir bildirimde bulunursak sorun ortadan kalkar:

Bir link eklemek istediğimizde:

Bildiğimiz html linki tanımı yapıyoruz. Farklı olarak örneğin bu linkin buton şeklinde gözükmesini istiyorsak:


şeklinde bir ifade kullanmak gerek:

jquery mobile’da bir mobile arabirim için gereken bütün elemanlar tanımlıdır. Butonlar, metin kutuları, linkler ve diğerleri. Yeri geldikçe bunları tanıtacağım.

Web Uygulamalarında Sosyal Ağ Entegrasyonu

Akıllı cihazların, bulut uygulamaların ve sosyal ağların yaygınlaşmasıyla, yazılım modelleri de değişti. Öncelikle artık web uygulamalarında doğrudan HTML ve Javascript’e dayalı modeller ağırlık kazandı. Özellikle HTML 5 in gelişmesiyle bu ağırlık daha da aratacak. Eskiden bir takım plug-in’lerle yapılabilen görsel zenginlikler şimdi bu iki teknolojiyle çok rahat yapılabiliyor (Daha kolay değil).  Web uygulama teknolojilerini kapsayan detaylı yazılarım bu köşede yayımlanmıştı. Şimdi bunlara bir de sosyal ağlar ayağını ekleyerek tekrar bakmak istiyorum.
Artık geleneksel anlamda client uygulamaların yerini, özellikle akıllı cihazlar için web ve native (cihazın kendi yazılım diliyle geliştirilmiş) uygulamalar, masa üstü içinse bulut uygulamalar almıştır. Aslında bulut uygulamalarda web tabanlı olduğu için onları da birer web uygulaması sayabiliriz.
Ama burada diğer enteresan bir konu sosyal ağların durumu. Özellikle Twitter ve Facebook gibi ağlar gerçekten de çok büyük kullanıcı kitlelerine ulaştılar. Facebook için 700 milyonu aşkın bir kullanıcı kitlesinden bahsediliyor. Twitter içinse bu sayı 200 milyonu aşkın.
Şimdi bir de Google+ geldi. Daha sınırlı deneme sürümünde bile ilk günlerinde 20 milyon kullanıcıya ulaştı. Gelecekteki durumunu tahmin etmek hiç de zor değil. Durum böyleyken eğer web’de bir uygulama geliştiriyorsanız ve bunun da geniş kitlelere masrafsızca ulaşmasını istiyorsanız sosyal ağlarla entegre etmeniz kaçınılmaz oluyor.


Sosyal Ağlar ve Web uygulamaları
Sosyal ağlar için uygulama geliştirme kavramını pek çok kişi duymuştur. Peki nedir bu?
Aslında bunun pek çok boyutu var.
Entegrasyondan bahsedeceksek herhalde önce API kavramını incelemek en doğrusu olacak.
API (Application Interface) bir uygulamanın dış dünya ile olan “yazılımsal” ilişkilerini belirleyen arabirimlerdir. Diğer bir ifadeyle uygulamanın iletişim arabirimleridir. Bu arabirimler sayesinde diğer uygulamalarla iletişim sağlar ve onlardan gelen komutları uygular. Diğer uygulamaların ve geliştiricilerinin API nin içeriği hakkında bilgi sahibi olması gerekmez ve hatta güvenlik sebepleriyle de olmamalı. Ancak API arabirimleri sayesinde uygulamaya istediği şeyleri yaptırır.
Konuyu biraz daha somutlaştırırsam; Örneğin bazı sitelerde veya uygulamalarda kendi “login” yordamı dışında facebook ve/veya twitter gibi login imkanları da bulunmakta.
Yani facebook (veya twitter, google, yahoo vs) kullanıcı ismi ve şifresiyle bu sitelere giriş yapılabilmekte.
Peki bu nasıl oluyor? İşte burada facebook (veya diğerleri) API si sayesinde kullanıcı bilgilerine ulaşılabilmekte ve izin verilen bilgiler kullanan uygulamaya gönderilmektedir.


API Kullanımı
İsterseniz sistemi yakından inceleyelim. Bir login sistemi örneğin facebook login sistemi nasıl oluyor da başka bir uygulama da kullanılabiliyor?
Sistem alt yapı olarak biraz karmaşık. İşin içinde ortak anahtarlar, özel anahtarlar, encoding, token gibi teknik, karmaşık kavramlar var.

Ama ben mümkün olduğunca işleyişi sadeleştirerek anlatacağım. Aşağıda anlatacaklarımı facebook üzerinden örneklesem de diğer API kullanımları için de hemen hemen aynıdır.
Hangi uygulamayı geliştiriyor olursanız olun bunu bir facebook uygulaması olarak da çalıştırmak istiyorsanız öncelikle facebook hesabınıza kayıt etmelisiniz.
Uygulama ismi, adresi gibi detayların verildiği kayıt işleminden sonra bu uygulamaya ait bir takım uzun anahtarlar oluşturuluyor. Uygulamayı geliştiren bu anahtarları uygulamasına eklemeli. Bu sayede facebook veya twitter uygulamanın kendilerinde kayıtlı olduğunu anlıyorlar ve bir takım birimlerine ulaşmalarına izi veriyorlar. Facebook (veya diğerlerine) yazılımsal olarak bir şeyler yaptırmak istiyorsanız yukarıda bahsettiğim API yordamlarını kullanmak durumundasınız. API sine erişmesine izin vermiş facebook bu API ye göre gelen komutları işleyerek uygulamaya geri gönderir. Bunlardan bir tanesi de yukarıda da belirttiğim gibi login kontrolüdür. Facebook, Twitter ve diğerlerinin API lerini kullanarak buradaki kullanıcıların uygulamanızı kullanmasına izin verebilirsiniz. Biraz karmaşık alt yapıları gerektiren bu entegrasyon, kullanım açısından o kadarda karmaşık değil. Ama yine de belirli bir yazılımsal bilgi birikimini gerektiriyor. Daha basit entegrasyonlar da yapmak mümkün.
Uygulama deyince tabii sadece login yordamları gelmemeli akla. Günümüzde artık oyun uygulamalarından marketing uygulamalarına kadar pek çok kategoride uygulamayı sosyal ağlar için  geliştirmek mümkün.

Mesela facebook’da basit bir iframe arabirimi sayesinde mevcut HTML sayfanızı facebook’a dahil edebilir ve bunu bir uygulama olarak facebook ziyaretçilerinize sunabilirsiniz.
Eskiden Facebook’un bir markup dili vardı artık onu da kaldırdı. Doğrudan HTML taglarınızı facebook’a ekleyebiliyorsunuz. Tabii yukarıda bahsettiğim şekilde bunu öncelikle bir uygulama olarak kayıt etmeniz gerekiyor.
Twitter için de durum aynı. Onda da uygulamanızı kaydederek kullanabiliyorsunuz.
Twitter’da nasıl uygulamalar olabilir?
Örneğin kendi uygulamanız içinden kullanıcılarınıza tweet atmasını sağlayan bir arabirim geliştirebilirsiniz. Sayfanıza gelenler oradan ayrılmadan şifresini ve kullanıcı ismini girerek “tweet”lerini atabilir veya takip edebilirler. Buna ait pek çok uygulama hali hazırda mevcut. Veya kendi “tweet” lerinizi kendi sayfanızda yayınlayabilirsiniz. Daha pek çok yaratıcı fikir üretilebilir. Amaç mümkün olduğu kadar insanın ilgisini çekip ziyaretçi toplayabilmekse sosyal ağlar müthiş bir fırsat.

İşin marketing(pazarlama) kısmına değinecek olursak. Geleneksel yöntemlerle ulaşabileceğiniz kişi sayısı sosyal ağlara oranla çok daha maliyetli. Doğrudan hedef kitleye ulaşabilecek imkanlar sunan sosyal ağlar üstelik bunu minimum maliyetlerle yapabilmekte.
Mühim olan yaratıcı ve yararlı uygulamalarla bu ağdaki hedef kitlenizin ilgisini çekebilmek.
Bugün artık web üzerinden geniş kitlelere ulaşmak isteyenler bunu sosyal ağlar olmaksızın neredeyse başaramazlar. Diğer bir ifadeyle sosyal ağlar sadece sohbet edilen, resim paylaşılan yerler olmaktan çıkıp müthiş bir marketing alanına da çoktan  dönüşmüş durumda.