20 Temmuz Pazar ´08   —   18 Yorum

Web İkonları

v0.7'de sitenin alt kısmına yerleştirmek üzere tasarladığım, web 2.0 button görünümüne sahip ikonları Dosyalar bölümünde Grafik dizininde "rss_xhtml_icons.psd" ve "valid_css_xhtml_icons.psd" dosyaları olarak bulabilirsiniz. (Her ne kadar sayfalar valid olmasa da :-) )

http://www.mfyz.com/?/dosyalar/Grafik

Kullanımı Creative Commons 2.5 lisansına uygun olmalıdır. Lisans hakkında bilgi almak için de http://www.mfyz.com/?/hakkinda/lisans/ adresini ziyaret edebilirsiniz.
20 Temmuz Pazar ´08   —   2 Yorum

Bazı İkonlar

Sitede kullandığım ve zamanında yaptığım bazı ikonlar. PHP logosunun web 2.0 patlamadan önce aqua buton denemelerimden ortaya çıkardığım versiyonu, şu an günlük sayfalarında tarihi görüntülediğim takvim ikonu ve anasayfada kullandığım firefox bannerı ve alternatifi.

Dosyalar bölümünde Grafik dizininde psd dosyalarını bulabilirsiniz.
http://www.mfyz.com/?/dosyalar/Grafik

Kullanımı Creative Commons 2.5 lisansına uygun olmalıdır. Lisans hakkında bilgi almak için de http://www.mfyz.com/?/hakkinda/lisans/ adresini ziyaret edebilirsiniz.
Yakın zamanda (gerçi 3-5 ay oldu) google chart api'sini sunarak GET mothodu ile gönderdiğiniz çağrılar sonucu oldukça hızlı biçimde yumuşatılmış (antialiased) grafikler çizdirebiliyor. API'nin kullanımı aslında oldukça basit. Verileriniz ve grafik detaylarınız (etiketler, renkler vs) ile bir URL oluşturuyor ve çağırıyorsunuz. Google size PNG formatında istediğiniz boyutta ve renklerde grafik veriyor. Dökümantasyonu güzel hazırlanmış ve neredeyse tüm popüler grafik türlerini çizdirebiliyor.http://code.google.com/apis/chart/ adresinden gerekli bilgiyi alabilirsiniz.

Doğrudan kullanıma yönelik parametreleri ele alacağım ve en çok kullanılan 3-4 grafik türünü nasıl çizdirebileceğimizden bahsedeceğim. Geri kalan daha detaylı bilgiyi kendi sitesinden alabileceksiniz zaten.

chs (Chart Size)

Bu parametre ile çizdirilecek grafiğin boyutlarını piksel olarak vermeniz gerekiyor width + x + height yani klasik formatta 200x100 şeklinde belirteceğiniz bir parametre 200px genişlik, 100px yükseklikte bir resim çizdirecektir.

cht (Chart Type)

Çizdirilecek graifk türünü belirtmek için bu parametreyi kullanıyoruz. Aşağıda google chart api ile çizdirebileceğiniz grafikler türleri ve veri seti boyutları verilmiştir :


lc : Çizgi Grafiği (Line Chart)


Grafik 3


lxy : X,Y Grafiği


Grafik 4


bhs : Yatay Bar Grafiği


Grafik 5


bvs : Diket Bar Grafiği


Grafik 6


Bu iki bar grafiğinde 2 boyutlu veri setine kadar bar grafikleri çizdirebilirsiniz. Tek boyutlu çizdirirseniz histogram grafiği elde edersiniz.



p : Pasta grafiği


Grafik 7



p3 : 3 Boyutlu Pasta Grafiği


Grafik 8


s : Saçılım (Scatter) Grafiği


Grafik 9

chd (Chart Data)

Bu parametre ile çizdireceğiniz grafik türüne göre tek veya çok boyutlu verinizi şekillendirip belirliyorsunuz. 2 şekilde çalışıyor. Bu parametre ile gönderdiğiniz string'in başında "t" harfini koyarsanız text türü veri şeklinde şifrelenmemiş ve virgülle ayrılmış düz sayısal değerler belirtiyorsunuz :

Grafik 1
http://chart.apis.google.com/chart?
chs=200x100
&cht=lc
&chd=t:60,40,20,15,50,70,20
Şekilden görülebileecği gibi veriler ilerleyiş sırasına göre çizgi grafiğine dökülmüştür.
chd parametresi "t:" ile başlayıp virgüllerle ayrılmış ham verilerle belirtilmiştir.

Veriyi kodlayarak belirterek daha kısa urller oluşturabilirsiniz. Ayrıca verinizi tam olarak url'de vermek istemeyebilirsiniz. Google bu verileri işlerken yüzde (%) üzerinden değerlendirme yaptığından siz doğrudan yüzdelerle ifade edilen birk kodlamada verilerinizi belirtebilirsiniz. Önce örneği vereyim. Yukarıdaki verilerin kodlanmış şekilde belirtilmesi :

Grafik 2
http://chart.apis.google.com/chart?
chs=200x100
&cht=lc
&chd=s:lYMJfrM
Gördüğünüz gibi "t:" yerine "s:" ile belirttikten sonra verilerimizin kodlanmış halini giriyoruz. Sonuçta çok daha kısa bir string oluşturmuş oluyoruz.

Bu kodlama için google dökümantasyonda bir javascript fonksiyonu veriyor. Yaptığı iş verilerinizi belirttiğiniz maksimum değerine göre yüzde üzerinden değerlendirip,
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
kümesine ölçeklendirip her değere karşılık gelen harfleri yan yana koymak.

Bu işi yapan javascript fonksiyonu ve kısaca kullanımı :
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function simpleEncode(valueArray,maxValue) {

  var chartData = ['s:'];

  for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
      chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
    }else{
      chartData.push('_');
    }
  }

  return chartData.join('');
}

// Örnek sifreleme
var veri_dizisi = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65);
var max_deger = 70; 
alert(simpleEncode(veri_dizisi, max_deger));
Alt kısımda kullanımını görüyorsunuz, oldukça basit.

Bu kod javascript kodu ve biliyorsunuz ki web uygulamalarında verileri genelde böyle açıkca vermek istemeyiz. Ayrıca bu kadar basit kullanımlı bir api için verilerin kullanıcıda url'ye dönüştürülüp grafiğin api aracılığıyla istenmesi gibi karışık bir yol izlemek tercih edilmez. PHP için bu javascript kodunda yapılan işleri php ile yaptıran ufak bir fonksiyon yazdım :
function encodeData($data, $max_value){

  $simpleEncoding = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  $data_string = "s:";
  foreach($data as $currentValue){
    if( is_numeric($currentValue) && $currentValue >= 0 ){
    $data_string .= substr( $simpleEncoding, round( ( strlen($simpleEncoding)-1 ) * $currentValue / $max_value ), 1 );
    }else{
      $data_string .= '_';
    }
  }

  return $data_string;
}

print encodeData( array(60,40,20,15,50,70,20), 100 )
Kullanımı aynı, verilerinizi ilk parametrede dizi olarak veriyor, ikinci parametrede de grafiğin üst sınırını veriyorsunuz. Size veriyi encode edilmiş ve chd parametresine yapıştırabileceğiniz formatta veriyor. Mesela yukarıdaki verinin kodlanmış hali :
s:lYMJfrM
Bu veriyi kodlamadan vermek isteseydik :
t:60,40,20,15,50,70,20
parametresi belirtecektik. Veri seti büyüdüğünde bu dönüşüm sayesinde urldeki karakter sayısı tasarrufu artacaktır.

Sonuç olarak yukarıdaki kodlama tekniği ile verilerimizi kodlayıp parametrede belirtiyoruz.
Grafik 10
http://chart.apis.google.com/chart?
cht=lc
&chs=200x125
&chd=s:FOETHECat,KATYPSNXJ
Şimdi bu grafikte iki veri setiyle belirtilen zaman çizelgesindeki çizgiler renk ayrımı yapılmadığından fark edilemiyor. Grafiklerimizdeki renkleri ayarlamak için :

chco (Chart Colors)

Bu parametreyle "#" işareti belirtmeden hex kodlarıyla renkleri virgül işaretiyle ayırarak belirtmemiz gerek. Veri setinde kaç tane farklı set varsa o kadar renk belirtmek gerekir. Aksi halde kafasına göre yerleştirebiliyor. Örneğin az önceki grafikte iki veri setini seçilebilir hale getirelim :

Grafik 11
http://chart.apis.google.com/chart?
cht=lc
&chs=200x125
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
Renkleri belirttiğimiz sırada veri setlerine uygulandı. Başka bir örnek olarak da pasta grafiği için renkleri uygulamak istersek :


Grafik 12
http://chart.apis.google.com/chart?
cht=p3
&chd=s:Uf9
&chs=500x250
&chco=EAA012,93BC1C,1C47BA
Burada 3 dilimli bir pasta grafiği çizdirdiğimizi bilgiğimiz için 3 renk verdik. İstersek 100 tane renk verelim, bu pasta 3 dilimli olduğundan ilk 3 rengi uygulayacaktır. Geri kalanlar kullanılmayacaktır.

chtt (Chart Title)

Grafiğin başlığını belirmek için kullanılır. Bu parametre ile grafiğin üst kısmına istediğiniz açıklamayı tek satır olacak biçimde ekleyebilirsiniz. Uzun metinler grafikten taşacaktır ve görüntülenmeyecektir.

Grafik 13
http://chart.apis.google.com/chart?
cht=lc
&chs=230x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chtt=A+ve+B+Firması+Karşılaştırması

Açıklama Kutusu (Legend)

Bu özellik 2 parametre ile kullanılır. Birincisi veri setlerini tanımladığınız chdl parametresi, ikincisi ise açıklama kutusunun grafiğin neresinde bulunacağını belirten parametredir, bu da chdlp parametresidir. Pozisyon ile ilgili parametre zorunlu değildir. Örneklerle açıklamaya çalışacağım :

Grafik 14
http://chart.apis.google.com/chart?
cht=lc
&chs=300x155
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chtt=A+ve+B+Firması+Karşılaştırması
&chdl=A+Firması|B+Firması
&chdlp=r
chdlp parametresini kullanmazsanız açıklama kutusu grafiğin sağında çıkar. Yukarıdaki grafikte de sağ taraf ayarlanmıştır t, l, b, r ile yönü belirleyebiliriniz. Ayrıca chdl parametresine değer verirken | (pipe) işareti ile ayırarak veri seti kadar değer girin.

chf (Chart Fill)

Bu parametre aslında oldukça karışık ve geçiş efektlerinden zebra-lines tarzı arka-alan dolgusuna kadar çok değişik artalanlar oluşturabiliyorsunuz. Ben burada basitçe grafiğin arka rengini değiştirmeyi göstereceğim. Detaylı bilgiyi dökümantasyonunda bulabilirsiniz.

Grafik 15
http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chf=bg,s,92BFFB

chg (Chart Grid Lines)

Karşılaştırmayı kolaylaştırmak için grafiğin arkasına ızgara koymak isteyebilirsiniz, bu parametre ile ızgara hücre boyutunu girip ayarlayabiliyorsunuz.

Grafik 16
http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chg=10,20

Grafik Boyut/Değer başlıkları

Çok saçma bir başlık oldu ama Türkçe nasıl denir bilmiyorum. Axis Labels desem kim anlar onu da bilmem :-) Kısaca şu oluyor, koordinat çizgileri üzerinde grafikteki değerlerin ifade ettiği etiketleri ayarlamak için birkaç parametre dizisi kullanacağız.

chxt (Chart Axis Type)

x, y, r, t değerleri alıyor. x ve y adı üzerinde eksenleri r ve t de üst ve sağ tarafta başlıkların çıkmasını sağlıyor. chxt parametresine virgül ile ayırarak görüntülenecek etiketler için pozisyon bilgisi veriyor. Burada iki kere aynı değeri verirseniz (mesela chxt=x,y,x) o eksende belirttiğiniz kadar AYNI başlıklardan çıkar.

Tabiki chxt parametresi tek başına kullanılmıyor. Eğer tek başına kullanırsanız ölçeklendirmedeki otomatik değerler görünecektir.
Mesela az önce çizdirdiğimiz grafiğe X ve Y eksenine başlıklar eklemek isteyelim :

Grafik 17
http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chxt=x,y
Bu etiketleri değiştirmek istersek :

chxl (Chart Axis Labels)

Başlık belirtmemize yarar. Hemen örnekle devam edelim :

Grafik 18
http://chart.apis.google.com/chart?
cht=lc
&chs=250x135
&chd=s:FOETHECat,KATYPSNXJ
&chco=ff0000,00ff00
&chxt=x,y,r,x
&chxl=
0:|Ock|Tem|Ock|Tem|Ock|
1:|0|100|
2:|Düşük|Orta|Yüksek|
3:|2005|2006|2007
Yukarıda gördüğünüz gibi x eksenini 2 kere kullandık fakat farklı etiket atadık. Bunu da chxl parametresinde sırayla gösterilecek eksenlerdeki başlıkları girdik. Aslında oldukça basit.

Şimdilik google chart api ile ilgili anlatmak istediklerim bu kadar. Basitçe api'nin nasıl kullanıldığını aktarmaya çalıştım, daha detaylı bilgi ve fantastik grafikler üretmek için api'nin kendi dökümantasyonunu deşin derim. Zira oldukça basit ve örneklerle dolu bir dökümantasyon, Türkçe kaynak olması için özetledim.

API Dökümantasyonu :http://code.google.com/apis/chart/

http://24ways.org/2007/tracking-christmas-cheer-wi......gle-charts adresinde bazı ilginç örneklerler açıklamalar var. Ayrıca kolayca php ile bu grafik urllerini oluşturabilmek için de bazı projeler geliştirilmiş. Bunlardan ikisi :http://code.google.com/p/gchartphp/wiki/Examples ve
http://www.malaiac.com/GphpChart/


Hazırlayan : Mehmet Fatih YILDIZ
6 Kasım Cumartesi ´04   —   12 Yorum

Ekran Komutları (PRINT, INPUT, SPACE, PRINT USING, LOCATE, TAB)






PRINT Komutu


Ekrana herhangi birşeyler yazdırmak için kullanılır. Kullanımı;
PRINT "Fatih Yıldız"
Bir değişkeni Yazdırmak için;
PRINT X
Eğer bu komutun sonuna ; işareti koyarsanız bir sonraki ekran komutu bu komutun ekrana yazdırıldığı satırın sonundan devam eder eğer yazmazsanız bir sonraki ekran komutu bu satırın bir altından devam eder.
İki veya daha fazla değeri yazdırmak için komuttan sonra değişken veya değerleri ; ile ayırark yazın. Örneğin;
PRINT "Sonuç : ";DEG1;"Olduğundan X :";DEG2;"dir."
Burada ekrana bir cümle yazılacak ve bir sonraki işlem alt satırdan devam edecektir.




INPUT Komutu


Bu komut ile klavyeden bilgi alınarak bir değişkene bu girilen değer aktarılır. Kullanımı;
INPUT "Bilgiyi Giriniz";DEG1
Bu kodda ekrana Bilgiyi Giriniz? cümlesi çıkıyor ve bizim bilgi girişimizi bekliyor.
Eğer arada ; yerine , kullansaydınız yazdırmak istediğimiz cümlenin sonuna ? eklemeyecekti.




SPACE$(X) Komutu


Bu komut PRINT komutu ile birlikte kullanılır. Amacı X değeri kadar boşluk bırakmaktır. Kullanımı;
PRINT "A";SPACE$(10);"B"
Bu kodun çıktısı A 10 Tane Boşluk B olur.




PRINT USING Komutu


Bu kod sayıları ekrana yazdırırken basamaklamak için kullanılır. Mesela programda girilen bilgiyi ekrana , ile ayırmak istiyorsunuz. Örneğin;
A=123456789
PRINT USING "

.

.

",A

Burada # lere dokunmayacaksınız, aradaki noktalar ise sayıyı ayırınca nasıl ekrana yazacak onu belirler. Bu kodun çıktısı 123.456.789 olur. Bu kodu para bilgilerini ekrana yazdırırken kulanabiliriz.




LOCATE(X,Y) Komutu


Ekrana bir bilgi yazdırdığınızda veya bir bilgi istediğinizde hep satırlar aşağı iner, bu komut ile istediğiniz satır ve sütuna gidebilirsiniz. Normal bir dos ekranı 24 satır 80 sütundan oluşur. Komutun kullanımı;
LOCATE(10,50)
10.satır 50.sütuna gittik ama ekranda birşey görünmez. Biz bu komuttan sonra PRINT veya INPUT ile ekrana bilgi yazdırabilir veya bilgi isteyebiliriz. Örneğin;
PRINT "Başlangıç"
PRINT "2.Satır"
LOCATE(1,25)
PRINT "Burası 1.Satır"
Burada 1.PRINT 1.satıra Başlangıç yazdırdı. 2.PRINT 2.satıra 2.Satır yazdırdı. Eğer LOCATE kullanmasaydık 3.PRINT Burası 1.Satır yazısını 3.satıra yazdıracaktı. Amam biz LOCATE ile 1.satır 25.sütuna gittik ve 3.PRINT Burası 1.Satır yazısını 1.satıra yazdırdı.




TAB(X) Komutu


Bu kod PRINT komutu ile birlikte kullanılır. Bu kod ile ekrana yazdırmakta olduğumuz satırın X inci sütununa atlarız. Örneğin;
PRINT "A";TAB(35);"B"
Burada ilk olarak A yazıp aynı satırın 35. sütununa atlayıp B yazdırıyoruz.



Grafik Komutları (SCREEN, LINE, COLOR, VIEW, PSET, CRICLE)






SCREEN Komutu


Ekran çözünürlüğünü ayarlamamıza yardımcı olur. Kullanımı;
SCREEN 14
Değişik değerler deneyip ilginç ekran çözünürlükleri bulabilirsiniz.




LINE Komutu


Ekrana belirtilen X1,Y1 değerlerinden X2,Y2 değerlerine kadar çizgi çizer. Kullanımı;
LINE(X1,Y1)-(X2,Y2)


COLOR X Komutu


Bu komuttan sonra ekrana yazdırılacak şeylerin istediğiniz renkte görünmesini sağlar. X değeri ile renk belirleyebilirsiniz. X değeri 1 ile 15 arasında olabilir.




VIEW Komutu


Ekranda X1,Y1 ile X2,Y2 ile oluşturulacak dikdörtgen alanı istenilen renkte boyar. Kullanımı;
VIEW PRINT (X1,Y1)-(X2,Y2),RENK


PSET Komutu


Ekranda İstenilen X,Y noktasını istenilen renkte boyar. Kullanımı;
PSET(X,Y),RENK


CRICLE Komutu


Ekranda istenilen X,Y merkezli istenilen yarıçapta çember-daire çizer. Kullanımı;
CRICLE(X,Y),RENK
Not : Bu döküman 15 Eylül 2006 tarihinde düzenlenmiştir.

Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

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