Web Technolojileri
Upcoming SlideShare
Loading in...5
×
 

Web Technolojileri

on

  • 6,836 views

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

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

Statistics

Views

Total Views
6,836
Views on SlideShare
6,834
Embed Views
2

Actions

Likes
2
Downloads
88
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Technolojileri Web Technolojileri Presentation Transcript

  • 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 <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
  • 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> ç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
  • 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 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
  • 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
  • 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
  • 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ı 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
  • 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ı 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
  • Nasıl Çalışır ? HTTP HTML JavaScript AJAX CSS XML DOM 6/9/2007 Sabanci University 24
  • 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
  • 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ı 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
  • Ö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 Müşteri Adresleri Adresleri Google Map Google Map API 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