View
1
Download
0
Category
Preview:
Citation preview
6/9/2007 Sabanci University 1
Web Teknoloji KavramlarıAhmet Demirelli
ahmetdemirelli@sabanciuniv.edu
MCP, SCJP 5.0 , SCWCD 1.4
Sabancı ÜniversitesiBilişim Teknolojileri
Yüksek Lisans Programı
6/9/2007 Sabanci University 2
Ajanda
� CSS� RSS� SOAP
� Web Servisleri
� AJAX� Avantajları� Dezavantajları
� MASHUP
6/9/2007 Sabanci University 3
CSS
6/9/2007 Sabanci University 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 5
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
}
style1.css
6/9/2007 Sabanci University 6
CSS
CSSCSS
style1.css
Page1Page1
Page2Page2
Page4Page4
Page3Page3
� 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.
6/9/2007 Sabanci University 7
CSS Ornek
� style1.css
� style2.css
� index.html
6/9/2007 Sabanci University 8
RSS
6/9/2007 Sabanci University 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 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 11
RSS
RSS Reader
Yahoo News RSSYahoo News RSS
Politic News RSSPolitic News RSS
Sport News RSSSport News RSS
CNN News RSSCNN News RSS
6/9/2007 Sabanci University 12
RSS Ornek
6/9/2007 Sabanci University 13
SOAP
6/9/2007 Sabanci University 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 15
Web Servisleri & SOAP
HTTPHTTPWeb Service Client
Web Service Client
WeatherWeb Service
GetWeather ( )
WeatherWeb Service
GetWeather ( )
Application Server
SOAP Request Message
SOAP Response Message
6/9/2007 Sabanci University 16
SOAP RequestPOST /globalweather.asmx HTTP/1.1 Host: www.webservicex.netContent-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/XMLSchema-
instance" 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 17
SOAP ResponseHTTP/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/XMLSchema-
instance" 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 18
Web Service Örnek
� Basit bir web servis örneği
6/9/2007 Sabanci University 19
AJAX
6/9/2007 Sabanci University 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 21
Neden AJAX ihtiyacı
Urün Ismi GirAra
ListeleÜrün seçSatın Al
Girdi KontrolVeritabanı bağlantısıGeridönen sonuçlar
Girdi KontrolVeritabanı bağlantısıGeridönen sonuçlar
Kredi KartıAdres Bilgileri
Submit
Girdi KontrolKredi Kartı OnaylamaVeritabanı bağlantısı
Satın AlımınOnaylanması
Verilerin Veritabanına Girilmesi ve onay
İşlem BaşarıylaGerçekleştirildi
Basit bir web uygulaması
6/9/2007 Sabanci University 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 23
Neden AJAX ihtiyacı
Satın Alma
İşlemler
Girdi Kontrol
Veritabanı işlemleri
Hataların bulunması
Arayüz
Urun ListesiBileşeni
Urun Listesi (DIV)
Kredikart Formu (DIV)
Adres Formu (DIV)
Hatalar
(DIV)
Kredi KartBileşeni
Fatura BilgileriBileşeni
HTML bunun için yetersiz kalır
6/9/2007 Sabanci University 24
Nasıl Çalışır ?
AJAX
JavaScript
XML
HTML
CSS
DOM
HTTP
6/9/2007 Sabanci University 25
<script type=“text/javascript”>
function illeriGoster() {
… yeni request nesnesi (url, parms)
… callback fonksiyonu belirle
(sonucIsle())
… sunucuya gönder
}
Nasıl Çalışır ?
XMLHttpRequest
function sonucIsle() {
…sunucudan gelen mesajı al
…mesajın yazılacağı nesneyi al
…mesajı yaz
}
A
Bilgi Listele Servlet
bilgileriAlServlet( req, res) {request bilgilerini alveritabanından bilgiyi çekbilgiyi clienta döndür
}
UygulamaSunucusu
AdanaAdıyamanAfyon.....
6/9/2007 Sabanci University 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 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 28
Örnek Ajax Uygulamaları
Googl
e Sugg
est
Googl
e Docs
Googl
e
Spread
sheets
Kiko O
nline
Takvim
Uygul
aması
6/9/2007 Sabanci University 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 30
MASHUP
6/9/2007 Sabanci University 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 32
Örnek Mashup
Müşteri AdresleriMüşteri Adresleri
Google MapAPI
Google MapAPI
Mashup Uygulaması
6/9/2007 Sabanci University 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 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 35
ahmetdemirelli@sabanciuniv.edu
SORULAR ??SORULAR ??
Recommended