bildirgec.org - Sercan Virlan - beğendikleri

Bedava Müzik Dinleyelim!

Sercan Virlan — Thu, 31 Mar 2011 13:44:00 GMT

fftunes

Bir çok internet kullanıcısının ilgi gösterdiği sosyal ağlardan biri olan Friendfeed aracılığıyla kayıt olabileceğiniz bir müzik dinleme aparatı "fftunes".

Peki nedir bu FFtunes ve sistem nasıl çalışıyor?
FFtunes, online ve ücretsiz sabahtan akşama kadar arka planda sınırsız ve sinirsiz müzik dinleyebileceğiniz başarılı bir web sitesi.

Müzik arama, rastgele ve kullanıcı arama özellikleri sayesinde bir çok müziğe ulaşabiliyorsunuz.

Friendfeed aracılığı ile müzik paylaşım gruplarında bulanan müzikleri güncel olarak sizlere sunabiliyor.

Friendfeed hesabınız ile bir kullanıcı hesabı oluşturup girip yaptığınızda bu zamana kadar Friendfeed de paylaştığınız ve beğendiğiniz müzikleri listenizden ulaşabiliyorsunuz.

Diğer Friendfeed kullanıcılarının müzik listelerini dinleyebiliyorsunuz.

iPhone, iPad, iTouch, Android, Bada, iOs, SymbianOS, Firefox, Safari, Chrome desteği var. Artık Internet Explorer desteği de mevcut.

Şuan beta 0.31 versiyonu yayında olan sistem her geçen gün gelişmeye devam ediyor.

Kullanıcı listeleri ve radyosu, arama özelliği, listenizde bulunan şarkıları silebilme, dinlediğiniz müzikleri friendfeed, twitter ve facebook üzerinde paylaşabilme imkanı sunuyor.

Peki Friendfeed kullanmıyorsak ne olacak?
Friendfeed kullanıcısı değilseniz de yine müziksiz kalmayacaksınız. Siteye girdiğinizde karşınıza gelen arama kutusu ile 44,833* farklı mp3 e ulaşabilir ve dinleyebilirsiniz.

FFtunes Projesi; Sercan Virlan tarafından geliştirilmiştir. Türk yazılımcılarının elinden çıkmış stabil çalışan, sade, şık ve başarılı işlerden sadece biri.

Bu ilk yazımın sonunda sizlere bol müzikli günler dilerim :)

ve FFtunes ile ilgili olarak :
FFTunes:
http://www.fftunes.com/

FFTunes Friendfeed Grubu:
http://friendfeed.com/fftunes

FFTunes Facebook Sayfası:
http://www.facebook.com/fftunes

FFTunes Twitter:
http://twitter.com/FFTunes

*14 Mart 2011 tarihinde ki sayı.

Bu yazı Sercan Virlan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Flash ile facebook connect

Sercan Virlan — Fri, 19 Feb 2010 10:31:00 GMT

Twitter, friendfeed, google, facebook derken, web sitelerinde üye girişi ya da üyelik gibi bölümlerin pabucu neredeyse dama atıldı. Bu servislerden en kullanışlı olanı Facebook Connect şüphesiz. Bu yazıda Flash ve as3 kullanarak hangi şekillerde facebook connect kullanabiliriz, artıları eksileri nelerdir, nerelerde hangisini kullanmalıyız bundan bahsedeceğim.

1. Facebook JSBridge

Facebook JS Api üzerinden çalışan bir Javascript kütüphanesidir.

Yapmanız gereken tek şey, flashtan gerekli fonksiyonları çalıştırmak ve cevaplarını dinlemektir. Gelen Json'ın parse edilmesi, gereken isteklerin yapılması kısmını bu kütüphane sizin için gerçekleştirir.

Özellikle uygulamanızın ya da web sitenizin herhangi bir aşamasında veya tercihli olarak kullanıcıların facebook kullanıcı adları ile giriş yapması isteniyorsa bu iş için biçilmiş kaftandır. Hızlı çalışması, hali hazırda bulunan basit AS kütüphanesi ile temel işlevleri kolaylıkla yerine getirebilirsiniz.

Ancak bu kütüphanenin dezavantajları da yok değil.

Öncelikle Javascript üzerinde çalıştığı için IE6 da maalesef çalışmıyor. IE7 de is yüklü datalar varsa eğer sorunlar çıkartabiliyor. Örneğin bir arkadaşınızın taglendiği fotoğrafları alıcaksınız. Ortalama 50 ve üzeri fotoğraf datasını bu kütüphane ile çekmeye çalışırsanız IE7 de sorunlarla karşılaşmanız muhtemel.

Bunun dışında bu kütüphane genel amaçlı kullanım için hazırlanmış. Aradığınız bazı özellik ya da fonksiyonlar içinde olmayabilir. Örneğin arkadaşınızın fotoğraflarını bulmak, albümlerini yüklemek, etiketlendiği fotoğrafları bulmak gibi metodlar arıyorsanız maalesef bu işlemleri hem JS dosyasına hem de AS sınıfınıza eklemeniz gerekiyor.

Bu kütüphaneyi download etmek isteyenler bu linkten faydalanabilirler.

2. Facebook AS3 Library

Facebook PHP api üzerinden çalışan bir AS kütüphanesidir.

Linkten kaynak kodları ya da swc dosyasını bilgisayarınıza indirdikten sonra yapmanız gereken tek şey Flash projenize ilgili sınıfları import edip, gerekli fonksiyonları çalıştırmak.

Gelelim bize kattıkları ve bizden aldıklarına;

İlk olarak söylemek istediğim, bilinen bütün tarayıcılarla çalışabiliyor. Özellikle de ülkemizde kullanım oranı hala yüksek olan IE6 yı hedef alanlar için vazgeçilmez bir kütüphane.

Uygulamanızda ya da sitenizde facebook girişini zorunlu tutmak istiyorsanız bu durumda işinizi kolaylaştırabilir diye düşünüyorum. Çünkü kütüphane PHP üzerinden çalıştığı için, facebook girişi olmadan zaten sayfanız açılmayacaktır. Bu durum tabii ki bu sınıfın standart hali için geçerli. Js ile yaparım yine de çalıştırırım diyenler de elbette olacaktır.

Bütün istekler, gelen datayı parse etme, istekleri düzenleme gibi işlemlerin tamamını flash üzerinden yapıyorsunuz. Bu da sınıfı tanımayanlar için bir dezavantaj yaratabiliyor. Her grup istek başka bir değişken tipine karşılık geliyor, ve öğrenene kadar 'neden olmuyor ki?' sorunu bol bol kendinize soruyorsunuz.

Sonuç

Kendi tercihimi söylemek gerekirse, müşteri tarafından illaki IE6 olsun diye bir istek gelmedikçe JSBridge kullanmayı daha uygun buluyorum.8 sene önce piyasaya sürülen, biz flash geliştiricilerden çok HTML/CSS geliştiricilerin başını ağrıtan bir tarayıcıyı projelerime hedef olarak seçmiyorum.

Sonuç olarak her ikisi de aynı işi yapabilmek için tasarlanmış olan kütüphaneler. Öğrendikten sonra her ikisiyle de kolaylıkla çalışabilirsiniz.

Bu yazı Sercan Virlan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

öğrenilmesi gereken 15 css hilesi

Sercan Virlan — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı Sercan Virlan tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage