bildirgec.org - brum - beğendikleri

bilgisayarı yeniden başlatma sorunu için dr. web

brum — Fri, 08 Oct 2010 09:46:00 GMT

bilgisayarınız zararlı bir yazılımdan ötürü "boot" edilemiyorsa, çaresi bu yazıda bahsedeceğim dr.web livecd'de.

dr.web livecd için hangi işletim sistemini kullandığınız mühim değil. ister linux isterseniz windows kullanıyor olun farketmiyor. buradaki siteye girdikten sonra iso uzantılı dosyayı indirin ve bu kalıp dosyasını cd'ye yazın. daha sonra da bilgisayarınızı cd'den boot edin.

bu yazılım, bilgisayarınızın boot edilmesi sorunları virüs kaynaklı olduğunda kullanılması gereken bir yazılım. açılma sorunu olan bilgisayarınız, başladığında önce mühim dosyalarınızı kurtarın/yedekleyin, sonra virüs taramasından geçirin. bu sayede verilerinizi kaybetmek ve format atmak gibi dertlerden kurtulmuş olun.

bilgisayarınızı başlattıktan sonra ve yazılımın görüntüsü ekranınıza geldiğinde, seçeneklerden varsayılanları ayarlayın.

bundan sonra masaüstü kullanıcı arayüzü karşınıza gelecek. virüs tarama ve yedekleme işlemlerine geçebilirsiniz.

buradan yazılım hakkında ingilizce ve rusça dökümanlara ulaşabilirsiniz.

dr.web livecd yazılımı live cd olduğundan, cd'yi taktığınızda bilgisayarınızda herhangi bir değişiklik olmayacaktır. kurtarma ve tarama işlemlerinden sonra işletim sisteminizi eskisi gibi kullanmaya gönül rahatlığıyla devam edebilirsiniz.

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

72 seo uzmanının oyladığı sıralamalarda etkili olan faktörler

brum — Mon, 31 Aug 2009 09:06:00 GMT

İnternet dünyasının en önemli SEO kaynaklarından birisi olan Seomoz.Org tarafından 2 yılda bir yapılan ve dünyanın önde gelen SEO uzmanlarının katılımıyla oluşturulan "Search Engine Ranking Factors" anketinin bu yıl 3.sü yayınlandı. Amerika Birleşik Devletleri, İngiltere, İzlanda, Kanada, Yeni Zelanda, Avustralya, Ukrayna ve Dominik Cumhuriyeti'nden 72 uzmanın katılımıyla gerçekleşen ankette sıralamalarda etkili olduğu düşünülen faktörler tek tek oylanmış ve bunlar oranlar ile belirtilmiş.

Seomoz.Org - Seo'ya Etki Eden Faktörler

Tekniklerin arama sonuçlarına etkilerinin oransal açılımlarına ve uzman yorumlarına buradan ulaşabilirsiniz.

Anket sonucunda oraya çıkan sonuçlara göre olumlu yönde en çok etki eden faktörler şöyle sıralanmış;

Anahtar kelime odaklı tanıma sahip harici linkler [Oranı: % 73]
Kaliteli ve aynı zamanda sizinle aynı anahtar kelimede yayın yapan sitelere siteniz üzerinden link verdiğiniz takdirde onun kalitesinin gölgesinden yararlanarak arama motorları tarafından artı puan kazanırsınız.

Harici Linklerin Kalitesi [Oranı: % 71]
Sitenizden dış sitelere verdiğiniz linklerdeki kalite bölü sayı oranı ne kadar fazla ise sitenizin kazanacağı değer de o kadar çoktur. Kalitesiz sitelere verdiğiniz linkler gereksiz yere sitenize eksi puan kazandırır.

Dış linklerdeki çeşitlilik [Oranı: % 67]
Sitenize başka sitelerden verilen linklerin farklı domainler üzerinden olması da ayrı bir etken. Blogspot ile oluşturulmuş aynı ana domaine sahip 5 siteden verilen linkler 1 puan kazandırırsa, farklı domaine (subdomainler değil) sahip 5 siteden sitenize verilen linkler 5 kazandırır.

Sitenizin Başlığında (Title) Anahtar Kelimenizin Geçmesi [Oranı: % 66]
Sitenizde title tagları arasına eklediğiniz başlığınızın (çok uzun bir başlık olmaması kaydıyla) herhangi bir yerine anahtar kelimenizi eklemelisiniz. Bu sayede sıralamalarda çok hızlı yükselebilirsiniz.

Güvenilir domainlerden yararlı linkler (Trustrank değeri yüksek) [oranı: % 66]
Trustrank gibi, 'güvenilir site puanları' yüksek ssayfalardan sağlanan linkler de seo için fazlasıyla önem taşımaktadır.

Site yapısında Anahtar kelime kullanım konusundaki ilk 10 oran ise şöyle;

Site Başlığında (Title) Anahtar Kelime Geçmesi [Oranı: % 66]
site başlığının en başında anahtar kelime geçmesi [oranı : % 63]
Ana domainde anahtar kelime geçmesi - Örn; anahtarkelime.com [oranı: % 60]
Sitenin herhangi bir yerinde H1 tagı içerisinde anahtar kelime kullanılması [oranı: % 49]
Site içi linklemelerde anahtar kelimelerin kullanımı [oranı: % 47]
Site dışına verilen linklerde anahtar kelimelerin kullanımı [oranı: % 46]
h1 taglarının içinde en başta anahtar kelimenin geçmesi [oranı: % 45]
HTML kodlarının ilk 50-100 kelimesi içinde anahtar kelime kullanılması [oranı: % 45]
subomainde anahtar kelime kullanımı - örn; anahtarkelime.pilli.com [oranı: % 42]
Sayfa adreslerinde anahtar kelime kullanımı - örn; pilli.com/anahtarkelime.html [oranı: % 38]

Daha fazlası için tıklayın

Seoyu negatif yönde etkileyen faktörlerden en önemli 5 tanesi ise şöyle sıralanmış,

Sayfa içeriğinde gizlenmiş kötü niyetli yazılımlar ve virüs bulunması [oranı: % 68]
Link alımı ve satımı yapmak (Açıktan linkleri belirterek yapmak daha tehlikeli) [oranı: % 56]
Spam site vaya sayfalara siteden link verilmesi [oranı: % 51]
Linklerin ve ziyaretçi bilgilerinin gizlenmesi [oranı: % 51]
Server sorunlarından kaynaklı uzun süreli kapanmalar ve sitenin açılmaması [oranı: % 51]

Negatif etkileyen faktörlerin devamı için tıklayın

Site içi seoda etkili ancak anahtar kelime bazlı olmayan faktörler : http://www.seomoz.org/article/search-ranking-factors#on-page-non-keyword-ranking-factors

Coğrafik faktörler : http://www.seomoz.org/article/search-ranking-factors#geo-targeting-factors

Diğer faktörler : http://www.seomoz.org/article/search-ranking-factors#ranking-factors

Link inşa etmek için gerekli taktikler için sizi buraya alalım.

Ankete katılan uzmanların listesi de burada.

Kaynak

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

Twitter arkaplanı sağlayan ücretsiz websiteleri

brum — Thu, 20 Aug 2009 14:34:00 GMT

twitter

Twitter dünya çapında çok sevilen, çok kullanılan bir site! Kullanıcılarına sunduğu özellikler sayesinde, sayfa tasarımını değiştirebiliyorsunuz. Tasarımın en önemli unsurlarından biri de arkaplanlardır.

İşte twitter arkaplanlarınızı oluşturmak için size ücretsiz kaynaklar yaratacak websiteleri;

Twitter Patterns

Twitter Image

Twit Paper

Twitter Backgrounds

Free Twitter Designer

MyTweetSpace

SweetTweet

PrettyTweet

Twitter Background Images

TweetBacks

TweetHawk

TwitterBacksNow

TwitterBugg

Bu yazı brum 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 Sitenizin Mobil Versiyonu İçin Ücretsiz Araçlar

brum — Thu, 20 Aug 2009 16:03:00 GMT

Mobil alemdeki başdöndürücü gelişmeler gerek cihazlarda, gerek işletim sistemlerinde ve gerekse de bağlantı altyapılarında son sürat devam etmekte.

Google, Microsoft, Apple, Nokia, Sony gibi daha bir çok dev şirket, bu alemin farklı katmanlarında büyük bir rekabet içinde bulunmaktalar (Şirketlerin mobil pazara yönelik hamlelerini içeren çeşitli haberleri, bu yazının bonus bölümünde bulabilirsiniz).

Bunun en büyük sebebi ise; kullanıcıların mobil cihazlara olan büyük ilgisi.Hatta birçok uzmana göre, önümüzdeki yıllarda Web'e olan erişim bilgisayarlardan daha çok mobil cihazlar üzerinden gerçekleşecek.
Hal böyle olunca, web'in en büyük sitelerinin çoğunun, bilgisayar kullanıcıları için olan versiyonlarının yanında bir de mobil versiyonlarını, yayına sunmuş durumdalar.

Siz de web sitenizin veya blogunuz'un mobil versiyonlarını hazırlamayı düşünüyorsanız, bu listede bulunan ücretsiz servsilerden yararlanabilirsiniz:
mofuse +

mobiSiteGalore

MOBIFY

Zinadoo

Bango

winksite

mobilemo

XTGEM

Jag.ag

PHN.ME

Bonus+++++++:
+SlideShare de mobil alemde!
+Yahoo mobile yenilendi
+Mobil Alemde Pazar Savaşı!
+MySpace windows mobile'de!
+mobil savaş devam ediyor!
+Google Adsense iPhone ve Android için Kullanıma Açıldı
+Nokia'nın Ovi Store'u Heryerde

Kaynak: tutorialfeed
algoz: Blog FriendFeed Twitter Facebook Email RSS

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

ticari siteler için wordpress

brum — Fri, 31 Jul 2009 14:44:00 GMT

genellikler blogcuların başvurduğu, içerik yönetim sistemi wordpress ile ticari siteler de hazırlamak mümkün. tabii bunun için birkaç eklentiye ve temaya ihtiyacınız var.
eklentiler:
WordPress e-Commerce Plugin

sıklıkla kullanılan bu eklenti wordpress'e çeşitli ödeme araçlarını entegre etmenize olanak veriyor. eklentinin kişiselleştirilebilir olması da önemli bir artı.
shopp

ücretli bir eklenti olan shopp ile yine internet üzerinden alışveriş imkanı veren sitelerle bağlantı kurabilirsiniz.
eshop

stok kontrolü, istatistikler, ödeme metodları gibi çeşitli özelliklere sahip güzel bir eklenti.
quick shop

bu eklnti ile bir bileşen sayesinde alışveriş kartı ve "sepete ekleme" fonksiyonu oluşturabilirsiniz.
YAK for WordPress

yine wordpress için geliştirilmiş bir açık kaynak alışveriş kartı eklentisi.

temalar

Crafty Cart

dersler

kaynak

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

Kod Renklendiriciler | Code Highlighters

brum — Wed, 29 Jul 2009 11:33:00 GMT

Kod renklendiriciler (code highlighters) kod yazarken en büyük yardımcılarımızdır. Eğer yazdığınız kodların düzenli, tertipli, temiz ve hoş görünmesini istiyorsanız aşağıda listelediğim 5 tane kod renklendiricisinden birini mutlaka kullanmalısınız.

1. syntaxhighlighter
syntaxhighlighter %100 Javascript kullanılarak oluşturulmuş bir renklendiricidir. syntaxhighlighter ile tüm kodları renklendirebilirsiniz.

syntaxhighlighter

2. quick highlighter
quick highlighter ile html, php, javascript kodlarını renklendirebilirsiniz.

quick highlighter

3. fv code highlighter
frank verhoeven tarafından üretilen bu renklendirici dreamweaver kullanıcılarına pek de yabancı gelmeyecek kod renklendirmesi yapıyor.

fv code highlighter

4. source code highlighter
Bu renklendirici ile de c#, vb, aspx, html, xml ve javascript kodlarınızı renklendirebilirsiniz.

5. highlight.js
highlight.js tam otomatik çalışıyor. Sitenizdeki (blog, forum ya da başka bir site) kodu buluyor, dilini kendi tespit ediyor ve renklendiriyor.

highlight.js

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

XFN ile Yepyeni Bir SEO Tekniği

brum — Tue, 02 Jun 2009 09:05:00 GMT

SEO konusunda önemli bir yeri olan ve olmaya da devam edecek bir olgudan bahsetmek istiyorum : XFN - açılımı "XHTML Friends Network".

Bu da nedir dediğinizi duyar gibiyim, hemen açıklıyorum. Bu sistem link veren ile link alanın arasındaki bağlantıyı ifade ediyor. Örneğin linkimiz şöyle olsun;

<-href="http://www.bildirgec.org/" title="internet,tasarım,popüler kültür" rel="co-worker">Bildirgec<->

Not: "a href şeklinde yazınca sorun çıkıyordu o yüzden çizgi koydum başına ve sonuna"

Ve bu link hafif.org'da yayınlanıyor olsun.
Şimdi bunun anlamı : hafif'in sahibi ile bildirgec'in sahibi iş arkadaşlarıymış. Arama motoru linkteki "co-worker" tanımlamasını görünce bu anlamı çıkarıyor.

Bu sistemi önemseyen Google gibi arama motorları bu sayede link satışlarının, sahte linklerin önüne geçmeye çalışacaklar. Yakın bir zamanda normal linkleme sistemi yerine heryere bu şekilde XFN sistemi gelirse hiç şaşırmayın.

Şimdi de XFN için kullanılabilecek taglarda sıra ;

Arkadaşlık [Sadece 1 tanesini kullanabilirsiniz]
contact - (İletişilen) : Kolaylıkla iletişim kurabileceğiniz herhangi birisi - Genellikle Simetrik
acquaintance - (tanıdık) : Tanışmışlığını olan ama pek görüşmediğiniz herhangi bir kişi - Genellikle Simetrik
friend - (arkadaş) : arkadaşınız olan herhangi birisi. oda arkadaşınız, sıra arkadaşınız, kankanız gibi - Genellikle Simetrik

Fiziki
met - (yüz yüze) : Daha önce yüz yüze konuşulmuş herhangi birisi - Simetrik

Mesleki [Sadece 1 tanesini kullanabilirsiniz]
co-worker - (iş arkadaşı) : Aynı işyerinde çalıştığınız herhangi birisi- Genellikle Simetrik ve Normalde Geçişli
colleague - (meslektaş) : Sizinle aynı mesleği yapan yada aynı üniversiteden mezun olduğunuz herhangi birisi - Genellikle Simetrik ve Normalde Geçişli

Ailevi [Sadece 1 tanesini kullanabilirsiniz]
child - (çocuk): Kendi öz çocuğunuz veya evlatlık edindiğiniz birisi olabilir - Tersi > parent
parent - (ebeveyn): Çocuğun tersidir.
sibling - (kardeş): Sizinle aynı anne ve babadan olan kişi, kardeşiniz - Simetrik ve Normalde geçişli.
spouse - (eş): Evli olduğunuz kişi, eşiniz - Simetrik ama Geçişli değil
kin - (akraba): Sizinle akraba olan birisi - Simetrik ve normalde geçişli

Romantik [Sadece 1 tanesini kullanabilirsiniz]
muse - (ilham verici) : Kendisinden ilham aldığınız herhangi birisi - Tersi yok
crush - (hoşlanılan) : Kendisine aşık olduğunuz herhangi birisi - Tersi yok
date - (çıkılan kişi) : Çıktığınız (randevulaştığınız diyebiliriz) herhangi birisi - Simetrik ama Geçisli değildir
sweetheart - (sevgili) : Sevgiliniz olan kişi - Simetrik ama Geçişli değildir

Kişisel
me - (ben) : Kendi siteleriniz için kullanabilirsiniz. Met ile birlikte başka hiçbir tagı kullanamazsınız. Kesinlikle Simetrik olmalıdır.

Simetrik Nedir? :A B'ye simetrik olan bir bağlantı vermiş ise B de A'ya vermelidir.
Örneğin; Ahmet Mehmet'in iş arkadaşı ise Merhmet de Ahmet'in iş arkadaşıdır.
Geçişli Nedir? :A B'ye ,B de C'ye geçişli link vermiş ise A ile C arasında da bağlantı var demektir.
Örneğin; Ahmet ile Mehmet aynı yerde çalışıyor, Mehmet Fatih ile aynı yerde çalışıyorsa Ahmet ile Fatih de aynı yerde çalışıyor demektir.

Örnek bir şema; [büyük halini görmek için üzerine tıklayınız.]

XFN Örnek Şema

Eğer XFN linkinizi kendiniz oluşturamadıysanız online XFN Creator ile oluşturabilirsiniz.

Kaynak

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

Bilmeniz gereken youtube url HİLEleri

brum — Wed, 22 Apr 2009 12:27:00 GMT

youtube

Bildiğiniz gibi youtube dünyanın en büyük video paylaşım sitesi. Ülkemizden yasak olmasına rağmen, siteye bir takım girme yolları mevcut.

işte arkadaşlarınızla youtube video linki paylaşırken yada sitenize video eklerken çok işinize yarayacak link (URL) hileleri;

yüksek çözünürlüklü video izleme

bildiğiniz gibi youtube bazı videolarda bunu bize sunmakta, ancak bizim de istediğimiz çözünürlükte bunu ayarlamamız mümkün. linkin sonuna &fmt=18 (stereo, 480x270px boyutunda) yada &fmt=22 (stereo, 1280x720px boyutunda) kodlarını ekleyerek ayarlamalar yapabilirsiniz...

sayfalara yüksek çözünürlüklü video gömme

&ap=%2526fmt%3D18 yada &ap=%2526fmt%3D22 kodlarını kullanarak bunu yapmanız mümkün...

videoyu istediğiniz zamandan başlatma

bir video paylaşaksınız ancak göstermek istediğiniz bölüm videonun ortalarında bi yerde, işte bu durumda url'nin sonuna ekleyeceğiniz kod #t=03m22s (#t=XXmYYs; XX: dakika için, YY ise saniye için)...

Arama kutusunu gizleme

youtube arama kutusu

Bildiğiniz gömmüdüğünüz youtube videolarının sonunda arama kutusu çıkmakta. bunu gizlemek için gömme koduna &showsearch=0 bölümünü eklemeniz yeterli....

videonun sadece bir bölümünü oynatma

youtube video oynatma

örneğin ilk 30 saniyeyi atlamak isterseniz &start=30 kodu yeterlidir...

gömme videoları otomatik oynatma

normalde gömdüğünüz youtube videolarında, videolar otomatik başlamaz. bunu otomatkleştirmek için kodun, video link bölümüne &autoplay=1 kodunu eklyebilirsiniz.

video sonunda çıkan özellikleri iptal etme

gömme videolarda işe yarayan bu özelliği &loop=1 kodu ile kullanabilirsiniz. kodu eklediğinizde göreceksinizki; video bittiğinde otomatik olarak tekrar baştan oynamaya başlayacak...

benzer videoları iptal etme

youtube video sonunda çıkan benzer video özelliği

eğer paylaştığınız videolarda başka insanların yayınladğı benzer videoların, video sonunda gözükmemesini istiyorsanız; gömme kodunda bulanan linkin sonuna ekleyeceğiniz &rel=0 kodu ile bundan kurtulabilirsiniz...

belirli ülkeler için yayınlana videoları seyretme

bazı videolar sadece belirli ülkeler için yayınlanmakta ve siz başka ülkeden bağlandığınız takdirde bunları seyredememektesiniz. bu tarz videoları izlemek için; http://www.youtube.com/watch?v=
(herhangi bir kod) olan video linkini http://www.youtube.com/v/(herhangi bir kod) şeklinde değiştirmeniz gerekmekte...

Bu yazı brum 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 için 10 kaliteli tuğla dokusu

brum — Mon, 13 Apr 2009 08:32:00 GMT

Tasarımcılar için dokuların değerini ölçmek mümkün değil. Her tasarımcının gözünde dokuların yeri şüphesiz ayrıdır, fakat her tasarımcı dokuların iyi kullanıldığı takdirde tasarıma ekstra bir değer katacağını bilir.

İşte tasarımcılar için 2.896x1.944 piksel boyutlarında kullanabilecekleri 10 adet tuğla dokusu;

tuğla

tuğla

tuğla

tuğla

tuğla

tuğla

tuğla

tuğla

tuğla

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

Websitenizi Hızlandıracak ve Kodunuzu İyileştirecek 15 İpucu

brum — Wed, 08 Apr 2009 07:06:00 GMT

Bir süre kodlama yaptıktan sonra artık kendinizi tekrar etmeye başlar, aslında ne kadar zeki olduğunuzu unutursunuz. Kaç yüz tane klavye kısayolunu hafızamızda tutuyoruz? Kaç tane kodlama dili öğrendik? Kaç tane çatı? Kaç tane hile? Web geliştirme/tasarım dünyasının zor bir endüstri olduğunu söylemek, işin kolayına kaçmak olur. Ayrıca bugün bildiğimiz şeylerin pek çoğu, birkaç yıl sonra artık kullanılmayan teknolojiler listesindeki yerini alacaktır.

Bugünkü yazımızda özellikle giriş seviyesindeki geliştiricilerin geliştirmek için harcadığı süreyi kısaltacak ve daha verimli şekilde kodlama yapabilmelerini sağlayacak bir dizi ipucunu bulacaksınız. İpuçlarının arasında zaman kazandıran ipuçlarının yanısıra bazı özel programlama dillerine özgü ipuçları sayesinde web uygulamalarınızın verimliliğini de arttırabileceksiniz.

Görsellerinizi Daha Fazla Sıkıştrın

Photoshop üzerinde "Save for Web" (Web İçin Kaydet) aracını kulandığınız zaman, görsellerinizi sıkıştırarak dosya boyutunu indirgeyebilirsiniz. Ancak ilgili dosyaların kalitesinden ödün vermeden daha da fazla sıkıştırabileceğinizi biliyor muydunuz? Smush.It adındaki bu site sizler için bu işlemi hallediyor.

Peki Bu Nasıl Mümkün Olabiliyor?

Smush.It ekibi bunun için bir dizi araç kullanıyor:

Görselin biçimini algılamak ve onu GIF ya da PNG'ye dönüştürmek için ImageMagick,
PNGlerin gerekli olmayan bölümlerni kaldırmak için pngcrush. Site ayrıca daha da iyi png optimizasyonu için pngout, optipng, pngrewrite gibi diğer araçları da inceliyor,
JPEGlerdeki tüm meta verilerini kaldırmak ve progresif JPEGler oluşturmak için jpegtran (şimdilik etkin değil),
GIF animasyonlarını, farklı çerçevelerdeki tekrar eden pikselleri kaldırmak için gifsicle.

Bu yüzden yeni bir sitenin duyurusunu yapmadan önce, sitenizin URL'sini Smush.It'e girerek tüm görsellerinizin otomatik olarak optimize edilmesini sağlayablirsiniz. Eğer site, görsellerinizi optimize ederek kalitesinden ödün vermeden dosya boyutunu önemli ölçüde düşürebilirse (ki büyük ihtimalle sonuç bu olacaktır), o zaman sitenizde kullandığınız görselleri Smush.It'in verdikleri ile değiştirebili ve gerekirse HTML ve CSS dosyalarınızı da güncelleyebilirsiniz. Hazır görsel dosya biçimlerinden bahsediyorken, dosyalarınızı PNG biçiminde kaydetmek her zaman en doğrusu olacaktır. Artık demode olan animasyonlu GIF görselleri kullanmadığınız sürece PNG biçimini kullanmayı alışkanlık haline getirin.

Akıllı Olun. Kod Parçacıkları Kullanın.

Pek çok IDE, "code snippet" (kod parçacığı) panelini destekler ve bu paneller aracılığı ile özellikle sık sık kullandığınız kod parçacıklarını kategoriler altında depolayabilirsiniz. Sırf müşterinize tasarımın nasıl olacağını göstermek için her seferinde lipsum.com web sitesini ziyaret ederken mi buluyorsunuz? Bunun yerine neden birkaç paragraflık lorem ipsum metnini kod parçacığı olarak kaydetmeyesiniz ki? Örneğin Dreamweaver uygulamasında "Shift F9" klavye tuş kombinasyonunu kullanarak kod parçacığı sekmesini açabilirsiniz. Ardından sizin için uygulan olan kod parçacığını yine sizin için uygun olan yere sürükleyip bırakabilirsiniz. Bu özellik kod yazarken bana çok fazla zaman kazandırıyor.

Console.log() Hata Ayıklamasını Kullanın

jQuery kütüphanesini indirdiniz ve sözdizimini anlamak için çabalıyorsunuz. Bu sırada bir yerde takıldığınız ve $bilmemne değişkenin neye eşit olduğunu bilmiyorsunuz. Sorun değil, tek yapmanız gereken console.log($degiskenadi); kodunu eklemeniz.

Ardından Firefox'u çalıştırın (Firebug eklentisinin kurulu olduğundan emin olun) ve F12'ye basın. Doğru değişken değeri ile karşılaşacaksınız.

Şimdi ise bunu sonsuzlukla çarpın ve zamanın derinliklerine götürün. Bunun sonucunda bile Firebug ve console.log()'un ne kadar kullanışlı olduğunu fark edemeyeceksiniz :)

Web Geliştirici Araç Çubuğunu İndirin

Chris Pederick tarafından geliştirilen bu inanılmaz derecede yardımcı Firefox eklentisi size sayısız seçenek kuluyor. Bu eklenti sayesinde sitenizdeki CSS dosyalarını eşzamanlı olarak düzenleyebilmeniz mümkün. Eklentinin desteklediği diğer özellikler ise:

JavaScript'i kolayca etkisizleştirmek,
CSS'yi kolayca etkisizleştirmek,
Hızlı HTML / CSS doğrulama bağlantıları,
Cetveller,
Çerezleri etkisizleştirme,
Ve daha sayısız kullanışlı özellik.

Web Developer Toolbar eklentisi, her web geliştiricisinin Firebug ile birlikte kullanması gereken bir eklenti.

Betik Etiketlerini Alta Yerleştirmeyi Deneyin

Günümüzde kullandığımız pek çok tarayıcı, aynı sunucu adı üzerinden eş zamanlı olarak en fazla iki adet dosyayı indirebilir. Ancak bir betik indirirken diğer dosyaların indirilebilmesi için önce betiğin tamamen indirilmiş olması gerekir.

Bu yüzden mümkün olduğu kadar betiklerinizi çağıran bu kodları belgenizin sonuna eklerseniz, görseller ve css gibi diğer bileşenlerin önce indirilip sitenizin görüntülenebilmesini, ardından da son olarak bu betiklerin indirilebilmesini sağlayabilirsiniz.

Unutmayın, bu yöntem kullandığınız betiğin işlevine göre kullanılabilir ya da kullanılamayabilir. Bu sebeple betik kodlarınızı belgenizin alt kısmına taşıdıktan sonra sitenizi test etmeyi unutmayın.

Yayım Yaparken, CSS ve JavaScript Dosyalarınızı Sıkıştırın

Eğer performans, web siteniz için önemli ise, o zaman sitenizi yayımlamadan hemen önce CSS ve JavaScript kodlarınızı sıkıştırmanızı öneririm. Bunu geliştirme işinizin en başından itibaren yapmaya kalkışmayın zira bunun size yarardan çok zararı dokunur. Ancak kodlamayı bitirdikten sonra kodunuzu sıkıştırabilirsiniz.

JavaScript Sıkıştırma Servisleri

CSS Sıkıştırma Servisleri

JavaScript kodlarını paketlemek için kullanabileceğiniz diğer iki servis ise YUI Compressor ve JSMin.

Bnun yanısıra HTML kodlarınızı da sıkıştırmayı deneyebilirsiniz, ancak bunu önermem. HTML dosyalarınızı sıkıştırarak kazanacağınız dosya boyutu gerçekten çok az.

jQuery Kolay ve Hızlı İpuçları

Kısa bir süre önce tvdesign.co.uk'den Jon Hobbs-Smith, 25 jQuery ipucunu listelediği mükemmel bir makale yazmıştı. Bu sayfayı yer imlerinize eklemeyi ihmal etmeyin. İşte bu yazıdan benim en beğendiğim birkaç ipucu.

jQuery'de Bir Elementin Olup Olmadığını Kontrol Etmek

if ($('#myDiv).length) {
// bu kod sadece #myDiv ID'sinin bulunduğu zaman çalışacaktır.
}

Kontekst Kullanın

Pek çok insan, DOM elementlerine erişirken, jQuery'nin ikinci bir parametreyi kabul ettiğinin farkında değildir. Aşağıdaki koda bir bakın.

var myElement = $('#someElement');

Bu kod, jQuery'nin tüm DOM'u geçmesini gerektirir. Bunun yerine ikinci bir parametre ekleyerek hızı oldukça arttırabiliriz.

var myElement = $('#someElement', $('.someContainer'));

Yukarıdaki kodda jQuery'e, .someContainer elementi içerisinde arama yapmasını ve onun dışındakileri dikkate almamasını söylüyoruz.

Sınıflar Yerine IDler Kullanın

jQuery ile IDlere erişirken, kütüphane bilinen getElementById yöntemini kullanır. Ancak sınıflara erişirken jQuery, DOM'u geçebilmek için kendine özgü yöntemleri kullanmayı dener, zira getElementByClass diye bir yöntem yoktur. Sonuç olarak, ID yerine sınıf kullanmanız durumunda işlem biraz daha uzayacaktır.

25 İpucunun Tamamını İnceleyin

$_POST Yerine Mümkünse $_GET Kullanın

Eğer AJAX istekleri yaparken $_GET ve $_POST arasında bir seçim yapma şansınız varsa, $_GET kullanın.

Yahoo! Mail ekibi, XMLHttpRequest kullanırken, POST'un tarayıcılar üzerinde iki işleme neden olduğunu görmüştür. POST, ilk olarak başlıkları, ardından da verinin kendisini göndermektedir. Bunun yerine GET kullanmanız durumunda, eğer çok fazla çereziniz yoksa, sadece bir TCP paketi gönderilmektedir.

Unutmayın - $_GET verisini her zaman kullanamazsınız. ilk olarak ne yaptığınızdan emin olun ve querystring ile veritabanı erişimini hiçbir zaman karıştırmamanız gerektiğini unutmayın. Kısa bir süre önce Twitter arkadaşlarımdan bir tanesi, bana URL'sinde bir MySQL sözdizimi olan bir web sitesi gönderdi. Bunu asla yapmayın!

Pratik Olduğunda Kütüphaneleri ve Çatıları Kullanın

İster PHP kullanın ister ASP.NET, mooTools ya da jQuery, ya da tüm bunların bir birleşimi, uygun olduğu zamanlarda çatıları kullanmayı deneyin.

Örneğin:

Eğer basit bir statik web sitesi kullanıyorsam sadece fare imlecini bir elementin üzerine getirdiğimde bir efektin belirmesini istiyorsam, bunun için jQuery kütüphanesini kullanmam doğru olmaz.
Eğer statik web sitemin en karmaşık özelliği bir XML dosyası üzerinden veri almak ise bunun için bir çatı kullanmama gerek yok. Bu gibi durumlarda sitem hem daha yavaş çalışacak, hem de daha fazla bant genişliği kullanacağı için bana daha pahalıya malolacak.

Ancak eğer tam bir içerik yönetim sistemi ve karmaşık veri erişim yöntemlerini gerektiren bir web sitesi geliştiriyorsam, o zaman beğendiğim çatılara bir göz atmayı ihmal etmem.

Unutmayın - çatıların sizin için çalışmasını sağlayın, tam tersini değil. Bu kararları verirken zeki olun.

YSlow

YSlow, web sitenizi inceleyip onun mümkün olan en verimli şekilde çalışıp çalışmadığını kontrol eden ve size öneriler sunabilen mükemmel bir servis. Yahoo! geliştirme ekibi, kısa bir süre önce, web uygulamaları geliştirirken takip etmeniz gereken öğelerin yer aldığı bir kılavuz yayımlamıştı.

Ayrıca dilerseniz Yslow Screencastı'na bir göz atarak bu zaman kazandırıcı ipuçlarının neler olduğunu görebilirsiniz. Vaktiniz olduğunda kesinlikle izlemenizi öneririm.

Klavye Kısayolları. Öğrenin!

Pek çok deneyimli tasarımcılar ve geliştiriciler burada bana katılacaktır, eğer sitemde ya da tasarımımda ne zaman bir değişiklik yapmak istesem elimi fareye uzatıp araç çubuğuna gitmiş olsaydım, çok zaman kaybetmiş olurdum. Klavye kısayollarını o kadar uzun zamandan beri kullanıyorum ki artık bu kısayolların işlevlerin hangi araç çubuğu ya da hangi menü altında olduğunu unuttum diyebilirim. Tek bildiğim, "Shift X"in doğru paneli açtığıdır.

İşe yeni başladığınızda bu kısayolları öğrenmek size zaman kaybı gibi görünebilir. Ancak sizi temin ederim ki yanılıyorsunuz. Size Google üzerinde "X keyboard shortcuts" (X klavye araması) (burada X kullandığınız yazılımın adını temsil ediyor, örneğin Photoshop için "Photoshop Keyboard Shortcuts") araması yapmanız. Ardınan bulduğuğnuz tablonun yazıcıdan çıktısını alın ve bilgisayarınızın yanına koyun. Ondan sonraki birkaç haftalık süre içerisinde fareye mümkün olduğu kadar az dokunarak bu kısayollar üzerinde pratik yapmayı deneyin. Klaye kısayollarını bilmek, uzman kullanıcılar ile giriş seviyesindeki kullanıcıları birbirinden ayıran belki de en önemli etkenlerden biridir.

Yeni Web Sitesi Şablonu Oluşturun

İtiraf edin, her web sitesi gelişmiş ve karmaşık uygulamalar gerektirmez. Bazen, hatta belki de kimileri için çoğu zaman, sadece bugüne kadar yaptığımız işlerin yer aldığı bir web sitesini göstermek isteyebiliriz. O zaman bu gibi durumlarda kullanabilmek için her yeni bir web sitesi oluşturacağımızda kullanacağımız bir web sitesi "şablonu" oluşturmayalım?

"Template" klasörümün içerisine "JS" ve "CSS" klasörlerini yerleştirdim.

"JS" klasörüm, DD_belatedPNG.js dosyasını içeriyor (bu dosya, IE6'de PNGlere 24 bit saydamlık desteği getiriyor).
"CSS" klasörümde ise içi boş "default.css" dosyamın yanısıra benim hazırladığım sıfırlama dosyası yer alıyor.

Bunun yanısıra index.html(php) dosyamın içerisinde de projelerimin pek çoğunda kullanacağım birkaç kod parçası yer alıyor. Bu kod öyle aman aman özel bir kod değil ancak bunu önceden hazırlamak size zaman kazandıracaktır.

Kullandığım index.html dosyasının bir örneği

Yukarıdaki kodda da göreceğinz üzere önce CSS ve JavaScript dosyalarıma bağlantı verdim ve ardından Google jQuery dosyasına da bağlantıyı ekledim. son olarak document.ready() jQuery fonksiyonunu oluşturdum ve standart "container" divimi açtım.

Bu kod her ne kadar basit görünse de inanın size zaman kazandıracaktır. Bu sayede ne zaman yeni bir web sitesi oluşturmanız gerekirse, o zaman tek yapmanız gereken "template" klasörünün içerisindeki bu dosyaları kopyalamaktır.

Satıriçi ve Harici Karşı Karşıya

Genelde tüm CSS ve JavaScript dosyalarınız sayfadan çıkarılmalı ve kendi harici dosyalarında korunmalıdırlar.

Bunu neden yapmalıyız?

Daha temiz kod,
Sunumun ve içeriğin birbirinden ayrılması önemlidir,
Harici dosyalar kullanarak onları istemcinin sisteminde depolamış oluyoruz. Bu, HTML dosya boyutunu düşürmenin yanısıra harica HTTP isteğine de yol açmıyor, zira ziyaretçi ya da istemci ilgili dosyayı ilk kez istediğinde depoluyor ve sonraki seferlerde aynı dosyayı indirmiyor.

Eğer sadece birkaç satırlık stiliniz var ise o zaman onun için harici dosya oluşturmayabilirsiniz. Bu gibi durumlarda, ama sadece bu gibi durumlarda, ilgili kodu HTML içerisine gömebilirsiniz.

PHP Betiğinin JavaScript İle Çağırılıp Çağırılmadığını Kontrol Edin

AJAX aldı başını gidiyor, özellikle en sonunda, JavaScript kütüphaneleri sağolsun, kullanıcı dostu hale geliyor. Bazı durumlarda betiğin JavaScript ile mi çağırılıp çağırılmadığını belirlemeniz gerekebilir. Bu görevi yerine getirmek için kullanabileceğiniz birkaç yöntem bulunmaktador.

Bunlardan birisi POST'u gönderirken JavaScript'iniz ile özgün bir anahtar değerini JavaScript'inize iliştirmektir. Ardından PHP kullanarak bu anahtarın varolup olmadığını kontrol edebilirsiniz. Eğer var ise, o zaman JavaScript etkin olduğunu anlarız.

Daha iyi bir yöntem olarak PHP'nin HTTP_X_REQUESTED_WITH özelliğini kullanmaktır. Şöyle ki...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// kodunuzu buraya yazın ve JavaScript'in etkin olduğundan emin olun
} else {
// JavaScript'in etkin olmadığı kullanıcılar için birleyler yapın.
}

Google CDN'ye Bağlantı Verin

Kısa bir süre önce Google jQuery gibi popüler betikleri kendi sunucularında depolamaya başladı. Eğer bu tip kütüphanelerden birisini kullanıyorsanız, o zaman ilgili betiği kendi sunucunuzda depolamaktansa bu betikleri Google CDN üzerinden çağırmanız şiddetle önerilir.

AJAX Kütüphaneleri API'si

Peki Ama Neden?

Caching (Depolama): Bu tip betikleri Google CDN üzerinden çağıran web sitelerinin sayısı gün geçtikçe artmaktadır. Bu sebeple eğer siz de ilgili dosyayı Google sunucusu üzerinden çağırırsanız, ziyaretçiniz muhtemelen o dosyayı sizin siteniz üzerinden indirmeyecektir, zira bir başka site üzerinden aynı dosyayı daha önce indirmiş olabilir. İlgili dosyayı daha önce indirmiş bir ziyaretçi sizin sitenizi ziyaret ettiğinde istemci, Google sunucularından 304 (değiştirilmemiş) mesajı alacak, bu sebeple de o dosyayı doğrudan istemcinin yerel bilgisayarı üzerinden kullanacaktır. Bunun sonucunda da sizin web uygulamanız kullanıcıya daha çabuk açılacaktır.
Eş Zamanlılığı Arttırın: Daha önceki bir ipucunda bundan bahsettim. Bu fazladan dosya isteğini kaldırarak istemcinin daha fazla içeriği eş zamanlı olarak indirebilmesini sağlamış olursunuz.

Firefox Eklentilerini Kullanın

Ben Google Chrome'nin büyük bir fanatiğiyim. Çok hızlı açılıyor ve JavaScript'i diğer tüm tarayıcılardan daha hızlı çalıştırıyor (Firefox'un henüz yayımlanmamış 3.1/3.5 sürümü sanırım Chrome'nin hızını yakalayacak).

Buna rağmen bu, Firefox'u kısa bir süre içerisinde bırakacağım anlamına gelmiyor. Bu tarayıcın için sunulan bazı kullanışlı eklentiler gerçekten büyüleyici. İşte benim beğendiklerim:

Yardımcı Olduğunda IDE Kullanın

Tıpkı günümüzde Microsoft'tan nefret etmek ne kadar moda ise, geliştirme yaparken IDE kullananlara saldırmak ta o kadar moda. Bu gerçekten çok saçma.

Pek çok durumda, gelişmiş bir IDE kullanımı çok önemlidir, özellikle nesne yönelimli programlama (OOP) dilleri üzerinde çalışırken. Şimdi, eğer sadece sade bir HTML şablonu oluşturuyorsanız, o zaman Notepad++ ya da Coda/ sizin için mükemmel bir araç olacaktır. Aslında, bu araçların kullanımını bu gibi durumlarda öneririm. İhtiyacınız olmadığında bu tip programları kullanarak işinizi daha da zorlaştırmayın. Ancak, gelişmiş uygulamalar geliştirirken, IDE'nin avantajlarından da faydalanın.

Hepsi Bu Kadar!

Sanırım şimdilik bu kadar yeterli. Umarım bunlardan bazıları (belki de hepsi) sizi daha iyi birer tasarımcı ya da geliştirici kılmaya yardımcı olacaktır. Sizin beğendiğiniz kısayollar hangileri? Yorumlarınızla paylaşın.

İpuçları Hakkında Yazdığım Diğer Yazılar

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