bildirgec.org - maveraa - beğendikleri

spam mail ve maili doğru kullanma

maveraa — Tue, 21 Apr 2009 20:19:00 GMT

Spam Nedir ?
spam mail yani Türkçesi ile Yığın İleti genellikle isteğiniz dışında size mail veya anlık mesajlaşma uygulamalarından gelen mesajlardır.
Kimi reklam içerikli, kimi aldatmaca bir içerikle kişisel bilgilerinizi almak (banka hesabı, kişisel özellikleriniz, kredi kartınız) ya da sizleri kategorilendirerek mailinizi portföy olarak mail listeleri halinde şirketlere satmak içindir.

Neden Ben?
Kara kaşınız kara gözünüz için değil, eğer mailiniz kategorilendirilirse örneğin bir şekilde 18 yaşında olduğunuz biliniyorsa spam göndericinin ya da aracının 18 yaşındakiler diye bir mail listesi olduğunu ve sizi bu listeye eklediğini düşünelim. Bir şirket 18 yaşıdakilere yönelik bir ürün yaptığında bu mail listesini satın alacak ve sizi bunaltmaya başlayacaktır. örneğin orta yaşlı insanlara penis büyütme reklamları, orta yaş üstündekilere viagra reklamları gelmesi gibi.
Her bir mail, potansiyel müşteri.

Beni nasıl buldular?
Çeşitli yollar mevcut.

Mailinizi herhangi bir sayfaya deneme@deneme.com formatında yazarsanız, örümcek uygulamalar websitelerini tararken bu mailleri biriktirir.
Bir arkadaşınızın mail hesabı kırılmış ya da messenger kullandığı bilgisayara ajan bir yazılım sızmış olabilir, artık siz ve arkadaşınızın kontak listesindekilerin çekeceği cefanın haddi hesabı yok. "abi tıkla buna süper, 100 kontör var" şeklinde reklam içeren iletiler yollanır.
İşte favori sebebim: Bazı duyguları sömürme (ben 16 yaşında bir kızım, bir yerime bir şey oldu para lazım), gerçek sanılan şeyler (hoax), bayram-yılbaşı tebrikleri, beğendiğiniz bir şeyi paylaşma.

Nasıl kurtulurum?
Tam olarak "böyle" kurtulursunuz diye bir şey yok ama mailinizi doğru kullanarak yakalanma riskinizi ve arkadaşlarınızı yakalatma riskini düşürebilirsiniz.

Mailinizi direk olarak sayfalara yazmayın, örneğin koray<at>bildirgec.org şeklinde yazın mailinizi. Web programcıları da sitelerindeki mail adresleri için koruma uygulamaları yazabilirler. Çeşitli javascriptler de mevcut.
Sırf bir link için bir siteye üye oluyorsanız mailinizi vermeyin, bunun gibi geçici mail adresi üreten sitelere başvurun. nasılsa bir daha o siteye girmeniz düşük bir ihtimal. Ek olarak yüzlerce forum var hangisi güvenilir nasıl bilebilirsiniz ki ? Hele ki genç yaştaki insanların sürekli forum açıp, yapabildiklerini kötüye kullanmak gibi bir eğilimleri varsa yandınız.
ve en önemli nokta, arkadaşlarınıza gönderdiğiniz mailler; istisnasız her mail uygulamasında To (kime) bölümün yanı sıra cc (carbon copy) ve bcc (blend carbon copy) bölümleri bulunur. Aslında CC'nin gerekliliğini görmüyorum, TO bölümü bildiğiniz üzere mail gönderirken alacak kişinin mailini yazacağınız yer, CC ile daha fazla kişiye gönderecekseniz virgüller ile ayırarak diğer mailleri buraya yazıyorsunuz, TO kısmı da aynı işlevi görüyor tabii. bcc nin özelliği ise buraya virgüllerle maili ayırarak yazdığınızda herkes maili sadece kendisine gönderilmiş gibi görür ve başka kimlere gönderildiğinden haberdar olmaz.

Lütfen;
gönderdiğiniz şeyin önemli olduğunu mümkün olduğunca daha fazla kişinin bilmesi gerektiğini düşünüyor olabilirsiniz, bcc 'yi kullanın hem insanlar kimlerle bağlantınız olduğunu bilmesin, hem de spam alma riskinizi düşürün.

Bazı Notlar;

Messenger ücretli olmuyor
Bırakın coca-colanın yakasını, böcek varsa başka yerden araştırın, artık yeni spam modası facebook.
Hiçbir maili göndermekle kimseye zarar ettirmez ya da bir davanın açılmasını/açılmamasını sağlayamazsınız. Etkin bir takip yöntemi bile yok ki.
Aldığınız mailler size yönlendirilmiş olarak geldiyse içinde büyük bir mail adresleri içeren kısım olmalı, yönlendirirken bu kısmı silin, vatandaşlık görevinizi yapın.
Spam mail geldiğinde silmeyin spam olarak işaretleyin böylece mail servisiniz bu tarz maillerin yapısını zamanla tanımlayacak ve aynı şekilde spam mail almayacaksınız.

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

html formları için 25 harika jquery eklentisi

maveraa — Thu, 23 Apr 2009 10:15:00 GMT

web sayfalarında bilgi girişleri için kullanılan html formlarının gerek görsellikleri gerekse işlevsellikleri üzerinde bazen uzun süreli çalışmalar yapılması gerekir. aşağıdaki jquery eklentileri sayesinde hem zamandan önemli ölçüde kazanç sağlayabilirsiniz, hem de kullanıcıların beğenisini kazanacak tasarımlar yapabilirsiniz.

Form Skinning(form kaplamaları):
jQuery jNice

Styling input file

jqTransform

Emblematiq Niceforms

Form Validation(form doğrulamları):

Form validator

Bassistance jQuery Validation

Live validation

Lightform

Masking(maskeleme):
Masked Input Plugin

Meio Mask

File Uploader(dosya yükleyicileri):

Multiple File Upload

jqUploader

Uploadify

Checkbox & Radio Button:

Checkbox & Radio Input Replacement

Fancy Form

jQuery Checkbox

Spin Button & Slider:

Spin Button

jQuery UI - Slider

Auto Complete(kendiliğinden tamamlama):

Bassistance jQuery Auto Complete

AjaxDaddy jQuery Auto Complete

Calendar & Time picker:

jQuery UI

Time Picker

Drop Down Menu (Select Element):

jQuery Image Drop Down

MC Dropdown

Drop down check list

Color Picker:

jQuery Color Picker

Farbtastic Color Picker

Textarea:

kaynak: queness

takip edin: bildirgeç friendfeed twitter rss

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

27 Photoshop Web Site Tasarımı Dersi

maveraa — Sat, 19 Jul 2008 14:16:00 GMT

best photoshop design tutorials

Yeni başlayan web tasarımcılarının, web tasarımı hakkında temel bilgi sahibi olmalarına yardım edebilecek, 27 photoshop web site tasarımı dersi aşağıda listelenmiştir.

Fotoğraf portföyünüzü sunmanıza yardım edecek bir tasarım

Photoshop'ta bir Grungy Website tasarlamak

Photoshop'la kişisel web sitesi tasarımı

Photoshop'la arkadaşlık sitesi tasarlamak

Photoshop'la karanlık bir tasarım

3D stüdyo

Photoshop'la Emlak Sitesi tasarımı

Derslerin tamamına ulaşmak için buraya tıklayabilirsiniz.

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

photoshop site tasarım dersleri

maveraa — Wed, 01 Apr 2009 09:08:00 GMT

daha önce photoshop site şablonları yazısında site yapımcıları için hazırlanmış birkaç ücretsiz şablondan bahsetmiştik. şuradaki kaynakta ise kendi site tasarımınızı oluşturmada yararlanabileceğiniz derslerden örnekler sunulmuş.

photoshop üzerine daha fazla kaynak arıyorsanız photoshop dersleri ve kaynakları yazısı işinizi görebilir.

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

CSS Sprite kullanmak artık daha kolay!

maveraa — Thu, 19 Mar 2009 11:48:00 GMT

Daha önce CSS Sprite tekniğinden "css sprite'ların kullanış alanları" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.

1. adım: Kullanılacak Resmin Yaratılması
Matt Varone'un yapmış olduğu CSS Navigation Bar Code Generator uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.

örnek sprite

2. Adım: Ayarlamalar
Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.

3. Adım: Ana Katmanı Seçmek
Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.

Ana Katman

4. Adım: Ana Katmanı Bölümlere Ayırmak
Bu adımda Seçtiğiniz Ana katman size gösterilir. Butonları tek tek belirlemeniz isteniyor. İlk butonu belirledikten sonra Confirm tuşuna basarsanız bir sonraki tuşu seçmeniz sağlanıyor. Tüm tuşları bu şekilde seçtiğinizde uygulama otomatik olarak son adıma geçiyor.

Tuşların Seçimi

5. Adım: Kontrol ve Download
Buraya kadar tüm işlemleri doğru gerçekleştirebildiyseniz sistem size demo sayfasını gösterecek ve onaylamanız halinde zip'li dosya içinde kodunuzu indirmeye sunacak.

Notlar
Bu uygulama CSS Sprite'lar sayesinde Menüler oluşturmaya yarar. Bu yüzden liste koduyla uygulama yazılmıştır. CSS bilginiz yeterli seviyedeyse ufak bir düzenleme sonucunda değişik amaçlarla da kullanmanız mümkündür.

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

17 Kullanışlı Wordpress Eklentisi

maveraa — Fri, 27 Feb 2009 11:09:00 GMT

internet üzerinde binlerce wordpress eklentisi bulunmaktadır. bunlardan bazıları kullanışlı iken, diğerleri sadece olmuş olmak için oradalar. ancak blog okurlarınıza büyüleyici ve mükemmel bir deneyim yaşatmak ve wordpress blogunuzu daha güçlü bir hale getirmek için eklenti kullanıp kullanmamanız tamamen sizin elinizde.

bu yazıda, herhangi bir blog için kullanışlı ve muhtemelen olmazsa olmaz 17 wordpress eklentisini listelemeye çalıştım.

eğer sizin de kullandığınız ve bu yazıda yer almayan wordpress eklentileri varsa, yorumlarınızda ilgili eklentileri paylaşmayı unutmayın.

wordpress popüler yazılar

wp-gravatarwordpress popüler yazıları bir yan bar widget'i olup blogunuzdaki en popüler yazıları listeleyebilmenizi sağlıyor. eklentiye dahil edilmiş olan pek çok özelleştirme seçeneği sayesinde eklentinin görünümünü dilediğiniz gibi özelleştirebilirsiniz.

ultimate google analytics

wordpress temanızda herhangi bir değişiklik yapmadan google analytics javascript kodunu blogunuzdaki her sayfaya ekleyebilmenizi sağlayan bir eklenti. eklenti ayrıca sitenizdeki dışa yönelik bağlantıları, sitenizden indirilen içerikleri ve mailto: bağlantılarını da izleyebilir.

wp-postratings

wordpress blogunuzdaki yazılara ve sayfalara ajax oylama sistemi ekleyen bir eklenti.

wp-recaptcha

wp-recaptcha, carnegie mellon üniversitesi tarafınca geliştirilen ve captchaları zeki bir şekilde kullanan bir yöntem. standart captcha eklentilerinin aksine bu eklenti, captcha'ya bir başka yaklaşım sunuyor.

bir diğer benzer yazılar eklentisi daha

yet another related posts plugin, geçerli olan sayfanın içeriğine benzer bir içeriğe sahip yazıları ya da sayfaları listeleyerek, okurlarınızın sitenizde daha fazla zaman geçirmesine yardımcı oluyor.

ajaxlanmış wordpress

ajaxlanmış wordprewss (awp), ajax'ın ve wordpress'in gücünü bir araya getirerek kullanıcı deneyimini, yönetim seçeneklerini ve wordpress tabanlı herhangi bir blogun tasarım potansiyelini iyileştirmeyi amaçlıyor.

commentluv

yorum yazanların kendilerine ait en son bloguna bir bağlantı vererek onlara sevginizi gösterin. bu eklenti, sitenize üye olup yorum yazan kişilerin yorum yazdıkları sırada onların blogunu ziyaret edip en son yazdıkları blogun başlığını ve bağlantısını alıyor ve yorumun altına yerleştiriyor.

cforms

cforms yüksek derecede özelleştirilebilir, geliştirilebilir ve güçlü bir form oluşturma eklentisi olup pek çok alanda kullanım olanağı sunuyıor. eklenti aracılığı ile oluşturacağınız formlarda eklenti desteği yer alırken, birden fazla formu yönetebilir ve yine birden fazla formun aynı sayfada yer almasını sağlayabilirsiniz.

all in one seo pack

wordpress blogunuz için otomatik arama motoru optimizasyonu.

flexible upload

flexible upload wordpress eklentisi sayesinde wordpress'in temel seviyedeki gönderme (upload) seçeneklerini özelleştirebilirsiniz. eklenti, gönderilen resimleri sizin belirlediğiniz seviyede yeniden boyutlandırabilir ve dilerseniz gönderilen resimlere dilediğiniz yazıyı otomatik olarak ekleyebilir (watermark).

add to any subscribe button

aralarında google reader, my yahoo!, netvibes, windows live ve diğer tüm popüler besleme okuyucularını kullanarak okurlarınızın blogunuza kolay yoldan abone olabilmelerini sağlıyor. eklentinin akıllı menüsü, ziyaretçinin tarayıcı geçmişini otomatik olarak kontrol ediyor ve en sık ziyaret ettikleri siteleri otomatik olarak en üst sırada görüntülüyor.

wp super cache

wp super cache wordpress için bir statik sayfa oluşturma eklentisidir. blogunuzdaki tüm sayfaların otomatik olarak html sürümlerini oluşturarak sunucunuzun her bir ziyaretçi için php betiklerini çalıştırmasının önüne geçiyor ve bu sayede blogunuzun hızında önemli bir artış gözleniyor. özellikle çok sayıda ziyaretçisi olup sunucusunun hızından memnun olmayan wordpress blogcuları için kullanışlı.

wp gravatar

bu eklenti gravatar, mybloglog, openavatar, wavatar, identicon, monsterid ya da diğer favico.ico simgelerini yorumlarınızda kullanmanızı sağlıyor. eklentinin yapabildikleri bu kadarla da sınırlı değil. daha fazlası için eklentinin sayfasını ziyaret edin.

google xml sitemaps

bu eklenti google sitemaps uyumlu xml-sitemap oluşturabilmenizi sağlıyor. tüm wordpress tarafından oluşturulmuş sayfaların yanısıra özel sayfaları da destekliyor. siz herhangi bir yazıyı düzenlediğiniz ya da blogunuza yeni bir yazı yazdığınız zaman, ilgili eklenti sitemap dosyanızı güncelliyor ve sitemap protokolünü destekleyen ask.com, google, msn search ve yahoo! gibi sitemap protokolünü destekleyen tüm arama motorlarını sitenizdeki güncellemeler hakkında uyarıyor.

get recent comments

bu eklenti sitenizden en son yorumları ya da geri izlemeleri yan çubuk (sidebar) üzerinde görüntülüyor. i̇lgili bağlantıların nasıl görüneceğine dair ileri seviyede özelleştirme seçenekleri sunulmuş. bu seçeneklerin arasında yorum sayısı ve yorumların genişliği gibi seçenekler yer alıyor. ayrıca yorumları dilerseniz tarihe ya da yazı sırasına göre dizebilirsiniz.

twitme

bu eklenti sayesinde blog yazdığınız zaman yazdığınız blog otomatik olarak twitter hesabınıza durum mesajı olarak ekleniyor.

easy adsenser

easy adsenser eklentisi google adsense reklam kodunu wordpress blogunuza kolayca entegre edebilmenizi sağlıyor. eklentinin sunduğu widget aracılığı ile reklamları yan çubuk üzerine ekleyebilir ya da bir diğer widget ile google arama kutusu'nu blogunuz üzerinde görüntüleyebilirsiniz. easyadsenser, adsense ile alakalı her şeyi yönetmenize ve blogunuza entegre edebilmenize yardımcı olan belki de ilk wordpress eklentisi.

kaynak:: smashing apps

wordpress i̇le i̇lgili yazdığım diğer yazılar

Bu yazı maveraa 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 iyi 10 (ücretsiz) wordpress tema sitesi

maveraa — Thu, 12 Feb 2009 17:12:00 GMT

themespack.com un seçtiği en iyi 10 wordpress tema sitesini sizlerle paylaşmak istiyorum. Aslında harika tasarımlı ücretsiz wordpress temalarından derlediğim bir bildiri yazacaktım. Araştırırken aralarında seçim yapmakta zorlandım ve en iyi ücretsiz wordpress tema sitelerini yazmaya karar verdim. umarım tüm wordpress kullanan arkadaşların işine yarar. Seçimi themespack yaptığı için ilk sıraya kendisini yerleştirmiş.
ThemesPack

ThemesPack

wpThemesFree

wptheme

wpTheme

Free Wordpress Themes

Fresheezy

wpsnap

weblog tools connection

themes-wp

Kate’s Theme Viewer

kate's theme viewer

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

960 css çatısına yakından bakış

maveraa — Sun, 15 Feb 2009 13:13:00 GMT

CSS çatılarının (framework) sayısı her geçen gün biraz daha artıyor. CSS çatıları özellikle CSS ile kod yazmak konusunda henüz kendisini yeteri kadar geliştirmemiş olanlar için kimi zaman oldukça kullanışlı bir hal alabiliyor. Ancak bazı CSS profesyonellerine ve diğer dillerin programcılarına göre CSS, üzerine bir çatı geliştirilmesi gerekecek kadar zor bir dil değil.

Eğer herhangi bir CSS çatısı üzerine bir rehber okuduysanız, ilgili rehberlere bırakılan pek çok yorum yukarıdakilerle aşağı yukarı aynıdır. Benim görüşüm bu tip yorumların büyük çoğunluğunun bir miktar tatminsizliğe bağlı olduğu yönünde. 960 üzerinde biraz zaman geçirdikten sonra, web uygulamalarınızı geliştirirken size ne kadar zaman kazandırabileceğine inanamayacaksınız. Hiç olmazsa ilgili çatıyı sadece bir 10 dakikalığına inceleyin. Her zaman klavyenizin delete düğmesine basabilirsiniz ancak bunu yapacağınızdan şüpheliyim.

Artıları

Geliştirme zamanını önemli ölçüde kısaltıyor.
Temiz ızgara yapısına sahip.
Farklı tarayıcılar üzerinde problemlerle karşılaşma ihtimaliniz çok düşük. Bulduklarınızı da kolayca düzeltebilirsiniz.
Pek çok kişinin söylediğinin aksine "abartılmış" değil. Burada 3-4 KB'den bahsediyoruz arkadaşlar! Bu tip stillemelerinin pek çoğunu zaten neredeyse tüm web uygulamalarında kullanıyorsunuz.
Karmaşık anahatları kolayca oluşturun.

Eksileri

Adının "960" olmasının bir nedeni var. Web siteniz için başka bir genişliği kullanmak istiyorsanız, o zaman diğer çatılara göz atmanızı öneririm.
Diğer tüm "çatılarda" olduğu gibi bazı kısıtlamalarınız yok değil.
Onu siz yapmadınız. Kodun %100'ünün size ait olmasının verdiği his bir başkadır.

Kullanım
12 sütuna sahip bir altyapı üzerinde aşağıda gördüğünüz gibi oldukça sade bir anahat hazırlmak istediğinizi hayal edin. İlk olarak "container_12" adındaki bir sınıfa sahip bir kapsayıcı bir div oluşturmamız gerekiyor. 12'ye dikkat edin.

<div id="container" class="container_12">  
...içerik buraya  
</div>

Burada bir ID tanımlamanızın kesinlikle gereği yok ancak ben özellikle divin ne amaçla kullanıldığını daha sonra kolayca anlayabilmek adına divlerime genellikle bir ID atarım. 960'ın kötü yanlarından birisi de sınıfların elementin ne amaçla kullanıldığını belirtecek herhangi bir tanım içermiyor oluşu. Bu sebeple DIV'e bir ID ekleyerek bu kavram sorununu kolayca gidermiş oluyoruz.

Izgaralar

Şimdi de basit bir başlık ve iki sütunlu bir altyapı oluşturmak istiyoruz. Başlamadan önce tanıtıma bakarak ne kadar genişlikte bir ızgara kullanmak istediğinize karar verebilirsiniz.

Başlık genişliği olarak 940px seçeceğim (+20 px de marjlar için = 960), yan çubuk genişliği için 220px ve ana içerik kısmı için de 700 px seçeceğim.

Her bir div elementini bir sınıfa dahil etmelisiniz. Çatının kurallarına göre sınıf isimleri "grid_" öneki ile başlamak ve devamında istenen sütun sayısını girmeniz gerekli. Bizim durumumuzda "grid_12", "grid_3" ve "grid_9" sınıflarını kullanacağız.

<div id="container" class="container_12">  
  <div id="header" class="grid_12">  
    içerik buraya  
  </div>  

  <div id="sidebar" class="grid_3">  
    içerik buraya
  </div>  

  <div id="mainContent" class="grid_9">  
    içerik buraya  
  </div>  
</div

Çatının sunduğu stillerin üzerine her bir div için arkaplan rengi ve minimum genişlik ekledim. Bunu koda eklemedim zira sadece sütunları tanıtımda daha belirgin yapmak için ilgili stilleri kullandım.

Marjlar, yüzen divler ya da IE hileleri ile boğuşmadan bu anahattı inanılmaz derecede çabuk bir şekilde hazırladık. 960'ın gerçek gücü özellikle karmaşık gazete-benzeri arabirimler geliştirmek istediğinizde ortaya çıkıyor. Bu konuda daha fazla bilgi almak istiyorsanız buradaki screencast'ı izleyebilirsiniz.

960 GS İle İlgili İlginizi Çekebilecek Diğer Kaynaklar

960 CSS Çatısı İle Prototip Oluşturma
Grid 960 bir CSS çatısı olup geliştiricilerin hızlıca prototip tasarımlar oluşturabilmelerini sağlıyor. Şablonlar oluşturabilmek için inanılmaz araçlar bulunuyor? Neden mi? Çünkü hepsi sizin daha hızlı sonuçlar alabilmeniz için işin zor kısmını sırtınızdan alabilmenizi sağlıyor.

Makaleyi Ziyaret Edin

WP_Query ve 960 CSS Çatısı İle Gazete Teması Oluşturun
WP_Query oldukça güçlü bir araçtır. Bugün ilgili aracı kullanarak nasıl 3 sütunlu gazete şablonu oluşturabileceğinizi göstereceğim. Ana sütunda tüm blog girdileriniz yer alırken, yanlara ilerledikçe belirli kategorilere ait blogları listeleyeceğiz. Temel anahattımız ve temamızı sıfırlamak için 960 CSS çatısını kullanacağız ki bu sayede, işin büyük bir kısmı tamamlanmış olacak.

Makaleyi Ziyaret Edin

Web Tasarımı İçin Hangi CSS Çatısını Kullanmalısınız?
WordPress ve diğer platformlar için o güzel "magazin" temalarının nasıl oluşturulduğunu hiç merak ettiniz mi? Hepsi olmasa da pek çoğu, CSS Izgara Çatıları kullanılarak geliştirilmiştir. Bu yüzden siz de halihazırda sunulan CSS çatılarını kullanarak kendi magazin temanızı oluşturabilirsiniz. Karmaşık web sayfası anahatlarını çatı kullanmadan oluşturmak mümkün olsa da bunun günümüzde mazoşist bir tutumun bir ürünü olduğunu söylemek yanlış olmaz. Bu makalede günümüzde sunulan çatılara genel bir bakış atacak ve hangisini kullanmanız gerektiğine birlikte karar vereceğiz.

Makaleyi Ziyaret Edin

Kaynak: NETTUTS

CSS Çatıları Hakkında Yazdığım Diğer Yazılar

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

Size Sıfırdan AJAX Öğretecek 20 Mükemmel Kaynak

maveraa — Mon, 16 Feb 2009 07:45:00 GMT

Ajax (Asenkronize JavaScript ve XML) yüksek seviyede interaktif ve karşılık veren tarayıcı tabanlı uygulamalar geliştirebilmenize olanak sağlayan bir teknolojidir. XMLHttpRequest nesnesine yüklenerek suncu ile sorunsuz bir bağlantı sağlanabilir ve bu sayede yumuşak ve dinamik bir kullanıcı deneyimine kavuşulur.

Eğer daha önce AJAX öğrenmek istediyseniz, AJAX'ı ve onu çevreleyen teknolojileri "yalayıp yutmanızı" sağayacak pek çok kaynak bulunmaktadır. Yazımızın devamında AJAX konusunu kapsayan en iyi 20 web sitesini incelemeye çalıştık.

1. Ajax resource center (developerWorks)

IBM'in geliştiricilere ve BT profesyonellerine yönelik olarak hazırladığı bir kaynak merkezi olan developerWorks üzerinde bu konuya adanmış bir AJAX kaynak merkezi bulunmaktadır. İlgili sayfada AJAX'a yönelik pek çok rehber yer alıyor. developerWorks'ün rehberleri derinlemesine ve oldukça uzundur ve bunlar üzerinden jQuery ve AJAX ile RIA uygulamaları oluşturmak, AJAX güvenlik araçlarını öğrenmek ve AJAX tabanlı sohbet sistemi geliştirmek gibi farklı alanlarda pek çok çeşitli bilgiye ulaşabilirsiniz.

2. Mozilla Developer Center (AJAX)

Mozilla Developer Center üzerinde bulunan AJAX bölümü özellikle giriş seviyesindeki geliştiriciler içn mükemmel bir başlangıç noktası olarak gösterilebilir. MDN üzerindeki başlangıç rehberi özellikle AJAX'ın temel konseptlerini öğrenmek için mükemmel bir başlangıç noktasıdır. İlginizi çekebilecek bir diğer yazı ise XMLHttpRequest üzerinde yer alan yazıdır. Bu yöntem tipik AJAX örneklerinde sunucu tabanlı betiklerle iletişime dair kullanılması gereken ana elementtir.

3. AJAX Today

Üyelerinin AJAX hakkında web site bağlantılarını paylaşarak oluşturdukları bir içeriğe sahip olan AJAX Today web sitesi gönderilen bağlantıları AJAX Dersleri ve AJAX Podcastları gibi kullanışlı kategoriler altına yerleştiriyor. Dilediğiniz kategorilerin RSS beslemelerine abone olarak üyeler tarafından yeni bir bağlantı gönderildiğinde siteyi ziytaret etmenize gerek kalmadan doğrudan RSS beslemesi üzerinden takip edebilirsiniz.

4. ajax.solutoire.com

ajax.solutoire.com, Yazılım Mühendisi Bas Wenneker tarafından oluşturulan ve çevrimiçi AJAX kaynaklarını tek bir sayfa üzerinde listeleyen bir dizin sitesidir. ajax.solutoire.com üzerindeki kategoriler, AJAX Haberleri ve AJAX/JavaScript Güvenliği gibi çeşitli kategorilere ayrılmıştır. Bas Wenneker ayrıca JavaScript ve mooTools gibi web geliştirme konularında bildirimler yayımladığı Solutoire.com blogunu da yönetmektedir.

5. SitePoint: JavaScript & AJAX Tutorials

Web profesyonellerine kullanışlı ve işe yarar bilgileri sunan bir web yayımı olan SitePoint üzerinde bulunan JavaScript & AJAX Rehberleri bölümü özellikle halihazırda çalışan örnekler üzerinden AJAX öğrenmek isteyen geliştiriciler için mükemmel bir kaynaktır. "Elektronik Posta Listenizi Geliştirmek İçin AJAX ve PHP Kullanın" ve "AJAX İle Kontrolü Ele Geçirn" gibi rehberleri takip edebilir ve AJAX bilginizi ilerletebilirsiniz.

6. Encosia

Encosia, özellikle ASP.Net ve AJAX konuları başta olmak üzere web geliştirme konusunda bildiriler yayımlayan Dace Ward'a ait bir blog. Site bünyesinde veri güncellemelerini gerçek zamanlı olarak görüntülemek ve interaktif veri araması için jQuery nasıl kullanılır gibi konuları irdeleyen pek çok rehberi içeren Encosia özellikle ASP.Net üzerinde çalışan web geliştiricileri için mükemmel bir kaynaktır zira site üzerinde "Sık yapılan bu 3 ASP.Net AJAX hatasını yapıyor musunuz?" gibi makaleler de okuyabilirsiniz.

7. AJAX Technology Center

Adobe Developer Connection'un bir parçası olan AJAX Technology Center web tasarımcılarına ve geliştiricilerine yönelik bir kaynak. AJAX Technology Center AJAX geliştiricileri için Adobe Air ve Dreamweaver projelerine AJAX bileşenleri eklemek gibi konularda makaleler ve rehberler içermektedir.

8. AJAX Blog

AJAX Blog, AJAX hakkında bir blogdur. AJAX Blog üzerinde aradığınız bilgiye ulaşmanıza yardımcı olacak pek çok kategori bulunmaktadır. Eğer AJAX rehberleri ve örnekleri arıyorsanız, hiç beklemeden AJAX Rehberleri ve AJAX Örnekleri kategorilerini ziyaret edebilirsiniz.

9. AJAX Matters

AJAX teknolojisi hakkında bildiriler sunan bir blog olan AJAX Matters 2004 yılında yayım hayatına başlamış olup bu konuya adanmış ilk bloglardan biridir. Site bünyesinde AJAX ve PHP'ye başlangıç ya da Google Web Toolkit'i öğrenebileceğiniz pek çok yardımcı rehber bulunmaktadır.

10. Ajaxonomy

Amacı AJAX hakkındaki bilgileri paylaşmak olan bir grup web geliştiricisinin hazırladığı bir blog olan Ajaxonomy özellikle AJAX Rehberleri hakkında bilgi sahibi olmak isteyenlerin işine yarayacak pek çok makaleyi içeriyor. Bunun yanısıra PHP'de sunucu tabanlı caching gibi diğer AJAX teknolojilerine ait bilgiler ve web üzerindeki diğer AJAX rehberlerinin incelemeleri de yer alıyor.

11. Ajaxian

AJAX üzerindeki yeniliklere yönelik lider bir blog olan Ajaxian, AJAX ile ilgili ipuçlarını ve dersleri barındıran Rehber başlığı gibi düzenli olarak güncellenen AJAX konularını ele alıyor. Web geliştirme alanında ün yapmış web profesyonellerini içeren bir ekibe sahip olan Ajaxian, özellikle AJAX'a yönelik kaynaklar ve haberler için ilk uğranılması gereken sitelerden.

12. Ajaxlines

Ajaxlines, ziyaretçilerine AJAX haberlerini, kaynaklarını ve derslerini sunmayı hedefliyor. Pek çok farklı kaynaktan derlediği haberleri ve bilgileri bir araya getiren site sayesinde kullanıcılar tüm bu makalelere tek bir site üzerinden ulaşabiliyor.

13. AJAX Magazine

PHP Magazine Network'un bir ağı olan AJAX Magazine AJAX konusunda bir web dergisi. Site bünyesinde işe yarar AJAX derslerine yönelik AJAX dersleri ve AJAX ve .NET kategorisi gibi daha özel alanlara yönelik ilginizi çekebilecek bilgileri içeren pek çok farklı kategoriye ulaşabilmenizi sağlıyor.

14. InsideRIA

InsideRIA, kısa adı RIA olan Rich Internet Applications (Zengin İnternet Uygulamaları) hakkında bir komünite websitesi. Site bünyesinde ilk YUI uygulamanızı yazmak (YUI, Yahoo!'nun JavaScript kütüphanesidir) ve yüksek trafiğe sahip web siteleri için AJAX çatıları gibi makalelerle yüksek seviyede interaktif web uygulamaları yazabilmenize yardımcı olan kaynaklar yer alıyor. AJAX etiketine sahip makaleleri ziyaret ederek sadece AJAX hakkındaki içeriğe ulaşabilirsiniz.

15. AJAX Impact

AJAX Impact, AJAX hakkında bilgileri ziyaretçileri ile paylaşmaya kendini adamış bir web sitesi. AJAX'a yönelik derslerin bir listesine ulaşmak için AJAX Dersleri bölümünü ziyaret edin. Eğer örnek web sitelerini merak ediyorsanız AJAX Kullanan Siteler bölümünü ziyaret etmeyi unutmayın.

16. AJAXwith.com

AJAXwith.com, "AJAX with (ile) [buraya istediğinizi girin]" (örneğin "AJAX ile PHP") hakkında kaynakları paylaşabileceğiniz komünite tarafından geliştirilen bir web sitesidir. 4.000 üyeye yakın AJAX forumu özel bir konuda yardıma ihtiyacınız olduğunda kullanışlı olabilir.

17. David Walsh Blog

Web geliştiricisi David Walsh, kendi kişisel blogu David Walsh Blog üzerinden her seviyedeki web tasarımcısı ve geliştiricisi ile işe yarar ipuçlarını paylaşıyor. Web geliştirimine yönelik pek çok konuda yazı yazan yazarın AJAX başlığı, AJAX hakkındaki makalelere çabucak ulaşabilmenizi sağlıyor. Kendisine ait olan AJAX dersleri arasında "mooTools 1.2 kullanarak AJAX kullanıcı adı uygunluğu kontrolü" ve "mooTools 1.2 kullanarak periyodik AJAX istekleri" yer alıyor.

18. AJAX Projeleri

AJAX Projects, AJAX web projelerine yönelik dizin tarzında bir liste sitesi. Site bünyesinde yer alan AJAX Dersleri bölümünde yer alan "jQuery kullanarak PHP AJAX giriş formu", "Google Analytics: AJAX ve Flash'ı İzlemek" ve "JavaScript Kodunuzu Nasıl Tasarlamalısınız?" gibi çeşitli kaynaklardan alınmış AJAX ile ilgili pek çok rehber ile mükemmel bir kaynak.

19. Agile AJAX

Pathfinder Development (bir yazılım geliştirme ve UX tasarım şirketi) üzerinde bir bölüm olan Agile AJAX, AJAX hakkında bilgileri paylaşıyor. Agile AJAX üzerinde göreceğiniz yazılardan bazıları "Uygulama Güvenliği: Kuruluş Çizelgesini Atın" ve "Scriptaculous: Seçimden Sonra Hover'ı Düzeltmek" yer alıyor.

20. AJAX Patterns

AJAX hakkında bilgileri içeren Wiki tarzında ve bir komünite tarafından geliştirilen bir site olan AJAX Patterns sitesi üzerinde yer alan örnekler kısmı özellikle sık kullanılan AJAX tasarım örneklerini görmek istiyorsanız ziyaret edilmesi gereken bir bölüm.

Kaynak: Six Revisions

İlgilenebileceğiniz Diğer Yazılarım

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

75 (gerçekten) kullanışlı javascript tekniği

maveraa — Sun, 08 Feb 2009 10:28:00 GMT

Geliştiriciler ve tasarımcılar gün geçtikçe modern tasarımlarında daha çok JavaScript kullanır oldular. Bazen JavaScript kullanımı kullanıcının işini zorlaştırıp tasarımın sadeliğini alırken kimi zaman da kullanıcı deneyimine çok önemli katkıları olur. Burada önemli olan a) doğru miktarda JavaScript kullanmak ve b) doğru JavaScript tekniklerini kullanmaktır. Bugüne kadar pek çok javascript tekniğini sizlerle paylaştım. Bu makale ile listeye bir yenisini ve kendimce en verimlisini eklemeyi planlıyorum.

Web'in JavaScript'e hızlı geçişi sağolsun JavaScript kütüphaneleri tasarımcıların ve geliştiricilerin işlerini kolaylaştırmak için çığ gibi büyümeye devam ediyorlar. Geliştiricilerin kullandığı JavaScript kütüphaneleri arasında jQuery, Prototype, Scriptaculous, mooTools, Dojo en çok kullanılan kütüphaneler olarak gösterilebilir. Bu çatıları kullanan komünite üyelerinin oluşturduğu sayısız eklentiler de JavaScript kütüphanelerine dahil edilebilmektedir.

Ancak bazen bazı özel ihtiyaçlara yönelik olarak geliştirilmiş JavaScript çözümlerine ihtiyacımız olabilir. İki bölüm halinde yayımlayacağım bu yazımda web sitelerini çok daha ilginç ve çekici kılan 75 gerçekten kullanışlı JavaScript Tekniğinden bahsetmek istiyorum.

Web'de Heceleme
Bu proje (X)HTML sayfaları için otomatik hecelemeye yönelik çalışan çözümleri bir araya getirmeyi hedefliyor. Hem farklı insan ve betik dilleri için, hem de sunucu ve istemci taraflı platformlar için. Hyphenator.js adı verilen bir JavaScript çözümü de mevcut. Hyphenator.js, HTML belgelerinin sunucu taraflı hecelemesini, bazı ortak heceleme kuralları ve Franklin M. Liang'ın LaTex ve OpenOffice'te de sıkça kullanılan heceleme algoritmasını tüm tarayıcılara getiriyor.

SocialHistory.js
SocialHistory.js, ziyaretçilerinizin hangi sosyal ağları kullandığını tesbit edebilmenizi sağlıyor. Kullanıcının tüm geçmişini görmenizi sağlamıyor. Kullanıcının daha önce herhangi bir adresi ziyaret edip etmediğini 20 soruluk bir yöntemle test ediyor. SocialHistory.js'nin kontrol ettiği çok geniş bir sosyal ağ listesi mevcut. Alternatif arayanlar şu çözüme de bir göz atabilirler.

Textboxlist Otomatik Tamamlama
JavaScript'in en çekici özelliklerinden birisi de oldukça kullanışlı olan otomatik tamamlama özelliğidir. Otomatik tamamlamayı Facebook'tan daha güzel kullanan hiçbir site yoktur. Facebook, otomatik tamamlama özelliğini çok etkin bir şekilde kullanarak diğer Facebook kullanıcılarının aranabilmesini sağlamış durmda. Kullanıcı bir kez bulunduğunda adı bir çerçeve içerisinde listeye ekleniyor ve kullanıcı adının yanına adı listeden çıkarmak için bir "X" bağlantısı ekleniyor. İşte TextboxList betiği de bu özelliği taklit ederek kullanıcıların hizmetine sunmuş durumda.

addSizes.js
Bu küçük JavaScript otomatik dosya boyutu oluşturma işini hallediyor. Örneğin eğer büyük boyutlu .mp3 ya da .pdf dosyalarını siteniz üzerinden sunuyorsanız bu betik ilgili dosyaları otomatik olarak kontrol ederek dosya boyutunu bağlantının hemen yanına parantez içerisinde ekliyor.

syntaxhighlighter
SyntaxHighlighter özellikle sitesi üzerinden sıklıkla kod parçacıkları yayımlayan geliştiriciler ve kodcular için hazırlanmış bir betik. %100 JavaScript tabanlı olan bu betik, sunucunuzda neyin kurulu olup olmadığına bakmıyor.

samaxesjs
samaxesJS JavaScript ile yazılmış, zengin web uygulamalarına entegre etmek için geliştirilmiş bir dizi aracı ve kontrolü içeriyor. Örneğin TOC (Table of Contents - İçindekiler) kontrolü sayfanızdaki içeriğin başlıklarından otomatik olarak bir içindekiler tablosu oluşturuyor, tüm başlıkların önüne numara ekliyor ve HTML tablosunu otomatik olarak oluşturuyor. JavaScript'in etkin olmadığı tarayıcılarda da sayfanın yapısını bozmadan özelliği etkisizleştiriyor.

Adım Adım
Bu betik ziyaretçilerinize sitenizin onlar için ne sunduğunu gösterebilmenizi ve açıklayabilmenizi sağlıyor. Daha önce ekran görüntüleri ve videolarla oluşturulmuş ve bir ürünün ya da hizmetin tanıtımını yapan ve size ilgili içeriği adım adım açıklayan bazı tanıtım uygulamaları ile karşılaşmışsınızdır. İşte bu betik tam da bu işi web siteleri için yapmayı hedefliyor.

MoreCSS
MoreCSS küçük, çapraz-tarayıcı uyumlu bir JavaScript kütüphanesi olup tıpkı CSS kullanıyormuşçasına sekmeli menüler, tablolar ve "zebra" tarzında listeler oluşturabilmenizi sağlıyor. Kütüphaneyi HTML'ye eklemek ve genel geçer tasarım elementleri için CSS kullanmanız yeterli.

Facelift Görsel Değiştiricisi
Facelift Image Replacement (ya da FLIR, fliir diye okunur) bir imaj değiştirme betiği olup bir siteniz üzerinde herhangi bir yazıtipini kullanabilmenizi sağlıyor. Normalde ziyaretçinin tarayıcısında bulunmayan bir yazıtipini sitenizde kullanmaya kalktığınızda o ziyaretçinin sisteminde öntanımlı olan yazıtipi görüntülenirken bu betik kullanıldığında ilgili yazıtipi için görseller görüntüleniyor. Tüm modern tarayıcılarda çalışan bu betik başlıklardan (h1, h2 vs) span elementlerine ve arasındaki her metin içerikli element üzerinde kusursuz çalışıyor.

CSS Sprites2
Çapraz tarayıcı uyumluluğu artık çocuk oyuncağı haline geldi, zira jQuery pek çok modern tarayıcı üzerinde çalışıyor. Burada gördüğünüz her şey IE6+, Firefox, Safari, Opera vs'de çalışıyor. Betiğe ayrıca JavaScript'in etkin olmadığı durumlarda bile sitenin görünümünü bozmayacak korumalar eklenmiş durumda.

jParallax
jParallax bir jQuery kütüphanesi olup seçili elementi bir 'pencereye' ya da bir görüntü kapısına ve bunların tüm astlarını da mutlak pozisyonlanmış katmanlara dönüştürerek görüntü kapısı üzerinden görüntülenebilir hale sokuyor. Bu katmanlar fare hareketlerine göre hareket ediyor ve boyutlarına (katman başlangıç noktaları için belirlenen seçeneklere) göre farklı miktarda ilerliyorlar ve sonuçta bir tür paralaks görüntü beliriyor. Bir kameradan baktığınızı ve size farklı uzaklıktaki objelerin siz kamerayı hareket ettirdikçe hareket ettiğini düşünün. İşte bu kütüphane bu efekte her bir katman için bir adet hareketsiz görsel kullanarak erişiyor.

ddMenu - Ortam Menü Betiği
ddMenu mooTools tabanlı basit bir betik olup kendi ortam menülerinizi oluşturabilmenizi sağlıyor. Kontrol düğmesine ve sağ fare tuşuna basarak tarayıcının öntanımlı menüsü ile betik menüsü arasında geçiş yapabilirsiniz. Shift düğmesi ile sağ fare düğmesine basarak ddMenu'yu tarayıcının öntanımlı menüsnün arkasında açabilirsiniz.

js-hotkeys
jQuery.HotKeys eklentisi sayesinde web sitenize klavye kısayolları eklemeniz mümkün hale geliyor. Kısayolu tanımlamak için tek yapmanız gereken sayfanıza bir satır kod eklemek. Alternatif arayanlar bu makaleye göz atabilirler.

BarackSlideShow
Verimli ve hafif bir slayt gösterisi betiği. mooTools 1.2 ile çalışıyor ve her tür şekil geçişlerini (üst ve sol koordinasyonlar ve yükseklik ile genişlik değerleri) destekliyor ki bunun anlamı da hem dikey, hem yatay hem de sırasız listelerle kullanılabiliyor olması.

Galleria
Galleria jQuery ile yazılmış bir JavaScript resim galerisi. Sırasız listelerden aldığı görselleri birer birer yüklüyor ve her bir görsel yüklendiğinde görselin küçük resmini görüntülüyor. Eğer isterseniz betik sizin için görsellerin küçük resimlerini de ister orantılı ister orantısız, ister ortalanmış, isterseniz de CSS ile tanımlanmış bir küçük resim kutusu içerisinde kırpılmış olarak görüntüleyebiliyor.

Geçmiş Tutucusu
unFocus History Keeper JavaScript tabanlı bir kütüphane olup tarayıcının geçmişte ziyaret edilen siteler listesini (geri düğmesi) yönetebiliyor ve Flash ile Ajax uygulamaları için derin-bağlantılamayı destekliyor. Sunucu tabanlı uygulamalar için 'Geri' düğmesini desteğini etkinleştiriyor ve sağlama tabanlı derin bağlantılamaya sahip (anchor tarzında - index.html#foo=bar) ve eylemlere göre değişkenlik gösterebiliyor. Betiğin geçerli sürümü tüm modern tarayıcılarda sorunsuz çalışıyor.

date.js
Datejs gelişmiş ve açık kaynaklı bir betik olup tarih ve zamanı ayrıştırma, biçimlendirme ve işleme için kullanılıyor.

Lightview
Lightview web sitenizde modal pencereler oluşturabileceğiniz bir başka betik. Betiğin akıllı görsel önyükleme, ayarlanabilir yuvarlatılmış köşeler ve PNGler kullanmadan içeriğin daima ekranınıza sığabilmesi için içerik yeniden boyutlandırabilme gibi özellikleri mevcut. İlgili betik sunumlar, tekil görseller, Quicktime dosyaları, formlar, iframeler, satıriçi içerikler ve Flash dosyaları için kullanılabilir.

Coda popup baloncukları
Yazılım geliştiricisi Panic'in web geliştiricileri için hazırladığı, Coda adında sevilen bir Mac uygulaması mevcut. Coda'nın inanılmaz derecede işlevsel bir tasarımı var ve sitede kullanılan güzel JavaScript efeklerinden birisi de stilize edilmiş pop-up baloncukları. Tasarımcılar için jQuery blogu jQuery ve özel geliştirilmiş bir kodu birleştirerek Coda websitesinde kullanılan bu özelliği taklit etmeyi hedeflemiş. Ortaya çıkan efekt güzel, verimli ve kullanıcı deneyimine olumlu etkileri olan oldukça kullanışlı bir eklenti.

ajax.im
meebox gibi web tabalı anında mesajlaşma istemcilerinin populerliği arttıkça web geliştiricileri de kendi JavaScript anında mesajlaşma çözümlerini sitelerine entegre etmek istemeye başladılar. Ajax IM, Ajax ile hazırlanmış anında mesajlaşma uygulamaları oluşturmak isteyenler için bir JavaScript kütüphanesi. Betiğin dosya boyutu görece büyük ancak kullanıcıları ile daha fazla ilişki kurmak isteyen web siteleri için güzel bir efekt olabilir.

LiveValidation
Bu betik özellikle web sitesinde form kullanan her web geliştiricisi için kullaşnışlı bir çözüm. Farklı veri doğrulama özelliklerini içeren yenilikçi bir kayıt formu oluşturmak bazen sorun olabilir. Ayrıca JavaScript kullanarak daha hızlı ve yenilikçi formlar oluşturmak da zordur. Ne şans ki LiveValidation bizler için bu sorunu çözüyor ve form doğrulama sorununu kökünden hallediyor. Eğer Ruby on Rails geliştiricisi iseniz, LiveValidation betiğinin iki sürümü bulunuyor. Ruby on Rails için ideal olan ve Prototype ile çalışan sürümü ya da doğrudan kendi kendine çalışabilir sürümü mevcut.

Ajax AutoSuggest
TextboxList'in otomatik tamamlama betiği gibi olan Ajax AutoSuggest betiği de güzel görünümlü ve iyileştirilmiş bir otomatik tamamlama betiğidir. Bu betiğin dosya boyuto oldukça küçük, 9k'nin altında ve tüm arama formlarına fazladan güzel bir özellik ekliyor.

FancyUpload
Gönderdiğiniz dosyalar için bir ilerleme çubuğu görüntüleyen bir gönderme betiği. Her tür gönderme formu için mükemmel bir çözüm olan bu betik, aynı anda birden fazla dosya gönderimini de destekliyor. Gönderilecek olan dosyaların boyutunu da betik üzerinden sınırlayabileceğiniz gibi, dosya türüne de sınırlama getirebiliyorsunuz. Betiği kullanabilmek için tek gereksinim, kullanıcının sisteminde Flash eklentisinin kurulu olması gerekliliği ki Web kullanıcılarının %95'inde bu betik halihazırda kurulu durumda.

Taggify
Taggify betiğinin sitelere dahil etme işlemi listelenen diğer JavaScriptlerden biraz farklı. Taggify fotoğraflar üzerine açılır pencereler dahil etmenize yarayan sunucu tabanlı bir çözüm. Betiği indirip sunucunuzda barındırmaktansa kodunuza küçük bir <include> eklemeniz, Taggify betiğinin sitenize kurulumu için yeterli. Taggify'nin kullanımı da ilginç, betik fotoğraflara notlar ve kullanıcı bilgiler ekliyor.

Bu betiği Flickr görsellerine notlar eklemenize yarayan özelliğin geliştirilmiş bir sürümü olarak düşünebilirsiniz. Taggify notu içerisine dilediğiniz HTML kodunu ekleyerek görsellere bilgi verici notlar dahil edebilirsiniz.

AmberJack
AmberJack ilginç ve zorlu JavaScript tekniklerinden birisi. Web site turları özellikle kullanıcların sitenize alışması, ürünlerinizin ve özelliklerinizin tanıtımı ve diğer pek çok özellik açısından işe yarar bir özelliktir. AmberJack'in en iyi yanlarından birisi de web site turları oluşturmak için herhangi bir şey kurmanızın ya da öğrenmenizin gerekmiyor oluşu olsa gerek. AmberJack, website ve ürün sahiplerinin JavaScript kullanarak web site turları oluşturma işlemini büyük ölçüde kolaylaştırırken, dosya boyutu da inanılmaz bir şekilde sadece 4 KB.

Sliding Tabs
Coda'dan esinlenilen bir başka betik daha. Yumuşak kaydırma efektine sahip sekme sistemi, paneller üzerinde geçişi kolay ve kullanışlı bir hale getiriyor. Sliding Tabs'ın çalışır örneğini buradan görebilirsiniz. Sliding Tabs, mooTools JavaScript kütüphanesi üzerine kurulmuş bir betik. Alternatif arayanlar ise şuna bir göz atabilir.

JavaScript Image Loader
Eğer kullanıcılarınızın web sitenize görsel gönderebilmesi ve sitenizdekileri inceleyebilmesi için daha yaratıcı bir yöntem arıyorsanız o zaman JavaScript Image Loader () ihtiyaçlarınıza cevap verecek türden bir betik. JavaScript Image Loader kullanıcılarınıza görsel gönderilmeden önce gösterebilmek ve gerektiği durumlarda ilgili görsel hakkında daha fazla bilgi verebilmeniz için ideal bir seçenek.

swfIR
swfIR, görsel işleme özelliği için JavaScript ve Flash'ın bir arada kullanıldığı ilginç bir konsept. swfIR kurulduğunda görsel çevresine <span> etiketi ile birlikte "swflr" sınıfını ekliyor. swfIR görsele neredeyse her türlü işlemi uygulayabiliyor. Betiğin özellikle kullanışlı olan bir özelliği var ki o da görseli sayfanın boyutuna göre yeniden boyutlandırabilmesi. Sayfa üzerindeki metni yeniden boyutlandırdığınızda görselin de boyutu aynı oranda değiştiriliyor. Görselin metin ile birlikte yeniden boyutlandırılması çok daha uyumlu bir his uyandırıyor.

MooFlow
Apple'nin Leopard işletim sistemi üzerindeki Cover Flow özelliğini sevenler için biçilmiş kaftan olan bu betik, aynı özelliği Apple'nin kendisinden alarak web sitelerine entegre edebilmenizi sağlıyor. MooFlow, adından da anlayabileceğiniz üzere MooTools üzerine inşa edilmiş bir betik ve güzel görünümlü görsel galerileri oluşturmak için kaydırma çubuğu ile birlikte muhteşem bir sonuç ortaya çıkarıyor.

Tıpkı Cover Flow'da olduğu gibi MooFlow'un da galeri anahattını ve özelliklerini özelleştirebilmeniz mümkün. Tam ekran moduna geçebilir, görsel yansıma ve otomatik yürütme özelliğini etkinleştirebilirsiniz. MooFlow bunun dışında pek çok özelleştirme seçeneği sunmasını yanısıra kurulumu da kolay, zira tüm görselleri dahilindeki element içerisinden otomatik olarak alabiliyor.

amCharts
Flash ve JavaScript'in bir arada kullanıldığı bir grafik üreteci olan bu betik ile neredeyse her tür grafiği oluşturmanız mümkün. Bu da yetmezmiş gibi veriyi .csv ve .xml dosyaları üzerinden de alabiliyorsunuz. amCharts ile sütun ve çubuk, pasta ve kurabiye, çizgi ve alan gibi pek çok grafik türünü oluşturabilirsiniz.

GreyBox
GreyBox'un web sitesinde, "Doğru düzgün pop-up penceresi" cümlesi ile betiğin yaptığı iş özetlenmiş ki sanırım bundan daha iyi bir tanımlama da yapılamazdı. GreyBox, açılır bir pencerenin yapabilmesi gereken her şeyi yapabiliyor. Resimler, web siteleri ve hayal edebileceğiniz diğer her şeyi gösterebiliyor.

GreyBox'u kullanmak inanılmaz derecede kolay, zira JavaScript'i ekledikten sonra yapılması gereken tek şey, pencere içerisinde görüntülemek istediğiniz içeriği <rel> etiketi arasına dahil etmek </rel>.

Maillist

Millist her ne kadar tam özellikli bir AJAX iletişim formu olmasa da bu küçük betik, pek çok web geliştiricisinin beta kayıtları ve diğer sebepler için elektronik posta adresi toplama işini kolaylıkla üstlenebiliyor. Betiğin elektronik posta yedeklerini ve formun görünümünü yönetebileceğiniz bir yönetici paneli bile bulunuyor.

SWFObject
SWFObject, küçük bir Flash oynatıcısı olup sadece kod ile çözülmesi mümkün olmayan pek çok Flash probleminin üstesinden geliyor. Oynatıcının dosya boyutu sadece 9.5 KB (ya da GZIP sürümü 3.8 KB). SWFObject, modern tarayıcılarla olan uyumu sebebiyle övünürken, hangi Flash oynatıcı sürümünün kullanılıp kullanılmayacağını tespit etmek için JavaScript'i kullanıyor. Bu sebeple süresi dolmuş Flash eklentilerinin içeriği görüntüleyememesi sorununun da önüne geçilmiş oluyor.

PlotKit
PlotKit JavaScript ile grafik çizimi için geliştirilen ve küçük boyutlu bir JavaScript çatırı olan Moochikit'e dayanan kullanışlı bir betik. Her tür grafiğin çizimi için kullanılabilir.

JavaScript tabifier
JavaScript tabifier kolayce ve hızlıca sekmeli içerik oluşturmak için kullanabileceğiniz kullanışlı bir betik. Tabifier'i kullanabilmek için tek yapmanız gereken JavaScript'i sitenize ekledikten sonra "tabber" sınıfına dahil bir <div>'i içeriği çevreleyen sekme için yerleştirmek ve ardından "tabbertab" sınıfına dahil bir <div> içerisinde de sekmenin başlığını belirtmek. Sekmeler için çerez desteği, sekmelerin dinamik olarak değiştirilmesi ve öntanımlı sekmeyi belirlemek gibi gelişmiş özellikleri de kullanmanız mümkün.

FancyZoom 1.1
Satıriçinde tam boyutlu görselleri görüntülemenize yarayan FancyZoom; yumuşak, temiz ve gerçek Mac-benzeri efekti web siteniz üzerinde kullanabilmenizi sağlıyor.

Özelliklte görsel kaliteye ve kullanım kolaylığına önem verilen betik, herhangi bir HTML kod değişikliğine gerek kalmadan görselin tam boyutlu bir şekilde görüntülenebilmesini sağlıyor. Betik ayrıca tam boyutlu görselleri arkaplanda yükleyebilirken, herhangi bir JavaScript kütüphanesine de ihtiyaç duymuyor. FancyZoom, HTML dosyalarınızda sadece iki satır kod işgal ediyor.

A Mac OS X-style Dock In JavaScript
Apple'ın Mac OS X işletim sisteminin son sürümü özellikle göz alıcı görsel kalitesi ve efektleri ile de kullanıcılarını memnun etmeyi başarmıştı. İşletim sisteminin bir güzel özelliği de balık gözü efektine sahip ve uygulama simgelerinin bulunduğu bir yüzeyin var oluşu idi. Fare imlecinizi uygulama simgesinin üzerine getirdiğinizde, ilgili simgenin civarındaki simgelerin boyutları da ana simgeye orantılı bir şekilde büyütülüyordu. JavaScript ile bu özelliği oluşturmak pek kolay bir iş değil ancak MacStyleDock betiğinin geliştiricileri bu işi web sitelerinizde kullanabilmeniz için çocuk oyuncağı haline getirmeyi başarmışlar.

fValidator
fValidator, açık kaynaklı, ücretsiz ve kullanımı kolay bir JavaScript olup özellikle form doğrulama ile ilgilenen kullanıcıların ihtiyacını tam olarak karşılamak üzere geliştirilmiş. Özellikle kullanıcılarınızın formlara veri girişi sırasında istediğiniz biçimi kullanmalarını zorlamak istemeniz durumunda kullanışlı olan bu betiğin jQuery alternatifi de mevcut.

jQuery Interactive Date Range Picker with Shortcuts
jQuery ile belirli bir tarih aralığını seçmek için kullanabileceğiniz bir betik. Gelişmiş seçenekler görüntülenmek istediğinde kullanılan yumuşak geçiş efekti göz dolduruyor.

Raphael
Raphael küçük bir JavaScript kütüphanesi olup özellikle Web üzerinde vektör grafikler kullanmak istediğinizde kullanışlı hale geliyor. Örneğin kendinize özgü grafiğinizi ya da görseli kırp-ve-döndür widget'inizi oluşturmak istediğinizde bu kütüphane ile bunu kolayca yapabilirsiniz. Raphael, grafik oluşturma işlemi için SVG ve VML kullanıyor.

NoGray Time Picker
Bu zaman seçicisi kolay kullanımlı sürükle-bırak arayüzünü kullanıyor. Zamanı seçmek için kullanıcıların tek yapması gereken saat üzerindeki akrep ve yelkovanı sürükleyip bırakmaları.

Yetii - Yet (E)Another JavaScript Tab Interface
Yetii basit olduğu kodar bol özelliği olan bir sekmeli arayüz oluşturucusu. Hafif ve nesne yönelimli bir koda sahip olan Yedii, JavaScript desteği olan tarayıcılarda da görünümü bozmuyor. Bir web sayfası üzerinde istediğiniz kadar sekmeli içerik arayüzü oluşturabilir, otomatik sekme geçişini değiştirebilir önceki ve sonraki sekmelere geçiş için düğmeler ekleyebilir, bir sekmeli içerik arayüzünü bir diğerinin içine yerleştirebilir ve belirli bir sekmeye tıklandığında yürütülmesini istediğiniz eylemi belirtebilirsiniz.

Bir sayfa üzerindeki sekmelerden herhangi birine bir başka sayfa üzerinden bağlantı verebileceğiniz gibi son tıklanan sekmenin sayfa yeniden kullanıldığında ilk açılan sekme olmasını çerez kullanarak belirleyebilirsiniz.

Calendar

Bir MooTools JavaScript sınıfı olan Calendar erişilebilir ve kolay kullanımlı tarih seçicilerini form elementlerine entegre edebilmenizi sağlıyor. Yüksek seviyede özelleştirilebilir girdi ve seçim kutucukları, birden fazla takvim desteği, çeşitli gezinme seçenekleri, çoklu dil desteği ve güzel görünümlü tarih biçimlendirmesini sunan bu kolay kullanımlı takvim, ilgili özelliği web sitelerinde kullanmak isteyen geliştiriciler için ideal.

Starbox
Starbox sayesinde her tür oylama kutucuğunu sadece bir PNG görseli kullanarak oluşturabilirsiniz. Kütüphane Prototype JavaScript çatısı üzerine inşa edilmiş. Eğer daha fazla efekt istiyorsanız Scriptaculous'u da dahil edebilirsiniz.

Magic Zoom
Magic Zoom bir JavaScript yakınlaştırma aracıdır. Görselleri detayları ile görüntüleyebilmenin en iyi yoludur. Kullanıcıların herhangi bir şeye tıklamalarına gerek yok, tek yapmaları gereken detayını görüntülemek istedikleri görselin üzerinde fare imleçlerini gezindirmek.

Magic Magnify
Magic Magnify bir Flash yakınlaştırma aracıdır. Görselin üzerine fare imlecinizi getirdiğinizde detaylarını görüntüleyebiliyorsunuz. Ücretli olan bu eklentinin fiyatı 28 Amerikan Doları.

Carousel.us
Carousel.us JavaScript ile oluşturulmuş 3B Karusel efektini ister prototype.js, ister scriptaculous isterseniz de mootools.js çatıları altında kullanabilmenizi sağlıyor. Betik ayrıca yansıma efekti için Richard Davey'in hazırladığı PHP Easy Reflections'u da kullanıyor.

Slideshow
Slideshow, Mootools 1.2 için bir JavaScript sınıfı olup görsel sunumlarınızı web siteniz üzerinde hareketlendirmeye yarıyor. Slideshow çok uzun bir geliştirilme sürecine sahip. Sonuç ise gerçekten hafif, kurulumu ve kullanımı kolay, yüksek seviyede özelleştirilebilir ve geliştirilebilir bir betik olmuyş. En iyi efektlere ulaşmak için JavaScript çatılarını kullanan bu betik ilk olarak Aeron Glemann tarafından bir yan proje olarak geliştirilirken şimdilerde MIT lisansı altında açık kaynaklı olarak dağıtılıyor.

jgrousedoc
jGrousedoc sayesinde geliştiriciler, sundukları JavaScript kodlarına javadoc benzeri yorumları dahil edebiliyorlar. Betik, sınıfların dökümantasyonuna OOP'yi kullanmak için hangi kütüphanenin ya da teknolojinin kullanıldığına bakılmaksızın izin veriyor. Çıktı ise CSS ve Velocity şablonları ya da XSLT ile özelleştirilebiliyor.

Lightbox 2
Lightbox basit ve kullanımlı kolay bir betik olup görselleri geçerli sayfanın üzerinde görüntülemeye yarıyor. Kurulumu oldukça kolay olan bu betik tüm modern tarayıcılar üzerinde çalışıyor.

Control.Window
Control.Window tümüyle programlanabilir, çok amaçlı bir pencereleme aracıdır. Yüksek seviyede özelleştirilebilir olan bu betik için pek çok kullanım alanı mevcut. Hedefleri pencere içerisinde açabilmek için bağlantılara eklenebildiği gibi pencere içerisinde dinamik içerik görüntülemek mümkün. Dizilebilir, sürüklenebilir ve yeniden boyutlandırılabilir pencereleri destekliyor. Modal pencereleri, LightBoxları ve İpuçlarını kullanabilmek için gerekli alt sınıflar da betik içerisinde yer alıyor.

SimpleModal
SimpleModal küçük boyutlu bir jQuery eklentisi olup modal diyalog pencereleri oluşturabilmek için kolay bir yöntem sunuyor. SimpleModal'ın amacı geliştiricilere çapraz tarayıcı desteği olan ve SimpleModal'e sunulan verinin içerisinde görüntülenebileciği yüzen pencereler sunabilmek.

MooTools ile Karusel Oluşturmak
Bunu muhtemelen diğer sitelerde de görmüşsünüzdür, hani şu bir dizi görseli (ya da isterseniz içeriği) satıriçinde güzel bir şekilde gösteren slayt gösterileri. Pek çok kişi bunu sitelerinde kullanabilmek için doğrudan kodu kopyalıyordur ancak bana kalırsa rehberi okuyarak bunu kendiniz oluşturduğunuzda yeni teknikler de öğrenmeniz mümkün. Bu sebeple bu makalenin yazarı MooTools ve CSS kullanılarak nasıl karusel özelliği geliştirilebileceğini anlatmaya çalışmış. MooTools üzerine en çok bağlantılanan makalelerden biri.

Kolay Açılır Kapanır Navigasyon

Sadece sıralı listeler ve mümkün olan en az sayıda sınıf ve kimlik adları kullanılarak oluşturulan açılır-kapanır dikey menü oluşturmak istiyorsanız bu yazıyı okuyun.

Image Cross Fade Transition
90'ların başında JavaScript ile sıralı görselleri birbiri ardına göstermek modaudı ve tanıdığım pek çok JavaScript geliştiricisi bu dili bu tip özellikleri geliştirerek öğrenmeye başladılar. Günümüzde ise bunu JavaScript ya da CSS ile oluşturmak çocuk oyuncağı. Zor olan ise görseller arasına geçiş efektlerini dahil etmek.

Slider Gallery
Bu 'ürün kaydırıcısı'nın bir benzeri yine Apple'nin web sitesinde kullanılıyor.

FancyZoom meets jQuery

Build An AJAX Powered Shopping Cart
Bu dersin amacı size AJAX ile nasıl bir sipariş sepeti oluşturabileceğinizi göstermek. Buna rağmen dersi tamamladığınızda ortaya çıkan sonuç kullanıma hazır olmayacak. Uygulamayı sırtlanacak arkaplan işlemleri için gerekli bilgiye sahip olduğunuz varsayılıyor. Bunun yerine rehberde sadece işin AJAX kısmına odaklanılmış.

jQuery iPod-benzeri Açılır Menü
Betiğin geliştiricileri iPodlar üzerinde görülen ve yüksek miktarda hiyerarşik olarak dizilen veriyi kontrollü bir şekilde görüntüleyebilmeye yarayan bir betik geliştirmişler. Özellikle yüksek miktarda veriyi düzenli bir şekilde görüntülemek ancak bunu için sıradan CSS menüleri ile boğuşmak istemeyen kullanıcılar için tercih edilmiş.

jQuery ile İçeriği Sürüklerken Yüklemek
Bu betik sayesinde dikey olarak yerleştirilen ve uzun miktarda içeriği sayfa sürüklendikçe yüklemek jQuery kullanılarak mümkün hale getirilmiş.

JavaScript İpuçları
Michael Leigeber tarafından hazırlanan bu rehber, nasıl hafif ve güzel görünümlü bir JavaScript ipucu çözümü oluşturabileceğinizi gösteriyor.

Newsticker
Antonio Lupetti Newsvine üzerinde kullanılan haber görüntüleme sisteminin bir benzerinin nasıl MooTools kullanılarak oluşturulabileceğini örneklendirmeye çalışmış.

jQuery Virtual Tour
jQuery kullanılarak oluşturulan bu betik sayesinde panaromik görüntüler kullanılarak nasıl sanal gezinti turları oluşturabileceğiniz anlatılıyor.

Flexigrid
Hafif ancak özellik açısından zengin olan bu uygulama ile yeniden boyutlandırılabilir veri ızgaraları ve başlıklarla eşleşebilen sürüklenebilir verileri görüntüleyebilirsiniz. Bunun yanısıra veri kaynağı olarak xml kullanmak ve verinin yüklenmesi için de AJAX'tan faydalanmak diğer kullanışlı özellikler arasında yer alıyor. Exit Grid ile aynı konsepte sahip olan bu uygulama'nın farkı tümüyle jQuery kullanıyor olması. Bu sayede verinin yüklenmesi hızlandırılmış ve dosya boyutu da azaltılmış.

tableFilter
Bu betik sayesinde tablolardaki içerikleri interaktif bir şekilde dizmeniz mümkün hale getirilmiş.

Row Locking with Checkboxes

jQuery File Tree
jQuery File Tree özelleştirilebilir ve AJAX ile desteklenmiş, jQuery için geliştirilmiş bir dosya gezgini eklentisi. Sadece bir satır JavaScript kodu ile kendinize özgü ve tümüyle etkileşimli bir dosya ağacı oluşturabilirsiniz. Simgeleri dosya uzantılarına göre otomatik olarak görüntüleyebilme özelliğine sahip olan bu betik, içeriğini sayfanın yeniden yüklenmesine gerek kalmadan oluşturabimek için AJAX kullanıyor. Açılır kapanır dosya ağaçları ve tekil ve çoklu klasör görünümleri için ayarları da bulunuyor.

Proto.Menu

Pricing Matrix

Toggling Announcement Slider

Rehberler

Kaynak: Smashing Magazine

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