bildirgec.org - systemdown - beğendikleri

3D Studio MAX Dersleri

systemdown — Sat, 02 May 2009 14:38:00 GMT

3ds Max (daha önceki ismi ile 3D Studio Max), Autodesk tarafından geliştirilen bir 3D modelleme, Görselleştirme ve Animasyon programıdır. MSDOS ortamında çalışan 3D Studio yazılımının devamı olan 3ds Max'in son sürümü, 2009 yılının Mart ayında çıkan 3ds Max 2010'dur.
Gelişmiş eklenti desteği ve kolay kullanımı ile 3ds Max, 3D modelleme yazılımları arasında en yaygın kullanıma sahip uygulamalardan biridir. Gelişmiş karakter modelleme özellikleri ile oyun geliştiricilerinin gözdesi haline gelmiştir. Film özel efektleri, mimari sunumlar ve endüstriyel tasarım sunumları gibi alanlarda da yaygın olarak kullanılmaktadır.

Aşağıda, grafik ve animasyon çalışmalarınız için size yardımcı olabilecek, 115 3D Studio Max dersini bulabilirsiniz.

3D Studio Max Hakkında
Yeni başlayanlar için Temel Modelleme

Basic Modelling for beginners

3D Studio Max Ders 1.1

3D Studio Max Lesson 1.1

Karakterler ile ilgili Dersler
Al Pacino Heykeli

The Making of Al Pacino Sculpt

Avcı

Making of “The Hunter”

Karikatür Ördek Modelleme

Modeling a Cartoon Duck

Küçük Rodeo

Young Rodeo

lulu

The Making of Lulu

Savaşçı

The Making of Warrior

Dinazor

Dinosaur

Son şövalye

The last knight

nesneler ile ilgili dersler
Bugatti

Making of Bugatti

Çapa

Anchor Box Modelling tutorial

Uçak modeli

Create airplane model

Sandalye

Making a Chair in 3ds max

Ekmek kızartma makinesi

Making of a Toaster

Altın Pırlanta Yüzük

Golden Diamond Ring tutorial

Lastik Modelleme

Tyre Modelling

Puzzle

Making puzzles with a picture on top

Nissan 350Z

Making of Nissan 350Z

bilgisayar kasası

Computer case modelling

Küllük

Classic Ashtray

Ahşap Tabure

Wooden Stool

Diş Fırçası

Realistic Toothbrush

Logo, Sembol, Simge ile ilgili dersler
Windows Logosu

Create a Windows-Like Logo

3d ikon

How to create an icon in 3D

neon

Creating a cool neon sign

Mimarlık, binalar ve Çevre ile ilgili dersler
Sarı ev

The Yellow House

kulübe

MAKiNG OF THE OLD SHACK

Dış alanlar - 2 - 3 - 4

Exterior Scenes

Ahşap / Beton WC

Making of Wood/Concrete WC

115 3d studio max dersinin tamamının görmek için buraya tıklayabilirsiniz.

3D Studio Max dersleri için kaynaklar:
OkTutorials.com
3dm3.com
9jcg.com
Cg-india.com
3dtotal.com
3d-tutorials.com
Techtut.com
Free3dtutorials.com

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

Ücretsiz 3D Av Simülasyonu (The Hunter)

systemdown — Wed, 25 Mar 2009 15:02:00 GMT

Geçen günlerde karşılaştığım bir oyundan bahsetmek istiyorum. Oyunumuzun adı, The Hunter.

The Hunter

Şimdiye kadar gördüğüm en gerçekçi av simulasyonu daha doğrusu gördüğüm en iyi ücretsiz simülasyon.

Oyun internet sitesiyle eş zamanlı olarak bilgisayarınızda 3D olarak oynanan bir oyun. Yani oyunun sitesine üye olmak şart. Çünkü oyunu siteye login olduktan sonra çalıştırabiliyoruz. Sonrasında görevlerimizi site üzerinden alabiliyoruz.

Siteye ücretsiz bir şekilde üye olduktan sonra sizden oyunun çalışması için gerekli olan bir exe dosyası ile oyunun "clientin"i indirmeniz isteniyor. Bunun için yardımı siteye login olduktan sonra üst menüde bulunan "Help" menüsünden alabilirsiniz.

Oyunun "client"i yaklaşık olarak 370MB fakat gerçekten de oynaması çok keyifli.

Bir de oyunun istediği sistem donanımından bahsedeyim;

İntel Pentium 4 3Ghz yada AMD
1GB Ram
256MB Ekran Kartı (nVidia GeForce 7600 / Ati Radeon X1800 ya da üstü, İntel ekran kartları desteklenmiyormuş.)
Win Xp SP2 veya Win Vista.

Bunlarla birlikte oyunu oynayabilmeniz için her bilgisayarda bulunan bir adet tarayıcı gerekiyor.
Bunların da Firefox 3.0 ve üstü ya da İnternet Explorer 7 olması gerekiyormuş. (Opera, Safari ve Chrome henüz desteklenmiyormuş.)

Ve son olarak daha önceden de dediğim gibi oyunu web sayfasına bağlantılı olarak oynadığımız için (yani web sayfasından tıklayarak oyunu başlattığımız için) "Emote Launcher" programını ve oyunun Clientini indirmemiz gerekiyor ki bunları siteye giriş yaptıktan sonra "Help" menüsü altında "Install The Game" linkinde bulabilirsiniz.

Oyunun ekran görüntülerine burdan ulaşabilirsiniz.

Benim beklediğimin üstünde grafiklere sahip bir oyun. Herkeze tavsiye ediyorum. İyi eğlenceler. bu ilk yazım hatam olursa kusura bakmayın.

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

Github ile Kodlarınızı Tüm Dünya ile Paylaşın

systemdown — Mon, 09 Mar 2009 14:50:00 GMT

"Sosyal Kodlama ve Paylaşım Ağı" Github, içinde Javascript, PHP ,C , * ActionScript * Arc * * C Sharp * C++ * Clojur * Common Lisp * Eiffe * Emacs Lisp * Erlang * FORTRAN , Python , Visual Basic gibi programlama dilleri ile hazırlanmış projeleri saklayabileceğiniz, ve açık kaynak kodu komünitesi ile paylaşabileceğiniz bir servis. ücretsiz üyelik sisteminin de bulunduğu geniş bir ağ sunuyor.
Ücretsiz üye olmak isyenlere 300MB alan veriyor ve projelerinizi paylaşmanıza yardımcı oluyor. Siteye buradan ulaşabilirsiniz...

Sitedeki Programlama Dillerinin Dağılımı

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

Onlarsız Yapamayacağınız 20 Tipografi Uygulaması

systemdown — Sat, 21 Feb 2009 08:13:00 GMT

Typechart

Typechart uygulaması ile CSS kodunu incelerken aynı zamanda çeşitli web tipografi örnekleri arasında gezinebilirsiniz. Tüm tipografi stilleri arasında gezinebilir ve ilgilendiğiniz tipografinin CSS kodunu indirebilirsiniz. Eğer siz de farklı tipografi örnekleri ile ilgileniyor ancak çapraz tarayıcı uyumlu kod yazmak için saatler harcamak istemiyorsanız, bu araç oldukça işinize yarayacaktır.

CSS Type Set

Bu mükemmel araç üzerinden ilgilendiğiniz metni girebilir ve ardından yüzlerce farklı CSS tercihleri üzerinde değişiklikler ypabilirsiniz. İstediğiniz sonuca ulaştığınızda ise tek yapmanız gereken şey, sunulan CSS kodunu kopyalayıp siteniz üzerinde kullanmak.

Typetester

Typetester çevrimiçi bir uygulama olup üç adede kadar yazı tipini karşılaştırmanıza ve beğendiğiniz yazı tipine daha kolay karar verebilmenizi sağlıyor. Uygulamanın ana amacı web tasarımcılarının hayatlarını daha da kolaylaştırmak.

STC font BROWSER

Bu uygulama aracılığı ile farklı yazıtiplerini kullanarak dilediğiniz metnin ilgili yazı tipi üzerinde nasıl görüneceğini inceleyebilirsiniz.

Font Tester

Font Tester, ücretsiz bir yazı tipi karşılaştırma aracıdır. Uygulama üzerinden farklı yaztiplerini yan yana getirip karşılaştırabilir ve sonuç üzerine CSS kodları uygulayarak sonucu eş zamanlı olarak görebilirsiniz.

CSSTXT

CSSTXT, CSS ile metin blokları oluşturup onların stillerini yönetebilmenizi sağlıyor. letter-spacing, word-spacing, font-size, line-height, border, font-family, align ve color özelliklerinden birini seçmeniz mümkün.

WhatTheFont

Daha önce hiç herhangi bir basılı ya da görsel malzeme üzerinde gördüğünüz bir metinde kullanılan yazı tipinin ne olduğunu merak ettiğiniz mi? Artık bu uygulama ile bu sorun olmaktan çıkıyor. Yazı tipini öğrenmek istediğiniz metnin görselini siteye gönderin ve çok kısa bir süre içerisinde kullanılan yazı tipinin ne olduğunu öğrenin. Mükemmel!

Font Picker

Bu basit uygulama sisteminizde kurulu olan tüm yazıtiplerini gösteriyor ve üzerinde çalıştığınız proje için en uygun yazı tipini belirlemenize yardımcı oluyor.

Wordle - Güzel Kelime Bulutları

Wordle, uygulamaya sunduğunuz metin üzerinden kelime bulutları oluşturabilmenizi sağlıyor. Metin üzerinde daha sık kullanılan kelimeler, kelime bulutu üzerinde daha belirgin hale geliyorlar. Bulutunuz üzerinde farklı yazıtipleri, anahatlar ve renk şemaları kullanarak özelleştirme yapmanız da mümkün.

Typotheque - Yüksek Çözünürlüklü Yazı tipi Testçisi

Sadece site üzerinden satın alabileceğiniz yazıtipleri ile sınırlı olan bu uygulama aracılığı ile yazıtiplerinize farklı stiller uygulayabilir ve çıktısını PDF biçiminde alabilirsiniz.

Linotype Yazı tipi Bulucusu

WhatTheFont uygulamasının aksine bu uygulama bulmaya çalıştığınız ya da kullanmak istediğiniz yazı tipi ile ilgili size bir dizi soru yöneltiyor ve ardından size bazı yazıtiplerini öneriyor.

Font Burner

Font Burner web sitelerine yönelik bir iyileştirmeleri olup web sitenize kolayca yeni yazıtipleri dahil edebilmenizi sağlıyor. Web siteleri genellikle tüm bilgisayarlar üzerinde gelen yazıtipleri ile sınırlıdırlar. Font Burner işte bu sorunu ortadan kaldırarak, sitenize ekleyeceğiniz birkaç satırlık bir kodun ardından dilediğiniz yazı tipini kullanabilmenizi sağlıyor.

sIFR

sIFR uygulamasının kullandığı yöntem Font Burner ile benzerlik taşıyor. Bu kod yardımı ile siteniz üzerinde hem dilediğiniz yazı tipini kullanabilme özgürlüğüne sahip olacaksınız, hem de arama motoru optimizasyonundan, erişilebilirlikten ya da kodunuzun kalitesinden ödün vermeyeceksiniz.

Identifont

Typotheques benzeri bir uygulama olan Identifont ile birkaç soruyu yanıtlayarak çeşitli yazı tipi önerilerine ulaşabilirsiniz. Uygulama ayrıca ilgili yazı tipinin kullanıldığı örnek bir metni de gösteriyor.

TypeNavigator

İnteraktif görsel yazı tipi arama motoru TypeNavigator, özellikle kullanmak istediğiniz yazı tipi stilinin aşağı yukarı nasıl olduğunu bilen tasarımcılara ilgili stile en yakın yazı tipi örneğini sunarak yardımcı olmayı hedefliyor. Açıklama size karmaşık gelmiş olabilir ancak siteyi kullanması oldukça kolay ve anlaşılır. Girin ve kendiniz test edin.

PXtoEM Conversion

Her ne kadar uygulamanın adı pixel'den em'e dönüştürücü olsa da uygulamanın kendisi bundan çok daha fazlasını sunuyor. Sayfanın üzerinde yer alan Convert (dönüştür) düğmesine tıklayın ve ardından body yazı tipi boyutunu seçin. Site verdiğiniz bu bilgiler ışığında size tüm dönüştürme verilerini sunuyor. Ardından sayfanın en üst kısmında yer alan CSS düğmesine tıklayarak ilgili örneğin CSS kodunu alabilirsiniz.

EM Hesaplayıcı

Em Calculator küçük bir JavaScript aracı olup özellikle genişletilebilir ve erişilebilir CSS tasarımları oluşturabilmenizi sağlıyor.

Baseline Rhythm Calculator

Temel yazı tipi boyutunu pixel değerinde girin ve adından temel satır yüksekliğinizi yine pixel değerinde girin. İlgili uygulama üzerindeki metin girdiğiniz veriler ışığında otomatik olarak değişecek ve sizin için bir CSS kodunu da otomatik olarak oluşturacaktır. Sırf eğlenmek için yazı tipi boyutu kısmına 99999999 girin ve ardından font-size kutusunu bulmaya çalışın.

Fontifier

Fontifier, bilgisayarda yazdığınız yazılarda kendi el yazınızı kullanabilmenizi sağlıyor. Site, el yazınızla yazılmış bir metnin taranmış bir örneği üzerinden kullanılabilir bir yazı tipi dosyası oluşturuyor, ve siz tıpkı Helvetica ya da Arial gibi sitenin oluşturduğu yazı tipini de projelerinizde kullanabiliyorsunuz.

Font Editor Bitfont Maker

BitfontMaker uygulaması üzerinden kendi yazı tipinizi oluşturabilirsiniz. Eğer siz de bu tip benzeri yazı tipi oluşturma araçları ile haşır neşir değilseniz, kullanımı oldukça kolay olan bu uygulamayı seveceksinizdir.

Kaynak: Speckyboy Design Magazine

Web Araçları Üzerine Yazdığım Diğer Yazılar

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

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

systemdown — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

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

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

Her zaman aradığımız 29 adet CSS/Ajax/Java/Dhtml Galeri sistemi

systemdown — Thu, 05 Feb 2009 17:38:00 GMT

1 . Minishowcase
Minishowcase küçük ve çok basit bir Ajax galeri sistemi. Kullanım konusunda basitliği ile tasarımcı dostu diyebilirim. mutlaka inceleyin.

2. JonDesign’s SmoothGallery
JS dosyası sadece 16kb olan bu galeri sisteminde Jon Design birçok sitede gördüğümüz bir yapıyı bizimle paylaşıyor. Koyu renk tasarım seçmiş ve fotoğraf ağırlıklı bir tasarım anlayışına sahip tasarımcılar için birebir.

3. Ajax Photo Gallery
Birçoğumuzun bildiği Agile Gallery basit ve öz.

4. Pyxy-gallery
Bu sistem biraz eski olmasına rağmen çeşitli düzenlemeler ile tasarımınıza en iyi uygulayabileceğiniz galeri sistemlerinden birisidir.

5. Zenphoto
Online galeri çözümlerinin bence cevabı Zenphoto sistemidir. Birçoğumuzda elbet bir şekilde bu sistem ile buluşmuşuzdur:) fazla söze gerek yok.

6. Couloir.org: Resizing, Fading Slideshow Demo - AJAX Slideshow
Bu sistemi şiddetle incelemenizi öneririm. Belki biraz flash galeri sistemlerini anımsatıyor ama kullanımı ve düzenleme altyapısı okadar basit ki... imaj portfolyo ve fotoğrafçılar için en uygun sistemlerden biri diyebilirim!

7. Grey Box
Buna da şiddetle bir bakın demek zorundayım. Tasarımında çok fazla imaj külfeti olanlar için mükemmel bir çözüm olabilir.

8. LightBox 2
Yabancı gelmedi biliyorum evet, doğru hepimizin bildiği o muhteşem script.

9. Multifaceted Lightbox
Bu galeri sistemi için aslında fazla söze gerek yok, tekrarlıyorum fotoğrafçılıkla uğraşanlar için gayet başarılı bir sistem.

10. Slightly ThickerBox 1.7
Basit ve öz Light Box2 ye benzerliğiyle bilinen galeri sistemi.

11. TripTracker
Bu sistem isminden de anlayabileceğimiz gibi gezilerimiz için yarattığımız galerilere en iyi çözüm. Bunların dışında Şiddetle öneririm!

12. Slimbox, the ultimate lightweight Lightbox clone
Mootols tabanlı o güzel galerilerden biri daha.

13. Suckerfish HoverLightbox
Bu sistemi çok beğeneceğinizden eminim. Klasik fikirlerden bıkmış olanlar için ideal olabilir.

14. Suckerfish HoverLightbox Redux
Bir önceki sistemimizin farklı bir versiyonu, değişik diyebilirim :)

15. ThickBox 2.1.1
İşte bir klasik daha.

16. A Photograph Gallery
Görünüm olarak hepimizin anımsayacağı bir sistem olan A photograph gallery çeşitli görsel düzenlemeler ile güzel olabilir. CSS Tabanlı.

17. A simple CSS photo-album
İsminden zaten anlıyoruz ki ->

18. Cross Browser Multi-Page Photograph Gallery
İşte Bu! dediğim galeri sistemlerinden birisi benim çok işime yaramıştır eminim sizin de yarayacak!

19. CSS Image Gallery
Basit ve Öz.

20. CSS: Photo Showcase
Bu sistemi kullanmanızı şiddetle tavsiye ederim özellikle portfolyo sistemlerinde gayet şık olabiliyor.

21. HowerBox Image Gallery
Birçoğumuzun en az bir kere kullandığını düşündüğüm sistem.

22. Photo Scroll Gallery
Bu sistemi de sörf yaparken çok görmüşüzdür.

23. Sliding Photograph Galleries
Bu sistemi birçok kişi bir şekilde reklam ve google adsense yapısı gibi kullanıyor.

24. xImgGallery - Javascript Image Gallery & Slideshow
Kullanım açısından çok basit olan bu sistem biraz düzenleme sayesinde tasarım ile tam uyum sağlıyabilir.

25. Easy Album
Bu sistemi de birçoğumuz yakından tanıyacaktır. Çok çok basit ve kullanıcı dostu bir galeri sistemi. Basit kullanımı ile kullanıcılarınıza en iyi sunumu yapabilirsiniz.

26. Image Gal
Mini galeri diyebileceğimiz bir sistem. basit imaj gösterim sistemlerini sevenler için ideal.

27. Highslide JS
Bu sistem de hepimizin kullandığı mevcut diğer sistemler ile çok benzerlik taşıyan bir galeri sistemi. Tavsiye ederim.

28. Satellite
FlickR ile de çok iyi entegre çalışabilen bir sistem. Şu anda galiba ücretli veya üyelik gerektiriyor.

29. Dhonishow

Buna da kesin bakın derim, CMS sistemini kullanan arkadaşlarımız elbet latest photos gibi bir modülü buna uyarlayabilirler.

Kaynak : Neredeyse 2 yıldır kullandığım bu galerileri bir araya toplayan smashing magazine sitesinden kendi derlemelerim.

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

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

systemdown — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

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

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

Modern CSS'de Altın Oran

systemdown — Mon, 12 Jan 2009 17:38:00 GMT

Bir websitesini stillemek onun sadece nasıl görüneceğini belirlemek demek değildir. Bundan çok daha fazlasıdır. Bu, ziyaretçiyi nasıl daha rahat hissetirebileceğinizi, nasıl web sitenizi daha çok seveceğini ve onu nasıl daha fazla kendi evinde hissetirebileceğini tasarlamaktır.

Mükemmel tasarım ziyaretçinin web sitesini kullanmasına yardım eder ve ince bir zekayı yansıtır. Ziyaretçinin onu beğenmesi yetmez

Bir haber sitesini ele alalım. Ziyaretçi, "lezzetli" gradyanlarınıza ve seksi görünümlü yuvarlatılmış köşelerinize bakıp saatler geçirmemeli. Ziyaretçi, değerli web zamanını değerli içeriğinizi okuyarak geçirmeli. Biz ona aradığı içeriğe en kısa sürede ulaşmasına yardımcı olmalı, onu mümkün olduğu kadar çok makale okumaya teşvik etmeli, sitede daha uzun süre kalmasını sağlamalı ve sitenizi ilk kez ziyaret eden bir ziyaretçiden kalıcı bir ziyaretçiye dönüştürmeliyiz.

Tüm bunlara ulaşabilmek için sayfamızdaki her element üzerinde bir harmoni ve benzerlik sunmalıyız, küçük ve önemsiz elementlerde bile. Bunların karışımı bize arzulanan sonucu verecektir.

Harmoni. Anlamı gibi kulağa hoş gelen bir kelime. Peki anahat (layout) tasarımında buna nasıl ulaşabiliriz? Cevabı "Altın Oran".

Peki "Altın Oran" tam olarak nedir? Gelin Wikipedia'nın bunu nasıl güzel özetlediğine bir bakalım: Bir doğru parçasının (AB) Altın Oran'a uygun biçimde iki parçaya bölünmesi gerektiğinde, bu doğru öyle bir noktadan (C) bölünmelidir ki; küçük parçanın (AC) büyük parçaya (CB) oranı, büyük parçanın (CB) bütün doğruya (AB)oranına eşit olsun. Altın oranın matematiksel değeri yaklaşık olarak 1.6180339887'dir.

Bu mukayesenin kullanımı, tam harmoniyi yakalayabilmemiz için evrensel olmalıdır.

Oranı Bizim İçin İşe Yarar Kılmak

Gelin bu oranı kendi anahattımız üzerinde nasıl kullanabileceğimize bir bakalım.

İlk olarak temel kapsayıcılarımız ile başlamamız gerek. Bu basit örnekte mukayesemizi içeriğimizde bölünmüş durumda olan iki element üzerinde (main ve sidebar) üzerinde uygulayabiliriz. Bu elementlerin yüksekliği ile oynayamayacağımızdan ötürü, sadece genişliğe odaklanmamız gerekir.

Diyelim sayfamızın genişliği 960 piksel olsun ve biz bu genişliği altın oran kullanarak bölümlemek isteyelim. Ana içerik kısmının genişliği 960 / 1.62 = 593 piksel, yan bar kısmının genişliği ise 960 - 596 = 367 piksel olacaktır.

Şimdi, ana sütunlarımızın mukayeselerini bulduğumuza göre, ana tipografiyi belirlemenin zamanı geldi. Benim bazı ilişkiler için önerim:

line-height = font-size x 1.62
paragraf marjı = paragraf satır yüksekliği x 1.62/2
başlık üst-marjı = başlık satır yüksekliği x 1.62

Bu mantığı aklımızda tuttuğumuz sürece karşımıza çıkabilecek tüm mukayese ve boyut problemlerini çözmemiz mümkün.

Form elementleri içerisinde bir diğer örnek ise, input genişliğinin başlık genişliğinin 1.62 katı olması gerektiği.

Aynı oran, mükemmel olmasını istediğimiz tüm alanlarda kullanılabilr. Genişliği yüksekliğinin 1.62 katına eşit olmalıdır.

Sonuç Olarak

Pek çok insan, bu tekniğin bir ütopya olduğunu ve özellikle zaman kısıtlı projeler üzerinde çalışırken yanımızda daima bir hesap makinesi ile kodlama yapamayacklarını belirterek bu tekniğe karşı çıkabilirler. Ancak makalemizin dikkat çekmeye çalıştığı nokta bu değil. Dikkat çekmeye çalıştığımız şey, bir şeyleri bölmeye çalışırken, mümkün olduğu kadar %62 %38 mukayesesini aklımızda tutmaya çalışmak.

Fazladan Bilgi

Bir parçayı üçe bölmeye çalıştığımızda öncelikle onu ikiye (%62 - %38) böleriz ve ardından büyük parçayı alıp onu tekrar aynı mukayese yöntemini kullanarak ikiye böleriz (%62 - %38).

Daha önce yayımladığım web tasarımında altın oran makalesine de bir göz atmak isteyebilirsiniz.

Kaynak: CSS Globe

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

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

Size Sıfırdan jQuery Öğretecek 15 Kaynak

systemdown — Sun, 11 Jan 2009 11:14:00 GMT

Belki tam bir jQuery uzmanısınız. Ya ne olacak canım, John Resig'in tam kendisisiniz belki de... Ya da Bildirgeç üzerinde "Prototip", "jQuery", ve "Mootools" gibi kelimeleri görüp "Bunlar da ne ola ki?" diye hayıflanıp duruyorsunuz... Şimdi tüm bunları öğrenmenin zamanı geldi.

Bu endüstride, -özellikle günümüzde daha önce hiç olmadığı kadar-, tasarımcılar kodculara, kodcular da tasarımcılara dönüşüyor... Bir geliştiricinin görevi SADECE ön ya da arkaplan işlerini yürüten kod yazmak olmaktan çıkıyor. jQuery işte bu aradaki mesafeyi kapatmaya yardımcı olan bir JavaScript kütüphanesi. JavaScript erişilemez bir yetenek değil. Daha önce yayımladığım size sıfırdan PHP öğretecek 25 kaynak yazısının site kullanıcıları tarafından çok tutulan bir yazı olduğunu gördükten sonra nettuts üzerindeki benzer bir yazıyı da jQuery dersleri için yayımlamayı uygun gördüm. Bu makalede daha önce hiç jQuery üzerinde çalışmamış geliştiricilere jQery kütüphanesini öğrenmelerine olanak sağlayacak 15 kaynağı listeleyecek ve ilgili kaynaklar hakkında bilgi vereceğim. Eğer bugüne kadar bu kütüphaneye herhangi bir nedenden ötürü korkup yaklaşmamışsanız, şimdi ona yaklaşmanın tam zamanı. Ne kadar kolay olduğuna inanamayacaksınız.

jQuery de ne ola ki?
jQuery.com'a göre jQuery hızlı ve öz bir JavaScript kütüphanesi olup HTML belgelerinizi olayları işleyebilecek, animasyonlar yürütebilecek ve web sayfalarınıza Ajax etkileşimleri dahil edebilmenizi kolaylaştırır. jQuery, bugüne kadar JavaScript yazma şeklinizi geliştirmek için tasarlanmıştır.

Daha basit anlamı ile jQuery, daha önce 10 satır yazdığınız JavaScript kodunu iki satırda yazmanıza olanak sağlayan bir kütüphane! Geriye kalan sekiz satırın en verimli şekilde başkaları tarafından halihazırda yazıldığını ve bu kodun da JavaScript çalıştırabilen tüm modern tarayıcılarda yürütülebildiğini düşünün. Daha jQuery'i derinlemesine öğrenmeden bile zengin formlardan Flash gibi menüler oluşturabileceksiniz. Bir başka iskeleti daha öğrenmek istemiyorum demeyin. Aşağıdaki kaynaklar size bu yolda adım adım rehberlik edeceklerdir.

Neden diğerlerini değil de bu kütüphaneyi kullanmalıyım?
Sonuç olarak bu sizin seçimiz. Her bir iskeletin (framework) kendine özgü avantajları vardır. Ancak jQuery'nin günümüzün en popüler JavaScript iskeleti olmasının ardında bazı nedenler yatıyor.

Birden fazla tarayıcı ile uyum. Her bir JavaScript ikmali sırasında web geliştiricilerinin önemli bir zamanını, geliştirdikleri betiğin farklı tarayıcılar üzerinde beklendiği gibi çalışıp çalışmadığını test etmesi beklenir. Ne şans ki jQuery kütüphanesi bu tarayıcı uyumsuzluklarını gideriyor ve geliştiricilere kendi kodları üzerinde daha fazla zaman harcayabilmelerine olanak sağlıyor.

CSS Seçicileri. CSS sözdizimlerini kullanarak, geliştiriciler halihazırda kullandıkları bilgilerini belgelerine kolayca dahil edebilirler. CSS 3 ve XPATH seçicilerinin de desteği ile, jQuery sayfanızdaki elementleri kullanmak için mükkemel bir mekanizma sunuyor.

Zincirleme. jQuery kendi metodları için "zincirleme" (chaining) adı verilen bir yöntem kullanır. Bir jQuery nesnesi üzerinde bu yöntemi çalıştırdığınız her zaman, ilgili yöntem aynı jQuery elementini çalıştırır. Bu nedenle de her bir yöntem için seçicilerinizi yeniden yazmanız gerekmez. Tıpkı ".NET" tarzındaki bir özelliği kullanarak daha küçük dosya boyutlarına sahip ve kolay okunabilen kodlar yazabilmenizi sağlar.

Eğer merakınız iyice arttıysa, çok güzel! Hemen başlayalım.

Adım 1: Kütüphaneyi İndirin
Bu yolculuktaki ilk durağınız kütüphaneyi bilgisayarınıza indirmek olacaktır. jQuery.com'u ziyaret edin ve "Download jQuery" bölümüne gidin. Listedeki bağlantılardan birine tıklayarak kütüphaneyi bilgisayarınıza indirin. Daha sonra indirdiğiniz .js dosyasını HTML belgenize dahil etmeniz gerekecek.

CSS-Tricks.com: jQuery'e Giriş: Bu jQuery eğitim videosunda, CSS-Tricks websitesinden Chris Coyier, jQuery'i web sayfanıza nasıl dahil edebileceğinizi ve birkaç özelliği nasıl yazabileceğinizi gösterecek.
Digital-Web.com: jQuery: Başlangıç Kursu: Kod yazmayı bilen web tasarımcıları için jQuery'e giriş kursu.
Slideshare.net: "30 Dakikada jQuery Öğrenmek": Eğer slayt gösterilerinden hoşlanıyorsanız, bu ders size jQuery kullanarak nasıl slayt gösterileri oluşturabileceğinizi ve aynı zamanda size jQuery öğretmeyi hedefliyor.

Adım 2: İlk Fonksiyonunuzu Oluşturun
jQuery'i öğrenme aşamanızın daha ilk birkaç dakikasında kendi fonksiyonlarınızı oluşturmaya başlayacaksınız. İlk durağınız John Resig'in giriş maklesi "jQuery Nasıl Çalışır?" olmalı. Resig, web uygulamalarınız üzerinde kullanacağız pek çok kolay anlaşılır yöntemi anlatacak. Anlatacakları arasında sınıf ekleme ve kaldırma, zincirleme ve "document.ready" yöntemini çağırmak yer alıyor.

jQuery.com: "jQuery Nasıl Çalışır?": Bu giriş makalesinde John Resig (jQuery'nin yaratıcısı) sizi animasyon oluşturmanın temellerine götürecek. Eğer jQuery'e yeniyseniz bu makaleyi kesinlikle okumanız önerilir.
15DaysOfJquery.com: 1. Gün: jQuery'nin tüm özelliklerini iki haftada kavramak gibi cesur bir girişimde bulunan "15 Days of jQuery" (jQuery ile 15 Gün) web sitesi her gün bir konuyu işliyor. Bu makalede "document.ready" yöntemini nasıl kullanmanız gerektiğini öğreneceksiniz.
VisualJquery.com: "jQuery Sözlüğünüz": VisualjQuery.com web sitenizi dijital sözlüğünüz olarak düşünün. Site, kullanılabilen her bir jQuery yönteminin sözdizimini ve açıklamasını içeriyor. Bu siteyi yer imlerinize eklemeyi unutmayın.

Adım 3: Elementlerinizi Canlandırın

Bu pek çok geliştirici için tartışmalı bir konudur. Birinci grupta "sıfır animasyon"da ısrar eden insanlar bulunur. Bunlar kullanıcının istediklerine mümkün olan en hızlı şekilde cevap verilmesine ve aradan çekilmesini tercih ederler. Onlara, bir sonraki uğraşı için bekleyen bir zombi gibi davranmayın. İkinci grupta da bazı insanlar vardır. Onlar, göze hoş görünen animasyonlar içeren bir siteye, kendi kullanıcıları için uygun bir site gibi bakarlar. Bu animasyonlar uygun kullanıldığında animasyonların kullanılırlığı önemli ölçüde arttırdığına inanırlar. Siz, hangi grupta olduğunuza karar vermelisiniz. Hangi grupta olursanız olun jQuery'nin sayfanızdaki elementleri hareket ettirebilme görevini mümkün olan en kolay şekilde yerine getirebildiğini unutmayın.

jQuery.com: "Animasyonlar jQuery'nin animasyon yeteneklerini öğrenirken burası uğramanız gereken ilk yer olmalı. Makale, bu yöntemi kullanırken ihtiyacınız olacak parametreleri detaylandırıyor.
Detached Designs: jQuery'nin Animasyon Yeteneklerini Öğrenmek: Konu animasyona geldiğinde hiç deneyiminiz yok mu? Bu makale özellikle animasyon konusunda hiç deneyimi olmayan kullanıcıları hedef alıyor. Makalenin içerdeği başlıklar arasında metin boyutunu değiştirmek, elementleri hareket ettirmek, animasyonları zincirlemek gibi her jQuery kullanan geliştiricilerin işine yarayacak konuları içeriyor.
Web Designer Wall: Tasarımcılar İçin jQuery Dersleri: Halen jQuery'nin gücü kafanızı mı karıştıryor? Bu site menülerden imaj değiştirmeye kadar 10 adet örneği detaylandırarak bu muhteşem kütüphanenin yetenekleri hakkında sizi bilgilendirmeyi hedefliyor.

Adım 4: Eklentiler
jQuery ile ilgili güzel olan bir şey var ki o da kütüphane geliştirilirken, John Resig ve ekibi kütüphanenin özelliklerini eklentiler kullanarak geliştirmenin sadece birkaç satır kod ekleyerek mümkün kılmak üzerine çalışmış olmaları. Kendinize özgü yöntemleri çok kısa süre içerisinde yazabileceksiniz! Bu eklentileri ana kütüphaneden ayrı tutarak (bu arada jQuery kütüphanesinin sadece 16KB olduğunu da hatırlatalım), bu özel eklentileri sadece gerektiği zaman sayfalarımıza dahil edebileceğiz. Bunun sonucunda JavaScript dosyalarınızın boyutu mümkün olan en küçük seviyede kalacaktır.

jQuery Corner Gallery
Elementlerinize yuvarlatılmış köşeler eklemek için CSS3'ün tüm tarayıcılar tarafından desteklenmesini beklemek istemiyor musunuz? O zaman jQuery kullanarak elementlerinize kolayca yuvarlatılmış köşeler ekleyebilirsiniz. Sadece yuvarlatılmış köşeler ile de sınırlı kalmayın, zira eklenti çeşit çeşit köşe tiplerini de bünyesinde barındırıyor. Bu eklenti araç kutunuzda kalıcı bir yer bulabilir.
Kullanıcı Deneyimini Geliştirin: 10 Kullanışlı jQuery Eklentisi Bu makalede James Padolsey, kendince en iyi jQuery eklentilerini listelemiş.
jQuery.com: "Eklentiler": Her zaman olduğu gibi jQuery.com değerli bir kaynak olmaya devam ediyor. Bu makale ilk eklentinizi oluşturmak için size adım adım rehberlik ediyor.

Adım 5: AJAX Özelliğini Dahil Etmek
Şu ana kadar öğrendiğiniz jQuery yetenekleri ile kendinizi güvende mi hissediyorsunuz? Yeteneklerinizi bir sonraki seviyeye yükseltmeye hazır mısınız? Neden betiklerinize biraz Ajax özelliği dahil ederek başlamıyorsunuz? Her ne kadar "load()" ve ".get()" yöntemlerinin kullanımı ile jQuery veri yüklemeyi inanılmaz derecede kolaylaştırıyor. Aşağıdaki kaynaklar eğitiminiz için hayati önem taşıyor.

Sitepoint.com: jQyery ile Kolay AJAX: Akash Mehta'nın Sitepoint için hazırladığı bu makalede web uygulamalarınıza AJAX eklemenin jQuery kullanılarak ne kadar da basit bir işlem olduğu anlatılıyor.
Tasarımcılar için jQuery: AJAX Kullanarak Form Doğrulama: Bu makalenin yazarı Remy, bizlere jQuery kütüphanesinin yanında AJAX kullanarak bizlere, web tabanlı formlara nasıl sunucu taraflı doğrulama özelliğini ekleyebileceğimizi gösteriyor.
Nettuts.com: jQuery Kullanarak İçerik Nasıl Yüklenilir ve Hareket Ettirilir?: jQuery dersleri ararken NETTUT'un "Javascript" kategorisine bir gözatmayı unutmayın. Bu derste NETTUTS ekibi jQuery kullanılarak bir verinin nasıl yüklenebileceğini ve ardından onu taşıyan elementin nasıl hareket ettirilebileceğini göstermiş.

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

RapidShare Araçları ve İpuçları

systemdown — Tue, 13 Jan 2009 12:02:00 GMT

Rapidshare, inanılmaz database'iyle dünyanın en popüler dosya paylaşım/saklama sitesi olmakla birlikte aynı zamanda en çok ziyaret edilen siteler arasında. Kullanmak istemeseniz de o sizi bulur, mutlaka karşınıza çıkar ve kullanmak zorunda kalırsınız. Önceleri o sıkıcı bekleme süresini çeker, daha sonra "lanet olsun" deyip premium alırsınız. Böylece siz de bir "download" manyağı olmuşsunuz demektir. Bu yazıda tanıtılan rapidshare araç ve kaynaklarını paylaşmak istedim.

1. Ücretsiz İndirme Yöneticileri ve Hızlandırıcıları

2. Rapidshare Arama Motorları :

3. Bedava Premium Account Bildirici :

RapidCheck : RapidShare sık sık premium account dağıtıyor. Bunları yakalamak oldukça güç çünkü adetli dağıttığı için hemen bitiyor. Bu program bilgisayarınızda arkaplanda çalışırken dağıtım başladığı an haber veriyor.

4. İpucu & Kaçamak Kaynakları :

Sürekli güncellenen metodlar olduğu için kaynakları vermenin daha uygun olacağını düşünüyorum.

Tech-Recipes : Bekleme Zamanına Çözüm
Sr-Ultimate : Bir kaç değişik kaçamak tekniği
ReadYouth : Aynı anda birden çok dosya indirme
GHacks : Çeşitli İpuçları

Bir Tane de Benden : RapidShare Premium alarak bunların hepsinden kurtulabilirsiniz. Premiumu rapidshare üzerinden buradan aylık 7 euro'ya alabilirsiniz. Bir başka yol da benim yaptığım r10 premium satış sayfasından her zaman 8-10 TL civarına account alabilirsiniz. Buradaki arkadaşlar hesapları kendi puanlarıyla açtıkları için ucuza veriyorlar.

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