bildirgec.org

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.

JavaScript‘ler web sitelerin vazgeçilmez kaynaklarıdır. JS ile kullanıcı dostu, interaktif arayüzler oluşturulurken bu arayüzlerin tarayıcıdan (browser) tarayıcıya farklılık göstermesi, hem web site geliştiricisi hem sitenin ziyaretçisi açısından en istenilmeyen durumlardan bir tanesidir.

JavaScript’in gücü ve etkileyici yanları çeşitli açık kaynak kodlu JavaScript kütüphanesinin yazılmasını sağladı. Bu kütüphanelerden siteler için hazırlanmış, açık kaynak kodlu, görselliği etkileyici ve çeşitli tarayıcılarda testleri yapılmış ExtJS ve ExtGWT‘den bahsetmek istiyorum.

Bu JS kütüphaneleri, yüksek performans elde etmek, zengin internet uygulamaları üretmek amacıyla geliştirilmiş.

Demolarda da göreceğiniz üzerine Ajax‘sal özellikler kütüphanelerin beğeni kazanmasını sağlıyor.

Şimdi ExtJS‘den örneklere bakalım.

• ExtJS Feed Viewer (demo)
  
  ExtJS Feed Viewer

Spry nedir?
Spry adobe‘ye ait bir yeniliktir. Birkaç yerde okuduğuma göre amaç Ajax‘ı en popüler hale getirmekmiş.

DW ile Spry arasındaki bağ…
Spry bağımsız da çalışabilir ama esasında Dreamweaver (DW) ile eşleşmiş bir yazılımdır. DW CS3 ile gelen bir yenilik.

Bu yenilik şunları yapabilir:
Yazılara, linklere efekt verebilir. ŞU ADRESten spry effect’lerin adını, adına tıkladığınızda da görevinin tanıtımını görebilirsiniz.

SPRY başka ne yapar?
Hani şu genelde haber sitelerinde gördüğümüz sekme panelleri vardır. (örnek) İşte mesela onu pratik bir şekilde oluşturabilir ve düzenleyebilir.
Ya da mesela menüler vardır ki bu menüler; alt menüleri de olan dinamik menülerdir. (örnek) işte bunu da yapabilir. (Spry ile sadece 3. alt menüye kadar inebiliyorsunuz.)

Spry’leri birleştirip örnek olarak bakın adobe bize neler yapmış…
1) Foto Galeri yapmış. (kaynak kodları) (tanıtımı)
2) Dinamik Form yapmış. (kaynak kodları) (tanıtımı)
3) Diğerleri de BURADA.

Siz de Spry özelliğini kullanarak bu tip scriptler yazabilirsiniz. Bu upload scriptti olabilir, fotograf galerisi olabilir artık arz-talep meselesi…

Merhaba, örneğin php ile curl kütüphanesi kullanılarak bize ait olmayan bir siteden veri alınabiliyor. (sunucunun ip siyle)

Aynı şeyi javascript ile yapmam gerekiyor. Ya da şöyle söyleyeyim. Aslında neyle yapılacağının hiç önemi yok. Yeter ki veri alınacak siteye sunucunun ip si değil de kullanıcının ip si gitsin.

JS in xmlhttprequest nesnesini kullanarak denemeler yaptım ancak güvenlik engeliyle karşılaştım. xmlhttprequest tarayıcı ile sunucu arasında iletişim sağlıyor ancak gidip başka bir sunucudan veriyi almıyor.

Biraz somutlaştırayım:

iyi bir resim gösterme aracı becerikli, kolay kullanışlı, işlevsel ve mümkünse az sorunlu olmalı. genelleme yaparsak hepimizin isteği aşağı yukarı bunlar. Floatbox kolay kullanımının yanı sıra tam bir lightbox klonu. yukarıdaki özellikleri tamamen içinde barındırıyor ve tamamen ücretsiz.

Standalone images
Image galleries
Slideshows
AJAX html content
Iframe html content
Inline hidden divs
Flash
Quicktime
Online multi-media services (YouTube, Yahoo Video, etc.)

gibi özellikleri kolayca kullanabiliyorsunuz. multi-media, Popup thumbnail ve info/ gayet başarılı buldum. tecrübe etmenizi tavsiye ederim. diğer linkler şu şekilde:
demo sayfası
indirme sayfası
forum sayfası

Web sitelerde sayfalar arası sorgulanacak çeşitli bilgileri taşımada form ve ona ait elemanları kullanırız. Varsayılan (default) olarak gelen form elemanları görünümlerini (radyo butonu, seçme kutucukları, yazı alanları, listeler vs.) siteye farklılık katmak için genellikle CSS ile düzenleriz.

Bu iş için, MooTools‘u destekleyen JavaScript kütüphanesi geliştirilmiş ve her türlü javascript çatısı altında çalışabiliyor.

js-hotkeys bir JQuery eklentisi. Bu eklenti ile basılan tuşları kontrol edebilir, onların neden olacağı, tetikleyeceği olayları düzenleyebilirsiniz.

ctrl + a
ctrl + b
ctrl + x

gibi tuş kombinasyonlarını yönetebilirsiniz.

Bu ve benzer tuş kontrolleri ile web sayfanızda üye çıkışı, foruma yeni başlık aç gibi işlemleri hızlı bir şekilde yaptırabilirsiniz.

Hotkeys

Şu sayfada klavye tuşları ile yaptıklarınızı demo olarak görebilirsiniz.

Sexy AlertBox ve SexyLightBox, web siteler için çok hoş ve çekici uyarı ve bilgi mesajı kutuları.

Uyarı mesajı (alert box) ve bilgi mesajının (information box) yanı sıra bu kutucukların içine resim, flash veya site koyabiliyorsunuz.

Sexy LightBox

Sexy AlertBox

yakın zamanda ücretsiz flash galeri uygulamalarından bahsetmiştim. onlara ek olarak Vision da son derece ufak boyuta sahip (18 kb) resim görüntüleme uygulaması. kurulumunun kolay olması, genişletilebilir olması ve resimlerin bulunduğu klasöre yeni resimler eklendikçe otomatik olarak güncelleme yapması uygulamanın avantajları arasında yer alıyor. En azından denemeye değer…

bildirgeç’te daha önce verilen bildiriler:

Javascript ile uğraşanlar için Dustin Diaz isimli arkadaş her zaman kullanacakları fonksiyonları içeren bir js dosyası meydana getirmiş. Tabii tek başına değil.. Her fonksiyonu ayri bir yazılımcı yazmış. Bu fonksiyonların içerisinde sıkça karşılaşılan getElemensById() , getCookie, setCookie gibi işlemler de var. buradan indirilebilir.

Öte yandan burada da javascriptle ilgili 10 yararlı yöntem bulabilirsiniz. numerik sıralama, düzenli ifadeler, ajax ve dizide arama yapma gibi işlemleri gerçekleştiren fonksiyonlar mevcut.