bildirgec.org - PcMaSTeR - beğendikleri

Tek klavye ve fare ile birden fazla bilgisayarı kullanmak

PcMaSTeR — Sun, 30 Aug 2009 10:33:00 GMT

Diyelim ki ofisinizde birden fazla bilgisayar var ya da evinizde hem bir desktop hem de lcd televizyonunuza bağlı bir nettop var. Sahip olduğunuz tüm sistemler için birer klavye ve fare almak hem fazla para harcamanıza hem de daha fazla yer işgal etmenize yol açar. İşte açık kaynak yazılım Synergy tam bu noktada imdadımıza yetişiyor.

Synergy aynı ağdaki iki ya da daha fazla bilgisayarı tek klavye ve mouse ile kontrol etme olanağı sağlıyor, üstelik farklı işletim sistemleri arasında da çalışabiliyor. Sistem basitçe aynı bilgisayara bağlanmış birden çok monitör gibi çalışıyor. Yani fareyi ekranın sağına götürdüğünüz zaman sağdaki, soluna götürdüğünüz zaman ekranın solundaki monitöre geçiyor. Program kurulumu her ne kadar karmaşık görünse de aslında basit. Yapmanız gereken sadece iki bilgisayarı birbirine bağlamak ve bilgisayarların birbirlerine göre konumlandırılmasını belirtmek.

Şimdi bu muhteşem programı nasıl kullanabileceğinizi 2 bilgisayarı örnek vererek anlatacağım.

Programı biri sunucu, diğeri alıcı olmak üzere iki bilgisayara da kurun ve masaüstü ikonuna tıklayarak başlatın.

Karşınıza bu pencere çıkacak. Önce sunucuyu kuracağımız için "Share this computers keyboard & mouse" seçeneğini işaretleyin.

Configure butonuna basarak sunucu ve alıcı bilgisayarları ayarlayacağız.

+ butonuna basarak her iki bilgisayarı da ekleyin. Screen Name boşluğuna sunucu bilgisayarın ismini girin ve Ok butonuna basın. Daha sonra ana Configure penceresinde tekrar + butonuna basarak alıcı bilgisayarın ismini girin ve Ok butonuna basın. Bilgisayarların isimlerini her iki bilgisayarda da ana pencerede Advanced butonuna basarak öğrenebilirsiniz.

Şimdi önünüzde buna benzer bir görüntü olmalı. Sıra iki bilgisayarı birbirine bağlamaya ve konumlarını belirlemeye geldi. Biz örnek olarak bir Laptop ve önündeki Lcd ekrana bağlı bilgisayarı birbirine bağlayalım.

Burası biraz komplike görünebilir ama aslında yapmanız gereken tek şey hangi bilgisayarın diğerinin ne tarafında olduğunu belirtmek.

Lcd'nin laptop'ın üstünde olduğunu belirtmek için penceredeki seçenekleri sırasıyla "Top - Laptop - Lcd" yapın. + butonuna bastığınız zaman eğer doğru yaptıysanız bağlantının "Lcd is above Laptop" olduğunu göreceksiniz.

Laptop'ın, Lcd'nin altında olduğunu belirtmek için ise tam tersini yani sırasıyla "Bottom - Lcd - Laptop" yapın. + butonuna bastığınız zaman "Laptop is belove Lcd" olduğunu göreceksiniz.

Sunucu bilgisayarın kurulumu tamamlandı. Şimdi sıra alıcıyı kurmakta. Alıcı bilgisayarda da programı çalıştırın ve üstteki "Use another computers shared keyboard & mouse" seçeneğini işaretleyin.

Şimdi tekrar sunucu bilgisayara dönüp test butonuna basın. Eğer herşeyi doğru yaptıysanız bağlantının sorunsuz gerçekleştiğiyle ilgili bir mesaj alacaksınız. Bu artık iki bilgisayarı da kullanabilirsiniz manasına geliyor.

Son olarak her iki bilgisayarda da Start butonlarına basarak bağlantıyı kurun. Onay mesajını aldıktan sonra Laptopınızdan Lcd televizyonunuza bağlı bilgisayarınızı kullanabileceksiniz.

Programla indirmek için buraya, daha detaylı bilgi almak için buraya tıklayın. Sitede diğer işletim sistemleri için kurulum ve bağlantılar açıklanmıştır.

Umarım bu süper kullanışlı program işinize yaramıştır.

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

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

web tasarımcıları için 16 firefox eklentisi

PcMaSTeR — Sun, 23 Aug 2009 11:45:00 GMT

mozilla firefox tarayıcılar arasından öne çıkmış bir tarayıcı. belkide onu öne çıkaran eklentiler, temalar ile kişiselleştirilebilir olması. daha önce bir çok yerde ( *, *, * ) web geliştiricileri için firefox eklenti listeleri yapılmıştı. şimdi de sitepoint tarafından web tasarımcıları için firefox eklentileri listelenmiş.

renk araçları

colorsuckr renk skalası yaratmaya yarayan bir araç.

en çok kullanılan eklentilerden biri olan colorzilla photoshoptaki Eyedropper ve ColorPicker araçlarının görevlerini yapıyor.

firepalette firebug ile çalışan, firebug'un css panelini zenginleştiren bir renk aracı.

palette grabber websitesindeki renkleri bir palet halinde kullanmanız için photoshop, illustrator, flash, fireworks, gimp, paintshop pro ve türevi programlara uygun formata getiriyor.

ölçme/ölçüm araçları

gridfox şablon çıkartmak için harika mı harika bir araç websitelerinin tablolarını gösterebiliyor. örnek bir uygulamasını göstereyim:

measureit en iyi ölçme aracı olarak gözüküyor. herhangi bir elementin kaç piksel olduğunu measureit cetveli ile birkaç saniyede ölçebilirsiniz.

web sayfasındaki herhangi bir resim dosyasının ( jpg, png, gif ) köşelerini yuvarlak ( overlay ) hale gelirmek için ideal bir eklenti pixelperfect. çalışması için firebug eklentisi gerekli

diğer araçlar

firebug 17,346,759 indirme sayısı ile firefox eklentilerinin gözdelerinden. ne işe yaradığını sorarsanız css, html ve türevi dosyaları görerek düzenlemenize yarıyor diyebilirim kısaca.

fontfinder'in tam karşılığı yazı tipi bulucu. eklenti açıklamasında ise firefoxta seçili tüm metnin stilleriin firefox veya thunderbird'e alın deniliyor. denemediğim için birşey söyleyemeyeceğim bu eklenti hakkında.

window resizer adında anlaşılacağı üzere pencereyi farklı boyutlarda göstermeye yarayan bir eklenti.

webdeveloper'da en çok indirilenler - 11,882,236 indirme- listesinde başı çekiyor. web tasarım ve geliştirenlerin kesinlikle kullanması gereken bir eklenti. web tasarımcı ve geliştiriciler için bir toolbar.

view dependencies 'page info', sayfa bilgisi penceresi altında resimde görüldüğü üzere sayfaların boyutlarını belirtiyor.

ekran görüntüsü araçları

abduction sağ tıklama ile web sayfasının bir alanını veya tüm websayfasını resim olarak kaydedebilirsiniz.

en kapsamlı ekran görüntüsü eklentisi kesinlikle fireshotdur. bir milyonu aşan indirme sayısıda bunun kanıtı olabilir. aldığınız ekran görüntüsü üzerinde hiçbir program kullanmadan kesme, kırpma ve benzeri işlemler yapabiliyorsunuz.

imagezoom adlı basit eklenti websayfasındaki resimlere daha dikkatli bakmanız için %400e kadar büyütebiliyor.

picnik eklentisi resimlere sağ tıkladğınıda edit image in picnik özelliği ile resim düzenleme sitesi picnik.com'da resmi düzenlemesini sağlıyor.

pixlr picnik eklentisi ile aynı işi pixlr.com ile yapıyor.

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

30 En İyi Flash Bileşeni

PcMaSTeR — Sat, 25 Jul 2009 10:39:00 GMT

Flash ile yapılan tasarımlar animasyon ağırlıklı olduğu için kullanıcının dikkatini daha fazla çekmeyi başarıyor. Bu yazıda siteniz için kullanabileceğiniz en iyi flash bileşenlerine ulaşabilirsiniz.

1. flow list

3 boyutlu animasyon akışı oluşturmak için çok güzel bir bileşen. Kolayca entegre edilebilir.

2. 360 view image rotator

Oynatma/durdurma özelliği ile 360 derece döner. Swf dosyasını kolayca düzenleyebilirsiniz.

3. countdown timer

Belilrli bir süreden kalan zaman oluşturmak için kullanabileceğiniz bileşen.

4. obedit

Flash tabanlı zengin metin editörü düzenleyicisidir. Kullanışlı birçok özellik içermektedir.

5. map

Coğrafi konumları görüntülemenizi sağlayan harita bileşeni.

6. flash bookmarks

Ücretsiz sosyal imleme bileşeni. Bu bileşen sayesinde sayfanıza popüler imleme sitelerinin linklerini ekleyebilirsiniz.

7. spinning preloader

Actionscript 3 ile Flash 3'de yapılmış tamamen kişiselleştirilebilir yükleniyor bileşeni.

8. toobplayer

Youtube videolarını oynatabileceğiniz güzel bir video oynatıcı.

9. suprasliderbasic

10. sindot

Çeşitli dalgalı çizimler oluşturabileceğiniz bileşen.

11. jc play list

Gelişmiş multimedya görüntüleyicisidir. Numaralandırma, ek bilgi, açıklama, başlık gibi bilgiler yer almaktadır.

12. movie credits

Ücretsiz film sonu tanıtma yazısı bileşeni.

13. the classic progress bar

Ücretsiz klasik ilerleme bileşeni. Herhangi bir flash nesnesi yüklenirken bu bileşeni ekranda görüntüleyebilirsiniz.

14. 3d walker gallery xml

Fotoğraf, cd, dergi, ürünler için galeriler oluşturabilirsiniz.

15. 3d scene

3d sahne oluşturmak için kullanabileceğiniz faydalı bir bileşen.

yazının devamı için buraya tıklayın.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

ücretsiz flash fotoğraf galerisi

çok aranan 10 flash dersi

youtube'dan 60+ müthiş flash cs4 dersi

25 güzel ve yaratıcı flash e-ticaret sitesi

i̇lham kaynağı olabilecek 13 yaratıcı flash preloader (yükleniyor) uygulaması

kaynak: ajaxline.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

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

İnternet'ten İngilizce Öğreniyorum

PcMaSTeR — Fri, 03 Jul 2009 08:53:00 GMT

okul döneminde 4. sınıftan itibaren başlayan ingilizce eğitimi, genel liselerin 4 yıl olması ve hazırlık sınıfının ortadan kalkması ile ingilizce derslerinin haftalık ders saati artmıştır. (*)

eğitim sistemimiz ingilizce öğretimi konusunda yeterli mi bilemiyorum ama eft dil okulları'nın yapmış olduğu araştırma (*) ülkemizde ingilizce bilenlerin oranının %1 olduğu belirtiliyor. durum böyle olunca okul hayatı boyunca verilen eğitimin yeterli olup olmadığı akıllara geliyor.

i̇nternet'in popüler bir hale gelmesi ile internet üzerinden özellikle arama motorları aracılığı ile aradığımıza kolayca ulaşabiliyoruz. i̇nterneti eğlence amacıyla kullananlar olduğu kadar eğitim için de kullananlar küçümsenmeyecek derecededir.

popüler arama motorları ve sonuçları:

ingilizce öğrenebilmek için internet ve özellikle arama motorları çok büyük bir nimet

google: google'da "ingilizce öğrenmek istiyorum" diye aratıldığı zaman yaklaşık 600.000 üzerinde sonuç listeleniyor.

yahoo: aynı şekilde diğer popüler arama motoru yahoo'da ise yaklaşık 230.000 sonuç bulunuyor.

bing: microsoft'un yeni çıkarmış olduğu bing arama motorunda ise yaklaşık 42.000 sonuç bulunuyor.

yukarıdaki 3 popüler arama motorunun bize sunduğu sonuçlar kullanmış olduğu alt yapıya göre değişmektedir. bu kadar çok sonucun bulunması ingilizce öğrenmek isteyen birisini nereden başlayacağı konusunda oldukça zorlayabilir. yazılarımda en faydalı olabilecek sonuçları size aktarmaya çalışacağım.

anahtar kelimemiz olan "ingilizce öğrenmek istiyorum" ile arama yaptığımız zaman birçok ders, makale ve sorular karşımıza çıkıyor. çeşitli forum, blog ve web sitesi üzerinde;

ingilizce nasıl öğrenirim?
ingilizce öğrenmek için neler yapabilirim?
internet üzerinden nasıl ingilizce öğrenirim?
ingilizce öğrenmek için tavsiyeleriniz?
ingilizceyi nasıl öğrendiniz?

gibi sorular soruluyor ve farklı farklı cevaplar veriliyor. bu kadar çok alternatifin olması yeni başlayanların kararsız olmasına neden oluyor ve kendisi için en uygun çözümü bulmakta zorlanıyor.

Dil Nasıl Öğrenilir?

Yabancı bir dil öğrenirken birçok alternatif yöntem bulunmaktadır. Dersaneye gidebilir, özel ders alabilir, eğitim seti alabilir, çalışma kitabı alarak öğrenebilirsiniz. İsa Çubukçu şu şekilde bir liste hazırlamış.

İyi bir gramer (dil bilgisi) kitabı

İyi bir sözlük

Cümle kitabı

Güncel kendi alanınıza uygun dergi ve gazeteler

Okuma kitabı

Walkman veya CD-Player (iPod - Mp3 Player)

Kurs kaset veya cd'leri (*)

Yukarıdaki yöntemin dışında farklı yöntemlerde bulunmaktadır. Aşağıdan internet üzerinden ingilizce öğrenmek için veya kendinizi geliştirmek için size yardımcı olabilecek yerli kaynaklara ulaşabilirsiniz.

dil bilgisi (gramer) dersleri sunan siteler:

Her gramer yapısını çok iyi öğrenmek ve bol bol pratik yapmak gerekmektedir.

1. ingilizce.tk

2. limasollu.com

3. ingilizcedersanesi.com

4. herkeseingilizce.com

5. ingilizcenet.com

6. bedava-ingilizce.com

7. esmus.blogcu.com

8. ingilizce.name

9. ingilizce-dersi.blogspot.com

10. ingilizceogreniyorum.org

11. halukhoca.net

12. ingilizceturkce.com

tr-ing / ing-tr sözlük siteleri:

Sözlük siteleri sayesinde öğrenmek istediğiniz kelimeleri kolayca öğrenebilirsiniz.

1. seslisozluk.com

2. sozluk.net

3. sozluk.web.tr

4. ingilizcesozluk.gen.tr

5. sozluk.com

6. zargan.com

7. ingilizcebul.com

8. ingilizcesozluk.org

9. langtolang.com

10. pratiksozluk.com

11. kelimesozluk.com

12. sozluk.com.tr

Yeni başlayan kullanıcılar için rehber olması açısından bu bildiriyi yazdım. Bu yazıyı seri şeklinde devam ettirmek istiyorum. Bir sonraki yazıda görüşmek dileğiyle.

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter
sosyal imleme: delicious

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

Hey Neredesin? - iPhone Uygulaması

PcMaSTeR — Fri, 26 Jun 2009 08:48:00 GMT

iPhone OS'un yeni sürümü 3.0 ile gelen birçok yeni özellik, yazılımcılar için de ilham kaynağı olmaya devam ediyor. Bu yeni özelliklerden birisi olan Push Notification ile de artık uygulamalar çalışır vaziyette olmasa dahi, anlık bildirimlerini bu servis üzerinden yapabilecekler.

Bu anlık bildirim özelliğini kullanan yeni uygulamalardan birisi de Ücretsiz olarak indirime sunulan HeyWay yani "Hey Where are you?"

İsminden de anlaşılabilindiği üzere bu uygulama ile arkadaşlarınızın bulunduğu yeri sorabiliyor ya da bulunduğunuz yeri google maps üzerinden anlık olarak paylaşabiliyorsunuz.

Google haritalarının programa gömülü olması ile çok hızlı çalışan program, birçok alanda yardımcınız olacaktır.

Mesela, Eşinizin ya da çocuğunuzun nerede olduğunu öğrenmek istiyorsunuz, Ama şüpheleriniz var. Ya da Ortağınız İş başında mı, yoksa biryerlerde işten kaytarıyor mu öğrenmek istiyorsunuz.
İşte HeyWay uygulaması sayesinde bu şüphelerinizden anında kurtulabilirsiniz.

Tabii Önce takip etmek istediğiniz kişinin bu uygulamayı yüklemesi ve size bu bildirimleri göndermesi için izin vermiş olması gerekiyor.

Programı kullanmak için iPhone ya da iPod cihazlarınızın mutlaka iPhone os 3.0 sürümüne sahip olması gerekiyor.

Uygulamayı İndirmek için Aşağıdaki bağlantıyı kullanabilirsiniz.
..........

kaynak:
niftybrick.com
Diğer yazılarım

Bu yazı PcMaSTeR 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 ilginç Windows media player arayüzleri

PcMaSTeR — Sat, 20 Jun 2009 07:31:00 GMT

Bütün windows işletim sistemlerinin olmazsa olmazlarından olan Windows Media Player(WMP), her ne kadar tahtını diğer media oynatıcılarına bırakmış olsa da, bazı durumlarda kullanmak zorunda kalabiliyoruz. Mesela ülkemizdeki yasal müzik portallarından olan TTnetmuzik'ten indirmiş olduğumuz korumalı (DRM) müzik parçalarını dinlemek için Media Player'a ihtiyacımız var.

Ayrıca Windows Media Player, halen en kaliteli sesi veren program olarak da, kullanıcılar tarafından tercih edilmekte. Bizler de Müzik zevkimizin yanında, göz zevkimize de hitap etmesi için Media Player için Arayüz (skins) yükleyebiliriz. İşte sizlere WMP için birbirinden güzel Arayüzler;

iPhone - İndirmek için tıklayınız

Walkman W910i - indirmek için tıklayınız

Firefox - İndirmek için tıklayınız

iPod Nano - İndirmek İçin Tıklayın

Batman Begins - İndirmek için tıklayınız

iPod Touch - İndirmek için tıklayınız

ıPod Touch Arayüzündeki simgelere atanan internet kısayollarını da kullanabiliyorsunuz.

Arayüzleri Yüklemek çok basit, indirdiğiniz dosyayı çalıştırmanız yeterli, otomatik olarak kendisi yükleniyor.

WMP için Daha fazla arayüzü Aşağıdaki sitelerden indirebilirsiniz. Cep telefon modeli arayüzünden sevilen dizilerin arayüzlerine kadar birçok arayüz mevcut.
Microsoft WMP skins

Custumize WMP skins

Diğer yazılarım

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

30 Etkileyici Yeni Photoshop Fırçası

PcMaSTeR — Sat, 31 Jan 2009 08:00:00 GMT

Bir tasarımcının vazgeçemyeceği program hangisi diye sorarsanız cevap photoshop'dur. Peki bu tasarımcılar Photoshop'ta harika tasarımları nasıl yapıyorlar die sorulacak olursanız cevabını DWSmg sitesi Tasarımcların kullanmayı Sevdiği 30 etkileyici Yeni Photoshop Fırçaları adlı başlıkta gayet net olarak vermiş.

İşte O Fırçalar;

Photoshop Greenery Brushes

Green Lotus Brushes

Suddenly Spring Brushes

Vintage Garden Brush

Fresh Foliage Brushes

Grass Brushes

Photoshop Art Brushes

Valhalla Vania Brush

Christmas Eve Brushes

Finger Print Brushes

Moons Stars Sparkles Brushes

Glow Brushes by Hawksmont

Smashing Grunge Brushes

Nightmare Christmas Brushes

Scrapping Cop Funky Retro Circle

Brush Pack

Super Stars

Creative Photoshop Brushes

Astral Brushes

Fractal IV by Shady Medusa Stock

Grunge Brushes

devamı

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

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

PcMaSTeR — Mon, 19 Jan 2009 17:02:00 GMT

Gün geçtikçe daha çok web uygulaması Web'e geçiş yapıyor. Platform sorunları ve kurulum gereksinimleri olmadan, bir hizmet olarak yazılım (software as a service) modeli oldukça çekici görünüyor. Web uygulama arabirimi tasarımı, özünde, web tasarımı iken, aslında daha çok üzerine tasarlandığı uygulamanın özelliklerine odaklanır. Masaüstü yazılımları ile yarışabilmek için web uygulamaları basit, yenilikçi ve karşılık veren kullanıcı arabirimleri sunabilmeli ve bunlar da, onları kullanan kullanıcıların ulaşmak istediklerine en kısa yoldan ve onları yormadan ulaşabilmelerine aracılık edebilmelidirler.

Geçmişte web uygulamalarını olması gerektiği kadar dikkate almıyorduk ancak şimdi, web uygulamalarını daha güzel ve daha kullanıcı dostu kılacak bazı tasarım çözümleri ve kullanışlı tekniklere bakmanın zamanı geldi. Bu makale, modern web uygulamalarında kullanışlı tasarım çözümleri ve tasarım öğelerine yönelik yaptığımız derinlemesine araştırmanın ilk bölümünü oluşturmaktadır. Yazının devamında, pek çok başarılı web uygulamasında kullanılan 10 kullanışlı arabirim tasarlama tekniklerini ve en iyi deneyim örneklerini bulacaksınız.

Lütfen yazıyı okuduktan sonra siz de kendinize özgü fikirlerinizi, yaklaşımlarınızı ve kodlama çözümlerinizi bizlerle paylaşmaktan çekinmeyin. Yazının ikinci bölümü de pek yakında yayınlanacaktır.

1. İsteğe Bağlı Arayüz Elementleri
Sadelik, kullanıcı arabirim tasarımında önemlidir. Ekranda ne kadar fazla kontrol elementi gösterirseniz, kullanıcılarınız onları anlamak için o kadar fazla zaman geçireceklerdir. Daha fazla seçenek olduğunda, kullanıcıların kullanabileceği seçenekler onlara daha belirgin gelecek ve onları taramaları daha kolay olacaktır. Bir arayüzü sadeleştirmek burada yazıldığı kadar kolay bir iş değildir, özellikle uygulamanızın özelliklerinden kısmak istemiyorsanız.

Kontain'in arama kutusuna tıkladığınızda benzer bir açılır menü belirmektedir. Eğer arama kriterlerinizi daraltmak istiyorsanız, açılan bu menüyü kullanarak ilgilendiğiniz içerik kategorilerini seçebilirsiniz. Bu seçenekleri arama kutusu ile bütünleştirmek, arama kutusunu basitleştirmektedir.

İşleri sadeleştirmenin bir yolu, gelişmiş özellikleri gizlemek ya da perdelemektir. Arayüzünüzde en çok kullanılan elementlerin hangileri olduğunu bulun ve geri kalanını ayıklayın gitsin. Bunu açılır menüler ve kontroller ile yapmanız mümkündür ki bu her iki yöntem de masaüstü uygulamalarında oldukça popülerdir. Örneğin, eğer arama kutunuz gelişmiş filtrelere sahipse, o zaman onları satırın sonunda özel bir açılır menünün ardına gizleyin. Eğer kullanıcıların bu filtrelere ihtiyacı varsa sadece birkaç fare tıklaması ile onları etkinleştirebilirler. Bunu söylemesine söylüyorum ama neyi gizleyip neyi gizlemeyeceğinize karar vermek kolay bir iş değildir ve her bir kontrolün ne kadar önemli olduğu ve ne kadar sık kullanıldığı ile doğrudan ilgilidir.

CollabFinder'ın arama bağlantısına tıkladığınızda başka bir sayfaya yönlendirilmezsiniz. Aksine, arama kutusu bir açılır menüyü kontrol ederek, sizin doğrudan bulunduğunuz sayfa üzerinden arama yapmanızı kolaylaştırır.

2. Özelleştirilmiş Kontroller
Durum için doğru arayüz kontrollerini seçmek önemlidir. Farklı durumlar farklı şekillerle kontrol edilebilir ve bazı kontroller kendileri için tasarlanan görevlerde diğerlerinden daha iyidirler.

Backpack hatırlatıcı tarihi için kullanılan kompakt bir takvim tarih ve zaman seçicisine sahiptir.

Örneğin gün, ay ve yıl için ayrı ayrı açılır menüler kullanarak kullanıcıların seçmelerini sağlayabilirsiniz. Ancak açılır menüler çok verimli değildirler, özellikle seçmek istediğiniz tarihin üzerine doğrudan tıklayabilmenize olanak sağlayan takvim seçicileri ile kıyaslandığı zaman. Takvim seçicileri ayrıca sizin günleri, haftaları ve ayları (özellikle iş günlerini ve haftasonlarını) görebilmenize yardımcı olurlarken, sıradan açılır listelere kıyasla daha bilgilendirilmiş kararlar verebilmenizi sağlarlar.

MyBankTracker'ın yıllık gelir oranlarını hesaplamak için kullanılan bir hesaplayıcısı bulunmaktadır ve bu hesaplayıcı, kolay kullanımlı kayan kontrolleri kullanarak, farklı projeksiyonları kolayca deneyebilmenizi sağlamaktadır.

Bir diğer güzel örnek ise kaydırma çubuklarıdır. Evet, numaraları her zaman el ile girmek mümkündür, ancak bazı özel durumlarda kaydırma çubukları ve buna bağlı kontrolörler çok daha iyi iş çıkarırlar. Bunlar sadece daha kolay kullanımlı olmakla kalmaz (sadece sürükle ve bırak), ayrıca seçiminizin izin verilen en düşük ve en büyük değerler arasında nereye denk düştüğünü görsel olarak algılamanıza da yardımcı olur.

3. Basılı düğmeleri iptal etmek
Web uygulamalarının zorlandığı bir diğer problem de form gönderim işlemidir. Basit formlarla "Gönder" düğmesine iki ya da daha fazla kez çabucak basarsanız, form iki ya da üç kez gönderilebilir. Bu hiç şüphesiz bir problemdir, zira aynı form girdisinin benzer kopyalarını oluşturacaktır. Bu kopya girdilerin önüne geçmek zor bir işlem değildir, ancak pek çok web uygulamaları için kaçınılmaz bir işlemdir.

Bu korumaya iki bağ bulunur: sunucu tarafı ve istemci tarafı. İşin sunucu tarafına burada değinmeyeceğiz zira bu kullandığınız programlama diline ve sizin altyapı mimarinize göre değişiklik gösterecektir. Her koşulda yapmanız gereken şey, verinin işlenişi sırasında gönderilen her ne ise onun halihazırda depolanan verinin bir kopyası olup olmadığını kontrol edecek bir mekanizmayı entegre etmek olmalıdır.

Yammer "Güncelle" düğmesini yeni bir mesaj gönderildiğinde otomatik olarak etkisizleştirir.

İşin istemci tarafı çok daha basittir. Tek yapmanız gereken "Gönder" düğmesine tıklandığında onu etkisizleştirmektir. Bunu yapmanın en kolay yolu, "Gönder" düğmesine aşağıdaki gibi basit bir JavaScript kodu dahil etmektir.

<input type="submit" value="Submit" onclick="this.disabled=true" />

Elbette yukarıda da belirttiğimiz gibi istemci tarafının yanısıra sunucu taraflı bir kontrol mekanızmasını da uygulamanıza entegre etmeniz önerilir.

Çevirmen'in Notu: Kodaman'da PHP'de güvenli form gönderimlerine yönelik bir dizi makale bulunmaktadır.

4. Modal Pencereler Çevresindeki Gölgeler
Açılır menüler ve pencerelerin çevresindeki gölge efektleri sadece göze hoş gelmekle kalmaz, ayrıca efektin uygulandığı menünün ya da pencerenin, sayfanın diğer elementlerinden daha ön planda belirmesine de görsel olarak yardımcı olur. Bunun yanısıra efektin uygulandığı elementin ardındaki içeriğin oluşturması muhtemel görüntü kirliliğinin de, üzerine uygulanan karartıcı efektin de yardımı ile önüne geçer.

Bu tekniğin kökeni, sıradan masaüstü uygulamalarına dayanmaktadır. Bu tekniğin kullanıldığı masaüstü uygulamalarında kullanıcının dikkati, en öndeki pencereye ya da diyaloğa çekilir. Pek çok modal pencereler masaüstü uygulamalarında olduğu kadar kolayca ayırt edilebilir olmadıklarından beri, gölge efektleri, onların, okuyucular tarafından daha kolay algılanabilir kılınmasına yardımcı olur, zira ilgili pencere, üç boyutlu gibi görünür ve sayfanın geri kalanının önüne geçer.

Digg'in giriş penceresinin çevresinde bulunan kalın gölge efekti sayesinde, ilgili pencerenin ardındaki içeriğin oluşturduğu görüntü kirliliğinin önüne geçilmiş olur.

Bu efekte ulaşabilmek için tasarımcılar, saydam bir PNG imajı oluştururlar ve asıl içeriği de bu PNG dosyasını arkaplan imajı olarak kullandıkları kapsayıcının içerisine yerleştirirler. Kapsayıcının köşelerinde eşit oranlarda boşluk uygulanmas, içeriğin daha kolay seçilebilmesinin de önünü açar. Bir diğer seçenek ise saydam köşeler ile birlikte arkaplan imajı kullanarak, içeriği mutlak pozisyonlama ile yerleştirmektedir. Digg bu yöntemi kullanmaktadır - kullandıkları imaj ise bu (dialog.png). Kullandıkları kodlar ise aşağıda:

(X)HTML:
<div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

CSS:
.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Bu yöntemlerin yanısıra JavaScript tabanlı lightbox çözümleri ile ya da CSS3 elementlerini kullanarak gölge efektlerini kullanabilirsiniz. Ancak CSS3'ün Internet Explorer tarafından desteklenmediğini unutmayın.

Basecamp'in proje değiştirici penceresinin ardında geniş bir gölge efekti bulunuyor ve bu efekt, pencerenin, sayfanın diğer elementlerinden daha belirgin olmasını sağlıyor.

5. Size ne yapmanız gerektiğinizi söyleyen boş alanlar
Bir web uygulamasını tasarlarken, onu basit bir veri ile test etmek kadar, onun güzel görünmesi ve ortada henüz hiçbir veri yokken kullanıcısına yardımcı olmak da önemlidir. Boş alanları tasarlamanız gerekmektedir.

Ortada henüz sayfa ya da komut için bir bilgi bulunmazken, kullanıcıya ne yapması ya da nasıl başlaması gerektiğini söyleyen bir mesaj o boş alana gidebilir. Örneğin bir proje yönetim uygulamasının ana sayfası, kullanıcının projelerini listeleyebilir, ancak eğer henüz orada bir proje bulunmuyorsa, o zaman proje oluşturulabilecek sayfanın bağlantısını oraya yerleştirmek yerindedir. Eğer orada bir düğme bulunuyor olsa bile, biraz daha fazla yardımın kimseye zararı dokunmaz.

Campaign Monitor bir elektronik posta kampanyası hazırlamaya başlarken sizi doğru yöne yönlendirir.

Bu teknik, kullanıcıların sunulan servisi, kayıt olduktan hemen sonra denemeleri için teşvik eder. Kullanıcıya uygulamanız her adımında rehberlik ederek, onun uygulamanızın sunduğu avantajları anlamasına ve kendileri için kullanışlı olup olmadığını kavramasına yardımcı olur. Bu ayrıca kullanıcıya "sadece" en önemli veriyi sunar, zira onları gereksiz seçeneklerle daha ilk andan boğmanın bir anlamı yoktur. Unutmayın ki kullanıcılar genellikle kendilerine sunulan fikrin aşağı yukarı tümünü anlamak isterler ancak detaylarla ilgilenmek istemezler - zira buna ne zamanları ne de ilgileri olmayabilir.

Boş alanları kullanarak kullanıcıları motive ederek ve uygulama adımlarını canlılaştırarak sıkılıp kaçan kullanıcıların önüne geçebilir ve potansiyel müşterilerin sisteminizin nasıl daha iyi çalıştığını anlamalarına yardımcı olabilirsiniz.

Wufoo'nun formlar sayfasının geniş ve kullanıcı dostu bir mesajı bulunur ve bu mesaji herhangi bir form bulunmaması durumunda sizi yeni bir form oluşturmaya davet eder.

6. Basılı düğme durumları
Pek çok web uygulamasının özel tasarlanmış düğmeleri bulunur. Bunlar ya linkler ya da girdi düğmeleri olup kendilerine atanmış arkaplanlar bulunur. Öntanımlı girdi düğmeleri bazı durumlar için elverişli olmayabilir ve metin bağlantıları bazen çok sade kaçabilir. Burada karşılaşılabilecek olan zorluk, bağlantılarınızı birer düğme gibi gösterdiğinizde onların birer düğme gibi davranmalarını sağlamaktır - ki bu kullanıcıların onların üzerine tıkladıkları zaman ilgili düğmenin "basılı" görünüme bürünmesini de içerir.

Bu aslında sadece görsel bir hile değildir. Kullanıcılara anında geribildirim vererek, uygulamanın daha duyarlı olmasının ve kullanıcının masaüstü uygulamalarında yaşadıkları deneyime en yakın deneyimi web uygulamaları üzerinde yaşamalarını da sağlar.

Basılı düğme durum efektlerini CSS'nin active alt sınıfını kullanarak oluşturmanız mümkündür. Örneğin eğer bağlantınız add_task_button sınıfına sahipse, onun basılı durumunu add_task_button:active ile stillendirebilirsiniz.

Highrise sitesindeki düğmelerin üzerine tıklandığında düğmelere sanki gerçekten basılıyormuş hissi uyandırılır ve kullanıcı ilgili uygulamanın daha duyarlı olduğu hissine kapılır.

7. Kayıt Sayfasına Giriş Sayfasından Bağlantı Vermek
Uygulamanız için kayıt olmamış bazı insanlar sürekli olarak sitenize halihazırda üye olmuş kullanıcıların giriş yapabilecekleri sayfa ile karşılaşırlar ancak acele ettiklerinden de olsa gerek kayıt sayfasını bulamazlar. Belki de sadece kayıtlı kullanıcıların kullanımına açık olan bir özelliğe erişmeye çalışmış olabilirler.

Delicious hesabınız yok mu? Sorun değil, zira kayıt olabileceğiniz bağlantı giriş sayfası üzerinden verilmiş bile.

Goplan sitesinin üye girişi sayfasında bulunan güzel renklendirilmiş düğmesi sizi kayıt sayfasına yönlendiriyor.

Giriş sayfanıza kayıt olunabilecek bir bağlantı yerleştirerek bu işlemi onlar için kolaylaştırın. Eğer henüz bir hesabınız yoksa, kullanıcılar kayıt sayfasını bulmak için arama yapmamalıdırlar. Smashing Magazine'nin araştırmaları gösteriyor ki sitelerin %18'i, üye girişi sayfası üzerinde bir kayıt formu ya da o forma giden bir bağlantıyı barındırmaktadır (örneğin YouTube, Reddit, Digg, Metacafe).

8. İçerik/Durum hassaslığında navigasyon
Kullanıcıların karşı karşıya kaldığı her durumda onların neler görmeyi bekleyecekleri ve nelere ihtiyacı olabileceklerini düşünmek önemlidir. Aynı navigasyon kontrollerini her sayfada göstermenize gerek yoktur, çünkü kullanıcılarınızın her durumda onların tamamına ihtiyacı yoktur.

İçweik hassaslığında kontrollere yönelik en güzel örneklerden birisi de Microsoft Office 2007'nin arayüzünde son dönemde yapılan bir değişikliktir. Şerit üzerinde bulunan her bir sekme, ilgili aktiviteye yönelik eylem düğmelerini listelemektedir, örneğin grafik düzenleme, gözden geçirme ya da basitçe yazı yazma gibi. Web uygulamaları da bunun gibi benzer içerik hassaslığında kontrollerin nimetlerinden faydalanabilirler zira bu tekniğin kullanıldığı kontroller, arayüz üzerinde sadece kullanıcının ihtiyacı olan şeyleri göstererek, her şeyi tekrar tekrar göstermeyerek kalabalıklığı gidermeye yardımcı olacaktır.

Lighthouse artık alışık olduğumuz sekmeli navigasyon menüsünü kullanmaktadır, ancak, sekmeler içerisinde ikinci seviye menüler de yer almaktadır. Bu seviye görünümleri, sadece aktif sekmenin içeriği ile alakalı aktivitelere yönelik bağlantıları listelemektedir.

9. Ana Özellikleri Vurgulamak
Tüm kontroller aynı öneme sahip değillerdir. Örneğin, yeni bir öğe oluşturduğunuz bir öğe üzerinde sadece "Oluştur" ve "İptal" düğmeleri olabilir. "Oluştur" düğmesi daha önemlidir, zira kullanıcının ilgili sayfada genellikle yapacağı şey budur. Sadece bazı ender zamanlarda sayfayı iptal etmek isteyeceklerdir. O zaman eğer bu kontroller yan yana dizilirlerse, onlara aynı vurguyu yapmak istemeyebilirsiniz.

Lighthouse üzerindeki "Konu Oluştur" düğmesi. Onun hemen yanında "iptal" düğmesini görüyorsunuzdur, sadece salt metin olarak. Düğme yalnızca daha fazla önem kazanmakla kalmaz, ayrıca daha geniş tıklama alanına da sahip olup fark edilmesi daha kolaydır, sırf boyutundan ötürü.

"Oluştur" düğmesi üzerindeki vurguyu arttımak için basitçe farklı stillemeler ve farklı kontrol yöntemleri kullanabiliriz. Bazı uygulamalar form girdi düğmelerini bir eylem oluşturmak için kullanırlar ve iptal düğmesini bir bağlantı olarak yansıtırlar. Bu "oluştur" düğmesi için daha fazla tıklama alanı oluşturmakla kalmaz, ayrıca kullanıcının o sayfada olma nedeni bu olduğu için onların ilgili düğmeyi kolayca fark etmelerini sağlar.

10. Video Kullanmak
Resimler ve metinler kullanıcılarınızla iletişim kurmak ve uygulamanızın özelliklerinden bahsedebilmek için mükemmel bir yöntem olmasına rağmen eğer kaynaklarınız varsa video kullanmak daha da iyi bir alternatif olabilir. Özellikle son yıllarda web üzerinde videonun popülaritesi giderek artmaktadır. Web uygulamaları için videolar, genellikle, bir ürünün özelliklerini göstermek için birer araç olarak kullanılırlar, ancak bu video kullanabileceğiniz tek yöntem değildir.

GoodBarry sitesi ön sayfasında ürünü tanıtmak için bir video kullanır. Site ayrıca uygulama üzerinde kullanıcılara uygulamayı kullanmaya nasıl başlayabileceklerine yönelik yönergeler içeren videolar da içerir.

MailChimp acemi kullanıcılara yardımcı olmak için doğrudan yönetici paneli üzerinde yardımcı videolar içerir.

Bazı web uygulamaları doğrudan uygulamanın içerisinde, kullanıcıya uygulamanın nasıl kullanılabileceğini anlatan videolar kullanırlar. Videolar, uygulamanızın nasıl kullanılabileceğini gösterebilmek için muhteşem birer araçtır, çünkü algılaması bir sayfa metne oranla daha kolaydır ve ayrıca çok daha nettir, zira izleyici ne yapıldığını doğrudan görmektedir.

Daha önce kullanılırlık ile ilgili yazdığım diğer yazılar

Kaynak: Smashing Magazine

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

Photoshop'ta Hazırlanmış 40 Adet Arkaplan ve Soyut Resim Hazırlama Dersi

PcMaSTeR — Sat, 03 Jan 2009 19:03:00 GMT

Soyut resim doğada bulunan bir nesnenin betimlemesi yerine doğada var olmayan şekil ve değişik renklerin bir ahenk içinde sunulmasıdır. Photoshop'da masaüstlerinizi süsleyecek ve içinizi açacak soyut resimleri ve nasıl yapıldıklarını farklı sitelerden toplayıp arşiv yaptım. Anlatımları detaylı ve çalışmalar kolay yapılıyor. İyi süslemeler.

Photoshop'da arkaplan yapmak isteyenlere tam bir arşiv.

1)Abstract Signature

2)Chroma Wallpapers

3)Windows Vista Aurora Effect

4)Abstract Walkthrough

5)Luminescent Lines

6) Abstract Background of Colored Bars

7)Leopard Aurora Borealis

8)Brilliant Light Streaks

9)Space Lighting effects

10)Calculations And Colorization

11)Abstract image tutorial

12)Cool abstract background

13)Abstract Light Rays

14)Yet another abstract signature

15)Abstract Summer Illustration

16)Swoshy lines

17)Abstract Energy Lines

18)Easy Abstract Photoshop Tutorial

19)The lightning effect

20)Intense Solar Flare (Filter) Effect

21)Signature tutorial Movement

22)Abstract Art Piece: "Lonium"

23)Light Rays

24)Abstract Background

25)The OS X Wallpaper

26)Digital Art Piece

27)Grungy Metal Texture

28)Signature Backgrounds

29)Abstract Airbrushing

30)Wallpaper Effect

31)Trendy Background Textures

32)Digital Star Effect

33)Stripy Abstract Wallpaper

34)Magic light streak wallpaper in photoshop

35)Mac-type background

36)Colourful swirl

37)Colorful Tornado

38)Firey Explosion

39)Abstract Artsy Background

40)Paper Effect

kaynak

Bu yazı PcMaSTeR 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ında Altın Oran

PcMaSTeR — Sat, 03 Jan 2009 16:44:00 GMT

Matematik güzeldir. Kulağa garip mi geliyor? Ben de tasarım yapmaya ilk başladığımda aynısını düşünmüştüm. Matematik esnek değildir ve genellikle sıkıcıdır, en azından ben öyle düşünürdüm. Pek çok sanat eserinin, estetik olarak göze hoş gelen tasarımların, nesnelerin hatta bazı insanların ortak matematiksel değerleri paylaştığını duyunca şaşıracaksınız. Yunanca Φ (phi) harfinden esinlenen ve ilahi oran olarak da bilinen altın oran özellikle bunların başında geliyor. Bu rehber bir websitesinin anatomisini ve çatısını kapsıyor ve Alton Oran'ın buna olan etkisini inceliyor.

Web Sayfasının Anatomisi
Web sayfananın öğeleri organlar gibidir, estetik olarak göze hoş gelen ve düzgün işleyen bir web sayfası için hayati önem taşımaktadır.

Bunlar bir web sayfasının ana elementleridir. Bunları organize etmek için pek çok yöntem bulunmakla birlikte en sık kullanılan şablon budur.

Container (Kapsayıcı)

Tüm web sayfaları kapsayıcılar kullanır ve aynı amaca, sayfa elementlerini kapsama amacına hizmet etmek için de olsa kullanım şekli değişkendir. Örneğin body etiketi ya da div en sık kullanılan şeklidir. Geçmişte tablolar bile bu amaçla kullanılmıştır (siz tabloyu sayfanızda kapsayıcı olarak kullanmayın, bu yöntemin değeri kayboldu). Kapsayıcıları, yatak odanızın, mutfağınızn, salonunuzun ve oturmanızın içine döşendiği, evinizi kapsayan fazladan bir duvar olarak düşünün.

Kapsayıcı tipleri:

Likit (Liquid): Tarayıcı penceresini dolduracak şekilde genişler.
Sabit (Fixed): Seçtiğiniz genişliğe sahiptir ve tarayıcı pencere boyutuna göre değişkenlik göstermez.

Header (Başlık)
Başlıklar aslında bir elementi tanımlamalazlar ancak bazıları onu bu şekilde kullanabilir. Genellikle web sayfasınızın logosunu, navigasyonunu, sloganını vs. kapsayan bölüm için kullanılır. Pek çok kişi bu elementleri daha kolay sayfa stillemek, element bölümlemek ve/veya sınırlamak için bir div içerisinde taşırlar. Başlıklar da birer taşıyıcı olarak algılanabilecekleri için yukarıda anlatıldığı gibi Likit ya da Sabit formda kullanılabilir.

Logo
Logonuz kimliğiniz ve markanızdır. Logonuz için en uygun yer başlık içerisinde sol kısımdır. Soldan sağa ve yukarıdan aşağı doğru okuruz, bu sebeple logonuzun ziyaretçilerinizin bakacağı ilk nesne olması muhtemeldir.

Navigasyon
Sayfa navigasyonu en önemli elementlerden birisidir, ziyaretçilerinizin websitenizi kullanabilmesi için gereklidir. Kullanması ve bulunması kolay olmalıdır, ki bu sebeple genellikle başlık bölümünde ya da sayfanın üst kısmına yakın bir yerde konumlandırılır. Bazen yoğun içeriğe sahip websitelerinde her iki tip navigasyonun kullanıldığı görülür.

Navigasyon tipleri:

Yatay: Birbiri ardına dizilmiş ve genelde "navigasyon" diye tabir edilen bir dizi link.
Dikey: Alt alta dizilmiş ve genelde "menü" diye tabir edilen bir dizi link.

Main Content (Ana İçerik)
Herkesin bildiği (ya da bilmesi gerektiği) gibi içerik kraldır! İnsanlar sitenizi ziyaret ettiklerinde genel olarak bakacakları element budur. Web sayfasının ana odak noktası olmalı ki ziyaretçiler aradıklarını kolayca bulabilsinler.

Sidebar (Yan Bar)
Yan bar; reklam, site araması, abonelik bağlantıları (RSS, Twitter, Elektronik posta vs.), iletişim yöntemleri gibi öğeleri içerebilecek bir elementtir. Bu elementi kullanmak her ne kadar gerekli olmasa da pek çok websitesi bunu kullanır. Genellikle sağa dayalı olarak kullanılsa da bazen sola dayalı, ya da ana içeriğin her iki yanında da kullanıldığı görülür. Burada unutulmaması gereken ana içerikten daha baskın hale gelmemesi gerekliliğidir. Dikey VE yatay navigasyon kullanan websitelerinde yan bar genellikle dikey navigasyon elementi ile birlikte kullanılır.

Footer (Altlık)
Web sayfasının altı genellikle altlık elementini kullanır ve bu element ziyaretçilerinizin sayfanın tamamlandığını anlamasını sağlar. Tıpkı başlık elementinde olduğu gibi altlık elementi de kullanması zorunlu bir element olmamakla birlikte daha çok bir kapsayıcı elementtir. Altlık içerisinde telif bilgileri, yasal uyarılar ve iletişim bilgilerinin kullanıldığı sık görülür. Web sitenizin ana sayfası, iletişim bilgilerinin yer aldığı sayfa gibi önemli sayfalara birkaç bağlantı içermesi de tercih edilid. Bazı websiteleri bu alanı sayfanın içeriği ile ilişkili başka içeriklerden ya da diğer önemli içeriklerden bahsetmek amacı ile kullanırlar.

"Whitespace" (Boşluk)
Web sayfasının bu alanı tipografi ya da diğer içerikle doldurulmayan tüm alanlara verilen genel addır. Bazen her boşluğu doldurmak zorunda hissedebilirsiniz kendiniz ama bunun olmasına izin vermeyin. Boş alanlar iyi web tasarımının tıpkı içerik gibi önemli bir alanıdır. Bildirgeç websitesinde beyaz alanların kullanıcıların içerik arasında yolunu bulabilmeleri için zekice kullanıldığını, sayfa balansı oluşturduğunu ve içerik bölümlemesini sağladığını göreceksinizdir.

Altın Oran ve Izgara Kullanımı
Daha önce matematiğin güzel olduğunu söylediğimi hatırlıyor musunuz? Görsel zevki altın oran temelinde algılıyoruz. Binlerce yıldır sanatçılar, tasarımcılar, mimarlar vb. bilerek ya da bilmeyerek göze hoş gelen eserlerin ortak bir oran kullanarak oluşturdular. Peki bu sihirli numara nedir? 1.62 (aslında 1.618...) Bu numaranın kökenine değinmeyeceğim ancak nasıl kullanabileceğinizi göstereceğim.

Altın oranı kullanmak çok kolaydır. Diyelim ana içerik ve yan bar sütunlarınızın genişliğini buldunuz. İçerik alanınzın toplam genişliğini aldınız (örneğimizde 900px kullanacağız) ve onu 1.62'ye böldünüz. Yukarıdaki örnekte görüldüğü gibi 900px'i 1.62'ye bölerseniz 555.55px elde edersiniz. Sayının tam olmasına gerek yok, o yüzden biz 555px diyelim. Şimdi ana içerik elementinin 555px olacağın, yan barın da 345px olacağını biliyorsunuz. Ne kolay değil mi?

Ama durun! Eğlence burada sona ermiyor. Altın oranı elementin yükseliği ile oranlayarak da kullanabilirsiniz. Bu, Altın Oran orantıları ile estetik olarak göze hoş gelen elementlerin oluşması ile sonuçlanacaktır.

Izgara (Grid) Kullanmak

Eğer siz de diğer pek çok insan gibiyseniz, bu oranı kullanmak istediğiniz her zaman hesap makinesine koşturmayacaksınız. Bu işlemi basitleştirmek için ızgara kullanabiliriz. Tek yapmanız gereken genişliğinizi ve/veya yüksekliğinizi üçerli bölümler halinde ayrıştırmaktır.

Her bölüm kendi içerisinde de üçerli gruplara ayrılarak daha detaylı ızgaralar oluşturulabilir. Eğer daha önce yayımladığım BluePrint CSS Framework'ünü Kullanmak yazımı okuduysanız, BluePrint CSS iskeletinin detaylı bir ızgara sistemini kullandığını göreceksinizdir. Izgara sistemleri tasarımı kolaylaştırmak ve çabuklaştırmakla kalmaz, onları estetik olarak göze hoş gelen bir çatıya yerleştirir. Eğer halihazırda tasarımlarınızı yaparken ızgara sistemlerini kullanmıyorsanız, şimdi başlangıç için doğru zaman olabilir. Fireworks, Photshop ve daha fazlası için http://960.gs üzerinden ızgara modellerini indirebilersiniz. 960.gs, CSS ızgara modelini kullanan bir başka iskelet sistemidir.

Yukarıdaki resimden de görebileceğiniz üzere NetTuts Altın Oran'a iyi uyum sağlamış görünüyor. Sayfanın üst üçte birlik kısmı kendi arasında yine üçe ayrılmış durumda ve hatta buradan başlık alanının kendi içerisinde de gruplara ayrıldığını görebiliyorsunuz. Altın Oran'a oldukça yakın. NetTuts tasarımının göze neden hoş geldiğine şaşmamak gerek.

Eğer tasarım işinde yeniyseniz, sizi bazı popüler siteler bulmanızı, onların element yayılımını ve Altın Oran ile ızgara sistemleri ile olan ilişkisini incelemenizi şiddetle öneririm. Ardından biraz zaman ayırarak kendi elementleriniz üzerinde Altın Oran'ı uygulamaya ve sonucu ızgara üzerine yerleştirmeye çalışın.

Kaynak: NetTuts

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