Arşiv

Etiketlenen yazılar web

C# ile Image Crawler Uygulaması

29 Aralık 2009 2 yorum

Daha önce yazdığımız C# ile WebCrawler Uygulamasına ek olarak, bu sefer, sayfadaki resimleri bulup, ekranda gösteren bir uygulama yazacağız.

Uygulamamız, bir web sayfasına bağlacak, sayfadaki img taglarının src değerlerini bir diziye dolduracak ve bu diziyi ekranda gösterecek. Dizi’den bir satır seçildiğinde, ilgili resmi ekrana getirecek.

Hemen aşağıdaki ekran görüntüsünü oluşturarak uygulamayı yazmaya başlayalım;

Bir web sayfasındaki resimleri bulmak için, List<string> tipinde değer döndüren ResimleriBul() isimli fonksiyon yazacağız. Bu fonksiyon adres bilgisini parametre olarak alacak, sayfadaki her img tagının src özelliğini bir listeye ekleyecek. Geriye bu liste’yi döndürecek.

private List<string> ResimleriBul(string adres)
{
	List<string> arrReturn = new List<string>();

	WebRequest wr = WebRequest.Create(txtAdres.Text);
	WebResponse ws = wr.GetResponse();
	StreamReader sr = new StreamReader(ws.GetResponseStream(), Encoding.UTF8);
	string response = sr.ReadToEnd();
	sr.Close();
	ws.Close();

	string imageHtmlCode = "<img";
	string imageSrcCode = "src=\"";

	int index = response.IndexOf(imageHtmlCode);
	while (index != -1)
	{
		response = response.Substring(index);

		int tagSonu = response.IndexOf('>');
		int baslangic = response.IndexOf(imageSrcCode) + imageSrcCode.Length;
		int bitis = response.IndexOf('"', baslangic + 1);

		if (bitis > baslangic && baslangic < tagSonu)
			arrReturn.Add(response.Substring(baslangic, bitis - baslangic));

		if (imageHtmlCode.Length < response.Length)
			index = response.IndexOf(imageHtmlCode, imageHtmlCode.Length);
		else
			index = -1;
	}

	return arrReturn;
}

ResimleriBul butonunun Click olayında, ResimleriBul() fonksiyonunun döndürdüğü her öğe, ListBox kontrolüne dolduracak.

private void btnResimleriBul_Click(object sender, EventArgs e)
{
	lbResimListe.Items.Clear();

	foreach (string image in ResimleriBul(txtAdres.Text))
		lbResimListe.Items.Add(image);
}

Son olarak, ListBox’ın seçili elemanı her değiştiğinde, PictureBox’ta seçili resim gösterilecek.

private void lbResimListe_SelectedIndexChanged(object sender, EventArgs e)
{
	pbResim.Load(lbResimListe.SelectedItem.ToString());
}

Uygulamanın kaynak kodlarını buradan indirebilirsiniz.

C# ile WebCrawler Uygulaması

24 Aralık 2009 3 yorum

Google, Bing, Yahoo gibi arama motorları, internetteki sayfaları indexlemek için web crawler denilen programcıklar kullanırlar.

Crawler’ların çalışma mantığı basittir;

  1. Web sayfasına git
  2. Sayfanın içeriğini indexle
  3. Sayfadaki her link için 1. adıma geri dön

Crawler’ın, sayfadaki linkleri bulabilmesi anahtar adımdır.

Yazacağımız uygulamada, bir web crawler gibi sayfadaki linkleri bulacağız.

Ekran görüntüsündeki formu oluşturduktan sonra, Buton‘un Click olayına ait kodu yazmaya başlayalım.

private void btnLinkleriBul_Click(object sender, EventArgs e)
{
	WebRequest wr = WebRequest.Create(txtAdres.Text);
	WebResponse ws = wr.GetResponse();
	StreamReader sr = new StreamReader(ws.GetResponseStream(), Encoding.UTF8);
	string response = sr.ReadToEnd();
	sr.Close();
	ws.Close();

	Regex r = new Regex("<a.+href=\"http.+://(.+)\">(.*)</a>");
	foreach (Match m in r.Matches(response))
	{
		string link = m.Groups[1].Value;
		if (link.IndexOf("\"") > -1)
			link = link.Substring(0, link.IndexOf("\""));
		string metin = m.Groups[2].Value;

		ListViewItem oItem = new ListViewItem(new string[] { metin, link });
		lvSonuc.Items.Add(oItem);
	}
}

Code Challenge #1 ve C# ile Google PageRank Bulma yazılarında kullandığım tekniğin aynısı ile sayfanın içeriğini string değişkene alıyoruz.

WebRequest wr = WebRequest.Create(txtAdres.Text);
WebResponse ws = wr.GetResponse();
StreamReader sr = new StreamReader(ws.GetResponseStream(), Encoding.UTF8);
string response = sr.ReadToEnd();
sr.Close();
ws.Close();

Daha sonra, Regex sınıfından yeni bir örnek oluşturup (constructer’ına verdiğimiz parametre önemli), dönen sonuç kümesinin içeriğini ListView kontrolüne dolduruyoruz.

Eğer sayfanın içeriğini tuttuğumuz değişkeni veritabanına yazsak, ve sayfada bulduğumuz her link için bu adımları tekrar yapsak, tam bir web crawler uygulaması yazmış olacaktık.

Ama bu noktadan itibaren uygulamayı geliştirmeyi size bırakıyorum (BilgeAdam’daki öğrencilerime hep dediğim gibi, “Bundan sonrası size ödev!”)

Projenin bu halini şuradan indirebilirsiniz.

Silverlight 4 TextTrimming özelliği

Silverlight 3 ve öncesi versiyonlarda, yazı alanına sığmayan metinleri, üç nokta ekleyerek trim etmek için, kendi kontrolümüzü yazmamız gerekiyordu.

Mesela, elimizde şöyle uzun bir yazı olsun;

Silverlight helps you create rich web applications that run on Mac OS, Windows, and Linux. Welcome to a new level of engaging, rich, safe, secure, and scalable cross-platform experience.

Bu yazıyı, 250px’lik bir metin alanında göstermemiz lazım, ama sığmayan kısımları yanyana üç nokta ile göstermemiz gerekiyor.

Silverlight helps you create rich web applications …

Silverlight 4 versiyonundan önce, bu isteğimizi yerine getirmek için, kendi TextBlock kontrolümüzü yazmamız gerekirdi.

Silverlight 4 versiyonla birlikte ise, TextBlock kontrolünün TextTrimming=”WordEllipsis” özelliğini kullanabiliyoruz.

Örnek kod:

<TextBlock FontSize="16" TextTrimming="WordEllipsis" Width="250"
Text="Silverlight helps you create rich web applications that run on Mac OS, Windows, and Linux. Welcome to a new level of engaging, rich, safe, secure, and scalable cross-platform experience." />

PDC 2009′da Silverlight 4 Beta yayınlandı

18 Kasım 2009 tarihinde, Microsoft PDC’09 (Microsoft Proffessional Developers Conference 2009) konferansında konuşmacı Scott Gutherie, Silverlight 4 Beta’nın yayınlandığını duyurdu.

Resmi sitesi silverlight.net‘te yer alan şu sayfadan ayrıntılı bilgiye ulaşabilirsiniz.

Channel9′da yeralan video‘dan yenilik olarak nelerin geleceğini izleyebilirsiniz.

Yeniliklerden kısaca bahsetmek gerekirse;

  • Yazdırma ile ilgili yenilikler
  • Zengin Metin Alanı kontrolünün eklenmesi
  • Datagrid üzerinde kolonlara otomatik genişlik verilebilmesi ve Kopyalama desteği
  • Fare tekerlerine gelen destek
  • Sağ tuş desteği
  • Windows’un panosuna erişim imkanı
  • Browser içerisindeki silverlight nesnesinin sürükle-bırak tekniğinde bırakma noktası olarak belirlenebilmesi
  • Webcamerası ve Mikrofon desteği
  • PNG dosya türünün tüm formatlarına tam destek
  • Out-Of-Browser moduna daha çok destek
  • WebBrowser kontrolü
  • İstemci bilgisayarın dosya sistemine erişim yeteneği
  • Google Chrome desteği
  • Multi-touch desteği

Listenin tamamına ve açıklamalarına buradan ulaşabilirsiniz.

Silverlight ekibi 4. versiyonun betasını yayınlarken, Expression Blend ekibi de boş durmamış ve Silverlight 4 çıktı üretebilen Expression Blend versiyonunun beta’sını yayınlamış.

Microsoft Download’da yer alan şu sayfadan Expression Blend Preview for .Net 4 versiyonunu indirebilirsiniz.

jQuery için SlideShow eklentisi : CrossSlide

22 Kasım 2009 3 yorum

jQuery ile uygulama geliştirirken en büyük avantajımız, web’de çok fazla plugin bulabilmemizdir.

Bir arkadaşımın sorusu üzerine, slide-show yaptırabileceği jQuery plugin’i aramaya başladım.

Karşılaştığım birkaç plugin’den en çok hoşuma giden, CrossSlide oldu.

Örnek kullanımını görmek için demo sayfasına bakabilirsiniz.

Sıkıştırılmamış hali 11Kb olan plugin’i şuradan indirebilirsiniz. (Nedense plugin’in minify versiyonu bulunmuyor.)

Minify halini arayan geliştiriciler için, plugin’i http://jscompress.com adresinden minify ettirdim. Minify edilmiş halini (6.46Kb) buradan download edebilirsiniz.

Minify edilmiş halini değil, packed halini download etmek istiyorsanız, aynı siteden packed (4.59Kb) ettirdim. Onu da buradan download edebilirsiniz.

jQuery için web’de bulabileceğiniz diğer slide-show eklentileri;

CSS tekniği ile uyarı / bilgi mesaj alanı

Yazdığımız web uygulamalarında, uyarı / bilgilendirme mesajı vermeye her zaman ihtiyaç duyarız.

Gelelim, CSS tekniklerini kullanarak, bu mesaj kutularını nasıl yapabileceğimize.

Öncelikle style’larımızı yazdığımız css dosyasına, şu satırları ekleyelim;

.alert
{
  background: #fff6bf url(exclamation.png) 15px 50% no-repeat;
  text-align: left;
  padding: 5px 20px 5px 45px;
  border-top: 2px solid #ffd324;
  border-bottom: 2px solid #ffd324;
}
.info
{
  background: #f8fafc url(information.png) 15px 50% no-repeat;
  text-align: left;
  padding: 5px 20px 5px 45px;
  border-top: 2px solid #b5d4fe;
  border-bottom: 2px solid #b5d4fe;
}

Şimdi tek yapmamız gereken, paragraf tagları arasına mesajımızı yazmak ve paragraf tagına ilgili class’ı atamak.

Örnek;

<p class="alert">Uyarı mesajı buraya gelecek.</p>

<p class="info">Bilgilendirme mesajı buraya gelecek.
Birden fazla satır olabilir.</p>

İşte sonuç;

CSS_Mesaj_Kutulari

Demo sayfasını görmek ve kodları indirmek için tıklayın.

Şu adreste, bu tekniğin uygulandığı, download edilebilir kodları bulabilirsiniz.

Yazının orjinaline ise şu kaynaktan ulaşabilirsiniz.

CSS ile resim önyükleme (image preloading) tekniği

İstediğiniz resimleri, aşağıdaki css tekniği ile önyükleyebilirsiniz.

#preloadedImages
{
  width: 0px;
  height: 0px;
  display: inline;
  background-image: url(path/imageA.png);
  background-image: url(path/imageB.png);
  background-image: url(path/imageC.png);
  background-image: url(path/imageD.png);
  background-image: url(path/imageE.png);
  background-image: url();
}

Ajax “Yükleniyor” simgesi bulabileceğiniz güzel bir kaynak

Yazdığınız uygulamalarda, yükleniyor simgesine ihtiyacınız olursa, kesinlikle şu siteye bir göz atmanızı tavsiye ederim: ajaxload.info

“Generator” kısmında yer alan seçenekleri, isteğinize / ihtiyacınıza göre belirledikten sonra, “Generate It!” butonuna tıklıyorsunuz.

“Preview” kısmında, yükleniyor simgeniz hareketli olarak beliriyor.

Eğer seçmiş olduğunuz ayarlar sonucu oluşan simge hoşunuza gittiyse, “Download It!” butonuna tıklayarak hareketli gif formatında download edebilirsiniz.

Google, HTTP protokolüne alternatif olarak SPDY üzerinde çalışıyor

Google, “Let’s make the web faster” vizyonu çerçevesinde pazara sürekli yeni ürünler/teknolojiler çıkartmaya devam ediyor.

Şuradan tamamını okuyabileceğiniz döküman ile HTTP protokolüne alternatif geliştirdiğini de öğrenmiş olduk.

Yeni protokole SPDY (SPeeDY şeklinde telaffuz ediliyor) ismini vermişler ve SSL üstünde çalışmasını sağlamışlar.

SPDY protokolünün tanımını yaptıkları dokümanda, HTTP’nin şu limitlerinden bahsediyorlar;

Bağlantı başına tek istek : HTTP, aynı anda tek kaynak talep edebilir, getirebilir. HTTP protokolü aynı anda tek istekte bulunabiliyor ve bu istekleri FIFO (First In, First Out) mantığı ile kuyruğa alıp işliyor.

Browser’lar bu problemi çözebilmek için, aynı anda 2 bağlantı açıyorlardı, 2008 yılından beri hemen hemen tüm browserlar, aynı anda bağlantı sayısını 6′ya çıkarttılar.

Sadece istemci istekte bulunabilir : HTTP protokolünde, sunucudan isteği sadece istemci yapabilir. Hatta sunucu, istemci’nin bir kaynağa ihtiyacı olduğunu bilse bile, istemci adına bu kaynağa erişip, sonucu istemciye döndüremez.

Request ve Response Header’larının sıkıştırılamaması : Günümüzde request header’larının boyutu, 200 bayt ile 2 kilobayt arasında değişiyor. Uygulamanızda cookie vs. kullanıyorsanız, boyut ortalama 700-800 bayt oluyor. Her isteğin (request) ve cevabın (response) headerında yer alan bilginin sıkıştırılmadan taşınması, önemli gecikmelere yol açmaktadır.

Gereksiz header bilgileri : Header’da hiç değişmeyecek bilgilerin (User-Agent, Host, Accept, … gibi) tekrar tekrar gönderilmesi gereksizdir. HTTP protokolü, bu bilgileri her isteğin ve cevabın headerına ekliyor.

Veri sıkıştırmasının varsayılan olmaması : HTTP protokolünde veri, varsayılan olarak sıkıştırılmamış formattadır. SPDY protokolünde Google, varsayılan olarak verinin tamamının sıkıştırılmış formatta olmasını sağlıyor. Devamını oku…