web geliştirme kategorisi

bu kategoriye ait yazılar listeleniyor

bir vps hikayesi: slicehost 6

geçtiğimiz hafta blogun tasarımını yenilerken kullandığım web sunucusunu da değiştirmiştim. öncelikle sebeplerden başlamak istiyorum.

neden mediatemple’ı bıraktım?

yıllar öncesinde blogcular arasında epey popüler olan dreamhost kullanmıştım. kampanya ile nerdeyse bedavaya aldığım 1 yıllık servisim bitince kaçarak ordan uzaklaştım. daha sonra oldukça popüler ve kaliteli görünen mediatemple‘a geçtim ve epey bir süredir de kullanıyordum.

orta ve küçük ölçekli bloglar için yeterli bir servis olan grid-service uzun süre beni de idare etti. fakat yeni projeler geliştirmeye başladığım zaman oldukça yetersiz kaldı. http ve database serverları onlarca farklı müşteriyle ortak kullandığınız için kendinize özel hiçbir ayar yapamıyorsunuz ve bu yüzden sisteminizi optimize etmeniz mümkün olmuyor. ek olarak veritabanı için herhangi bir cacheleme sistemi de kullanamıyorsunuz. bunun üzerine bir de katı bir şekilde memory, cron ve cpu sınırlamaları olması oldukça can sıkabiliyor. son olarak cluster 2′nin tamamen çökmesi ve birçok siteye birkaç gün boyunca ulaşılamaması sonucu mediatemple defteri benim için kapanmış oldu. (şu anda da ulaşılamıyor.)

vps (virtual private server) nedir? neden vps?

fiziksel bir sunucunun küçük parçalara bölünerek birçok sunucu olarak görev yapmasına olanak tanıyor. (detaylı bilgi) bu sayede tamamen size ayrılmış olan bellek ve disk parçasında istediğiniz gibi at koşturabiliyorsunuz. istediğiniz programları kurup istediğiniz kadar çalıştırabiliyorsunuz. bu konuda tamamen özgürsünüz.

burdan kulağa hoş gelse de vps yönetmek sıradan kullanıcılar için pek de kolay değil. çünkü seçtiğiniz linux dağıtımını uzaktan kurduktan sonra tamamen bomboş bir bilgisayara sahip oluyorsunuz. basit bir web sitesi sunabilmek için gerekli olan http sunucusunu (apache, nginx, lighttpd, … ) ve diğer gerekli olan sunucuları ve programları da (mysql server, mail server, php, ruby, rails, python, django, … ) siz kurup ayarlarını yapmak durumundasınız. ek olarak sunucunun ve bütün programların güvenliğini ve bakımını yapmak da size kalıyor. tabi bütün bu işleri yapmak için bir kontrol paneli de bulunmuyor, her şeyi konsoldan yapmanız gerekiyor.

bütün bu hizmetler de size müthiş bir esneklik sağlıyor. istediğiniz şekilde sunucunuzu optimize ederek oldukça hızlı ve çok kişiye aynı anda hizmet verebilecek bir web servisi yaratabilirsiniz. elbette optimizasyon mevzusu da pek kolay değil, servisinizin gidişatına göre farklı sunucuları/programları farklı şekillerde optimize etmek gerekebiliyor, bunun hazır bir formülü yok.

vps sisteminin diğer bir güzel yanı ise farklı servisleriniz için farklı sayıda vps parçaları alıp ihtiyaca göre esnek bir şekilde onları kullanabilirsiniz. örneğin; 3 farklı parça alıp, 2 tanesini http server, 1 tanesini de mysql server yapabilirsiniz. bu sayede http sunucuları sitenizin yoğunluğuna göre eşit olarak ziyaretçilere hizmet verirken, arka planda ortak olarak aynı mysql sunucusunu kullanırlar. bu sayede aşırı yoğunluklarda bile sorunsuz çalışan bir site geliştirebilirsiniz. ek olarak, mysql sunucusunu ayrı bir parçada tutmak potansiyel saldırılardan uzak, daha güvenli bir çalışma ortamı sağlayacaktır. bir diğer örnek olarak da 3 parçayı; 1 http server, 1 application server ve 1 database server olarak kullanabilirsiniz. bu durumda statik dosyalar direk olarak http sunucudan servis edilirken, uygulamanızın kendisi dinamik olarak ayrı bir parçada dış dünyaya kapalı olarak güvende çalışabilir. benzer şekilde veritabanı işlemleri de diğer parçada kendi başına çalışır. tabi tek bir parça satın alıp bütün servisleri aynı sunucudan sunmanız da mümkün.

neden slicehost?

slicehost’u seçmemin temel olarak 2 önemli ve basit sebebi var:

  1. güvenilir

    aynen mosso gibi slicehost da rackspace‘in bir alt şirketi ki bu isimleri duymamış olanınız herhalde yoktur.

  2. komünite

    slicehost’un geliştiriciler arasında oldukça güzel bir komünitesi var. her türlü kurulum, güvenlik ve bakımla kendiniz ilgileneceğiniz için bu yardım kanalları oldukça yararlı oluyor.

ek olarak slicehost api kullanılarak hazırlanmış olan iphone uygulaması sayesinde mobil yönetim ve durum kontrolü yapmanız da mümkün.

eğer siz de slicehost’u kullanmak isterseniz bu linki kullanarak üye olursanız sevinirim. bu sayede beni de referans göstermiş olursunuz.

 

basitleştirilmiş adresler 5

google ve sonrasında diğer arama motorları geçtiğimiz haftalarda yeni bir <link> etiketini kullanıma soktu. bu sayede sitenizde farklı adreslerde aynı içeriğin kopyalanmasını önleyebileceksiniz. tekrarlayan içerikler içinse tek bir geçerli adres verebileceksiniz. bilindiği üzere google içerik tekrarı yapan siteleri ve sayfaları cezalandırdığı için sitenizdeki içeriği tekrar eden sayfaları elemek oldukça önem kazanıyor.

bunun bir diğer yararı ise url ile spam yapan sitelerin önüne geçmek. bunlar da google’da ceza indirimi demek. eğer google’da içeriğinizi aratırsanız muhtemelen site adresinizin sonuna eklenmiş sex, p0rn0 adresleriyle süslenmiş adresler görme ihtimaliniz yüksek. üstelik farkına varmanız da hiç kolay değil. daha önceden htaccess ile buna çözüm bulmuştum. şimdiyse canonical etiketini kullanarak çözüm çok daha kolay. örneğin birisi size siteniz.com/?from=spamsite.com şeklinde bağlantı verip, google’da indekslenmeniz için uğraşsa bile google sitenize girdiğinde canonical etiketinden gerçek adresi alıp, onu indeksleyecektir.

<link rel="canonical" href="http://siteniz.com/"/>

eğer wordpress blogunuz varsa işiniz daha da kolay. bu yeni canonical eklentisini blogumu yeni sunucuya taşırken farkettim. pek yararlı. hemen indirip kullanınız. bütün wordpress kullanıcılarının banko eklentisi olmaya aday.

 

anlık dns değişimleri 2

eğer web sitelerini yönetme konusunda ileri seviye bir kullanıcı iseniz alan adınızla ilgili olarak dns değişiklikleri yapmak durumunda kalmışsınızdır. dns değişimlerinin tüm internete yayılması ise zaman almaktadır. aslında bu yanlış bilinen bir durumdur. alan adınızla ilgili olarak herhangi bir dns değişikliği yaptığınız zaman, misal google apps için yönlendirmeler yaptıysanız, bunun aktif hale gelmesi için beklemeniz gerekmez. dig‘i kullanarak değişiklikleri nerdeyse anlık olarak görebilirsiniz.

dig @ns1.slicehost.net baturalptorun.com

dig programı ve komutu mac os x’de yerleşik olarak bulunuyor. linux için de dağıtımınıza göre dnsutils ya da bind-utils paketlerinin içinde bulabilirsiniz.

son olarak kişisel bilgisayarınızda dns flush yapmanız gerekebilir. bunun için mac os x leopard’ta aşağıdaki komutu kullanıyorum.

dscacheutil -flushcache

daha eski versiyonları da ise lookupd’yi kullanabilirsiniz:

lookupd -flushcache
 

safari’nin eklediği kenarlıkları kaldırın 0

bilgisayarımda varsayılan web tarayıcım uzun süredir safari ve kendisinden oldukça da memnunum. kullanılabilirlik açısından birçok artısı bulunuyor. fakat bu artılar bazı şartlar altında sinir bozucu olabilir. bunlardan biri de seçili form öğelerinin etrafında renkli bir kenarlık (border) oluşturması. bu özellik standart form alanlarında oldukça kullanışlı oluyor. aşağıdaki örnek basecamp‘in üyelik formundan alınmıştır.

basecamp_signup

öte yandan renklendirilmiş özel bir form alanı için bu durum epey can sıkıcı bir hal alabiliyor. en azından arayüzünüzde çirkin bir görüntüye sebep oluyor. bu sebeple sitenizdeki form alanlarında safari’nin renkli kenarlıklar (border) eklemesini istemiyorsanız css dosyasınıza aşağıdaki satırı eklemeniz yeterli olacaktır.

* {outline: none;}
 

wordpress 2.7′de çalışmayan flash uploader 0

yeni yazı yazarken wordpress 2.7‘deki flash dosya yükleme aracı bir türlü çalışmıyordu. bir önceki versiyonda ise hiçbir sorun yoktu. her seferinde normal dosya yükleyiciye geçmek oldukça sinir bozucu bir durum oluyor. hatta bazen o da tekliyordu. 

neyseki wordpress forumlarında gezerken sorunu çözmeyi başardım. yeni versiyonun dosyaları yüklenirken bazıları düzgün güncellenmediği için çalışmıyormuş. eğer sizde de flash uploader çalışmıyorsa tek yapmanız gereken /wp-includes/js/swfupload/ klasörünü tekrardan yüklemek. web tarayıcınızın cache‘ini temizledikten sonra sorun çözülecektir.

sıfırdan wordpress 2.7 kurulumu yaparsanız muhtemelen herhangi bir sorununuz yoktur ama önceki bir versiyondan güncelleme yaptıysanız bu tip sorunlar olabilir. eğer sizin de benzer sorunlarınız varsa wordpress.org’dan temiz halini indirip wp-admin ve wp-includes klasörlerini yeniden yüklerseniz, sorununuz çözülebilir.

 

wordpress’te kategorileri vurgulamak 0

bazen ufak detaylar azımsanmayacak derecede önemli kullanılabilirlik deneyimlerine dönüşebiliyor. blogumuzu daha kullanışlı hale getirmek için wordpress‘in sunduğu birçok ufak detayı kullanmıyoruz, hattında farkında bile değiliz. mesela, kategori sayfalarını gezerken wordpress ilgili kategorinin listelemesini current-cat sınıfıyla işaretliyor. bu sayede kısacık bir css koduyla kullanıcıya kategori listesinde hangi kategoriyi gezdiğini hatırlatmak mümkün. 

benim css kodum oldukça minimal ve ilgili kategoriyi kalın harflerle yazmaktan ibaret fakat siz daha da dikkat çekmesi için aşağıdaki kodu kullanabilirsiniz.

.current-cat
{
   background-color: #fc0;
   font-weight: bold;
}

 
ufak ama önemli bir detay. ayrıca wordpress için tema geliştiricisiyseniz temalarınızda hazırladığınız css dosyalarında current-cat sınıfını her zaman tanımladığınızdan emin olun.

 

wordpress’te yazı revizyonlarını silmek 0

wordpress 2.6 ile beraber gelen yazı taslak (revizyon) kayıtları, ihtiyacım olmadığı halde veritabanında oldukça fazla yer kaplıyor. aslına bakılırsa blogumda henüz çok fazla yazı olmadığı için birkaç megabaytlık bir fark önemli bir hız farkı yaratmayacaktır. eğer binlerce yazınız olan bir blogunuz varsa revision olarak görünen gereksiz eski versiyonları silmenizde hiçbir sakınca yok.

aslında revizyon ile yazıları tutmak zaman zaman hayat kurtarıcı olabilir. fakat wordpress’in 2.6 versiyonundaki veritabanı yapısı ile oluşturulan revizyon sistemi basit fakat hamallıktan başka bir işe yaramıyor. yazıların sadece değiştirilen kısımlarının işaretlenmesi yerine bütün halinde tutulması wp_posts tablonuzun şişmesine sebep oluyor.

aşağıdaki sql sorgusunu kullanarak wordpress’in sisteminizde ne kadar taslak oluşturduğunu görebilirsiniz.

SELECT COUNT(*) as NUM_OF_REVISIONS FROM wp_posts WHERE post_type = "revision"; 

bende yazılarımın 3 katı kadar taslak oluşturulmuş görünüyor. eski taslaklara ihtiyacım olmadığı için onları temizlemek daha yararlı oluyor. bunun için aşağıdaki sql sorgusunu kullanabilirsiniz:

DELETE FROM wp_posts WHERE post_type = "revision";

bu sayede wp_posts tablosundaki verilerin nerdeyse üçte ikisini temizledim. büyük ölçekli bloglarda gözle görülür bir etki yaratacağına eminim.

dikkat!

sql konusunda deneyimli değilseniz lütfen yukarıdaki DELETE komutunu kullanırken dikkatli olun, yanlış bir şey yaparak bütün yazılarınızı silmenizi istemem.

 

wordpress 2.7: yeni yönetim paneli 3

wordpress kullanıcılarının heyecanla beklediği 2.7 versiyonu 10 kasım 2008′de indirilmeye hazır olacak. şu anki yönetim panelinin ihtiyaçları karşılamadığı ve oldukça başarısız olduğunu daha önceden de belirtmiştim. wordpress ekibi de yeni yönetim paneline ait ekran görüntülerini paylaşmış. yeni yönetim paneli şimdiki versiyona göre oldukça başarılı ve estetik görünen bir arayüze sahip.


 

reset css 0

yazacağınız web uygulamasının bütün tarayıcılarla uyumlu olmasını istiyorsanız başlangıç noktanızı iyi belirlemeniz lazım. bu sebeple css yazmaya başlamadan önce sayfadaki olası bütün ögelerin pozisyon, boşluk ve çervelerini sıfırlamak gerekiyor. bunlar margin, padding, border gibi özellikler.

css ve web standartları gurusu eric meyer‘in daha önceden böyle bir çalışması var. bu dosyayı projenizin başlangıcında kendi css dosyanızın tepesine @import komutuyla eklemeniz mümkün. aşağıda reset.css’nin şu anki versiyonunu bulabilirsiniz. detaylı bilgi için eric meyer‘in kendi sitesine bakınız.

@import komutunun kullanımdaki küçük detaylarla farklı tarayıcılarda farklı etkileri olduğunu unutmayınız.

reset.css

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}