Tarih: Mart 31st, 2010 | Yazar: admin | Kategoriler: HTML5 | Etiketler: tag | 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
- DOCTYPE
- Charset
- Header
- Nav
- Aside
- Article
- Figure
- Hgroup
- Section
- Address
- 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 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>
İç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.
Tarih: Mart 29th, 2010 | Yazar: admin | Kategoriler: Javascript, jQuery | Etiketler: ajax | 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
Tarih: Mart 20th, 2010 | Yazar: admin | Kategoriler: Php | Etiketler: oop | 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.
