Raphael ie 6+ destekli fakat benim aşağıda kullanmış olduğum bazı javascript fonksiyonları 8+ çalıştığı için, ie8 ve altında stabil çalışırmı tam bilemiyorum, eğer ie9 altında çalışıyorsanız bu noktaya dikkat etmeniz gerekli.

Açıklamaları kod üzerinde yapacağım.

Demo | Dosyaları indir

Kaynaklar

Raphael JS
http://raphaeljs.com/
Raphael JS Fonksiyonları ve Görevleri
http://raphaeljs.com/reference.html
Eve yardımcı Javascript Kütüphanesi
https://github.com/adobe-webplatform/eve

Bugün Google Analytics kullanarak elde ettiğiniz verileri kendi sitenizde nasıl gösterebileceğiniz konusunda size yardımcı olmaya çalışacağım. Google Analatics’in ne olduğunu biliyor ve kullanıyor olduğunuzu varsayarak anlatacağım. Eğer Google Analtics ‘in ne olduğunu bilmiyorsanız yada sitenizde şuan için kullanmıyorsanız bu sayfayı inceleyebilirsiniz.

Google Analytics verilerinizi çekebilmek için analytics hesabınızın kullanıcı adı, şifre ve profil id’si gereklidir. Bu kısımda muhtemelen profil id’sini bilmeyen arkadaşlar olabilir. Bu yüzden profil id’nizi nasıl öğrenebileceğinizden bahsedeyim.

Analytics hesabınıza giriş yaptığınızda adres çubundaki adrese baktığınızda;

resimdeki gibi bir adres yapısı ile karşılaşırsınız. Buradaki sarı olarak işaretlenmiş alanda gördüğünüz kısım sizin profil id’nizi ifade etmektedir. Burada profil id nizin p harfinden sonra başladığına dikkat edin. Yukarıdaki örnekteki profil id : 12345678 dir.

Hatırlatma : Eğer hesabınıza birden fazla profil bağlı ise aşağıdaki listeden hangi profilin bilgilerini istiyorsanız o profile girip daha sonra adresten profil id sini alın.

Profil Id mizi öğrendiğimize göre şimdi verileri nasıl çekebileceğimizi görelim.

Verileri çekmek için, Vincent Kleijnendorst un yazmış olduğu Google Analytics PHP Api yi kullanacağız. Bu class biraz eski, alternatif olarak size GAPI classını önerebilirim. Dileyenler bu classı da kullanabilir. Ben Vincent in yazmış olduğu classı kullanarak anlatım yapacağım.

Google Analytics PHP API yi buradan indirebilirsiniz. Bu classı kullanırken bazı sorunlarla karşılaştım. Örnek olarak bir sorguda birden fazla ölçümü getiremiyordu. Her bir ölçüm için yeni bir sorgu yapmak gerekiyordu. Bu yüzden class da bazı değişiklikler yaptım ve bazı yeni methodlar ekledim. Bu yaptığım değişiklikleri görmek isteyenler burayı inceleyebilir.

Verileri çekmek için yukarıdaki classı kullanacağız, peki verileri nasıl göstereceğiz derseniz, şimdi de ona geçelim…

Verileri göstermek için google ‘ın geliştirmiş olduğu Google Charts ı kullanacağız. Bu Google’ın anaytics sayfasında da kullandığı grafik eklentisidir. Google Charts hakkında pek türkçe kaynak olmadığı için ilk başlarda ayarlarını yapmakta biraz zorluklar yaşamıştım ve başka grafik eklentilerini incelemiştim. Fakat hiçbiri google ın grafik eklentisi kadar hoşuma gitmemişti. Belki de benim google analytics sitesine gösterilen grafikleri beğenmemle ilgilidir bu konu.

Bu kadar laf yeter, şimdi icraata gelelim.

ilk olarak grafiği göstereceğimiz sayfayı ( index.html) oluşturalım

son olarak ta verileri çekeceğimiz sayfayı (sorgu.php) oluşturalım

Demo | Dosyaları indir

Kaynaklar

Google Charts Kullanımı
https://developers.google.com/chart/interactive/docs/quick_start?hl=tr
Google Charts ayarları
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

Temayı Github üzerinde tutuyorum, geliştirmeye açık olması sebebiyle. Bu temayı sizlerin katkılarıyla daha da güzel hale getirebiliriz. Bu yüzden yardımlarınızı bekliyorum

İndirme Adresi
GitHub adresi

Ön izleme Resimleri :

CSS

HTML

PHP

JavaScript

Scss (Sass)

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

ile

1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

tamamen birbirinden farklıdır. Haliyle https üzerinden açılan sayfada jquery kütüphanesini http isteğiyle çağırırsak bu çalışmayacaktır. Tam bu noktada imdadımıza şu yöntem koşuyor;

1

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

bu şekilde protocol yazılmadığında tarayıcı temel dökümanın protocolünü kullanır. Yani bu şekilde kullanım hem https hemde http de çalışacaktır.
Sayfa basit, şifresiz HTTP referansı ile yüklendiğinde jquery kütüphanesi normal bir şekilde bilgisayarımıza önbelleklenecek, HTTPS refransı ile sayfa yüklendiğinde ise script https referansı ile Google CDN den yüklenecektir. Bu konu hakkında daha detaylı bilgilere Dare Ward tarafından yazılan Cripple the Google CDN’s caching with a single character yazısından ulaşabilirsiniz.
Son olarak ufak bir uyarı yapayım ;
Bu şekilde protocolsüz url kullanımı eğer bilgisayarınızda diskinizden bir html sayfası yüklemeye çalıştığınızda hata verecektir. Bu yüzden, eğer bir web server üzerinde çalışmıyorsanız, http protocolünü yazmayı unutmayın. Aksi halde sayfaya script yüklenmeyecektir.
Hatamız var ise affola, iyi çalışmalar

İnternet Explorer ın 8 ve 9 beta sürümleriyle gelen bu Geliştirici Araçları sayesinde gerçek zamanlı HTML-CSS-Javascript özelliklerine ulaşabilir bu özellikleri düzenleyebilirsiniz. Bu araçlara F12 tuşuna basarak yada Ayarlar menüsünden ulaşabilirsiniz. İnternet Explorer Developer Tools hakkında daha detaylı bilgiye bu adresten ulaşabilirsiniz.

Gelelim bizi ilgilendiren kısma;

Resimden de görüldüğü gibi Browser mode aracını kullanarak internet Explorer ın eski sürümlerinde web sayfanızı test edebilirsini. Son olarak ufak bir not paylaşayım. Bazı durumlarda browser mode u IE8 yaptığınız halde Document Mode IE9 da kalıyor. Bu durumda tarayıcı IE8 olarak yorumlamıyor. Bu yüzden Browser mode ile Document Mode u aynı ayarlamaya dikkat edin.

Öncelikle etiket şeklinin yapısından bahsedelim ;

Resimde gördüğünüz gibi, etiket şeklinin uç kısmını yapmak için css in :before seçicisini, daire görünümünü vermek için de :after seçicisini kullanacağız. Eğer css in :before ve :after seçicileri hakkında bilginiz yoksa CSS Pseudo-elements makalesini incelemeniz yararlı olacaktır.

1
2
3
4

<ul class="etiketler">
   <li><a href="#">Css<a/></li>
   <li><a href="#">Javascript<a/></li>
</ul>

Post yazılarının altına eklenen etiketlerin liste yapısı genelde yukarıda verdiğim örnekteki gibi olur. Bu yüzden anlatımımı bu örneği baz alarak yapacağım.

Öncelikle listemizi düzenleyelim;

1
2
3
4
5

.etiketler{
  margin:0;
  padding:0;
  list-style:none;
}

daha sonra liste elemanları düzenleyelim;

1
2
3
4
5

.etiketler > li{
  float:left;
  margin-right:10px;
  padding-left:10px;
}

Burada css’in “>” çocuk seçicisini kullandık.(*Not1)

Etiket şeklimizin gövdesi yukarıdaki resimden de görebildiğiniz gibi sağ üst ve sağ alt köşeleri kıvrımlı bir diktörgenden oluşmaktadır. Bu kıvrımlar internet explorer 8 de görüntülenemektedir. Çünkü css in border-radius özelliği internet explorer 8 tarafından desteklenmemektedir. İnternet explorer 8 de kıvrımsız köşeli bir etiket şekli görünecektir.

Etiket şeklimizin gövdesinin css kodlamasını yapalım;

1
2
3
4
5
6
7
8
9
10
11
12
13

.etiketler > li > a{
  display:block;
  position:relative;
  padding:0 10px;
  font-size:12px;
  line-height:24px;
  text-decoration:none;
  background-color:#959595;
  color:white;
  border-radius:0px 5px 5px 0px;
  -webkit-border-radius:0px 5px 5px 0px; 
  -moz-border-radius:0px 5px 5px 0px; 
}

şimdi etiket şeklimizin uç kısmı ve daire kısmının ortak olarak kullandığı kodları yazalım. Bu şekilde kodlama yapmak aynı kodu birden fazla yerde yazarak gereksiz kod kalabalığı oluşmasını önleyecektir.

1
2
3
4
5

.etiketler > li > a:before,
.etiketler > li > a:after{
  display:block; 
  position:absolute;
}

Etiket şeklimizin uç kısmını üçgen şeklinde yapabilmek için .etiketler > li > a:before elementinin genişlik ve yükseklik değerlerine sıfır vermeliyiz. Çünkü üçgen görüntüsünü border lar yardımıyla yapacağız. Şimdi bu kısım biraz kafanızı karıştırabilir bu yüzden resimli bir örnekle açıklamaya çalışacağım.

Normalde elementimiz şu şekilde olcaktır.

Biz elementin genişlik ve yüksekliğine sıfır vererek içerik alanını yok ediyoruz ve elementimiz şu hale geliyor.

Resimden de anlaşılacağı gibi elementin üst,sol ve alt kenarlık renklerini transparent olarak tanımlarsak ve border-left in genişliğini de sıfır yaparsak üçgen görüntüsünü elde etmiş oluruz. Etiket şeklimize dönersek, .etiketler > li > a:before elementinin css kodlaması şu şekilde olmalıdır.

1
2
3
4
5
6
7
8
9
10

.etiketler > li > a:before{
  content:''; 
  height:0; 
  width:0; 
  top:0; 
  border-style:solid;
  left:-10px; 
  border-width:12px 12px 12px 0;
  border-color:transparent #959595 transparent transparent;
}

Evet buraya kadarlık kısımda etiket şeklimizin görüntüsünü elde ettik sadece daire görüntüsü kaldı. Normalde daire görüntüsünü elementi css border-radius özelliğini kullanarak yuvarlak gösteriyorlar. Fakat yukarıda da anlattığım gibi border-radius özelliği internet explorer 8 tarafından desteklenmiyor. Bu yüzden farklı bir yol izleyeceğiz. Biz “Georgia” fontunun nokta işaretini kullanacağız.

1
2
3
4
5
6
7
8
9

.etiketler > li > a:after{
  content:'.'; 
  font-weight:bold; 
  font-family:Georgia, "Times New Roman", Times, serif;
  top:-5px; 
  left:0px; 
  font-size:18px;
  line-height:24px;
}

son olarak ta elementimizin hover efektlerini ayarlayalım

1
2
3
4
5
6

.etiketler > li > a:hover{
  background-color:#333333;
}
.etiketler > li > a:hover:before{
  border-right-color:#333333;
}

ve etiketimizin son hali

Check out this Pen!

(*Not) “>” css seçicisi elementin çocuk elementlerini seçmemizi sağlar. Bu şekilde kullanımlar css performansı açısından daha iyidir. Daha detaylı bilgiyi şu adresten bulabilirsiniz CSS Selectors

Koşullu yorumlar sadece İnternet Explorer da çalışır ve sadece IE versiyonları için özel talimatlar vermek için kullanılır. Koşullu yorumlar xhtml in bu kodu yorumlayıp yorumlamayacağını belirler.

xhtml de açıklama

1

<!-- Comment text -->

şeklindedir. Koşullu Yorumlar ise;

1

<!--[If operatör]> HTML <![endif]-->

şeklindedir. Örnek verecek olursak;

1

<!--[if IE]> Bu kod sadece Interner Explorer 5 ve üzeri versiyonlarda yorumlanır. <![endif]-->

yukarıdaki kod sadece internet explorer 5 ve üzeri versiyonlarda yorumlanacaktır. if komutundan sonra farklı operatörler kullanabiliriz.

Kullanabileceğimiz operatörler şunlardır.

• gt     – den büyük
• gte    – den büyük yada eşit
• lt     – den küçük
• lte    – den küçük yada eşit
• !      – değilse

Bu ifadelerin ingilizce açılımları ;

gt: greater than (den büyük),
lt: less than (den küçük),
gte: greater than or equal to(den büyük yada eşit),
lte: less than or equal to(den küçük yada eşit)

şeklindedir. Bu şekilde bilirseniz aklınızda kalması kolaylaşır. Bunlara örnekler verirsek

IE 6 nın aşağısı için;

1
2
3

<!--[if lt IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-dan-asagisi.css" />
<![endif]-->

IE 6 ve aşağısı için;

1
2
3

<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-ve-asagisi.css" />
<![endif]-->

IE 6 nın yukarısı için;

1
2
3

<!--[if gt IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-dan-yukarisi.css" />
<![endif]-->

IE 6 ve yukarısı için;

1
2
3

<!--[if gte IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-ve-yukarisi.css" />
<![endif]-->

IE değilse;

1
2
3

<!--[if !IE]>
   <link href="ie-disindakiler.css" rel="stylesheet" type="text/css" />
<![endif]-->

Görüldüğü gibi bu yöntemle tarayıcı yorumlama farklarını kolaylıkla düzeltebilirsiniz. Bende temamı kodlarken IE 8 e uyarlama aşamasında bu çözüme başvurdum. Bu çözümü sadece css düzenlemeleri için değil javascript ve html düzeltmeleri içinde rahatlıkla kullanabilirsiniz.

Kaynaklar

• http://fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/
• http://mrtkrcm.com/2010/05/html-kosullu-yorumlar/
• http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
• http://www.quirksmode.org/css/condcom.html
• http://www.unintentionallyblank.co.uk/2006/09/19/if-internet-explorer-then-do-something-else-a-how-to/

Peki yeni temanın özellikleri neler?

• Yeni tema responsivedir . Yani her bilgisayara / tablete / telefona uyumlu olarak kodlanmıştır.
• Min kod maksimum verim mantığı ile gereksiz kodlardan arındırılarak kodlandı
• Html5 altyapısında kodlandı.
• W3C validators standarlarına uyumlu olarak kodlandı.
• Minimum resim kullanılarak ve css sprite tekniği kullanılarak sitenin açılma hızının artması sağlandı.
• Seo dostu olarak kodlandı.
• Minumum eklenti ve bileşen kullanılarak kodlandı. Ayrıca kullanılan bileşenlerin çoğu da benim tarafımdan kodlandı.
• Google Page Speed eklentisinde 100 üzerinden 95 puan almaktadır.
• Çapraz tarayıcı uyumluluğu sağlanmıştır. Yani tüm tarayıcılara uyumlu hale getirilmiştir. Yalnız internet Explorer 8 e kadar uyum sağlanmıştır. Daha eskisini kullanan arkadaşlar için üzgünüm onlar hala var mı bilmiyorum ama :)

Bunlar şimdilik aklıma gelenler, tabii ki kendimi geliştirdikçe yeni şeyler öğrendikçe bu temanın özelliklerini de geliştireceğim. Artık içime sinen bir temaya sahip olduğum için yeni yazılarımın hızlanacağını umuyorum. Tema hakkında olumlu olumsuz görüşlerinizi yorumlarda ya da iletişim kısmından bana bildirmeniz beni çok mutlu eder.
Yeni yazılarda görüşmek üzere, İyi çalışmalar

1

<div id="kutu"></div>

daha sonra bu kutuyu css ile şekillendirelim;

1
2
3
4
5
6
7
8

#kutu {
width:300px;
height:200px;
display:block;
background-color:#DDDDDD;
margin-left:15px;
position:relative;
}

ve son hali;

kutumuz bu hale geldi;

şimdi başlığımızı ekleyelim;

1
2
3

<div id="kutu">
<div>Başlık</div>
<div>

sitilini de verelim;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.kutu-baslik {

background: none repeat scroll 0 0 #666666;

border-radius: 5px 5px 5px 0;

display: inline-block;

margin: 15px 0 0 -10px;

padding: 10px 15px;

text-align: center;

width: 270px;

min-height:20px;

}

şimdi kutumuz şu hale geldi

son olarak ta başlığın kıvrımını ekliyelim;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.kutu-baslik:before {

content:"";

position:absolute;

top:55px;

left:0;

background: none repeat scroll 0 0 #333333;

border-radius: 0 0 0 10px;

display: block;

height: 10px;

margin-left: -10px;

width: 10px;

}

ve son hali

Check out this Pen!

Birdahaki yazıda görüşmek üzere , iyi çalışmalar