Eki 24, 2009

Posted in İnternet Dünyası, PHP - CSS, Webmaster Alanı | 5 Comments

Web 2.0 Nedir ?

Web 2.0 Nedir ?

Web 2.0  - ilk olarak O’Reilly Media tarafından 2004 yılında kullanılmaya baÅŸlayan bir terim.

İkinci nesil internet hizmeti ve kullanıcı odaklı bir sistem olarak biliniyor. Web 2.0 ne demek ? Nasıl ve Nerelerde kullanılıyor bunları baÅŸlıklar halinde anlatmaya çalışacağım.Umarım sıkılmadan  okur ve web 2.0 hakkında fikir sahibi olursunuz…

1- Sadelik

2- Büyük ve Kalın Fontlar

3- Sade menü ve navigasyonlar

4- Central ve Liquid tasarımlar

5- İcon,buton ve etiketler

6- Gradients (Renk Geçişleri)

7- Renkler

8- Logolar

9- Ajax

10- Tag Clouds (Etiket Bulutu)

11- Oval Köşeler

12- Borders (Kenarlık)

13- Background (Arka Plan)

14- W3 Standartları

1- Sadelik

BaÅŸlık yeterince açık sanırım sadelik,sadelik,sadelik… Less is more (az daha çoktur) felsefesi web uygulamaların da geliÅŸen bir terim. Günümüz de bir çok web sitesi sahibi daha sade anlaşılır ve her ÅŸeyin birbirine girmediÄŸi bir site arzuluyor. Bu konuda elinizden geldiÄŸince site tasarımlarını ve içeriÄŸi anlaşılır ÅŸekilde dizayn edilmesine önem göstermelisiniz.

2-Büyük ve Kalın Fontlar

Web 2.0 ‘un hayatımıza kattığı en büyük tasarım deÄŸiÅŸikliklerinden biri de şüphesiz ki “Büyük ve Kalın Fontlar” olmuÅŸtur.
Özellikle interaktif siteler de görüyoruz ki büyük değişik fontlara sahip yazı karakterleri ile ilgi çekici olabilir. Ben de bir çok sitem de bu özelliği kullanıyorum ve gerçekten hoşuma giden bir özellik. Ayrıca kalın fontlarda da bazı sitelerin logo niyetinde kullandığını da söylemeden geçemeyeceğim.

3- Sade Menü ve Navigasyonlar

Sadelik akımının öncülerinden olan menü ve navigasyonlar web sitesinin hem hızlı açılmasına hem de anlatılmak istenen konuyu daha kolay ziyaretçilere sunabilmeyi amaçlar. Ayrıca metin bazlı navigasyonlara da büyük oranda  bir rağbet var gelişmiş portallar web sitelerin de metin tabanlı linkleri navigasyonlar halinde verebiliyor. Dikey ve Yatay şekilde navigasyon çeşitleri de bulunmaktadır.

4- Central ve Liquid tasarımlar

Central yani orta hatta olan demek bu tarz siteler daha çok tercih ediliyor. Genel de sola dayalı sistemleri haber portalları kullanmakta. Portal ve kiÅŸisel siteler central sistemini kullanıyor. GeliÅŸen CSS ve XHTML ile artık tasarımlarımızı ister belli bir pixel ölçüsünde istersek yüzde olarak belli bir alanda sınırlayabiliyoruz. Bu sınırlamayı yaparken de klasik  <div align=”center”></div> gibi ortalama etiketleri yerine artık css ile #ortala {margin:0 auto;} tarzında css kodlamaları ile iÅŸimizi büyük oranda kolaylaÅŸtırıyoruz.

800 – 850 pixel arasında olan ve ortalanmış sayfa tasarımları genel görünüm itibari ile çok hoÅŸ durmakta. Bunun ile birlikte Liquuid yani sayfa geneline yayılmış tasarımlar da yine CSS güzellikleri kullanılarak her çözünürlükte aynı görnütüyü elde etmemizi saÄŸyalayarak kullanıcılara büyük kolaylıklar sunuyor.

5-  İcon,Buton ve Etiketler

Web 2.0 bilginin kolay ulaşılır olması ve kısa zamanda çok daha fazla bilgiye ulaşmak üzerine kurulu. Şüphesiz ki bunu bizlere sağlayan en büyük yardımcılarımızdan biri de icon ve etiketler. Birçok sitede (ve bu sitede de) etiketler, yıldızlar, faviconlar, mini ikonlar, piksel ikonlar kullanılıyor. Bu ikonlar kullanıldığı yer ve duruma göre kullancıya belki de okuyacağı bir paragraf yazıyı anlatabiliyor. Örnek vermek gerekirse Rss ikonuna yabancı bir insan belki farklı kullanılmış bir Rss butonunu tanımayıp sitenin Rss özelliğini es geçebilir, ancak kullanılan bir yemek yiyen adam ikonu bazen kullanıcının ilgisini daha çok çeker ve Rss özelliğini keşfetmesine yardımcı olur. Bununla birlikte günümüz Blog kasırgasında kullanılan yorum ve header ikonları, tarih ikonları, kategori ikonları birçok sitede görmeye alıştığımız özellikler. İkonları ve etiketleri küçük ama büyük işler başardığından dolayı seviyoruz sanırım.Ayrıca  sitemizi simgeleyen ve bir bakıma bizi yansıtan Favicon kullanımı da web 2.0 ile birlikte hayli yaygınlaşmış durumda.

6- Gradients (Renk Geçişleri)

Gradient efekti bir renkten diğer bir renge geçerken arada geçiş renklerinin kullanılarak hoş bir efekt oluşturmaya dayanıyor. Söz gelimi webde en çok kullanılan gradient efektlerinden birisi yeşilden beyaza doğru tatlı geçişler. Gerek arkaplanda gerekse de sitemizin navigasyon ve içerik bölümlerinde gradientler göze hoş görünür bir sayfa yapısı yansıtmak adına bazen hayat kurtarabiliyor. Tabi gradient efektinin de kullanıldığı yer ve durumu önemli. Çünkü gradient efekti iki rengin geçişini sağlıyor. Uyumlu renkleri yakalamanız gerekiyor aksi halde bu efekti uygulayacağım derken sitemizin genel renk bütünlüğünü bozabiliriz. Css galeri sitelerinde veya Web 2.0 kaynak listelerinde göreceğiniz birçok site bu efekti ucundan kıyısından bir yerinden kullanmıştır. Çok başarılı örnekler de görmek mümkün.

7- Renkler

Renkler konusunda okuduğum birçok makalede farklı renk tonlarının Web 2.0 ile ön plana çıkarıldığını görüyoruz. Örneğin yeşil günümüz webinde en çok kullanılan renk sıralamasında başı çekiyor. Birçok büyük site yeşili kullanmaktan çekinmiyor. Yeşil rengin gözü ve zihni dinlendirdiğine dair bilgiler mevcut ancak web 2.0 için sadece yeşili baz almak bana kalırsa çok yanlış. Tüm renklerin ve uyarlamaların web 2.0 da yeri olduğunu söylemek daha doğru olacaktır. Mavi, Turuncu, Siyah, (özellikle siyahta şu sıralar büyük bir furya var ve yeni açılan birçok site artık siyah alanlara daha çok öncelik veriyor) Pembe, Kırmızı (kırmızı rengi de es geçmemek gerekir, özellikle beyaz ve kombinasyonlarında hoş görüntüler yakalanabiliyor) ağırlıklı olan renk grupları içinde. Tabi ki unutmamak gerekir ki renk uyumu sitemizin bütünlüğünü korumak adına en büyük etkenlerden birisi. Günümüz webinde dominant (baskın) renk uygulamasıyla destekleyici renkleri de kullanarak iyi bir görünüm elde etme şansınız oldukça yüksek. Hatta bu uyumu sağlayabilmek için internette birçok web sitesi oluşturulmuş; yazılarımızın, içeriğimizin hangi renkte nasıl duracağından tutun, en iyi uyumu belirlemeye kadar birçok işi yapıyorlar. Kısacası web 2.0 ile birlikte donuk renklerden kurtulup daha tatlı ve göze iyi gelen renkleri tercih ediyoruz.

8- Site Logoları

Site logoları da Web 2.0 furyasında deÄŸiÅŸimden nasibini alıyor. Logolarımızı artık daha sade ve web 2.0′ın genel özellikerini yansıtarak tasarlamaya özen gösteriyoruz. Yukarıda bahsettiÄŸim kalın ve büyük fontlar, gradient efektleri, yıldız ve etiket efektleri logolarımıza uyguladığımız efektlerin birkaçı. Bununla birlikte bazı firma ve sitelerin web 2.0 tarzı logolara geçmek için kendi logolarını revise ettiÄŸini de söyleyebiliriz.

Bunun en yakın ve önemli örneÄŸi Mynet olsa gerek. Mynet kısa zaman öncesinde logosunu deÄŸiÅŸtirdi ve bana kalırsa web 2.0′a biraz daha uygun bir logo tasarımı yakaladı. (YiÄŸidi öldür hakkını yeme)  Web 2.0 dizin sitelerinde inceleyeceÄŸiniz üzere logolar çok sade ve klasik biçimde duruyor. Sanki tek elden çıkmışlar gibi, ancak tek elden çıkma deÄŸil tek anlayıştan çıkma oldukları aÅŸikar. Söz gelimi SmashingMagazine’nin kullanıcılarına bir yarışma aracılığıyla tasarlattığı yeni logosunu ve katılımcı logoları görmenizi salık veririm. Ne anlatılmak istendiÄŸi sanırım orada daha iyi görülecektir.

9- Ajax Kullanımı

Aslına bakılırsa Ajax hiçte yeni olmayan bir web teknolojisi fakat son dönem webinde sıkça kullanılmaya baÅŸlandı. Bu yüzden Ajax ile oluÅŸturulmuÅŸ birçok uygulama ve proje webde karşımıza çıkabiliyor. En basit örneÄŸiyle bloglarımızda kullandığımız yorumların ekleniÅŸi, yazılarımızın gösterimi sırasında bile Ajax destekli scriptlerden yararlanıyoruz. Ajax türevi sürükle bırak (drag-drop), navigasyon, uygulama artık birçok web sitesinde kullanılır oldu. Web 2.0′ın fonksiyonellik ve kullanışlılık ayağında Ajax’ın büyük bir payı olduÄŸunu söylersek sanırım hata etmiÅŸ olmayız. Söz gelimi bir alışveriÅŸ sitesinde ürünün alışveriÅŸ sepetine eklenmesi kullanıcıyı tıkla, ürünü gör, sepete ekle gibi zahmetlerden kurtarıp iÅŸini daha hızlı yapmasını saÄŸlıyor. Bununla birlikte birçok büyük site uygulama (API) bazlı tasarımlarda Ajax’ı tercih ediyor.

10- Tag Clouds (Etiket Bulutu)

Etiket bulutları çoğu sitede gördüğümüz ve kategorilerin, içeriklerin çok olandan az olana doğru sıralanarak bir bulut şeklinde gösterildiği uygulamalar. Çoğunlukla blog tarzı sitelerde kullanılmasına rağmen birçok haber ve portal sitesi de bu uygulamayı kullanıyor. Günümüzde kategori sıralamasından çok Etiket Bulutunun tercih edildiğini ve kullanıcılar tarafından daha fonksiyonel bulunduğunu söyleyebiliriz.

11- Oval Köşeler

Evet işte benim favorim neredeyse tüm sitelerimi oval yapma peşindeyim :)
Artık keskin köşeli dikdörtgenler yerine Web 2.0 furyasıyla birlikte oval köşeli dörtgenleri tercih eder olduk. Oval köşeler gerçekten de sitemizde görünüm olarak büyük katkılar saÄŸlıyorlar. Gerek içerik gerekse de navigasyon alanlarında kullanılan oval köşeler web 2.0′ın kliÅŸe özellikleri arasına girmiÅŸ durumda. Webde inceleyeceÄŸiniz birçok sitede oval köşelerin kullanımını görebilirsiniz.

12- Borders (Kenarlık)

Kenarlıklar son dönemlerde çokça kullanılan özelliklerden birisi. Gerek içeriklerde gerekse de resimlerde kenarlıklar (border) kullanılıyor. Kalın kenarlıklar ve kenarlıklarda yapılan renklendirmeler sitede kullanıldığı alanda büyük bir vurgu yaratıyor. En çok kullanılan yerler ise sayfamızın sağ, sol bölümünde görülen ve genellikle #wrap, body parametreleriyle kullanılan kenarlıklar ve resimlerde bağlantılar olduğunda kullanılan kenarlıklar.

13- Background (Arka Plan)

Arkaplanlar sitemizde çoğu zaman es geçtiğimiz özelliklerden birisidir. Ancak web 2.0 ile birlikte özellikle beyaz, gradient arkaplanlar tercih edilir olmuştur. Birçok sitede bu özelliği görebilirsiniz. Bunun dışında Texture (Doku) ve resim tarzı arkaplanları da görmemiz mümkün. Sitemizdeki genel renk bütünlüğünü korumak adına beyazın arkaplan rengi olarak tercih edilmesi ve beyaz alanın gerektiği yerde kullanılması web 2.0 havası veren birçok sitede görülen bir özellik.

14- W3 Standartları

Yukarıda sıraladığımız birçok özellik kullanılırken standartlara uyum gözardı edilmiyor. Belki de ençok dikkat edilen hususta bu olsa gerek. Bunca güzel web sitesinin tasarlanırken web standartlarına baÄŸlı kalınması aslında bu ÅŸekilde de çok iyi ve baÅŸarılı web sitelerinin tasarlanabileceÄŸine dair iyi bir örnek teÅŸkil ediyor. Web 2.0′ın vuku bulmasını saÄŸlayan W3C standartlarına baÄŸlı kalarakta iyi ve tam uyumlu bir web sitesi tasarımı yapmak hiçte zor deÄŸil.

Bazı Web 2.0 örnek web siteleri ;
Woopid
BidBlink
Dailyrt
Kazle
Blurtt
Twitter
FriendFeed

Yazımızı paylaşmak ister misiniz?
  1. Eline sağlık Oktay. Web 2.0 için güzel bir çalışma olmuş. Yeni nesil internetin nasıl olduğunu anlamamız için bize çok yardımcı oldu. Devamını bekliyorum.

  2. cok guzel bir calisma yapmissin arkadasim tsk ederim bunun icin iyi calismalar dilerim

    ayla zorlu

  3. Teşekkürler Oktay Web 2.0 Sade Ve güzel Bir Şekilde anlatmışsın paylasımların devamını bekleriz

  4. Sat Anlage says:

    Webmaster cok tesekkurler…

    Selamlar Elen

  5. çok güzel bir yazı olmuş benim kültür mantarı sitem var oraya bunu uygulayacam

Trackbacks/Pingbacks

  1. grafik tasarım - grafik tasarım... [...]Web 2.0 Nedir ? | Oktay Çomak[...]...

Leave a Reply