JavaScript | bildirgec.org

Henüz tam olarak yaygınlaşmayan ve geliştirme süreci devam eden HTML5 ve CSS3 ile şu anki durumda bile muhteşem uygulamalar yaratılmakta. Web sayfalarını tamamen interaktif ve etkileşimli hale getiren ayrıca görsel açıdan farklı ögeler yaratan bu tasarım dilleri yeni sürümleri ile oldukça fark yaratmakta. Aşağıdaki uygulamaların nasıl yapıldıklarını inceleyebilir veya tamamı ücretsiz olarak dağıtıldığı için siz de web sitenizde kullanabilirsiniz. İlgi Çekici HTML5 ve CSS3 Uygulamaları;

CanvasMol

Slidenafill, aklınıza gelebilecek her molekülü size gösterebilen harika bir html5 uygulaması. ATP, TNT, DNA gibi bazı molekülleri 3 boyutlu olarak gösterir. Ayrıca isterseniz renklendirmeyi değiştirebilir; x,y,z eksenleri etranfında oynatmayı durdurabilirsiniz. Birbirine bağlı birçok bloktan oluşan uygulama içinde bir periyoduk cetvelde bulunmakta.

GoogleBox

Google'ın 3 boyutlu heryönden gözükebilen şekli olan Googlebox bir css3 uygulamasıdır. Kutuyu istediğiniz gibi görebilmenizin yanında boyutlarını değiştirebiliyorsunuz.

Oldukça ilgi çekici bir jQuery eklentisi olan Bubble Engine, Web sitenize Flash kullanmaya gerek duymadan sadece Javascript kodları ile bir baloncuk/kabarcık motoru/üreteci ekleyebilmenizi sağlamakta.

Bubble Engine ile üreteceğiniz baloncukların; büyüklük oranlarını belirleyebilir, renklendirebilir, baloncukların yaşam sürelerini ayarlayabilir ve başlangıç konumlarını ve yönlerini düzenleyebilirsiniz.

Fancy Sliding, diğer slider uygulamalarının aksine sadece form örnekleri üzerine kurulmuş bir jQuery uygulamasıdır. Ücretsiz olarak kullanabileceğiniz ve nasıl yapıldığını öğrendiğiniz bu uygulama ile uzun ve karmaşık üyelik, iletişim, alışveriş formlarınızı kısaltarak tek sayfada toplayabilirsiniz.

Fancy Sliding, kullanıcılarınızı yormadan form doldurtmak için kullanabileceğiniz jQuery ve css ile hazırlanmış muhteşem bir uygulamadır. Sistemli yapısı sayesinde formlarınızı kullanıcılarınızın daha fazla hoşuna gidecek şekilde ayarlayabilir veya web siteniz birden fazla form örneği içeriyorsa hepsini bir sayfada kategorilendirebilirsiniz.

Web sayfalarının iskelet dili HTML'nin fırından yeni çıkmış versiyonu HTML5 ile gelen acar elemanı video tag'ini terbiye ederek keyfinize göre kullanabilmenizi sağlayacak bir MooTools kütüphanesi olan Moovie, video tag'i ve dolayısıyla videolar üzerindeki bu hakimiyeti, ücretsiz olarak sunmakta.

Moovie kütüphanesi, Youtube video oynatıcılarında gördüğümüz standart butonları (play, pause, stop), ses konrolörünü ve durum/ilerleme çubuğunu ekleyebilmemizi/kullanabilmenizi sağlamakta. Ayrıca yükleme hatası durumunda hata mesajı verme, playlist desteği ve dil seçim desteği gibi özellikleri de bünyesinde barındırmakta.

Moovie kütüphanesine hemen buradan ulaşabilir ve kullanım ile ilgili gerekli olan tüm bilgileri elde edebilirsiniz.Tanıtım sayfasında bulunan demo gösterimi inceledikten sonra bu demonun kaynak kodlarından yararlanabilirsiniz.

Tek sayfalık web tasarımlarında, genelde içerik tek bir sayfaya sığdırıldığı için css ve javascript'e ağırlık verilmekte.jQuery ile slider vb. uygulamalar yapılırken css3 ile tasarımı ögelerini güçlendirerek daha şık durması sağlanabilir. Aşağıda içeriğinde birçok javascript uygulaması barındıran tasarım örnekleri bulunmakta. Bu örnekleri inceleyerek sizde tek sayfalık tasarımlar hakkında fikir sahibi olabilir veya farklı örnekleri inceleyebilirsiniz. Yaratıcı Tek Sayfalık Web Tasarımları;

Adam Woodhouse

Jan-Eike Koormann

David Spink

Mediocore - David Arazim

jsTree, jQuery eklentisi olarak paketlenen çapraz tarayıcı ağaç bileşenidir.Javascript tabanlı olan bu uygulama üzerinde kategorili listeleme yapabileceğiniz gibi üzerinde kayıtlı bulunan tüm girdiler üzerinden eşzamanlı olarak işlem yapabilirsiniz.

Listeleme, Site Haritası hatta menü olarakta kullanılabilecek çok yönlü bir uygulama olan jsTree, ücretsiz olarak dağıtılmakta, ayrıca GPL ve MIT lisanslarına sahip bir jQuery uygulamasıdır.

Kategoriler ekleme, anında isim değişikliği, dosya ve klasörleri düzeltebilme/silebilme, sürükle-bırak özelliği ile içerisindeki nesneleri herhangi bir klasör yada katagori içerisinden bir başkasına taşıyabilme gibi birçok özelliği bulunmaktadır.

Tema desteği sayesinde tamamen kişiselleştirilebilir ve HTML, JSON, XML gibi verikaynaklarının birçoğunu destekler. Ayrıca değiştirilebilen animasyonlu açılışı ve sayfa harici yükleme özelliği bulunmakta. Arama fonksiyonu, çerezleri optimize etme, klavye ile işlem yapma gibi özellikleri ile jsTree muhteşem bir uygulamadır.

Html 5, henüz tüm tarayıcılar tarafından desteklenmese ve geliştirilme aşamasında olsa da oldukça etkileyici bir dildir. Eklenen yeni elementler sayesinde klasik web yapısı değişerek tamamen interaktif hale gelmiştir. Artık html ile web sayfalarımızda videolar oynatabiliyor veya farklı animasyonlar yaratabiliyoruz. Aşağıdaki uygulamaları inceleyerek siz de benzer çalışmalarda bulunabilirsiniz. İşte Muhteşem HTML5 Animasyon Uygulamaları;
Tunnelers

Plasma Tree

Bomomo

The Mesmerizer

Jcrop, herhangi bir imajı üzerinde kesme, kırpma, kopyalama gibi imaj üzerinden yapılabilecek bazı işlemleri gerçekleştirmek için arayüz oluşturabilen interaktif bir uygulamadır. Jcrop herhangi bir imaj dosyasının belirli bir bölümünü seçmeye yarayan muhteşem bir jQuery uygulamasıdır.

Jcrop ile her türlü imajın belirli bir bölümünü seçerek bu imaj üzerinden çeşitli işlemler yapabilirsiniz. Seçtiğiniz bölgenin koordinatlarını (x1, x2, y1, y2, w,h) öğrenebilir, farklı bir bölgede sadece kestiğiniz kısmı normal veya yakınlaşmış olarak görebilir veya sadece seçili kısmı değişikliğe uğramaz halde gösterebilirsiniz.

Tüm bu seçme işlemleri sonrasında resme farklı tooltip şeklinde notlar ekleyebilir (Facebook'taki gibi), imajın seçili bölgesini daha yakından göstererek ürününüzün kalitesini gösterebilir veya imaj üzerinden kesme, kırma, efektler uygulama gibi farklı işlemleri farklı yöntemlerle gerçekleştirebilirsiniz. Ayrıca Jcrop üzerinde farklı renkler kullanarak web sitenize göre kişiselleştirebilirsiniz.