Web Technolojileri

3,744 views

Published on

Istanbul Bilişim Kongresinde verdiğim RSS,CSS,SOAP,AJAX ve MASHUP hakkındaki seminer slaytları

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,744
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
99
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Technolojileri

  1. 1. Web Teknoloji Kavramları Ahmet Demirelli ahmetdemirelli@sabanciuniv.edu MCP, SCJP 5.0 , SCWCD 1.4 Sabancı Üniversitesi Bilişim Teknolojileri Yüksek Lisans Programı 6/9/2007 Sabanci University 1
  2. 2. Ajanda CSS RSS SOAP Web Servisleri AJAX Avantajları Dezavantajları MASHUP 6/9/2007 Sabanci University 2
  3. 3. CSS 6/9/2007 Sabanci University 3
  4. 4. CSS Cascading Style Sheets HTML e yardımcı bir görüntü biçimleme dili Bir stil şablonu belirleyip sayfa içerisinde istediğimiz alana uygulama Belirlenmiş şablonu ayrı bir dosya halinde başka HTML sayfalarına uygulama 6/9/2007 Sabanci University 4
  5. 5. CSS style1.css solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px solid; BORDER-TOP: #1F9FFF 0px solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS; FONT-SIZE: 9pt; FONT-WEIGHT: bold} body { scrollbar-face-color:#CCCCCC; scrollbar-shadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; font-size: xx-small; border-top-width: thin } 6/9/2007 Sabanci University 5
  6. 6. CSS Belirlemiş olduğumuz stili sayfalarımıza uygulamak için, sayfların <head> </head> etiketleri arasına <link href=“style1.css” rel=stylesheet type=text/css> linki yazılır. Page1 Page1 style1.css Page2 Page2 CSS CSS Page3 Page3 Page4 Page4 6/9/2007 Sabanci University 6
  7. 7. CSS Ornek style1.css style2.css index.html 6/9/2007 Sabanci University 7
  8. 8. RSS 6/9/2007 Sabanci University 8
  9. 9. RSS Nedir? Real Simple Syndication Özel bir XML dosyasıdır. Amaç belirli bir bilgiyi herkesin anlayabileceği bir formatta paylaşıma sunmaktır. Örnek ; Haber Siteleri http://news.yahoo.com/rss http://www.cnn.com/services/rss/ 6/9/2007 Sabanci University 9
  10. 10. RSS Format <channel> <title>Site Başlığı</title> <link>Sitenin Adresi</link> <description>site hakkında kısa bir tanım</description> <language>sitenin dili</language> <item> <title> çerik Başlığı</title> <link> çeriğin Tam Adresi (URI)</link> <description>içerik hakkında kısa bir açıklama veya içeriğin tümü</description> </item> </channel> 6/9/2007 Sabanci University 10
  11. 11. RSS RSS Reader CNN News RSS CNN News RSS Politic News RSS Politic News RSS Yahoo News RSS Yahoo News RSS Sport News RSS Sport News RSS 6/9/2007 Sabanci University 11
  12. 12. RSS Ornek 6/9/2007 Sabanci University 12
  13. 13. SOAP 6/9/2007 Sabanci University 13
  14. 14. SOAP Nedir ? Simple Object Access Protocol Web Servisleri ile haberleşme standardı Web Servisleri; Uzak bir sunucu üzerinde çalışan özel bir method. şleyiş olark herhangi bir metoddan farksızdır, input parametreleri alır ve geriye bir değer döndürür Web servis teknolojisi ise bu methodların uzaktan çağırılabilmelerini sağlayan teknolojidir. SOAP ise; bir web servisine istek gönderirken hangi formatta gönderileceğini ve hangi formatt geri alınacağını belirler B2B uygulamalarda kullanılır. 6/9/2007 Sabanci University 14
  15. 15. Web Servisleri & SOAP Application Server SOAP Request Message Weather HTTP Web Service Weather HTTP Web Service Web Service Client Web Service Client GetWeather (()) GetWeather SOAP Response Message 6/9/2007 Sabanci University 15
  16. 16. SOAP Request POST /globalweather.asmx HTTP/1.1 Host: www.webservicex.net Content-Type: text/xml; charset=utf-8 Content-Length: length SOAPAction: quot;http://www.webserviceX.NET/GetWeatherquot; <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <soap:Envelope xmlns:xsi=quot;http://www.w3.org/2001/XMLSchema- instancequot; xmlns:xsd=quot;http://www.w3.org/2001/XMLSchemaquot; xmlns:soap=quot;http://schemas.xmlsoap.org/soap/envelope/quot;> <soap:Body> <GetWeather xmlns=quot;http://www.webserviceX.NETquot;> <CityName>string</CityName> <CountryName>string</CountryName> </GetWeather> </soap:Body> </soap:Envelope> 6/9/2007 Sabanci University 16
  17. 17. SOAP Response HTTP/1.1 200 OK Content-Type: text/xml; charset=utf-8 Content-Length: length <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <soap:Envelope xmlns:xsi=quot;http://www.w3.org/2001/XMLSchema- instancequot; xmlns:xsd=quot;http://www.w3.org/2001/XMLSchemaquot; xmlns:soap=quot;http://schemas.xmlsoap.org/soap/envelope/quot;> <soap:Body> <GetWeatherResponse xmlns=quot;http://www.webserviceX.NETquot;> <GetWeatherResult>string</GetWeatherResult> </GetWeatherResponse> </soap:Body> </soap:Envelope> 6/9/2007 Sabanci University 17
  18. 18. Web Service Örnek Basit bir web servis örneği 6/9/2007 Sabanci University 18
  19. 19. AJAX 6/9/2007 Sabanci University 19
  20. 20. AJAX Nedir ? AJAX (Asynchronous JavaScript and XML) Bir web uygulama geliştirme tekniğidir. Basit olarak; javascript kullanarak sunucuya bilgi göndermek ve gelen bilgiyi aynı sayfada göstermektir. Bu yüzden web sayfalarının masaüstü(desktop) uygulamalar gibi davranmasını sağlar. Web uygulamalarına getirdiği yeniliklerden dolayı Ajax uygulamaları “Web 2.0” uygulamaları olarakta adlandırılır 6/9/2007 Sabanci University 20
  21. 21. Neden AJAX ihtiyacı Basit bir web uygulaması Girdi Kontrol Girdi Kontrol Listele Urün Ismi Gir Veritabanı bağlantısı Veritabanı bağlantısı Ürün seç Ara Geridönen sonuçlar Geridönen sonuçlar Satın Al Girdi Kontrol Kredi Kartı Satın Alımın Verilerin Veritabanına Kredi Kartı Onaylama Adres Bilgileri Onaylanması Girilmesi ve onay Veritabanı bağlantısı Submit şlem Başarıyla Gerçekleştirildi 6/9/2007 Sabanci University 21
  22. 22. Neden AJAX ihtiyacı Her işlem için ayrı bir sayfa görüntüleme Her işlemin sunucuya (submit) gönderilmesi şlem gerçekleştikten sonra yeni bir sayfaya yönlendirme Her yönlendirme sonucunda sayfaların yeniden yüklenmesi 6/9/2007 Sabanci University 22
  23. 23. Neden AJAX ihtiyacı Urun Listesi Satın Alma Bileşeni Hatalar şlemler (DIV) Urun Listesi (DIV) Kredi Kart Girdi Kontrol Bileşeni Veritabanı işlemleri Kredikart Formu (DIV) Hataların bulunması Fatura Bilgileri Adres Formu (DIV) Bileşeni Arayüz HTML bunun için yetersiz kalır 6/9/2007 Sabanci University 23
  24. 24. Nasıl Çalışır ? HTTP HTML JavaScript AJAX CSS XML DOM 6/9/2007 Sabanci University 24
  25. 25. Nasıl Çalışır ? <script type=“text/javascript”> Bilgi Listele Servlet XMLHttpRequest bilgileriAlServlet( req, res) { request bilgilerini al veritabanından bilgiyi çek bilgiyi clienta döndür function sonucIsle() { } …sunucudan gelen mesajı al …mesajın yazılacağı nesneyi al …mesajı yaz } function illeriGoster() { … yeni request nesnesi (url, parms) … callback fonksiyonu belirle (sonucIsle()) Uygulama … sunucuya gönder } Sunucusu Adana Adıyaman A Afyon ..... 6/9/2007 Sabanci University 25
  26. 26. Avantajları Zengin kullanıcı arayüzü Formlardaki bilgilerin tamamını her defasında sunucuya gönderilmesine gerek yoktur Bu yüzdende network trafiğini azaltır Sunucu tarafındaki teknolojiden bağımsızdır. (Sunucu tarafında, java,.NET, php, perl...vs teknolojilerden herhangibirisi kullanılabilir) Sayfanın tamamı yerine bir bölümünün yenilenmesini sağlar (asenkron çalışma) Sadece submit butonlarıyla sunucuya ulaşmak yerine daha fazla event kullanma imkanı sağlar 6/9/2007 Sabanci University 26
  27. 27. Dezavantajları Back butonu işlevini kaybeder Her browser için ayrı kod yazmak gerekir Çalışılan domain dışındaki bir domaine ulaşılamaz Eğer javascript disable edilmişse çalışmaz Debug edilmesi çok zordur yi bir sunucu taraflı programlamanın yanısıra çok iyi bir javascript bilgiside gereklidir 6/9/2007 Sabanci University 27
  28. 28. Örnek Ajax Uygulamaları t ocs ges D Sug le oog e ogl G Go line n oO Kik vim gle heets ı ak lamas o Go eads T ygu Spr U 6/9/2007 Sabanci University 28
  29. 29. Örnek Ajax Uygulamaları Backbase http://www.backbase.com http://www.backbase.com/RUI/shop.html Real Time HTML Editor http://htmledit.squarefree.com/ Google Maps GTalk ..... 6/9/2007 Sabanci University 29
  30. 30. MASHUP 6/9/2007 Sabanci University 30
  31. 31. Mashup Nedir ? Mashup (Web Application Hybrid) Birden fazla değişik kaynaktan gelen içeriği kullanarak tamamen yeni bir servis oluşturmaktır. Mashup oluşturmak için birden fazla kaynaktan verileri; Web Servisleri RSS API (Hizmeti veren firmanın bize sağladığı interface) aracılığıyla alabiliriz. 6/9/2007 Sabanci University 31
  32. 32. Örnek Mashup Mashup Uygulaması Müşteri Müşteri Adresleri Adresleri Google Map Google Map API API 6/9/2007 Sabanci University 32
  33. 33. Mashup API Popüler Mashup API leri Amazon Web Services del.icio.us digg eBay FeedBurner Flickr Google Twitter Virtual Earth YouTube 6/9/2007 Sabanci University 33
  34. 34. Mashup Örnekleri http://mashupawards.com http://www.hipoqih.com Bir web uygulaması ve bir plugin (mobil cihazlar için) den oluşan bir uygulamadır. Mashup Hakkında Daha Fazla Bilgi çin; http://www.softwaretrainingtutorials .com/mashups.php 6/9/2007 Sabanci University 34
  35. 35. SORULAR ?? ahmetdemirelli@sabanciuniv.edu 6/9/2007 Sabanci University 35

×