Bootstrap’ın yeni sürümü çıktı

Yeni bir web projesine başlarken Twitter Bootstrap’ı kullanmamak, artık zaman kaybı anlamına gelmişken, her gün, bootstrap’ın uzantısı olan bir çok ufak proje, arayüz eklentisi, tema vs çıkıyor.

Bootstrap ekibi de, çoğunlukla mobil ve responsive özellikleri geliştirilmiş olarak, görsel olarak da son dönemdeki flat design akımına uyarak yeni bir sürüm çıkardılar.

Görsel olarak hâlâ flat design akımının günümüze hazır olmadığını düşünsem de, fonksiyonellik açısından iyi bir gelişme olarak görüyorum. Bootstrap da buna uygun doğru bir hamle yaptı diyebiliriz. Beni en sevindiren tarafı ise, daha mobil dostu olması. Önceki sürümleri de mobile uyumlu idi fakat sitenizi hem mobil hem masaüstü için uyumlu yaparken, birçok ufak düzeltme yapmak durumunda kalıyordunuz. Bu sürümde ise mobil, öncelik haline gelmiş ve masaüstü ikincil planda desteklenmiş.

Yeni sürümü şuradan deneyebilir ve yeniliklerini görebilirsiniz: http://getbootstrap.com

Güncelleme: Şuradaki: http://www.designshock.com/bootstrap-3-psd Photoshop UI Kit’ini kullanarak tasarımları da bootstrap ile şekillendirebilirsiniz kodlamadan önce.

Sitenizi Twitter Cards ile tweet arkadaşı yapın

Web sayfanızı SEO taranabilirliği için meta ve belki facebook için de düzenlediniz diyelim. Amacınız sayfanızı tarayan google ve benzeri örümcekler/tarayıcıların sayfanız hakkında topladığı özet bilgisi tanımlamak. Çünkü google ve facebook sayfanızda ne çözebildiğini değil, sizin onlar için, sayfanızın ne anlama geldiğini söylemenizi istiyorlar. Bunun için de standart sayfa tanımlaması meta etiketlerine ek olarak facebook opengraph meta etiketlerini kullanarak, facebook örümceklerinin, özel olarak sayfa içeriğiniz hakkında daha detaylı bilgi almasını sağlayabiliyorsunuz. Facebook opengraph içerik (nesne) tanımlamalarını yıllar önce kullanıma sundu ve şu an bir çok popüler web sayfası bu meta etiketleri ekleyerek sayfalarının facebook’da nasıl göründüğünü bir nebze de olsa kontrol edebiliyorlar.

Twitter da birkaç ay önce “Twitter Cards” adında bir grup meta tanımlaması kullanmaya başladığını yayınladı. Bunun asıl amacı, tweet’lerdeki linklerin ne anlama geldiklerini daha iyi çözebilmekti. Eğer twitter card meta etiketleriyle sayfa kimliği belirlenmiş bir sayfa url’i tweet ederseniz, o tweet genişletilebilir (expand) hale geliyor ve web sitesinde ve twitter’ın mobil uygulamalarında görüntülendiğinde tweet metni içindeki url’e ait sayfa detaylarını twitter card meta etiketleri aracılığıyla gösteriyor.

Yani insanlar sayfanızı tweetlediklerinde siz twitter’a sayfanız hakkında daha detaylı bilgi sunabiliyorsunuz ve twitter bunu daha zengin içerik olarak kullanıcılarına sunuyor.

Twitter card adını verdikleri bu link açıklayıcı meta etiketleri, opengraph’e benzer şekilde başlık, açıklama ve açıklayıcı görsel ile bir linki özetleyen bir bilgi sunuyor. Aşağıda twitter card destekleyen bir link paylaşılmış bir tweet’in web’de nasıl göründüğünü görebilirsiniz.

Twitter card detayları tabi ki varsayılan biçimde görüntülenmiyorlar ancak kullanıcı, mobilde tweet’e dokunursa veya web’de expand butonuna basarsa twitter card detayları görüntüleniyor.

Sitenizin tüm sayfalarını twitter card ile desteklemek zorunda değilsiniz. Ancak blog yazısı gibi çoğunlukla metin ağırlıklı bir içerik, video veya fotoğraf gibi bir içeriğiniz var ise bu içeriğin paylaşılma ihtimali daha yüksek olacağından bu sayfalara twitter card metaları eklemek daha anlamlı olacaktır. Zaten twitter içerikleri bu üç kategoride grupluyor ve bunu da twitter card türü olarak tanımlamanızı istiyor.

Twitter Card’ınızı hazırlamak için önce içeriğinizi özetleyecek 3 elementi tanımlamanız gerekiyor.

  • İçerik tam adresi (url)
  • İçerik başlığı
  • İçerik özeti – kısa metin
  • İçerik görseli (görselin tam url’i)

Bu öğeleri hazırladıktan sonra bu sayfalarda aşağıdaki meta etiketi grubunu head etiketi içine eklemeniz, sayfanızın twitter card’a sahip olmasına yetecektir.

Yukarıdaki kod genel bir metin ağırlıklı içeriğe sahip sayfayı özetleyen twitter card kodu. Dökümantasyonda fotoğraf yani tekil görsel ağırlıklı bir sayfa veya video tipi medya sunumu yapan bir sayfanın nasıl bir twitter card’a sahip olması gerektiğini ve bu türlere özel etiketlerin açıklamalarını ve örneklerini görebilirsiniz. https://dev.twitter.com/docs/cards adresinden erişebileceğiniz twitter card dökümantasyonu ayrıca twitter card meta etiketlerinin tüm listesini ve gerekli detaylı açıklamalarını veriyor.

https://cards-dev.twitter.com/validator adresinden de hazırladığınız twitter card’i sayfanızın url’ini girerek önizlemesini görüntüleyebilirsiniz. Bu araç aynı zamanda hataları görmenizi ve sayfanızın twitter card’ında bir sorun olup olmadığınızı anlamanıza yardımcı olacaktır.

CSS çatısı kullanmanın faydaları

Uzun bir süre bütün arayüzlerimi hiç bir framework veya arayüz kütüphanesi kullanmadan kendim yazdım. Özellikle mobil cihazların kullanımının yaygınlaşmasından dolayı, aynı html içeriğini farklı ekran çözünürlüklerine uygun arayüzlerde gösterme ihtiyacı çoğaldı. Hala mfyz.com’daki arayüzü tamamen sıfırdan yazılmış bir css ile çizdiriyorum. Evet herşeyi sıfırdan yapmanın avantajları var fakat avantajları kadar belki daha fazla dezavantajları ve daha derin bilgi birikimi gerektirmesi gibi yanları da var.

Her kodu tamamen elde hazırlamanın en büyük dezavantajı, kararlılıgını korumak ve çok popüler olan, bilinen hataları gidermek için zaman harcamak zorunda olmanızdır. Yani çok basit bir IE hatasını düzeltmek için gereksiz zaman kaybeder daha da tehlikelisi bu küçük şeyler için ayırdığınız zaman sizin genel motivasyonunuzu kırması gibi tehlikeleri göze almış olursunuz. Özellikle tek geliştiricinin bulunduğu projelerde (ki bir freelancer’in elinin altında her zaman tek başına yürürttüğü proje olur) büyük bir motivasyon bozukluğuna neden olabilir. Dolayısıyla hazır yapılar, kütüphaneler sadece zaman kazanmak şeklinde görülmekten çok, birçok geliştiricinin katkıda bulunduğu ve aslında birçok hammallık işini yapmak zorunda kalmamanız olarak algılanmalıdır. CSS veya başka bir dil farketmeksizin bu geçerli diyebiliriz.

Şimdi gelelim arayüz dillerindeki çatılara. Birkaç yıl öncesine kadar CSS için çok yaygın kullanılan veya birçok geliştiricinin ürettiği bir arayüz çatısı yoktu. Nedeni ise hem css3’den önceki versiyonlarda bir çatı gerektirecek genel ihtiyaçlar yoktu bir diğer nedeni de farklı çözünürlüklerdeki ekranlar bu kadar farklı varyasyonlara sahip değildi.

Bir CSS çatısına ihtiyaç duymanızı gerektirecek en büyük bir başka neden ise özellikle standartlara kabul edilmemiş css3 özelliklerinin (animasyonlar vs) hala tarayıcı spesifik on ekler istemesi olabilir. Örneğin, standartlara kabul edilmesi çok eskilere dayanmayan border-radius özelliğini kullanmak ve bütün tarayıcılarda çalışmasını sağlamak için aynı satırı -moz -webkit -o ve -ms gibi on eklerde kullanmak zorunda kalıyorduk. border-radius çok basit bir özellik ve tek parametre gerektirdiği için bunu örneklemem, bu problemin gözünüzde çok canlanmasını sağlamayabilir ama başka bir örnek olarak, bir elemanınızın arka plan rengini doğrusal geçiş (linear gradient) ile şekillendirmek isterseniz uzun bir satır yazmanız ve bunu 4-5 tekrarda css dosyanızın içine koymanız gerekecektir.

Malesef, bu özellik, standartlara geçene kadar bu şekilde kullanılmak zorunda. Yukarıdaki kodda aslında standartlara başvurulan model ilk satırdaki linear-gradient ile başlayan modelidir. Ancak daha standartlara kabul edilmediği için tarayıcılar kendi on eklerini diretmektedir. Çok basit bir geçiş için bu kodları ezberlemek veya tekrar tekrar kodlamak çok anlamsız. Aynı durum birkaç css3 özelliği için de söz konusu.

Peki bir css çatısı kullanmak bunu önleyecek mi? Eğer bir yorumlanan özel bir dil değilse hayır önlemeyecek ama muhtemelen buna benzer hazır geçişleri veya on tanımlı bazı kolay yollar sunacaktır. Eğer yorumlanan bir yapı kullanıyorsanız evet kesinlikle bu kodu çok kısaltmanın yolu var. Bunun için LESS veya SASS’i inceleyebilirsiniz.

Bir çatı kullanmadaki bir diğer fayda da on tanımlı bir çok uygulama eklentisi sunmasıdır. Yani bir web uygulamasında muhtemel olarak kullanacağınız her element için düzgün bir kozmetik hazırlık bulabilirsiniz. Size bunu bir css çatısı önererek anlatmaya çalışacağım.

Twitter bootstrap

Twitter deyince hemen bunun arayüzle ne ilgisi var diyebilirsiniz. Twitter ekibi, twitter’da kullandıkları arayüz kozmetiği ve bazı jquery eklentilerini paketleyerek açık kaynak kodlu bir çatıya dönüştürmüşler. Su an 2+ sürümüne sahip twitter bootstrap aslında bir web uygulaması için başlangıç arayüzleri oluşturmak için tasarlanmış. Yani ufak bir web uygulamanız var ise bunu twitter bootstrap kullanarak çok kolay şekilde şekillendirebilir, eklentilerini kullanarak zenginleştirebilir ve html yapınızı biraz oynayarak arayüzünüzü farklı cihazlarda ve ekran çözünürlüklerinde düzgün görüntülenebilir bir şekle getirebiliyorsunuz.

Örnegin bir RSS kaynağından aldığınız müzik dosyalarını işleyerek bir web arayüzü hazırlamak istiyorsunuz. Sunucu tarafını php ile yazdığınızı düşünürsek, php ile yazacağınız şeyleri yazdıktan sonra, sunucu tarafına ayırdığınızdan belki katlarca daha fazla zamanı arayüzü kodlamakla harcama ihtimaliniz var. Twitter bootstrap kullanarak formlarınızı, butonlarınızı, gridlerinizi, tab veya fare imlecine göre görünüp kaybolan ipuclari ile uygulamanızı zenginleştirebilirsiniz. Farklı tarayıcı uyumlulukları, farklı çözünürlükler gibi şeylere kafa yormanıza genel konular dahilinde gerek kalmıyor.

İstediğiniz özel stilleri, varolan stillere eklemeler yapacağınız gibi varolan stilleri de değiştirebiliyorsunuz. Hatta kaynak koda girip tüm yapıyı da oynama seçemediğiniz var. Ancak twitter bootstrap size sadece önceden kodlanmış bir arayüz sunuyor, yaptığınız eklentilerde veya değişikliklerde yine css3’un hammal yanını göreceksiniz.

CSS Çatıları (framework) tek seçenek mi?

Hayır, çatılar birçok işinizi kolaylaştırsa da temeldeki css dilinin getirdiği yapıyı değiştiremeyeceği için tekrar eden kodlardan kurtulamayacaksınız ayrıca matematiksel çarpanlı yani mimari arayüzler hazırlamanızda size daha önce tanımlı olduklari değerler kadar esneklik sağlayacaktır.

CSS’i dil olarak daha öteye taşıyan ve birbirine benzeyen birkaç yapıdan bir tanesini kısaca anlatarak bahsedeceğim.

Ben, kişisel olarak projelerimde LESS kullanıyorum. Less, css dökümanlarınızda iç içe tanımlamalar yapabilmenizi, fonksiyonlar tanımlayıp fonksiyonları kullanarak renk değişimleri, matematiksel işlemler yapabilmeyi ve benzer programatik şeyler yapabilmenizi sağlıyor, yabnı kısaca css’e bazı programsal özellikler ekliyor. Birkaç farklı method ile kullanılabiliyor. En yaygın kullanımı bir javascript dosyası ile css’inizi tarayıcıda derleyebiliyorsunuz. En pratik kullanımı bu. Fakat tarayıcıdaki ön bellek, geliştirme esnasında baş ağrısı yapabildiği için kodunuzu yazdığınız gibi css dosyalarına derleyerek kullanmanızı tavsiye ediyorum. LESS hakkında biraz daha detaylı yazdığım su yazıyı inceleyebilirsiniz: http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak

Benzer şeyleri yapan ve çok derinlerine inmediğim SASS’i da deneyebilirisiniz. http://sass-lang.com/

Neden sadece twitter bootstrap ve less’den bahsettim?

Çünkü twitter bootstrap kaynak kodlarında less ile yazılmış. Yani kaynak kodunu indirip less kodlarındaki kuralları değiştirerek esnek bir grid’i isteğinize göre üretebilirsiniz, renk kurallarını veya kenar boşlukları, gibi bir çok şeyi less ile çok daha kolay şekilde değiştirebilirsiniz.

İster bir çatı kullanın ister sadece LESS, SASS gibi diller kullanın, yazdığınız css’lerinizi daha hızlı üretmenizi sağlayacak çok güzel araçlar var.

Web projeleriniz için güçlü bir UI kit: Twitter Bootstrap

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/

jQuery ile sitenize Twitter akışını eklemek

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

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:

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.

Sosyal Medya’nın dibine vurmak


“Sosyal medya”, “Sosyal medya” diyip duruyorlar. Her yer sosyal medya, her yer sosyal medya uzmanı! Bu günlerde, özellikle bu yıl bunu o kadar çok duyuyoruz ki, yazılımın içinde, dışında, kampanyaların içinde dışında, her yerde.

Evet duymak güzel birşey ama sanki salgın gibi gelmeye başladı bana. Hani 2000lerde fln MMOPRG’dan dolayı fln insanlar ölürdü ya, onun gibi. Enfekte içinde ben de varım. Büyük bir vaktimi friendfeed’de geçiriyorum. Tamam belki bazı şeylere, bilgilere, etkinliklere daha yakınım saniyesinde haberdar oluyorum fakat bir yandan gizlilik (privacy) paranoyasını depreştiriyor.

Yani herşeyimizi paylaşmaya başladık.

  • Facebook ve Flickr’da fotograflarımızı,
  • Friendfeed ve twitter’da o an ne yaptığımızı,
  • Google reader’da neleri takip edip neleri okuduğumuzu,
  • Last.fm ve grooveshark’da ne tür müzik dinlediğimizi,
  • Tumblr, soupio, postreous gibi microblogging servislerinde anlık bloglama ile deneyimlerimizi

Paylaştıkça herşeyimizi ortaya seriyoruz. Bazı insanların çok hoşuna gidiyor, ben de rahatsız değilim.

Sanki birşeyler yanlış gidiyor, bir gün biryerlerden patlayacak bunlar, ama ne zaman ve nasıl?

Belki bir gün psikologların literatürüne bir tür bağımlılık, bir rahatsızlık olarak geçecek.

Twistory ile twitter geçmişinizi takviminize yedekleyin

Twitter geçmişinizi yedeklemeyi belki hiç düşünmediniz ama bu araç twitter geçmişinizi post tarihlerine göre ical takvim dosyası şeklinde almanızı sağlıyor. Basit bir şekilde twitter kullanıcı adınıza göre ical dosyası şeklinde export alıyor ve icalendar, google takvim veya outlook’unuza import edebiliyorsunuz.

Şuradan devam edin twistory.net

Twitter insanlarına genel bakış ve Twitter Türkleri

Twittercount’un degerleri oldukça güncele yakın. Buna göre Türkiye lokasyonundaki twitter hesaplarına göre oluşan toplist’deki isimleri biraz inceleyince şöyle gruplayabiliriz :

En çok takip eden insanlar listesindekilerden :

XceptN Özgür Yüksel 11,268 kişiyi takip ediyor
linkibol Volkan Özçelik 11,166 kişiyi takip ediyor
fcboSa Oğuz Serdar 9,922 kişiyi takip ediyor
bvcoskun Burak Volkan Coşkun 4.007 kişiyi takip ediyor

Bunlardaki ilk 3 olan kişilerden Özgür Yüksel, linkibol (yani Volkan Özçelik) ve Oguz Serdar Türkçe içerik yazmıyor. Zaten etkileşimde oldukları hesaplar (yani reply verdikleri, retweet yaptıkları) da yabancı kullanıcılara ait.

Bu liste çok bir anlam ifade etmiyor. Zira çok kişi takip etmek zor değil ve anlamlı değil. Bu listeyi en çok takipçisi olan kişiler olarak incelersek :

Yine Özgür Yüksel var üst sırada, ardından linkibol, Oğuz Serdar geliyor. Devamında ise daha tanıdık isimler gelmeye başlıyor.

sertaberener Sertap Erener 5,810 takipçisi var
erdilyasaroglu Erdil Yaşaroğlu 4,141 takipçisi var
selcukerdem Selçuk Erdem 3,870 takipçisi var
niltakipte Nil Karaibrahimgil 3,850 takipçisi var
ddemirkan Demir Demirkan 1,692 takipçisi var
nefiss Nefise Karatay 465 takipçisi var

Bu gruba twitter’daki gerçek celebrity-ler olarak bakmak mümkün.

Tabiki burada, ABD’de bir haber kurumu olan CNN (cnnbrk) ile takipçi sayısı yarışına giren Ashton Kutcher (aplusk) gibi sosyal medyanın gücünü hissettirecek hadiseler yok. Amerika’da twitter’daki takipçi sayısı artık ünlüler arasında bir üstünlük göstergesi haline bile gelmeye başladı.

Okumaya devam et “Twitter insanlarına genel bakış ve Twitter Türkleri”