14 Ağustos Salı ´12   —   4 Yorum
Eğer bir kaynak arıyorsanız, indexlerin güncelliği, genişliği gibi nedenlerden dolayı, diğer arama motorları yerine Google'ı tercih etmek, iyi bir karar olarak düşünülebilir. Yaptığınız Google aramalarını programatik olarak yapmak ve sonuçları herhangi bir şekilde kullanmanın sayısız örneği verilebilir.

Örneğin, sayfanıza site içi arama eklemek istiyorsunuz. Sayfanıza ait içeriği eğer Google zaten tarıyorsa, site içi aramanız aslında basit bir Google araması ile yapılabilir. Biliyorsunuz Google'da "site:mfyz.com" şeklinde arama yapılacak domaini filtreleyebiliyorsunuz. Dolayısıyla site içi aramanızı, herhangi bir algoritma yazmaya gerek kalmadan, hatta sadece tarayıcıda javascript ile yapabilirsiniz.

Google'un istemci altyapıları için sunduğu JSON tabanlı bir arama APIsi var. Bu api sayesinde normal bir Google araması yapabiliyorsunuz.

Bu API'yi basit bir HTTP isteği ile kullanabiliyorsunuz. Herhangi bir Google araması yapıyormuş gibi bir sorgu gönderip cevabını json olarak alıp işleyebiliyorsunuz.
http://ajax.googleapis.com/ajax/services/search/web?v=1.0
Aramanızı bu URL'e gerekli parametreleri ekleyerek yaptığınızda Google en fazla 8 sonuç verecek şekilde dönüyor.

Cevap olarak dönen JSON içeriği uzun olduğu için burada göstermeyeceğim. Ama birkaç parametreyle gelen sonuç kümesini kullanabilir, sayfalama ve sonuç boyutu gibi parametreler ile sayfalama yapabilirsiniz.

Asıl kullanacağınız sonuç değeri, arama sonuçlarının bulunduğu response.responseData.results sonuç kümesi olacaktır. Basit bir nesne dizisi olan bu değeri javascript ile ekrana doğrudan basabilir veya sunucu taraflı bir kod ile işleyebilirsiniz.

Google bu API ile tek istekte en fazla 8 sonuç döndürüyor. Nedenini kesin bir şekilde bilmiyorum fakat güvenlik nedeniyle olduğunu tahmin ediyorum. Eğer 8'den fazla sonuç göstermek istiyorsanız birden fazla api çağrısı yapmak zorundasınız veya istemci tarafında sayfalama yaparak sonuçları sayfalama ile gösterebilirsiniz.

Sayfalama için API çağırısında göndereceğiniz start parametresi, arama sonuçlarının başlangıç sırasını belirtiyor. Eğer belirtilmezse geçerli değeri 0 olacaktır. Bundan sonra 8, 16, 24... şeklinde ikinci, üçüncü sayfaya ait sonuçları, ek çağrı yaparak yükleyebilirsiniz.

Burada kontrol etmeniz gereken tek şey, toplam bulunan sonuç kümenizde yeterli sonuç olup olmamasıdır. Yani eğer kullanıcı son sayfada ise "Sonraki Sayfa" linkini göstermemeniz gerekir. Basit bir sayfalama için;
toplam sayfa sayısı = toplam sonuç sayısı / sayfa başına düşen sonuç sayısı
bölümünün üste yuvarlanması ile bulunur. Bunu Google size toplam bulunan sonuç sayısını tahmini şekilde söylüyor.

Sonuç kümesindeki response.responseData.cursor.estimatedResultCount parametresi size sayısal olarak tahmini sonuç sayısını söyleyecektir. Sayfa sayısını hesaplayarak gerekli sayfalama navigasyonunu oluşturabilirsiniz.

Örneği kodlayalım

Yazının başlarında verdiğim site içi arama örneğini javascript ile kodlayalım. Doğrudan tüm kodu verip açıklayacağım.
<!doctype html>
<html>
<head>
    <title>Page</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
	<input type="text" placeholder="Search" id="searchInput" />
	<input type="button" value="Search" id="searchButton" />

	<ul id="searchResultsList"></ul>
</body>
</html>
HTML tarafında ihtiyacınız olan iki ana parça, arama formu ve sonuçları listeleyeceğiniz bir tablo veya liste.

Javascript tarafını jQuery kullanarak yazarak HTTP çağrısını, JSON sonucunu işleme, html elemanlarını yönetme gibi birçok kısmı kolayca halledebilirsiniz.

İlk yapmamız gereken şey arama formundan arama sorgusunu yakalamak ve arama butonundaki tıklama hareketini yakalamak olacak. Bunun için butonun tıklama olayını yakalayıp text alanının içeriğini alıyoruz.
$(function(){
    $('#searchButton').click(function(){
	    search();
    });
});

function search(){
	query = $('#searchInput').val();

	$('#searchResultsList').html('<li class="loading"><span>Aranıyor... (Google Search)</span></li>');

	loadResults(query, 0);
}
Google'un arama APIsini basit bir HTTP isteği ile kullanacağımızı söylemiştim, sonuç bir json nesnesi olduğu için jQuery'nin http istek yardımcı methodlarından getJSON methodunu kullanarak hem isteği yönetebilir hem de cevabı işleyebiliriz.
function loadResults(query, start){
    var apiURL = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&callback=?';
    $.getJSON(apiURL, {
	    q: query + ' site:mfyz.com',
	    rsz: 8,
	    start: start
    }, function(response){
	    var results = response.responseData.results;

	    $('#searchResultsList .nextPage, #searchResultsList .loading').remove();
	    resultsHTML = '';

	    if(results.length){
		    for(var i=0; i < results.length; i++){
			    r = results[i];

			    resultsHTML += '<li><a href="' + r.unescapedUrl +
				    '"><span class="title">' + r.title +
				    '</span><span class="preview">' + r.content +
				    '</span></a></li>';
		    }

		    if (response.responseData.cursor.estimatedResultCount > 8) {
			    resultsHTML += '<li class="nextPage"><a href="#" ' +
				    'onclick="loadResults(\'' + query + '\', ' + (start + 8) +
				    ');">Daha fazla sonuç göster</a></li>';
		    }
	    }
	    else {
			//resultsHTML = '<li class="notfound">Aradığınız kriterde içerik bulunamadı.</li>';
	    }

	    $('#searchResultsList').append(resultsHTML);
    });
}
Yukarıdaki javascript methodu basit bir HTTP çağrısı yapıp gelen json cevabını işliyor. Basitçe bir liste elemanı (ul) içeriği oluşturuyoruz. Gelen sonuç dizisini bir HTML koduna dönüştürüyoruz. Methodun sonunda ise oluşturulan HTML kodunu liste elemanınımıza ekliyoruz.

Bu methodda gördüğünüzü ilk parametre, arama formundan gelen arama sorgusu, ikinci parametre ise, sayfalama için Google APIsine gönderilecek olan sonuç başlangıç indeksi. Bu sayede bu fonksiyonu tekrar çağırarak ikinci, üçüncü ve diğer sayfalardaki arama sonuçlarını yükletebiliyoruz. İlk arama yapılırken yani yukarıda ilk verdiğim javascript kodunda çağırılan arama methodu "0" başlangıç parametresi ile çağrılıyor.

Bu methodda dikkatinizi çekmiş olan bir nokta da arama parametresin sonuna "site:mfyz.com" eklemiş olmam. Sorguya eklenen bu kısım, yapılan aramanın sonuçlarında sadece o domain'deki sayfaları döndürmesini sağlayacaktır.

Yukarıdaki HTML çıktısını CSS ile işleyebilirsiniz veya arama formunu "ara" butonu ile değil eş zamanlı arama gibi her tuşa basıldığında belirli bir zaman aşımı ile girilen kelimeyi yakalayıp arama yapabilirsiniz.
7 Haziran Perşembe ´12   —   5 Yorum
Site içi arama, mfyz.com'un öneki sürümlerinde vardı fakat son iki sürümde kaldırmıştım bu özelliği. Daha doğrusu tekrar yazmam gerekiyordu fakat zaman bulup tekrardan yazamamıştım.

Tepedeki navigasyonun sağ kısmını yani üye işlemleriyle ilgili kısmını daha da ufaltarak arama kutusu koydum. Tıkarsanız kutu büyüyecek ve yazdığınız sorguya göre anlık arama yapacak sitede. Bunun için google ajax api'lerini kullandım ve basit bir javascript sonucunda anlık arama sağlayabiliyorum artık.

Genellikle döküman ve forum konuları sonuçları bulsa da sitede aradığınız birşeyi bulma konusunda çok yardımı dokunacaktır diye düşünüyorum.

Siz de sitenize buna benzer bir live search koymak isterseniz, google Ajax api ile web veya görsel araması gibi işlemler için çok güzel hazırlanmış bir jquery örneği var, ekteki linke tıkalayarak örneği inceleyebilirsiniz.

http://tutorialzine.com/2010/09/google-powered-sit......ax-jquery/


URL kısaltma servisleri şu an özellikle sosyal ağlarda otomasyonlarla fln çok fazla kullanılıyor. Uzun url'leri kısa url'lere çeviriyor fakat acaba arama motorlarının botları bu url'leri takip ederken gerçekten son yönlendirilen url'i mi hesaba katıyor?

Arama motorlarına göre dış bağlantı sayısı oldukça önemli bir kriter biliyorsunuz, ama kısa url'lerle aslında dışarıda kaç bağlantının geldiğini tam olarak sayamıyor oluyor botlar.

Belki de friendfeed veya twitter gibi servisler bunu engellemek için bu servisleri kullanıyorlardır. Mesela friendfeed ff.im domainini kullanıyor, yani kendi servisi ve public bir servis değil. Yani google'a göre friendfeed ile ff.im adresleri birbirlerini besliyor ama dışarı bağlantı vermiyorlar.

Tabi arama motoru botlarına bu konudaki problemin çözümünü öğretmek zor değil.
10 Şubat Pazar ´08   —   7 Yorum

SEO Nedir?

SEO'nun açılımı "Search Engine Optimization" yani Arama Motoru En iyileme'dir. İnternette insanlar veri aramaya ihtiyaç duyduğundan beri (90'ların sonuna doğru) arama motorlarının ihtiyaçları, popülerliği arttı. Özellikle google, yahoo gibi arama motorları daha çok kullanılır oldu. Hatta o kadar kullanılmaya başladı ki artık insanlar internet adresi yazmak yerine google'a yazıp sitelere öyle erişir oldu. Daha da abartılmışı olarak hesap makinesi, "profesör" muamelesi bile gördü bu arama motorları. Örneğin "Bu akşam tv'de ne var?", "necip hablemitoğlu kimdir?" fln gibi soru işaretli arama sorguları yapanlar da olmadı değil :-)

Çoğu site için "gelen ziyaretçi kaynağı" eskiden doğrudan trafikken 90'larda bağlantı olmaya başladı ve 2000'den sonra büyük bir yüzde farklı ile arama motorları olmaya başladı. Hatta site yöneticileri sitelerinde "arama motorlarından gelen anahtar sözcükler"e göre içeriklerini değiştirmeye başladı. Buraya kadar biraz tarih işledik, sadede geleyim :

Artık bir site için arama motorlarındaki sırası bile bir değerlendirme kriteri. Daha doğrusu "ziyaretçi sayısını artırmak" veya "doğru arama sonuçlarında çıkmak" için insanlar daha fazla çaba göstermeye başladı. Bu amaca göre değişik teknikler kullanılmaya başlandı. Eskiden html meta etiketleri, sayfa başlığı ve içerikteki sadeliğe gösterilmeyen önem arttı. URL'lerin şekilleri değişti. Bağlantı şekilleri değişmeye başladı :-)

Bu dökümanda sitenizi optimize ederek arama motorlarında doğru aramalarda çıkmak için yapmanız gereken birkaç anahtar noktayı anlatacağım. Önce sosyal noktalara değinelim, yani işin tekniğinden çok mantalitenizi belirleyen kriterleri gözden geçirelim.


Sade html yazın, css kullanın


Sayfa arayüzlerini oluştururken veya daha güzel arayüzler çizmek için çok fazla etiket, tablo vs kullanırdık. Kullanıyoruz da bazen. Ancak arama motorları her ne kadar etiketleri algılayıp işlem yapsa da en sade olanı en iyi indexleyecektir. Onun için arayüz çizdirirken css kullanın.

Standartlara uygun kod yazın

Yazdığınız html kodu standartlara uygun olsun. Arama motorları da tarayıcılar gibi sayfanızı render ederek içeriği taradığından yazdığınız kodda kaynayabilecek, yazınızı parça parça hale getirecek hatalar yapmayın. En güzel standartlara uygun yazın gerisini düşünmeyin :-)

Sayfa başlıklarını düzgün (doğru) seçin

Pencerede görünen sayfa başlıkları sadece pencerede görünmesi için düşünülmemelidir. Çünkü o sayfanızın başlığıdır, içeriği yansıtır ve adı üstünde başlıktır. Yani elinize aldığınız dergi veya gazetede başlığı sevmezseniz yazıyı okumazsınız değil mi, ya da bir günlükte veya eposta kutunuzda başlığını sevmediğiniz mesajı okumadan geçersiniz. Arama motoru botları da yazınızı başlıklarına göre değerlendirecektir, olay sevme-sevmeme meselesi olmaz, aranan kelimelere uygunluğa göre olur. Sayfa içeriğinde ana tema olarak en az 3 kelime belirleyin ve bu kelimeleri içeren bir cümle oluşturup başlık olarak kullanın.

Doğru kullanıcı yönlendirmeleri kullanın (navigasyon)

Arama motoru botları sitenizi tararken sayfaların birbirleri ile bağlantılarını göz önünde bulundurarak ilişkilendirecektir. Yani bir ziyaretçi gibi sitenizi gezecektir. Hiçbir sayfa ile bağlantısı olmayan bir sayfa arama motorunda sadece doğru eşleme ile bulunur. Fakat bot, başka sayfalarla bağlantısı olan sayfaları arama sonuçlarında alt sonuç olarak veya ilişkili sonuç olarak listeleyecektir.
Navigasyonda ilk konu sitenin ana bölümleri her sayfada sade biçimde bulunmalı, ikinci nokta ise sayfalar gerektiği noktalarda diğer sayfalara bağlanmalıdır. Küçük bir örnek vereceğim : mfyz.com'da php ve mysql üzerine bir çok makale var. Diyelim ki php + mysql + linux sunucu konularını içeren bir sayfada mysql'den bahsederken "mysql ile veritabanı işlemleri" makalesine bağlantı vermek, sunucudan bahsederken "linux'ta apache php mysql kurulumu" dökümanına bağlantı vermek arama motorlarında daha doğru sonuçlarda çıkmamı sağlayacaktır. Aynı zamanda kullanıcıyı doğru yönlendirdiğim için sitenin navigasyonu daha doğru olacaktır.


Yavaştan teknik detaylara girmeye başlayalım.

Sitenizi arama motorlarına kaydedin

Web sitenizi link sitelerine, dizinlere, arama motorlarına kaydetmeniz gerekir. Siteniz kaydolduğunda arama servisi sitenizi taramaya başlayacaktır. Aşağıda popüler arama motorlarının url kaydetme sayfalarının linkleri var.

http://www.dmoz.org/add.html (Open Directory - Açık Dizin)
http://www.google.com/addurl
http://search.yahoo.com/info/submit.html
http://search.msn.com.sg/docs/submit.aspx

Sayfalarınızı META etiketleri ile tanımlayın

META etiketlerini bilirsiniz, HTML'de HEAD etiketleri arasına yazılan ve sayfa bilgilerini içeren etiketlerdir. Birkaç farklı türü ile sayfamız hakkında bilgileri belirleyeceğiz. Böyelce botlar sayfa hakkındaki bilgileri daha doğru kaydedecekler. Çünkü botlar sadece sayfa içerisindeki metinden sayfayı tanımlayamayabilirler. Örneğin bir sayfanın arayüzü hakkında sosyal (felsefi) bir makale sayfasında teknikten bahsetmek için çok fazla css, javascript ve html kelimeleri kullanmış olabilirim ve bot sayfanın anahtar kelimelerini doğrudan css, html, javascript olarak belirleyebilir, fakat aslında sayfada bahsedilen bambaşka bir konudur. Kısa bir kod ile örnekleyeyim :
<meta name="description" content="Mehmet Fatih YILDIZ's Personal HomePage.
There is PHP, HTML, CSS, Web Developing, Linux, MacOSX toturials;
some Web Projects and Web Developer Resources">
<meta name="keywords" content="mysql, query, select, like, limit, fetch,
freelancer, web developer, php, css, mootools, html, javascript, macosx, mfyz, linux">
gördüğünüz gibi description'da sayfanın tanımını, keywords'de sayfa anahtar kelimelerini belirledim. Yukarıdaki kodlar bir php dökümanının sayfasından doğrudan alıntıdır. Ben v0.7'de varsayılan "anahtar kelimeler" ve "sayfa tanımı" oluşturdum. Yukarıdaki sayfa tanımı varsayılan olarak eklenmiştir. Aynı şekilde freelancer'dan linux'a kadar olan kelimeler de varsayılan olarak vardır. Veritabanımda dökümanlara ait anahtar kelimeler ve döküman tanımı tutuyorum. Eğer döküman tanımı varsa bu varsayılan sayfa tanımı yerine o metini yazdırıyorum. Anahtar keliemeler de de varsayılan anahtar kelimelerden önce yazdırıyorum. Çoğu arama motoru bir sayfa için 10 anahtar kelime ve 255 karakterlik sayfa tanımından fazlasını tutmaz. Bunu dikkate alarak tasarlayın ve FAZLA anahtar kelime kullanmaktan da kaçının. Bir sayfada yüzlerce anahtar kelime, 1000 karakterlik bir sayfa tanımı gören bot sayfayı SPAM olarak işaretleyip SANDBOX'a alabilir sizi. Emin olun bunu istemezsiniz :-) Eğer Sandbox'a alınırsanız sayfanız arama sonuçlarından silinir, hiç çıkmaz veya en sonlarda çıkar.

Sayfanızın yazarı ve içeriğin dili hakkındakı bilgileri de şöyle belirleyebilirsiniz :
<meta name="author" content="Mehmet Fatih YILDIZ">
<meta name="content-language" content="tr">
Yerel aramalarda sayfanızı daha yukarlarda çıkarmanızı sağlayabilir. Fazla bilgi göz çıkarmaz ayrıca :-)

Meta etiketleri hakkında daha fazla bilgi için :http://en.wikipedia.org/wiki/Meta_tags

Robots.txt kullanın

Robots.txt dosyası sitenin ana (kök, root) dizininde bulunan bir text dosyasıdır. Bir bot bir siteyi taramak (index) için ilk önce Robots.txt dosyasının varlığını kontrol eder. Eğer yoksa kendi kurallarına göre hareket eder, varsa Robots.txt'de o sitenin tarama kurallarını öğrenir ve ona göre tarar. Yani kısmen botu yönlendirmiş, kontrol etmiş oluruz. Robots.txt dediğim gibi arama motoru botlarına sitenin kurallarını belirtir. Robots.txt'deki bazı kurallar aynı zamanda meta etiketleri ile de yönetilebilir. Ben kısaca kendi sitemde kullandığım kuralı örnek verip geçeceğim, daha fazla bilgi edinmek istersenizhttp://en.wikipedia.org/wiki/Robots.txt adresini ziyaret edin.

Benim kullandığım kural, robota gördüğü herşeyi indexlemesini söyler. Ayrıca bulduğu bağlantıları takip ederek sayfa ile ilişkilendirir.
<meta name="robots" content="index, follow, all">
meta etiketi ile ayarlanan robot kurallarıhttp://www.seoconsultants.com/meta-tags/robots/ adresinde çok güzel anlatılmış.

URL'lerinizi optimize edin

Sayfalarınızın adresleriyle oynayın. Olmayan şeyler ekleyerek sayfanızı url'leriniz ile açıklayın. v0.7'de döküman, blog, forum konularının adreslerine bakacak olursanız dokuman/-NO-/-ACIKLAMA-/ şeklindedir. Aslında -ACIKLAMA- kısmı hiçbir yerde kullanılmıyor. -NO- dökmana ulaşabilmeniz için yeterli bir parametre. Ancak birileri o sayfayı bağlantı olarak bir yerlerde verdiğinde insanlar sayfaya girmeden url'den sayfa başlığını az çok anlayabileceklerdir. Aynı şey arama motorlarını kullanan insanların piskolojilerinde yatar. "Mootools tooltip" araması yapan birisi arama sonuçları içerisinde
http://www.mfyz.com/?/dokuman/93/mootools-ile-ipucu-aciklamalari-tooltip/
urlsine sahip bir sayfa gördüğünde başlığı veya sayfa içeriğini okumadan tıklayacaktır :-) Sayfanız bu konu hakkında bilgi içeriyor olmasa da bu işe yarayacaktır. Sonuçta bu optimizasyonları insanları çekmek için de yapıyoruz. Ancak yeterli bilgiyi içeren sayfanız için böyle bir optimizasyon yaparsanız o zaman insanları doğru yönlendirerek sitenize çekmiş olursunuz. Bu da artı bir puandır sizin için.

Bu yöntemi yapmak için izelyeceğiniz tekniği kısaca benim yaptığım şeyi özetleyerek anlatacağım. Döküman, günlük veya forumda konu kaydederken başlık olarak girilen string'de latin alfabesi ve boşluk karakteri dışındaki karakterleri atıyorum. Ardından birden fazla boşlukları tek boşluğa indirgeyip kelime olarak kırpıyorum başlığı. Mesela 100 karaktere kadar izin veriyorum. Ardından yaptığım iş boşluk karakterlerini "-" (tire) karakteriyle değiştirmek ve veritabanımdaki "url_aciklamalari" tabloma yazmak. Bunu url'nin ham kısmını kimlik olarak kaydederek yapıyorum.

Örneğin "SEO Optimizasyonu, Türkçe ve $%&?=(özel) karakterler" diye bir başlık girdiğimi düşünelim bu dönüştürüldüğünde "seo-optimizasyonu-turkce-ve-ozel-karakterler" halini alıyor. özel karakterler gidiyor, boşluklar tire olarak dönüştürülüyor ve bir url açıklaması oluşturulmuş oluyor. Bunu da veritabanında saklıyorum.

URL'leri ekrana basarken (döküman listesi sayfasında) url açıklamasını ham url'ye göre seçiyorum ve ham url'nin sonuna ekliyorum. Aslında bu açıklamayı eklemek sayfa yapımı bozmuyor. Sadece açıklama koymuş oluyorum. İnsanlar forumlarda, bloglarda yapıştırdıkça url açıklamaları sayfayı tarif etmeye başlıyor. Kullanıcı sayfaya gelmeden sayfanın ona yönelik bilgi içerip içermediğini kolayca anlayabiliyor.


SEO optimizasyonu hakkında söyleyeceklerim bu kadar. Sadece arama motorlarında daha yukarıda çıkmak için çaba göstermeyin, yani gereksiz içerik, gereksiz anahtar kelimeler veya kalabalık sayfalar yapmaya çalışmayın. Artık botlar çok akıllı, çok moderatör çalıştıran popüler arama motorları sayfanızı yukarı almayı bırakın gerie düşürüyor hatta banlayabiliyor. Dürüst, içeriği zengin sayfalar hazırladığınız sürece arayan bulacaktır merak etmeyin ;-)

Kaynaklar :
http://en.wikipedia.org/wiki/Search_engine_optimization


Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

css3 css html google chart api osx applications free social network app facebook developer ubuntu cache php sql query injection javascript jquery wireless share örnek kod ntfs fstab editor coding framework plugin pear mdb2 db database mysql mssql pgsql ios iphone ipad apple app store store in-app purchase purchase verification integration storekit itunes connect itunes server imza signature mail while gimp htaccess url code development service tool search connect box wanda proje kampanya twitter widget date diff zaman tarih blog rss xml nedir workspace session regex js logo html5 meta macosx opengraph graph login spam media sosyal medya lifestream dokuman digital export optimizasyon object generator ruffles doritos cms radio button switch newsletter ipucu phpstorm jetbrains ide windows kontrol yapıları if tebrik ingilizce bootstrap kurulum nasıl seo optimization mobile browsers table svn subversion assets mfyz form input textarea select wordpress www subdomain redirect crossdomain subscription mootools apache support language cookie istatistik statistics auth http kitap firefox download less compile compiler linux on-the-fly fql laptop notebook startups music job route router mod_rewrite icon ikon grafik banner calendar portfolio tytz prepare execute player ie internet explorer konsol terminal sitemap howto screen link browser license lisans ajax insanlar iOS style xmlhttprequest deployment version control git ui design pharma hack oyun xhtml internet open source parse ux icons analyse procedure webkit web app