Manşete moden yaklaşım
Manşete moden yaklaşım

Birçok haberi aynı anda yayınlamak zorunda kalan haber siteleri her haberi manşetten verememektedir. Dolayısıyla manşet haberinin sunumu için özel teknikler geliştirirler. Yalnız ne yazık ki önemli Türk haber siteleri manşet haberi sunumunda modern tekniklerden uzaktırlar.Yaptığım bu çalışma haber manşetlerinin modern tekniklerle yani XHTML, CSS ve jQuery kullanarak sunulmasına yöneliktir. Bu tekniklerin kullanımı sayfa bir arama motoru tarafından belleğe alındığında (cachelendiğinde) gereksiz HTML ve diğer programlamaya yönelik kodlar ile cache’i boşuna doldurmamak ve yazının bellekte koddan daha fazla olmasını sağlayabilmek için önemlidir. Yani bu tekniklerin kullanımı “Arama Motoru Optimizasyonu” için kaçınılmazdır.Manşet haberlerinin sunumuna yönelik bu uygulamayı isterseniz ürün sunumuna yönelik veyahut da başka amaçlara yönelik uygulayabilirsiniz. Orasını kullanıcının hayal gücüne bırakarak olaya giriş yapalım.XHTML kodumuz söyle olacak. Burada manşet haberlerini ve resimlerini içeren bir liste görmektesiniz.


Yukarıdaki kodumuzu aşağıdaki CSS ile şekillendirmemiz gerekmekte. Burada amacımız liste elemanlarının imajlarını solda, bağlantıları ise belli bir büyüklükte sağda liste şeklinde tutmamız gerekiyor. Listedeki aktif elemanın imajını gösterip, diğer liste elemanlarının imajlarını gizliyoruz. Bunu tam olarak CSS ile yapamıyacağız, o yüzden jQuery ile daha sonradan aşağıda yazacağımız işleve ihtiyacımız olacak.a {color: white;text-decoration: none;}ol {width: 306px;min-height:110px;list-style: none;position: relative;margin: 0;padding: 0;}ol li {}li img {position: absolute;visibility: hidden;top: 0;left: 0px;}.current img {visibility: visible;}.current a {background: black;}li p a {background-color: #999;width: 150px;height: 27px;padding: 5px 3px 4px 7px;font-family: Verdana;font-size: 11px;line-height: 1.1em;list-style: none;float: right;border-bottom: 1px solid white;}img {border: 0;}#headlines {}
Şimdi ise uygulamayı jQuery ile işlevsel hale getiriyoruz.

Uygulamanın çalışan haline bakmak için tıklayınız.