Rastgele değişen başlık resmi ve XML’den veri okuyan duyurular
Geçen hafta felsefe profesörü Ali Osman Gündoğan‘ın kişisel web sitesini yayına aldım.
Tasarımını ve kodlamasını yaptığım web sitesinde kullandığım kodlardan ikisini paylaşmak istiyorum.
1. Rastgele değişen başlık resmi:
Elinizde bol miktarda görsel var ama sayfa sayınız toplamda 5-6. Bu durumda tüm görselleri değerlendirebileceğiniz iyi bir çözümdür rastgele görseli getirmek.
Aşağıdaki kodu PHP’nin rastgele sayı üreten fonksiyonundan faydalanarak yazdım.
Kodla yapmak istediğim, Ali-Osman-Gundogan-1.jpg,Ali-Osman-Gundogan-2.jpg, … şeklinde standart olarak adlandırdığım görselleri rastgele gösterebilmek.
<img src="Images/Ali-Osman-Gundogan-<?php echo(rand(1,6)); ?>.jpg" />
2. XML’den veri okuyan duyurular:
Bu ihtiyacım için Dynamic Drive’ın yayınladığı DOM XML ticker scriptini kendi tasarımıma uyarladım.
Bir XML ve JavaScript dökümanından oluşan bu yapının saf çıktısını burdan görebilirsiniz.
Siz de bu kodu kendi çalışmanız için uyarlamak isterseniz tek yapmanız gereken
var tickercontainer='<div id="container" style="background-color:#FFFFE1; width:150px;height:120px;font:normal 13px Verdana;"></div>'
satırıyla biraz oynamak. Bu örnekte arkaplan rengi #FFFFE1, genişliği 150px, yüksekliği ise 120px, fontu da 13px boyutunda Verdana.
Kendi kullandığım kodda div’imin özelliklerini css belgemde tanımlamak istediğim için ve adının da sitedeki kod bütünüyle uyumlu olmasını tercih ettiğim için yukarıdaki kod satırını
var tickercontainer='<div id="xml-Duyuru"><p></p></div>'
olarak değiştirdim. Script “container” id’sini baz alarak çalıştığı için de getElementById(“container”) yazan tüm satırları getElementById(“xml-Duyuru”) olarak değiştirdim. css belgemde de xml-Duyuru id’li div’imi de aşağıdaki gibi tanımladım.
#xml-Duyuru{ height:100px; margin-bottom:25px;font-size: 1.2em; line-height:1.5em;}
ticker.xml belgesinde görünmesini istediğim duyuruları yazdım. Yazıların görünme zamanı kısa geldiği için duraklama süresini de
Kendi siteme uygun modifiye ettiğim haliyle, DOM XML Ticker’ın çıktısı bu hale geldi.
Ekleme (30 Eylül 2009): Aynı kodu Clubcrema için kullandım.
Bir arama yapıp da bulamayınca farklı farklı kişiler sizin için aradığınızı bulamıyor:)
bence güzel çalışmlar… başarılarınıjn devamını dilerim… Trial Services XHTML – CSS Şablon ile bir çalışma yaptım.. xhtml ve css2 süper… sabırsızlıkla css3 ü bekliyorum… paslaşmak isterim… kolay gele…
Teşekkür ederim Abdülkadir Bey, size de kolay gelsin.
Tasarım gerçekten hoş olmuş başarılı bir çalışma olmuş eline sağlık, yazı font’unu kendin mi seçtin yoksa site sahibinin isteğimiydi? daha çekici fontlarda kullanabilirdin..
Teşekkür ederim, beğenmenize sevindim İbrahim Bey. Tasarımda tüm tercihler bana aitti. Mutlaka başka fontlar da uygulanabilir ama Eras ailesine karşı bir zaafım var:) Siz olsanız hangi fontu kullanırdınız?
Rica ederim, ben genelde Tahoma kullanıyorum Gözdecim, 12px : ) benim için standart sayılabilir fakat projeye göre değişiyor tabiki. Yazılarda dediğim gibi Tahoma kullanıyorum genelde fakat grafiklerde birçok yazı fontu kullanıyorum. İsmini bilmiyorum araştırmadım fakat WordPress’in yönetim panelinde kullanılan yazı fontu beni cezbetti diyebilirim : )
Öncelikle ellerinize sağlık.ilk örnek basit ama zekice birşey olmuş.xml den veri okunmasıda gayet güzel bir çalışma veritabanı+programlama kullanmayarak yapılacak olan siteler için çok kolayık sağlayacaktır.Ayrıca flash ile xml’den veri okunmasıda yerine göre işlerinizi büyük ölçüde kolaylaştırır.
çalışmalarınızın devamını dilerim…Kolay gelsin.
Yorumunuz için teşekkür ederim Mesut Bey. Bu site çok fazla güncelleme gerektirmediği için kısa bir xml işimizi görecekti, bu yüzden dediğiniz gibi veritabanına bilgi girişi ve programlama yapmaksızın ihitiyacımızı karşıladı. Size de koay gelsin…
Frontend için gayet güzel bir mantık. Yalnız imageların varlığının kontrol edilmesi hata mesajı almamak için gerekli bir şey.
<img src=”Images/Ali-Osman-Gundogan-.jpg” />
Kısmında şöyle bir değişiklik işimizi görecektir.
<?php
$file = ‘Images/Ali-Osman-Gundogan-‘. rand(1,6) .’.jpg’;
if (file_exists($file)) {
echo ”;
}
?>
Evevt Murat Bey,
Ben işin hata kısmını düşünmemiştim 🙂
Ekleme için teşekkürler.
İlk örnek çok zekice 🙂 En kısa zamanda ben de bu konuda bir yazı hazırlayacaktım. Sizin kullandığınız yöntem daha basitmiş, onu kullanayım bari.
Gelelim yaptığın tasarım hakkındaki eleştirilerime. Öncelikle Images/menu.jpg yolunda bulunan resmi png formatında hazırlaman daha hoş olacaktır. Dikkat edersen jpg ile resmin kalitesi biraz düşmüştür. Özellikle menüdeki oklarda bir bozukluk var. Ayrıntılar çok önemlidir. Gözüme pek hoş gelmedi açıkcası. 🙂
Yazıtıpi ve renk seçimleri hiç iç açıcı değil. 🙂 Farklı yazıtipi kullanmak lazım fakat bu sadece okumayı zorlaştırır. Belki müşterin bir şey dememiştir ama yazıtipi konusunda standartların dışına çıkmamak en iyisi. Özellikle yazının tamamını bu şekilde okunması çok zor bir font ile kodlamak pek iyi olmaz. Farklı yazıtiplerini başlıklarda kullanabilirsin. Bu şekilde fazla sayfası olmayan web 1.0 tarzı siteler için başlıkları photoshop’ta istediğin fontla yazıp, siteye resim olarak koyabilirsin.
Renk seçimleri konusunda http://colorschemedesigner.com/ adresine bakabilirsin. Hatta her an elinin altında olsun.
Sitede grafik kullanırken en başta söylediğim gibi .jpeg yerine .png kullanmak daha güzel olur. Çünkü ikisinin arasındaki fark .jpeg’de boş alanı beyaz olarak algılarken .png’de boş alan boş olarak algılanır. Bu da resmin boyutunu haliyle azaltır. Ayrıca png’de resimler daha düzgün (smooth) çıkar.
Yine bu site için konuşayım. Yazı içinde yer alan linklerin daha belirgin bir renk olması (kırmızı, mavi tonları) daha iyi olacaktır.
Bunlar yapıcı eleştirilerdir. Darılmaca, gücenmece yok!
@Fikirbozan : Eleştirileriniz için çok teşekkür ederim. Png kullanımı konusunda haklısınız ama genelde boyutu artırdığı için yoğun gradient kullanımında geçişleri yumaşatması için kullanıyorum. Gerçi Ali Osman hocanın sitesi çok büyük bir site olmadığı için kullanmak sorun olmazdı hatta bir ara fırsat bulursam bu öneriyi dikkate alabilirim 🙂
Font kullanımında ise -belki de standart fontlardan sıkıldığım için- deneme yanılmalar yapıyorum. Arıal ve Verdana’ya sıkışıp kalmış gibi hissettiğim için fırsat buldukça farklı fontlar kullanmaya çalışıyorum. Ama kullanıcı gözüyle yazıların nasıl yorumlandığını bilmek benim için önemliydi. Teşekkür ederim.
Kendi siteme gelince, baştan aşağı değiştirme planım olduğu için artık pek bir değişiklik yapmıyorum. Ama malum terzi kendi söküğünü dikemezmiş. Aylardır değişemedi gitti 🙂