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
Ajanda CSS RSS SOAP Web Servisleri AJAX Avantajları Dezavantajları MASHUP 6/9/2007 Sabanci University 2
CSS 6/9/2007 Sabanci University 3
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
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
CSS Belirlemiş olduğumuz stili sayfalarımıza uygulamak için, sayfların <head> </head> etiketleri arasına linki yazılır. <link href= style1.css rel=stylesheet type=text/css> Page1 Page1 style1.css CSS CSS Page2 Page2 Page3 Page3 Page4 Page4 6/9/2007 Sabanci University 6
CSS Ornek style1.css style2.css index.html 6/9/2007 Sabanci University 7
RSS 6/9/2007 Sabanci University 8
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
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>içerik Başlığı</title> <link>iç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
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
RSS Ornek 6/9/2007 Sabanci University 12
SOAP 6/9/2007 Sabanci University 13
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
Web Servisleri & SOAP Application Server SOAP Request Message Web Web Service Client Client HTTP SOAP Response Message Weather Web Web Service Service GetWeather (()) 6/9/2007 Sabanci University 15
SOAP Request POST /globalweather.asmx HTTP/1.1 Host: www.webservicex.net Content-Type: text/xml; charset=utf-8 Content-Length: length SOAPAction: "http://www.webservicex.net/getweather" <?xml version="1.0" encoding="utf-8"?> <soap:envelope xmlns:xsi="http://www.w3.org/2001/xmlschemainstance" xmlns:xsd="http://www.w3.org/2001/xmlschema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:body> <GetWeather xmlns="http://www.webservicex.net"> <CityName>string</CityName> <CountryName>string</CountryName> </GetWeather> </soap:body> </soap:envelope> 6/9/2007 Sabanci University 16
SOAP Response HTTP/1.1 200 OK Content-Type: text/xml; charset=utf-8 Content-Length: length <?xml version="1.0" encoding="utf-8"?> <soap:envelope xmlns:xsi="http://www.w3.org/2001/xmlschemainstance" xmlns:xsd="http://www.w3.org/2001/xmlschema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:body> <GetWeatherResponse xmlns="http://www.webservicex.net"> <GetWeatherResult>string</GetWeatherResult> </GetWeatherResponse> </soap:body> </soap:envelope> 6/9/2007 Sabanci University 17
Web Service Örnek Basit bir web servis örneği 6/9/2007 Sabanci University 18
AJAX 6/9/2007 Sabanci University 19
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
Neden AJAX ihtiyacı Basit bir web uygulaması Urün Ismi Gir Ara Girdi Kontrol Veritabanı bağlantısı Geridönen sonuçlar Listele Ürün seç Satın Al Girdi Kontrol Veritabanı bağlantısı Geridönen sonuçlar Kredi Kartı Adres Bilgileri Submit Girdi Kontrol Kredi Kartı Onaylama Veritabanı bağlantısı Satın Alımın Onaylanması Verilerin Veritabanına Girilmesi ve onay İşlem Başarıyla Gerçekleştirildi 6/9/2007 Sabanci University 21
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
Neden AJAX ihtiyacı Satın Alma Urun Listesi (DIV) Kredikart Formu (DIV) Hatalar (DIV) İşlemler Girdi Kontrol Veritabanı işlemleri Urun Listesi Bileşeni Kredi Kart Bileşeni Adres Formu (DIV) Hataların bulunması Arayüz Fatura Bilgileri Bileşeni HTML bunun için yetersiz kalır 6/9/2007 Sabanci University 23
Nasıl Çalışır? HTTP JavaScript HTML AJAX CSS XML DOM 6/9/2007 Sabanci University 24
Nasıl Çalışır? <script type= text/javascript > XMLHttpRequest function sonucisle() { sunucudan gelen mesajı al mesajın yazılacağı nesneyi al mesajı yaz } Bilgi Listele Servlet bilgilerialservlet( req, res) { request bilgilerini al veritabanından bilgiyi çek bilgiyi clienta döndür } function illerigoster() { yeni request nesnesi (url, parms) callback fonksiyonu belirle (sonucisle()) sunucuya gönder } A Adana Adıyaman Afyon... Uygulama Sunucusu 6/9/2007 Sabanci University 25
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
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
Örnek Ajax Uygulamaları Google Suggest Google Docs Google Spreadsheets Kiko Online Takvim Uygulaması 6/9/2007 Sabanci University 28
Ö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
MASHUP 6/9/2007 Sabanci University 30
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
Örnek Mashup Mashup Uygulaması Müşteri Adresleri Google Map API 6/9/2007 Sabanci University 32
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
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
SORULAR?? ahmetdemirelli@sabanciuniv.edu 6/9/2007 Sabanci University 35