bildirgec.org - electro - beğendikleri

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

electro — 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ı electro tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

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

Web Tasarımcıları İçin 10 Kullanılırlık İpucu

electro — Mon, 05 Jan 2009 12:13:00 GMT

Basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

Kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. Evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. Fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

Web tasarımcılarının günümüzde işi daha da kolay. Sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. Etiket Satırı (Tagline) Kullanın

Etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. Web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

İstatistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. Belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur.

2. Site İçi Arama Motoru Kullanın
Tıpkı etiket satırlarında olduğu gibi site içi arama da bir web sitesinde yer alan çok önemli bir elementtir. Kullanıclar bir şey aradıklarında, gözleri aradıkları terimi girebilecekleri bir alan arar.

Jacob Nielsen'in web kullanılırlık ipuçlarına göre arama kutusu, metnin kolayca görünebilmesi ve kullanılabilmesi için 27 karakter genişliğinde olmalı. Arama kutusunu sayfanın üst kısmına yerleştirin çünkü ziyaretçilerinizin gözleri F yapısına göre, yani sol üstten sağ alta doğru sitenizi takip eder.

3. Çok Fazla Grafik Kullanmayın
Tasarım elementlerinin ve grafiklerin gereğinden fazla kullanımı bir web sitesi için daima kötüdür, tek yaptıkları şey ziyaretçilerinizi yanıltmaktır. Web sitenizi geliştirmek için de tasarlayın, sadece dekore etmek için değil. Kullanılırlık açısından daha az her zaman daha verimlidir.

4. Site Haritaları (Sitemap) Kullanın
Site haritaları görece yeni bir özellik olup web sayfa navigasyonunu ve arama motoru optimizasyonunu (SEO) iyileştirir. Site haritaları esas itibariyle websitenizin sayfalarının ve mimarisinin yapısal sunumudur. Herhangi bir biçimde bir belge, ya da web sitenizdeki sayfaları listeyen bir sayfa olabilir ve genellikle içeriği hiyerarşik olarak listeler.

Son zamanlarda Google, Yahoo! ve MSN gibi arama motorları Sitemap protokolleri sunmaya başladılar. Bu protokoller web sitenizin site haritası sayfası ile aşağı yukarı aynı olsa da veriler XML biçiminde depolanır. Internet üzerinde bu belgeleri sizin vereceğiniz adres için XML biçiminde oluşturabilecek bazı araçlar bulunuyor.

5. İş Akışını Kesmeyin
İş akışı derken kullanıcının sitenizde attığı her adımdan bahsediyoruz.Örneğin form doldurmak, web sitesine kayıt olmak, kategorilere, arşivlere gözatmak vs. Bu iş akışlarını kesmeyin ve kullanıcının istemesi durumunda herhangi bir işlemi iptal etmesine izin verin. Kullanıcının bir iş akışını kesmesine izin vermememiz durumunda, kullanıcı istemese bile onu bir şeyi yapmaya zorlamış oluruz.

Bir web sayfasındaki her işlem kullanıcılar için anlaşılır olmayabilir, bu sebeple onlara açıklayıcı ipuçları ile rehberlik edin (örneğin form doldururlarken). Javascript bağlantıları genellikle iş akışlarını keserler, bu sebeple onları websitenizde kullanmanız önerilmez.

Bir diğer sık yapılan hata da ziyaret edilen bağlantıların renklerini değiştirmemektir.

6. Kolayca Taranabilir Sayfalar Oluşturun
Kolayca okunabilir web sayfaları oluşturmak, ziyaretçilerinizin sitenize olan bağlılığı, onları sitenizde tutabilmeniz ve içeriğinizi okutabilmeniz açısından önemli rol oynarlar. Kullanılırlık testleri gösteriyor ki kullanıcılar web sayfalarını okumazlar, sadece göz gezdirirler, başlıklara, koyu renkle yazılmış yazılara, öne çıkarılmış metinlere ya da listelere bakarlar.

Jakob Nielsen tarafından yapılan göz izleme deneyleri, kullanıcıların içeriği F yapı modeline göre okuduklarını gösteriyor, bunun anlamı kullanıcılar web sayfasının sol üst köşesinden okumaya başlıyorlar ve ardından gözlerini biraz aşağı kaydırarak tekrar okumaya devam ediyorlar.

Nielsen ayrıca bu okuma modelinin detaylarını şöyle listelemiş:

Kullanıcılar web sayfasının içeriğini kelime kelime okumazlar. Sadece önemli paragrafları, koyu renkli metinleri vs algılarlar.
İlk iki paragraf web sayfasında önemli yer tutar. Bu iki paragraf web sitenizi ziyaret eden kullanıcıların aradıkları bilgiyi içermek zorundadırlar.
Alt başıklar ve listeler, diğer paragraflara oranla daha dikkat çekicidirler. Bu elementleri önemli bilgileri vurgulamak için kullanın.

Gazetelerden öğrenebileceğimiz bir diğer önemli yöntem de yazarların genellikle insanların dikkatini çeken bir manşet ve ilk paragrafta yine dikkat çeken cümleler kullanıyor olmalıdır. Bu sayede okuyucuların makalenin tümünü okuma ihtimallerini güçlendirirler. İçeriği ters dönmüş piramit şeklinde organize ederler. Ters dönmüş bir piramiti hayal edin. Üstteki geniş kısım tüm makalenin en önemli bilgisini içerirken alttaki incelen kısım daha az önemli kısımları içerir.

En önemli parçaları sayfanın en üzerine, daha az önemli olanları da sayfanın alt kısmlarına yerleştirerek sitemizi organize ederken bu yöntemi kullanabiliriz, ancak hangi bilginin önemli olup olmadığını nasıl bileceğiz? Haber değerlerinin yardımı ile.

7. Yanlış Yönlendiren Kullanıcı Arabirimi Kontrolleri Tasarlamayın
Kullanıcı arabirimi (UI) kontrolleri ile web sayfa elementleri, öğeleri, widgetleri gibi kullanıcıların iletişim kurabileceği öğeleri kastediyoruz (düğmeler, açılır listeler vb.)

Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayınGenellikle tıpkı birer bağlantı gibi görünen, ancak bağlantı olmayan altı çizili metinlerle karşılaşıyoruz.

Kullanıcıların umduğu eylemi kullanmayarak, onların sitenizin çalışmadığı hissine kapılmasının ve bunun ardından da bir süre sonra sitenizi terk etmesinin önünü açmış olursunuz. UI kontrollerine yönelik bir diğer önemli kullanılırlık ipucu da tutarlılık üzerine: UI kontrollerinin tutarlı olduğuna emin olun.

Yukarıdaki resimden de görebileceğiniz üzere Yahoo!, tutarlı UI kontrol tasarımına güzel bir örnektir. Sayfadaki her sekme aynı şekilde görünür ve işler, her bir bağlantını altı fare ile üzerine gelindiğinde çizlir, her düğme aynı şekilde görünür vs.

8. Anlamlı Geribildirimler Verin
Anlamlı geribildirim bir web sitesi için önem arz eder. Bu siteniz ve kullanıcıları arasında bir iletişim kanalıdır ve geribildirimler yardımı ile kullanıcıların sitenizde neler olup bittiğini anlamasının önünü açarsınız. Diyelim web sitenizde bir hata var. Doğrudan Hata oluştu yazmak yerine neyin yanlış gitmiş olabileceğini ve kullanıcının bu hatayı gidermek için neler yapabileceğini listeleyin.

Geribildirimler her iki yönde işler. Bir kullanıcı sitenizdeki formu doldurduklarında aslında bir yandan size geribildirim yapmış oluyorlar. Kullanıcılardan aynı bilgiyi iki kez girmesini istemeyin. Örneğin bir kullanıc web sitenizin halihazırda kayıtlı bir kullanıcısı ise ve bir form doldurması gerekiyorsa, onlara adını ya da üye olurken size verdikleri herhangi bir bilgiyi yeniden sormayın, çünkü bu bilgiler zaten veritabanında ya da bir dosyada bulunuyor. Bu verileri doğrudan veritabanından alarak tüm işlemi basitleştirebilirsiniz.

9. Çok fazla Javascript Kullanmayın

Javascript ve AJAX tekniğinin gelmesi ile web tasarımcıları ve geliştiriciler karşılık verebilen ve esnek web siteleri oluşturabiliyorlar, ancak tüm bu yeni teknolojilerin de bir fiyatı var. Bizim durumumuzda bu tarayıcı tutarsızlığı. Her kullanıcının tarayıcısı en son sürüm olmayabilir ya da öntanımlı olarak Javascript aktif edilmemiş olabilir.

Bir websitesinde çok fazla JavaScript kullanarak bu kullanıcıları engellemiş oluruz. Bunun yerine daha mütevazı ve yalın Javascript kullanın.

CAPTCHAlardan Kaçının

Türkçe'si "İnsanlarla Bilgisayarları ayırt edebilmek için Tümüyle Otomatikleştirilmiş Yerel Turing Testi" (Completely Automated Public Turing Test to tell Computers and Humans Apart) olan CAPTCHA'nın adı bile karmaşık. CAPTCHA'nın en yaygın kullanım şekli bir metnin imaja edilmesi ve bu metnin ilgili alana doğru yazılıp yazılmadığının test edilerek kullanıcının gerçek bir insan mı yoksa bir spam robotu mu olduğunu anlamaya çalışmak şeklindedir.

CAPTCHAların sorunu her insan doğrulama metodu, kullanıcının beyninde karmaşık işlemleri yürütür (yamutulmuş metni anlamak, iki rakam eklemek vs).

CAPTCHAlarla ilgili bir diğer problem de farklı kültürler arasındaki tutarsızlıktır. Örneğin Çince semboller, numaralar pek çok batı dilinden ve Arapça'dan farklıdır. Çinliler CAPTCHA kullanılan web sitelerinde latin alfabesini kullanan ülkelerin insanlarına oranla çok daha zor zamanlar geçiriyorlar.

Özet

Daima web sayfanızdaki en dikkat çeken element olarak konumlandırılmış bir etiket satırı kullanın.
27 karakter genişliğinde bir arama kutucuğu oluşturun ve onu web sitenizin üst kısmına yerleştirin.
Çok fazla grafik ve tasarım elementleri kullanmayın.
Site haritası sayfası hazırlayın ve site haritası XML verisini arama motorlarına kaydedin.
Kullanıcının iş akışının önünü tıkamayın. Gerektiğinde her işlemin iptal edilebilmesini sağlayın.
Kolayca taranabilir web içeriği oluşturun ve en önemli içeriği sayfanın üst kısmına yerleştirin.
Düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayın.
Anlamlı geribildirimler sunun ve geribildirimlerin iki taraflı işlediğini unutmayın.
Daha mütevazı Javascript kullanın ve verim düşüşünün kabullenilir miktarda olmasına dikkat edin.
CAPTCHAlardan kaçının ve daha kullanışlı yöntemler kullanın.

Siz de bu yöntemlerden bir veya daha fazlasını kullanıyor musunuz? Kendi ipuçlarınızı ve görüşlerinizi yorumunuzda belirtmeyi unutmayın

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

dünyaca ünlü logolar krizden nasıl etkilenir

electro — Mon, 15 Dec 2008 11:04:00 GMT

kriz sonrası nike logo

2008 yılı büyük bunalımdan sonra karşıladığımız muhtemelen en ciddi ekonomik kriz yılı oldu. dünya borsaları bir haftada %20 kadar düştü, onlarca banka ya battı ya da hükümet veya özel kurumlar tarafından kurtarıldı.

kriz sonrası lg logo

ve birçok şirket, azalan talep sonucunda çalışanlarını uzaklaştırmaya başladı.
business pundit adlı site, bu kriz sonrası ünlü şirketlerin nasıl etkilenebileceğini ve bu muhtemel etkilenmenin logolara nasıl yansıyacağını mizahi bir yönden ele almış.
yukarıda iki tanesi bulunan 16 kriz sonrası logonun diğerleri şu şekilde:

kriz sonrası apple logo

kriz sonrası citi group logo

kriz sonrası ford logo

kriz sonrası 3M logo

kriz sonrası goodyear logo

kriz sonrası ferrari logo

kriz sonrası dow jones logo

kriz sonrası chrysler logo

kriz sonrası dell logo

kriz sonrası yahoo logo

kriz sonrası nokia logo

kriz sonrası logo

kriz sonrası xerox logo

kriz sonrası logo

[kaynak]
dilerseniz logolarla ilgili şu - ra - daki ve bura - daki diğer yazılara da bakabilirsiniz.

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

içeriği xml'den al, flash siten hafif olsun.

electro — Thu, 29 May 2008 09:42:00 GMT

google'ın içeriğimi indekslemesi falan önemli değil, ben tasarımıma bakarım arkadaş" diyen kişiler ve kurumsal firmalar büyük çoğunlukla modacılar, fotoğraf sanatçıları, mimarlık şirketleri ve reklam-tasarım firmaları olmakta. içerikten çok tasarımdaki zekanın, inceliğin, ve görsel zarafetin ağırlık kazandığı bu sitelerin oluşturulması açısından flash en uygun teknolojik olanakları içinde barındırıyor. icat olunduğu günden beri animasyon türü atraksiyonların şaşırtıcılığı, web uygulamaları ve tasarımı ile birleşerek butik diye adlandırabileceğimiz sitelerin ihtiyaçlarına yanıt verir oldu, ama bir sorunu da beraberinde getirdi; site yüklenme hızı.

özellikle ülkemizin internette adsl altyapısı sayesinde bu sorun da ortadan kısmen kalkmış olmasına rağmen, full flash ile oluşturulmuş bir sitenin açılma hızı hala ziyaretçinin sıkılmasına hatta sayfaya girmekten vazgeçmesine yolaçabiliyor. bu konuda flash programının bize sunduğu en sağlıklı çözüm; xml teknolojisi ile entegrasyon. flashın arka planında çalışan actionscript isimli kodlama sistemi, uygulamanın ulaşabileceği yerde bulunan xml dosyası ile iletişim kurarak, gerekli verileri gerektiği zaman alıp işleme sokuyor. bu sayede resim dosyası linkleri, yazılar, hatta kendi bünyesine ait kod parçacıkları bile flash dosyası içinde yer tutmayıp xml dosyasında bulunuyor ve bu da flash ile tasarlanmış sitenin olabildiğince hafif olmasını ve buna rağmen içeriğinin sınırsız boyutta olabilmesini mümkün kılıyor.

peki bu teknoloji yeteri kadar ve yaygın olarak kullanılabiliyor mu? kullanılıyor ama elbette yeteri kadar değil. işin bizi üzmeyecek tarafı sadece ülkemizde değil tüm dünyada bunun böyle olması.

internet aleminde bu ihtiyacı doyurucu seviyede karşılayacak bir siteden, myflashxml.com'dan bahsetmek yerinde olur, ki rakip olarak karşılarına dikilecek alternatiflerine rastlamak hemen hemen olası değil. vakt-i zamanında dynamicfactory ismiyle arenaya çıkıp, rakipleri arasında fazla da büyük farklılıkları olmayan hazır flash siteler şatışa sunarak, template-satar siteleri arasında yerlerini almışlardı. ta ki flash'ın mx versiyonu, xml dosyasından veriyi çekme, ve dahi bu veriyi işleyebilme mevzusunu ele alana dek. ilk olarak
"flash resim galerisi" hazır site tasarımı yaparak farklılıklarını koyan myflashxml yetkilileri, resimleri, yazıları hatta kodların kendisini kaynak dosyasına gömmek gibi bir problemin artık bulunmaması üzerine, kapasitelerini tasarımın görkemine kanalize edebildiler. tabi tasarımları kadar actionscript kod deryasının karmaşık sularında istedikleri gibi fora yelken gezebilme yeteneklerinin olduğu da açık.

Dinamik siteler, flash ile entegre edilmiş e-ticaret, içerik yönetim (CMS) , ve blog sistemleri diyerek adlandırdıkları kategoriler altında toplamışlar hazır tasarımlarını. hiçbir kategoriye uymadığını düşündüklerini de diğerleri adı altında toplamışlar ve her bir sitenin demosunu inceleme şansı tanımışlar.
flash ile entegre ettikleri blog sisteminin sade, yetersiz ve özelliksiz olduğunu belirtirken b2evolution tabanlı blog sistemini kullandıklarını görüyoruz. ayrıca e-ticaret sistemi olarak oscommerce yazılımını flash ile birleştirmeyi uygun görmüşler. içerik yönetim sisteminin ise nasıl entegre edildiği ve nasıl çalıştığı bilgilerine demolarından açıklık getirmek mümkün değil ancak teslim etmek için 15 gün süre istemeleri, üzerinde çalışıp tamamladıktan sonra mı vermeyi düşünüyorlar acaba sorusunu akıllara getiriyor.

ücreti mukabilinde indirmeye hak kazandığınız kaynak dosyasını istediğiniz gibi değiştirebilme seçeneğiniz var ama bu değişiklikleri sağlıklı bir şekilde gerçekleştirmek için konusunda uzman birinin desteğine ihtiyacınız olacak.
hiçbir program bilgisine sahip olmadan flash sitenizi oluşturun gibi bir sloganla hazır sitelerini satışa sunarken, müşterinin yapması gereken tek şey,
sitede görünmesini istediği yazıları, başlıkları, linkleri ve resimlerin bulunduğu konumun linklerini, xml dosyalarında gerekli yerlere yazmak. bu arada bizim için türkçe karakter problemi burada da yine baş ağrıtmaya devam ediyor ancak kaynak dosyasında actionscript kod bloğunun ilk satırına

System.useCodepage = true;

kod satırının eklenmesi bu derde deva oluyor. ayrıca xml dosyasının ilk satırında bulunan encoding bilgisini türkçe karakter seti olan iso-8859-9 olarak değiştirmekte fayda var.

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

35 gerçekten inanılmaz ücretsiz ikon seti

electro — Fri, 07 Mar 2008 09:12:00 GMT

Smashingmagazine yeni derlemesinde 35 farklı ikon setini ziyaretçilerine sunuyor. Bu ikon setlerindeki ikonlar sıradan ikonlardan ilk bakışta ayrılabiliyor. Oldukça detaylı görünen ikonlar tüm bilgisayar kullanıcılarının işine yarayabilecek nitelikte.

farklı ve detaylı

En ilgi çekici ikon setleriyse şöyle
Bagg & Box Telecharger Icon Pack : Oldukça detaylı ve büyük ikonlardan oluşuyor. Her amaçla kullanılabilme potansiyeli var.
HP Dock Icon Set : Siyah ikonlar oldukça çekici görünüyor. Masaüstü için tercih edilebilir.
Simplistica : Yine masaüstü için tercih edilebilecek ikon seti Simplistica anlaşılır ve basit yapıdaki ikonlardan oluşuyor.

simplistica

Bu üç set ve diğer tüm setler şu adresten izlenebiliyor. İkonların kullanım alanları yükleme adresleri ve gerekli bilgiler yine aynı sayfadan görülebilir.

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

Bilgi ihbar merkezi yasaklayacak -mı herkesi?

electro — Sat, 01 Dec 2007 08:56:00 GMT

Telekomunikasyon iletisim baskanligi bunyesinde kisa bir zaman once gundeme ve hizmete giren bilgi ihbar merkezi, web sitesinde belirttigi uzere
5651 sayılı kanunun 8. maddesi ve 5816 sayılı kanun kapsaminda hizmet vermeyi amacliyor.

ne kadar guzel buraya kadar hersey resmi, ciddi, cici. gercekten oyle mi peki?

hukukcu olmayan birinin bile gozune saplanacak bir detay var bu kanunda ;

İçeriği birinci fıkrada belirtilen suçları oluşturan yayınların içerik veya yer sağlayıcısının yurt dışında bulunması halinde veya içerik veya yer sağlayıcısı yurt içinde bulunsa bile, içeriği birinci fıkranın (a) bendinin (2) ve (5) numaralı alt bentlerinde yazılı suçları oluşturan yayınlara ilişkin olarak erişimin engellenmesi kararı re’sen Başkanlık tarafından verilir.

baskanliga bu super yetkiyi veren kanun basindan beri konu ile ilgili olan kisileri endiselendiriyordu. ihbar hattimizin, insanlarin mustehcenlik sinirlarinin birbirinden cok farkli oldugu bir toplumda* yarar mi zarar mi saglayacagini hep birlikte gorecegiz.

son olarak soguk kis gunlerinde sebze tuketimini arttirmanizi hatirlatarak aranizdan simdilik ayriliyoruz.

*ornektir, lutfen o basliga yorum yazmayiniz.

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

Paypal güvenli kredi kartını duyurdu...

electro — Tue, 20 Nov 2007 17:34:00 GMT

Paypal güvenli kredi kartı uygulamasını duyurdu. Peki nedir bu güvenli kredi kartı. Bir siteden alış veriş yapacaksınız diyelim. Ancak ödemeyi paypal hesabınızdan yapmak istiyorsunuz. Fakat o da ne! Site paypal ile ödeme kabul etmiyor. İşte bu durumda paypal'ın güvenli kredi kartı yazılımı devreye giriyor. Yazılımı önceden kurmuş olmanız gerekiyor. Yazılım görev çubuğunuza mini bir paypal simgesi yüklüyor. Ödemeyi yapmadan önce bu simgeye çift tıklıyorsunuz. Yazılım sizin için master veya visa card numarasını, son kullanma tarihini ve cw numarasını üretiyor. Bu kart bilgilerini girdiğiniz zaman ödeme otamatik olarak paypal hesabınızdan yapılıyor. Bu kadar basit. Daha detaylı bilgiye buradan ulaşabilirsiniz...

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

google arama özellikleri - 3 -

electro — Mon, 02 Apr 2007 16:03:00 GMT

daha önce bildirgeç'te yer alan google arama özellikleri serisini ilgiyle okumuşuzdur (bkz. bu ve bu)
bu yazımda biraz daha uygulamalara ve ayrıntılara ve biraz daha fazlasını anlatmaya çalışacağım.

bu özelliklerden vermediğim bazı özellikler daha vardır. bunlar kötü amaçlı olmak üzere kullanabilmektedir. bunun ismi google hacking dir.

aşağıdaki karakter dizilerinden işinize geleni google arama boşluğuna yapıştırın.
metod 1:
"parent directory " /appz/ -xxx -html -htm -php -shtml -opendivx -md5 -md5sums
"parent directory " DVDRip -xxx -html -htm -php -shtml -opendivx -md5 -md5sums
"parent directory "Xvid -xxx -html -htm -php -shtml -opendivx -md5 -md5sums
"parent directory " Gamez -xxx -html -htm -php -shtml -opendivx -md5 -md5sums
"parent directory " MP3 -xxx -html -htm -php -shtml -opendivx -md5 -md5sums
"parent directory " Sarkici adi ya da album ismi -xxx -html -htm -php -shtml -opendivx -md5 -md5sums

değişen kısım sadece /appz/ DVDRip Xvid Gamez MP3 vs. kısmı orayı aradığınız şeye göre değiştirebilirsiniz.

Metod 2 :
bir de aşağıdaki şekilde deneyin ...
?intitle:index.of? mp3
bunu şarkıcı veya albüm adını ekleyerekde yapabilirsiniz
mesela : ?intitle:index.of? mp3 turkuler

ornek 2

yine ayni yolla program bulalim...

?intitle:index.of? rar pardus

Metod 3 :
birinci yol //
aşağıdaki diziyi google arama çubuğuna yazın ...
inurl:microsoft filetype:exe
burada microsoft yerine adobe vs. firmaları veya exe yerine iso , zip gibi uzantıları yazabilirsiniz

ikinci yol //

ebook bulmak
allinurl: +(rar|chm|zip|pdf|tgz) Aradiginiz kitap

direct ornek veriyorum
allinurl: +(rar|chm|zip|pdf|tgz) windows

boylelikle windows hakkindaki pdf dosyalarina ulasabilirsiniz.

baska bir yol ile de genel olarak ebook indexler bulabilirsiniz.

+("index of") +("/ebooks"|"/book") +(chm|pdf|zip|rar) +apache

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

Domain Avcılarına Güzel Bir Kaynak

electro — Wed, 01 Nov 2006 12:56:00 GMT

Birçoğumuz bir web sitemiz olsun ister ve isim aramaya koyulur. Kimimizin projeleri vardır ve uygun bir domain arayışındayızdır. Whois sorgulama sitelerine bayılırız.Fakat birçoğumuzun başına gelmiştir. Beğendiğimiz web site isimleri kayıt altına alınmıştır ve bu defa domain arayışına kaldığımız yerden devam ederiz. Şimdi size vereceğim linkten Zaman Aşımına Ugramış Domain lere ulaşabilirsiniz. Hemde yüzlerce ve binlerce. Emin olun aralarından işe yarar anlamlı yada anlamsız bir çok domain mevcut. Her ay yeni liste ekleniyor. Benim tavsiyem https://www.wsmdomains.com/ExpiredDomains/ bu adresi sık kullanılanlar ( Yer imleri ) listenize almanızdır. Web master lar Domain avcıları ne duruyorsunuz? Bence hemen inceleyin. Ayrıntılı whois için Burayada bakmayı unutmayın :)

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