Bu makalede sizin için 2011 yılına ait tasarımdaki en kullanışlı ve en yenilikçi araçları ve kaynakları bulacaksınız. Bunların içinde çerçeveler, şablonlar, uygulamalar, JavaScript kaynakları, CSS3 animasyon araçları gibi şeyler yer almaktadır. jQuery kaynakları ve araçları ise bu makalede yer almamaktadır.
CSS Çerçeveleri ve Şablonları
1140px CSS Grid Sistemi
1140px Grid Çerçevesi, 1280px ekrana uygun şekilde tasarlanmıştır, daha küçük ekranlar için akışkandır ve belirli noktada mobil versiyon için medya sorgularını kullanmaktadır.
Columnal
Columnal, birkaç özel kod içeren sistemin karışımı olan bir CSS grid sistemidir. Elastik grid sistemi, cssgrid.net’ten ödünç alınmıştır ve bazı kod ilhamları da (ve alt sütunlar için fikir) 960.gs’den alınmıştır. Columnal, kılavuzlarınızı akıcı hale getirerek ve tarayıcı boyutunda dinamik değişiklikler yaparak (hatta genişlik yeterince az ise bir mobil stil yerleşimine çevirerek) web tasarımını kolaylaştırır.
Daha Az Çerçeve 4
Daha Az Çerçeve, uyarlanabilir web siteleri tasarlamak için kullanılan bir CSS grid sistemidir. Daha Az Çerçevenin hedefi, web sitelerini verimli olarak çoklu düzenlemelerle tasarlayabilmek ve bu düzenlemeleri sürekli hale getirmektir.
Anlamsal Grid Sistemi
Anlamsal Grid Sistemi, sütun ve sütunlar arası genişliklerini, sütunların sayısını düzenlemenizi sağlayan ve biçimlendirmenizde herhangi bir ugly .grid_x sınıfı olmaksızın pikseller ve yüzdeler arası seçenek özelliği kurulmasına yardımcı olan duyarlı bir grid sistemidir.
Foundation
Foundation, üretim kodunda hızlıca prototiplendirme ve yineleme için kullanılan çok sağlam ve esnek bir çerçevedir. 12 sütun, geleceğe yönelik grid ve işleminizi hızlandıracak pek çok önemli araç ve elemanı içerir.
Fluid Baseline Grid
Fluid Baseline Grid, tipografik standartlarda oluşturulmuştur ve akışkan sütun düzenlemeleri, taban çizgisi gridleri ve mobil öncelikli duyarlı tasarımlarını kararlı, bağımsız, agnostik araçların çerçevelerinin ilkelerini birleştirir.
İçinde CSS normalizasyonu, güzel tipografik standartlar, düzeltilmiş program hataları, ortak tarayıcı kararsızlıkları ve iyileştirilmiş kullanılabilirlikler yer almaktadır.
Skeleton
Skeleton, 17” laptop ekranında veya iPhone’da herhangi bir boyuttaki güzel görünümlü siteleri hızlıca hazırlamanıza yardım eden CSS ve JS dosyalarından küçük bir derleme sunar.
MQFramework
12 sütunluk grid baz alındığında, duyarlı MQFramework, değişik gerekliliklere uygun şekilde yapılandırılmıştır ve yeni bir projenin var olan projeye kodlardaki küçük değişikliklerle uyarlanabilmesi özelliğine sahiptir. Bir CSS dosyası, sitenizin tasarımında çerçeve dosyalarını ve bir özel stil sayfasını içeri aktarır. Sitenizi tüm tarayıcılara uygun şekilde tasarlayabilmeniz için @medya özelliğini kullanır.
Golden Grid System
Golden Grid System, duyarlı tasarım için kullanılan bir katlanan grid sistemidir. Katlanan sütunlar, elastik kolon araları, zumlanabilen taban çizgisi gridi ve Altın Gritlet ve sayfanın üst sağ köşesine buton ekleyen küçük bir script içerir. Tıkladığınız zaman, GGS grid ve 1.5em’in taban çizgisini sayfanın üstüne bindirir ve tasarlanan elemanların görsel kontrolünü sağlar.
Button CSS3 UI
Buton CSS3 UI, kolaylıkla özel buton eklemenize yarayan bir CSS3 çerçevesidir. İndirilmesi ve kullanılması gayet kolaydır: sürücünüze Buton CSS3 UI’yi indirin ve yükleyin, sonra üst bilginizde üst etiketin arasına kodu kopyalayın ve kaydedin.
Mobile Şablonlar
Mobil şablon, yükse performanslı mobil web uygulamaları yaratmak için kullanılan özel bir şablondur. A-sınıfı smartphone’lar, Blackberry, Symbian ve IE Mobil için uyumlu çapraz tarayıcı sunar. Ücretsiz olarak çevirim dışı ön belleğe kurabilir, bir medya sorgu polyfill’i ve pek çok ortak mobil WEbKit optimizasyonlarını edinebilirsiniz.
HTML E-posta Şablonu
HTML E-posta şablonu, Gmail, Outlook, Yahoo Mail gibi çok yaygın e-posta uygulamalarındaki majör oluşturma problemlerinden korunmanız için sıralama şablonu oluşturmanızı sağlar. E-posta tasarımınızı olabildiğinde gerçek formunda korumak üzere size yardımcı örnekler ve snippet’ler sunar.
CSS Araçları ve Uygulamaları
Sencha CSS3 Animatörü ve HTML 5 Animasyonları
Sencha Animatörü, WebKit tarayıcıları ve dokunmatik mobil aletler için CSS3 animasyonları yaratmanızı sağlayan bir masaüstü uygulamasıdır. Bu uygulama ile düzgün dönüşümler, gradyanlı tasarım butonları ve katıştırılmış analiz izleme kodu ile birlikte metin ve görüntü içeren animasyonlar oluşturmanızı sağlar.
prefixMyCSS
prefixMyCSS, CSS3 kodunuza ön ek ekler. Önce CSS kodunuzu yazın. Sonra kodunuzu prefixMyCSS web sitesinin birinci bloğuna yapıştırın ve prefix butonunu tıklayın. Tüm tedarikçi ön ekler kodunuza eklenir. Böylece güvenle eski kodunuzu kaldırabilirsiniz.
CSS Terminal
CSS Terminal, canlı web sayfanıza direkt olarak CSS kuralları eklemenize izin veren bir sayfa bulucudur. Hızlıca CSS geliştirme, prototiplendirme ve ayıklama olanağı sağlar.
holmes.css
holmes.css, bir sınıf ekleyerek geçersiz, erişilmez ve hatalı HTML ve HTML5 biçimlendirmesini vurgulayan bağımsız bir tanılayıcı CSS stil sayfasıdır. Holmess.css dosyası hem bir hatayı (kırmızı dış çizgi), bir alarmı (sarı dış çizgi) veya bilgi imlerinde gerekli olan eksik öznitelikler, düzeltilebilir biçimlendirmeler, onaylanmamış non-W3C elemanları, öznitelikler ve diğer benzerleri gibi bayraklar için onaylanmamış bir stili (koyu gri dış çizgi) görüntüler.
CSS Pivot
CSS Pivot, web sitelerine CSS stilleri eklemenizi ve sonucu kısa bir link ile paylaşmanızı sağlar. Web sitenizdeki yenilikleri takip etmek üzere başkalarını davet etmenizi sağlar. Web siteniz metin alanındaki URL’yi tıklayarak ulaşırsınız.
CSS Lint
CSS Lint, CSS kodunuzdaki problemlere dikkat çeker. Problemli modelleri veya işaretleri veya verimsizlikleri arayan koda bir dizi kurallar uygulayarak temel sözdizimi kontrolüyle bu işlevini yerine getirir. Bu kuralların hepsi değiştirebilir olduğundan kolaylıkla kendinizinkileri yazıp istemediklerinizi iptal edebilirsiniz.
Normalize.css
Normalize.css, tarayıcının tüm elemanlarını devamlı işler hale getiren CSS dosyasını kişisel olarak ve modern standartlara göre ayarlar. Sadece normalize edilmesi gereken stilleri hedefler (mesela varsayılan tarayıcı stilleri arasında değişiklik gösterenler). Yararlı varsayılanları koruyarak, stilleri normalize ederek, program hatalarını düzelterek, kullanılabilirliği geliştirerek ve kodların ne yaptığını açıklayarak işlevini yerine getirir.
Sprite Eşleştirici
Sprite eşleştirici, çoklu görüntüleri birleştiren bir uygulamadır ve karşılıklı dilimler için CSS konumlandırmasını oluşturur. Yükleme zamanını geliştirir kodunuzu CSS olarak verir, böylece ekstra söz dizimi yazmanıza gerek kalmaz.
Sprite Cow
Sprite Cow, arka plan pozisyonunu, sprite’ların genişliğini ve yüksekliğini kopyalanabilir CSS’nin küçük bir parçası olarak bir sprite sayfasıyla ayarlamanızı sağlayan web bazlı bir araçtır. Otomatik sprite sayfa üreticisi uygun olduğunda, Sprite İneği size optimizasyon ve sıkıştırma üzerinde kontrol olanağı sağlar. Böylece grafik uygulamalarından tüm pozisyonları ve boyutları kopyalayarak zaman kaybetmezsiniz.
Desenleyici
Desenleyici, birkaç dakika içinde arka plan desenleri yaratmanıza yardım eden bir araçtır. İşbirliği ve yeniden karıştırma için kaydedilip başkalarıyla paylaşılabilirler.
Patternify
Patternify, basit bir CSS desen üreticisidir. Grafikli web bazlı arayüzü, size istediğiniz deseni çizme olanağını sağlar ve sizin için istediğiniz CSS kodunu üretir. Grafik editörünüzü kullanmak ve 2px’den 2px’e görüntü yaratmak yerine, bunu kullanarak online olarak kendi deseninizi oluşturabilirsiniz ve base64 kodu ile birlikte başkaca bir görüntü dosyasına ihtiyacınız kalmaz.
CSS3 Modelleri Galerisi
Galeride gördüğünüz CSS modellerini tıkladığınız zaman kodları açığa çıkacaktır. Tam ekran haline getirip ayrıntılı olarak görebilir ve kendi tasarımınızda kullanmak üzere istediğinizi seçebilirsiniz.
CSS3 Biçimleri
CSS3 Biçimleri, tasarımcılar ve geliştiriciler için yararlı olan küçük bir kaynak olup CSS3 kullanarak uygulayabileceğiniz yaygın ve pek yaygın olmayan geometrik biçimleri içerir.
HTML5 Kaynakları
Modernizr
Modernizr, gelecek nesil HTML5 ve CSS3 güçlü web siteler oluşturmanıza yardım eden açık kaynak JavaScript kütüphanesidir. Elemanınıza sınıflar ekleyerek stil sayfanızda belirli tarayıcı özelliğini hedeflemenizi sağlar.
Response Javascript
Response Javascript, hafif bir jQuery eklentisidir ve tasarımcılar ile geliştiricilerin performans optimizasyonlu, mobil öncelikli karşılık web siteleri üretmeleri için araçlar sağlar. Ekran boyutları bazlı kod bloklarını dinamik olarak değiştirmek için kolay kullanımı olan kancalar ve HTML5 veri öznitelikleri ile hizmet veren görüntüler/medya için anlamsal yöntemler sağlar.
Initializr
Initializr, HTML5 şablon bazlı bir üretici olup HTML5 projeleri için size yardımcı olur. Projenizde ihtiyacınız olan isteğe göre uyarlanabilen temiz bir şablon üreterek bu işlemi yerine getirir.
oCanvas- Nesne Bazlı Tuval Çizimi
oCanvas, HTML5 Tuval geliştirmesini kolaylaştıran bir JavaScript kütüphanesidir. Piksellerle uğraşmak yerine nesnelerle çalışırsınız. Kullanımı gayet anlaşılır ve kolaydır.
Gury- HTML5 Tuval Fayda Kütüphanesi
Gury, HTML5 ve Tuval uygulamaları yaratmaya yardım etmek üzere tasarlanmış bir JavaScript kütüphanesidir. Bir tuval etiketi yaratıp onu yeniden boyutlandırabilir ve biçimlendirebilirsiniz, sonra işlenebilen nesneler ekleyebilir, bu nesneleri anime edebilir ve tek zincirli açıklamada bunu sayfanın herhangi bir yerine yerleştirebilirsiniz.
Merkür Editörü
Merkür Editörü, TinyMCE veya CKEditor gibi tam özellikli bir editördür, ama biraz farklı bir kullanım paradigması vardır. Burada sayfanın tümü düzenlenebilir durumdadır ve değişik tipteki düzenleme bölgelerine izin verir. Sayfadaki her bir bölge için ayrı bir araç çubuğu bulunur ve bilgi iletim birimleri yerine CSS’lerin uygulanabildiği blok elemanlarındaki HTML5 içerik düzenleme özelliklerine olanak sağlar.
JavaScript Kaynakları
Şeker
Şeker, yerli nesnelerle çalışan bir JavaScript kütüphanesidir ve daha az kodla çalışma olanağı sağlar. Anlaşılması ve kullanımı kolaydır. AJAX, animasyon veya DOM manipülasyonuna uygun bir çerçeve olmayıp tarayıcıya bağlı değildir.
Buzz
Buzz, yeni HTML5 işitsel elemanından faydalanmanızı sağlayan küçük ama güçlü bir JavaScript kütüphanesidir. İşitsel elemandan faydalanmanız için çok sayıda yöntem sağlayıp grup seslerin kullanımı ve bunların kontrolü olanağını sunar. Modern olmayan tarayıcılarda verimli değildir.
FitVids.JS
FitVids.Js, duyarlı geniş video embedleri için kullanılan hafif ve kullanımı kolay bir jQuery eklentisidir. Thierry Koblentz’nin Yapı İçi Oran Yöntemini kullanır ve duyarlı web tasarımları için akışkan geniş videolar sağlar.
deck.js
decks.js, modern HTML sunumları hazırlayabilmek için kullanılan bir araçtır. deck.core modülü, geçişli bölgelerin izlerini korur ve her bir bölgenin nasıl gözüktüğünü ve aralarındaki bağlantıyı belirlemek için CSS’yi bırakır.
HTML’deki Uyarlanabilir Görüntüler
Duyarlı ve akışkan düzenleme teknikleriyle birlikte kullanılan uyarlanabilir görüntüler, otomatik olarak ön bellek yaratır ve web sitenizin içerik görüntülerinin alet uyumluluğunu sağlar. Biçimlendirmenizi değiştirmenize gerek kalmadan yeniden boyutlandırma olanağı sağlar ve tüm CMS ve düz HTML sayfalarında çalışır.
Adapt.js
Adapt.js, tarayıcı sayfayı işlemeden önce hangi CSS dosyasının yükleneceğini belirleyen hafif bir JavaScript dosyasıdır. Tarayıcı yan yatırır ya da yeniden boyutlandırırsa, Adapt.js basitçe genişliği kontrol eder ve gerekli olan CSS’yi sunar.
Bootstrap
Bootstrap web uygulamalarınız ve sitelerinizin geliştirilmesini hızlandıran Twitter kaynaklı bir araç takımıdır. Tipografi, biçimler, butonlar, tablolar, gridler, izleme için kullanılan temel CSS ve HTML’i içerir.
Recurly.js
Recurly.js, açık kaynak bir JavaScript kütüphanesi olup güvenli katılım, bir kerede işlem ve fatura bilgileri güncelleme özellikleri içeren kredi kartı formu yaratmak için kullanılır.
validate.js
validate.js JavaScript formundaki hafif bir doğrulama kütüphanesidir ve form alanlarını doğrulamanızı sağlar. İsteğe göre ayarlanabilir olup tüm majör tarayıcılarda kullanılabilir (IE6’da bile).
money.js
money.js, gerçek zamanlı olarak kur dönüşümleri ve para bozdurma oran hesapları için kullanılan çok basit ve küçük bir JavaScript kütüphanesidir. Açık Kaynak Kambiyo Oranları API projesi üzerinden saat başı güncelleştirilmiş haliyle bedava olarak kullanılabilir.
apejs
ApeJS, JavaScript dili kullanarak Google Uygulamaları Motoru web sitelerini geliştirmek için kullanılan küçük bir çerçevedir. Daha başka JS çerçeveleri bulunmakla birlikte, en iyi hazırlanmışlardan biri olarak App Motorunu da kullanabilirsiniz. RingoJS ve AppEngineJS gibi tonlarca kütüphane içeren çerçeveyle uğraşmak istemiyorsanız ApeJS sizin için en uygun olanıdır.
CoderDeck
CoderDeck, Deck.js ile CodeMirror2’yu birleştiren bir kod editörüdür ve tarayıcınızda direkt olarak canlı şekilde HTML, CSS VE Javascript’i göstererek öğretir.
jwerty
Jwerty, küçük bir JS kütüphanesi olup elemanlar ve olaylar karşısında anahtar kombinasyon dizilerini bağlamanızı, atmanızı ve öne sürmenizi sağlar. jQuery, Zepto veya Ender ile uyumludur.
Ideal Forms
Ideal Forms, güçlü ve güzel online formlar oluşturmanızı sağlayan kullanımı kolay küçük bir çerçevedir. Her şey CSS ile şekillendirilebilir ve paketlenmiş üç stil içerir (safir, comix ve orman). JavaScript olmaksızın verimi düşer.
d3.js
D3, gelişigüzel bir veriyi Belge Nesnesi Modeline bağlamanızı sağlar ve ardından veri güdümlü işlemi belgeye uygular. Monolotik bir sistem sağlamak yerine D3 sorunun kaynağına çözüm getirir. Büyük esnekliğe sahip olup CSS3, HTML5 ve SVG gibi temel teknolojilerin bütün özelliklere sahiptir.
Cube
Cube, MongoDB, Node ve D3’te hazırlanmış zaman dizisi verilerini görüntülemek için kullanılan bir açık kaynak sistemidir. Küp tarih bilgili bir olay gönderdiğinizde, içsel göstergeler için birleştirilmiş ölçülerin gerçek zamanlı görüntülenmesini oluşturabilirsiniz.
Microjs
Microjs, mikro çerçevelerin ve mikro kütüphanelerin geniş bir koleksiyonu olup 2kb büyüklüğünden küçüktür. JavaScript kütüphanesinin çakısı olarak tanımlanan mikro çerçeveler, hedefe yönelik, kısa , etkili ve portatiftirler.
ACE
Ace, JavaScript’te yazılan bağımsız bir kod editörüdür. TextMate, Vim veya Eclipse gibi var olan doğal editörlerin özelliklerini, kullanılabilirliklerini ve performanslarını eşleştirip genişleten tarayıcı bazlı bir editör yaratmayı hedefler. Herhangi bir web sayfasına ya da JavaScript uygulamasına gömülebilir.
Kendo UI
Kendo UI, en son HTML5, CSS3 ve JavaScript standarlarını birleştirir, güçlü bir veri kaynağı, sürükle-bırak özelliği, şablonlar, temalar ve UI parçacıklarını içerir. Kendo UI Mobil, mobil aletler için uygulamalar ve siteler oluşturulmasına yardım eder.
Araçlar
Google Swiffy
Google Swiffy, Flash Player kullanmaya gerek kalkmaksızın aletlerde Flash içeriğini yeniden kullanmanızı sağlayarak Flash SWF dosyalarını HTML5’e çevirir. Çıkış verisi tüm Webkit tarayıcılarında çalışır.
Instant WordPress
Instant WordPress, Windows için kullanılan, tamamen bağımsız, portatif bir Wordpress geliştirme bağlamıdır. Apache web sunucusu, PHP ve MySQL kurulumları içinde oluşturulmuştur. Hızlı tema ve eklenti testi için işlevsiz ileti ve sayfalarla birlikte otomatik olarak başlar ve durur.
Mobilizer
Mobilizer, Webkit bazlı bir Adobe AIR uygulaması olup mobil web sitelerinizi, tasarım modellerinizi ve yerel HTML’leri önceden izlemenizi sağlar. Mobilizer ile herhangi bir URL’yi ziyaret edebilir, sürükleyebilir ya da yerel HTML, Flash veya görüntü dosyalarını iptal edebilirsiniz.
