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.

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.

Mashup Nedir?

Google'ın şu anda davetiye ile girilebilen Mashup Editörünün hizmete girmesiyle Mashup konusunun önümüzdeki günlerde sıkça gündemimize geleceğini tahmin ediyorum. Bu nedenle bu yazıda basitçe Mashup tanımını ve kullanım alanlarını yazacağım.

Web 2.0'ın XML tarzı evrensel ve işlenebilir veri üzerine yoğunlaşması ve web üzerinde pek çok farklı görsel aracın oluşması bazı kullanım alanlarını ve ihtiyaçları doğurdu.

Mashup, basit olarak tanımlamak gerekirse farklı kaynaklardan gelen nesneleri birleştirip, biçimlendirmek özelleştirmek ve istenilen bir formatta ve istenirse başka araçları da kullanarak sunmak için kullanılan yöntemlere deniyor.

Örneğin bir hava durumu sitesinden bir şehir ile ilgili aldığınız bilgileri bir Google haritasında o şehrin üstünde gösterdiğinizde bir mashup uygulaması yapmış oluyorsunuz.

Veya farklı kaynaklardan gelen RSS beslemelerini birleştirip tek bir RSS olarak sunmak da bir mashup.

Daha önce Yahoo Pipes ile ilgili bir yazı yayınlamıştım. Bunda nasıl farklı verileri alıp çeşitli işlemeler sonucunda tek bir özelleştirilmiş çıktı olarak sunulabildiğinden bahsetmiştim. İşte Yahoo Pipes bir mashup editör uygulaması.

Mashuplar farklı kaynaktan gelen veriyi farklı kombinasyonlar ile oluşturabildiğinden neredeyse sınırsız olasılıkta mashup üretmek mümkün oluyor.

Mashupların en büyük avantajı gittikçe büyüyen veri akışını daha kullanıcı dostu ve daha merkezi biçimde ve özel şekillerde sunabilmesi.

Widget İçerik Sağlayıcıları

Widget tanımını bu yazıda yaptıktan sonra bir liste halinde sitenize veya masaüstünüze ekleyebileceğiniz widget servislerini de bu yazıda listeliyorum.

Google Gadgets
İstediğiniz widgetı arayabilirsiniz. Widget ayarlarını yaptıktan sonra üretilen script kodu sitenizde gözükmesini istediğiniz yere kopyalayın.

Google Desktop Gadgets
Google Desktop kurduktan sonra bu widgetları bilgisayarınızda kullanabilirsiniz.

Yahoo Widgets (eski adıyla Konfabulator)
Yahoo Widget Engine kurulduktan sonra istediğiniz widgetı bilgisayarınızda gösterebilirsiniz.

Windows Live Gallery
Microsoft siteleri ve uygulamalarına ekleyebileceğiniz widgetlar bulunuyor.

Wigipedia
Çeşitli servislerin sunduğu widgetları derleyerek sunuyor. Ağırlıklı olarak masaüstü widgetları var.

Widgetbox
Bu da bir widget dizini. Ağırlıklı olarak blog ve web widgetları mevcut.

Labpixies
Yine bir harman sitesi. Web widgetları bulunabilir.

Samurize
Masaüstünde çalışan Samurize için widgetlar.

DesktopX
DesktopX programını kurduktan sonra bu widgetları çalıştırabilirsiniz.

Not: Web widgetlarının çoğunu Blogger, WordPress veya Moveable Type sitelerinden istediğinize yerleştirmeniz mümkün.
Masaüstü widgetların ise genellikle kendi motorlarının üzerine kurulması gerekiyor.

Widget Nedir?

Widget bir plaftorm üzerinde bütünleşik çalışarak o platforma ekstra özellik katan "küçük" araçlara denir.

Bu platform bir web sayfası veya widget motoru denilen alt yapı olabilir. İster web sayfanızda, ister masaüstünüzde, ister bir programın içinde widget ekleyerek bunda olmayan özellikleri ekleyebilirsiniz.

Çok basit bir widget örneği, başka bir web sitesinin sürekli güncellediği bir resmi kendi sitenizde göstermeniz olabilir. Veya sitenizde bir Sudoku oyunu yayınlayabilirsiniz.

Bir widget kendi başına çalışabilir. Widgetlar genel amaç yerine özel amaçlar doğrultusunda çalışır. Örneğin bir RSS okuyucusu, hava durumu monitörü, takvim, hesap makinesi, video yayını gibi. Bazı widgetlara parametre girerek özelleştirmek mümkündür.

Küçük olduklarından istediğiniz widgetı büyük ölçekli bir tasarımın istediğiniz bir bölümüne yerleştirebilirsiniz.

Sadece widget kullanılarak yapılan ve Başlangıç Sayfası da denilen siteler bulunmakta. Bunun en önemli örnekleri Netvibes ve PageFlakes'dir. Bu sitelerde içeriği özelleştirdiğiniz widgetlar oluşturur. Bunları sayfanın istediğiniz bölümüne sürüklemeniz mümkündür. Bu tür Kişiselleştirilebilir Başlangıç Sayfaları ile ilgili daha fazla bilgi için bu yazıyı okuyabilir, derlediğim bir listeyi buradan görebilirsiniz.

Widgetların avantajı, o konu üzerinde yoğunlaşmış kişiler tarafından hazırlanılmaları, güncellenmeleri ve kullanıcının hiç bir bilgisi olmasa da istediği işlevi kendi tasarımına ekleyebilmesidir.

Örneğin, web sitenize veya bilgisayarınızın masaüstüne bir hesap makinesi koymak isterseniz, bir script veya programlama bilgisine ihtiyaç duyarsınız. Bunun üstüne hesap makinesinin incelikleri konusunda bilgiye, deneyime ve bunu üretmek için zamana ihtiyacınız olur. Hazır widgetlar sizi tüm bunlardan kurtarır.

Web sayfalarında kullanılan widgetlar genellikle HTML, Flash veya Javascript kullanılarak hazırlanır. Bazı widgetlar kullanıcının kodu kendi sitesine kopyalaması ile çalışır çoğunluğu ise hizmeti sağlayan siteye link vererek.

Masaüstünde çalışan widgetlar için ise widget motoru yazılımı kurmak gerekir. Bu motor widgetlara bir çerçeve hizmeti sağlar. Bu widget boyutlarının küçülmesi ve işlevlerinin artması için kullanılır. Ayrıca bu tarz widgetlar internet bağlantısı olmadığında da çalışır.

Özelleştirmeye izin veren widgetlarda renk, büyüklük, içerik gibi özellikler değiştirilebilir.

Web ve bilgisayar widget kaynaklarını derlediğim bu listeden görebilirsiniz.

HTML ile Formül Yazmak

Web sayfanızda formül yazmak istiyorsanız bilmeniz gereken bir iki bilgi ve ipucu var. Bunları bildikten sonra formül yazmak çocuk oyuncağı.
Öncelikle iki çok önemli HTML etiketini bilmemiz gerekiyor. Bunlar altlı ve üstlü ifadeler yazmak için gerekli.
Tag olarak adlandırılan bu etiketler <sub> ve <sup>. <sub> alt, <sup> ise üstlü ifade yazmak için gerekiyor.

Basit bir örnek (SO₄)^2-.
Gördüğümüz gibi 4 ve 2 rakamları altta ve üstte yazılıyor.
Bu örnekte 4'ü ₄ şeklinde, 2'yi ise ² şeklinde yazıyoruz.

Bir de bu rakamlar biraz daha küçük olsun diye <small>₄</small> haline getirebiliriz.Şimdi ipucu kısmına geçelim. Üst alt kısmı düz yazı gibi birbiri ardına yazılıyor ancak ya aynı satırda birden çok notasyon koymak gerekirse? O zaman da yapmamız gereken kodu parçalara ayırıp, parçaları tablonun ayrı sütunları içinde kullanmak.
Örnek verecek olursak:

b ∫ a

f(x) dx

Burada kod aslında şu şekilde yazılmış.

b ∫ a

f(x) dx

Yani b, ∫ ve a üç ayrı satırda yazılarak kullanılıyor. Olay bundan ibaret.


Burada örneğini gördüğünüz integral sembolü gibi diğer pek çok sembolü bu adresten karakter kodları ile birlikte edinebilirsiniz. http://www.digitalmediaminute.com/reference/entity/index.php