Web Technolojileri

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


CSS


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


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
}


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

CSS Ornek
style1.css
style2.css
index.html


RSS


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/


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>


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


RSS Ornek


SOAP


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.


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


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>


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>


Web Service Örnek
Basit bir web servis örneği


AJAX


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


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

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


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


Nasıl Çalışır ?
HTTP

HTML
JavaScript

AJAX

CSS XML

DOM


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
.....


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


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


Ö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

Ö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
.....


MASHUP


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.

Örnek Mashup
Mashup Uygulaması Müşteri
Müşteri
Adresleri
Adresleri

Google Map
Google Map
API
API


Mashup API
Popüler Mashup API leri
Amazon Web Services
del.icio.us
digg
eBay
FeedBurner
Flickr
Google
Twitter
Virtual Earth
YouTube


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

SORULAR ??
ahmetdemirelli@sabanciuniv.edu


Web Technolojileri

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Web Technolojileri

Ähnlich wie Web Technolojileri (20)

Web Technolojileri