HTML5 ile Gelen Yeni Tagler

Wednesday, 31 Mar 2010 admin yorum yok

HTML5 ve CSS3 web’in geleceği olmaktan çıktı artık. Internet Explorer dışında birçok popüler tarayıcı bu standartları şuan destekler konumda. Internet Explorer 9. versiyonu ile bu standartları tam olarak destekleyecek. Tarayıcıların neleri tam olarak desteklediklerine detaylı olarak burdan bakabilirsiniz. HTML5 ile gelen birçok yenilik var bu yeniliklere kullanmak için yeni tagler eklenmiş. Bu yazımda bu yeni gelen tagleri anlatmaya çalışacağım.

HTML5 ile Gelen Yeni Tagler

  1. DOCTYPE
  2. Charset
  3. Header
  4. Nav
  5. Aside
  6. Article
  7. Figure
  8. Hgroup
  9. Section
  10. Address
  11. Footer

DOCTYPE

DOCTYPE(Döküman Türü) kısacası sayfamızın ne olduğunu tanımladığımız tag. Mutlaka tanımlamamız gereken bir tag’dır. Çünkü burda yapacağımız tanımlamaya göre tarayıcı sayfamızı yorumlayacaktır.

Örnek Kullanımı:

<!DOCTYPE html>

CHARSET

Tarayıcıların sayfamızı hangi karakter seti ile yorumlaması gerektiğini tanımladığımız tag.

Örnek Kullanımı:

<meta charset="utf-8">

HEADER

Header tag’ı bundan önceki tagler den biraz farklı çünkü header tag’i ile herhangi bir bilgiyi deklere etmiyoruz. Bir konteynır olarak tanımlıyoruz.

Peki bu konyetnır’ın içine ne koyuyoruz? Genel de içerisine ana navigasyon linkleri konulur. Peki neden header tagı içerisine koyuyoruz? Semantic web(Anlamsal web) geçiş yapmamızı sağlıyor header tag’i. Arama motorları bu taglari ne olduğunu bildiği için içindeki elementlere bir anlam veriyor ve daha iyi bir arama algoritması kurabiliyor. Bu sayede daha fazla ziyaretçi elde etmemizi sağlayabiliriz.

Örnek Kullanımı

<header>
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Kullanıcılar</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</header>

NAV

Sitemizin navigasyonunun yer aldığını konteynir tag’i.

Örnek Kullanımı

<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Kullanıcılar</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>

ASIDE

Sayfada yer alan içerikle ilgili ancak önemli bir bilgi yer aldığını anlatmaya çalıştığımız konteynır tag’i.

Örnek Kullanımı

<aside>
<p>Buraya dikkat...</p>
</aside>

ARTICLE

Web sayfaları bildiğiniz üzere sadece içerikten meydana gelmez menüler, reklamlar ve çeşitli tanımlamalar da olur. Ama kullanıcı genelikle bunlarla ilgilenmez. İlgilendiği konu girdiği sayfada ki içeriktir. Bunu belirtiğimiz tag de article tag’i dir.

Örnek Kullanım

<article>
Bu yazımda....
</article>

FIGURE

Figure konteynir’ı ise aside’ın tam zıttı. Yani içerikten farklı bir bilgi girdiğinizi deklere ettiğimiz tag.

Örnek Kullanımı

<figure>
<img src="figure.jpg" alt="figure resmi" />
<figcaption>Burda yeni bir figure var</figcaption>
</figure>

HGROUP

Benzer elementleri gruplamak için kullandığımız tag.

Örnek Kullanım

<hgroup>
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
</hgroup>

SECTION

İçeriğimizin içinde  yeni bir bölüm oluşturmamızı sağlayan tag. Mesela içeriğin içinde giriş bölümü, haberler,  iletişim bilgileri gibi bölümler olsun ve biz bu bilgileri hepsini yeni ayrı bölümler içine yazalım.

Örnek Kullanım

<article>
<hgroup>
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<hgroup>
<p>Ana section</p>
<section>
<h1>Katergori 1</h1>
<p>Kategori 1 ile ilgli tanımlama</p>
</section>
<section>
<h1>Kategori 2</h1>
<p>Kategori 2 ile ilgili tanımala</p>
</section>
</article>

ADDRESS

İletişim bilgilerini yer aldığını belirlediğimiz tag.

Örnek Kullanım

<address>
<a href="#">Ahmet</a>,
<a href="#">Mehmet</a>,
</address>

FOOTER
İçeriğin bittiğini belirlediğimiz tag. Eğer bir blog sayfası ise içersine o blog yazısı ile ilgili yorumları bu tag’ın içine koyabiliriz.
Örnek Kullanım

<article>
<header>
<h1>Sayfa ile ilgil başlık</h1>,
</header>
<p>İçerik</p>
<footer>
<p>Yorumlar</p>
</footer>
</article>

HTML5 taglerini aktif hale getirelim
Şimdilik bu tagleri kullanmak için bu tagleri display değerlerinin block yapmamız gerekiyor.

header, nav, article, section, footer, figure, aside {
display: block;
}

Gördüğümüz gibi CHARSET ve DOCTYPE dışındaki tagler Şemantik Web’e katkı sağlamak için oluşturulmuş tagler. Şemantik web’e artık yavaş yavaş geçiyoruz. O yüzden HTML5 ile gelen tagleri zaman içerisinde projelerimizde kullanmamız gerekiyor.

Kategoriler:HTML5 Etiketler:

jQuery ile JavaScript Dosyasını Yükleyelim

Monday, 29 Mar 2010 admin yorum yok

Bugün kolay ama bazı zamanlar çok kullanışlı olan bir yöntemi sizinle paylaşmaya çalışacağım.

İstemci tabanlı scriptlerimiz de koşullara göre dışarıdan JavaScript dosyası yüklememiz gerekebilir. Yada kod görünümün daha düzenli olmasını istediğiniz zamanlarda html ile değilde JavaScript ile yükleme yapmak isteyebilirsiniz. Bu noktada jQuery bize $.ajax api’si ile işimizi oldukça kolaylaştırıyor. Peki nasıl yapıyoruz aşağıdaki kullanım şekline bakalım. 

$.ajax({
	type: 'GET',
	url: 'jsyuklemece.js',
	dataType: 'script'
});

Gördüğünüz gibi kullanımı oldukça kolay. Klasik $.ajax uygulamasını nasıl kullanıyorsak aynı şekilde kullanıyoruz sadece Veri tipini(dataType) ‘script’ olarak belirliyoruz. Hepsi bu kadar.


DEMO

Kategoriler:Javascript, jQuery Etiketler:

Php de Zincirleme Yöntemi

Saturday, 20 Mar 2010 admin yorum yok

Birçok nesne tabanlı programlama dilinde uygulanan Zincirleme Yöntemini Php de nasıl yapacağımızı anlatmaya çalışacağım, bu yazımda.

Zincirleme yönetimi bir tanımlama ile birden çok fonksiyonu çalıştırmamızı sağlar. Şimdi aşağıdaki örnek sınıfımıza bir göz atalım.
Örnek Sınıfımız

class Kullanici
{
	private $ad = null;
	private $soyad = null;
	private $yas = null;

	public function setAd($ad)
	{
		$this->ad = $ad;
		return $this;
	}

	public function setSoyad($soyad)
	{
		$this->soyad = $soyad;
		return $this;
	}

	public function setYas($yas)
	{
		$this->yas = $yas;
		return $this;
	}

	public function getBilgiler()
	{
		echo 'Ad: ' . $this->ad . ' Soyad: ' . $this->soyad . ' Yas: ' . $this->yas;
	}
}

Sınıfımızı zincirleme yöntemi kullanmadan kullanalım.

$kullanici = new Kullanici();
$kullanici->setAd('Can');
$kullanici->setSoyad('Aydoğan');
$kullanici->setYas(21);
$kullanici->getBilgiler();

Gördüğünüz gibi her ayar için yeni bir tanımlama yaptık. Pek pratik bir yöntem değil haliyle.
Sınıfımızı zincirleme yöntemi kullanarak kullanalım.

$kullanici = new Kullanici();
$kullanici->setAd('Can')->setSoyad('Aydoğan')->setYas(21)->getBilgiler();

Gördüğünüz gibi tek tanımlama ile hem ayarlarımızı gerçekleştirdik hem çıktımızı aldık. Peki bunu nasıl yaptık? Cevabı çok kolay setAd, setSoyad ve setYas fonksiyonlarında dönen değer olarak $this değişkenini tanımladık. Yani sınıfımızı kendisini dönen değer olarak döndürüyoruz. Dönen değer sınıfın kendisi olunca her fonksiyonun arkasından yeni bir fonksiyon tanımlamamız mümkün oluyor.

Kategoriler:Php Etiketler:

Googlebot Sitemizi Ne Zaman Ziyaret Etti Öğrenelim

Sunday, 14 Mar 2010 admin yorum yok

Site sahipleri olarak hep merak ederiz Googlebot sitemize ziyaret etti mi ettiyse hangi sayfaları ne zaman ziyaret etti? Bu yazımda bu soruya Php ile cevap vermeye çalışacağım.

Bir ziyaretçi sunucuya istek gönderdiğinde yanında bazı bilgiler de gönderir. Bu bilgiler gelen olarak cookie ve tarayıcı ile ayarlardır. Bu bilgileri görüntülemek için aşağıdaki kodu kullanabilirsiniz.

<?php
print_r($_SERVER);
print_r($_COOKIE);
?>

Eğer yukarıdaki kodu çalıştırdıysanız karşınıza birçok veri listelenmiştir. Biz bu verilerden bir tanesi kullanarak Googlebot’un sitemize ziyaret edip etmediğini tespit edeceğiz. Kullanacağımız değişken $_SERVER['HTTP_USER_AGENT']. Bu değişken  sayfamızı ziyaret eden tarayıcı ile ilgili bilgi veriyor. Googlebot’ları kullandığı tarayıcı ismi olarak  “Googlebot/2.1 (+http://www.google.com/bot.html)” bunu kullanıyor. Bizde bundan yola çıkarak Googlebot’un sitemizi ziyaretini tespit edeceğiz. Tespit ettikten sonra istediğiniz e-mail adresine mail gönderebilirsiniz.
Kodumuz aşağıda:

<?php
if (strpos( $_SERVER['HTTP_USER_AGENT'], 'Googlebot' ) !== false) {
//E-mail gönderiyoruz
mail(
'email@adresiniz.com',
'Googlebot Sitenizi Ziyaret Etti!',
'Ziyaret edilen sayfa:' . $_SERVER['REQUEST_URI'] . ' Ziyaret saati' . date('Y-m-d h:m:s')
);
}
?>

Bu kodu kullandığınız scripte tüm sayfalarda çalışacak şekilde yerleştirirseniz Googlebot’un sitenizi ziyaret zamanına ve hangi sayfaları ziyaret ettiğini öğrenebilirsiniz.

Kategoriler:Php Etiketler:,

jQuery de live() Kullanımı

Wednesday, 10 Mar 2010 admin yorum yok

jQuery daha doğrusu JavaScript ile az çok uğraştıysanız eğer, bir sorunu fark etmişsinizdir. Sayfa ilk yüklendikten sonra eklenen elementleri daha önce eklediğimiz eventler(click, hover…)  tanımaz, tanıması için bu eventleri tekrar çalıştırmamız gerekir. Örnek ile göstermek gerekirse bu durumu.

$(document).ready(function(){
$('p').click(function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi tıklama ile eklediğimiz paragraflara(p) tıkladığımız zaman hiçbir tepki vermiyor oysa sayfamıza ilk yüklenen paragraf(p) den hiçbir farkı yok. Bu sorunu aşmak için eklediğimiz event’i tekrar çalıştırmamız gerekiyordu daha önceden.
jQuery 1.4.0 da gelen live() methodu ile artık sayfaya yeni eklenen elementleri tanıtmak için eventleri tekrar çalıştırmamız gerek kalmadı. Şimdi yukarıdaki event’i live() methodu kullanarak tekrar yazalım ve daha iyi anlayalım.

$(document).ready(function(){
$('p').live('click', function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi son eklenen element ile ilk gelen element arasında bir fark yok. Yani ile paragrafa(p) tıklandığında da tıklama sonucu gelen paragrafa(p) da tıklandığında aynı tepkiyi görebiliyoruz. Bunu live methodu ile mümkün kıldık.

Son olarak live methoduna bir bakalım.

.live( eventType, handler )
eventType(Olay tipi): Click, hover, keydown, keyup gibi hangi olaya tepki vermesini belirlediğimiz kısım.
handler(işleyici): Olay gerçekleştiğinde çalışacak işleyici tanımladığımız kısım. Mesela ben örnekte yeni nesne ekledim.

Kategoriler:Javascript, jQuery Etiketler:,