Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir?

Tarihçe
Tanım
Web 1.0 ve Web 2.0 farklar
Temel Yapıtaşlar
Teknoloji

Zengin Kullanıcı Deneyimi
Birlikte Çalışma ve Paylaşım
)
Web Bileşenleri

Web 2.0

BirazKritik
IBM

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir? -Tarihçe
Web 2.0;
O'Reilly Media tarafından 2004'de kullanılmaya başlayan bir
sözcüktür ve ikinci nesil internet hizmetlerini - toplumsal
iletişim sitelerini, vikileri, iletişim araçlarını, folksonomileri- yani
internet kullanıcılarının ortaklaşa ve paylaşarak yarattığı sistemi
tanımlar.
Kelimenin tam anlamı tartışmaya açıktır, Tim Berners-Lee gibi
teknoloji uzmanları da kelimenin manasını sorgulamıştır.

Tim O'Reilly 2005 Web 2.0
konferansında konuşurken.

Tim O'Reilly'e göre Web 2.0'ın kısmen tanımı şöyledir: "Web 2.0 bilgisayar
endüstrisinde internetin bir düzlem olarak ilerlemesiyle bir işletme devrimi ve bu
düzlemin kurallarını başarı için anlamaya çalışmaktır. Bu kurallar arasında başlıcası
şudur: Ağ etkilerini daha çok insanın kullanabilmesi için programlar kurmak."

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir? -Tanım
Web 2.0;
İnternet çeşitli aşamalar kaydediyor. Şimdi dosya haklarını düşünün, R (okuma), W (yazma),
E (Execute, çalıştırma/yürütme vb).
Web 1.0 zamanlarında bizim okuma hakkımız vardı. Gazete açardık okurduk. Geocities'e
sayfa koyarlardı okurduk. Yani sadece bilgiyi tüketen konumda kullanıcı vardı, daha doğrusu
bu kadarına izin verilen bir kullanıcı topluluğu vardı. Kullanıcının rolü sabitti. Read = oku.
Web 2.0 ile birlikte write = yaz hakkını elde ettik. Mesela ekşisözlük, wikipedia çıktı, artık
sözlükleri ansiklopedileri yazar hale geldik. Mesela blog siteleri çıktı, kendi blogumuzu kurar
hale, Youtube vb. ile kendi video kanalımızı kurar hale geldik.

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir? -Web 1.0 ve Web 2.0 Arasındaki Farklar

)
BirazKritik
IBM

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir? -Yapıtaşları

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir? -Teknolojileri

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir?
Zengin Kullanıcı Deneyimi
Birlikte Çalışma ve Paylaşım
)
Web Bileşenleri

Web 2.0

BirazKritik
IBM

Sosyal Ağlar
Bloglama
Wikiler
Tagging
RSS & Atom

Fırat Üniversitesi Bilgisayar Mühendisliği
Birlikte Çalışma ve Paylaşım – Sosyal Ağlar

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Birlikte Çalışma ve Paylaşım – Bloglar

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Birlikte Çalışma ve Paylaşım – Wikiler

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Birlikte Çalışma ve Paylaşım – Tagging

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Birlikte Çalışma ve Paylaşım – RSS & Atom

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web 2.0 nedir?
Zengin Kullanıcı Deneyimi
Birlikte Çalışma ve Paylaşım
)
Web Bileşenleri

Web 2.0

BirazKritik
IBM
Ajax
Ajax da örnek bir uygulama

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax
1)Sunucuya İsteğimizi Göndermek:
•

İlk olarak “XML http Request” bileşenini kullanıyoruz.

if(window.XMLHttpRequest){
//Mozilla,Opera gibi tarayıcılar için.
http_istegi=new XMLHttpRequest();
}
else if(window.ActiveXObject){ //Internet Explorer için.
http_istegi=new ActiveXObject(“Microsoft.XMLHTTP”);
}

•

Daha sonra istek oluşturan nesnemize gelecek cevabı işleyecek
olan fonksiyonumuzu belirtiyoruz. Bunu nesnenin
onreadystatechange özelliğini atayarak yapıyoruz.

http_istegi.onreadystatechange=fonksiyonunAdi;

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax
1)Sunucuya İsteğimizi Göndermek:
•

Şu ana kadar sunucu cevabının nasıl işleneceğini belirlemiş
olduk.Bu adımdan sonra gerçek bir talepte bulunmak için open()
ve send() metodlarını kullanıyoruz.

http_istegi.open(‘GET’, ‘http://www.ornek.org/bir.dosya’,true);
http_istegi.send(null);

•

•

Web 2.0

Open() metodunun ilk parametresi(GET) veriyi almak için
kullanılıyor.İkinci parametre url adresini belirtiyor. Üçüncü
parametre (true) isteğimizin eşzamanlı olup olmadığını
belirtiyor. AJAX’ın asenkronluk özelliği burada karşımıza çıkıyor.
Send() metodu ise sunucuya bilgilerimizi göndermeyi sağlıyor.

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax
2)Sunucudan Gelen Cevabı İşlemek:
•

İsteğimizi sunucuya doğru bir şekilde gönderdikten sonra
yapılması gereken işlem veriyi düzgün bir şekilde alabilmek.
Bunun için önceki kısımda tanımladığımız fonksiyonumuza
aşağıdaki kodları yazıyoruz.

if(http_istegi.readyState=4){
//yanıt alındı,her şey yolunda
}
else{
//henüz hazır değil
}

•
•
•
•
•

Web 2.0

Burada durum değerinin 4 olması yanıt
tamamlandığı anlamına geliyor. Diğer durumlar:
0(başlatılamadı)
1(yükleniyor)
2(yüklendi)
3(etkileşimli)

dönüşünün

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax
2)Sunucudan Gelen Cevabı İşlemek:
•

Bu adımdan sonra http sunucu yanıtının durum kodu kontrol
edilir. Sağlıklı bir yanıt gelmişse durum kodu 200 değerini alır.

if(http_istegi.status==200){
//mükemmel
}
else {
//istekle ilgili bir sorun var
//mesela 404(sayfa bulunamadı)
}
• Şu ana kadar yaptığımız işlemler sonucunda istek gönderdik, yanıtını
aldık ve veri elimize ulaşmış oldu. Veriyi görüntülemek için
http_istegi.responseText ya da http_istegi.responseXML fonksiyonları
kullanılır.
•

Web 2.0

Yazdığımız kodları birleştirdiğimizde basit bir AJAX uygulaması elde
etmiş oluyoruz.

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax

AJAX’ın Avantajları
• Ağ trafiğini azaltır.
• Kullanıcının gereksiz yere
beklemesini önler.
• Önceden bilinen teknolojilerden
oluşur.
• Siteleri Java ve Flash gibi karmaşık
yapıdaki uygulamalardan kurtarır.
Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax

AJAX’ın Dezavantajları
• Güvenlik sorunu vardır.
• Eski sürüm tarayıcılarda sorun
olabilir.
• Tarayıcılarda yer alan geri tuşunun
işlevini kaybetmesine sebep olur.
• Arama motorlarında ajax içerikleri
tanınmaz.
Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Web Bileşenleri – Ajax

Sonuç
• AJAX web sayfalarının hızlanmasını ve
daha konforlu hale gelmesini sağlıyor.
AJAX içeriğine sahip web siteleri gün
geçtikçe artıyor.
•

Web 2.0

Google gibi önemli bir şirketin
neredeyse tüm uygulamalarında AJAX’ı
kullanması, bu tekniğin daha da
gelişeceğini gösteriyor.
Fırat Üniversitesi Bilgisayar Mühendisliği
Türkiyede Web 2.0
Türkiye'de Web 2.0 iki ayrı açıdan katkı almıştır. Web1.0'dan
Web 2.0 dönemine kalan ve popülerliklerini devam ettiren siteler,
bunlar Ekşi Sözlük, Zurna.com gibi sosyal siteler. Ve de Web 2.0
zamanında ortaya çıkan yeni siteler. Bunların arasında da
Yonja.com, Bildirgec.com, Blogcu.com sayılabilir. Daha sonraları
da Web2.0 projelerinin artmasıyla, Web 2.0 haberciliği de
popülerleşti. Webrazzi blogu vasıtasıyla yeni web 2.0 girişimleri
takip edilebilmektedir.

Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği
Dinlediğiniz için teşekkürler…
Sorular?

04260037 – Yılmaz BERKTAŞ
05260802 – Hamza AYDIN
Web 2.0

Fırat Üniversitesi Bilgisayar Mühendisliği

Web2.0

  • 1.
    Web 2.0 Fırat ÜniversitesiBilgisayar Mühendisliği
  • 2.
    Web 2.0 nedir? Tarihçe Tanım Web1.0 ve Web 2.0 farklar Temel Yapıtaşlar Teknoloji Zengin Kullanıcı Deneyimi Birlikte Çalışma ve Paylaşım ) Web Bileşenleri Web 2.0 BirazKritik IBM Fırat Üniversitesi Bilgisayar Mühendisliği
  • 3.
    Web 2.0 nedir?-Tarihçe Web 2.0; O'Reilly Media tarafından 2004'de kullanılmaya başlayan bir sözcüktür ve ikinci nesil internet hizmetlerini - toplumsal iletişim sitelerini, vikileri, iletişim araçlarını, folksonomileri- yani internet kullanıcılarının ortaklaşa ve paylaşarak yarattığı sistemi tanımlar. Kelimenin tam anlamı tartışmaya açıktır, Tim Berners-Lee gibi teknoloji uzmanları da kelimenin manasını sorgulamıştır. Tim O'Reilly 2005 Web 2.0 konferansında konuşurken. Tim O'Reilly'e göre Web 2.0'ın kısmen tanımı şöyledir: "Web 2.0 bilgisayar endüstrisinde internetin bir düzlem olarak ilerlemesiyle bir işletme devrimi ve bu düzlemin kurallarını başarı için anlamaya çalışmaktır. Bu kurallar arasında başlıcası şudur: Ağ etkilerini daha çok insanın kullanabilmesi için programlar kurmak." Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 4.
    Web 2.0 nedir?-Tanım Web 2.0; İnternet çeşitli aşamalar kaydediyor. Şimdi dosya haklarını düşünün, R (okuma), W (yazma), E (Execute, çalıştırma/yürütme vb). Web 1.0 zamanlarında bizim okuma hakkımız vardı. Gazete açardık okurduk. Geocities'e sayfa koyarlardı okurduk. Yani sadece bilgiyi tüketen konumda kullanıcı vardı, daha doğrusu bu kadarına izin verilen bir kullanıcı topluluğu vardı. Kullanıcının rolü sabitti. Read = oku. Web 2.0 ile birlikte write = yaz hakkını elde ettik. Mesela ekşisözlük, wikipedia çıktı, artık sözlükleri ansiklopedileri yazar hale geldik. Mesela blog siteleri çıktı, kendi blogumuzu kurar hale, Youtube vb. ile kendi video kanalımızı kurar hale geldik. Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 5.
    Web 2.0 nedir?-Web 1.0 ve Web 2.0 Arasındaki Farklar ) BirazKritik IBM Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 6.
    Web 2.0 nedir?-Yapıtaşları Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 7.
    Web 2.0 nedir?-Teknolojileri Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 8.
    Web 2.0 nedir? ZenginKullanıcı Deneyimi Birlikte Çalışma ve Paylaşım ) Web Bileşenleri Web 2.0 BirazKritik IBM Sosyal Ağlar Bloglama Wikiler Tagging RSS & Atom Fırat Üniversitesi Bilgisayar Mühendisliği
  • 9.
    Birlikte Çalışma vePaylaşım – Sosyal Ağlar Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 10.
    Birlikte Çalışma vePaylaşım – Bloglar Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 11.
    Birlikte Çalışma vePaylaşım – Wikiler Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 12.
    Birlikte Çalışma vePaylaşım – Tagging Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 13.
    Birlikte Çalışma vePaylaşım – RSS & Atom Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 14.
    Web 2.0 nedir? ZenginKullanıcı Deneyimi Birlikte Çalışma ve Paylaşım ) Web Bileşenleri Web 2.0 BirazKritik IBM Ajax Ajax da örnek bir uygulama Fırat Üniversitesi Bilgisayar Mühendisliği
  • 15.
    Web Bileşenleri –Ajax Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 16.
    Web Bileşenleri –Ajax Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 17.
    Web Bileşenleri –Ajax 1)Sunucuya İsteğimizi Göndermek: • İlk olarak “XML http Request” bileşenini kullanıyoruz. if(window.XMLHttpRequest){ //Mozilla,Opera gibi tarayıcılar için. http_istegi=new XMLHttpRequest(); } else if(window.ActiveXObject){ //Internet Explorer için. http_istegi=new ActiveXObject(“Microsoft.XMLHTTP”); } • Daha sonra istek oluşturan nesnemize gelecek cevabı işleyecek olan fonksiyonumuzu belirtiyoruz. Bunu nesnenin onreadystatechange özelliğini atayarak yapıyoruz. http_istegi.onreadystatechange=fonksiyonunAdi; Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 18.
    Web Bileşenleri –Ajax 1)Sunucuya İsteğimizi Göndermek: • Şu ana kadar sunucu cevabının nasıl işleneceğini belirlemiş olduk.Bu adımdan sonra gerçek bir talepte bulunmak için open() ve send() metodlarını kullanıyoruz. http_istegi.open(‘GET’, ‘http://www.ornek.org/bir.dosya’,true); http_istegi.send(null); • • Web 2.0 Open() metodunun ilk parametresi(GET) veriyi almak için kullanılıyor.İkinci parametre url adresini belirtiyor. Üçüncü parametre (true) isteğimizin eşzamanlı olup olmadığını belirtiyor. AJAX’ın asenkronluk özelliği burada karşımıza çıkıyor. Send() metodu ise sunucuya bilgilerimizi göndermeyi sağlıyor. Fırat Üniversitesi Bilgisayar Mühendisliği
  • 19.
    Web Bileşenleri –Ajax 2)Sunucudan Gelen Cevabı İşlemek: • İsteğimizi sunucuya doğru bir şekilde gönderdikten sonra yapılması gereken işlem veriyi düzgün bir şekilde alabilmek. Bunun için önceki kısımda tanımladığımız fonksiyonumuza aşağıdaki kodları yazıyoruz. if(http_istegi.readyState=4){ //yanıt alındı,her şey yolunda } else{ //henüz hazır değil } • • • • • Web 2.0 Burada durum değerinin 4 olması yanıt tamamlandığı anlamına geliyor. Diğer durumlar: 0(başlatılamadı) 1(yükleniyor) 2(yüklendi) 3(etkileşimli) dönüşünün Fırat Üniversitesi Bilgisayar Mühendisliği
  • 20.
    Web Bileşenleri –Ajax 2)Sunucudan Gelen Cevabı İşlemek: • Bu adımdan sonra http sunucu yanıtının durum kodu kontrol edilir. Sağlıklı bir yanıt gelmişse durum kodu 200 değerini alır. if(http_istegi.status==200){ //mükemmel } else { //istekle ilgili bir sorun var //mesela 404(sayfa bulunamadı) } • Şu ana kadar yaptığımız işlemler sonucunda istek gönderdik, yanıtını aldık ve veri elimize ulaşmış oldu. Veriyi görüntülemek için http_istegi.responseText ya da http_istegi.responseXML fonksiyonları kullanılır. • Web 2.0 Yazdığımız kodları birleştirdiğimizde basit bir AJAX uygulaması elde etmiş oluyoruz. Fırat Üniversitesi Bilgisayar Mühendisliği
  • 21.
    Web Bileşenleri –Ajax AJAX’ın Avantajları • Ağ trafiğini azaltır. • Kullanıcının gereksiz yere beklemesini önler. • Önceden bilinen teknolojilerden oluşur. • Siteleri Java ve Flash gibi karmaşık yapıdaki uygulamalardan kurtarır. Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 22.
    Web Bileşenleri –Ajax AJAX’ın Dezavantajları • Güvenlik sorunu vardır. • Eski sürüm tarayıcılarda sorun olabilir. • Tarayıcılarda yer alan geri tuşunun işlevini kaybetmesine sebep olur. • Arama motorlarında ajax içerikleri tanınmaz. Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 23.
    Web Bileşenleri –Ajax Sonuç • AJAX web sayfalarının hızlanmasını ve daha konforlu hale gelmesini sağlıyor. AJAX içeriğine sahip web siteleri gün geçtikçe artıyor. • Web 2.0 Google gibi önemli bir şirketin neredeyse tüm uygulamalarında AJAX’ı kullanması, bu tekniğin daha da gelişeceğini gösteriyor. Fırat Üniversitesi Bilgisayar Mühendisliği
  • 24.
    Türkiyede Web 2.0 Türkiye'deWeb 2.0 iki ayrı açıdan katkı almıştır. Web1.0'dan Web 2.0 dönemine kalan ve popülerliklerini devam ettiren siteler, bunlar Ekşi Sözlük, Zurna.com gibi sosyal siteler. Ve de Web 2.0 zamanında ortaya çıkan yeni siteler. Bunların arasında da Yonja.com, Bildirgec.com, Blogcu.com sayılabilir. Daha sonraları da Web2.0 projelerinin artmasıyla, Web 2.0 haberciliği de popülerleşti. Webrazzi blogu vasıtasıyla yeni web 2.0 girişimleri takip edilebilmektedir. Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği
  • 25.
    Dinlediğiniz için teşekkürler… Sorular? 04260037– Yılmaz BERKTAŞ 05260802 – Hamza AYDIN Web 2.0 Fırat Üniversitesi Bilgisayar Mühendisliği