bildirgec.org - zur - beğendikleri

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

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

2008'in En İyi JavaScript Kaynakları

zur — Sun, 25 Jan 2009 10:11:00 GMT

Geçtiğimiz yılın en iyilerini içeren listelere bir yazı ile de ben eşlik etmek istedim. Konumuz JavaScript. 2008 yılında başta JavaScript kütüphaneleri olmak üzere JavaScript'in genelinin yeni nesil web uygulamalarındaki önemi bir kez daha kanıtlanmış oldu. JavaScript ve onunla birlikte çalışabilen üçüncü parti çözümlerin birlikte kullanımı sonucunda harikalar yaratabilen web geliştiricileri, eserlerini tüm Internet kullanıcıları ile ücretsiz olarak paylaşmaktan çekinmediler.

Biz de bu yazımızda 2008 yılının en iyi JavaScript kaynaklarını derlemek istedik. Yazının devamında bulacaklarınızın arasında kaynaklar, kullanışlı dersler, bazı görüşler ve ilginç JavaScript kullanım örneklerine ulaşacaksınız.

Bu tip kaynaklardan her zaman öğrenebileceğiniz bir ya da iki ders mutlaka vardır ve eğer siz bunları verimli bir şekilde kullanırsanız bu yıl portfolyonuzdaki yeteneklere bir yenisini daha ekleyebilirsiniz.

sIFR Lite
"Bir zamanlar bazı çok başarılı web geliştiricileri sIFR'ı yarattılar. Hedefleri, HTML manşetlerini güzel görünümlü yazıtiplerine dönüştürmekti ve işte bu web geliştiricileri amaçlarına da başarılı bir şekilde ulaştılar. Kodlarına bakarak ben de sIFR'a daha nesne yönelimli bir yaklaşımla sIFR'ın 'lite' sürümünü oluşturdum. sIFR lite'yi okumak daha kolay ve kullanımı daha yenilikçi."

Siteyi ziyaret edin

DD_belatedPNG
IE6 için 24-bit PNG alpha-translucency background-image + background-position + background-repeat desteği olan, transparan (saydam) PNG'lerin IE6 üzerinde en sonunda tümüyle sorunsuz çalışabilmesini sağlayan bir yaklaşım. Mucize gibi işliyor!

Siteyi ziyaret edin.

The EqualHeights jQuery Plugin
"CSS ile eşit yükseltiye sahip sütunlar oluşturmak bazen bir işkencedir. Kim bu tip karmaşık CSS kodları ile uğraşmak ister ki? jQuery kod parçacıklarının yardımı ile bir grup elementin yüksekliklerini eşitlemeniz mümkün.

Siteyi ziyaret edin.

jQuery.popeye - satıriçi lightbox alternatifi
"Bu eklenti sırasız imaj listelerini kutu içerisinde birer birer önizlemesini göstererek bir tür lightbox alternatifi oluşturuyor. Kutu üzerinde beliren kontrol elementleri ile imajlar arasında gezinmek mümkünken, dilenen imaj tam boyutlu olarak görüntülenebiliyor. Kutu tam boyutlu imajı görüntüleyebilmek için genişlerken aynı sırada kontrol öğeleri de gizleniyor. Kutu üzerine bir tıklama ile kutu eski küçük haline geri dönüyor."

Siteyi ziyaret edin.

DD_Roundies
Internet Explorer'da yuvarlatılmış köşeler ekleyebilmenin en kolay yolu.

"Bir yuvarlak köşeli kutu için 9 hücreli tablo kullanmaya son. İmaj kullanmaya son. Satırlarca HTML kodu eklemeye son. IE için JavaScript çözümü, diğer 'gerçek tarayıcılar' için CSS3 elementleri otomatik olarak entegre ediliyor"

Siteyi ziyaret edin

jQuery Corners 0.3
"Bu jQuery eklentisi güzelce yuvarlatılmış köşeleri web sitelerinize entegre edebilmenizi sağlıyor. Hem de herhangi bir imaj ya da karmaşık kodlar kullanmadan".

Siteyi ziyaret edin

Superfish jQuery Menü Eklentisi
"Superfish, Suckerfish tarzında gelişmiş bir jQuery menü eklentisi olup halihazırda varolan CSS menülerin üzerine entegre ediliyor (böylece JavaScript'in etkin olmadığı durumlarda bile menünüz sorunsuz çalışıyor). Entegre edildiğinde menünüze çok beğenilen gelişmiş özellikler eklenmiş oluyor."

Siteyi ziyaret edin

JavaScript Hepimizi Kurtaracak
Eric Meyer, tarayıcıların yeni web dillerini desteklemesini beklemektense neden JavaScript kullanarak tarayıcılara bu özellikleri kazandırmamız gerektiğini anlatıyor.

Siteyi ziyaret edin

CSS Sprites2 - Şimdi JavaScript Zamanı
"Web siteleri arasındaki farklar genellikle yoğun flash kullanılan web siteleri ile web standartlarını takip eden siteler arasında değişir. Flash arayüzler genellikle daha canlı görünürler ve kullanıcı isteklerine, standartlara bağımlı web sitelerinin erişemediği dinamiklikte cevap verir. Son zamanlarda bu özellikle değişiklik göstermeye başladı. Özellikle Prototype, Scriptaculous, Moo, YUI, MochiKit ve diğer tüm JavaScript kütüphanelerinin de yardımı ile standartlara bağlı web siteleri de kullanıcı isteklerine dinamik bir şekilde cevap verebilir oldular. Şimdi CSS Sprites tekniğine 4 yıl öncesinden yenien bir göz atmanın ve projelerimize canlılık kazandırmanın mümkün olup olmadığını öğrenmenin zamanı geldi."

Siteyi ziyaret edin.

jParallax
"jParallax seçili elementi bir 'pencereye', bir 'görüş alanına' ve onun astlarını da mutlak olarak pozisyonlayıp görüş alanı içerisinden görülebilen bir nesneye dönüştürüyor. Bu katmanlar, fare hareketleri ile ve kendi boyutlarına ve tanımlanan katman özelliklerine göre hareket ettirilebiliyor. Sonuç ise çok gerçekçi bir paralaks eylem yaratıyor. Muhtemelen kafanız karıştı. Aşağıdaki bağlantıya tıklayın. Ne demek istediğimi anlayacaksınız."

Siteyi ziyaret edin

JavaScript kullanmadan sabit altlıklar
Sadece CSS kullanarak sabit altlıklar oluşturabilmenizi sağlıyor. Kullanılan teknik IE 5.5 üzerindeki tüm tarayıcılarda çalışıyor.

Dinamik Anahat
"Dynamic Layout basit bir basit bir JavaScript kütüphanesi olp sitenin genişliğini geçerli tarayıcınızın genişliğine göre otomatik olarak değiştirebilmenizi sağlıyor."

Siteyi ziyaret edin

AJAX Kullanmayı Bırakın!
"Ajax kullanışlı bir fikir olmasına rağmen her fikir gibi bu da bir süre sonra kolayca proje üzerine entegre edilip edilmediğine göre iyi ya da kötü damgasını yer. Bunu kolaylaştıran unsur ise teknolojidir - ki bu durumda kullanılan teknoloji henüz olgunlaşmamış bir teknolojidir, çünkü kullanıcı gruplarını ardında bırakır. En dikkat çekeni ve etkileneni bu yardımcı teknolojileri kullanırken, teknolojileri tam olarak desteklemeyen tarayıcıları kullanmak zorunda olduğunuzda belirir..."

Siteyi ziyaret edin

sIFR İle Nasıl Çalışılır?
"Bu dersin amacı sIFR'in resmi sitesindeki bilgiyi süzerek onu sitenize nasıl entegre edebileceğinizi adım adım anlatmaktır. Bu dersi takip ettikten sonra sIFR'ın nasıl çalıştığına dair genel bir bilgi sahibi olacak ve ileri seviyede sIFR tekniklerini öğrenebilmek için kendinize bir taban oluşturacaksınız"

Siteyi ziyaret edin

FancyZoom
Web sayfalarınız için Javascript ile yumuşak imaj yakınlaştırma efekti.

FancyZoom

JavaScript ile dönen 3B küp
Ne azı ne de daha fazlası.

Siteyi ziyaret edin.

14KB JavaScript ile Super Mario
"Basit ve sıkıştırılmış bir JavaScript dosyası ile neler yapılabileceğine dair güzel bir örnek. Herhangi bir imaj kullanmadan ve her bir elementin JavaScript ile işlenerek oluşturulduğu inanılmaz bir örnek."

Siteyi ziyaret edin.

Kullanıcı Arayüzünüzü Güçlendirmek İçin 10 JavaScript Tekniği
"Javascript web geliştirme ortamında genellikle estetik bir dil olarak kullanılmaktadır. Bunun anlamı web geliştiricilerinin JavaScript'i sadece tek bir şey için, ziyaretçi'nin deneyimini iyileştirmek için kullanması gerektiğidir. Bir sitenin kullanıcı arabirimi açısından iyileştirilebilmesini sağlayacak pek çok kullanışlı ve zeki yöntem bulunmaktadır. Geliştiric, neredeyse ihtiyacı olan her bir JavaScript kod parçacığını Internet üzerinden bulabilir."

Siteyi ziyaret edin

25 Büyüleyici JavaSciprt Oyunu
"AJAX'ın da yükselişi ile JavaScript, her web tasarımcısının ve geliştiricisinin iyi bilmesi gereken bir dil haline geldi". Form kontrolleri, uyarıllar ve benzer JavaScript kullanımının aksine JavaScript yardımı ile neredeyse her şeyi yapabilmeniz mümkün.

Siteyi ziyaret edin

En Sık Kullanılan 5 İşlevsel Yer İmi
"İşlevsel yer imleri, JavaScript'in etkinleştirildiği ve yer imlerinize sürükleyip bırakabileceğiniz, üzerine tıklandığında da o an ziyaret ettiğiniz web sitesi ile ilgili eylemler gerçekleştirebilen programcıklardır. En iyi işlevsel yer imleri, bir araç çubuğundan beklenebilecek kalitede eylemler gerçekleştirebilmenizi sağlar. Buna rağmen bunlar JavaScript ile yazıldıkları için, herhangi bir kurulum gerektirmeden doğrudan tarayıcı üzerinde çalışabilirler. Bu listede en başarılı 5 işlevsel yer imi (bookmarklet) incelenmiş."

Siteyi ziyaret edin

10 Gelecek Vadeden JavaScript Çatısı
"jQuery, MooTools, Prototype ve YUI gibi popüler JavaScript frameworkleri / kütüphanelerinin JavaScript framework arenasında artık sağlam bir yeri bulunmaktadır. Ancak yeni frameworkler arayan maceracı geliştiriciler için gelecek vadeden pek çok JavaScript kütüphanesi / çatısı bulunmaktadır. İşte bu makalede popüler olanların dışında 10 adet gelecek vadeden JavaScript çatısı inceleniyor."

Siteyi ziyaret edin

Tasarımcılar ve Geliştiriciler İçin 5 Adet Kullanışlı Kodlama Çözümü
"Genellikle yaratıcı ve gerçekten büyüleyici tasarım çözümleri pek bilinmezler çünkü biz tasarımcılar onlara pek dikkat etmeyiz. Kendi projelerimizle meşgulken karmaşık kodlar arasında resmin tamamını gör(e)meyiz. Aslında pek çok tasarımcı bizim o an yapmaya çalıştığımız şeyi yapmış ve bir ders olarak Internet üzerinde paylaşmış durumdalar. Peki biz neden bunlardan faydalanmayalım?"

Siteyi ziyaret edin

WebHizmetlerini AJAX İle Çağırmak
Bu rehber size JavaScript kullanarak nasıl WebHizmetleri (WebServices) ile çalışabileceğinizi gösterecek.

Siteyi ziyaret edin

JavaScript Pretty Date
"...Eski JavaScript tarihlerini güzel bir şekilde biçimlendirmenize yarayan bir yöntem."

Siteyi ziyaret edin

Ve diğer önemli bağlantılar

Kaynak: DesignShack

Bu yazı zur 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 Uygulamaları İçin En İyi 21 Simge Seti

zur — Tue, 13 Jan 2009 14:15:00 GMT

Bir web uygulaması tasarlarken kullanıcı arabirimini kolay kullanılabilecek şekilde tasarlamak önemlidir. Gezinti (navigasyon) bağlantılarının yanı sıra simgeler kullanmak bu hedefe ulaşmak için üzerinde çalışmamız gereken önemli bir görevdir. Ancak uzun zamanınızı alacak simge setlerini baştan oluşturmak yerine neden başkalarının sizler için oluşturduğu simge setlerini kullanmayasınız? Bu yazıda web uygulamaları geliştirmek isteyen kullanıcıların uygulamalarında kullanabilecekleri en başarılı simge setlerini listelemeye çalıştım.

Jonas Rask Design Icons for Developers

Jonas Rask Design Icons for Developers

ASP.NET Icons

ASP.NET Icons

Tango Icon Library

Tango Icon Library

Aesthetica Icons

Aesthetica Icons

Diagona Icons by pinvoke

Diagona Icons

Fugue Icons by pinvoke

Fugue Icons

FAMFAMFAM - Silk

FAMFAMFAM - Silk

Web Application Icon Set

Web Application Icon Set

Coquette Icons

Coquette Icons

Free web development icons #4 SE

Coquette IconsFree web development icons #4 SE

Developpers Icons

Developpers Icons

Knob Buttons Toolbar Icons

Knob Buttons Toolbar Icons

Simplistica Icons

Simplistica Icons

Function Icon Set

Function Icon Set

Milky

Milky

Simplico

Simplico

Fresh

Fresh

FAMFAMFAM - Mini

FAMFAMFAM - Mini

Crystal Clear

Crystal Clear

Monofactor Vector Icons

Monofactor Vector Icons

IVista Icon Pack 2

IVista Icon Pack 2

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

blog tasarımında 'footer' denen cazibe

zur — Wed, 03 Dec 2008 20:41:00 GMT

blonuzda en alta indiğinizde içinizi karartan birşeyler oldu mu? hemen yukarı mı çıkmak istediniz? "Header Nedir" yazımızda üzerinde durduğumuz sayfa başlığı imajlarından biraz aşağılara inelim ve tasarımcıların bloglarının diplerine gömdükleri sanatsal çalışmalara bir göz atalım. her ne kadar çok önemsenmese ve dikkat edilmese de gerçekten tasarımı bir kalıba oturtmak için uygulanan pek narin hoş footerlar bunlar;

çok daha fazlası burada.

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

dur senin için google'layayım

zur — Fri, 21 Nov 2008 08:15:00 GMT

Let Me Google That For You (dur senin için google'layayım). sizi sorularıyla bunaltanlara gönderebileceğiniz manidar bir cevap. kendileri herhangi bir şeyi aramaya üşenip, size soruyorlarsa, bu siteye girin, aramanızı yapın ve altta oluşan linki sizi rahatsız eden insana gönderin. linke tıklayan kişiye göstere göstere seçtiğiniz terim için google araması yaptırılıyor ve "bunu yapmak çok mu zordu?" deniyor.

örnek arama için burdan!

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

21 yeni web servisi

zur — Mon, 13 Oct 2008 19:14:00 GMT

atmail php ile yazılmış, sade ve güzel, ajaxlı açık kaynak kodlu bir mail client. demosu için

Graphsy web üzerinden yeni bir grafik çizme servisi. İhtiyacınız olan tek şey bir web browser. Şimdilik alpha yayınında ve her geçen gün yeni özellikler ekleniyor.

Fx: effect generator

Fx online flash tabanlı efekt üretgeci. bu üretgeç ile fotoğraf slaytları (yaklaşık 15 farklı efekt), yazı efektleri (15 örn), introlar (7 örn.), bannerlar (7 örn), kutlamalar, butonlar, kaydırmalı animasyonlar, efektler (kar, gece yıldızları, disko zemini) ve video (isterseniz eski stilde (çizgili) üretebilirsiniz. Ayrıca editöründe yazı, fotoğraf, şekil, kaydırma çubuğu, youtube'dan video ekleyebilme imkanı var. Publish diyerek, hızlı posta bölümünden MySpace, Friendster, Facebook, Orkut, Bebo, Hi5, Piczo, Xanga, MiGente gibi sitelere posta yapabilirsiniz. ya da isterseniz javascript veya javascript ve Fxml kodları olarak alabilirsiniz.

PlanningWiz3: Online oda planlayıcısı. odanızın ebatlarını giriyorsunuz, daha sonra,
mobilya kısmından bir kategori seçerek (Aile odası, salon, ev sinema sistemi, çocuk odası, yemek odası, mutfak, ev ofisi, bahçe vs...) odanızı yerleştiriyorsunuz.

Ayrıca hazır ev planları da var. bir zemini seçerek onu ahşap yapabiliyorsunuz (bolca çeşidi var).
yine kapılar, duş kabini, pencere vs... eklemeler yapılabiliyor.

podipodi kutusunu web sitenize değişik fonksiyonlar katmak için kullanabilirsiniz. bu kutuyu sitenize ekledikten sonra shift space tuş kombinasyonundan sonra bir metin girdisi isteniyor. buraya yazabileceğiniz komutlar ve yapacağı işlevler şöyle:
Shift Space: Open/Close Podipodi box
ESC: Close Podipodi box ve açık olan bütün servisleri kapatır.
calculate [expression]: basit matematiksel işlemleri hesaplamak için.
clocks: Italya, Amerika ve Japonya'daki saatleri Google'ın saatlerinden gösterir.
credits: web site credits
date: bilgisayardaki zamanı güzel bir takvim şeklinde gösterir.
find [text]: Sözkonusu sayfada arama yapmayı sağlar. Aranan kelime renklendirilir.
flickr [terms]: Flickr'da fotoğraf aramayı sağlar.
google [terms]: google'da arama yapmayı sağlar.
google images [terms]: google'ın görsellerinde arama yapmayı sağlar.
help: söz konusu site için yazılabilecek komutlar
info: site hakkında ayrıntılı bilgi
open [section]: Sitenin bir bölümünü açmayı sağlar.
say [words]: yazdığınız kelimeleri gösterir.
send comment: site sahibine yorum gönderir.
sitemap: site haritası
tell a friend: arkadaş davet etmeye yarar.
track my ip: IP address, hostname, proxy server, country name, Internet service provider görüntüler.
twitter: Twitter hesabındaki son 20 durumu gösterir.
weather: lokal hava durumunu gösterir (bende çalışmadı).
yahoo [terms]: yahoo'da arama yapmayı sağlar.
yahoo images [terms]: yahoo görsellerinde arama yapmayı sağlar.
youtube [terms]: youtube üzerindeki videolarda arama yapmayı sağlar.

comfypage, ücretsiz online web site oluşturucu. örnekler için

mutapic, online resim, grafik üretgeci.

mixxt: kendi sosyal ağını kurmayı sağlar. türkçe dil desteği de var.

deyey; isim kartı oluşturucu.

10-

ourbania; yapıların ansiklopedisi, wikipedia'sı.

11- mimoa; modern mimarlıkla ilgili olanlar için.

12-

designerpages; mimar ve tasarımcı sayfaları.

13-

maxtango: E-card'ınızı yükleyin, herkesle paylaşın.

14- pixelnovel; Fotoğraflarınızı Flickr'a atmak için Adobe Photoshop plugin'i.

15-

jukepix ile sevimli fotoğraflar oluşturun!

16-

frenzoo ile kendi 3 boyutlu karakterinizi oluşturun.

17-

idiomag; your magazine.

18-

subhub: kendi web sitenizin içeriğinden para kazanmanızı sağlayacak bir site.

19-

icharts.ne: grafik hazırlama ihtiyacınızı karşılayacak bir site. xls dosyasından veya el ile bilgi girişi yapılabiliyor. Ayrıca birçok kategoriye dağılmış halde diğer kişilerin hazırladığı grafikler bulunuyor.

20-

clutterme ile saniyeler içinde web sayfası oluşturun.

21-

cli.gs : kendi adresi de epey kısa olan bir istatistikli link kısaltma servisi. kısa domainlerin hepsi alınmışken, herhalde en kısa bağlantı oluşturanladan biri olacak burası.

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

Youtube'da 15 Harika Webmaster Videosu

zur — Mon, 13 Oct 2008 13:14:00 GMT

Herkesin eğlence aracı olarak gördüğü youtube'da gayet işe yarar videolara rastlamak ve bilgi elde etmek mümkün.Şimdi size SEO ve site yapılandırması hakkında 15 kaydadeğer bilgi deposu video sunacağım. (youtube'a rahat erişim için şu yazıyı ve yorumlarını inceleyebilirsiniz.)

Kaynak

Bu yazı zur 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 güzel 100 blog tasarımı

zur — Tue, 23 Sep 2008 06:25:00 GMT

Hongkiat benim gibi blog tasarımıyla ilgili ilham almak için bütün gün blogdan bloga gezinenler için güzel bir liste hazırlamış. En güzel 100 blog tasarımının sıralandığı listede, daha önce Smashing Magazine listelerinden gözümüzün aşina oldukları varsa da, kendi keşfettikleri harika tasarımlar da var. İşte bir kaç örnek:

Lucy Blackmore

Narfstuff

Studioracket

Tehcpeng

Larissa Meek

Listenin geri kalanı için tıklayın.

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

Freelance çalışanların profillerini sergileyebileceği 17 adet web sitesi

zur — Sun, 27 Jul 2008 20:54:00 GMT

Freelancer olarak çalışanlar iş bulmak için farklı yollara başvururlar. Burada belirtilen sitelerde profilinizi ve yaptığınız çalışmaları tanımladıktan sonra ziyaretçiler portfolyo sitenizi ziyaret ediyorlar. Liste şu şekilde:

1.Behance Network

Behance network'de profilinizi oluşturduktan sonra çalışmalarınızı sergileyebiliyorsunuz. Ayrıca diğer profosyonel tasarımcılarla tanışabiliyorsunuz.

2. Flickr

Flicker kullanıcıların kişisel fotograflarını sergilediği, tasarımcı grupların sıklıkla kullandığı ve çalışmalaranı internete sunduğu en önemli kaynaklardan birisidir.

3.Virb

Virb kullanıcılarının büyük kısmı müzikle ilgilenirler fakat birçok tasarımcının profili bu sitede yer almaktadır. Yaratıcılığınıza bağlı olarak sayfayı özelleştirebilirsiniz.

4. Carbonmade

Carbonmade internette portfolyonuzu göstermeniz için hazırlanmış bir site. Hesap oluşturarak çalışmalarınızdan birkaçını yükleyebiliyorsunuz. Ücretsiz ve ücretli hesapları mevcut.

5. deviantART

DeviantART 8 yıldır birçok sanatçının çalışmalarına ev sahipliği yapan ve gün geçtikçe gelişen bir web sitesi. Üye olduktan sonra çalışmalarınızı yükleyebiliyorsunuz.

6. Twitter

Twitter size çalışmalarınızı sunmanıza imkan tanımaz fakat bu siteden diğer tasarımcılarla iletişim kurabilir, sitenize veya blogunuza link verebilirsiniz.

7. illyPads

illyPads grafik tasarım ve çizimlerinde uzmanlaştıysanız tam size göre bir site.

8. LogoPond

Logopond illypads'in kurucuları tarafından işletiliyor ve logo tasarımcılarına hizmet veriyor.

9. CSS Globe

Css globe Üye hesabınızı oluşturuken biyografinizi girip, sitenize link verebiliyorsunuz. Çalışmalarınızı sergileme şansınız yok.

10. Guru

Guru freelancerların iş bulabileceği en önemli sitelerden birisi. Profil oluşturarak daha fazla müşteri elde edebilirsiniz.Listenin devamına buradan ulaşabilirsiniz.

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

Freelance çalışanlar için iş bulma rehberi

zur — Fri, 08 Aug 2008 13:29:00 GMT

Henüz ülkemizde üvey evlat muamelesi gören freelance geliştiriciler için yurtdışında iş bulma imkanları oldukça yüksek.Hele bir de işveren ve geliştirici kaynaşmasını sağlayan platformların gerçek anlamda yaptıkları etkileşimler serbest çalışanlar için bulunmaz nimet sayılabiliyor.

Okulu bitirdiniz ve yoğun iş temposuna atılmadan kendi kendinize bişeylermi yapmak istiyorsunuz? yada sabah 9 akşam 6 monoton mesaiden sıkıldınızmı ? birde gecesi gündüzü belli olmayan ofis köşelerinde sabahlayan biri iseniz , kendi düzeninizi oluşturmanın zamanı gelmiş demektir.

freelance iş imkanları bulma yönünde en gelişmiş site olarak karşımıza çıkıyor odesk.Saat başı ücretlendirme sistemiyle çalışılan sitede ufak bi yazılım ile işveren/freelance dev. arasında bir köprü kuruluyor rahatça mülakata girilebiliyor.ayrıca işveren bu yazılım sayesinde sizin masaüstünüzü görebilir ve sizde screenshot yollayabilirsiniz. yazılım geliştiricinin kaç saat projenin üzerinde çalıştığını logluyor ve tutarı işverenden alıp size veriyor.ücretleri mastercard kullanarak alabilirsiniz.tabi işi alırken saat ücretinde anlaşmalısınız yada teklif verirken belirli bir ücret koymalısınız.Müşteri memnuniyeti sayesinde oy toplayabilir ve aramalarda üst sıralarda çıkabilirsiniz. sitede 3 yıllık projelerden 2 saatlik projelere kadar geniş bir yelpaze bekliyor geliştiricileri.

odesk e alternatif olarak elance'yi gösterebiliriz.Lakin incelediğinizde sizde burdaki iş imkanlarının daha fazla olduğunu görebilirsiniz.Ayrıca ödeme koşullarıda oldukça geniş.

Aparatlar

Uzmanlığa göre maaş ortalaması

iş trendleri

saat ücretinizi hesaplayın

freelance için para kazanma yolları

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