Bu çalışma, HTML tabanlı web sitelerini kolayca güncelleyebilmek amacıyla ortaya çıkmıştır. İlk iki sürümde site genelinde tamamen XML ve XSL kullanılmıştır. Bu sürümde ise web sitelerinde sıklıkla kullanılan haber, duyuru ve fotoğraf albümleri için tek bir XML dosyası basit bir veritabanı olarak düşünülmüştür. Bu XML dosyası, Jquery ile parse edilerek web sitesinde kullanılmaktadır. Çalışma aynı zamanda AJAX kullanımına örnek teşkil etmektedir.
ÖZELLİKLER
- Haber, duyuru ve fotoğraf albümleri için ortak veri girişi
- ... [devamı] özelliği
- Otomatik fotoğraf linkleri oluşturma
- Fancybox efektleri
- daha fazla içerik >> özelliği
- Haber Arşivi ve Fotoğraf Albümleri'nde yıllara göre gruplama
- Basit Facebook 'loading' animasyonu
- Sade tasarım
DEZAVANTAJLARI
- Dinamik içerikten dolayı indexleme problemi (Google ...)
- HTML kodlama
- Basit düzeyde XML bilgisi
YAPI
Çalışmada iki temel dosya bulunmaktadır: items.xml, items.js
- items.xml: Haber, duyuru ve fotoğraf albümleri verilerini içerir.
- items.js: items.xml dosyasını parse eder ve ana sayfaya HTML verisi döndürür.
KULLANIM
items.xml'deki bir öğe (haber, duyuru ya da album) için kullanım kalıbı ve tam parametreleri şu şekildedir:
[sourcecode language="xml"]
<item id="" type="news|album|anno" subject="" date="dd.mm.yyyy" mainphoto="" mpwidth="" mpheight="" photocount="" active="1|0" main="1|0" rel="news|album">
<![CDATA[
...HTML Kodu...
]]>
</item>
[/sourcecode]
PARAMETRELER
- @id : Öğe numarası. Aynı zamanda ilgili fotoğrafların yer aldığı klasör adı (/images/items/@id)
- @type : Öğe türü. Haber için 'news', fotoğraf albümü için 'album', duyuru için 'anno'
- @subject : Başlık
- @date : Tarih. Format: dd.mm.yyyy
- @mainphoto : Manşet fotoğrafı
- @mpwidth : Manşet fotoğraf genişliği (Varsayılan 200px)
- @mpheight : Manşet fotoğraf yüksekliği (Varsayılan 140px)
- @photocount : Otomatik olarak linki oluşturulacak fotoğraf sayısı (Sadece .jpg)
- @active : Öğenin site genelinde yayımlanıp yayımlanmayacağı
- @main : Öğenin ana sayfada gösterilip gösterilmeyeceği
- @rel : Öğenin aynı zamanda haberlerde veya albümlerde yer alıp almayacağı. Haberler için 'news', fotoğraf albümleri için 'album'
items.xml'de yer alan örnek bir haber aşağıdaki gibidir:
[sourcecode language="xml"]
<item id="8" type="news" subject="Lorem Ipsum Nedir?" date="25.12.2011" mainphoto="3.jpg" photocount="4" active="1" main="1" rel="album">
<![CDATA[
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. </p>
]]>
</item>
[/sourcecode]
Habere ait 4 fotoğraf bulunmaktadır ve bunlara ilişkin 4 link oluşturulacaktır:
- /images/items/8/1.jpg
- /images/items/8/2.jpg
- /images/items/8/3.jpg
- /images/items/8/4.jpg
'3.jpg' manşet fotoğrafıdır. Haber ana sayfada gösterilecektir. Haber aynı zamanda fotoğraf albümlerinde de yer alacaktır.
HTML KODU
Öğe için yazılacak HTML kodu, CDATA bloğu içinde yer almalıdır. Örnek CDATA bloğu kullanımı yukarıdaki örneklerdeki gibidir. Metin içinde [...] kullanılarak '... [devamı]' özelliği verilebilir.
FANCYBOX KULLANIMI
Fancybox efektleri, .jpg, .gif ve .png uzantılı resimlere verilen linkler ile çalışacak şekilde kodlanmıştır. Örnek kullanım için items.xml dosyasını ve ayrıntılı bilgi için http://fancybox.net sitesini inceleyiniz.
EKRAN GÖRÜNTÜLERİ
DOSYALAR
Kaynak Kodu: Simple_Website_With_XML_v3.5_TR
