bildirgec.org - unlocoturco - beğendikleri

Nasıl Yapılır: İçeriğinizi Facebook Sayfanızdan Otomatik Yayınlama!

unlocoturco — Thu, 21 Jan 2010 13:43:00 GMT

Sosyal Medya aleminin sahip olduğu büyük kullanıcı kitlesi, Web siteleri veya blogları aracılığı ile içerik üreten Web kullanıcılarının, içeriklerini arama motorları için optimize etmelerinin yanında, Sosyal Medya için de optimize etmeleri (gerekli altyapıyı hazırlamaları) gereğini/zorunluluğunu ortaya çıkarmış durumda.

Nasıl Yapılır: İçeriğinizi Facebook Sayfanızdan Otomatik Yayınlama!

Bu Nasıl yapılır yazısında; Web sitesi veya blog sahiplerinin, sitelerinden yayınladıkları içeriklerini, 350 milyondan fazla kullanıcı sayısına sahip olan Facebook'un en önemli bileşenlerinden biri olan Facebook Sayfalarından, otomatik olarak/kendiliğinden, nasıl yayınlayabilecekleri anlatılmakta.

1- Facebook tarafından hazırlanmış olan buradaki Notlar (Notes) uygulamasına gidiyoruz.

2- Sol üstteki Sayfam'a ekle linkine tıkladıktan sonra açılacak olan pencereden, içeriğimizin yayınlanmasını istediğimiz sayfamıza Notlar uygulamasını ekliyoruz.

3- Notlar uygulamasını eklediğimiz Facebook Sayfamıza giderek, bu sayfada bulunan Sayfa'yı düzenle linkine tıklayıp, sayfamızın düzenleme/ayarlar bölümüne geçiyoruz.

4- Düzenleme sayfasında bulunan Notlar uygulamasına ait bölümde önce; Uygulama Ayarları linkine tıklıyor ve açılan penceredeki Profil sekmesinden Notlar'ın Kutu ve Sekme eklentilerini sayfamıza ekliyoruz. Sonrada; yine aynı pencerede bulunan Ek İzinler sekmesinden de Akışta yayınla özelliğini işaretliyoruz.

5- Yine Notlar bölünde bulunan, Düzenle linkine tıklıyoruz.

6- Gelecek olan sayfanın sol üst bölümünde yer alan Not Ayarları alanındaki Bir blog aktar » linkine tıklıyoruz.

7- Vee Mutlu Son: Web sitemize veya blogumuza ait olan besleme'nin (feed) linkini yazıp ekliyoruz.

Eğer adımları doğru bir şekilde uygulamışsanız (tabi bende herhangi birşey atlamadıysam) sonuç buradaki gibi olacaktır.

Facebook sayfanızdaki hayranlarınız, siz web sitenizden veya blogunuzdan herhangi bir içerik yayınladığınızda, içeriğinizin bir ön sunumunu kendi duvarlarında görüp tıklaycak ve Facebook sayfanızın Notlar bölümüne gelerek, içeriğinizi görüntüleyecekler.

Ayrıca bu notların, başta Google olamak üzere, arama motorları tarafından eklendiğini/indexlendiğini de belirteyim.

Son olarak: Eğer Facebook sayfalarındaki hayranlarınızı, içeriğinizi görüntülemek üzere, direkt olarak sitenize yönlendirmek isterseniz; Facebook'un uygulama dizininde bulunan birçok beseleme (Örnek: Social RSS) uygulamasından birini kullanabilirsiniz.

Bonus+++++:
+Seo ve Web Marketing İçin Harika Araçlar
+SEO'yu Google'dan Öğrenmeye Başlayın
+Google'dan SEO Dersi:URL Adresleri Nasıl Olmalı?
+iGoogle Sayfanıza 3 Adet SEO Uzmanı Gadget
+Sosyal Start Page için 7 yol

Kaynak: Araç: Facebook Notlar
Paylaş: Sosyal Medya paylaşım sayfası burada!
algoz Takip Noktaları:
Blog FriendFeed Twitter Facebook E-posta RSS Mobil iPhone

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

Herkesin işine yarayabilecek 69 web aracı

unlocoturco — Tue, 05 Jan 2010 14:56:00 GMT

Yine daha önce bildirgeç'de bahsi geçmemiş araçların çevirisini yaptım. Tamamı burada

Adobe BrowserLab

browserlab

Çapraz tarayıcı testi için kolay ve hızlı bir çözüm sunuyor. Bu araç, web sitenizi birçok tarayıcı ve işletim sisteminde gerçek zamanlı olarak izleyebilme imkanı sağlıyor.

Notable

notable

Geri bildirim olayını en iyi hale getiren bir uygulama olan notable ile takımınız; web siteniz ile ilgili görüş ve önerilerini doğrudan web sitesi üzerinden yapabiliyor. Bu araç ile hızlı ve kolayca tasarım, kodlama ve içerik konusunda geri bildirim yapabiliyorsunuz.

PhotoSnack

photosnack

Ücretsiz olarak fotoğraflarınızı yükleyip slayt gösterileri hazırlayabileceğiniz, hazırladığınız görüntüleri aile ve arkadaşlarınızla paylaşabilmenize olanak sağlıyor.

Concept Feedback

concept feedback

Concept feedback; pazarlamacı, tasarımcı ve geliştiriciler için basit, faydalı ve ücretsiz olan bir başka geri bildirim aracı.

Glasscubes

glasscubes

İyi bir takım çalışmasına olanak sağlayan glasscubes, e-posta gibi zaman kaybettiren iletişim yöntemlerinin yerine geçmeye aday, küçük ve orta ölçekli takım ve organizasyonlar için zaman tasarrufu ve hız sağlayan çok faydalı bir araç.

Remindo

remindo

Takım çalışmaları için bir başka araç olan remindo ile 3 gb'a kadar paylaşım yapabilir, hızlı bir şekilde takım arkadaşlarınızla iletişim kurabilirsiniz.

PDF to Excel

pdf to excel

PDF dosyalarını Excel formatına çevirip üzerinde düzenleme yapmanıza olanak sağlayan bir araç.

CeeVee

ceevee

Kolaylıkla cv oluşturabileceğiniz bir web aracı

TimeBridge

timebridge

Çalışma hayatınızı düzene sokacak çevrimiçi bir araç olan timbridge ile toplantı düzenleyebilir, ajanda ve not tutabilir, buluşmalarınız ve toplantılarınız için davetler gönderebilirsiniz.

CodeRun Studio

coderun studio

Kod geliştirici ve tasarımcılar için çok faydalı bir araç olan coderun studio ile girdiğiniz kod ve yaptığınız tasarımın nasıl bir hal aldığını anlık olarak görebiliyorsunuz. asp ve php destekliyor ve hatta facebook uygulaması bile kodlamanıza imkan sağlıyor.

Bidsketch

Öneri ve teklif kartları hazırlamanıza olanak sağlayan bu araç ile hazırladığınız teklif kartlarını pdf'ye çevirebilir ve çevrimiçi olarak paylaşabilirsiniz.

Go2Convert

go2convert

Fotoğraf ve resimlerinizi kolaylıkla boyutlandırmaya yarayan çevrimiçi bir araç. Hiç bir yazılım yüklemeye gerek kalmadan fotoğraflarınızı yeniden boyutlandırabilirsiniz.

Taweet

taweet

Bir twitter uygulaması olan taweet şu soruya cevap veriyor: "gelecekte ne yapacaksın?"

Colorjive

colorjive

Bu araç; evinizin, ofisinizin duvarlarını sanal ortamda boyayarak nasıl durduğunu görmenize yardımcı oluyor.

247Webmonitoring

247webmonitoring

Websitenizi 7 gün 24 saat boyunca 15 dakikalık periyotlarla kontrol edip çevrimdışı kaldığı anları kontrol eden bir web aracı. e-posta ve sms olarak da size bilgi gönderiyor.

Timetonote

timetonote

Bir başka takım içi iletişim aracı olan timetonote ile takım arkadaşlarınız arasında her türlü bilgiyi kolayca ve hızlı bir şekilde paylaşabilirsiniz.

ViewLike.Us

viewlike.us

Websitenizin farklı çözünürlüklerde nasıl göründüğünü size gösteren bir web aracı.

Mockingbird

mockingbird

Web sitesi ya da uygulama oluşturup bunu paylaşmanıza olanak sağlayan bir web sitesi.

Moogo

moogo

Daha önce hiç web sitesi yapmamış olan kullanıcıları hedefleyen moogo ile kolaylıkla web sitesi yapabilir, güncelleyebilir ve paylaşabilirsiniz.

Task.Fm

task.fm

Basit bir hatırlatma ve görev yönetim aracı. Oluşturduğunuz görev ya da hatırlatmaları size sms, e-posta ya da sesli çağrı ile bildiriyor.

Ta-da List

ta-da list

Yapılacaklar listesi oluşturmanıza olanak sağlayan bir web aracı. Dilerseniz hazırladığınız listeleri başkalarıyla da paylaşabiliyorsunuz.

Friendpaste

friendpaste

Kopyalayıp yapıştırdığınız yazı, kod ya da bunun gibi text elementler için link oluşturup arkadaşlarınızla paylaşma imkanı sağlayan bir araç.

Server Check

server check

Bir web sitesinin çalışıp çalışmadığını öğrenmeye yardımcı oluyor.

EmailTheWeb

email the web

Komple bir web sayfasını istediğiniz kişiye göndermenize olanak sağlıyor.

DocJax

docjax

Ofis dökümanları (doc,xls,ppt), pdf ve e-kitap arama motoru.

Kaynak: http://www.smashingapps.com/2009/12/29/69-coolest-web-apps-of-2009.html

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

BluePrint CSS Framework'ünü Kullanmak

unlocoturco — Tue, 30 Dec 2008 06:46:00 GMT

Türkçe'ye CSS İskeleti olarak çevirebileceğimiz CSS frameworkleri, CSS tabanlı web siteleri hazırlarken bize zaman kazandıran en büyük yardımcımız. Blueprint CSS de en popüler CSS iskeletleri arasında yer alıyor ve geliştiricilere büyük kolaylıklar sunuyor. Ben de bu yazımda daha önce CSS iskeletleri ile çalışmamış kullanıcılara Blueprint CSS ile nasıl kolayca web sitesi oluşturulabileceğini anlatmaya çalışacağım.

Blueprint CSS iskeleti, HTML ve CSS içeren tüm projeler üzerinde çalışırken size zaman kazandıran bir proje. İster statik bir sayfa üzerinde çalışıyor olun, isterseniz Rails ya da PHP gibi sunucu tabanlı betikleri kullanın, BluePrint CSS iskeleti işinize oldukça yarayacaktır.

BluePrint CSS nedir?
Eğer siz de benim gibi bir tasarımcıdan ziyade geliştirici iseniz, o zaman yeni bir projeye başlarken CSS ile ne yapacağınıza karar verme sürecinin zorluklarından ve bu sürecin her yeni bir proje için tekrar ediyor oluşunun zorluğu ve sıkıntısından haberdarsınızdır. Proje ilerledikçe tasarımınız muhakkak değişecektir, ancak siz daha başlangıçtan iyi görünümlü bir tasarım istiyorsunuz. Siteniz için CSS yazmaya başladınız ve Firefox ile Safari üzerinde sorunsuz çalıştığını gördünüz, ama bir dakika, IE'yi unutmayalım. Ardından biraz HTML yazdınız ve tüm boşlukları doğru hesapladığınızdan emin olmak için kodunuzu tekrar tekrar kontrol ettiniz. Süper! Bitti! Üç gün sonra, projenin gereksinimleri değişti ve kendinizi site şablonunu yeniden kodlarken buldunuz. Hmm...

Şimdi, tüm CSS öğelerini yalamış yutmuş muhteşem bir tasarımcı olsanız, ya da bir PSD şablonu üzerinden çalıştığınız için tasarımın değişmeyeceğinden emin olsanız bile, bu öğrenebileceğiniz yeni şeylerin olmayacağı anlamına gelmiyor. İşte BluePrint tam bu noktada devreye giriyor ve size işinize yarayabilecek bir dizi aracı sunuyor.

Zamanınızı yenilikler için harcayın, tekrar etmek için değil

Bu slogan blueprintcss.org websitesinde yer alıyor ve Blueprint CSS iskeletini net bir şekilde özetliyor aslında. Blueprint, projelerinizi üzerine inşa edebileceğiniz muhteşem bir temel sunuyor ve bunu herkesin beğeneceği bazı standart stil şablonlarını, tipografi elementlerini, ızgara iskeletini, güzel görünümlü formları ve yazdırma stil şablonunu tüm popüler tarayıcılara uyguluyor. Gelin hep birlikte BluePrint'in bunu nasıl başardığına bakalım.

BluePrint Kaynak Dosyaları

reset.css Bu dosya tüm tarayıcıların varsayılan HTML element tanımlamalarını sıfırlar. Eminim hepiniz bir projeye başlamadan önce <body> elementine 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;' ya da bunun gibi stil elementlerini dahil ediyorsunuzdur. İşte reset.css'nin da yaptığı iş bu ve çok daha fazlası: Boşluklar, tablolar, yazıtipleri vb elementlerin css değerlerini sıfırlıyor ve size projenize başlamanız için temiz bir ortam sunuyor.
typography.css Bu dosya bazı varsayılan tipografi değerlerini tanımlıyor. Tüm stilleri burada açıklamayacağım ancak bu dosyanın BluePrint CSS iskeletinin en sevdiğim parçası olduğunu belirtmek isterim. Tahmin edersiniz ki projenizi bitirdikten sonra sayfanın bir köşesinden fırlayan 'Times New Roman' stilinde bir yazıya rastlamak hiç hoş olmayacaktır. BluePrint'in typography.css dosyası işte bunun önüne geçiyor ve yazıtipi boyutları, tablolar, satır aralıkları gibi elementler için stil kurallarını belirliyor.
grid.css bu dosya blueprint'in ızgara (grid) şablon kurallarından sorumlu. Bunu kullanan sınıflara (class) birazdan değineceğim. Izgara ile ilgill değinmem gereken önemli bir nokta blueprint'in varsayılan olarak 950px genişliğe sahip, her biri 30px genişliğinde ve aralarında 10px boşluk bulunan 24 sütun kullanıyor oluşu. Bu size biraz fazla katı gelebilir ancak BluePrint Izgara CSS Oluşturucusu'nu kullanarak her zaman kendi ızgara modellerinizi oluşturabilirsiniz. Eğer bu paragraf kafanızı karıştırdıysa panik yapmayın, yazımın devamında ızgara şablonu kullanarak site taslağımızı oluşturacağız. Ancak eğer CSS ızgara modellerine aşina değilseniz, Raj'ın Web Tasarımı İçin Hangi CSS Izgara İskeleti'ni Kullanmalıyım? makalesi sizin için iyi bir başlangıç olabilir.
ie.css BluePrint IE'yi destekliyor, işte bu sebeple IE'yi özel kılan o küçük detayları adresleyen kendi özel CSS dosyasına sahip :) İşin güzel yanı, BluePrint bunu sizler için hallediyor ve bu sebeple, iskeletin tüm ana elementleri tüm ana tarayıcılarda (IE 5 bile dahil) kullanılabiliyor.
print.css Bu dosya bazı varsayılan yazdırma stillerini tanımlıyor. Bu sayede ziyaretçileriniz web sitenizin yazıcıdan çıktısını aldığında normalden daha iyi görünmesini sağlıyor. print.css dosyasının bir diğer güzel özelliği de web sitenizin alan adını girebileceğiniz özel bir bölümü içeriyor olması. Bu sayede site içeriğinizde eğer herhangi bir bağlantı bulunuyorsa, yazıcı çıktısı alındığında o adres, bağlantı metninin hemen yanında parantez içerisinde görüntülenecektir. Bu alanı doldurmazsanız sadece harici sitelere olan bağlantılarınız doğru şekilde görüntülenecektir. daha detaylı bilgi için print.css dosyasının son kısmını inceleyin.
forms.css Bu dosya ise güzel görünümlü formlar ile uyarı mesajlarının kullanılabilmesini sağlıyor. Eğer Rails kullanıyorsanız flash uyarılarını bile görüntüleyebilirsiniz. Bu dosya, yazımın devamında değinmeyeceğim tek dosya olduğundan, aşağıdaki resim size bazı varsayılan form stilleri kullanılarak oluşturulmuş bir form örneğini gösteriyor.

BluePrint CSS form

bu altı farklı stilşablonunu eklemek zorunda mıyım?
Hayır. BluePrint CSS, HTML sayfalarınız için sıkıştırılmış üç adet CSS stilşablonunu içeriyor. screen.css yukarıdaki 1., 2., 3. ve 6. stil şablonlarını içeriyor. Bunun yanısıra print.css ve ie.css bulunuyor. İşin güzel yanı, blueprint css iskeletinin modüler yapısı sayesinde her bir css dosyasının birbirinden bağımsız işleyebiliyor oluşu. Bu sayede BluePrint'in sunduğu şablonlardan sadece istediğiniz şablonu kullanabilirsiniz. Örneğin BluePrint CSS Izgara modelini kullanmak istemiyor olabilir, ancak typography.css ve reset.css'nin nimetlerinden faydalanmak istiyor olabilirsiniz. Diğer bir deyişle diğer CSS elementlerinin işlemesi için BluePrint ızgara modelini kullanmak zorunda değilsiniz.

BluePrint kullanarak şablon oluşturalım

BluePrint CSS Şablonu

Yazımızın devamında, hobi amaçlı hikaye yazan kullanıcıların hikayelerini paylaşabileceği ve diğer kullanıcıların da hikayelere yorumlarını ekleyebileceği bir site oluşturcağız.

Aranızda eminim sıkı tasarımcılar bulunuyordur ve yukarıdaki resme baktığınızda bu ne biçim tasarım diyenleriniz olacaktır. Ancak burada ilginç olan şey, benim yukarıdaki tasarımı oluşturmak için tek satır CSS kodu yazmamış oluşum. Yukarıdaki tasarım varsayılan BluPrint CSS stil tanımlamalarını kullanıyor ve tasarım açısından türünün en iyi örneği değil elbette. Ancak yukarıda da bahsettiğim gibi yukarıdaki görünüme ulaşmak için tek bir satır kod yazmadım ve ayrıca hazırladığım bu şablon benim projem için güzel görünümlü ve kolayca değiştirilebilir olması açısından önemli. Tasarımım muhtemelen ilerleyen dönemlerde değişeceğinden, BluePrint benim bu değişiklikleri kolayca uygulayabilmemi sağlıyor.

Parçalara Ayıralım
Belgenin başlık (<head>) kısmı
Bildirgec kod örneklerini görüntülemede verimli bir ortam sunmadığından makalede yer alan kodları harici bir txt dosyası olarak yayımlamayı uygun gördüm. Yukarıdaki bağlantıya tıklayarak koda ulaşabilirsiniz.

İlgili kod örneği, tipik bir <head> etiketinin Blueprint kullanıldığında nasıl görüneceğine iyi bir örnek teşkil ediyor. İskeletin CSS dosyalarını dahil ederek işe başlamanız gerekiyor (bu dosyalar screen.css, print.css ve ie.css'den oluşuyor).

BluePrint ile ilgili en iyi şeylerden biri de salt CSS'den oluşması, bu sayede de tıpkı diğer tüm CSSlerde olduğu gibi modifiye edilebilir. İşte BluePrint eklentileri de bu şekilde çalışıyor. Örneğimde BluePrint fancy-type eklentisini kullandım. İlgill eklenti bazı güzel görünümlü tipografi öğelerini barındırıyor. Kod örneğinde de göreceğiniz üzere ilgili eklenti dosyasını blueprint css iskelet dosyalarını dahil ettikten sonra sayfama dahil ettim, bu sayede ilgili eklenti, blueprint css değerlerinin üzerine yazarak kendi değerlerini aktif hale getirebiliyor. Buraya kadar bazı BP eklentileri mevcut. İlgili eklentiler basitçe bazı öntanımlı BluePrint elementlerinin üzerine yazarak kendi değerlerini CSS iskeletine entegre ediyor.

Sayfa Başlığı

BluePrint Sayfa Başlığı

Kod Örneği İçin Buraya Tıklayınız
Bu kod ile ilgili en önemli nokta, ızgaranın 'container' sınıfına (class) dahil bir <div> ile çevrelenmesi gerekiyor oluşu. Eğer bunu uygulamazsanız içeriğiniz ızgaraya dahilinde görüntülenmez. <hr /> etiketleri BluePrint tarafından sayfanın bölümlerini dikey olarak ayırmak için kullanılıyor. 'alt' sınıfı ise fancy-type eklentisi tarafından kullanılıyor ve herhangi bir metin elementinin daha farklı görüntülenmesi için kullanılıyor.

Ana İçerik

BluePrint Ana İçerik

Kod örneği için buraya tıklayınız.

Bu kod örneğinde pek çok önemli detay bulunuyor. Gelin en üstteki <div class="span-17 colborder"> ile başlayalım. Bu etiket sayfa üzerindeki en geniş <div>'i simgeliyor. Bu bölüm, kod örneğinde göreceğiniz 'Featured Book' bölümünün yanısıra hemen altındaki daha küçük iki kutucuğu çevreliyor. 'span-17' sınıfı Blueprint ızgara şablonuna ait ve ilgili sınıfın kullanıldığı <div> etiketinin, sayfanın tamamındaki 24 sütunun 17'sinin genişliğinde olduğunu belirtiyor (17/24). Diğer bir sınıf 'colborder' ise column border (sütun sınırı) teriminin kısaltılmışı ve BluePrint'e, ilgili sınıfın kullanıldığı <div>'in sağına bir sınır eklemesi gerektiğini belirtiyor.

Önemli: 'colberder' sınıfı bir sütunun tamamını kullanıyor. Ana içerik kısmında 17 sütun (span-17) kullandığımızı hatırlıyorsunuzdur. Bu durumda yan çubuğun (sidebar) 7 sütun genişliğinde olduğunu düşünüyorsunuzdur (17+7=24). Ancak 'colborder' elementi bir sütunu işgal ettiğinden yan çubuk kısmının genişliği için elimizde 6 adet sütun kalmış durumda (17+1+6=24).

Yan çubuğa geçmeden önce 17 sütunluk kısım dahilinde bulunan iki kutucuğa dikkatinizi çekmek istiyorum ('Upload a book' ve 'Write a review' yazan kutucuklar). Aslında bu alan bir diğer BluePrint ızgarası içerisinde konumlandırılmış durumda. Bu dahil <div> 17 sütunluk bir <div> içerisine dahil edildiğinden, bu <>div>'in genişliği de tahmin edeceğiniz üzere 24 değil 17 sütundan oluşuyor.

Bu durumda ilk <div> 'span-8' ve 'colborder' sınıflarına dahil edilmiş. Bunun anlamı, ilk kutucuğun genişliği 8 sütundan oluşuyor ve sağ kısmında bir sınır bulunuyor. İkinci <div> ise yine 'span-8' sınıfının yanısıra 'last' sınıfına dahil edilmiş. Burası Blueprint ızgara iskeletinin önemli bir noktasına işaret ediyor. En sağdaki sütun mutlaka 'last' sınıfına dahil edilmeli. Bu sınıf, BluePrint'e, o sütunun sayfanın en sağındaki son sütun olduğunu belirtiyor ve bu sebeple onun sağına herhangi bir boşluk dahil etmemesi gerektiğini söylüyor. Son olarak iki adet kutucuğu içeren <div> için en fazla genişliğin 17 sütun olduğunu belirtmiştim. Kutucukların her birinin genişliğini 8 sütun (span-8) olarak tanımladık ve soldaki kutucuğu 'colborder' sınıfına dahil ettik. Bu durumda 17 sütunun tamamını kullanmış olduk (8+1+8=17).

Tamamdır, şimdi yan çubuğa geri dönelim. Bu yan çubuğun 'span-6' ve 'last' sınıflarına dahil edildiğini göreceksiniz. Bu yan çubuk, soldaki 17+1 sütunluk ana içerik kısmını tamamlıyor. Eğer fark etmediyseniz, 'span-#' sınıflarında # yerine 1 ila 24 arasında herhangi bir sayıyı yerleştirebilirsiniz. Daha fazla sütuna sahip bir ızgarayi tercih etmediğiniz sürece 'span-#' sınıfı herhangi bir numarayı içerebilir, yeter ki onu kapsayan (container) <div> etiketinin toplam ızgara sütun sayısından küçük olsun.

Aşağıdaki kod örneği ızgarayı örneklendirebilmek için oldukça basit bir şablonu kullanıyor. Kodu incelerseniz ızgara sisteminin nasıl çalıştığına dair bir fikriniz olacaktır.

Kod örneğine ulaşmak için tıklayınız.

Gelin bu CSS şablonunda kullandığımız diğer CSS sınıflarını inceleyelim.

'caps': Bu sınıf yan çubuk başlıkları için kullanılıyor. fancy-type eklentisi tarafından sunulan bu sınıf, tamamı büyük harflerden oluşan başlıklar oluşturabilmenizi sağlıyor.
'box': Bu sınıf özellikle listelerin görüntülenmesi için oldukça kullanışlı. Bu sınıfa dahil olan <div> etiketleri dahilindeki listelerin çevresinde bir boşluk bulunuyor ve yine ilgili kısım çevresinde bir sınır (border) bulunuyor.
'quiet': Bu CSS sınıfı, dahilindeki metnin rengini açık griye dönüştürüyor.
'prepend-top': Bu sınıf, yan çubuk dahilindeki 'Recent Reviews' bölümünde kullanılıyor. Bu sınıfa dahil olan elementin üst kısmına 1.5em'lik bir marj (margin) uyguluyor. Benzer bir sınıf olan 'append-bottom' ise aynı işlemi alt kısmına uyguluyor.
'prepend-5': Ben bu sınıfı küçük kutucuklardaki başlıkları sağa doğru itelemek için kullandım. Blueprint üzerinde aralıklar bırakmak için bir dizi sınıf bulunuyor: 'prepend', 'append', 'pull', ve 'push'. Prepend ve Append sınfları sırasıyla sola ve sağa dolgu (padding) eklemek için kullanılıyor. Pull ve Push sınıfları ise sırasıyla sola ve sağa marj (margin) eklemek için kullanılıyor. Tüm bu etiketler de ızgara modelini kullanıyor, bu sebeple ilgili sınıfın kullanıldığı <div> üzerinde kullanılabilecek en fazla sütun sayısından daha fazla bir sütun kullanmamanız gerekiyor (24 sütunluk bir ızgara modelinde 'prepend-25' sınıfını kullanmamanız gerektiği gibi).

BluePrint Footer Breakdown

Eğer CSS kutu modeli ile haşır neşir değilseniz ve padding ile margin arasındaki farkı bilmiyorsanız, hemen o konuda kısa bir ders verelim. CSS'de padding uygulanması durumunda, padding'in uygulandığı elementin sınırları dahilinde boşluk eklenir ve bu durum, ilgili elementin boyutunu arttırır. Örneğin, sınırları (border) olan bir tablo üzerinde çalışıyorsunuz ve bu tabloya padding eklemek istediniz. Bunun sonucunda tablonun sınırları tablonun kendisinden uzaklaşacaktır, zira padding elementi, tablonun sınırları dahilindeki içeriği etkiler. Öte yandan margin ise bunun tam tersidir ve boşluğu sınırların dışına etkiler ve uygulandığı elementin boyutlarını etkilemez. Bunun sonucunda margin uygulanan elementler, çevresindeki elementleri ya da elementin kendisini iteler. Aşağıdaki resim CSS kutu modelini çok net bir şekilde özetliyor.

CSS Box Model

BluePrint CSS ile hazırladığımız site

Özet
Bu rehber Blueprint CSS iskeleti sayesinde bir sonraki projenizinin ana şablonunu kolayca oluşturabilmenize nasıl katkı sağlayabileceğini ve CSS sıfırlamaları ve tipografi tanımlamaları ile sizin sırtınızdaki yükü nasıl hafifletebileceğini özetlemeye yönelik olarak hazırlandı. Ayrıca Blueprint'i Rails ile birlikte kullanıyorsanız Github üzerindeki şu kaynağı incelemenizi öneririm. İlgili kaynakta Blueprint'in Rails ile nasıl uyumlu çalışabileceğine dair pek çok örnek bulunuyor.

Blueprint'in en sevdiğim yanı sadece CSS'den oluşması. Tümüyle CSS. Eğer bu makalenin ardından Blueprint ile ilgileniyorsanız, gidin ve kaynak kodlarını inceleyin. Eğer biraz CSS bilginiz var ise sistemin nasıl çalıştığını kolayca kavrayacaksınızdır. Blueprint'in çok büyük bir kod tabanı yok, hatta pek çoğumuzun ortalama bir projede kullanacağından çok daha az CSS içeriyor. Eğer kaynak kodu okumak istiyorsanız Github üzerindeki Blueprint kaynağını inceleyebilirsinz.

Blueprint ile ilgili bilmeniz gereken birkaç kaynak:

BluePrint'in web sitesi blueprintcss.org. İskeleti indirmek için en iyi kaynak.
Varsayılan olarak Blueprint sabit şablonu kullanır. Eğer likit şablonlar ile ilgileniyorsanız, bu eklenti işinizi görecektir.
Burada da bir dizi işe yarar Blueprint eklentisi bulunuyor.

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

Tasarımcılar İçin Renk Planlama (Color Scheming)

unlocoturco — Wed, 07 Jan 2009 07:50:00 GMT

Bir web sitesinde çalışmaya başlamadan önce daima üzerinde çalışacağım bir renk şemasına sahip olmak isterim. Bu sadece estetik sebepler yüzünden değil, ayrıca tutarlılık ve websitesine alışılabilirlik gibi sebepler yüzünden önemlidir. Bazen müşterileriniz iki yta da üç renk şeması ile size geleceklerdir (diyelim iki ya da üç renk), ya da en azından web sitesinin üzerine inşa edileceği bir rengi size bildireceklerdir. Eğer emin değillerse o zaman bana sundukları grafik içeriğe (logo, resimler, simgeler vs.) bakar ve onlar ışığında kendi renk şemamı oluşturmaya çalışırım.

Internet üzerinde, tasarımlarınızın piksel mükemmeliğinde olmasına yardımcı olacak renk kaynakları bulunuyor.

İster aklınızda bir renk şeması olsun, ya da size ilham verecek ve rehber olacak kaynaklar arıyor olun, bu yazımda sizlerle bir dizi renk şeması oluşturmanıza yardımcı olacak kaynakları listelemeye çalıştım.

Color Blender
Renk kaydırma çubuğunu kullanarak ya da doğrudan renginizin RGB değerini girerek site size renk şemasını sunacaktır. Bu sitenin sunduğu bir güzel özellik, oluşturduğunuz renk şemasını photoshop ya da illustrator için indirebilmeniz, ya da kendinize elektronik posta olarak gönderebilmeniz.

Color Schemer Online V2
Şema doğrudan girilen RGB veyea HEX değerine göre oluşturuluyor. Sitenin ayrıca Windows ve Mac üzerinde çalışan yazılım sürümü de bulunuyor.

Color Scheme Genarator V2
Önerilen renk şeması görüntülendikten sonra tek bir değr girn. Şemalar Pastel, Karanlık/Aydınlık, Kontrast ve Solgun olabilir. Sitenin sunduğu bir diğer güzellik de (her ne kadar kaç kişinin işine yarayacağını tam olarak kestiremesem de) görüntülene renk şemasının çeşitli bakış açılarında nasıl görüntüleneceğini de size sunabilmesi (örneğin renk körleri için).

Internet üzerinde ayrıca kullanıcılar tarafından daha önce oluşturulmuş renk şemalarının listelendiği web siteleri de bulunuyor, tıpkı galeri web siteleri gibi.

COLOUR LOVERS
Bu site gerçekten muhteşem!!! Her ne kadar size bu makalede belirttiğim tüm siteleri ziyaret etmenizi önersem de, eğer bunlardan sadece birini seçmek istiyorsanız tercihiniz bu siteden yana olmalı. Site üzerinde, içinizdeki sosyal ateşi söndürebileceğiniz forumlar ve grupların yanısıra paletler, motifler, bireysel renk sayfaları da bulunuyor ve tüm bunların hepsi üzerinde arama yapabilir, içeriği filtreleyebilirsiniz. Paylaşılan içerikler pek çok biçimde indirilebilir (ASE, PS, AI, GIMP, HTML ve ZIP biçimlerinde). Sitede ayrıca pek çok yararlı bilgiye ulaşabileceğiniz bir blogun yanısıra TRENDLER bölümünde hem magazin hem de web dünyasının son renk trendlerine ulaşmanız mümkün. Kesinlikle takip etmeye değer.

Kuler
Adobe Air tabanlı bir websitesi olan Kuler'in yaklaşımı ve konsepti biraz ilginç. Color Lovers'a oranla biraz sönük kaldığını söylemek zorundayım. Burada kendi tercihlerimi ön plana çıkarmak istemiyorum, ama gerçekten, Colour Lovers muhteşem bir site.

Verlee's Daily Color Scheme
Bir süredir beta formunda yayın yapan ve 2006'dan beri güncellemeyen güzel görünümlü bir site. Sitenin ana alan adı halin "Yakında..." ibaresini içeriyor. Site bir renk şeması galeri sitesi ve bir süredir aktif olmamasına rağmen site bünyesinde güzel ve size ilham kaynağı olabilecek içerik bulunuyor.

Color Combos
Renk şeması / palet galeri web sitesi. Bir imaj üzerindeki renkleri çıkarabilmek için birkaç yolunuz var. Ya Photoshop ya da GIMP gibi masaüstü yazılımlarını kullanır, ya da referans imajınıza bağlantı kurabilecek çevrimiçi kaynakları kullanırsınız.

Color Palette Generator
Bir imajın tam URL'sini girin ve site, o imajı temel alarak sizin için renk paleti oluştursun.

Eğer üzerinde çalışacağınız bir imaj yoksa ama müşteriniz beğendiği siteleri sizlerle paylaştıysa, ya da size ilham kaynağı olabilecek bir websitesini biliyorsanız, o kaynaklarda kullanılan renklere ulaşmak için birkaç yöntem bulunuyor.

Eğer Firefox kullanıyorsanız Web Developer eklentisini kullanabilirsiniz. Eklentini seçtiğiniz websitesinin renk bilgisini gösterebilme özelliği bulunuyor.

Internet üzerinde bir dizi website galerisi de bulunuyor. Bu siteler websitelerini renklerine göre kategorilendiriliyor.

Renk Bilgisi Sunabilen Web Site Galerileri

Seçili Websiteleri İçin Özel Renk Bilgileri Sunan Website Galerileri

Birkaç Tane Daha İşe Yarar Kaynak:

CSS Color Chart
Her rengin HEX değerleri ile birlikte doğal ve genel kullanım için uygun renkleri gösteriyor.

Colors on the Web
Bu websitesi, geniş renk bilgisi, renk teorilerine yönelik araçları ve Color Contrast Analyzer for Accessibility (Erişilebilirlik İçin Renk Kontrast Analizatörü) ile çok değişik bir site. İlgili araç web sitesinin arkaplan rengi ile metin rengine bakıyor. Bunun yanısıra sitenin üç renk şema oluşturucusu da bulunuyor. Sitenin ayrıca iki sütunlu arabirimi üzerinde seçilen renk şeması ve metnin o şemada nasıl görüntüleneceği de gösteriliyor.

Renk Sihirbazı - renk uyumu uygulaması üzerinden kendi tekil renk değerinizi girebilir, ya da bunu sizin için yapacak uygulamayı kullanabilirsiniz. Veri girildiğinde ona ait olan renk varyasyonları, doyum varyasyonları, ton ve gölge varyasyonlarının yanısıra önerilen renk şemaları, bileşik renkler hakkında bilgiler, renk kontrastı ve kullanılan renklere ait bilgiler veriyor.

Renk Şemacısı - CSS website galerilerine benzer bir site, ancak CSS yerine kullanıcılar tarafından gönderilen renk paletlerini içeriyor.

Bana göre renk, güzel bir web sitesinin en önemli yönüdür. Beni yanlış anlamayın, şablon, navigasyon ve tipografi de önemlidir, ancak bir web sitesinin renk seçimi kötü ve insan gözüne rahatsızlık verici ise, o zaman ziyaretçiniz GERİ düğmesine mümkün olan en kısa sürede basacaklardır.

Umarım yukarıdaki kaynakların size bir faydası dokunur.

Hepinize 2009 için iyi dileklerimle.

Kaynak: styl.eti.me

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

Website Ziyaretçilerinizin İlk İzlenimini Etkileyen 21 Faktör

unlocoturco — Wed, 28 Jan 2009 09:17:00 GMT

Sitenize yeni bir ziyaretçi geldiğinde sitenize dair ilk izlenimi çabuk bir şekilde oluşacaktır. İyi bir ilk izlenim, ziyaretçinizin sitenize yeniden gelmesini sağlayabilecek önemli faktörlerden biri iken, kötü bir ilk izlenimin bıraktığı izlerin üstesinden gelmek zordur.

Yazının devamında bulacağınız liste sitenizi ziyaret eden ziyaretçilerin ilk izlenimlerini etkileyen 21 faktörü listelemektedir. Bu listenin faktörlerin sadece bir kısmı olduğunu ve tüm faktörleri oluşturmadığını unutmayın. Eğer istersiniz sizce önemli olan faktörleri de yorumlarınızla paylaşabilirsiniz.

1. Açılma Süresi
Pek çoğumuz yavaş açılan web sitelerine karşı sabırsızızdır. Diğer yandan hızlı açılan web siteleri ziyaretçileri siteniz üzerinde gezinmeye teşvik edecektir, zira her bir sayfanın açılması için uzun süre beklemeyeceklerini bilirler.

2. Hata Mesajları
Eğer sitenizi ziyaret eden ziyaretçiler hata mesajları alıyorlarsa ve sitenize erişmede sıkıntı yaşıyorlarsa, sitenizden etkilenmeyeceklerdir ve sitenizi bir kez daha ziyaret etmeyeceklerdir. Sitenizde oluşabilecek pek çok hata bulunmaktadır. BlogStorm'un yayımladığı şu makale bir adet başarısız siteyi ele alıyor ve problemlerini irdeliyor.

3. Renkler
Sitenizin görünümü hiç şüphesiz ilk izlenimde oldukça etkilidir. Sitenizin genel renk şeması, sitenizin çekiciliğinde önemli rol oynar. Doğru renk kombinasyonlarını seçmek zor olabilir, ancak İnternet üzerinde size bu konuda yardımcı olabilecek pek çok araç bulunmaktadır. Renklerin psikolojisine dair kaynaklar ve bağlantılar için Web siteniz için mükemmel renkleri bulun adlı yazıyı ya da bildirgec üzerinde yayımladığım Tasarımcılar İçin Renk Planlama (Color Scheming) adlı yazımı okuyabilirsiniz.

4. Logo / Marka
Sitenizin genel görünümünü etkileyen bir diğer faktör de sitenizin logosu ve markasıdır. En önemlisi sitenizde kullanacağınız logo işinizi ya da kurumunuzu sizin ziyaretçilerinizin düşünmesini istediğiniz şekilde düşünmesine yol açabilecek şekilde markalaştırabilmelidir. Daha fazla bilgi için David Airey'in yazdığı Bir logoyu mükemmel yapan nedir? başlıklı yazıyı okuyabilirsiniz.

5. Başlık Görselleri
Baskın başlık görselleri sık kullanılır ve ilk izlenime güçlü etkileri olabilir. Kişisel olarak ben bloglarda büyük boyutlu başlıkları seven bir değilimdir ancak bazı blog tasarımcıları bunu mükemmel bir şekilde uygulayabiliyorlar. Şahsen ben içeriğin sayfanın üst kısmında başlamasını isterim ancak pek çok ziyaretçi benimle aynı fikirde değildir. Nate Whitehill sitesinde oldukça çekici bir başlık görseli kullanmaktadır.

6. Tipografi
Görece etkili olan bir diğer element ise tipografi ve yazıtipleridir. Tipografideki değişiklik önemli bir değişiklik olmayabilir ancak sitenizin genel görünümünü tümden değiştirebilecek kapasitededir. Mark Boulton tarafından yazılan Daha İyi Tipografi İçin 5 Basit Adım makalesi size konu ile ilgili daha detaylı bir bilgi verebilir.

7. Anahat
En önemli tasarım elementlerinden birisi de anahattır (layout). Hangi anahattı kullanırsanız kullanın, kullanacağınız anahat sitenizdeki önemli öğelere ziyaretçinin dikkatini çekebilmelidir. Anahat sadece çekici bir tasarım oluşturmak için kullanılmakla kalmaz, ayrıca sitenizi ziyaretçilerinizin daha kolay bir şekilde kullanabilmelerini de sağlar. Web sitelerinin pek çoğu standart tasarım elementlerini kullansa da sitenizi diğerlerinden ayırabilmenin bir yolu da anahat üzerinde yaratıcılığınızı konuşturmaktır. Elbette yaratıcı bir anahattın sitenizin kullanılabilirliğini azaltmaktansa işlevselliğini arttırmayı tercih etmelisiniz.

8. Reklamlar
Sitenize dair kötü bir izlenim uyandırmanın en kolay yollarından birisi de sitenizi reklamlarla doldurmaktır. Günümüzün İnternet kullanıcılarının pek çoğu siteler üzerinde reklam gördüklerinde şaşırmazlar ancak çok fazla ve yanlış türde kullanılan kötü bir şekilde yerleştirilmiş reklamlar ziyaretçilerinizin sitenizden kolayca soğumasını sağlayabilir.

Genel bir kural olarak reklamlarınızı ziyaretçilerinizin sitenizdeki içeriği okumalarına engel olmayacak bir şekilde yerleştirmelisiniz, tabi eğer sitenizin amacı tıklama başına reklamlar üzerinden para kazanmak değilse. Hareketli reklamlar da bir diğer önemli konudur zira bu tip reklamlar site ziyaretçilerinizin dikkatini kolayca dağıtabilirler.

Ziyaretçilerizi ilgilendiren ve sitenizin ana içeriği ile karışmayan reklamlar kullanırsanız ziyaretçileriniz bunu kötü algılamayacaklardır.

9. İtibarınız
Sitenizi ilk kez ziyaret eden ziyaretçilerinizin bir kısmı daha önce sizin hakkınızda bilgilendirilmiş olabilir. Çoğu zaman sizin hakkanızda sitenize bağlantı veren bir başka site üzerinde bilgi sahibi olmuşlardır. Bu durum özellikle blogcular arasında yaygındır. Eğer o ziyaretçi siteniz hakkında olumlu bir yorum okumuşsa onun ilk izlenimini olumlu yönde etkileyebilecek bir itibar bırakmışsınızdır. Bu durum ziyaretçiniz eğer sizin hakkınızda kötü yorumlar okumuşsa aksi yönde de işleyebilir.

10. Navigasyon Kolaylığı
Muhtemelen hepimiz üzerinde okunacak pek çok içerik bulunan bir site görünen ancak istediğimiz şeyi bulamadığımız bir site ile karşılaşmışızdır. Kötü bir navigasyona sahip bir web sitesinden daha rahatsız edici bir şey var mı bilmiyorum. İyi tasarlanmış bir navigasyona sahip web sitesinin, ziyaretçilerinizin sitenizdeki deneyimleri üzerinde çok pozitif bir etkisi olabilir.

11. Amacınızın Netliği
Yeni ziyaretçiler sitenizin varoluş amacını çabucak anlayabilmelidirler. Pek çok sitesi bunu sitelerinin üst kısmında sitenin içeriğini özetleyen bir tanım kullanarak başarırlar. Hakkında sayfaları da iletişim açısından önemli elementlerden biridir.

12. Profesyonel Olmayan Öğeler
Düşük kalitede animasyonlu GIF görselleri gibi bazı öğeler ve sayaçlar kötü bir ilk izlenim oluşturabilirler. Genel olarak sitenizi 10 yıl önce tasarlanmış gibi gösterebilecek her şeyden uzak durulmalıdır.

13. Görsellerin ve Fotoğrafların Kalitesi
Yüksek kalitede bir fotoğrafın ya da grafiğin tasarım üzerinde bırakabileceği etki gerçekten inanılmazdır. Ne şans ki İnternet üzerinde yüksek kalitede düşük ücretli fotoğraflar bulabileceğiniz pek çok resim bulunmaktadır hatta bunlardan bazıları ücretsizdir. İyi bir ücretsiz resmi bulmak için harcayacağınız zaman, daha çabuk bulacağınız ve sadece birkaç lira ödeyerek sahip olabileceğiniz resimlerle kıyaslandığında, harcanmaya değmez. İnternet üzerinde fotoğraf bulabileceğiniz sitelerin bir listesine ulaşmak için bu makaleyi okuyabilirsiniz.

14. Erişilebilirlik
Web tasarımında erişilebilirlik son zamanların popüler konusu haline gelmiştir. Gerçek olan şu ki ziyaretçilerinizin pek çoğu ortalama ziyaretçi kategorisine düşmeyecektir. Bazılarının engelleri olacak, bazıları eski bir tarayıcı kullanıyor olacak, bazılarının da yavaş bağlantıları olacaktır. Eğer web siteniz siteniz tarafından erişilebilir olmazsa, bu ziyaretçileriniz üzerinde kötü bir izlenim bırakacağının garantisidir.

15. Açılır ve gizli-açılır pencereler
Günümüzde pek çok İnternet kullanıcısı bir tür pop-up engelleyicisi kullanmaktadır. Pek çok ziyaretçi, engellenemeyen açılır pencerelerden hoşlanmazlar ve bu da kötü bir izlenime yol açar. Buna rağmen bazı siteler halen açılır pencereleri verimli bir şekilde kullanmaktadırlar, bu sebeple açılır pencere kullanmadan önce artıların ve eksilerini iyi bir şekilde tartmanız önerilir.

16. Video ve Ses
Gün geçtikçe daha fazla İnternet kullanıcısı yüksek hızlı bağlantılara sahip oldukça ses ve video içerikli web siteleri daha yaygın kullanılmaya başlayacaktır. YouTube gibi sitelerin başarısı bu tip elementlerin pek çok ziyaretçi tarafından olumlu karşılandığının bir göstergesidir. Genel bir kural olarak ses ve video içerikleri otomatik olarak başlatılmamalıdır.

17. İştiraklar ve Kurumlar
Ziyaretçiler sitenizi ilk kez ziyaret ediyor olabilirler ancak birlikte iş yaptığınız ya da ürünlerinizi kullanan diğer firmaların ismini görerek siteniz hakkında olumlu bir izlenime kapılabilirler. Buna güzel bir örnek olarak Media Temple web sitesi gösterilebilir. Media Temple'nin ana sayfasını ziyaret eden ziyaretçiler Nike, Sony ve Starbucks gibi firmaların Media Temple hakkındaki yorumlarına ulaşacaklardır. Eğer ziyaretçinizin ürünleriniz ve hizmetleriniz hakkında şüpheleri varsa, bunun gibi iyi bilinen şirketlerin ilk izlenime katacağı olumlu katkı kaçınılmazdır.

18. İçeriğin Kalitesi
Elbette kaliteli içerik bu listenin dışında kalamazdı. Her ne kadar sitenin içeriği, tasarımı kadar ilk izlenime etkisi olan bir element olmasa da, siteniz üzerinde bir dakikadan daha uzun süre kalan bir ziyaretçinin ilk izlenimi üzerinde hatırı sayılır bir etkisi olacaktır. Bu özellikle bloglar için önemli bir faktördür. Siteniz ilk kez ziyaret eden bir ziyaretçi mükemmel bir içeriğe ulaşırsa, siteniz hakkındaki ilk izlenimi hiç şüphesiz olumlu olacaktır.

19. Ton
İçeriğin kendisinin yanısıra içeriğin tonu da ilk izlenimde etkilidir. Daha önce güçlü içeriğe sahip ancak yazarı tarafından olumsuz bir tona sahip pek çok blogla karşılaştım.

20. Yorumların Sayısı ve Geri İzlemeler
Blogunuzu ilk kez ziyaret eden ziyaretçilerin pek çoğu, yazılarınızdaki yorumların sayısına dikkat edeceklerdir. Yorumların ve geri izlemelerin sayısının fazlalığı, ziyaretçilerin ilgil içeriğin başkaları tarafından önemsendiği ve bu sayede onun değerli olduğu izlenimini uyandırır. Öte yandan hiçbir yorumu bulunmayan yazılar, ziyaretçinin ilgili içeriği kimlerin okuduğunu düşünmesine yol açar.

21. Flash Girişler
Olumlu ya da olumsuz, flash girişleri (intro) bulunan sitelerin ziyaretçilerin ilk izlenimine etkisi olacaktır. Ben pek çok web sitesinde flash girişi bulunmasından hoşnut değilimdir. Bu tip girişlerin bazı endüstrilerdeki bazı web sitelerinde yeri olduğunu düşünürüm, mesela film ya da rock müzik gruplarının web siteleri gibi. Eğer ziyaretçilerinizin sizden bir flash girişi beklemediğini düşünüyorsanız flash girişi kullanmaktan kaçınırım.

Kaynak: Vandelay Design Blog

Kullanılırlık ve Tasarımcı İpuçlarına Yönelik Yazdığım Diğer Yazılar

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

Yetenekli Ve Ücretsiz 10 Web Analiz Aracı

unlocoturco — Sat, 10 Jan 2009 08:15:00 GMT

Web analizi, web içeriğinizin verisinin alınarak ve işlenerek, web sitenizin ziyaretçileriniz için nasıl kullanıldığına dair bilgi almanızı sağlar. Internet üzerinde pek çok web analiz aracı bulunuyor ve muhtemelen Google Analytics, Crazy Egg gibi pazarın büyük oyuncularının yanısıra Alexa ve Compete servislerini de duymuşsunuzdur.

Bu makalemizde daha az bilinen web analiz seçeneklerini listelemeye çalışacak ve sizlere yardımcı olacak 10 mükemmel ve ücretsiz aracı ve uygulamayı tanıtacağız. Bu uygulamalar sayesinde web içeriğinizin verisini alabilecek ve analiz edebileceksiniz.

1. Piwik

Piwik Demosu

Piwik açık kaynaklı bir Web analiz uygulaması olup PHP ve MySQL kullanılarak geliştirilmiştir. Uygulamanın "eklenti" sistemi uygulamanın halihazırda sunduğu özellikleri geliştirmenizi sağlar. Sadece ihtiyacınız olan eklentileri alın ya da tüm eklentileri yükleyin. Seçim sizin. Eklenti sistemi, sizin de tahmin edeceğiniz üzere, kendi eklentilerinizi oluşturabilmenizin de önünü açıyor. Bu uygulama gerçekten hafif ve boyutu sadece 1.9MB.

2. FireStats

FireStats Demosu

FireStats PHP ve MySQL kullanılarak oluşturulmuş basit ve söylediğini yapan bir web uygulaması. Uygulama C# sitelei, Django siteleri, Drupal, Joomla!, WordPress ve bir dizi diğer platformu da destekliyor. Daha fazlasına ihtiyacı olan becerikli bir web geliştiricisi misiniz? FireStats'ın, diğer yayımlama platformları için kullanabileceğiniz kendi özel uygulamalarınızı geliştirebileceğiniz mükemmel bir APIsi bulunuyor (WordPress siteniz üzerinde en çok indirilen 10 dosyayı görüntüleyebileceğinizi hayal edin).

3. Snoop

Snoop

Snoop masaüstü tabanlı bir yazılım olup Mac OS X ve Windows XP/Vista platformları üzerinde çalışıyor. Sistem durum çubuğu üzerinde sizi rahatsız etmeden duran bu uygulama, sitenizde herhangi bir eylem gerçekleştiğinde sizi uyarıyor. Bir diğer güzel Snoop özelliği ise uygulamanın Etiket İsimlendirme özelliği, ziyaretçilerinizi etiketlemenizi sağlıyor. Bu sayede diyelim ne zaman tanıdığınız bir arkadaşınız sitenizi ziyaret etse, bundan haberiniz olacak.

4. Yahoo! Web Analytics

Yahoo! Web Analytics

Yahoo! Web Analytics, Yahoo!'nun pazarın hakimi Google Analytics'e bir cevabı niteliğinde. Daha çok kurumlara yönelik bir uygulama olan bu gelişmiş üçüncü parti çözüm, özellikle çoklu kullanıcı grupları için analiz verisine erişimi kolaylaştırıyor. Gelişmiş bir web analiz aracından beklediğiniz her şeye sahip olan uygulamanın güzel görünümlü grafikleri, özel tasarlanmış (ve yazdırılabilir) raporları ve gerçek zamanlı veri izleme özellikleri bulunuyor.

5. BBClone

BBClone Demosu

Eğer üçüncü parti çözümlere dayanmayan, basit, sunucu tabanlı bir web uygulaması arıyorsanız, o zaman BBClone uygulamasına bir göz atın. PHP tabanlı bir sunucu uygulaması olan BBClone, ziyaretçi verileri ve website trafiğinize yönelik pek çok detaylı bilgiyi veriyor. Uygulama, aralarında İngilizce, Çince, Almanca ve Türkçe'nin de bulunduğu 32 adet dili destekliyor. Uygulama, Drupal, WordPress ve Textpattern gibi popüler yayımlama platformları ile kolayca bütünleşebiliyor. Uygulama sunucuların log dosyalarındaki veriyi işlediğinden, herhangi bir sunucu tabanlı veritabanı kullanmanızı gerektirmiyor.

6. Woopra

Woopra

Woopra Java ile yazılmış ücretsiz bir Web analiz uygulaması. Veri analizi ve önizlemesi için geliştirilmiş bir masaüstü uygulaması ile web sitenizin istatistiklerini kontrol edebileceğiniz bir web platformundan oluşan iki bölümü bulunuyor. Woopra'nın gelişmiş bir kullanıcı arabirimi ve sezgisel yönetim sistemi birden fazla site ve alan adı üzerinde uygulamayı çalıştırabilmenizi sağlıyor. Uygulamanın "sohbet" özelliği sayesinde sitenizi ziyaret eden kullanıcılar ile bireysel olarak sohbet edebilmenizi bile sağlıyor. Şimdilik beta aşamasında olan Woopra'yı kullanabilmek için özel beta kayıt davetiyesine sahip olmanız gerekiyor.

7. JAWStats

JAWStats

JAWStats sunucu tabanlı bir Web analiz uygulaması olup popüler AWStats ile birlikte çalışıyor (aslında eğer paylaşımlı bir sunucu planını kullanıyoranız, AWStats muhtemelen sisteminizde kuruludur). JAWStats AWStats'ın yapabildiklerini iki şeyi daha ekliyor. Sunucu kaynak kullanımını azaltarak performansı arttırıyor ve kullanıcı arabirimini biraz iyileştiriyor. Bunu söylemiş olmakla birlikte eğer AWStats kullanıyorsanız ve ondan memnunsanız, JAWStats'ın öyle aman aman fazla bir yenilik getirmediğini de göz önünde bulundurun.

8. 4Q

Web analizinin büyük bir bölümü rakamsal verilerin işlenmesine dayalır. İşlenmemiş rakamlar, hikayenin sadece bir kısmını oluşturur ve gerçek kullanıcılar ile iletişime dayalı bir analiz raporu oluşturmanız gerektiğinde genellikle kullanışlıdır. 4Q geliştiricisi Avinash Kaushik, bu durumu çok güzel özetlemiş aslında: "Web analizi 'Ne' sorusunun yanıtını vermede iyi ancak 'Neden' sorusunu yanıtlarken biraz zayıf kalıyor". 4Q basit bir anket uygulaması olup bilinen nümerik web analiz verisini kullanıcıların geri bildirimleri ile birlikte işliyor. 4Q'nin ne kadar kolay kurulabileceğine yönelik bir YouTube Videosu da mevcut.

9. MochiBot

MochiBot

MochiBot ücretsiz bir Web analiz/izleme aracı olup özellikle Flash içerikli websitelerinde uzmanlaşmış. MochiBot ile sizin Flash içeriğinizi kimlerin paylaşıp paylaşmadığını, içeriğinizin kaç kez görüntülendiğini ve Flash içeriğinizin gizlilik ve içerik hırsızlığını önlemek için o an nerede olduğunu izleyebiliyorsunuz. MochiBot'u kurmak gerçekten kolay, sadece birkaç satırlık ActionScript kodunu izlemek istediğiniz FLA dosyasının içerisine yerleştiriyorsunuz.

10. Grape Web Statistics

Grape Web Statistics

Grape Web Statistics basit ve açık kaynaklı bir kullanıcı olup özellikle web geliştiricileri arasındaki popülerliğini arttırıyor. Basit ve kullanışlı bir kullanıcı arabirimi olan bu uygulamanın Eklenti API'si sayesinde kurulumunuzu özelleştirmeniz ve geliştirmeniz de mümkün. Arkaplan işleri için PHP kullanan bu uygulama, PHP çalıştırabilen her sunucuda çalışıyor.

Tartışalım
Hangi Web analiz yazılımını kullanıyorsunuz ve neden? Yukarıdaki uygulamalardan herhangi birini denediniz mi? Yorumlarınızla deneyimlerinizi paylaşın.

İlginizi çekebilecek diğer yazılar

Wikipedia üzerinde Web analizinin tanımı'nı okuyun.
Web analiz konusu ile mi ilgileniyorsunuz? Web Analiz Derneği'ne bir göz atın.
Mashable üzerinde yayımlanan Woopra incelemesi yazısını okuyun. Yazı ayrıca bir video röportajını da içeriyor.
Piwik incelemesini okuyarak bu açık kaynaklı platform hakkında daha detaylı bilgi alın.

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

Site Trafiğini, Popülerliğini ve İstatistiklerini İzleyebilmenin 10 Yolu

unlocoturco — Wed, 21 Jan 2009 08:00:00 GMT

İnsanların site trafiği, istatistikleri ve diğer sitelerin trafiklerine bakmaya bağımlı olduklarını kendimden biliyorum. Eğer buna karşı talep varsa, sizi bu konuda tatmin edecek siteler de mutlaka olacaktır. İşte ben de bu makalemde bu siteleri ve araçları listelemeye çalıştım, çünkü en azından benim için bu alan çok net değildi. Google Pagerank, Alexa, Compete ve Technorati puanlamalarının ne anlama geldiğini bilmiyordum. Bu istatistiklerin daima tutarlı olmadığını söylemek zorundayım, ancak bu siteler bir sayfanın popülerliği ve ortalama ne kadar ziyaretçi çektiğine dair genel bir bilgi sahibi olmanızı sağlar. Eğer bu istatistiklerini kendi site istatistiklerinizle karşılar ve harmanlarsanız, o zaman daha tutarlı sonuçlar elde edeceksinizdir.

Bunların yanısıra ben bazı Firefox eklentilerini de kullanıyorum. Bu eklentiler kullandığım servislerin adreslerini yazmam ve ardından istediğim içeriğe ulaşmak için sayfalar arasında gezinmem gerekmiyor. Ve sadece bir düşünce - pazarlamada rakipleriniz hakkındaki diğer bilgilerin ne kadar kullanışlı olabileceğini bir düşünün. Tamam gelin şimdi makalemizin aslına gelelim.

İlk olarak sık kullandığım Firefox eklentilerini listelemeye başlayıp ardından da popüler trafik izleme sitelerini listeleyeceğim. Eğer SEO ile ilgileniyorsanız, o zaman SEO Uzmanları İçin Popüler Firefox Eklentileri isimli yazımı okumanızı öneririm.

1. SearchStatus
Alexa, Compete ve Google PageRank puanlarını izleyen bu kullanışlı eklenti olmadan yaşayamazdım. Eğer Alexa ve Compete'i bilmiyorsanız, bu sitelerin dünyanın en popüler ve güvenilir site izleme araçları olduğunu unutmayın. Bunun yanısıra aramızda Google'ın puanlama sistemini duymayan kaldı mı? Eğer siz hala duymadıysanız Google resmi blogunu takip etmenizi öneririm.

Ve evet, Alexa ve Compete servislerinin kendilerine özgü izleme ve oylama sistemleri mevcut. Bu sefer benim de daha önce yaptığım gibi her iki servisten de aynı oranda puanlar görmeyi hedefliyorsanız, bunun böyle olmadığı konusunda sizi daha baştan uyarayım istedim.

2. Compete Araç çubuğu + Compete Sitesi

Bu site Alexa'ya oldukça benzemekle birlikte, Alexa'ya alternatif hatta daha iyi site karşılaştırma puanlamaları veriyor ve sizin de bu sayede konu ile ilgili daha objektif bir bilginiz oluyor. Ben Alexa'yı daima Compete ile birlikte kullanarak daha objektif sonuçlara ulaşabiliyorum.

Site ayrıca bir araççubuğunu da sunuyor. Yukarıdaki SearchStatus araççubuğu ile birlikte bu araççubuğunu da sık sık kullanıyorum. Compete.com'un resmi araççubuğu olan bu araç ayrıca siteyi ziyaret eden ortalama kişi sayısını da kontrol ediyor. Bu bilgi belki de çok tutarlı olmayabilir ancak diğer siteler hakkında ziyaretçi bilgisi almak istediğinizde de kullanışlı olabilir. Araççubuğunun başka özellikleri de bulunuyor ancak onu ben kendi işlerim için kullanmıyorum. Belki de siz kendi araştırmanızı yapıp sunulan bu diğer araçları kendi siteniz için daha kullanışlı bulabilirsiniz.

Bu eklentiyi indirmek için buraya tıklayınız.

3. Google Analytics

Evet, bu site şu an piyasadaki en iyi istatistik sitesi olduğu kadar, aynı zamanda en popüleridir. Google Analytics, siteniz hakkındaki bilgiyi o kadar detaylı bir şekilde izler ki, tüm bu verileri analiz etmek ve diğer verilerle karşılaştırmak için saatlerinizi harcayabilirsiniz. Şimdiye kadar artık herkesin Analytics servisini kullandığını sanıyorum ancak eğer siz halen Google Analytics'e yabancıysanız, o zaman sitelerindeki tanıtım videosu tüm sorularınızı cevaplayacak nitelikte.

4. Alexa

Daha önce bu siteden bahsetmiştim, ancak şimdi daha detaylı değinmenin vakti geldi. Alexa, popülerlik puanı, erişim, hız ve site içi bağlantılar tabanında geniş kapsamlı istatistikler sunmaktadır. Sunulan bilgiler de oldukça tutarlı, zira herkes Alexa Araççubuğu'nun da yardımı ile sitenin algoritmasına yardımcı olur. Alexa araççubuğunu yüklediğinizde, çok kullanışlı bir araca sahip olmakla kalmayıp, siz siteleri ziyaret ettikçe Alexa'nın işleyişine yardımcı oluyorsunuz. Ben bu sistemi gerçekten seviyorum, siz de bir deneyin, belki siz de kullanışlı bulursunuz.

Alexa Araççubuğu'nu Buradan Edinin / Ana Sayfayı buradan ziyaret edin.

5. Quarkbase

Bu siteyi daha önce ResourcePile'dan Nick'den duydum, ve o zamandan beri bu siteyi kullanıyorum.

Quarkbase web siteniz hakkında derinlemesine bilgi sahibi olabileceğiniz ücretsiz bir site. Site 30'un üzerinde kaynaktan aldığı veriyi ve pek çok algoritmayı bir arada harmanlayarak siteniz hakkında derinlemesine bilgiler veriyor. Quarkbase, sitenizi sosyal popülaritesi, trafiği, site ile ilişkili insanlarına göre pek çok kategoride işliyor ve evet, site gerçekten digg, delicious, reddit bağlantıları, technorati puanlarından RSS okuyucularına, trafik istatistiklerine kadar pek çok bilgiyi veriyor. Sitenizi ziyaret edin ve sitenizin adresini girerek çok sayıda bilgiye saniyeler içerisinde ulaşın.

6. QuantCast

QuantCast, bir istatistik toplama web sitesi olup, yayımcıların kendi takipçilerini ve onların sitenizi ziyaret ettikten sonra hangi siteleri ziyaret ettikleri gibi önemli bilgileri sizlerle paylaşıyor. Bunun yanısıra eğer web siteniz hakkında daha tutarlı bilgi sahibi olmak istiyorsanız, o zaman web sitenize sade bir kod parçacığı ekleyerek Quantcast'ın siteniz hakkında daha detaylı ve tutarlı bilgiler vermesini sağlayabilirsiniz.

7. StatsAholic

Eğer sade ve hızlı bir istatistik çözümünü arıyorsanız, o zaman Statsaholic web sitesini ziyaret etmenizi öneriri. Site bünyesinde veriler ve grafikler sunulurken bu veriler Compete ve Quantcast'tan alınıyor. 3 adede kadar alan adı girip verilerini karşılaştırmanız da mümkün.

8. PopUri.us

Bir diğer sade ve mükemmel sitelerden birisi de PopUri.us. Sitenizin adresini girin ve Google PageRank, Alexa, Compete, Quantcast Puanı, Technorati Bağlantıları, Yahoo! Geribağlantıları ve daha fazlasına ulaşabilirsiniz.

9. Website Grader

"Website Grader ücretsiz bir SEO aracı olup bir web sitesinin pazarlama verimliliğini ölçmenize yardımcı olur. Site web site trafiği, SEO, sosyal popülerlik ve diğer teknik faktörleri harmanlayarak bir puan oluşturuyor. Son olarak ayrıca sitenizin pazarlama açısından nasıl daha da geliştirilebileceği öneriliyor."

Sitenin verdiği her bir bilgi parçacığı gerçekten çok kullanışlı... Site size SEO ile ilgili öneriler, alan adı yaşı, alan adı süresinin ne zaman dolacağı, Google'ın taradığı sayfaların listesi, trafik puanı, Google'ın sitenizi en son ne zaman taradığı gibi bilgilerin yanısıra, sitenizin istatistiklerini diğer sitelerin istatistikleri ile karşılaştırmanız da mümkün. Çok kullanışlı, herkesin bilmesi gereken bir site.

10. BuySellAds

Belki de bazılarınız buna güleceklerdir, ancak ben bu siteyi de ekledim, zira bu site genel olarak istatistiksel bilgilerin depolanmasına yönelik bir site de değildir, ancak yukarıdaki bağlantıdan ulaşabileceğiniz örnek site bilgilerinden de görebileceğiniz gibi öngörülen gösterim sayıları ilgili sitenin sahibinin açıklamasına göre gerçekten çok tutarlı. Bu servisi pek çok insan da kullanıyor, bu sayede "Buraya Reklam Ver" düğmesine tıkladığınızda sitenin aylık tekil ziyaretçi sayısı, Alexa ve Compete puanlamaları, Google Pagerank verisi, delicious favori sayıları gibi pek çok bilgiye ulaşabilirsiniz. Sitenin tekil ziyaretçilere yönelik öngörüde bulunabilmesi özelliğini çok seviyorum.

Listeye daha devam edebilirim aslında, ancak bu sitelerin sunduğu istatistiksel bilgilerin ihtiyacınız olandan fazlasını size sunacağını düşünüyorum. Yukarıdaki listenin size pazarlama, SEO ya da sadece diğer sitelerin istatistikleri hakkındaki merakınızı giderebilmesi yönünden size yardımcı olacağını umuyorum.

Kaynak: 1st Web Designer

SEO ve Site Analizi Üzerine Yazdığım Diğer Yazılar

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

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

öğrenilmesi gereken 15 css hilesi

unlocoturco — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı unlocoturco 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ıcılarının Kodlama Yapmalarının 6 Gereği

unlocoturco — Mon, 19 Jan 2009 07:38:00 GMT

Biliyorum, biliyorum... Tasarımcıların hiçbiri kodlarla boğuşmak istemez ve tasarımlarını doğrudan geliştiricilere devretmek ister.

Geliştirme işi programlama kurtları, kodlama hastaları ve bilgisayar manyaklarının işidir.

Peki o zaman neden biz tasarımcılar Photoshop fırçalarımız, akşamüstü çaylarımız ve Mac Prolarımız ile mutlu mesut yaşarken kendimizi kodlama dünyasının içine atmalıyımız? Çünkü eğer bunu yaparsanız daha iyi bir tasarımcı olursunuz.

Kuşkullandınız mı? O zaman yazının devamını okuyarak tasarımcıların neden kodlaması gerektiğine yönelik 6 maddeyi okuyun...

1. Daha iyi XHTML
Bugüne kadar, Photoshop tasarımlarının web biçimine dönüştürülmesi için gereken kodlama elementlerine dair çok az bilgisi olan tasarımcılarla çalışma fırsatı buldum hem de onlara kendimi tanıttım. Genellikle bu tasarımcılar, SiteGrinder gibi programları kullanıyorlar. Bu programlar her ne kadar günden güne daha iyi hale gelseler de, insanların yazdığı kodların çeşitliliğine ve öznelliğine ulaşamıyorlar.

Kendi standartlarla uyumlu XHTML kodunuzu yazabilmeyi bilmek, herhangi bir web takımında bir adım öne çıkmanızı sağlayacaktır (standartlarla uyumlu bölüme dikkat). PHP, ASP.NET, Ruby ve diğer pek çok dilin karmaşıklığı ile insanlar bir süre sonra öyle ya da böyle tüm web progrlama dillerinin HTML ile sonlandığını unutmuş görünüyorlar, çünkü bu dil, tarayıcınızın işin en sonunda sayfayı işlemesi için gereken dil. Çalıştığınız işin merkezi hakkında daha fazla şey bilirseniz, o işin merkezinde daha iyi olursunuz.

2. Daha iyi SEO
Ve biz standartlarla uyumlu kodlamadan bahsederken, SEO (arama motoru optimizasyonu) teriminden de bahsetmemiz gerekiyor. Buna rağmen SEO, büyük web sitelerine eklenen özel bir eklentiden ziyade gün geçtikçe bir web sitesinin var olma sebeplerinin başında gelmeye başlıyor.

Eğer kendi kodunuzu yazmayı öğrenirseniz, yeteneklerinizin yer aldığı listeye "SEO Uyumlu Tasarımlar" yapabildiğinizi eklemeye daha da yaklaşırsınız. Bunun anlamı, müşterilerinizden daha fazla para talep edebilirsiniz ki bu da daha fazla gelir anlamına gelir.

3. Daha İyi Erişilebilirlik
Daha iyi kod ve daha iyi SEO = daha iyi erişilebilirlik. Tüm tasarımcıları işinin bir bölümü, bilgiyi açık ve kolay anlaşılır bir şekilde aktarabilmektir ve web üzerinde bu sadece görsel anlamda değildir. Kötü kodlanmış bir web sitesi eğer körseniz ya da mobil aygıtlar kullanıyorsanız kullanılamaz.

Erişilebilirlik için kodlamanın artılarını ve eksilerini öğrenmek üretim kabiliyetlerinizin artmasını sağlamakla kalmaz, ayrıca erişilebilirlik için tasarım yaptığınızda dikkat etmeniz gereken ayrıntıları fark etmenizi sağlar.

4. Daha İyi Sol Taraf
Beynin sağ bölümünü kullanan yaratıcılardan olmak mükemmeldir, ancak sol tarafınızı da kullanabilmek yaratıcılığınızı teşvik edecektir. WordPress websitesinin sloganı "kod şiir gibidir", zira yazılan bir dili görsel olarak görülebilen bir şekilde yazmak gerçekten bir sanat biçimidir.

Kendi kodunuzu yazmayı öğrenmek, pek çok aktarım yöntemlerini öğrenmenizi sağlar. Teknik ve analitik yeteneklerinizi geliştirmek tasarım, telkafes geliştirme ve etkileşim tasarımları üzerinde çalışırken izlemeniz gereken yollar hakkındaki bilginizi ilerletebilmenizi sağlar. Ve kim bilir, matematik bilginizi bile geliştirebilir.

5. Daha İyi İletişim
Geliştiriciler tarafından kullanılan bu dil arasında kaybolmak çok kolaydır, çünkü en basitinden onların tartıştığı konular hakkında daha önce hiç bilgi sahibi olmamışsınızdır. Kendi kodunuza dalmak ve onunla birlikte çalışmak, bir sitenin alt yapısı üzerinde tartışırken kullanılan bu terminolojiye yabancılık çekmenizin önüne geçecektir.

Bu dili konuşabilmek, tasarımın nasıl siteye aktarılmasını geliştirici ve proje yöneticisi ile konuşmanız gerektiğinde önemli bir yardımcınız olacaktır.

6. Daha İyi Tasarım
Bunu sadece bir tasarımın esaslarını bilerek yapabilirsiniz. Tipografi, renk teorileri, kompozisyon vb elementler, iyi bilmeniz gereken muhteşem ve çok önemli yeteneklerdir... ancak bir süre sonra yaratıcılığınızı ilerletmek ve bu konuda üstün olmak istiyorsanız, o zaman bu alanın araçlarını öğrenmeniz gerekecektir. Ressamlar tuval tipleri, boyama kompozisyonları ve fırça kılı kalitesi hakkında bilgi sahibi olurlar... Web tasarımının da bundan farkı yoktur... Kod yazmayı öğrenin: Daha iyi olacaksınızdır.

Kaynak: Web Designer Depot

Kodlama yapan bir tasarımcı mısınız? Tüm tasarımcılar kodlama yapmayı öğrenmeli midirler? Yorumlarınızla düşüncelerinizi paylaşın

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