bildirgec.org

Bazen web sitenizde yer alan bazı metin bloklarının yazıtipi boyutunu, dahili oldukları kapsayıcılara tam olarak sığabilmesi için değiştirmek isteyebilirsiniz. Ancak bu metin blokları sürekli olarak güncelleniyorsa ya da her bir metin bloğu için ayrı ayrı stil tanımlamak istemiyorsanız, o zaman metin boyutunu kullanılan kelime sayısına göre otomatik olarak tanımlamak isteyebilirsiniz.

Bunu gerçekleştirmek JavaScript kütüphaneleri kullanarak mümkün.

Plan

• Hedeflediğiniz paragrafı belirleyin.
• Paragrafı kelime dizilerine bölümleyin ve her bir boşlukta kelime sayısını bir arttırın.
• Dizinin uzunluğunu hesaplayın.
• Yazıtipi boyutunu uzunluğa göre belirleyin.

Bunu mooTools İle Yapmak İçin

TIOBE programlama topluluğunun her ay güncellediği ve bir önceki yılın aynı ayı ile karşılaştırdığı en popüler programlama dili sıralamasında 2009 mart ayının birincisi java oldu.
java’yı c, c++, php, VB, python dillerinin izlediği mart ayı sıralamasınını başlığı ise “javascript her zaman yükselişte, perl her zaman düşüşte” oldu.

Spry Framework

Merhabalar,

Bir önceki yazımda Spry’ı kulanma nedenleri ile birlikte efektleri işlemiştik. Şimdi ise Spry ile ipucu (tip) oluşturmayı deniyeceğiz. Önce Spry’ı bu adrestenindirelim .
Sonra sayfamıza şu dosyaları dahil(include) edelim.

1
2

<script src="http://arsiv.pilli.com/http://arsiv.pilli.com/js/SpryTooltip.js" type="text/javascript"></script>
<link href="css/oylesinebircssadresi.css" rel="stylesheet" type="text/css" />

Şimdi tooltip için Javascript kodumuzu yazıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12

var sprytooltip1 = new Spry.Widget.Tooltip("cssip", "#css", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip2 = new Spry.Widget.Tooltip("htmlip", "#html", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip3 = new Spry.Widget.Tooltip("phpip", "#php", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip4 = new Spry.Widget.Tooltip("aspip", "#asp", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });

Şimdi kodu inceliyelim. varsprytooltip1 ile ipucunu tanımlıyoruz. şimdi “cssip” olan tarafın nedemek olduğunu anlayalım. Mouse cssip idsine sahip olan yere geldinde tooltipi gösterecek. “css” ise açıklanacak olan ipucunun içeriği. Şimdi setuplara ({ } arasına) bakalım.

Tarayıcıların css kodlarını yorumlarken farklılıklar göstermesi tüm site geliştiricilerinin korkulu rüyası olmuştur. Geliştiricilerin kurtarıcısı ise yine javascript oldu. Catswhocode sitesi sık karşılaşılan css problemleri için gerekli 8 javascript çözümü sunmuş.

Problemler için sunulan çözümler aşağıda:

1. JQuery ile transparan arkaplanlar
2. Her tarayıcıya farklı css kullanımı
3. JQuery ile tablo sütunlarında dengeli yükseklikler
4. JQuery ile yuvarlanmış köşeler
5. IE Overflow hatasının çözümü
6. Yatay hizalamalar
7. Resim önyüklemeleri
8. IE6’ya ölüm!

Listedeki sorunlar ve çözümleri hakkındaki ayrıntılı açıklamalara buradan ulaşabilirsiniz.

Merhabalar,

Spry framework

Piyasada bir çok Javascript framework’u bulmak mümkün. Bunlardan en popülerleri jQuery, Prototype ve Mootools olarak sıralanabilir. Ama kullanacağınız ufak efekt işlemleri, form kontrolleri için bu kütüphaneleri eklemeniz gereksiz olabilir ve performans kaybı olur. Bu nedenle Spry’ı kullanmak kârlı olacak gibi duruyor. Spry Adobe Labs tarafından geliştiriliyor. Spry’ı bu adresten indirebilirsiniz.
Adobe’ye göre Spry’ı geliştirme nedenleri;

Web sayfaları geliştiren tüm heskesin bildiği gibi, projelerimizde inline (yani sayfa içinde) çeşitli scriptler yazabileceğimiz gibi, scriptleri (yani çalışan program parçacıklarını) bir başka dosya (veya dosyalar) içinde tutup ön sayfalara referans kodlarıyla dahil ederek, html kodlarımızda sadeliği (ve iş bölümünde kolaylığı) arttırmış oluyoruz.

Aşağıda yapacağımız çalışma için bize jQuery isimli javascript kütüphanesi gerekmektedir. Çünkü bu kütüphane AJAX işlemlerini kolay bir şekilde halledebiliyor. Gelin şimdi bu kütüphaneyi standart yollardan sayfamıza dahil edilecek örneği verelim. Böylece hem istemci taraflı tasarıma yeni başlamış arkadaşlarımıza include (dahil etme) için örnek oluşturalım hem de normal yollardan bir scriptin ne şekilde sayfaya dahil edildiğine yeniden bakmış olalım. Bu şekilde aşağılarda anlatacağımız gibi standardın dışına çıkarak web sayfalarımıza başka yollardan script dosyalarını dinamik bir şekilde yüklediğimizde meydana getirdiğimiz farklılığı gözler önüne sermiş olacağız.

Bildiğiniz gibi jQuery bir çok javascript işlemini daha basit ve anlaşılır hale getirmiş bir kütüphanedir. AJAX’ta javascript’in en büyük nimetlerinden biri olduğu için, en ünlü kütüphanelerde olduğu gibi jQuery içindeki yerini almıştır. Proje geliştirebilmek için öncelikle web sayfalarınıza kütüphanenin son sürümünü sitesinden indirerek dahil etmelisiniz.

Şimdi bir örnek verelim;

1

<script src="http://arsiv.pilli.com/jquery.js"></script>

1
2
3
4
5
6
7
8

$.ajax({
   type: "POST",
   url: "http://google.com",
   data: "q=kodaman&deneme=abcd",
   success: function(mesaj){
     alert(mesaj);
   }
 });

type nesnesi, yapacağınız isteğin yollanma türüdür. Nasıl ki html formlarda veri gönderimi yapabiliyorsak, ajax ile de yapacağımız talebin yanında çeşitli değişkenleri sunucuya gönderebiliyoruz.

Bir çok web master’ın vazgeçilmezleri arasına girmeyi başarmış bir kütüphane olan jQuery ile uygulamalarak yazabilmek için öncelikle web sitesinden son sürümünü indirmelisiniz.

Ardından uygun bir klasör açın ve html uzantısına sahip bir boş dosya oluşturun. İndirdiğiniz jQuery dosyasını da bu klasöre taşıyın. Boş dosyanızı not defteri ile açarak aşağıdaki kodu ekleyin.

1

<script src="http://arsiv.pilli.com/jquery_isminiz_yazin.js"></script>

Bu şekilde kütüphaneyi, efekt uygulaması yapmak istediğimiz sayfamıza dahil ettik.

Artık hepimizin çok iyi bir şekilde bildiği bir durum var ki o da google’ın insanlar tarafından kolayca alşılabilecek yapıdaki URL (web adresleri) kullanılmamızı arzu ettiğidir. SEO (Search Engine Optimizations – Arama Motoru Optimizasyonu) kurallarından en değerlisi bile diyebiliriz. Bir örnek verecek olursak;

1

http://arsiv.pilli.com/bu-bir-deneme-adresidir.html

oysa çoğu sitede karşımıza şu görünümdeki adresler çıkar;

1

http://arsiv.pilli.com/makale.asp?makID=1471

ve doğal olarak google yukarıda verdiğimiz ilk örneği daha çok sevmektedir. Çünkü insanlar sayfamızı daha açmadan, ne ile ilgili olduğunu fark edebilirler.

klasik asp ve iis6.0 kullanarak bu işlemi kendi becerimizle yapacağız. Aksi halde iis’in, asp için URL’lere müdehale edebilmemize olanak verdiği özel bir yöntemi bulunmuyor. Kendi tekniklerimizle bizi baş başa bırakmayı daha uygun görmüşler.

resim ve fotoğraf galerileri konusunda hem javascript hem css hem flash teknolojilerini sıklıkla kullananlarımız vardır. bu yüzden favori seçeneğim olan flash galerileri konusunda ek bir kaynak olarak bu bildiriyi yazmak istedim.

daha önce yazdığım javascript resim galerisi, flash resim galerisi ve hollanda kökenli şu sitede bulduğum html ve flash örneklerini hala çok beğenmekle beraber flash teknolojisini kullanan +20 flash galerisini daha uzun uzun inceleyeceğinizden eminim.

%100 ücretsiz olan flashgaleri örneği daha önce bildirgec’te incelenmiş ve büyük beğeni almıştı. 11kb’lık boyutu da dikkat çekici.