Web Tasarımda Sıkça Rastlanan Hatalar ve Tavsiyeler

Web 2.0,  netten kazanç, Ajax, user interaction, mobileweb vs. derken profesyonel olarak çalıştırılan pek çok sitede dahi büyük hatalar görmekteyiz. Uzun zamandır aklımda olan bu konuyu işini düzgün yapmak isteyenler için derliyorum.

1) Landing page hataları: Site açıldığında yüklenen ve ziyaretçiyi kendine çekecek olan sayfalarda gereksiz reklamlar, flash animasyonlar,popuplar kullanıldığını görüyoruz. Bunlar eskide kaldı sanıyorsanız yanılıyorsunuz. Ziyaretçiyi sonsuza kadar kaybetmenin veya size olan güvenini peşinen sağlamak istemiyorsanız bu konuya dikkat edin. Bir sinema filmi sitesi flash animasyon ile başlarsa çoğu kişi bundan sıkıntı duymaz ama bir restoranın adresini almak için flash intro görmek zorunda kalıyorsak burada problem var demektir.
İyi bir yüklenme sayfası ziyaretçiyi mümkün olan en çok içeriğe en rahat şekilde erişecek şekilde tasarlanmalıdır. Bırakın ziyaretçiniz siteyi kendi yorumuyla incelesin. Siz küçük nüanslar ile dikkat çekmek istediğini içeriğe zaten yönlendirebilirsiniz.

2) Sayfa yüklenme süreleri: Gerekli gereksiz onlarca bilgiyi, optimize edilmemiş grafikleri ve aşırı büyük reklamları ziyaretçinize dakikalarca yüklemek zorunda bırakmayın. Dial-up veya düşük hızlı bağlantıların olduğu zamanlarda site optimizasyonu çok önemli bir konuydu. Şimdi daha geniş hızlı internet bağlantıları yüzünden tasarımcılar megabytelarca site yükletmenin sıkıntı olmadığını düşünüyorsa yanılıyorlar. Zaten site yüklenme kriteri de Google Adwords için bir etmen olmasından bunun çok önemli olduğunu tahmin ediyor olabiliriniz.

3) Aşırı flash, javascript uygulamaları: Firefox veya Chrome ne kadar stabil olursa olsun gereksiz veya yanlış programla ile hazırlanan flash veya javascript uygulamaları yüzünden çökebilirler veya donmalara neden olabilir. Ne olursa olsun bu uygulamaların bellek tüketimi olduğunu unutmayın.

4) Mobil dostu olmayan siteler: 3G ve yaygınlaşan Wi-fi ve akıllı telefonlar sayesinde siteler artık sadece bilgisayarlardan görüntülenmiyor. Tasarlanan sitelerin en azından birkaç mobil platformda test edilmesi hem ziyaretçilerinizi memnun eder hem de toplamda site kalitenizi yukarı çeker.

5) Navigasyon hataları: İnsanların sitenizi bulmaca çözer gibi çözmesini beklemeyin. Aradıkları içeriğe çapraşık linkler ile rahat biçimde ulaşmalarını sağlamalısınız. Bunun için Wikipedia örneğine bakabilirsiniz.

6) Yanıltıcı içerikli reklamlar: Ziyaretçilerin gözünde değer kaybetmek istiyorsanız inanılmaz veya alakasız veya devasa reklamlar kullanmanızda sakınca yok.

7) Vaad edilen ama mevcut olmayan içerik veya hizmetler: Kendini aldatılmış hisseden bir ziyaretçi sitenizi bir daha hatırlamayacak Google Aramalarında görse bile sitenize girmeyecektir. Mesela legal MP3 download imkanı sunuyorsanız emin olun dosya kolay biçimde erişilebilir olsun. Bir siteyi başarılı kılan en büyük sebep ne renkler ne grafikler ne de kullanılan teknolojidir. Basit de olsa içeriği zengin ve kaliteli olan siteler her zaman başarılı olmuştur. Çoğu site başarıyı bir günde yakalamaz. Bunun için içeriği zamanla geliştireceğinizi unutmayın.

8) Çalıntı içerik: Çoğu site sahibi sağdan soldan topladığı bilgiler ile site yapmaya çalışıyor. Bu şekilde yapılan siteler genellikle kendini belli ediyor ve bu zaaf yüzünden büyüyemiyor. Buna birbirinin kopyası olan alışveriş siteleri örnek verilebilir.

9) Aşırı zorlama tasarımlar: Güzel ve orjinal tasarım güzeldir ama sadece tasarlayanın anlayacağı sayfaların 1 kişiye yönelik olduğunu unutmayın.

Bu konuda size yardımcı olabilecek en önemli şey siteyi tarafsızlığına güvendiğiniz birine inceletmeniz ve ondan gelecek önerileri dikkate almanız olacaktır. Kendiniz de site içinde gezerken nerelerde zorlandığınızı neyin gereksiz olduğuna dikkat etmelisiniz. Web tasarım sadece tasarım değildir ve kullanılabilirliğin çok önemli olduğunu unutmayın.Yeni imkanlardan faydalanırken uç teknolojiyi kullanacağım diye genel nüfusun kullanamayacağı siteler yapmamalısınız. Bu sizi yenilik arayışından yıldırmamalı ve kalıplara sıkıştırmamalı ama bazı genel kurallar olduğunu da unutmayın.

Google Sitenizi Nasıl Görüyor?

Sitenizi Google'a ekledikten sonra istediğiniz sonuçlara ulaşamadıysanız muhtemelen pek çok çözümü denemişsinizdir.

Ancak arama motoru optimizasyonunda (SEO) en önemli konulardan biri sitenin görünürlüğüdür. Bu nedenle bir arama motorunun siteyi nasıl gördüğünü bilmek gerekir.

Buradan ulaşabileceğiniz izleyici, Lynx tarayıcı altyapısını kullanarak sitenizin düz metin halinde nasıl göründüğünü ve hangi linklerin bulunduğunu gösteriyor.

Optimizasyon hatalarını görmek için ilk olarak bu adımı uygulamanızı tavsiye ederim.

Adwords Kalite Puanına Sayfa Yüklenme Süre Kriteri

Google Adwords'da reklamların dağıtımında kullanmak üzere quality score (kalite puanı) adında bir puan hesaplanıyor. Bu kriter reklamların daha doğru yayınlanması ve daha iyi sitelerde daha çok reklam kullanılmasını sağlayan bir faktör.

Aşağıdaki linklerden konu hakkında ayrıntılı bilgi almanız mümkün.

'Kalite Puanı' nedir ve nasıl hesaplanır?

İçeriksel hedefli reklamlarım için bir Kalite Puanı hesaplanır mı?

Kalite Puanımın ne olduğunu nasıl bilebilirim?

 

Adwords'e yakın zamanda eklenecek yeni kriter ile Landing page adı verilen açılış sayfası (linkin yönlendiği sayfa) yükleme süresi de kalite puanının hesaplanmasında etkili bir unsur olacak.

Yüksek kalite skoru, reklamların daha iyi konumlarda gösterilmesini ve minimum tekliflerin düşük olmasını sağlayan bir unsur.

Sayfa yüklenme süresinin bu unsura dahil edilmesiyle daha hızlı yüklenen sitelerin daha yüksek kalite puanı olacak. Böylece daha iyi konumlarda ve daha düşük ücretlerle reklamların yayınlanmasını sağlayacak.

 

İçeriği aşırı şişmiş içerikli reklam verenlere duyurulur.

Google Charts Hizmete Girdi

Google yeni bir hizmet ile karşımızda. Yeni bir API hizmeti olan Google Charts ile web üzerinde kolaylıkla chart denilen grafikler elde edebiliyor, sitemizde kullanabiliyoruz.

Çıktısı PNG  resim olan API, özel bir URL karşılığında size istediğiniz grafiği oluşturuyor. Böylece sadece resim kaynağını değiştirirek farklı grafikler elde etmek mümkün oluyor.

Widget olarak da tanımlanabilecek bu ürün çizgi, pasta, sütun gibi pek çok popüler grafik türünü destekliyor.

Tüm iş URL'de bittiği için sadece URL üzerine farklı parametreler yazarak grafiği oluşturmak mümkün. Örneğin bu yazının üst köşesindeki basit grafik için
http://chart.apis.google.com/chart?cht=p3&chd=t:70,50&chs=400x200&chl=A|B&chtt=Baslik&chco=7AD4EA,DBDC62 
gibi bir URL yeterli. İsterseniz bu URL'yi kendi tarayıcınızda açabilir ve grafiği görebilirsiniz. İsterseniz web sayfasında resim kullanır gibi IMG tagının SRC özelliğine bu URL'yi vererek web sayfanıza gömebilirsiniz.

Örnek URL'de de görebileceğiniz gibi parametreler grafiği düzenlemeye yarıyor. Örneğin chtt parametresi chart başlığı oluyor.
chtt=Baslik gibi bir kullanım ile örnekte gördüğünüz başlık sonucunu elde ediyorsunuz.
chco=7AD4EA,DBDC62 gibi bir kullanım ise size charttaki renkleri düzenleme şansı tanıyor. (Renk kodları hexadecimal)
chl=A|B ise chart legend denilen alan etiketlerini belirlemeye yarıyor.
chs=400x200 ile boyutları
chd=t:70,50 ile değerleri
cht=p3 ile grafik türünü belirliyoruz.

Daha pek çok parametre ve grafik çeşidi mevcut.
Parametreler & ile birbirinden ayrılıyor. Parametreler içindeki seçenekler ise gerekirse | ile ayrılıyor.

Tahminim Google veya serbest geliştiriciler URL'yi daha kolay  oluşturmak için bir görsel arabirim yazacaktır. Diğer Google ürünlerine de grafikler için URL çıktısı özelliği katılabilir.

Resim sonuçlu bir URL olması nedeniyle karmaşık javascript kullanımına gerek kalmadan dinamik olarak kullanmak da mümkün olabilecektir.

Google'ın Office ürünlerine rakip olarak sunduğu ofis paketinde charts özelliği bulunmakta. Web tabanlı bu hizmet ise ciddi anlamda bir eksiği gidermekte. Çeşitli dillerde yazılmış grafik paketlerini web sayfalarına entegre etmek mümkün olsa da bu paketler ya pahalı ya da yetersiz kalıyordu. Bu API ile yakın zamanda pek çok site daha zengin bir içeriğe kavuşacak. Bu chartları artık sık sık göreceğimiz kesin.

API dökümantasyonunda çeşitli grafik türleri için kullanım yöntemleri anlatılıyor. Kullanıcı başına günlük 50.000 grafik sınırı konulmuş. Bu da yaklaşık 2 saniyede bir grafik çizilmesine olanak sağlıyor.

Google Link Satan Sitelere Karşı

Google'da üst sıralarda yer almak ve PageRank takıntısı olan webmasterlar link satışından haberdardır.

Yüksek Pagerank'li sitelere para karşılığında verilen linkler, link atılan sitenin PageRank'ini artırdığı düşünülür. Bu kısmen doğru bir bilgidir ve etkili olabilir.

Ancak Google bu tür uygulamaları kesinlikle kullanım ihlali kabul etmekte. Bunu çok uzun zamandır belirtmelerine rağmen halen link satan siteler bulunuyor. Google yeni bir uyarı ile bu tür sitelerin yasaklanabileceğini veya Pageranklerinin düşürülebileceğini açıkladı.

Halen Pagerank'in gereksiz olduğu yönünde tartışmalar çeşitli platformlarda devam etmekte. Google belli ki Pagerank'ten vazgeçmeye niyetli değil ve hatalarını giderip daha etkili kullanmanın yollarını arıyor. Bu nedenle pagerank'in önümüzdeki dönem de SEO konularını işgal etmesi olası.

Eğer sitenizde çok fazla harici link bulunuyorsa, a tagları içerisine "rel=nofollow" ekleyerek Google'ın bu linkleri ihmal etmesini böylece ceza alma ihtimalinizi ortadan kaldırabilirsiniz.

AdSense Değişiklikleri Kodsuz Olacak

Sitelerinde AdSense reklamları gösterenler en ufak değişiklik için kod bazında çalışmak gerektiğini bilir. Her reklam birimi için tek tek ayar yapmak gerekebilir.

Resmi AdSense blogunda yayınlanan bu habere göre artık değişiklikler Adsense sitesinden yapılacak. Yani her değişiklik için site kodlarıyla uğraşmak gerekmeyecek. Adsense üzerinde yaptığınız değişiklik sitenize yansıyacak.

Widget mantığı ile çalışan Adsense reklam birimleri için bu değişiklik henüz kullanımda değil. Kullanıma girdiğinde Adsense üzerinde "Adsense Kurulumu" sekmesi altından "Reklamları Yönet" şeklinde ulaşılabilecekmiş.

Açılır AddThis Menüsü

Site, blog veya mesajlarımızı çeşitli sosyal veya kişisel paylaşım siteslerine ekleyebiliyoruz. Örneğin bu mesajın altında gördüğünüz bookmark düğmesini kullanarak bu mesajı çeşitli şekillerde kaydedebilir, paylaşabilirsiniz.

Addthis.com bu tür siteleri paylaşım sitelerine ekleme işini tek bir çatıda topluyor. Böylece bu hizmeti veren onlarca site için tek tek uğraşmadan düğmelendirme şansımız oluyor.

Addthis'in en çok hoşuma giden özelliği açılır menü ile bu düğmelerin başka sayfayı ziyaret etmeden eklenebilmesi.

Wordpress için bunu plugin eklentisi ile yapmak mümkün. Bu adresten indireceğiniz küçük bir dosya ve uygulayacağınız talimatlar ile bunu gerçekleştirebilirsiniz.

Yeni Blogger'da da kullanmanız mümkün.

Bunun için

• Blogger'da Şablon menüsüne girin


• HTML'yi düzenleyi seçin


• Widget Şablonlarını genişlet seçeneğini işaretleyin


• Kod bölümünde <div class='post-footer'> etiketini bulun. (Bu her mesajın altında gözüken katmanın etiketi)


• <div class='post-footer'> ile </div> arasındaki bölüme aşağıdaki kodu yapıştırın
  <script type="text/javascript">
  addthis_url = '<data:post.url/>';
  addthis_title = '<data:post.title/>';
  addthis_pub = 'kullaniciadiniz';
  </script><script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12"></script>
  
  Not: kullaniciadiniz yazan yere addthis.com kullanıcı adınızı yazabilirsiniz. Ancak gördüğüm kadarıyla bunu yazmadan da çalışıyor.
  
  Not: Bu kodu belirttiğim yer içinde istediğiniz yere yapıştırabilirsiniz ama bu bölümde tarih, etiket vs gibi başka şeyler de olduğu için yapıştıracağınız yere göre düğmenin gösterim yeri değişecektir.


• Ardından ŞABLONU KAYDET düğmesine basın ve düğme mesajlarınızın altında gözükmeye başlasın.

Şablon üzerinde değişiklik yapmadan önce yedeklemenin önemli olduğunu da belirtmeliyim. Bir şablon içeriğini kopyalayıp bir metin dosyası içine kaydederek bu işi halledebilirsiniz.

Delicious Kullanarak Dinamik Link Listeleri Yapmak

Blog veya web sitenizde belli aralıklarla güncellediğiniz link listeleri kullanıyorsanız bu ipucu işinizi bir hayli kolaylaştırabilir. Bu işlem için Delicious'tan faydalanacağım.
Delicious bir online bookmark sitesi. Bu tür siteler hakkında bilgi almak istiyorsanız daha önce yazdığım bu yazıyı inceleyebilirsiniz.

Ben ileride genişletmeyi düşündüğüm ve bu sayfada listelediğim online oyunlar için örnek bir anlatım yapacağım.

Öncelikle yapmanız gereken Delicious üzerinde bir hesap açmak. Üyelik ücretsiz. (Delicious bir Yahoo hizmeti

Ardından; http://del.icio.us/post/ adresinden istediğiniz siteleri delicious'unuza ekleyin.

Ardından küçük ayrıntıları girmelisiniz. URL önceki formda eklediğiniz adres. Description URL'nin başlığı olarak gözükecek yazı. Bunu girmek zorundasınız. Notes kısmında link hakkında bazı bilgileri girmeniz mümkün. Tag ise linki ayırt etmenizi sağlayacağınız etiketler.

Burada en önemli nokta, tag için kullanacağınız sözcükler. Eğer "oyun" gibi çok genel bir tag girerseniz ileride ekleyeceğiniz oyun taglı tüm linkler bu listenizde gözükecek. Halbuki siz oyun tagı ile gerekirse Halo, Bioshock gibi video oyunlarını da delicious'unuza ekleyebilirsiniz.

Bu nedenle ben onlineoyun tagı kullanıyorum. (Birleşik olmasının nedeni Delicious'un iki sözcükten oluşan taglara izin vermemesi) Bu tag kullandığım tüm siteler o listemde gözükmesi benim için uygun.
Ardından isterseniz taglar arasında boşluk bırakarak oyun online web flash gibi tagler de ekleyebilirsiniz. Önemli olan en az bir tane özel tag olması.

Bu şekilde linkleri ekleyerek listenizi oluşturun. Şimdi sitenize nasıl ekleyeceğimiz kısmına gelelim.

İki yöntem var. Biri Delicious'un Linkrolls özelliği diğeri ise RSS ile ekleme. RSS ile ilgili olan yazıyı daha altta yayınlacağım. O biraz daha gelişmiş bir yöntem ve daha farklı alanlarda da kullanılabilir. İlk olarak anlatacağım daha hızlı sonuç verecektir.

Bunun için Delicious'ta sol üst köşedeki Settings linkinde açılan sayfada, en sağda Link Rolls linkine tıklıyoruz.
Burada listemizin görünüm ayarlarını yapabiliyoruz. Güncelleme yaptıkça sağdaki ön izlemede değişiklikleri görebilirsiniz.

• Show ____ items gösterilecek link sayısını belirler. Büyük bir rakam yazarsak ileride listemiz uzasa bile tüm linklerimiz gözükür. Ama eğer çok uzarsa bu kez sayfada taşmalar yaratabilir.
• Title kutusuna bir başlık yazalım. Mesela ben Online Oyun yazıyorum.
• Show tags kutusunu işaretlersek onlineoyun gibi etiketler linklerin yanında gözükecek. Ben bunu kapatıyorum.
• Show notes kutusunu işaretlersek yazdığımı açıklama linkin altında gözükecek. Ben bunu açıyorum. Daha dar alanda daha çok link göstermek isterseniz bunu kapatabilirsiniz.
• Icon başlığın yanında gözükecek. İstediğiniz birini seçin veya none ile kapatın.
• Bullets linklerin başında gözükecek. Ben açıklamaları biraz daha ayrı göstermek için bunu kullanıyorum. İsterseniz bunu da none ile kapatın.
• Sort chronologically/alphabetically tarih veya alfabetik sıralamayı belirler. Benim listemde tarih önemli olmadığı için alfabetik seçiyorum.
• Only these tags BURASI ÇOK ÖNEMLİ, Sadece gözükmesini istediğim etiketi yazıyorum. Benim örneğimde onlineoyun. Bunu biraz yazmaya başlayınca öneri olarak listede geliyor. Bunu seçiyorum. Bunu seçmezseniz tüm linkleriniz gözükür.
• Alttaki diğer iki kutu ise delicious kullanıcı adınızın ve network davetiye linkinizin gösterilip gösterilmemesini ayarlıyor. Ben bunları kapatıyorum.

Sonra yukarıdaki kodu kopyalayıp HTML kodu olarak listenin gözükmesini istediğim yere yapıştırıyorum.
Ve işte sonuç aşağıda.

Delicious RSS hizmeti veriyor. RSS'in ne olduğu hakkında yazdığım bu yazıdan temel bir bilgi alabilirsiniz. Ama bu konuda ayrıntılı bilgiye ihtiyacınız olmayacak. Listenizin RSS adresi http://del.icio.us/rss/leventdal/onlineoyun gibidir. Yani http://del.icio.us/rss/kullanıcıAdı/özelTagınız şeklinde.

RSS olarak siteye eklemek için bir RSS reader'a ihtiyacımız var. Eğer web yazılımınızda bir RSS reader script var ise ister mesajlara ister sayfanızın belirli bölümlerine listenizi ekleyebilirsiniz.

Bilmiyorum veya reader yok diyorsanız harici bir RSS reader kullanacağız.

Ben WidgetBox'un sunduğu basit ama özelleştirilebilir bir RSS reader kullanacağım. Daha özel ve işlevsel RSS readerlar kullanmanız da mümkün.

http://www.widgetbox.com/widget/rss adresinden ayarları aşağıdaki gibi yapın.

Burada,

• Name: Widget Adı.
• Width: Genişlik
• Height: Yükseklik (eğer çok kısa yaparsanız kaydırma çubuğu çıkar)
• Feed URL: Delicious RSS adresinizi yazacağınız bölüm
• Title: Linklerin üst kısmında gözükecek başlık
• Max Items: Gözükecek maksimum link
• Link Color: Linklerin gözükmesini istediğiniz renk
  anlamına gelir.

Tüm ayarları yaptıktan sonra "Get Widget" düğmesine basın.

Karşınıza gelen pencerede bazı blog yazılımlarını göreceksiniz. Eğer bunlardan birini seçerseniz mesaja değil sayfa bileşeni olarak eklemeniz mümkün. Örneğin sayfanızın kenarındaki sütunlardan birine ekleyebilirsiniz.

Yok mesaja ekleyeceğim diyorsanız, "Get Widget Code"a tıklayın. Karşınıza çıkan kodu sayfanızın kod bölümüne yapıştırın.

Bu şekilde sadece Delicious üzerindeki linklerinizi güncelleyerek listenizi yenileyebilirsiniz. Ayrıca listeniz RSS formatında olduğu için pek çok farklı yerde de kullanmanız mümkün.
RSS listesinde çok daha kapsamlı işlem yapmak için Yahoo Pipes veya FeedXI gibi bir feed işleyici kullanabilirsiniz. (Alfabetik sıralama, bir çok RSS'i birleştirme vb.)

FeedXI: Feedburner ve Ötesi

FeedXI RSS gibi beslemeleri işlemek ve sunmak için bir hizmet. Feedburner'ı andırıyor.  Ancak Feedburner'dan pek çok artıları var. Bunlardan belki de en önemlisi birden çok beslemeyi hatta başka pek çok veriyi birleştirerek sunabilmesi. FeedXI'a geçmeden önce isterseniz Feedburner ile ilgili bu yazımı, RSS birleştirmek için kullanabileceğiniz Yahoo Pipes ile ilgili bu yazımı okuyabilirsiniz.

FeedXI bir yerde Feedburner ile Yahoo Pipes'ın bazı temel özelliklerini birleştiriyor. Sunduğu işlevler şunlar:

• Besleme (Feed) ve OPML (Feed listesi) editörü
  Beslememiz için çeşitli kaynaklardan veri çekebiliyoruz. Bunları yaparken sadece bir kaynak değil bir çok kaynağı eklememiz mümkün.
  FeedXI'ın en güzel özelliklerinden biri, bir besleme içine istediğiniz bir RSS'ten istediğiniz yazıyı ekleyebilmeniz. Bunlara Clipping deniliyor. İster sayfalardan kendiniz buluyorsunuz bunları, isterseniz FeedXI üzerinde arama ile bulduklarınızı ekleyebiliyorsunuz.
  Bir diğer özellik ise Blog arama sonuçlarını da besleme içine ekleyebiliyor olmamız. Google Blog arama, Youtube video arama, Technorati, Flickr, Delicious ve daha pek çok kaynaktan arama sonucunu RSS beslemesi olarak sunabiliyoruz.
  Son olarak da OPML'i besleme içinde yayınlayabiliyoruz. OPML özellikle çok sayıda RSS yayını yapan sitelerin tüm beslemelerini liste olarak sunduğu bir format. OPML'i elle kendimiz de üretebiliyoruz. Yani tek tek öğeleri girmek ve sıralamak mümkün.
  
  Beslemeleri filtrelemek için özellikler de sunulmuş. Örneğin belli uzunluktan fazla olan mesajları, belli tarihten eski besleme öğelerini filtreleyebiliyorsunuz.
  Ama en güzeli bir kaynakta istemediğiniz öğeleri gizleyebilmeniz. Bunu Screen Post seçeneği ile gerçekleştirmek mümkün.
  


• Feedlet Editörü
  Feedlet, FeedXI'in widget için kullandığı isim. 5 değişik feedlet yaratmak mümkün. Bunlar
  RSS Preview: Bir liste halinde RSS başlıklarını gösteriyor
  RSS Reader: Solda başlık sağda içeriği gösteren bir RSS okuyucu
  RSS Badge: RSS okuyucusuna link veren küçük bir düğme
  RSS View: Tek sayfada uzun bir liste gibi tüm RSS içeriğini gösteriyor
  OPML Reader: OPML dosyalarını göstermeye yarıyor
  
  Widget işlevi gören bu feedletlerin pek çok özelliğini özelleştirebiliyoruz. Pek çok özelleştirilmiş widget'ın dahi FeedXI'ın sunduğu özelleştirme seçeneklerini sunmadığını belirtmek lazım.
  


• Page
  Bu da beslemeleri ve FeedXI'ın izin verdiği diğer öğeleri web üzerinde sunabildiğimiz bir sayfa uygulaması. Sadece FeedXI da yaptığımız değil webden herhangi bir RSS beslemesini sayfamıza ekleyip sunmamız mümkün. Daha önce bahettiğim gibi Youtube gibi arama sonuçlarını da koyabiliriz. Böylece hem kendi, hem beğendiğiniz diğer sitelerdeki öğeleri bir sayfa üzerinde sunmanız mümkün oluyor. Bu sayfa feedletler gibi özelleştirilebilir değil. Ama tahminen yakın zamanda bunun için de özelleştirme seçenekleri sunacaklardır.

FeedXI, pek çok özelliği üzerinde barındırmasıyla dikkati çeken bir uygulama sitesi. Aslında Web 2.0'ı anlatmak için çok güzel bir örnek.  Besleme dışında da pek çok kaynağı kullanabilmeleriyle şimdilik bu konuda en başarılı sitelerden biri olarak göze batıyor.

Kendi Google Haritanızı Sitenize Ekleyin

Daha önce Wikimapia kullanarak web sayfalarına kod yazmadan bir Google haritası eklemenin yollarını anlatmıştım.

Google'a bu yönde çok istek geliyor olacak ki Google Maps ile bu hizmeti kendi bünyelerinde sunmaya başladılar. Artık işlemler çok daha kolay ve özelleştirilebilir. İşte bir örnek:

Bu iş için bir Google hesabı gerekiyor. Gmail'den bir hesap aldıysanız bu yeterli olacaktır.

1. maps.google.com adresine girin.
2. Soldaki menüde My Maps linkine tıklayın.
3. Gelen sayfada Create New Map düğmesine tıklayın.
4. Şimdi Google hesabınızla giriş yapın. Giriş yaptıktan sonra tekrar Harita sayfasına yönlendirileceksiniz ve Untitled isimli haritanız yaratılmış olacak.
5. İsterseniz alttaki kutularda Title kutusuna bir başlık, Description kutusuna bir açıklama yazın.
6. Ardından harita üzerinde gözükmesini istediğiniz alanı seçin.
7. Sağ üstte Link To This Page yazan linke tıklayın.
8. Açılan pencerede ikinci kutudaki kodu seçip kopyalayın.
9. Bu kodu haritayı koymak istediğiniz sitenin kod bölümüne yapıştırın.

Böylece Google haritanız sitenizde gözükmeye başlayacak. Ancak yapabilecekleriniz bununla sınırlı değil.

İsterseniz Link To This Page linkine tıkladıktan sonra açılan pencerede en altta Customize and Preview Embedded Map linkine tıklayarak haritanın bazı ayarlarını değiştirebilirsiniz.
Buna tıkladığınızda yeni bir pencere açılacak. Burada haritanın büyüklüğünü belirleyebilirsiniz. Small, Medium, Large gibi hazır boyutları kullanabileceğiniz gibi Custom'ı seçerek Width ile genişlik, Height ile yüksekliği istediğiniz gibi belirleyebilirsiniz.

Yine bitmedi. İsterseniz haritada gözükmesini istediğiniz alanı buradan da belirleyebilirsiniz. Veya MAP, SAT, HYB düğmelerine tıklayarak haritanın gösterim seçeneklerini ayarlayabilirsiniz. Bunların gösterecekleri:

• MAP: Standart harita
• SAT: Standart uydu görüntüsü
• HYB: Uydu görüntüsü üzerinde harita bilgileri

şeklindedir. Ayarlarınızı bitirdikten sonra alttaki kodu kopyalayıp sitenin kod bölümüne yapıştırın.

İsterseniz placemark, line ve polygon ile yer işaretleri, çizgiler ve poligonlar da ekleyebilirsiniz. Ama her değişiklikten sonra SAVE düğmesine basmayı unutmayın.

Taşınabilir Apache PHP MySQL Sunucu Yazılımı

XAMPP pek çok sunucu bileşenini beraber sunan bir sunucu yazılımı. Bunlar arasında Apache, MySQL, PHP, PhpMyAdmin, OpenSSL ve diğer bazı yazılımlar bulunuyor.

İsterseniz sabit olarak kurabileceğiniz gibi, portatif olarak yanınızda da taşıyabilirsiniz.

Bunun için yapmanız gereken, bu adresten ZIP veya 7-ZIP formatındaki dosyayı indirdikten sonra taşınabilir cihazınıza bu dosyaları açmak. (Tavsiye edilen kök dizine kurmanız)

Ardından açılan klasördeki setup-xampp.bat dosyasını çalıştırın.

Son olarak xampp-control.exe'yi çalıştırın.

Bundan sonra istediğiniz sunucu bileşenlerini çalıştırabilirsiniz.

Google Mashup Editor

Google bir süre önce Mashup Editörünü hizmete sundu. (Bknz. Mashup nedir?) Şimdilik davetiye ile üye olunan bu hizmet template editörü gibi çalışan bir uygulama. Etiketler kullanarak çeşitli kaynaklardan çekebileceğiniz veriyi işleyip mashup sayfası üzerinde sunmaya imkan tanıyor. Sayfaların Google üzerinde host edildiğini belirtmeye gerek yok sanırım.

Hazır Google widgetlarını kullanarak Mashup uygulamaları yapmak da mümkün. (Harita, veri, takvim vb.)

Normal web tasarım ilkelerini uygulamak ve sayfa biçimlemekten, CSS uygulamaya çeşitli işlemler yapılabiliyor.

Başlangıç bilgileri için
http://code.google.com/gme/gettingstarted.html
Tag reference için
http://code.google.com/gme/reference.html

adreslerini ziyaret edebilirsiniz.

Üyelik için başvuru yaptıktan sonra değerlendirmenin ardından üyeliğiniz onaylanırsa bu hizmeti deneyebilirsiniz.

PopFly Microsoft'un Mashup Hizmeti

Microsoft, Silverlight altyapısı üstüne kurduğu Popfly mashup motorunun deneme sürümünü bir süredir davetli kullanıma açtı. Öncelikle Silverlight nedir diye sorarsanız, Silverlight Microsoft'un Adobe Flash'a rakip olan vektör grafik ve animasyon gibi özelliklere sahip bir tarayıcı runtime ortamı. Resmi sitesi silverlight.net Bunun hakkında derinlemesine bir yazıyı ileride yazmayı planlıyorum.

Popfly ise daha önce tanıttığım Yahoo Pipes'a benzer çalışan bir Mashup editör uygulaması. Ancak görsellik çok daha ön plşanda düşünülmüş. Site tasarlama arabirimine de sahip ve mashupları bu site tasarımına ekleyebiliyoruz. Özelliklerin ön izlemesini bu adresten yapabilir, Silverlight ile yazılmış video göstericisi aracılığıyla World Of Warcraft ve GeoMap üzerine yaptıkları mashup uygulamalarının yapımını görebilirsiniz.

Popfly mashupları çeşitli blokların birbiri ile iletişim kurmasına dayanıyor. Blokların çeşitli işlevleri var. Örneğin LiveSearch ile resim araması sonuçlarını alıp, bir resim göstericisi ile göstermeniz mümkün. Kendi bloklarınızı yapabileceğiniz gibi çeşitli hazır blokları kullanmanız mümkün. Pipes'ta olduğu gibi oklar ile blok hiyerarşisini belirliyorsunuz.

Bir kaç bloğu birleştirerek bir mashup uygulaması yapmış oluyorsunuz.

Pipes'tan farklı olarak Popfly görsel öğelerin çok daha fazla kullanılmasına imkan veriyor. Ayrıca HTML ve koda direkt müdahale etmek de mümkün.
Buna mashup editörüne eklediğiniz kırmızı küp şeklindeki bloklara tıklayarak büyütmek, burada değişkenleri belirlemek ve advanced bölümünden kodu değiştirmek şeklinde ulaşıyoruz.

.Net uygulamalarını Popfly Explorer eklentisi ile siteye yüklemek ve sitenizde göstermek olası.

Yaptığınız Popfly sitesine mashuplarınızı ekleyebiliyorsunuz. Ancak mashupları paylaşmadan sitenize eklemeniz mümkün değil. Mashuplar için Pipes kadar ince işlem adımları yok. Bunu kod yazarak halletmek mümkün.

Site tasarlayıcı başarılı denebilir. Hazır temalar ve renk seçenekleri bulunuyor. Site öğeleri bir hayli özelleştirilebilir. En az blog yazılımlarında tema editörleri kadar başarılı.

Bir mashup'ı Share ile paylaştıktan sonra Mash out ile farklı yerlere eklemek mümkün. Facebook hemen listelenmiş bile. Ayrıca IFRAME ile basit HTML sayfalarına dahi konabiliyor.
Hazır blokları RIP ederek kopyalayıp üzerinde çalışabiliyoruz.

Özelleştirilebilirliği fazla ve herkesin mashup geliştirmesine imkan verdiği için özelleştirme fanatikleri arasında yaygın bir uygulama olması olası. Henüz alpha olmasını hatırlatmakta fayda var. Alpha durumu da ara sıra göze batıyor. Site ve arabirim biraz ağır davranıyor. Ayrıca arada sorunlar çıkabiliyor. Editör sanki fazla göz boyama amaçlı yapılmış gibi. Örneğin blokları göstermek için kullanılan küpler sanki silverlight vektör destekliyor işte üç boyutlu döndürebiliyoruz demek için yapılmış. Yine de sakıncası yok.

Genel fikrim Microsoft'un bu projeyi web için kullanılabilen tüm ürünlerini birleştirdiği ve yaymaya çalıştığı bir uygulama olarak çıkardığı yönünde. Bu çatı uygulaması yaygınlaşabileceği gibi çok kısıtlı kalması da beklenebilir. Arabirimi her ne kadar basit gibi görünse de bazı ileri derece özellikler genel kullanıcılara hitap etmeyebilir. Arabirim bazen göz boyamak amacıyla boşu boşuna şişirilmiş izlenimi veriyor. Popfly'ın mı Silverlight'ı, Silverlight'ın mı Popfly'ı taşıyacağı da bir soru işareti.

FeedBurner'ın Derinlikleri

Feedburner RSS/ATOM beslemeleri için geniş imkanlar sunan bir site. Henüz arabirim için Türkçe desteği yok ama Feedburner gösterim sayfası Türkçe kullanabiliyor. RSS ne ola diyenler bu yazımı okuyabilir.

Türkçe gösterim ve pek çok diğer özelliği nasıl uygulayabileceğimizi bu yazıda yayınlayacağım.

Feedburner'ın bir kullanımı beslemeyi web tarayıcısından izleyebilmemiz. Eğer feed adresini RSS okuyucusundan ziyaret ederseniz RSS, web tarayıcısından ziyaret ederseniz web sayfası olarak sunuyor. Bu nedenle bir nevi feed reader gibi kullanmak mümkün oluyor. Bu şekilde RSS'ten hiç haberi olmayan ziyaretçileri korkutmamak adına güzel bir yaklaşım oluyor. Yoksa XML kodunu tarayıcıda açtığı için gören kapatıp orada işi bırakabiliyor.

Sadece kendi yayınladığınız değil başkalarının RSS beslemelerini de buraya ekleyebilirsiniz. Bunun faydalarını yazının ilerleyen bölümünde anlatacağım.

Google'ın satın almasıyla PRO özellikler ücretsiz oldu. Böylece onlarca özellik herkesin kullanımına açılmış oldu.

Feedburner'a üye olduktan sonra anasayfada ki metin kutusuna istediğimiz RSS adresini yazıyoruz. Örneğin ben http://blog.leventdal.com/feeds/posts/default adresini ekliyorum. Next diyerek ilerliyoruz.

Sonra gelen pencerede Feed Title bölümüne başlık, adres bölümüne ise kullanmak istediğiniz URL için uzantıyı girmelisiniz.
Örneğin ben http://feeds.feedburner.com/LeventDal kullandım. Burada kullanacağınız adres önemli çünkü ileride bu adresi değiştirmek çok eski kullanıcıları kaybetmek mümkün olabileceğinden iyi olmayacaktır.

Hatta şimdiden şunu söyleyeyim. Blogger gibi FeedBurner da kendi domaininizi kullanmaya izin veriyor. Yani feed.leventdal.com gibi bir adresiniz varsa bunu DNS sunucunuz üzerinden Feedburner'a yönlendirebilir ve sanki kendi domainizdeymiş gibi kullanabilirsiniz.

Bunun için yukarıdaki My Account linkine tıklayın. Soldaki menüden My Brand linkine tıklayıp sağdaki kutuya kullanacağınız adresi yazın. Unutmayın DNS sunucunuzdan bu adresi feeds.feedburner.com adresine yönlendirmeniz gerekiyor.

RSS'inizi Feedburner'a ekledikten sonra gelelim derinliklere. Öncelikle Feedburner sayfasında en üstte My Feeds yazan linke tıklayarak kontrol panelinizi açın. Burada kendi beslemelerinizin bir listesini göreceksiniz. Bir tanesinin başlığına tıklayın. Böylece istatistiklerin bulunduğu ilk sayfaya inmiş oluyoruz. Şimdi size bir mesaj verecek, RSS yeni olduğu için henüz istatistik olmadığına dair. Önemli bir mesaj değil.

Analyze isimli bu sekme, çeşitli istatistikleri görmenizi sağlıyor. Burada ekstra özelliklerden sol altlardaki FeedBurner stats Pro linkine tıklayın. Açılan penceredeki tüm kutuları işaretleyin. Böylece ileri istatistikleri almanız mümkün olacak. Select Time Zone bölümünden bizim saat dilimize uygun birini seçin. SAVE diyerek kaydedin.

Böylelikle FeedBurner'ın ileri derece istatisiklerini açmış olduk. Örneğin hangi linke tıklanmış, sayfayı kaç kişi ziyaret etmiş bunları öğrenebiliyoruz.

Daha sonra yukarıdaki sekmelerden Optimize'a tıklıyoruz. Soldaki menüden Browser Friendly linkine tıklıyoruz.
Feedburner adresinizin (benim örneğimde http://feeds.feedburner.com/LeventDal olan) web tarayıcısında hangi dilde gözükeceğini buradan seçiyoruz. Sağdaki listeden ClearFeed (Turkish) seçeneğini seçiyoruz.
İsterseniz sayfada gözükmesini istediğiniz popüler RSS araçlarına ekleme düğmelerini hemen bu listenin altından yapabilirsiniz.
Eğer beslemede sadece başlıklar gözüksün istiyorsanız, alttaki listede List Item Titles only seçeneğini seçebilirsiniz. Eğer item titles and content seçerseniz, beslemede her başlık için küçük bir açıklama olacak.
Ayarları bitirdikten sonra SAVE diyerek kaydedin.

Sayfada ve bazı RSS okuyularca gözükmesini istediğiniz logonuzu, soldaki menüdeki Feed Image Burner linkinden değiştirebiliyoruz. Bu sayfada sağdaki listede Specify Custom Image URL seçeneğine girip kullanmak istediğiniz resmin URL'sini girebilirsiniz. Kısıtlama yok ama tavsiyem çok büyük özellikle yüksekliği fazla resimleri seçmeyin. 200 piksel genişlik 100piksel yükseklik arası iyidir.

Image Title ve Link'e de sitenizin adı ve linkini verebilirsiniz. Böylece sayfada logoya tıklandığında siteniz açılacaktır.

SAVE diyerek kaydedin.

Sol menüde çok fazla seçenek olduğunu görebilirsiniz. Üstteki linker genel amaçlı, alttakiler ise özel durumlar için kullanılan ayarları belirliyor. Kısaca bahsetmek gerekirse:

Link Splicer Online Bookmark sitelerindeki linklerinizi yayınlamak için kullanabilirsiniz. 
Photo Splicer Online resim paylaşım sitelerindeki resimlerinizi yayınlamak için kullanabilirsiniz.
Geotag Your Feed Yaşadığınız yerin koordinatlarını girerek feedinizi Coğrafi olarak işaretleyebilirsiniz.
Feed Image Burner Üstte bahsettiğim gibi logo resmi
Title/Description Burner Eğer yabancı birinin RSS'ini alıyorsanız veya besleme başlığı ve açıklamasını değiştiremiyorsanız buradan değiştirmeniz mümkün
Convert Format Burner RSS formatını değiştirebilirsiniz
Content-Type Burner İçerik türünü değiştirebilirsiniz
Summary Burner Besleme açıklamalarının boyunu kısıtlayabilir, küçük bir mesaj yazabilirsiniz. Unutmayın bu mesaj tüm besleme öğelerinde gözükecek
Event Feed Eğer bir tarih/takvim RSS'i giriyorsanız bunun için seçenekleri bulabilirsiniz. Örneğin eski etkinlikleri gizlemek mümkün
Tickerize Borsa gibi kısaltmalar için özel sembol ekler. Ama şimdlik sadece ABD borsası için destek mevcut.
Amazon ID Burner Amazon linklerine Amazon ID'sini ekler.

Bu sekmeyi de bitirdikten sonra Publicize sekmesine geçebiliriz. Burada daha çok yayınla ilgili konular bulunuyor. Ama çok kullanışlı hizmetler mevcut:

Headline Animator Bir resim üzerinde dönüşümlü olarak feed içeriğinizi gösterin
BuzzBoost Beslemeyi saf HTML olarak yayınlayın. Bu şekilde bir IFRAME içerisinde beslemenizi başka sitelerde gösterebilirsiniz. Basit CSS ile tasarımını değiştirmeniz de mümkün.
SpringWidgets Skin Flash eklentisi olan RSS okuyucusu için arayüz
Email Subscriptions Ziyaretçileri posta ile güncellemelerden haberdar etme seçeneği
PingShot Çeşitli sunucuları yeni mesaj yayınladığınızda haberdar eder
FeedCount Beslemenize kaç kişinin üye olduğunu gösterin
Chicklet Chooser Sitenize ekleyebileceğiniz düğmeler
Awareness API Başkalarının beslemenizi işleme, trafik bilgilerini almasına imkan verir. Genelde başkasının kullanmasını istemezsiniz ama eğer siz başka sitelerden kullanmak isterseniz açabilirsiniz.
Creative Commons RSS içine telif ve lisans bilgileri eklemeyi sağlar
Password Protector Şifre ile koruma. Tek bir kullanıcı adı ve şifreye izin veriyor. Sadece üyeleriniz kullansın istiyorsanız bunu kullanabilirsiniz.
NoIndex Arama motorları beslemeyi tarasın istemiyorsanız bu seçeneği işaretleyin.

RSS Beslemelerini Sitenizde Gösterin

Çoğu blog ve web yazılımı RSS okuyucusu hizmeti veriyor. Ancak kimisi kısıtlı özelliklere sahip kimisi ise mesajların içinde RSS kullanmaya izin vermiyor.

Bu hizmetler genellikle bir kaç RSS beslemesini birleştirerek tek bir besleme olarak sunamıyor. Bazıları farklı sıralama ölçütleri kullanmaya da olanak sağlıyor.

Bu nedenle bu yazıda ücretsiz RSS gösterim hizmeti veren siteleri toplamak istiyorum. (Flash ile olanlar hariç)

FeedSweep
Feed Digest
RSS to Javascript
WidgetBox RSS Widget
BlinkBits
RSS Info

Feedburner Buzzboost özelliği ile beslemenin HTML halini bir IFRAME içerisinde diğer sayfalarda göstermeniz mümkün. Feedburner ile ilgili ayrıntılı bir yazımı buradan okuyabilirsiniz.

Web Tasarımında Temel Terimler

Zaman içinde web tasarımı gittikçe derinleşen ve dallar arası uzmanlık gerektiren bir konu haline geldi.

Bu yazıda terimleri açıklarsam sanıyorum ki konu hakkında temel bir bilgi vermiş olacağım.

HTML (Hypertext Markup Language)
HTML basit bir işaretleme dilidir. İşaret için tag denilen etiketler bulunur. Bir etiketin belirli görsel veya işlevsel karşılığı vardır. HTML düz yazıdır. Ancak insanların algılaması için Internet Explorer, Firefox gibi bir tarayıcının işaretleme dilinde belirlenen etiketleri görsel bir şekilde sunması gerekir. HTML'de etiketler önceden belirlidir. Bu da bazı kısıtlamalara neden olur. Format W3 Organization tarafından önerilmiştir ve tarayıcı üreticileri bunun üzerine uygun veya kısmen uygun tarayıcılar üretmişlerdir. Dosya uzantıları genel olarak .html ve .htm olarak kullanılır.

DOM (Document Object Model)
HTML ve XML gibi formatlar için geçerli olan belge nesne modelidir. Bu formatlardaki elemanlar DOM'un parçalarıdır. DOM kullanarak bir sayfa içindeki elemanlar üzerinde işlem yapmak mümkündür. Farklı web tarayıcılarının farklı DOM algılamaları ve işlevleri bulunmaktadır.

XML (eXtensible Markup Language)
Extensible uzatılabilir anlamındadır. XML'de bu uzatılabilirlik HTML'in aksine tasarımcının kendi etiketlerini üretebilmesi şeklinde mümkün olmaktadır.
Hal böyle olunca XML webden çok farklı alanlarda da kullanılabilmektedir. XML dosyaları son derece düzenli olur. Düzgün üst alt hiyerarşisi bulunmalıdır. HTML'de çoğu durumda hatalar olsa bile farkedilmezken, XML'de bu mümkün değildir.
XHTML, RSS ve SVG birer XML örneğidir. Dosya uzantıları .xml, .rss, .svg gibi kullanıma göre değişiklik gösterebilir.

AJAX (Asynchronous Javascript And XML)
Yeni bir olgu olmayan ancak yakın zamanda kullanımı yaygınlaşan Ajax, tarayıcının sunucu ile bağlantıyı Javascript ile yazılmış bir sunucu üzerinden yapması ile çalışır. Sayfayı bölümlere ayırıp, farklı bölümlere göre hareket etmek böylece mümkün olur. Bunun en büyük avantajı sayfaları yeniden yüklemeden veri alabilmektir. Sayfanın bir bölümünde olan hata diğer bölümleri de etkilemez. Sitelerin daha hızlı yüklendiği ve sunucuya daha az yük bindiği de söylenebilir.
Ancak Ajax kullanan siteler klasik tasarımdan daha fazla bilgi ve emek gerektirmektedir. Ayrıca içerik dinamik olduğundan arama motorlarınca görünmeleri mümkün değildir. XMLHttpRequest nesnesine ve Javascript'e dayalı olduğundan her tarayıcıda çalışmayabilir. Güvenlik açısından da sorunlar yaratabileceği düşünülmektedir.

XHTML (Extensible HTML)
XML ile HTML'in birleşmiş hali diyebiliriz. HTML'de bulunan tüm özellikler bulunmakla beraber XML gibi düzenli yazılması gerekmektedir. Dosya uzantısı genellikle .xhtml'dir.

DHTML (Dynamic HTML)
Statik sayfalardan farklı olarak kullanıcı tarafında çalışan etkileşimli tasarımlar yaratmayı sağlar. Genel olarak HTML+Javascript+CSS olarak tanımlanır. Örneğin sayfa içinde hareket ettirebildiğimiz nesneler, gizlenebilen yazılar gibi özellikler birer DHTML örneğidir.

CSS (Cascading Style Sheet)
Bir biçimlendirme dilidir. İşaretleme dili ile yazılan dosyalarda görseliği CSS aracılığı ile belirleyebiliriz. HTML gibi bazı işaretleme dillerini CSS kullanmadan da görsel olarak değiştirmek mümkündür. Ancak CSS merkezi yönetim ile çok daha kolay bir kullanım sağlar. Hem sürekli etiket kullanmaktan hem de küçük değişikliklerde etiketler üzerinde oynama gereksiniminden kurtuluruz.
CSS ister sayfa içine gömülü ister link verilmiş ayrı bir dosya olarak kullanılabilir. Sayfa dışında kullanıldığında genellikle .css uzantısı ile kullanılır.

Javacript
JAVA ile karıştırılmaması gereken Javascript istemci yani sayfayı görüntüleyen kişi tarafında çalışan basit bir script dilidir. Web tasarımında dinamik içerik eklemek için kullanılır. Yazım biçimi C ve Java'ya benzer ama daha basittir. Javascript sayfa yüklendikten sonra çalışabildiğinden, sürekli sayfa yükleme, bir nesnenin özelliklerini değiştirme işlemlerini yapmaya olanaklı hale getirir. CSS gibi sayfa içinde veya harici olarak kullanılabilir. Sayfa dışında genellikle .js uzantısı ile kullanılır.

VBScript
Microsoft'un Visual Basic dilinden esinlenerek üretilmiş olan VBScript Javascript'e benzer işlev sunar. İstemci tarafında çalışır. Bazı ActiveX olanaklarına sahip olduğundan bilgisayara erişime de izin verebilir. Ancak Microsoft'un ürettiği tarayıcılar dışında hazır destek bulunmamaktadır. Bu nedenle kullanımı kısıtlı kalmıştır. Sayfa dışında kullanıldığında .vbs uzantısı kullanılır.

ASP (Active Server Pages)
Microsoft'un sunucu tarafında üretilen ve dinamik sayfalar sunan web sayfa biçimidir. VBScript temelinde çalışan ASP, barındırdığı nesneleri sunucu tarafında işleyip istemciye sunar. Genellikle Microsoft'un ürettiği işletim sistemlerindeki sunucularda çalıştığından çok yaygınlaşamamıştır. Genellikle .asp uzantısı ile kullanılır.

ASP.NET
ASP ile tamamen farklı olan Asp.NET, .NET framework kullanarak web uygulamaları üretmeye imkan verir.
En büyük özelliklerinden biri HTML ve XHTML etikelerini içinde barındırmasıdır. Dosya uzantısı genellikle .aspx biçimindedir.

PHP (Hypertext Preprocessor)
Genellikle ASP gibi sunucu tarafında çalışır. PHP koduyla yazılmış sayfaları kullanıcılara sunar. En büyük avantajı ücretsiz olması ve hem Windows hem Linux işletim sistemlerinde çalışmasıdır. ASP ve .NET 'ten daha hızlı olduğuna inanılmaktadır. Kullanım olarak da en yaygın kullanılan sunucu taraflı işleme teknolojisi olduğu söylenmektedir.

ActiveX
Microsoft'un bileşen teknolojisidir. Başka programlar tarafından çalıştırılabilir olmaları nedeniyle web tarayıcılarına veya sayfalara gömülerek çalışabilirler. ActiveX nesneleri genelikle Microsoft tabanlı tarayıcılarda çalışabildiği için yaygınlaşamamıştır. Ancak özel tasarımlarda kullanımları mevcuttur.
ActiveX istemci tarafında çalışır ve neredeyse sisteme tam erişime sahip olduğundan tehlikeli olabilir. Örneğin spyware denilen ve sayfa içinde değil ancak tarayıcı üzerine yerleşen ActiveX bileşenler istenmeyen sitelere bilgi gönderebilir, bilgisayar üzerinde işlem yapabilir.

Flash (SWF)
Adobe firması tarafından satın alınan Macromedia şirketinin geliştirdiği vektör grafik dosyası biçimidir. Bir nesne olarak web sayfalarına gömülebilirler. Çalışmaları için Flash Player gerekir. Actionscript denilen, Javascript'i andırır script dili ile animasyonlar, oyunlar ve çeşitli interaktif tasarımlar üretmek mümkündür. Ayrıca vektör grafikler, ses, video gibi dosyaları barındırabilir.

Java
Java Sanal Makinesi kullanarak web sayfası içinde çalışabilirler. Bu tür uygulamalara aplet denir. HTML'de bulunmayan bazı özellikleri sağlamak için kullanılırlar. ActiveX gibi kullanıcı tarafında çalışırlar. Ancak ActiveX'in aksine Linux gibi sistemlerde de çalışabilirler.

Web tasarımında karşılaşabileceğimiz temel terimler genel olarak bunlar. Yeni öğrenmeye başlayacaklar için bazı tavsiyeleri ayrı bir yazıda yayınlayacağım.

Siteniz Farklı Tarayıcılarda Nasıl Gözüküyor?

Internet Explorer, Firefox, Opera, Safari, Konqueror. Bunlar popüler web tarayıcılarından bazıları. Bir de bunların farklı sürümleri var. Hal böyle olunca kombinasyonlar artıyor.

browsershots.org seçtiğiniz tarayıcılarda sitenizin nasıl göründüğünü öğrenebilirsiniz.
Ancak sistemin işlemi çok hızlı yapamadığını ve belirli bir süre beklemek gerektiğini belirteyim. Eğer görüntü 30 dakikada çıkmazsa, Extend düğmesine basmayı unutmayın.

Bu Site Ne İle Yapılmış?

Bir sitenin içeriğini, hangi teknolojileri kullandığını görmek için builtwith.com adresini kullanabilirsiniz. Sitenin kaynak kodunu incelemekten çok daha kolay. Ayrıca kullanılan teknolojiler hakkında küçük bilgiler de veriliyor.

Javascript Sürükle&Bırak APIleri

Web uygulamalarınıza drag&drop denilen sürükle bırak özelliği katmak isterseniz derin DHTML bilgisine ihtiyaç duymadan aşağıdaki apilerden istediğinizi kullanabilirsiniz.

Programların nasıl çalıştığını görmek için demo linklerini takip edin.

Walter Zorn Sürükleme yanında bir çok işlev sunuyor. Çoğaltma, transparanlaştırma, bir pozisyona hareket ettirme, boyutlandırma gibi özellikler bunlardan bazıları. Komutlar basit, kullanımı kolay, API dosyası küçük.

DHTML Goodies Farklı işlevler için farklı apiler mevcut. Linkteki sayfada demo linklerine tıklayarak örnekleri inceleyebilirsiniz. Sürükleme yanında sürüklenen nesneleri sıralayabilen ve ızgaraya yapışan apiler mevcut. API dosyaları küçük.

Yahoo UI Library Kapsamlı bir API. Kullanımı öncekiler kadar basit değil ancak geniş bir döküman kaynağı var. API dosyası büyük. Sağda Examples bölümünden örnek apileri ve kodlarını görebilirsiniz.

BrotherCake Belirli bir alanda sürüklenen kutuları otomatik sıralayabilen kullanımı basit ve küçük boyutlu bir API. Bir örneği hemen soldaki menüde görebilirsiniz. "More demos" bölümünden daha fazla örneği inceleyebilirsiniz.

Javascript Frameworkleri hakkındaki yazımda bahsettiğim frameworklerden bazıları da sürükle bırak desteği sunuyor.

Javascript Framework ve APIleri

Javascript üzerine yazılmış bu framework ve apiler uzun ve rutin kodları daha basit ve işlevli fonksiyonlar halinde sunuyor. Class yazmayı daha kolay hale getiriyor. Pek çok kodu daha kısa bir şekilde yazmanız mümkün.

Ayrıca yazdığınız kod için farklı tarayıcıları desteklemesi için kod yazmaktan kurtuluyorsunuz.

Bunun yanında projenize Ajax, Sürükle Bırak, çeşitli efektler gibi ekstra özellikler katıyor. Genellikle widget veya plugin desteği bulunuyor ve üçüncü şahısların yazdığı kodları projenize bu şekilde ekleyebiliyorsunuz.

Liste:
http://jquery.com/
http://www.prototypejs.org/
http://developer.yahoo.com/yui
http://code.google.com/
http://script.aculo.us/
http://dojotoolkit.org/
http://openrico.org/
http://qooxdoo.org/
http://mootools.net/
http://helma.org/