bildirgec.org - 11 - beğendikleri

50+ video veya resim anlatımlı origami dersi

11 — Thu, 11 Jun 2009 09:03:00 GMT

origami, kağıt katlama sanatına verilen isim olmakla birlikte popüler ve oldukça etkileyici bir sanattır. yüzlerce yıllık bir geçmişe dayanan origami, çeşitli örnekleri ile bir çok kez karşımıza çıkmıştır. ve bir çoğumuz en azından basit bir origami çalışması (örneğin kurbağa) elde etmiş ya da elde etmeye çalışmışızdır.
bu bildiride origamiyi öğrenmek ve çeşitli origami örneklerini yapmak isteyenler için videolu ve resimli anlatım ile sunulan origami dersleri bulunmakta. hem de oldukça anlaşılabilir ve kolay bir anlatımla sunulmuş olan dersler. bu eşsiz origami ders ve tekniklerini bir arada bulabileceğiniz bu yazı ile o hep ilgi ile baktığınız muhteşem origami örneklerini artık siz de yapabileceksiniz.
ilk olarak bu derslerin en iyisiyle başlayalım:

14 muhteşem video anlatımlı origami dersi

dersler arasında; ilk kısımda penguen, kutup ayısı, fok, albatros, deniz gergedanı, deniz kırlangıcı, buz dağı diğer kısımda, kurbağa, ördek, köpek, Zümrüdüanka, nilüfer çieği, kelebek ve yarasa origami anlatımları bulunmakta. bu çok çeşitli ve kolay anlaşılır video dersleri ile mükemmel bir arşiv.

13 adet kolay anlaşılır origami dersi (resimli anlatım)

sitede; kutu, t-shirt, kurbağa, kuğu, kalp, yengeç, küp, zarf ve çeşitli uçak anlatımları bulunuyor. anlatımlar resimli ve kolay anlaşılır bir şekilde aşama aşama sunulmuş.

kanat çırpan kuş yapımı

animasyonla anlatılan bu örnekte kanat çırpan bir kuş elde ediyoruz. gerçekten oldukça yaratıcı ve çok eğlenceli.

muhteşem anlatımlı origami örnekleri arşivi

siteden bir örnek

sitenin sol yanında bulunan alanlardan (hayvanlar, bitkiler, uçaklar, kuşlar, vb.) istediğiniz origami örneğini seçip resimli anlatımına ulaşabileceğiniz arşiv niteliğinde eşsiz bir kaynak.

siteden başka bir örnek

folding trees origami

siteden bir örnek

sitede yıldız, ağaç, sepet, cd kutusu, kitap, çiçek vb. oldukça çeşitli ve güzel örneklerin origami anlatımları bulunmakta.

onlarca origami örneği (resimli anlatım)

siteden bir örnek

üç başlık altında toplanan onlarca anlatım mevcut. hayvanlara ait origamiler, bitkilere ait olanlar ve diğer örnekler. uygulaması kolay anlatımların bulunduğu güzel bir kaynak.

ve origamiyi artık yemek masanıza da taşıyabilirsiz. burada peçetlerle yapılan çeşitli origami örnekleri yer almakta.
tüm bunlara ek olarak şurada, oldukça sıradışı örnekler bulunmakta.

siteden bir örnek

fakat anlatım değil de sadece örneğe ulaşılırken elde edilen katlama çizgileri paylaşılıyor.

son olarak origami ile ilgili şu yazılar da ilginizi çekecektir:

|diğer yazılarım|

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

Sitenize Eklemeniz İçin 5 Jquery ve Ajax Sosyal İmleme Widget Dersi

11 — Thu, 21 May 2009 15:33:00 GMT

Sosyal imleme sitelerinin popülerleşmesi ve kullanıcı sayılarının artması webmaster'lar için çok iyi bir fırsat oluyor. Sitenizde bulunan içerikleri sosyal imleme sitelerine ekleyerek daha fazla ziyaretçi kazanabilirsiniz.

Aşağıda Jquery ve Ajax tabanlı widget hazırlama dersleri bulunmaktadır.

1 - jSocialize -bookmark widget

2 - Jquery-Bookmark

3 - tagTo jQuery Plugin

4 - jQuery - Share it

5 - Punchcard Manual using jQuery

kaynak: devsnippets.com | dreamcss.com
diğer yazılarım

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

8 Popüler Javascript Görüntü Kırpma

11 — Thu, 21 May 2009 17:42:00 GMT

Javascript Image Cropping Scripts

Web sitelerinde kullanılan görselleri, kullanılacak alana göre boyutlandırmak ve kırpmak program bilgisi olanlar için kolay bir uygulamadır. Ancak, bazen gereğinden fazla zaman harcamayı gerektirir veya program kullanmak için ne zaman, ne de bilgi vardır.

Bu durumda ya çevrimiçi bir araç aramak gerekir (program öğrenmek daha iyi olur) veya aşağıda göreceğiniz, hotscript tarafından listelenen en fazla tercih edilen 8 javascript gibi sorunumuzu çözecek kolay scriptlere ulaşmamız gerekir.

Görselleri boyutlandırma ve kırpma işlerini kolaylaştıracak 8 javascript;

UvumiTools Crop
UvumiTools Crop, görüntü boyutlandırma ve kırpma işlemi için geliştirilen bir mootool eklentisi.

Javascript Image Cropping Scripts

Javascript Image Cropper UI
Prototype JavaScript framework ve script.aculo.us

Javascript Image Cropping Scripts

Image crop - DHTML
Görüntü kırpmak/boyutlandırmak için DHTML kullanıcı arayüzü sunar. İstenen bölgenin üzerine bir dikdörtgen sürüklenir ve kesilir.PHP sunucu üzerinde imagemagick kullanır.

Javascript Image Cropping Scripts

Marquee Tool
50 kb boyutlu zaman kazandırabilecek DHTML uygulaması.

Javascript Image Cropping Scripts

Kroppr
Ioncube Loader ve GD görüntü işleme kütüphanesine ihtiyaç duyar. Ticari kullanım için 40 $ ödemek gerekli.

Javascript Image Cropping Scripts

Lasso.Crop
Firefox, Safari, internet Explorer 6 ve 7 gibi popüler tarayıcılar ile sorunsuz çalışan, mootool betiğidir.

Image Cropping Tool

image cropper *
Yahoo! Kullanıcı arayüzü kütüphanesi (yui)

AJAX image cropper with YUI and PHP

Jcrop
Web uygulamalarına işlevsellik katan jQuery eklentisi.

Javascript Image Cropping Scripts

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

Firefox'a Jet Hızında Eklenti Yazın

11 — Fri, 22 May 2009 08:47:00 GMT

Günümüzün popüler uygulamalarının en önde gelen özelliklerinden biri de geliştiricilere sundukları API'leri ile kendi ekosistemlerini oluşturmaları. Bunun en güzel 2 örneğini Facebook Uygulamalarında ve Twitter API Uygulamalarında görmekteyiz.

Web tarayıcı alanında önemli bir yere sahip olan Mozilla Firefox'un da benzer şekilde bir ekosistemi mevcut. Geliştiriciler gerek kendi kullandıkları Firefox'u gerekse yazdıkları eklentileri web'te yayınlayarak diğer kullanıcıların Firefox'larını çok daha işlevsel hale getirebiliyorlar.

Şu anda yaklaşık olarak 12 bin eklenti ve bu eklentileri geliştiren 8 bin geliştirici olmakla beraber Firefox'a eklenti yazmak için Javascript, XUL, XML gibi dilleri bilmek gerektiğinden herkes bu eklentileri kolayca yazamamakta.

Mozilla Labs bu eksiliği gidermek ve geliştirici tabanını genişletmek için yine bir Firefox eklentisi olan Jetpack eklentisi üzerinde çalışmakta.

Bu eklenti sayesinde eğer basit bir web sayfasını düzenleme bilgisine sahipseniz (sadece HTML bilgisi ve kendi API'si dahi yeterli olmakla beraber, Javascript ve CSS desteği de mevcut), kolayca firefox'a eklenti yazabilirsiniz demektir.
Henüz deneysel aşamasında olmasından dolayı kullanımda bazı ufak sorunlarla karşılaşabilirsiniz.

Kaynak: mashable, jetpack.
Takip Et: Bildirgeç FriendFeed Twitter Facebook RSS

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

jquery ile hoş bir Hover Effect'i

11 — Wed, 22 Apr 2009 17:50:00 GMT

özellikle flash ile hazılanmış web sitelerinde imleç ile herhangi bir objenin üzerine geldiğimizde hoş efektler oluşur.flash kullanmadan hazırlanmış ve xhtml, css ve jquery ile hazırlanmış hoş bir Hover Effect'inin demosuna buradan ve eğitimine de buradan erişebilirsiniz.

kaynak: sohtanaka

[mb:mikro-bildiri]
takip edin: bildirgeç friendfeed twitter rss

Bu yazı 11 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

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

en iyi 10 jquery slider eklentisi

11 — Sat, 18 Apr 2009 07:01:00 GMT

jquery için hazırlanmış bu eklentiler ile web sayfanıza oldukça kolay ve kullanışlı slider'lar (kaydırma) ekleyebilirsiniz.

Accessible News Slider

jQuery.spinTheWheel.js

News Ticker Pro

Stinky Slider

CrossSlide

kaynak: ajaxline

takip edin: bildirgeç friendfeed rss

Bu yazı 11 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ımınızı CSS3 İle Geleceğe Taşıyın

11 — Mon, 09 Mar 2009 12:25:00 GMT

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS'nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması'nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

border-radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız:

2. Border Image

border-image

Adından da anlaşılabileceği üzere border-image, her bir nesnenin sınırları için bir görsel kullanabilmemizi sağlıyor. İlk olarak görsel, nesenin her bir köşesi için oluşturuluyor. Görselin her bir köşesi, HTML nesnesinin bir köşesine işaret ediyor. Ardından bu görsel aşağıdaki sözdizimi kullanılarak siteye aktarılıyor.

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

{border: 5px;} özniteliği sınırın genel genişliğini belirtirken ardından uygulanan her bir border-image kuralı görsel dosyasını hedefliyor ve tarayıcıya görselin o 5px genişliğindeki alanın ne kadarını doldurması gerektiğini söylüyor.

Sınır görselleri de tıpkı köşelerde olduğu gibi sınır başına tanımlanabiliyor. Bu sayede her bir sınır için farklı görseller kullanılabilmesinin de önü açılmış oluyor.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Bu özellik Firefox 3.1, Safari ve Chrome'de destekleniyor. Özellik ayrıca Blog.SpoonGraphics üzerinde de kullanılmış.

Ayrıca bakınız:

3. Kutu ve Metin Gölgeleri

box-shadow

Gölgeler: Gölge efektini hanginiz sevmiyorsunuz ki? Bu efektler bir web tasarımını doğru kullanıldığında çok güzel, yanlış kullanıldığında da çok kötü yapabilirler. Şimdi, CSS3 ile birlikte gölge efekti oluşturmak için Photoshop'a bile ihtiyacınız olmayacak. Bugüne kadar bu özelliği sitelerinde kullanmaya cesaret edenler ortaya fena işler çıkarmadılar. Özelliğin kullanımına güzel bir örnek olarak bu yıl yayımlanmaya başlayan 24 Ways websitesi gösterilebilir.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

İlk iki öznitelik gölgenin elementten ne kadar uzağa kadar esneyeceğini gösteriyor. Yukarıdaki kod örneğinde bu x ve y açıları için 10 px olarak belirtilmiş. Üçüncü öznitelik ise gölgenin bulanıklık seviyesini belirtirken son öznitelik ise gölgenin rengini tanımlıyor.

Bununla birlikte text-shadow özelliği aynı efektin metin üzerine de uygulanabilmesini sağlıyor.

text-shadow: 2px 2px 5px #ccc;

Şimdilik bu özellik Firefox 3.1, Safari, Chrome (sadece box-shadow) ve Opera (sadece text-shadow) üzerinde kullanılıyor. Örneğin kullanıldığı web sitesi ise 24 Ways.

Ayrıca bakınız:

4. RGBA ve Geçirgenlik İle Kolay Saydamlık

opacity

Web Tasarımında PNGlerin Kullanımı saydamlığı anahtar bir tasarım özelliği haline getirdi. CSS3 ile birlikte alpha ve geçirgenlik kurallarını kullanmak mümkün olacak.

rgba(200, 54, 54, 0.5);
/* örnek: */
background: rgba(200, 54, 54, 0.5);
/* ya da */
color: rgba(200, 54, 54, 0.5);

İlk üç numara kırmızı, yeşil ve mavi renk kanallarına işaret ederken son değer ise saydamlık efektini verecek olan alpha kanalını belirtiyor.

Alternatif olarak geçirgenlik kuralı ile birlikte renk ve geçirgenlik değerlerini ayrı ayrı belirtmek mümkün olacak:

color: #000;
opacity: #0.5;

Bu özellik Firefox, Safari, Chrome, Opera (opacity) ve IE7 (opacity, sorunlu). Bu özellik yine 24 Ways sitesinde kullanılmış.

Ayrıca bakınız:

5. @font-face İle Özel Web Yazıtipleri

@font-face

Web üzerinde daima güvenle kullanabileceğiniz yazıtipleri vardır: Arial, Helvetica, Verdana, Georgia, Comic Sans (hmm...) vs. Şimdi @font-face CSS3 kuralı ile birlikte yazıtipleri çevrimiçi bir dizin üzerinden çağrılabilecek ve web üzerinde kullanılabilecek. Ancak bu özellik telif hakkı sorunlarını da beraberinde getireceğinden şimdilik kullanabileceğiniz sadece birkaç yazıtipi bulunmakta.

Bu özelliğin kullanılabilmesi için gereken kod şu şekilde olmalıdır:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Ardından font-family'nin geriye kalan öğeleri de günümüzde kullanıldığı şekilde kullanılmaya devam edecektir.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; }

Bu özellik Firefox 3.1, Safari, Opera 10 ve IE7 (çok sorunlu, eğer kendinizi yeterince cesur hissediyorsanız o zaman IE üzerinde font-face'i çalıştırmayı deneyebilirseniz) üzerinde çalışıyor. Bu özelliği kullanan bir web sitesi olarak TapTapTap gösterilebilir.

Ayrıca bakınız:

Her ne kadar CSS3 halen geliştirme aşamasında olmasına rağmen burada listelenen kurallar daha şimdiden bazı tarayıcılar tarafından desteklenmektedir. Özellikle Safari'nin bu yeni özellikler için tam desteği bulunuyor. Ancak ne yazık ki, bence dünyanın en iyi tarayıcısı olmasına rağmen Safari'nin kullanıcı sayısı halen çok değil bu sebeple bu özellikleri sırf Safari kullanıcıları için eklemek, en azından şimdilik pek mantıklı bir çözüm değil. Ancak Apple'ın Mac bilgisayarlarının kullanım oranının gün geçtikçe günlük hayatımıza girmesi ile birlikte Safari'nin de kullanım oranı önemli ölçüde artacaktır.

Firefox da öte yandan İnternet kullanıcılarının %20'den fazla bir kesimini içeriyor. Daha da önemlisi, pek yakında yayımlanacak olan Firefox 3.1 pek çok CSS3 özelliğini de destekliyor. Firefox kullanıcılarının pek çoğunun tarayıcılarını güncelleyeceğini varsayarsak, bu tip yeni stilleme kurallarını destekleyen tarayıcıları kullanan kullanıcıların sayısı önemli ölçüde artacaktır.

Google Chrome ise bu yıl içerisinde yayımlandı. WebKit işleme motorunu kullanan Chrome, aynı işleme motorunu kullanan Safari ile aşağı yukarı aynı özelliklere sahip. Safari özellikle Mac kullanıcıları arasında popülerken, Chrome'nin de piyasaya giriş yapması ile Windows kullanıcıları arasında popülerlik kazanmaya başlıyor.

Yüzde bazında W3'ün tarayıcı istatistiklerine göre Kasım 2008 itibarıyla W3School kullanıcılarının %44.2'si Firefox, %3.1'i Chrome, %2.7'si ise Safari kullanıyor. Bunun diğer anlamı ise bu yeni özellikleri İnternet kullanıcılarının %50'sinin görebilecek olması. Özellikle web tasarım komünitesi içerisinde, ki bu kesim tarayıcı seçimi konusunda daha özenli davranıyor, CSS3 desteğine sahip tarayıcıların kullanım oranı %73.6'ya kadar çıkıyor (Blog.SoonGraphics'e göre).

6. Kötü yanları

Web siteniz artık pek çok güzel tasarım özelliğine kavuşmuş olabilir, ancak bu özellikleri kullanırken daima aklınızın bir köşesinde tutmanız gereken bazı kötü tarafları da yok değil:

Internet Explorer: İnternet kullanıcılarının %46'sı bu yeni özellikleri göremeyecek, o yüzden bu yeni özellikleri web sitenizin hayati önem taşıyan bölümlerinde kullanmayın. İkincil tercihlerin de CSS kodunuz üzerinde oluşturulmuş olmasına dikkat edin.
Doğrulanmamış Stil Şablonları: Bu CSS3 özellikleri henüz son hallerine ulaşmış değiller. Şimdilik bazı tarayıcıları hedefleyen etiketlerle birlikte kullanılabiliyor. Bu özellikler, CSS stil şablonunuzun doğrulanmaması ile sonuçlanabilir.
Fazladan CSS Kodlaması: Son maddenin devamı olarak her bir tarayıcıda aynı kuralı uygulamak için tarayıcıları ayrı ayrı etiketlemenin yanısıra CSS derlemesinin son kodunu da sitenize eklemek, CSS kodunuzun uzamasına yol açacaktır.
Potansiyel Olarak Berbat Kullanımlar: Tıpkı Photoshop filtrelerinin berbat kullanım örneklerine rastladığımız gibi bu yeni stilleme özelliklerinin kötü kullanımı sonucunda da ortaya berbat web siteleri çıkabilir. Özellikle gölge efekti daha şimdiden kulaklarımın çınlamasına yol açıyor. Özellikle kurumların pazarlama departmanlarının bu özelliği ne derecede kullanmak isteyebileceklerini düşünmek istemiyorum.

Kaynak: Smashing Magazine
Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın
@pinkfloyd twitter
pinkfloyd köşesi

CSS / CSS3 İle İlgili Yazdığım Diğer Yazılar

Bu yazı 11 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 api ve araçları

11 — Sat, 07 Mar 2009 15:16:00 GMT

google'ın geliştiriciler için hazılamış olduğu onlarca api ve aracı bulunmakta. Bu api ve araçlar sayesinde özellikle web projelerinize bir kaç satırlık kod ile google'ın oldukça kullanışlı servislerini ekleyebilirsiniz. Üstelik ücretsiz.
google'ın bundan kazancı ise şu: bu api ve araçlar geliştiriciler tarafından ne kadar çok kullanılırsa, google'ın interneti etkileme gücü de o derece artıyor. Bu servislerin büyük çoğunluğu aşağıda listelenmiş durumda.

servislerin isimleri (orjinal isimleri ile google'da arama yaparak daha fazla bilgiye erişebilirsiniz), linkleri, kısa açıklamaları ve bazıları ile ilgili örnek sayfa linkleri mevcut.

Tüm sevisleri sabırla inceleyip, kendi projelerinize uygun olanları seçip, bir yap-boz'u birleştirir gibi projelerinize entegre edebilirseniz oldukça güzel sonuçlar elde edebilirsiniz.

Google Account Authentication: Google servisleri ile yazacağınız uygulamalarda, kullanıcıların hesaplarına erişimi sağlamakta.
Google AdSense API: projelerinizi AdSense'e entegre edip değişik raporlar alabilirsiniz.
Google AdWords API : AdWords ile entegrasyonu sağlıyor.
Google AJAX APIs: sadece javascript ve html içeren bir kaç satır kod yazarak, web sayfanıza arama kutusu ve harita gibi dinamik içerikler kazandırabilirsiniz.
Google AJAX Feed API: ajax tabanlı bu api ile rss ve atom beslemeleri üzerinde çeşitli işlemler yaparak web sayfanıza içerik sağlayabilirsiniz. Örnek.
OpenSocial: sadece javascript ve html ile tüm sosyal sitelerde geçerli olabilecek (myspace, hi5,friendster, orkut vb.) uygulamalar yazabilirsiniz.

Orkut Developer Home: Google'ın kendi sosyal sitesi olan orkut'un kullanıcıları için sosyal uygulamalar yazabilirsiniz.
Google AJAX Language API: sonunda Türkçe'yide desteklemeye başlayan Google Translate ile web sayfanıza çoklu dil desteği sağlamakta. Örnek
Google AJAX Search API: web sayfanıza dinamik google arama kutusunu eklemenizi yardımcı oluyor. Örnek
Google Analytics: web sitenizin trafiğini görmeniz ve analiz etmeniz için.
Android: Google'ın mobil cihazlar için geliştirdiği işletim sistemi.
Google Friend Connect: Google'ın facebook ile yoğun rekabet yaşadığı bir uygulama.web sayfanıza ekleyerek ziyretçilerinizin google,aol ve open id hesapları ile sitenize üye olup yorum yazmalarını sağlayabilirsiniz. Örnek

Google App Engine: Son zamanlarda web tabanlı projelerin geliştirilmesinde internet tabanlı platformlar(Cloud Computing) kullanılmakta. amazon.com, force.com, microsoft azure gibi platformların bu yönde birçok hizmeti mevcut.google'da App Engine ile size bir ugulama motoru sunuyor.PaaS olarakta adlandırılmakta Örnek: FriendFeed'in kurucularında bret taylor'ın blogu app engine üzerine kurulu.
Google Apps APIs: Şirketlere ve topluluklara web tabanlı birçok hizmetin (email, takvim, belgeler vb.) sunulduğu platform. SaaS olarakta adlandırılmakta.
Google Calendar APIs and Tools: Google'ın takvim hizmeti'ne entegre projeler üretmenizi sağlayan api.
Google Chart API: Çok kolay bir şekilde grafikler üretebileceğiniz bir api. Örnek
Google Checkout API: Google'ın Paypal tarzı ödeme sistemi olan Checkout ile entergasyonu sağlıyor.
Google Visualization API: Raporlarınızı görsel grafikler halinde sunabilirsiniz. Örnek

Chromium: Google'ın web tarayıcısı olan Chrome'u destekleyen bir açık kanak kodlu proje.
Google Contacts Data API: projenizin kullanıcılarının, google hesaplarındaki kişilerini yönetebilirsiniz.
Google Custom Search API: Web siteniz için arama motoru oluşturabilirsiniz. Örnek
Google Data APIs: Google servislerindeki (belgeler,blogger,takvim vb.) bilgilere erişiminizi sağlar.
Google Documents List Data API: Google belgelere erişimi sağlayarak görüntüleme ve arama yapmanızı sağlar.
Google Earth API: Google Earth'e çoğumuz hayran kalmışızdır.eğer Google Earth'ü 3 boyutlu bir görüntüleme ile web sayfanızda kullanmak istiyorsanız bu api'yi kullanmalısınız. kullanıcılarınıza uygulamayı görmeden önce bir tarayıcı eklentisi yüklemesi istenecek. Örnek

Gmail Atom Feeds: Kendi gmail kutunuzu atom-xml formatında okumanızı sağlıyor.
Google Health API: Google kullanıcılarının, sağlık bilgilerini girdikleri Google Health'e erşimi sağlıyor.
KML: Google Earth üzerinde çeşitli görsel işlemler yapmanızı sağlayan bir işaretleme dili. Örnek
Google Mapplets: Google Maps'te kullanılmak üzere mini uygulamalar yazabilirsiniz.
Gadgets API: javascript,css ve html dillerini kullanarak minik uygulamalar yazabilir ve bu uygulamaları web sayfalarına,igoogle'a,google toolbar'a ekleyebilirsiniz. Örnek

iGoogle Developer Home: igoogle'ın yeni versiyonunun ana sayfasında değişik düzenlemeler yapabiliryorsunuz.farklı gösterimleri(canvas view,profile view) deneyebilir ve OpenSocial api'sini kullanabilirsiniz..
Google Maps API For Flash: haritaları(Google Maps) flash uygulamalarınıza ekleyebileceğiniz ActionScript 3.0 tabanlı api Örnek
Picasa Web Albums Data API: Google'ın resim depolama,paylaşma ve işleme sitesi olan picasa'daki albümlere erşiminizi sağlar.
Google Sitemaps: Google'ın sitenizi sağlıklı bir şekilde indexlemesi için oluşturacağınız web sitenizin haritasını(sitemaps) ekleyebilir ve yönetebilirsiniz.
Google SketchUp Ruby API: SketchUp Google'ın 3 Boyutlu çizimler için kullanabileceğiniz programı.Bu Ruby tabanlı api ile programı kendi kullanımınıza göre şekillendirebilirsiniz.

Subscribed Links: Google'daki belli kelimeler için arama sonuçları oluşturabilir ve kullanıcıların kendi hesapları ile abone olmalarını sağlayabilirsiniz.
Google Transit Feed Specification: Google Earth, Google Maps ile entegre beslemeler yapabilirsiniz.
Google Maps API: Web sayfanıza kolay bir şekilde etkileşimli haritalar(Google Maps) ekleyebilirsiniz. Örnek

Google Static Maps API: Web sayfanıza etkileşimli olmayan, durağan haritalar(Google Maps) ekleyebilirsiniz. Örnek
V8: C++ ile Google Chrome için yazılan açık kaynak kodlu javascript motoru.
Google Web Toolkit: Ajax tabanlı uygulamalar yapabileceğiniz açık kaynak kodlu java geliştirme ortamı.
YouTube APIs: You Tube verileri ile değişik uygulamalar geliştirebilirsiniz.

Yardım Kaynakları:

Yukarıdaki api ve araçlardan başka, henüz gelişim aşamasında olanlar mencut, onlara da Google Code Labs sayfasında erişebilirsiniz.
google yakın zaman önce içinde bir çok api için örnekler bulunan "AJAX APIs Playground" aracını duyurdu.araça buradan erişerek örnek kodlar üzerinde değişiklikler yaparak api'lerin yapısını daha iyi anlayabilirsiniz.
html, javascript, css vb. konularla ilgili içinde eğitimler bulunan Google Code University'i ziyaret edebilirsiniz.
google'ın web geliştiricileri için hazılamış olduğu Google DocType ansiklopedisinden yararlanabilirsiniz.
google api ve araçları ile ilgili daha fazal bilgiye ve geliştiriciler tarafından yapılmış birçok örneğe www.programmableweb.com sitesinden erişebilirsiniz.
ingilizce kaynaklar üzerinde Google Translate ile çalışmalar yapabilirsiniz.

Sizler de Google api ve araçlar ile ilgili deneyimlerinizi ve kendi yaptığınız veya internette rastladığınız google api ve araçları ile ilgili örnekleri, yorum bölümünden paylaşırsanız daha yararlı bir bildiri olacaktır.

benim rasladığım bir örnek burada.

Bu yazı 11 tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

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

css'yi öğrendiniz. peki ya sonra?

11 — Sat, 28 Feb 2009 08:10:00 GMT

css'de uzman olmak üzere olduğunuzu mu hissediyorsunuz? sonraki adımınız ne olacak?

bir sonraki adımınızı planlamak, kariyeriniz için önemlidir. hepimizin bildiği gibi zaman para demektir ve zamanımızı en verimli şekilde nasıl harcayacağımız üzerine odaklanmamız gerekir.

bazıları ön-yüz geliştirmeye (front-end development) kendilerini adayıp belki de javascript yeteneklerini ilerletmeyi deneyeceklerdir. bazıları ise tasarım alanında kendilerini geliştirip photoshop ve illustrator, ya da flash gibi araçlara odaklanacaklardır.

yazımın devamında web'in ileri gelenlerinin bu alanda neler söylediklerini bulacaksınız.

chris coyier
burada sorulan "öğrenmem gereken bir sonraki şey ne olmalıdır" sorusu, soruyu soran kişi tarafından cevaplanmalıdır.

web üzerindeki her yetenek kullanışlıdır. eğer zamanınız varsa web'deki her yetenek öğrenmeye değer. genellikle üzerinde çalışmak istediğiniz bir projeniz ya da gerçeğe dönüştürmek istediğiniz bir fikriniz vardır. onu en iyi kılacak şey ne ise onu öğrenin. eğer ne yapmak istediğiniz hakkında en ufak bir fikriniz yoksa, o zaman javascript öğrenin.

www.css-tricks.com

david walsh
öyle ya da böyle, kesinlikle öğrenilmesi gereken şey javascript, tercihen mootools ya da jquery. css uzman olunacak mükemmel bir yetenek olmasına rağmen gün geçtikçe css ve javascript, tarayıcı desteği ve css3 yüzünden bir bütün olarak algılanmaya başlanıyor. javascript. bu konuda hiç şüphem yok.

www.davidwalsh.name

chris spooner
web tasarımının güzel taraflarından birisi de yeni şeyler öğrenmeye her zaman bir yerin olmasıdır. i̇yi bir css bilgisi ve jquery javascript kütüphanesinin temellerini öğrenmek doğal olarak gelişecektir, özellikle çevrimiçi rehberlerin de yardımıyla. jquery kodu belirli sayfa elementlerini hedeflemek için css seçicilerini kullanmakta olduğundan iyi bir css bilgisine sahip olan birisi için bu bir artı olarak algılanabilir. bazı çeşitli komutları ve efektleri oluşturduktan sonra site tasarımlarınıza bazı mükemmel görsel eklemeler yapılabilir.

öte yandan css3 ve html5'in duyurulmasına dair haberler de yer alıyor ki bunların her ikisi de yeni özelliklerle geliyor. şimdi endüstrinin bir adım ilerisinde olup işe alınabilirliğinizi arttırmak için bu yeni özellikleri öğrenmenin tam sırası.

www.blog.spoongraphics.co.uk

alen grakalic
benim önerim javascript'e geçilmesi gerektiği yönünde olacaktır. önerimin bu yönde şekillenmesinin sebebi sırf javascript'in modern web siteleri için olmazsa olmaz konuma gelmiş olmasından ziyade javascript'te uzman olduktan sonra tam bir front-end uzmanı olunmasındandır. tasarım ve css/xhtml/js kodlama yeteneklerine sahip birisi, piyasadaki tüm front-end mesleklerinde kendine yer bulabilir. bu benim başlangıçta hedeflediğim birşeydi. şimdi arabirim tasarlamaktan css kesimine, javascript kodu yazımına kadar her tür istekle karşılaşıyorum.

www.cssglobe.com

steven snell
bana göre html ve css ne tür bir tasarım yapıyor olursanız olun gereklidir. bundan sonra seçilecek şey sizin kendinizi özel olarak geliştirmek istediğiniz alana göre değişecektir. bu javascript olabilir, flash olabilir. benim için bu wordpress ve php idi. ben şimdilik bir php uzmanı olmaktan çok uzağım ancak wordpress ile php uzmanı olmanız gerekmiyor. photoshop ve illustrator yeteneklerinizi geliştirmek tercih edebileceğiniz bir başka yol olaiblir. html ve css'den sonra bence bir tasarımcı olarak gerçekten ne yapmak istediğinize bakmalısınız, zira pek çoğumuz her şeyi öğrenmek zorunda değildir.

www.vandelaydesign.com

cameron moll
ben uzun süredir mükemmel kullanıcı deneyiminin şu üç şey üzerinde geliştiğini söylüyorum: etkileşim, grafik tasarımı ve ileişim. css, etkileşimi sağlamak ve grafik tasarımını tarayıcı üzerinde canlı hale getirmek için kodu bir araç olarak kullanan bir deneyimin sunumudur.

eğer birisi bu araç üzerinde uzmanlaşırsa, ona önerebileceğim şey kullanıcı deneyimi çatısı altında anlamlı iletişimi geliştirebilecek herhangi bir yetenek üzerinde uzmanlaşmasıdır - hem kullanıcı ile arayüz, hem de kullanıcı ile bu deneyimi sunan oluşum arasındaki görsel ve işitsel iletişim.

www.cameronmoll.com

jacob gube
css'yi öğrendikten sonraki adımınız, yazdığınız kodun farklı tarayıcılar ve platformlar altında doğru şekilde çalıştırmanın yöntemlerini öğrenmektir. daha karmaşık tasarımlara indikçe, farklı tarayıcılar tarafından desteklenen css yazmanın zor olduğunun farkına varacaksınız. yeni css yazarları ile deneyimli olanlar arasındaki fark şudur: hangi kodun çalışıp hangisinin çalışmayacağının bilgisi. size şunu söyleyebilirim ki ben css'ye yeni başladığımda css kodumdaki hataları ayıklamak için sayısız saatler harcadım, ancak üzülmeyin. deneyim kazandıkça bu çok daha kolay hale gelecektir. öğrenebilmenin tek gerçek yolu deneyimden ve araştırmadan geçmektedir, bu yüzden hemen koyvermeyin.

ayrıca javascript'in (istemci taraflı betikleme) html/css'yi iyice öğrendikten sonra öğrenilmesi gereken önemli bir şey olduğunu düşünüyorum. css'yi anlamak javascript'i öğrenmenizi kolaylaştıracaktır, özellikle dom elementleri ile çalışırken.

www.sixrevisions.com

dmitry fadeev
konu gerçekten ilginç zira bir süre önce bu benim de başıma gelmişti. css/html'de uzman olduktan sonra aynı şablonları ve sayfaları oluşturmaktan sıkılmıştın ve bunun üzerine ben de yeni bir şeyler öğrenmeye karar verdim. ruby on rails'e odaklandım ve bir süre sonra çalışan bazı küçük web uygulamaları geliştirmeye başladım. eğer bir tasarımcının daha fazlasını öğrenmeye ilgisi varsa, front-end'in yanısıra back-end'e dair bir şeyler öğrenmek de oldukça faydalı olacaktır zira sorunları çözmek için başkalarına olan bağımlılığınız azalacaktır.

öğrenmeye başladığım bir diğer şey de sistem yöneticiliği oldu. slicehost üzerinden kendime bir vps (üzerinde linux os kurulu bir sanal sunucu) aldım ve veritabanı, web sunucusu, ruby, rails gibi şeylerin nasıl ssh üzerinden kurulabileceğini öğrenmeye çalıştım.

üzerinde iyi olmadığım bir şey var ise o da javascript'tir. aslında javascript'te berbatım :) kendime bu konuda bir kitap aldım ve halen okuyabilmiş değilim. mantıksal olarak javascript'in css/html'den sonra öğrenilmesi gereken şey olduğunu düşünüyorum. sadece javascript'i öğrenmekle kalmayın, jquery gibi kütüphaneleri indirin ve onların nasıl çalıştığını öğrenmeye çalışın. jquery gibi bir şey sitenizdeki dinamik elementleri bir araya getirmenizde çok yardımcı olacaktır.

dediğim gibi, web tasarımcıları php, python ya da ruby gibi bazı dilleri öğrenmeye başlamalıdırlar. karmaşık olmayan bir uygulama geliştirebilecek seviyeye kolayca geleceksinizdir ve en azından koda bakıp neler olup bittiğini anlayabilecek ve gerektiğinde bazı düzenlemeler yapabileceksinizdir. örneğin php bilmeyen bir ön-yüz tasarımcısı bir wordpress teması geliştirebilir ancak temayı düzenlerken bazı php kodlarını da temaya dahil etmeleri gerekecektir. eğer tasarımcı biraz php biliyorsa, php kodunu düzenleyip temayı bir derece daha özelleştirebilirler. pek çok programlama dilinin birbirleri ile benzer yanları da bulunmaktadır. bu sebeple birini öğrendikten sonra diğer programlama dillerini anlamanız daha kolay olacaktır.

sistem yöneticiliğinin bir diğer iyi yetenek olduğunu düşünüyorum. biraz sıkıcı ve karmaşık ama öğrenmesi zor değil. eğer bir web tasarımcısı kendi sunucularını kurmayı ve apache'yi düzenlemeyi biliyorsa, kendi sielerini çok daha kolay bir şekilde çalıştıracaklardır. paylaşımlı sunucu firmalarından bir sunucu satın almanıza da gerek yok. linode ya da slicehost üzerinden bir parça almanız yeterli. hatta bu tip firmaların hiçbir şey bilmeseniz bile size rehber olabilecek mükemmel kaynakları bulunuyor. bu sayede ayda 20$ gibi bir rakama, sadece ihtiyacınız olan yazılımların ve bileşenlerin yer aldığı gerçekten hızlı bir web sunucusu oluşturabilirsiniz.

flash? bilmiyorum :) sanırım son yıllarda css/html ve javascript'in bütünleşmesi ile insanların flash'tan gittikçe uzaklaştığını görüyorum.

www.usabilitypost.com

kaynak: sohtanaka.com

sonuç
bana göre öğrenilmesi gereken bir sonraki adım tasarımcının hedeflerine göre değişecektir. kendinize yapmak istediğiniz bir proje ya da bir fikir bulun. hiç olmadı, ziyaret etmekten büyük keyif aldığınız bir web sitesini ya da kullanmaktan bıkmadığınız bir web uygulamasını seçin ve onu oluşturmak için öğrenmeniz gereken neler ise onları öğrenmeye başlayın ve ana hedefiniz, beğendiğiniz uygulamanın ya da sitenin aynısını oluşturmak olsun. bu sayede hem çalışırken büyük zevk almış olur, hem de yeni yetenekler edinmiş olursunuz.

eğer ne öğrenmek istediğinize karar vermişseniz bugüne kadar bildirgeç üzerinde bir dizi rehber yayımladım. bu rehberler sizin için oldukça faydalı birer başlangıç noktası olacaklardır:

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

Çevrimiçi CSS Araçları Listesi

11 — Tue, 24 Feb 2009 19:38:00 GMT

Günümüzde CSS kullanmayan site sayısı gittikçe azalırken buna ters orantılı olarak gelişen CSS araçlarının sayısı da gün geçtikçe artıyor. Her yeni bir araç, CSS geliştiricilerinin projeler üzerinde harcadıkları zamanı azaltmaya ve daha verimli kodlama yapmalarını hedefliyor.

İşte tam da bu noktada Back to Essentials web sitesi, İnternet üzerindeki CSS araçlarına yönelik bir liste hazırlamış. Ben de ilgilenen bildirgec okurları için bu yazıyı yayımlama gereği hissettim. Umarım işinize yarar.

Yazıtipleri

Typetester

Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.

Em Calculator

Em Calculator, küçük bir JavaScript aracı olup genişletilebilir ve erişilebilir CSS tasarımları oluşturmanıza yardımcı oluyor. Pixel değerindeki verileri bağıl em birimlerine dönüştürüyor.

CSS Type Set

CSS Type Set sayesinde tasarımcılar ve geliştiriciler, sitelerinde kullanacakları metin bloklarının çeşitli CSS değerleri kullanıldığında nasıl görüneceğini eş zamanlı olarak görüp en doğru tercihi yapmalarına yardımcı oluyor.

Font Tester

Font Tester bir diğer ücretsiz çevrimiçi yazıtipi karşılaştırma aracı. Çeşitli CSS yazıtipi stilleri atanmış farklı yazıtiplerini yan yana karşılaştırmanıza olanak sağlıyor.

PXtoEM Conversion

Pixel değerlerini EM'e dönüştürebileceğiniz bir diğer kullanışlı araç. BODY etiketine atadığınız yazıtipi boyutunu pixel olarak girin ve site size farklı em değerlerini içeren tabloyu versin. Gerçekten kullanışlı.

CSSTXT

Metinlerinize stil atayabileceğiniz bir başka uygulama.

CSS Anahat Oluşturucuları

YUI - CSS Grid Builder

CSS Izgara Oluşturucusunun basit web tabanlı arayüzü sayesinde YUI'nin CSS dosyalarına bağlı dilediğiniz sayıda anahattı kolayca oluşturabilirsiniz.

YAML Builder

YAML tabanlı CSS anahatları oluşturabileceğiniz bir görsel anahat oluşturucusu.

iStylr

Çevrimiçi CSS Şablon Oluşturucusu.

Grid Designer

Izgaralar ve Tipografiler oluşturabileceğiniz bir araç.

CSS Oluşturucusu

Bu oluşturucusu sayesinde esnek ya da sabi genişliğe sahip yüzen sütunlu anahatlar oluşturabilirsiniz. Site 3 adede kadar sütun, başlık ve altlık içeren anahatları destekliyor. Değerler pixel, em ya da yüzde olarak girilebilir.

Drawable Markup Language

Web sitenizin kodunu neredeyse çizebilmenize olanak sağlayan bir uygulama.

CSSMate

İnteraktif çevrimiçi CSS düzenleyicisi CSSMate sayesinde CSS stilleri oluşturabilirsiniz.

QrONE CSS Designer

CSS Stil düzenleyicisi.

CSS Frame Generator

XHTML altyapınız üzerinde CSS çerçeveleri oluşturabileceğiniz basit bir araç.

XHTML/CSS Markup Generator

XHTML/CSS kodlama hızınızı ilerletmeye yardımcı olacak bir uygulama.

Sky CSS Tool

Sky CSS neredeyse hiç kod yazmadan CSS sınıfları oluşturabilmenizi sağlıyor.

CSS Creator - CSS Generator

CSS Creator, web sayfanız için bir stil seçebilmenizi sağlıyor.

CSS Grid Calculator

CSS Izgara Hesaplayıcısı'nı kullanarak sayfa anahattınızı çabucak görselleştirebilir ve çeşitli yollar kullanarak ızgaralar çizebilirsiniz.

CSS Generator

Bu araç basit bir stil şablonu oluşturabilmenizi sağlıyor.

Dynamic 3 Column Layout Generator

3 sütunlu anahatlar oluşturabilmenizi sağlayacak kullanışlı bir araç.

Construct Your CSS

WYSIWYG anahat düzenleyicisi. Semantic ve tablo kullanmadan.

Blueprint Grid CSS Generator

Bu araç, Blueprint'in grid.css, compressed.css ve grid.png dosyalarının özelleştirilebilir sürümlerini oluşturabilmenizi sağlıyor.

CSS Çatıları

Blueprint

Blueprint bir CSS çatısı olup CSS geliştirirken harcadığınız zamanı azaltmayı hedefliyor.

Yet Another Multicolumn Layout

Yet Another Multicolumn Layout (YAML), bir diğer (X)HTML / CSS çatısı olup modern ve özelleştirilebilir yüzen anahatlar oluşturabilmenizi sağlıyor. Yapısı, programlamasında son derece değişken ve son kullanıcılar için tümüyle erişilebilir.

Hartija - CSS Print Framework

Web yazdırması için kullanılabilecek evrensel CSS çatısı.

Elements

Tasarımcıların daha hızlı CSS yazabilmeleri ve daha verimli olabilmeleri için geliştirilmiş.

960 Grid System

960 Izgara Sistemi web geliştirmesi sırasında harcayacağınız zamanı, 960 pixellik genişliğe dayalı sık kullanılan ölçüler kullanarak kısaltmayı hedefliyor.

Logic CSS Framework

Logic CSS çatısı bir dizi CSS dosyası ve PHP aracından oluşmuş, web standartları ile uyumlu xHTML anahatları oluştururken geçirdiğiniz zamanı kısaltmayı hedefleyen bir uygulama.

SenCSs

SenCSs sayesinde anahat dışındaki her şey için standart CSS dosyasını kullanabilirsiniz.

Tripoli

Tripoli, HTML işleme için geliştirilmiş bir CSS standardıdır. Tarayıcı standartlarını sıfırlayıp yeniden inşa ederek, web projeleriniz için çapraz tarayıcı uyumlu bir temel üzerinde web projelerinizi inşa edebilmenizi sağlar.

BlueTrip CSS Çatısı

BlueTrip web sitesi inşa edebilmek için bir dizi stil ve yöntem sunarak, işin zaman harcatan kısmını geçip projenize odaklanabilmenizi sağlıyor.

Grids CSS

Yahoo! tarafından geliştirilen ve dört ön tanımlı sayfa genişliği, altı ön tanımlı şablon ve dört sütuna kadar alt-bölümleri içeren anahatları geliştirebilmenize olanak sağlayan bir CSS çatısı. Oldukça kapsamlı ve genişletilebilir.

Biçimleyiciler, İyileştiriciler ve Sıkıştırıcılar

Code Beautifier

Çevrimiçi CSS biçimleyicisi ve düzenleyicisi.

Clean CSS

CSS'nizi farklı sıkıştırma ayarları kullanarak optimize edebilmenizi ve biçimlendirebilmenizi sağlıyor. Bu araç sayesinde okunması daha kolay CSS kodlarına ulaşabilirsiniz.

CSS SuperScrub

Bu araç CSS'nin karmaşıklığını gereksiz içeriği silerek, önemsiz kodları kaldırarak ve geri kalan element isimlerini zeki bir şekilde gruplayarak azaltmayı hedefliyor.

Online CSS Optimizer

Çevrimiçi CSS İyileştiricisi sayesinde CSS dosyalarınızın dosya boyutunu azaltabilirsiniz.

CSS Drive Gallery - CSS Compressor

İhtiyacınıza göre değişen 3 farklı sıkıştırma ayarından birini seçerek CSS dosyalarınızı sıkıştırabilirsiniz.

Online CSS Optimizer

Bir başka çevrimiçi CSS iyileştiricisi, CSS kodunuzun dosya boyutunu azaltmayı hedefliyor.

Robson - CSS Sıkıştırıcısı

Bu CSS sıkıştırıcısı stil şablonlarına önemli değişiklikler uyguladığından ve henüz geliştirme aşamasında olduğundan, bazı CSS dosyalarında verimli çalışmayabilir.

FlumpCakes - Çevrimiçi CSS İyileştiricisi

Bu araca yükleyeceğiniz CSS dosyası işleniyor ve gereksiz tüm kodlar kaldırılarak daha temiz bir koda ulaşmanız sağlanıyor.

Format CSS Online

CSS'nizi otomatik olarak biçimlendirerek onu daha kolay okunur ve düzenlenebilir hale getirin.

PrettyPrinter

Çevrimiçi kod güzelleştiricisi.

Tabifier

Tabifier sayesinde bilgisayar kodunuzu daha okunaklı hale getirebilirsiniz.

Doğrulama

W3C CSS Doğrulama Servisi

W3C CSS Doğrulama Servisi, web tasarımcılarının ve web geliştiricilerinin CSS dosyalarını kontrol edebilmelerini sağlıyor.

CSS Analyser

Bu servis CSS dosyalarınızın doğruluğunu W3C'nin doğrulama servisi üzerinden kontrol edip, bunun yanısıra kontrast testi ve boyut testi gibi bazı farklı testleri de uyguluyor.

CSS Redundancy Checker

HTML dosyalarınızda kullanılmayan CSS seçicilerini bulmak için kullanabileceğiniz bir araç.

CSS Formları

JotForm

İlk WYSIWYG Form Oluşturucusu. Tarayıcınızı kullanarak web formları oluşturun ve yayımlayın.

Wufoo

Wufoo, web üzerinden bilgi toplamanızı kolaylaştırıyor.

FormSmarts

FormSmarts üzerinden formlar oluşturup onları yayımlayarak ziyaretçilerinizden çeşitli alanlarda bilgi toplayabilirsiniz.

FormAssembly

Web Formları Oluşturun ve sorularan verilen yanıtları toplayın.

Navigasyon

CSS Menu Builder

Web standartları ile uyumlu XHTML / CSS menüleri oluşturun.

CSS Menu Generator

CSS Menü Oluşturucusu sayesinde ortalama bir web yöneticisi, çapraz tarayıcı uyumlu web site menüleri oluşturabilir.

TabCreatr

Ücretsiz CSS Menü Oluşturucusu.

CSS Sıfırlama

Reset CSS

Sıfırlama stil şablonlarının hedefi, farklı tarayıcılar arasındaki tutarsızlıkları gidermektir. Bunlar arasında öntanımlı satır yükseklikleri, marjlar ve başlıkların yazıtipi boyutları gibi elementler yer alır.

Yahoo! UI Kütüphanesi: Reset CSS

Yahoo!'nun sunduğu bu CSS sıfırlaması da farklı HTML elementleri arasındaki tutarsız CSS stillerimini sıfırlayarak daha tutarlı web siteleri inşa edebilmenizi sağlıyor.

Master Stylesheet: En Kullanışlı CSS Tekniği

Temel bir stil şablonu.

Boş CSS Anahatları

168 Adet Izgara ve CSS Anahat Kolleksiyonu

Bu CSS anahatları tüm A sınıfı tarayıcılar için desteği içeriyor. Bunun anlamı tüm bu örneklerin Internet Explorer 6, Internet Explorer 7, Firefox, Opera, Safari ve diğerlerinde aynı şekilde görünecek olması.

42 Adet Sahte Sütunlu CSS Anahatları

53 Adet Sabit Genişlikli CSS Anahatları

___layouts

___layouts dosyası dilerseniz tam yakınlaştırma desteğine sahip ya da sabit genişliğe sahip beş adet ön tanımlı şablonu içeriyor.

The Only CSS Layout You Need

Tamamı aynı HTML dosyasını kullanarak oluşturulmuş 10 farklı anahattı ve örnek sayfalarını içeren bir anahat.

Little Boxes

Tarayıcı bazlı CSS sorunları için hileler.

Diğer Araçlar

PSD 2 CSS Online

Saniyeler içerisinde Photoshop tasarımlarınızdan dinamik web sayfaları oluşturun.

Conditional CSS

Bu araç sayesinde belirli tarayıcıları hedefleyen CSS kodları yazabilirsiniz.

CSS Evolve

Bu araç sayesinde bir web sitesinin rengi, şeması, yazıtipleri, sınırları gibi elementleri üzerinde oynayabilirsiniz.

CSS Text Wrapper

CSS Text Wrapper sayesinde bir HTML metnininin düz köşeleri olmayan bir görseli sarmalamasını sağlayabilirsiniz.

The Box Office

Yukarıdaki araçla aşağı yukarı aynı işlemi yapan bir başka uygulama.

Eğer sizin de bu listede yer almayan ancak faydalı olduğunu düşündüğünüz bir CSS aracı varsa yorumlarınızda belirtmeyi ihmal etmeyin.

Kaynak: Back to Essentials

CSS İle İlgili Yazdığım Diğer Yazılar

Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın

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