bildirgec.org - tkinali - beğendikleri

15 Faydalı Web Tabanlı Link Kontrol Aracı

tkinali — Tue, 18 Aug 2009 09:29:00 GMT

Sitenizde özellikle dış bağlantılar varsa bunları sık kontrol etmeniz gerekmektedir. Bunun için tek tek bağlantıları kontrol etmek (bağlantı sayısı çok ise) neredeyse imkansız hale gelebilir. Ayrıca kırık linkler seo sıralamanızı da etkiler. Çünkü google pr değeri sitenizin iç ve dış bağlantıların durumu ile ilgilidir.

Bu yazıda birbirinden faydalı kırık link kontrol araçlarına ulaşabilirsiniz.

1. W3C Link Checker

Web sayfası üzerindeki bağlantıları izler.

2. Link Validation Spider

Blog veya sitenizi metin alanına yazın ve kırık bağlantıları kontrol edin.

3. Broken Link Checker from iWebTool

Bu basit ve kolay kullanıma sahip kırık link kontrol aracıdır. Bu aracın kullanımı ile ilgili basit bir de ders bulunmaktadır.

4. Broken Link Checker from AddMe.com

Bu site e-mail adresinize ihtiyaç duyuyor. Sitenizi ve sizden istenilen gerekli bilgileri girin detaylı bilgiler e-mail adresinize gelecektir.

5. LinkTiger

Size gelişmiş link kontrol desteği sağlamaktadır.

6. 2bone Link Checker

Bu link kontrolü sadece normal html bağlantıları test eder.

Diğer Online Kırık Link Araçları

Aşağıda eksta kırık link kontrol araçları yer almaktadır. Çoğu zaman ihtiyaç duymazsınız ancak bu alterantifler size yararlı olacaktır.

7. Link Checker from SubmitExpress

8. Link Checker :: Webmaster Toolkit

9. Website Goodies – Check Broken Links

10. IT-India.com’s Broken Link Checker

11. CreatingOnline.com’s Broken Link Checker

12. Site Link Analyzer

13. dead-link-checker.com

14. Direct To India’s Link Checker

15. Dead Link Checker

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

Seo'yu Geliştirmek İçin 12 Web Tasarım Dizini

100 Ücretsiz Online Seo Aracı

25 Önemli Web Tasarım Aracı

kaynak: webdesignbooth.com

yazılarımı takip edebilirsiniz.

diğer yazılarım | kişisel blogum
friendfeed | twitter | delicious

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

90 Yeni ve Yüksek Kaliteli Photoshop İle Web Şablonu Oluşturma Dersi

tkinali — Mon, 17 Aug 2009 16:46:00 GMT

Web tasarımı için photoshop büyük bir kolaylık sağlıyor. Sürekli yeni dersler paylaşılması, tasarımcılar için büyük bir fırsat. Bu yazıda birbirinden kaliteli photoshop ile web tasarım dersleri bir arada toplanmıştır.

1. Create a Clean and Colorful Web Layout in Photoshop (Photoshop'da Temiz ve Renkli Web Şablonu Oluşturmak)

2. Create a portfolio/business website layout (portföy/iş website şablonu oluştur)

3. Design a Sleek and Modern Hosting Layout (Pürüzsüz ve Modern Hosting Şablonu Tasarlamak)

4. Create a grunge wordpress theme with Photoshop (Photoshop ile eskimiş wordpress teması oluşturmak)

5. Create A Forum Layout Using Photoshop (Photoshop Kullanarak Forum Şablonu Oluşturmak)

6. How To Create a Green Grunge Web Layout (Yeşil Renkli Eskimiş Efektli Web Şablonu Nasıl Oluşturulur?)

7. Create a Nature Inspired WordPress Layout (Doğa ile esinlenmiş wordpress şablonu oluşturmak)

8. Create wordpress theme in Adobe Photshop (Adobe Photoshop'da wordpress teması oluşturmak)

9. Web Site Design Tutorial: Wellknown.as Case (Web site tasarım dersi)

10. Create an Amazing Layout Using Textures (Dokuları kullanarak inanılmaz şablon oluşturmak)

11. How to Design a WordPress Theme in Photoshop (Photoshop'da wordpress teması nasıl oluşturulur?)

12. Create a Stylish Business Layout in Photoshop (Photoshop'da Şık firma şablonu oluşturmak)

13. Design a creative wordpress theme (Yaratıcı wordpress teması tasarlamak)

14. Create a communication layout in Photoshop (Photoshop'da iletişim şablonu oluşturmak)

15. How to Make a nice, eye catching web/blog layout (Göz alıcı, güzel web/blog şablonu nasıl yapılır?)

16. Softblue Template Tutorial (Hafif mavi şablon dersi)

17. Design a Dark, Contrasted Layout in Photoshop (Photoshop'da koyu, kontrast şablon tasarımı)

18. Portfolio Layout #11 (Portföy şablonu)

19. How to Design a Space Futuristic Gallery Layout in Photoshop (Photoshop'da gelecekçi uzay galerisi şablonu nasıl tasarlanır?)

20. Software Layout #4 (Yazılım şablonu)

21. Web Design Layout #10 (Web Tasarım Şablonu)

22. Create a webdesign company layout in Photoshop (Photoshop'da web tasarım şirketi şablonu oluşturmak)

23. Clean Business Layout Tutorial (Temiz iş şablonu dersi)

24. Make a nice corporate website for a product (Bir ürün için güzel bir kurumsal website yapmak)

25. Create a Portfolio Layout with Wooden Background in Photoshop (Photoshop'da ahşap arkaplan ile portföy şablonu oluşturmak)

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

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

Web Tasarımında Etkili Başlıklar

Harika Web Tasarımı Yaratıcılığı: 50+ Örnek ve İlham Kaynağı

Web Tasarımcılar İçin 20 Mükemmel Eğitim Sitesi

En iyi 5 web tasarım aracı

Web Tasarımı Oluşturmak İçin 16 En Hoş Photoshop Dersi (İngilizce)

Web Tasarımcılar İçin Ücretsiz ve Açık Kaynak 40 Windows Programı

Web Tasarımcılar İçin Gayet Faydalı 15 "Css Grid Yerleşimi" Üreteci

25 Önemli Web Tasarım Aracı

Web Tasarımı ve Geliştiricileri İçin 15 Faydalı CSS Forum

Web Tasarımcıları İçin 12 Mükemmel Sosyal Haber Sitesi

Web Tasarımcılar İçin 25+ Grafikli Bilgi

Web tasarımcıları için en iyi 22 başlangıç kiti

kaynak: 1stwebdesigner.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

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

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

Web Tasarımcıları İçin 30 Açık Kaynaklı Uygulama

tkinali — Tue, 31 Mar 2009 15:55:00 GMT

Bir web tasarımcısı olarak size yardımcı olabilecek pek çok açık kaynaklı yazılım bulunmaktadır. açık kaynaklı projeler sırf ücretsiz oldukları için mükemmel olmakla kalmaz, ayrıca onlara katkıda bulunan azimli geliştiriciler de ilgili yazılımları mükemmel kılarlar. Günümüzün zor ekonomik koşullarında harcamalarınızı mümkün olduğu kadar kısabilmek her zaman kullanışlıdır ve bu sebeple açık kaynaklı alternatifler de her zaman göz atılmaya değerdir.

Bu yazıda web tasarımcıları için 30 adet son derece kullanışlı uygulamayı bulacaksınız. Listede kaynak kodu düzenleyicilerinden WYSIWYG düzenleyicilerine, grafik tasarım yazılımlarından görev yönetim yazılımlarına kadar pek çok faydalı yazılımı bulacaksınız.

Kaynak Kodu ve WYSIWYG Düzenleyicileri

1. KompoZer

KompoZer

KompoZer tam özellikli bir web yayımlama uygulaması olup bütünleşik FTP istemcisi, sekmeli kullanıcı tasarımı ve tüm önemli işletim sistemleri için destek barındırmaktadır.

2. Bluefish Editor

Bluefish

Bluefish Editor, web tasarımcıları ve programcıları için geliştirilen hafif ve hızlı bir düzenleyicidir. Uygulamanın HTML belgeleri için sunduğu sihirbazlar, mükemmel proje yönetim özellikleri ve kaynak kodlarını yenileri ile değiştirmek için güçlü ara ve değiştir seçeneği gerçekten kullanışlı.

3. Quanta Plus

Quanta Plus

Quanta Plus güçlü bir web geliştirme IDE'si olup yüksek miktarda genişletilebilir ve özel betikleri de çalıştırabilir. Uygulamanın sunduğu muhteşem görsel CSS düzenleyicisi kodlar için otomatik tamamlama ve kod ipuçları görüntüleme yeteneklerine sahip.

4. Amaya

Amaya

Amaya, World Wide Web Konsorsiyumu (W3C) tarafından geliştirilen bir web düzenleyicisi ve web tarayıcısıdır. Amaya ilk olarak bir HTML / CSS düzenleyicisi olarak geliştirilmişti ancak zaman geçtikçe desteklediği diller arasına SVG ve MathML gibi pek çok XML tabanlı sistemleri de dahil etti.

5. CSSED

CSSED

CSSED tam özellikli GTK-2 tabanlı CSS düzenleyicisi olup yüksek miktarda genişletilebilirlik için eklenti sistemi bulunmaktadır. İlgilenen okurlarımız CSSED Eklentilerine bir göz atabilir.

6. OPEN BEXI HTML Builder

OPEN BEXI HTML Builder

Open BEXI HTML Builder tarayıcı tabanlı ve açık kaynaklı bir uygulama olup HTML web sayfaları oluşturmak için kullanılabilir. Uygulamanın arayüzüne entegre edilmiş CSS renk seçicisi ve basit bir proje yönetim seçeneği de mevcut.

7. NOTEPAD++

NOTEPAD++

NOTEPAD++ Windows için geliştirilen oldukça popüler bir metin düzenleyici yazılımıdır. Sırf web geliştiricileri için geliştiriliyor olmasa da HTML, XML, CSS ve JavaScript için sunduğu derinlemesine destek sebebiyle pek çok web geliştiricisi tarafından kullanılmaktadır.

8. jEdit

jEdit

jEdit özellikle programcılar için geliştirilen bir metin düzenleyicisidir. Mac, Windows ve Linux üzerinde çalışabilen uygulamanın HTML, XML, CSS, JavaScript ve diğer pek çok dile özgü kod renklendirme desteği bulunmaktadır.

9. SeaMonkey

Mozilla Vakfı tarafından geliştirilen SeaMonkey, SeaMonkey Composer adında tarayıcıya bütünleşik sade ancak bir o kadar da güçlü bir HTML düzenleyicisini de bünyesinde barındıran hepsi bir arada web tarayıcısıdır.

Grafik / Görsel Düzenleyicileri

1. GIMP

GIMP

GIMP, günümüzün en tanınan açık kaynak projelerinden birisidir. Uygulamanın sunduğu özellikler ile ücretli rakiplerine bile taş çıkartabilecek kalitede bir yazılım olan GIMP'in arabirimine alışmak için zaman kaybetmek istemiyorsanız ve Photoshop'un arabirimine aşina iseniz, o zaman Gimpshop adındaki ve Photoshop'un arayüzünü GIMP'e uyarlayan GIMP eklentisini deneyebilirsiniz.

2. Inkscape

Inkscape

Inkscape, rakipleri Adobe Illustrator ve CorelDRAW gibi vektör grafiklerini düzenlemeye yönelik geliştirilen açık kaynaklı bir yazılım.

3. Krita

Krita

Krita, KOffice için geliştirilen bir boyama ve görsel düzenleme yazılım uygulamasıdır.

4. Karbon14

KOffice

Karbon14 genişletilebilir vektör tabanlı çizim uygulaması olup KOffice projesinin bir parçasıdır.

5. Kivio

Kivio

Bir web tasarımcısı olarak genellikle iş planınızı ve tasarımınızın prototipini oluşturmanız ve gezinti şemaları için çizelgeler hazırlamanız gerekebilir. Kivio işte tam da bu alanda imdadınıza yetişiyor ve prototiplerinizi, çizelgelerinizi ve diyagramlarınızı oluşturmak için size yardımcı olacak bir dizi faydalı aracı sunuyor. Bu yazılım da KOffice yazılım paketinin bir parçası.

6. Dia

Dia

Dia diyagram oluşturmak için kullanabileceğiniz bir diğer kullanışlı uygulama.

7. Skencil

Skencil

Skencil özellikle illüstrasyonlar ve diyagramlar için kullanılabilecek bir vektörel çizim uygulaması. Uygulama üzerinde hazırladığınız kompozisyonlarınızı pek çok vektör düzenleme uygulamasının tanıdığı EPS biçiminde kaydederek farklı uygulamalar üzerinde de çalışabilirsiniz.

8. OpenOffice Draw

OpenOffice Draw

OpenOffice Draw OpenOffice yazılım paketinin bir parçası olup basit ancak bir o kadar da güçlü çizim ve diyagram yazılımıdır.

9. mtPaint

mtPaint

mtPaint, Mark Tyler (mt) tarafından geliştirilen sade ve basit bir boyama ve düzenleme uygulaması.

10. FontForge

FontForge

Eğer daha önce tasarımlarınız için kullandığınız fontları düzenleme ihtiyacı hissettiyseniz, o zaman FontForge uygulaması, sunduğu farklı araçlarla bu ihtiyacınıza yanıt verecektir.

11. ImageMagick

ImageMagick güçlü bir görsel düzenleme yazılımı olup, çalışmalarınızı bitmap tabanlı biçimlerde kaydedebilmenizi sağlıyor. Uygulama, GIF, JPG, SVG ve PDF gibi popüler web biçimlerinin de yer aldığı yüzün üzerinde dosya biçimini destekliyor.

12. GraphicsMagick

GraphicsMagick, uygulamanın ana geliştiricileri tarafından görsel işleme için İsviçre çakısı olarak isimlendiriliyor. Uygulamanın desteklediği görsel biçimlerinin listesine bir göz atabilirsiniz.

Yardımcı Araçlar

1. HTML TIDY

HTML TIDY ücretssiz ve açık kaynaklı bir uygulama olup HTML kodlarını iyileştirmeye ve düzeltmeye yarıyor.

2. Cyberduck

Cyberduck

Cyberduck, Mac OS X kullanıcılarının gönlünde taht kurmuş açık kaynaklı ve ücretsiz bir FTP istemcisi. Yazılımın sunduğu bütünleşik Mosso Cloud dosyaları için destek ve yine bütünleşik Amazon S3 desteği, uygulamayı, web tasarımcıları ve web uygulama geliştiricileri için bir numara yapıyor. Eğer Mac OS X için FTP Yazılımı arıyorsanız, Cyberduck yazılımını mutlaka denemelisiniz.

3. FileZilla

FileZilla

FileZilla en popüler açık kaynaklı FTP istemcisi olarak bilinir. Linux, Mac ve Windows işletim sistemleri için sürümleri bulunan FileZilla uygulamasının bir dizi protokol için desteği bulunuyor.

4. WinSCP

WinSCP

WinSCP, sadece Windows üzerinde çalışabilen bir (S)FTP istemcisidir. Uygulamanın sade arayüze sahip dosya yöneticisi, dosyalarınız üzerinde gezinebilmenizi ve onları düzenleyebilmenizi sağlıyor.

5. CamStudio

CamStudio

Bir gün müşteriniz ya da proje yöneticiniz sizden bir web sitesi turu ya da elektronik kurs gibi bir bilgisayar simülasyonu hazırlamanızı isteyebiir. Eğer herhangi bir ekran görüntüsü yakalama uygulamasına ihtiyacınız olursa, tam özellikli ve açık kaynaklı CamStudio başkasını aramanıza gerek yok.

6. Greenshot

Greenshot

Web tasarımcıları genellikle belgeleme ya da tarayıcı içerisinde tasarım sunumları için ekran görüntüsü yakalama yazılımlarına ihtiyaç duyarlar. Greenshot ücretsiz ve açık kaynaklı bir ekran görüntüsü yakalama yazılımı olup özellikleri ile göz dolduruyor.

7. ZScreen

ZScreen

ZScreen, tam ekran, görünen alan ya da monitörünüzün sadece belirli bir bölümünün ekran görüntüsünü alabilmenize yarayan son derece kullanışlı ve açık kaynaklı bir ekran görüntüsü yakalama yazılımıdır. Alınan ekran görüntülerinin otomatik olarak FTP sunucularına aktarılmasını ya da ImageShack servisine aktarılmasını sağlayabilirsiniz. Özellikle sık sık ekran görüntüleri paylaşan kullanıcılar için bu iki özellik çok faydalı olacaktır.

8. Xournal

Xournal

Xournal, Tablet bilgisayarınızı bir girdi aygıtı olarak kullanabilmenizi sağlayan sade ancak güçlü bir not alımı ve taslak uygulamasıdır. Uygulama, Windows Journal ile benzer şekilde çalışıyor.

9. Firebug

Firebug

Firebug son derece kullanışlı, değişken ve her web geliştiricisinin bilgisayarında kurulu olması gerektiğine inandığım bir hata ayıklama aracı. Özellikle HTML ve CSS koduna yeni iseniz ve geliştirdiğiniz web sitelerindeki hataları ayıklamak istiyorsanız doğrudan tarayıcı üzerinden bu değişiklikleri gerçekleştirebilirsiniz.

10. Gallery

Gallery

Gallery uygulaması sayesinde görsel kaynaklarınız üzerinde derinlemesine kontrol sahibi olabilirsiniz. Web tabanlı görsel (imaj) galerisi olan bu uygulama sayesinde görsellerinizi depolayabilir, organize edebilir ve ziyaretçileriniz ile paylaşabilirsiniz.

Beğendiğiniz Uygulamalar Üzerindeki Deneyiminizi Paylaşın

Eğer sizin en beğendiğiniz açık kaynaklı uygulama yukarıda listelenmemişse ya da yukarıda listelenen uygulamalar ile ilgili paylaşmak istediğinz bir şey varsa, yorumlarınızda belirtmeyi ihmal etmeyin.

Tasarım Araçları Hakkında Yazdığım Diğer Yazılar

Açık Kaynaklı Yazılımlar Hakkında Yazdığım Diğer Yazılar

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

Krizde iş yoksa, iş fikirleri var

tkinali — Fri, 09 Jan 2009 14:42:00 GMT

Girişimci ruh doğuştan mıdır? bilinmez ama, girişimci artık yapmak istediği işin potansiyelini internetten araştırıyor, hatta hangi işleri yapabilir, nasıl bir yol izler bunları internet ortamında rahatca bulabiliyor. Böyle bir arayış içinde olanlar yurtiçinde ve yurtdışında öne çıkan siteleri aşağıda bulabilir.

Yurtdışı'ndan;

Entrepreneur.com: Bu alanda dünyanın bir numarası diyebiliriz. O kadar kapsamlı bir siteki içerisinde aradığınızı buluyor kaybediyor ve yeni birşey buluyorsunuz:) Evrensel girişimcilerin ortak noktası.

Springwise.com: Blog şeklinde hazırlanmış olan bu sayfada ilginç ve başarılı olmuş iş fikirlerini firmaların web adreslerine yönlendirme yapılarak yer veriliyor. Tabi ki buradaki her herşey yurtdışında başarılı olmuş burada da olur diye bir şey yok.

Coolbusinessideas: Bu sayfada Springwise benzeri. Arada Springwise'dan yazılar da gözünüze çarpabilir:) Bu sayfada başarılı iş fikirlerini bulabileceğiniz gibi Türkiye'de olmayan ve yararlı ürünleri de bulabiliyorsunuz. Hatta ülke distribütörü arayan firmalarla iletişime geçebilirsiniz.

Yurtiçinden;

Isfikrim.org: Türkiye'de beğeniyle takip ettiğim bir web sitesi Türkiye'de başarılı olabilecek iş fikirlerinin, franchis e-bayilik veren firmaların, girişimcilere yönelik ürünlerin bulunduğu bir web sitesi olarak faaliyet gösteriyor.

Girisimicin.com: Blog şeklinde hazırlanmış girişimcilere yönelik bir platform. Girişimcilerin yorumlarıyla, kendi fikirleriyle, söylemek istedikleriyle katkıda bulunabildiği bir oluşum.

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

tkinali — 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ı tkinali 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

Bir Yazı Tipini Tanımlamak için 5 ücretsiz Site

tkinali — Fri, 26 Dec 2008 12:44:00 GMT

İnternette gezerken bir yazı şeklini beğendiniz ve fontunu öğrenmek istiyorsanız, işte yazı fontunu(tipini) teşhis etmek için size beş değişik site. Webmasterların ücretsiz olarak font tanımlaması yapabileceği yerlerin bir listesini aşağıda bulabilirsiniz.

1. What The Font
En büyük yazı tipi tedarik edenlerinden biri ile geliştirilmiş whatthefont, yazı tipilerinizi teşhis etmek için bir numaradır. Yalın şekilde sunucuya yazı tipisinin bir resmini yüklersiniz ve sistem sizin için çok seçenekli yazı tipi sonuçları gösterecektir.

What The Font

2. Identifont
Bu servis, yazı tipi hakkındaki soruları sorgu sistemi ile arar bulur.
Servis, 534 yayımlayıcıdan yazı tipileri hakkında bilgiye sahip ve internet'te yazı biçimlerin en büyük bağımsız dizini olduğunu iddia ediyor.

Identifont

3. Message Boards: Typophile
Bu site, belki yazı tipi uzmanlarının en büyük ve en geniş topluluğudur. Siz arıyor olduğunuz yazı tipinin bir resmini postalarsınız ve cevabı beklersiniz.

Typophile

4. Bowfint
Bu site de, söz konusu yazı tipi karakter sorularınızı cevaplamanın yanında yazı tipinizi bulduğunuzda ayrıca başka font yardımlarında bulunmak için çok kısımlı çevrimiçi araçlar da sitede bulunmaktadır.

The Font

5. TypeNavigator
Her karakter biçim hakkında sorularınızı sormanın yanında, Bowfint sistemi gibi aynı prensiplere sahip Fontshop ile geliştirilmiş fontlar da bulunmaktadır.

TypeNavigator

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

Flatout hayranlarına Flatout: Ultimate Carnage

tkinali — Fri, 01 Aug 2008 12:30:00 GMT

Uzunca bir bekleyişin ardından ve FlatOut 2'den sonra Flatout: Ultimate Carnage piyasaya sürüldü. Flatout serisinin üçüncüsü olan bu oyun Bugbear Entertainment tarafından gelişirildi ve Empire Interactive tarafından yayımlandı.

oyundan bir kare

Xbox 360 ve PC için yayımlanan oyun PlayStation Portable (PSP) için de Flatout: Head On adında yayımlanıyor. Yeni oyun modlarının yer aldığı oyunda yeni müzikler de bulunmakta ve grafiklerde iyileştirmeye gidilmiş. Oynanış tarzı olarak eski serilerin devamı niteliğinde olan oyunun web sitesine buradan, ekran görüntülerine buradan, videolarına ise buradan ulaşabilirsiniz.

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

Başlık için 51 font

tkinali — Sat, 02 Aug 2008 16:33:00 GMT

sitenize ziyaretçi çekmek epey zor birşeydir. bu ziyaretçiyi sitede tutmak daha da zordur. Siteye giren ziyaretçi herhangi birşey okumadan önce gözleriyle siteyi tarar.

Bu taramada gözüne çarpan bir şey bulursa sitenizde kalır, yoksa hemen çıkar. böyle durumlar da sitede kullandığınız fontlar ve başlık önem kazanır. çünkü belirgin olan başlık ziyaretçiyi sitede tutar.

Ziyaretçileriniz sitenizde kalsın diye sizin için başlık fontları buldum. Bu sitede 51 adet başlıklarda kullanmaya uygun font seti bulunuyor.

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

6 popüler Css Reset tekniği

tkinali — Sun, 03 Aug 2008 08:25:00 GMT

css konusuyla ilgiliyseniz muhtemelen css reset (sıfırlama) tekniğini duymuşsunuzdur. Daha önce css sıfırlama dosyası yazısında da bahsettiğim bu teknik, web sitenizin cross browser uyumluluğu açısından çok yararlı bir tekniktir.

Fakat internette bu konuda araştırma yapınca farklı css reset teknikleriyle karşılaşabiliyorsunuz. İşte tam bu sayfada bunların en popülerleri bir araya toplanmış ve kısa kısa açıklaması yapılmış. incelemenizi tevsiye ederim.

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