bildirgec.org - faseur - beğendikleri

XFN ile Yepyeni Bir SEO Tekniği

faseur — Tue, 02 Jun 2009 09:05:00 GMT

SEO konusunda önemli bir yeri olan ve olmaya da devam edecek bir olgudan bahsetmek istiyorum : XFN - açılımı "XHTML Friends Network".

Bu da nedir dediğinizi duyar gibiyim, hemen açıklıyorum. Bu sistem link veren ile link alanın arasındaki bağlantıyı ifade ediyor. Örneğin linkimiz şöyle olsun;

<-href="http://www.bildirgec.org/" title="internet,tasarım,popüler kültür" rel="co-worker">Bildirgec<->

Not: "a href şeklinde yazınca sorun çıkıyordu o yüzden çizgi koydum başına ve sonuna"

Ve bu link hafif.org'da yayınlanıyor olsun.
Şimdi bunun anlamı : hafif'in sahibi ile bildirgec'in sahibi iş arkadaşlarıymış. Arama motoru linkteki "co-worker" tanımlamasını görünce bu anlamı çıkarıyor.

Bu sistemi önemseyen Google gibi arama motorları bu sayede link satışlarının, sahte linklerin önüne geçmeye çalışacaklar. Yakın bir zamanda normal linkleme sistemi yerine heryere bu şekilde XFN sistemi gelirse hiç şaşırmayın.

Şimdi de XFN için kullanılabilecek taglarda sıra ;

Arkadaşlık [Sadece 1 tanesini kullanabilirsiniz]
contact - (İletişilen) : Kolaylıkla iletişim kurabileceğiniz herhangi birisi - Genellikle Simetrik
acquaintance - (tanıdık) : Tanışmışlığını olan ama pek görüşmediğiniz herhangi bir kişi - Genellikle Simetrik
friend - (arkadaş) : arkadaşınız olan herhangi birisi. oda arkadaşınız, sıra arkadaşınız, kankanız gibi - Genellikle Simetrik

Fiziki
met - (yüz yüze) : Daha önce yüz yüze konuşulmuş herhangi birisi - Simetrik

Mesleki [Sadece 1 tanesini kullanabilirsiniz]
co-worker - (iş arkadaşı) : Aynı işyerinde çalıştığınız herhangi birisi- Genellikle Simetrik ve Normalde Geçişli
colleague - (meslektaş) : Sizinle aynı mesleği yapan yada aynı üniversiteden mezun olduğunuz herhangi birisi - Genellikle Simetrik ve Normalde Geçişli

Ailevi [Sadece 1 tanesini kullanabilirsiniz]
child - (çocuk): Kendi öz çocuğunuz veya evlatlık edindiğiniz birisi olabilir - Tersi > parent
parent - (ebeveyn): Çocuğun tersidir.
sibling - (kardeş): Sizinle aynı anne ve babadan olan kişi, kardeşiniz - Simetrik ve Normalde geçişli.
spouse - (eş): Evli olduğunuz kişi, eşiniz - Simetrik ama Geçişli değil
kin - (akraba): Sizinle akraba olan birisi - Simetrik ve normalde geçişli

Romantik [Sadece 1 tanesini kullanabilirsiniz]
muse - (ilham verici) : Kendisinden ilham aldığınız herhangi birisi - Tersi yok
crush - (hoşlanılan) : Kendisine aşık olduğunuz herhangi birisi - Tersi yok
date - (çıkılan kişi) : Çıktığınız (randevulaştığınız diyebiliriz) herhangi birisi - Simetrik ama Geçisli değildir
sweetheart - (sevgili) : Sevgiliniz olan kişi - Simetrik ama Geçişli değildir

Kişisel
me - (ben) : Kendi siteleriniz için kullanabilirsiniz. Met ile birlikte başka hiçbir tagı kullanamazsınız. Kesinlikle Simetrik olmalıdır.

Simetrik Nedir? :A B'ye simetrik olan bir bağlantı vermiş ise B de A'ya vermelidir.
Örneğin; Ahmet Mehmet'in iş arkadaşı ise Merhmet de Ahmet'in iş arkadaşıdır.
Geçişli Nedir? :A B'ye ,B de C'ye geçişli link vermiş ise A ile C arasında da bağlantı var demektir.
Örneğin; Ahmet ile Mehmet aynı yerde çalışıyor, Mehmet Fatih ile aynı yerde çalışıyorsa Ahmet ile Fatih de aynı yerde çalışıyor demektir.

Örnek bir şema; [büyük halini görmek için üzerine tıklayınız.]

XFN Örnek Şema

Eğer XFN linkinizi kendiniz oluşturamadıysanız online XFN Creator ile oluşturabilirsiniz.

Kaynak

Bu yazı faseur 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

faseur — 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ı faseur 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

En İyi 65 mooTools Eklentisi

faseur — Mon, 26 Jan 2009 18:55:00 GMT

Hazır sözü 2008'in En İyi JavaScript Kaynakları'ndan açmışken jQuery'nin pratikliği karşısında dimdik duran ve kimilerine göre jQuery'nin pabucunu yakında dama attıracak olan bir başka JavaScript kütphanesi mooTools'dan bahsetmeden olmaz.

Bu yazımda, bugüne kadar yayımlanan en iyi 65 mooTools eklentisini sizlerle paylaşmak istiyorum. Listede olmayan ve sizin de beğenerek kullandığınız mooTools eklentileri varsa paylaşmaktan çekinmeyin.

SmoothScroll

SmoothScroll kullanıcıyı sayfanın belirli bir bölgesine yumuşakça yönlendiriyor. Normalde bu tip bağlantılar kullanıldığında tarayıcı herhangi bir efekt olmadan sayfayı doğrudan istenen bölgeye taşır. SmoothScroll işte bu eylemi yavaşlatarak kullanıcının gözüne daha hoş gelecek şekilde yeniden tanımlıyor.

MultipleSelect

MultipleSelect HTML çoklu seçim kutucuklarına özel stil eklemenizi sağlıyor. Üstelik birden fazla öğe seçmek için CTRL tuşuna basılı tutmanız da gerekmiyor.

Typewriter Effect

MooTools kullanılarak oluşturulmuş güzel görünümlü bir daktilo efekti.

MooColumns

MooColumns bir MooTools 1.2 sınıfı olup içeriği birden fazla sütuna kolayca ve çabucak bölümlendirebilmenizi sağlıyor.

Yatay kaydırmalı haber bandı

Bu haber bandı çok basit olup web projelerine entegre edilmesi çok kolay. Newsvine Live panel'den esinlenen bu eklentinin göze oldukça hoş gelen bir efekti mevcut.

MooScroll

MooScroll bir MooTools 1.2 sınıfı olup kaydırılabilir divler üzerindeki kaydırma çubuğunun görünümünü özelleştirebilmenizi sağlıyor.

Giriş Panelini Göster/Gizle

Sayfanın üst kısmından aşağı yumuşakça kayan güzel bir giriş paneli.

Kroppr

Kroppr güçlü bir betik olup ziyaretçilerine imaj kırpma desteği sunmak isteyen tüm site sahiplerinin işini kolaylaştıracak nitelikte. Diğer betiklerin aksine Kroppr resimleri döndürebilir, yakınlaştırabilir ve flash ya da java gibi herhangi harici bir eklenti kullanmadan imajları taşıyabilir. Kırpma işlemi kullanıcı seçiminden memnun olduktan sonra gerçekleştirildiğinden hem sunucuya bindirilen yük hem de kullanıcının işlem süresi azaltılmış oluyor. Kesinlikle önerilir.

Sayaç Eklentisi

Internet üzerinde ziyaretçinin bir işlemin sonucunu alabilmesi için bir süre beklemesini gerektiren ve bu esnada ekranda sayaç gösteren pek çok web sitesi bulunuyor, örneğin RapidShare. MooTools kullanılarak oluşturulan bu eklenti, sitenize benzer bir özelliği kolayca entegre edebilmenizi sağlıyor.

Twitter Emulation

Dünyanın her bir köşesindeki insanlar, Twitter'ı kullanımı çok kolay olduğu için seviyorlar, zira site üzerinde tek yapmanız gereken mesajınızı yazıp "Güncelle" düğmesine basmaktan ibaret. Pek çok kişinin bilmediği şey ise Twitter'ın işlevselliğini sitenize entegre edebilmenin aslında ne kadar kolay olduğu. PHP, MySQL ve MooTools JavaScript kullanılarak Twitter benzeri bir durum paylaşım sistemini sitenize kısa sürede entegre edebilirsiniz.

Fancy Navigation

Navigasyon menüleri genellikle sıkıcıdır, öyle değil mi? Çoğu zaman navigasyon menüsünün üzerine fare ile gelindiğinde bir imaj belirir. Peki bunun orijinalliği nerede? Bu makalenin yazarı MooTools kullanarak güzel görünümlü bir navigasyon menüsü oluşturmuş. Menünün üzerine fare imleci götürüldüğünde zincir efekti oluşuyor.

Select Box Factory 1.0

Alternatif bir çoklu seçim kutusu örneği. Arama kutusuna birkaç harf girerek, site üzerindeki öğelerden birini aramayı deneyin. Listenin hemen yanında benzer bir liste, açılır liste olarak belirecektir (bu geçişi sağlamak yaklaşık 5 saniye kadar sürüyor).

AutoCompleter

MooTools için hazırlanan bu otomatik tamamlama betiği metin önerme ve tamamlama özelliklerini bir arada sunuyor. Yerel, JSON ya da XML gibi farklı veri kaynaklarını desteklediği gibi farklı kullanıcı etkileşimleri, özel biçimlendirme, çoklu seçim, animasyon ve çok daha fazlası için desteği de bünyesinde barındırıyor.

mooSocialize

mooSocialize düğmesine tıkladıktan sonra, beğendiğiniz sosyal ağı seçebileceğiniz bir pencere beliriyor. Her bir sosyal ağ servis isminin yanında bulunan küçük resim, kullanıcının aradığı servisi kolayca bulabilmesini sağlıyor. Ama hepsi bu değil - bağlantılara tıkladığınızda bulunduğunuz sayfadan başka bir sayfaya yönlendirilmiyorsunuz, aksine seçilen sosyal ağ site üzerinde bir kutu içerisinde açılıyor. Kullanışlı ve kolay. Kutu üzerinde bulunan düğme aracılığı ile kutuyu gizlemek de mümkün.

SlideItMoo

SlideItMoo, imajlar için bir MooTools 1.2 kaydırıcısı. Pek çok tarayıcı üzerinde sorunsuz çalışan bu eklenti, JavaScript'in etkin olmadığı zamanlarda bile görünümü ve işlevselliğini bozmuyor. Tüm CSS stillemesi harici olarak yapılmış. Kaydırma işlemi hem ileri ve geri düğmeleri ile hem de fare üzerinde bulunan tekerlek aracılığı ile yapılabilir. Betik hem bir galerinin küçük resimlerini hem de reklam bannerlarını döndürmek için kullanılabilir. Betiği kullanım amacınızı değiştirmek de çok kolay, tek yapmanız gereken betiği sayfanıza eklerken kullanmak istediğiniz sınıfı belirlemek.

mooTools ile Yansıma (Reflection) Efekti

Bir ara popüler olan reflection.js'nin mooTools JavaScript çatısı için yeniden yazılmış sürmü. 2KB'dan küçük olan bu eklenti sayesinde sitenizdeki imajlar üzerinde herhangi bir oynama yapmadan onlara yansıma efekti ekleyebilmeniz mümkün hale geliyor.

MooTools Etkinlik Takvimi

Resmi olmayan MooTools Etkinlik Takvimi eklentisinin resmi sürümü. Halihazırda kullanılan web projelerine entegre edilebilen bu takvim, mooTools JavaScript çatısını kullanıyor. Şimdilik halen geliştirilme aşamasında olan bu betiğin şu anki hali bile pek çok kullanıcının işini görecektir.

AJAX Kullanıcı Adı Kontrol Mekanizması

Sitenize kayıt olmak üzere olan bir kullanıcının seçtiği kullanıcı adının sitede daha önce bir başkası tarafından alınmış olup olmadığını kontrol etmek için neden kullanıcıyı formu göndermek zorunda bırakasınız? AJAX ve MooTools 1.2 kullanılarak kullanıcı adı girildiği anda kontrol işleminin nasıl yapılabileceğini öğrenin.

Cam efektine sahip işlevsel navigasyon çubuğu

Ana menü üzerindeki bir sekmeye fare imlecinizi götürürken seçili olan sekmeye ait alt menü öğeleri görüntüleniyor. O sırada navigasyon çubuğunun sağ kısmında alt menüleri gizleyebileceğiniz 'Gizle' bağlantısı yer alıyor. Bağlantıya tıklandığında alt menü öğeleri güzel bir efektle gizleniyor ya da yeniden tıklandığında görüntüleniyor.

HTML Form İpuçları

Twitter benzeri bir karakter sayacı olan bu eklenti MooTools ile hazırlanmış. Giriş kutusuna karakter girdikçe, daha önceden tanımlayacağınız en yüksek karakter sayısı girilen karakter miktarına göre gittikçe azalıyor.

mooFlickr

Eğer Flickr istatistiklerinizi blogunuzda ya da web sayfanızda göstermek istiyorsanız bu küçük eklentiye ihtiyacınız olacaktır. Eklenti Flickr üzerinde gönderdiğiniz resimleri, sık kullandığınız etiketleri ve katıldığınız kullanıcı gruplarının bir listesini alabiliyor.

Göster / Gizle efektine sahip CSS dikey menü

Göster / Gizle efekti kullanılarak hazırlanmış ve göster/gizle efekti bulunan bir CSS dikey menüsü. Menünün ana öğeleri üzerine tıklandığında alt menü öğeleri bir efektle beliriyor.

mooSlide

mooSlide ile web siteniz üzerinde birkaç kaydırıcı elementini birden çağırabilirsiniz. Tek yapmanız gereken kaydırıcıyı bir sınıfa dahil etmek ve ardından betiğe o sınıfı tanıtmak.

MooFlow

Özünde bir resim galerisi olan bu eklenti, görünümü ile kendini benzerlerinden ayırıyor. iTunes'un CoverFlow özelliğinin web sitenizdeki resimlere entegre edebilmeniz için mükemmel bir eklenti.

AJAX MooTools Güvenli İletişim Formu
MooTools 1.1 çatısını kullanan bu iletişim formu form alanlarını kontrol ederek kullanıcıya eş zamanlı olarak girilen verinin doğru olup olmadığını bildiriyor. Örneğin İsim alanı sadece normal karakterleri, elektronik posta alanı girilen adresin bir elektronik posta adresinin karakterlerini içerip içermediğini ve mesaj alanı üzerinde de web sitesi adresinin girilmesini engelleyerek spam mesajların önüne geçilmesini sağlıyor.

Facebook Kaydırıcıları

Yumuşak bir kaydırma efekti.

Fotoğraf Galerisi

Büyüleyici bir interaktif fotoğraf galerisi (Demo burada)

Noob Slide

Güzel görünümlü bir başka resim galerisi.

Simple 3D Carousel

Gelişmiş bir 3B karusel.

Kaydırıcı

Yatay ve dikey çubuk ve kaydırıcısı.

Arkaplanı tıklayarak değiştirmek

Dinamik renk seçicisi - renk değiştiricisi. Renkler üzerine tıklandığında arkaplan değişiyor.

Pamoorama

Sayfa ilk yüklendiğinde resmin bir bölümünü gösteriyor. Ardından üzerine fare imleci götürülüp sürüklenerek imajın geri kalan kısımları görüntülenebiliyor. MooTools kullanarak panaromik efekt oluşturmak isteyenlere.

MooTools ile ipuçları

Güzel görünümlü bir ipucu tanıtımı.

JavaScript Resim Galerisi

Basit ama kullanışlı bir resim galerisi.

Basit bir Navigasyon Çubuğu

Basit ve kullanımı kolay bir navigasyon çubuğu.

Slidinglist

Ağaç dosya sistemi benzeri kayan bir navigasyon sistemi.

Multibox

Resim, Flash, Video, MP3 ve HTML destekleyen bir lightbox örneği.

Resim Menüsü

Üzerine fare imleci getirildiğinde imajın geri kalanını gösteren yatay bir menü.

Window Growl

Farklı bir ipucu eklentisi.

ReMooz

SqueezeBox'tan daha sade ve kolay olan bir eklenti. Resmin üzerine tıkladığınızda resmin orijinal boyutunu görebiliyorsunuz.

Accordions

Güzel görünümlü ve yumuşak geçiş efektleri olan bir navigasyon eklentisi.

Slideshow

En fazla özelliğe sahip olan en iyi resim galerisi / slayt gösterisi uygulamalarından birisi. Çok iyi bir eklenti.

mooSlide (lightbox'un yerine)

mooSlideBox, AJAX tabanlı küçük ve sade bir uzantı. Özellikle lightbox kullanmak istemeyenlerin ihtiyaçlarını karşılayacak türden.

Sayfa Yükleyicisi

Bir başka sayfadaki div'i geçerli sayfadaki div içerisine yükleyebilirsiniz.

textarea'yı genişlet

Sadece bir form oluşturmanız yeterli. Betik, textarea form alanının boyutunun kullanıcı tarafından değiştirilebilmesini mümkün kılıyor.

JavaScript Zaman Seçicisi

Çok kolay sürükle-bırak arayüzünü kullanan ilk zaman seçicisi.

JavaScript İle Hazırlanmış Seksi Yan Çubuk Kayan Menü Sistemi

Yumuşak ve evet, SEKSİ yan çubuk menüsü.

Slayt Gösterisi

Resimler arasında yumuşak geçiş efekti.

AJAX İle Hazırlanmış Giriş Formu

Kullanımı kolay bir giriş formu.

FancyUpload

Güzel görünümlü dosya gönderimleri için SWF AJAX ile birleşti.

Doğrulama

Sade bir form doğrulama mekanizması.

Dizilebilir Tablo

Tabloları dizin ve filtreleyin.

MooTabs - MooTools İçin Basit Sekme Sınıfı

MooTabs gerçekten çok küçük (3KB) ve adından da anlaşılabileceği gibi basit sekmeli navigasyon sistemi hazırlamak isteyenler için düşünülmüş. jQuery, MooTools gibi üçüncü parti JavaScript kütüphanelerini kullanmadan sekmeli içerik oluşturmak isteyenler için bir de bu var.

Sıralanabilir Liste Örneği

Sürükle-bırak desteğine sahip sıralanabilir liste. İşe yarar olabilir.

Takvim

Calendar (Takvim) bir JavaScript sınıfı olup form elementlerine erişilebilir ve kullanımı kolay tarih seçicileri ekler.

MooTools İle Yuvarlatılmış Köşeler

Sitenizde halihazırda bulunan divler üzerine yuvarlatılmış köşeler ekler.

Mediabox

Mediabox, "lightbox" tarzında bir pencere üzerinde flash, video ve html içeriğini görüntüleyebilmenizi sağlar.

Form Kontrolü
Formlar üzerinde farklı testler uygular ve hataları vurgular.

mooRainbow

mooTools çatısı altında inşa edilmiş bir renk seçicisi (color picker).

Lightbox

Geçerli sayfanın üzerinde beliren satıriçi resim penceresi.

SmoothGallery

Bu JavaScript galerisi ve slayt gösterisi sistemi sitenize sade ve yumuşak geçiş efektleri bulunan resim galerileri, slayt gösterileri, vitrinler gibi kullanışlı öğeler ekleyebilmenizi sağlar.

Popmenu

Arkaplan imajı yavaşça belirerek karaktersiz menülerinize canlılık katar.

MooWheel

Bu betiğin amacı JavaScript ve tuval nesnesi kullanılarak verinin görselleştirilebilmesine dair özgün ve kullanışlı bir örnek oluşturmak. Bu tip görselleştirmeler özellikle farklı nesneler arasındaki bağlantıları göstermek için kullanılabilir.

moo.rd

Bu bir dizi örnek uygulama moo.rd'nin nasıl çalıştığını ve sizin moo.rd ile nasıl çalışabileceğinizi gösteriyor. MooTools'un gücüne güç katmak için eşsiz bir uzantı.

Mootools Mocha UI

Mocha bir web uygulama arabirim kütüphanesi olup doğrudan MooToools JavaScript kütüphanesi üzerine inşa edilmiştir. Mocha grafiksel kullanıcı arabirim bileşenleri tuval etiket grafikleri ile oluşturulmuş çok gelişmiş bir kütüphane.

Kaynak: speckyboy

Bu yazı faseur 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

Apture ile Zengin İçerik Oluşturmak

faseur — Mon, 01 Dec 2008 10:14:00 GMT

Apture, sitenizde zengin içerik oluşturmak için kullanabileceğiniz ilginç ve oldukça kullanışlı bir araç. Sayfalar dolusu içeriğin tek bir bağlantıda verilmesi bu araçla mümkün hale getirilmiş. Seçtiğiniz herhangi bir kelimeyi dileğiniz içeriği taşımak üzere bir bağlantı haline getirebilirsiniz.

Ziyaretçilerinizin aynı bağlantı üzerinden ilgili wikipedia başlıklarına, video, fotoğraf gibi görsellere, google haritalarına, çeşitli makalelere ulaşması artık çok kolay.

pop-up ekranı görünümü

Yapmanız gereken ilk iş, apture üyeliğinin ardından bağlantı eklemenizi sağlamak üzere sitenizin koduna çok kısa bir html kod eklemek. Bu kod sayesinde siteniz apture' ı kullanabilir duruma gelecektir. Üyeliğinizin ardından bu basit işlem için etkin bir şekilde yönlendirildiğinizden uygulanabilirlik konusunda endişe duymanıza gerek yok.

Apture ile hazırlanmış bir linke tıkladığımızda karşımıza içerisinde az önce bahsettiğimiz içeriklerden herhangi birini taşıyan bir pop-up ekranı çıkacaktır. Bu ekran üzerindeki dğer tüm bağlantılar da aktif durumdadır. Örneğin açık bir wikipedia makalesi üzerinden birçok farklı bağlantıyı takip ederek hemen oracıkta wikipedia' nın geniş dünyasında kaybolabiliriz. Yine aynı ekran, alt kısımda, diğer görsellere de bağlantı içerir. Bu görsellerden herhangi birini daha açtığımızda karşılmıza ilgili içeriği taşıyan ikinci bir pop-up ekranı çıkacaktır.

görsel eklemek

Örneğin, güncenizde yer alan bir girişte hayranı olduğunuz bir şarkıcının son konserinde geçirdiğiniz mutlu anları yansıtmak istiyorsunuz. Seçtiğiniz kelime öbeğinin üzerine tıklandığında bu şarkıcının hayranlarının oluşturduğu bir siteyi gözlemleyebilir, hayatına dair bilgiye farklı kaynaklardan ulaşabilir, şarkılarından birkaçına erişim sağlayabilir, konser videolarına yer verebilir, bir sonraki konser alanını googleharitasıyla gösterebilir, çeşitli fotoğraflar ekleyebilirsiniz. Ayrıca internete aktarığınız video, fotoğraf gibi görseller ile hazırlamış olduğunuz bir powerpoint sunumu gibi kendi kaynakalrınızı bu bağlantılara dahil edebilirsiniz.

Bunun dışında Apture' ın sunduklarına bir bağlantının tıklanması durumunda değil de her daim ulaşılmasını istiyorsanız, örneğin haritanızı iki paragraf arasında seçili bir bölgeye istediğiniz boyutlarda rahatlıkla yerleştirebilirsiniz. Apture' a eklediğiniz sunumun veya videonun özellikle gözlenmesini istediğiniz kısımdan başlamasını da sağlayabiliriniz.

Özetle, Apture, tasarımcılar dahil içerik oluşturan her türlü internet kullanıcısının denemesi gereken bir araç. Keşif buradan başlayın.

Bu yazı faseur 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

Web Tasarımcıları için 77 kaynak

faseur — Thu, 13 Sep 2007 13:59:00 GMT

ikonlar IconFinder.net – Ikon arama motoru

Kaliteli bedava ikonlar

css kullanılarak hazırlanmış temalar
Layout-O-Matic kendi css-tabanlı temanızı oluşturmaya yardımcı oluyor.
Açık kaynak tasarımlar

Fontlar

80 tane font Smashing Magazine'den
urbanfonts güzel fontlar bulunuyor.
1001 tane bedava font

web 2.0 araçları
web 2.0 iconları
web 2.0 logo maker
web 2.0 rozetler ve daha fazla rozet.

Listenin geri kalan kısmı burada.
Yararlı olması dileğiyle.

ilgili yazılar

iOS 4.3'ün getirdikleri... (16)

Bu yazı faseur 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