Mobil tarayıcılarda sorunsuz web siteleri

Birçok web sitesi var ve halen de birçokları yapılmaya devam ediyor. Ancak mobil dünya ya da mobil yaşam dediğimizde bir şeyler eksik olmuyor mu? Evet oluyor.. Web sitelerinin mobil cihazlar için uyarlanmış halleri…

Birçok gazete ve dergide ilanlara bakıyoruz, hepsinde ‘ayrıntılı bilgiyi web sitemizde bulabilirsiniz’ demesine rağmen cep telefonunuzdan bağlandığınızda aradığınız bilgiyi bulamıyorsunuz çünkü web sitelerinin mobil sürümlerine gereken özen gösterilmiyor.

Tabletler büyük ekranlarından dolayı paçayı bu işten bir parça sıyırıyor ancak akıllı telefonlar için optimize edilmemiş tıka basa multimedya dolu web sitesini görmek tam bir işkence halini alabiliyor.

Bu aşamada webmaster’ların işine yarayacak harika bir çözümden bahsedeceğim.  Siteyi hazırlarken aynı zamanda mobil sürümde sitenin nasıl görünebileceğini gösteren bir araçla tanıştırmak istiyorum sizleri…

Fotoğraf David Pett.. https://twitter.com/#!/pettpett/status/177467676980019201/photo/1

Adobe bu duruma ilaç olacak bir araç kullanıcılarına duyurdu. Henüz ‘laboratuvarda’ test aşamasında olan ama dileyen kullanıcıların test edebileceği uygulamanın ismi “Adobe Shadow“. Yaptığı iş ise bilgisayarınızdaki tarayıcınızda görüntülediğiniz siteyi mobil cihazınızda da o tarayıcıya uygun olarak görünteyebilmesi. Durum şöyle:

1. Önce uygulamayı (Mac ya da PC sürümleri mevcut) bilgisayarınıza indirin ve yükleyin, ücretsizdir.

2. Sonra mobil cihazınıza ilgili uygulamayı yükleyin ki bunlar da ücretsiz. (iOS ya da Android)

3. Bir de Chrome eklentisi mevcut. (Yükleyin)

Önce bilgisayarınızdaki uygulamayı çalıştırın. Sonra mobil cihazınızdaki uygulamayı çalıştırarak birbirlerini tanımasını sağlıyorsunuz. Bunu da Chrome eklentisi ile yapıyorsunuz. Tanıma işlemi sonrasında tarayıcınızda açtığınız web sitesinin vars mobil hali, yoksa kendisinin mobil cihazınıza anın geldiğini göreceksiniz. Üstelik bunun için bir refresh ya da bir yere tıklama yapmak zorunda değilsiniz. Aracın en büyük güzelliği aynı anda birden fazla mobil cihazla kullanıma imkan vermesi.

Aracın bir diğer güzelliği de mobil sürümler için CSS3 kullanan web sitelerinde tarayıcının “Öğeleri Denetle” özelliğini de mobil tarayıcınızda kullanabilmenize imkan vermesi.

Adobe Shadow’un nasıl çalıştığını aşağıdaki videodan izleyebilirsiniz.

Adobe Shadow ile ilgili daha fazla bilgi almak için http://labs.adobe.com/technologies/shadow/ adresini ziyaret edebilirsiniz.

Son bir not olarak ürünün henüz beta aşamasında olduğunu hatırlatmak isterim.

Bir sitenin anatomisini çıkarın

İnternet üzerindeki hiçbir bilgi sır değil. Domain’in sahibi, sitenin sahibi gibi bilgileri çeşitli whois sorguları ile öğrenmek sadece birkaç tıklamadan ibaret.

sitonomy

Peki bir web sitesinin bileşenleri sunucusu üzerinde hangi bileşenlerin olduğunu nasıl bileceksiniz. www.sitonomy.com sitesi işte bu iş için kurulmuş. Web adresini yazıp kısa bir beklemenin ardından sitede kullanılan uygulama, kullandığı JavaScript kitaplıkları sunucu yazılımı, programlama dili gibi bilgilere kolayca erişebiliyorsunuz.

Sitenin diğer bir güzelliği bu bileşenlerin toplamda ne kadarlık bir kullanıma sahip olduğunu da yüzde olarak ifade etmesi. Ayrıca bir bileşenin yanındaki “alternatives” linkline tıklarsanız o bileşenin alternatiflerinin bulunduğu bir sayfa görüntülüyor.

Kullanınız, kullandırınız…

WordPress’te güncelleyememe sorunu

WordPress’in son sürümlerinde en çok hoşuma giden şey, eklenti olsun kendi dosyaları olsun otomatik olarak güncellemesiydi. Eklenti güncelleme -özellikle de ekleme- konusunda eksikler olsa da yine de FTP ile uğraşma derdini ortadan kaldırıyor.

Ancak birçok kişi bu blog yayıncısı bu özelliği kullanırken birçoğu da bu nimetten faydalanamıyor. Ne zaman bir güncelleme yapmaya kalksa hata mesajı ile işlem durduruluyor. Ancak bu işin de bir çözümü mevcut.

  1. wp-content klasörü içerisinde tmp isimli bir klasör açın.
  2. Bu tmp klasörün chmod’unu 777 olarak ayarlayın.
  3. Sonra wp-config.php dosyasını bir metin (text) editörü ile açın ve uygun bir yere şu komutu ekleyin.
    define(‘WP_TEMP_DIR’, ABSPATH . ‘wp-content/tmp’);
  4. Son aşama dosyayı kaydedin sunucunuza yükleyin ve güncellemenin tadını çıkarın.

Ancak FTP kullanıcı adı ve şifre sorma olayını halen yaşıyoruz. Onu da aşarız bir şekilde…

PHP ile satır renklendirme

tr_renklendirme

Hazırladığınız bir tablonun satırlarının her birinin farklı renklerde olması hem okunmasını kolaylaştırır hem de çok daha şık bir görüntü sunar.

Bu işlemi yapmanın çeşitli yolları vardır. JavaScript ile hazırlanabileceği gibi CSS ile de bu işlemi gerçekleştirmek mümkün. Aşağıdaki örnek kısa ve çabuk olarak tablolarınızın satırlarını renklendirmeyi sağlıyor.

Öncelikle bir değişken tanımlamalısınız. Bu tanımlama işini döngü öncesinde halledilmelidir.

CSS dosyası

.tr_even { background-color: #fffff; }
.tr_odd { background-color: #eff3fe; }

PHP dosyası

$class = 0;
while(list(.....) = mysql_fetch_row($sorgu)) {
...
$class++;
$c = ($class % 2) ? 'tr_even' : 'tr_odd';
echo "
";
...
}

Kendi blogger’ınızı kurun!

WordPress’in muhteşem bir blog script’i olduğunu bilmeyen yoktur. Birçok blog sitesi bu script ile hazırlanmış durumda. (benim sitem de dahil olmak üzere…)

Bir sitede birden fazla kullanıcıya blog kurmak isterseniz ya tek tek klasörler açıp ayrı ayrı WordPress’ler kuracaksınız (ki böyle siteler gördüm); ya da WordPress MU kullanacaksınız.

İlk kurulumu WordPress’den bile kolay. Ondan sonrasında yeni kullanıcı tanımlayıp, yeni blog’unu açıyorsunuz. Ayarlar ve yapabildikleriniz oldukça fazla. Ancak şu anda henüz Türkçe dil dosyası yok. Araştırdığım kadarıyla üzerinde çalışılıyor.

WordPress’in 2.6 sürümüne ait türkçe dil dosyasını (wp-content/languages/tr_TR.mo) dosyasını WordPress MU içerisindeki wp-content/languages (languages klasörü ilk kurulumda gelmiyor, kendiniz yaratmalısınız) klasörü içerisine atarak yüzde 90 oranında bir Türkçeleştirme elde edebiliyorsunuz.

WordPress MU ile http://blog.siteminadi.com/xyz gibi bloglar kurabiliyorsunuz. Ancak subdomain için bir iki ayar yapmalısınız. Bunun için şu adresi ziyaret edebilirsiniz.

Kurulum hakkında detaylı bilgi için de bu adresi ziyaret edebilirsiniz.

WordPress yeni sürümde

WordPress kısa bir süre önce 2.6 sürümünü duyurdu. PC World’de yaptığımız haberde de bunu duyurmuştuk. Ancak kısa bir süre önce Türkçe’si de hazırlanmış ve şu anda kullanıma hazır. 2.5 sürümü kullananlar yeni sürüme sitelerini upgrade ederek geçiş yapabilirler.

Yeni sürüm hakkında bilgi edinmek isterseniz hazırlanan videoyu izleyebilirsiniz.

PHP ile takvim uygulaması

PHP kodları kullanılarak takvim oluşturma ihtiyacı birçok kişiye zaman zaman gerekli olmuştur. Bu konuda hazırlanış birçok script var ancak şu adresteki oldukça işlevsel. Ayrıca kodlarda bir iki küçük ayarlama/değişiklik yaparak Türkçe’ye uygun bir hale bile getirebilirsiniz.

Yazıdaki adresler, e-postalar otomatik link olsun

Gelen metin içerisinde www ya da http ile başlayan linklerin otomatik olarak link olması için aşağıdaki fonkiyonu kullanıyorum. Fonksiyon bana ait değil ama oldukça kullanışlı. Hazırlayanın eline sağlık.

function textlink($str) {
    $str = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_+.~#?&//=]+)', '<a href="1" target=_blank>1</a>', $str);
    $str = eregi_replace('(((f|ht){1}tps://)[-a-zA-Z0-9@:%_+.~#?&//=]+)', '<a href="1" target=_blank>1</a>', $str);
    $str = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_+.~#?&//=]+)', '1<a href="http://2" target=_blank>2</a>', $str);
    $str = eregi_replace('([_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3})', '<a href="mailto:1" target=_blank>1</a>', $str);
    return $str;
}

Hepsi büyük ya da hepsi küçük

PHP kodlarken zaman zaman ihtiyacınız olmuştur. Keşke şu başlığın ya da yazının hepsi büyük olsa diye… PHP’nin hazır fonksiyonları içerisinde strtoupper ya da strtolower isimli fonksiyonlar bu işi yapıyor. Ancak işin içerisine Türkçe karakterler girince durum değişiyor.

Bu durum için küçük bir fonksiyon kullanıyorum. Tüm yazılanların küçük harf olması için;

function hepsikucuk($metin) {
    return strtolower(strtr($metin, 'ĞÜŞIİÖÇ', 'ğüşıiöç'));
}
// Örnek Kullanımı:
// echo hepsikucuk("MeRhaBa");
// merhaba

Ya da tüm yazılanların hepsinin büyük harf olması için şu fonksiyonu kullanabilirsiniz.

function hepsibuyuk($metin) {
    return strtoupper(strtr($metin, 'ğüşıiöç', 'ĞÜŞIİÖÇ'));
}
// Örnek Kullanımı:
// echo hepsibuyuk("MeRhaBa");
// MERHABA

Nerde kalmıştık!!!

Uzun zamandır, işlerde güçlerden kendi bloguma vakit ayıramamıştım. Bu “yokoluş” arasında computerworld.com.tr sitesi ile ilgilendim. Tam olarak bitmediyse de şu anda pek bir eksiği yok gibi… Dergi işleri sonrası bir iki bölümüyle de daha uğraşacağım.

Hazırlık aşamasında birçok yeni fonksiyon ile karşılaştım ve bunların birçoğunu da kullandım. Tüm bunları çok yakın bir zamanda buraya ekleyeceğim.