Arama terimlerinizi girin Arama formu gönder Web www.KlavyeMonitor.com

Çok Satan PDA ve Smartphone'ların User-Agent Bilgileri ve Mobil Internete Uygun Web Sayfası Tasarımı

Güncelleme: 29 Şubat 2008

Günümüzde cepten internet kullanımı giderek yaygınlaşıyor. Kısa bir zaman içerisinde hemen herkesin cep telefonu - avuçiçi bilgisayar karışımı cihazlarla her yerde internete girmeleri çok olağan bir görüntü oluşturacak gibi. Bu sebeple şimdiden web sayfalarımızı bu ufak, küçük ekranlı ve az bellekle az bant genişliği gibi kısıtlı kaynaklara sahip cihazlarla kullanıma uygun getirmemizde yarar var. Bu Palm, Pocket PC, Smartphone türü cihazlara uygun web tasarımı yapmak için sadece birkaç önemli noktaya dikkat etmek başlangıç için yeterli.

Daha önce PDA ve cep telefonu için www sayfası tasarımı adlı başka bir yazıda avuçiçi cihazlara uygun HTML etiketlerini ve basitleştirme önerilerini sıralamıştım. Şimdi ise Pareto analizi gereği cepten internet kullanan önemli kesimi tespit ederek az işle çok sayıda tarayıcıyı memnun edeceğiz.

Bunun için öncelikle bir internet mağazasından çok satan wifi'li PDA ve Smartphone'ların listesine baktım. Bunları satış yüzdelerine göre Gnumeric ile sıralayıp, tespit ettiğim kadarıyla denk gelen User-Agent bilgilerini iliştirdikten sonra şu tablo ortaya çıktı:

29 Şubat 2008 itibariyle çok satanlar:

15 Aralık 2007 itibariyle çok satanlar ise şöyleydi:

Cihaz	Yüzde	İS	User-Agent
"BENQ Siemens P50"	%29	"PPC MS WM 2003"	"BenQ P50 Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)"
"Toshiba G500 Portege"	%26	"PPC MS WM 5"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)"
"Toshiba G900"	%16	"PPC MS WM 6"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)"
"Asus P535"	%13	"PPC MS WM 5"
"HP IPAQ HW6915 PDA"	%10	"PPC MS WM 5"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320; HP iPAQ h6915)"
"HP IPAQ HX2490 PDA"	%8	"PPC MS WM 5"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)"
"I-MATE Jamin Pocket PC Phone"	%4	"PPC MS WM 5"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; i-mate JAMin"
"HP IPAQ 514 PDA"	%3	"PPC MS WM 6"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 176x220)"
"HP IPAQ HX2790 PDA"	%2	"PPC MS WM 5"	"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)"

Bu çok satanlara uygun bir site tasarladığımız zaman, cepten internete girenlerin yaklaşık %80'den fazlasını memnun edeceğiz. Tek yapmamız gereken bu cihazları User-Agent'larından tanıyarak onlara özel bir şablon (template) kullanmak.

Yukarıdakilere ek olarak çok çeşitli user-agent'lar var. Örneğin, WM6 ortamında çalışan bir Opera internet tarayıcısının User-Agent bilgisi şöyle:

"Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; PPC; 480x640) Opera 8.50 [en]"

Benzer şekilde bir PIE (Pocket Internet Explorer) şöyle bir User-Agent gönderiyor:

"Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)"

Ve NetFront tarayıcısının User-Agent'ı da şöyle:

"Mozilla/4.08 (PDA; NF33PPC3AR/1.0) NetFront/3.3"

Bunların dışında, şimdilik (2007) sadece PIE tarafından sunucuya gönderilen şöyle başlık bilgileri de var. Bunlar sayesinde sunucudaki uygulamaya göre, avuçiçi cihaza özgü kolaylıklar sağlanabilir:

1. UA-OS: Ayrıntılı işletim sistemi bilgisi
2. UA-color: Cihazın bit cinsinden renk derinliği (color16 = 65536 renk)
3. UA-pixel: Avuçiçi ekran çözünürlüğü (yatay x dikey)
4. UA-Voice: Tarayıcının erişilebilirlik (görme özürlüler için) yeteneği
5. UA-CPU: Avuçiçi cihazın işlemci ailesi (Arm, x86 vb.)

Örnek UA başlıkları:

UA-OS: Windows CE (Pocket PC) - Version 5.1
UA-color: color16
UA-pixels: 240x320
UA-Voice: FALSE
UA-CPU: x86

Bu arada bir wap User-Agent'ı örneği de şöyle:

"NokiaN70-1/5.0737.3.0.1 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1"

Ve bir BlackBerry User-Agent örneği:

"BlackBerry7280/4.0.0 Profile/MIDP-2.0 Configuration/CLDC-1.1"

Ve de bir Smartphone'da Opera tarayıcısı User-Agent örneği:

"Mozilla/4.0 (compatible; MSIE 6.0; Symbian OS; Nokia 6600/4.09.1; 6329) Opera 8.00 [en-US]"

Ve son olarak yeni nesil bir Palm avuçiçi bilgisayardan bir User-Agent stringi bilgisi:

"Palm680/RC1 Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; PalmSource/Palm-D053; Blazer/4.5) 16;320x320 UP.Link/6.3.1.17.06.3.1.17.0"

"Mozilla/1.22 (compatible; MSIE 5.01; PalmOS 3.0) EudoraWeb 2.1"

Özetle, çoğu Windows Mobile işletim sistemli cihaz için User-Agent bilgisinde "Windows CE" ve "PPC;" dizilimini aramak; Symbian'larda "Symbian OS"; yeni tip Palm'lerde "Blazer" veya "EudoraWeb" diye dizilim aratmak mobil PDA cihaz tesbiti için şimdilik yeterli. Çözünürlük bilgisini ise gene aynı User-Agent içinde regexp ile "/[[:digit:]][[:digit:]][[:digit:]]x[[:digit:]][[:digit:]][[:digit:]]/" eşlemesini aratarak saptayabiliriz. Bu dizilim yoksa, ama cihaz mobilse de default olarak PPC'ler için 240x320, Palm'ler için de 160x160 alabiliriz.

Toparlarsak:

function mobilmi() {

$agent="";
$mobil=0;
$cozunurluk="";

if (isset($_SERVER['HTTP_USER_AGENT']))
$agent=$_SERVER['HTTP_USER_AGENT'];

$brw = array();
$mob = array();

$brw[0]="EudoraWeb";
$brw[1]="Blazer";
$brw[2]="Windows CE";
$brw[3]="PPC;";
$brw[4]="SmartPhone";
$brw[5]="SymbianOS";
$brw[6]="Symbian OS";
$brw[7]="BlackBerry";

$mob[0]=1;
$mob[1]=1;
$mob[2]=2;
$mob[3]=2;
$mob[4]=3;
$mob[5]=3;
$mob[6]=3;
$mob[7]=4;

$adet=count($brw);

if ( $agent != "" ) {
for($i=0;$i<$adet;$i++) {
if (! ( strpos($agent,$brw[$i]) === false ) ) $mobil=$mob[$i];

} // for i sonu

if ( $mobil != 0 ) {

if ( preg_match("/[[:digit:]][[:digit:]][[:digit:]]x[[:digit:]][[:digit:]][[:digit:]]/",$agent,$denk) ) {
$cozunurluk=$denk[0];
} else {
if ( $mobil == 1 ) $cozunurluk="160x160";
if ( $mobil == 2 ) $cozunurluk="240x320";
if ( $mobil == 3 ) $cozunurluk="176x220";
if ( $mobil == 4 ) $cozunurluk="240x160";
} // if preg sonu

} // if mobil sonu

} // if agent sonu

return $cozunurluk;

}

Geriye bu işlevi (php fonksiyonunu) web sitemizi oluşturan php scriptlerimizde kullanmak kalıyor. Kolayca yapalım:

<?php

require_once("fonksiyonlar/mobilmi.php");

$template_dir="template_normal/";

if ( mobilmi() != "" ) $template_dir="template_pda/";

include( $template_dir . "meta.tpl");
include( $template_dir . "baslik.tpl");
include( $template_dir . "menu.tpl");
...

?>

Burada tek yaptığımız, eğer tarayıcı mobil ise farklı bir template kullanmak. İki ayrı template hazırlamak da o kadar yorucu olmasın artık. Yaparız. Ne de olsa ikincisi ufak ekran için, yani basit olacak. Geriye de bedava internet bağlantısı yakalayanlara ya da masa başına bağımlı olmadan kablosuz interneti kullananlara sitemizi sevdirmek kalıyor. Eh, herkesi memnun etmek olanaksız olduğuna göre, sitemizi kendimizin beğeneceği bir hale getirsek yeterli...

İlker Fıçıcılar
15 Aralık 2007
güncelleme: 29 Şubat 2008

Arama önerileri: Pocket PC, Smartphone, Palm, PDA, avuçiçi bilgisayar, cep bilgisayarı, cepten internet, akıllı telefon, PalmOS, PalmOne, Treo, Palm TX, Palm T/X, Blackberry, Ipaq, handheld, GPRS, wifi, 802.11b/g, mobil internet,

Kaynak gösterecekler için referans: "Çok Satan PDA ve Smartphone'ların User Agent Bilgileri ve Mobil Internete Uygun Web Sayfası Tasarımı", İlker Fıçıcılar, http://www.KlavyeMonitor.com/Cok_Satan_PDA_ve_Smartphonelar_ve_User_Agent_Bilgileri.html , Aralık 2007

İlgili Benzer Yazılar:

• Çok Satan PDA ve Smartphone'ların User Agent Bilgileri ve Mobil Internete Uygun Web Sayfası Tasarımı
• Hangi Cep Bilgisayarı ya da Akıllı Cep Telefonunu Seçmeli
• Kablosuz, WiFi Skype VoIP Telefonlara İlişkin Bir İnceleme
• Internet Telefonu 'Linksys WIP 320' Kısa Kullanım Kılavuzu
• Palm Cep Bilgisayarları için Web Tarayıcıları
• PDA'lara Uygun WWW Sayfası Yapımı
• 4Talk, Windows Mobile PDA'lar için WiFi ve BlueTooth Destekli Telsiz Programı
• QR Code Nedir
• The Definitive Guide To Wireless WarX'ing