bildirgec.org

javascript hakkında tüm yazılar

30 adet ilham verici menü tasarımı

dextarus | 25 November 2010 14:17

Menü bir web sitesi için vazgeçilmezdir. Yatay olsun, dikey olsun, minimalist veya sadece düğmelerden oluşsun bir menüde aranan her zaman anlaşılabilir ve ulaşımının kolay olmasıdır.
Bu yazımda ilham veren menüleriyle sitenizi tasarlarken sizlere fikir verebilecek siteleri tanıtacağım.
Cognition

Justdot

asterisks ile gizlenmiş şifrelerin öğrenilmesi

admin | 12 November 2010 18:39

formlara girdiğimiz şifrelerin gizli olmasından dolayı * işareti ile gösterildiğini hepimiz biliyoruz. bu * işaretinin altında yatan şifremizi bir gün olur da öğrenmemiz icap ederse diye birileri bir javascript kodu yazmış. aramızda bilenler olabilir, bir zamanlar (disket zamanlarında) “ayna” isimli bir program vardı, o program da bu işe yarardı. yani aslında önümüzde duran ama * işareti ile saklanmış olan şifreleri gün ışığına çıkarmaya yarıyorlar.

kod:

1
javascript:(function(){var s,f,j,f,i; s = ""; f = document.forms; for(j=0; j<f.length; ++j) { f = f[j]; for (i=0; i<f.length; ++i) { if (f[i].type.tolowercase() == "password") s += f[i].value + "n"; } } if (s) alert("passwords in forms on this page:" + s); else alert("there are no passwords in forms on this page.");})();

Lucid Desktop

angelsdemos | 06 November 2010 10:26

Lucid, interaktif olarak javascript ile hazırlanan tıpkı masaüstüne benzeyen bir program yapısıdır. Birçok işinizi interaktif ortamda yaparak heryerden erişim sağlayabilmenizi sağlar.

Ofis, medya belge ve dosyalarınızı Lucid ile saklayabilir ve istediğiniz yerden erişebilirsiniz. Twitter, RSS Beslemeleri ve birçok web uygulamasını Lucid’e ekleyerek kullanabilirsiniz. Pencereli sistemi sayesinde içerisinde birden fazla uygulama çalıştırabilir, farklı seklemeler açabilir, ufak işlerinizi halledebilir hatta basit oyunlar oynayabilirsiniz.

Pencere ekleme/düzenleme, gelişmiş dosya sistemi sayesinde dosya ekleme/düzenleme veya ses, video ve metin dosyalarına interaktif olarak ulaşım, yönetim paneli, tema özelliği ile kişiselleştirilebilme gibi birçok farklı özelliği bulunan Lucid‘i ücretsiz olarak kullanabilirsiniz. Çalışanlarınız, arkadaş çevreniz ile kullanabileceğiniz ortak bir uygulama olabilir.

s3Captcha : Görsel Captcha Uygulaması

angelsdemos | 29 October 2010 10:00

s3Captcha, jQuery ile yapılan oldukça hoş bir capcha uygulamasıdır. Diğer captcha uygulamalarının aksine bu uygulama metinler yerine görseller sunarak robotların herhangi methodları kullanarak sitenizi ele geçirmesini engeller.

Captcha, robot ve insan arasındaki farklı bulabilen yazılımlara denir. Herhangi bir soru, resimdeki görselleri girme gibi farklı uygulamalar kullanılarak herhangi bir robotun siteye yük olmaması sağlanır. s3Captcha‘da tamamen açık kaynak kodlu, kişiselleştirilen ve jQuery kütüphanesini kullanan bir yazılımdır.

Mozilla Labs’tan Chromeless

angelsdemos | 27 October 2010 12:43

Mozilla Labs yaptığı duyuru ile yeni projesi Chromeless‘i tanıttı. Popüler internet tarayıcısı Firefox‘un en sade halinden itibaren siz kendi tarayıcınızı; herhangi bir arayüz, tema, eklenti olmadan HTML, CSS ve JavaScript gibi standart web dilleri ile tasarlayabileceksiniz.

“Chromeless: Build your own Browser UI using HTML, CSS and JS” (Chromeless : HTML, CSS ve JS ile Kendi Tarayıcını İnşa Et) başlığı ile yeni ürününü tanıtan Mozilla Labs takımı, yeni projeleri sayesinde kullancıların kişiselliğine önem verdiğini bir kez daha vurguladı. Mozilla Labs’ın XUL kullanımı yerine web dillerini kullanması projeyi oldukça geniş bir kitleye yaydı. Önceden sadece birtakım geliştiricilerin kullanabildiği XUL yerine artık tarayıcınızı değiştirebilecek ve istediğiniz zaman değişiklik yapabileceksiniz.

Web Tasarımcılar için Bookmarklet’ler

angelsdemos | 21 October 2010 09:40

Bookmarklet; tarayıcılar üzerinden kullanabileceğiniz, javascript ile hazırlanan uygulamalara denir. Birçok işlemi sadece bir tık ile halledebilirsiniz. Tüm tarayıcılarda desteklenen Bookmarklet’leri genellikle araç çubuğuna sürükleyerek kullanabilirsiniz. Sizin için derlediğimiz oldukça kullanışlı Bookmarklet’ler;

Print Liminator

Web tasarımcılar için gerekli bir araç olan Print Liminator ile herhangi bir web sayfasındaki ögeleri istediğiniz şekilde kaldırabilirsiniz. Herhangi bir tablo, imaj gibi web sayfanızdaki tüm ögeleri kaldırabilir, web sayfasını anında yazdırabilir ve dilerseniz sayfadaki tüm grafikleri inatkif yapabilirsiniz. Küçük bir tooltip şeklinde sayfanın köşesinde çıkan oldukça başarılı bir uygulama.

Markup

Markup oldukça gerekli ve hoş olan bir çizim aracıdır. Web sitesinin herhangi bir yerini çizebilir, herhangi bir şeyler yazabilirsiniz. Eğer sunum, ders gibi dökümanlar hazırlıyorsanız oldukça yararlı bir uygulama. İsterseniz metinlerin altını da herhangi bir renk ile çizebilirsiniz. Hazır olarak bulunan çizgi, kare, daire şekilleri de bulunmakta.

XRay

Web tasarımcılar için oldulça faydalı bir uygulama olan XRay, bulunduğu sayfadaki tüm element bilgilerini size gösterebilir. Tıkladığınz bölgenin css ve html kodlarını anında ayıklayarak tooltip şeklinde açıklarak birçok bilgiyi size gösterir.

Gelişmiş Çevrimiçi Metin Editörü: elRTE

angelsdemos | 14 October 2010 12:46

elRTE, web sitenizde kullanabileceğiniz açık kaynak kodlu WYSIWYG editördür. Javascript ve jQuery kütüphanesi kullanılarak hazırlanan bu muhteşem HTML editör ile web içeriğinizi istediğiniz gibi kontrol edebilirsiniz.Studio 42 tarafından geliştirilen elRTE’yi ticari olan veya olmayan bloglar, forumlar ve benzer birçok serviste ücretsiz olarak kullanabilirsiniz.

Zengin içeriği ile metin düzenlemenize her yönü ile olanak veren bu editörü kolaylıkla web sitenize entegre edebilir ve sonrasında rahatlıkla kullanabilirsiniz. Ayrıca dilerseniz yazılarınızın biçimlendirilmiş şekildeki html kodlarını görebilirsiniz. Hafif, hızlı ve kolay kolay kullanıma sahip elRTE üzerindeki düzenlemeler css olarak da kaydedilebilir.

Demo modu, Word’den kopyanan yazıları temizleme, ifade ekleme, gelişmiş tablo ve resim ekleme eklentileri ve tam ekran modu ile muhteşem bir derleme aracı olan elRTE ile masaüstü programlardaki tüm özellikleri bulabilir, Gelişmiş bir şekilde metinlerinizi düzenleyebilirsiniz.

Html5 Canvas Uygulamaları

angelsdemos | 13 October 2010 09:35

Html5‘in bu kadar popülerleşmesini sağlayan elementlerden biri de canvas elementidir. Web uygulamalarında oldukça popülerleşebilecek olan canvas, 2D olarak dinamik fotoğraflar yapabileceğiniz bir bileşendir. Javascript üzerinden çalışan bu element ile birçok muhteşem uygulama yapılabilir. Aşağıdaki birbirinden eğlenceli canvas uygulamalarını inceleyebilirsiniz. Html5 Canvas Uygulamaları;

Canvas Aquarium

Tarayacı üzerinden sanal olarak siz de büyük bir akvaryuma ve dilediğiniz kadar balığa sahip olabilirsiniz. Gerçekçi balık hareketleri, hareketli su efektleri, kabarcıklar sayesinde oldukça hoş bir uygulama. Daha fazla balık istiyorsanız akvarmuya tıklamanız yeterli.

Twitter. Canvas. 10K

Arka planında siyah hareketli kabarcıkların bulunduğu ve Twitter ile entegre edilmiş hoş bir Html5 Canvas uygulamasında her bir siyah kabarcık bir Twitter kullanıcısını belirtiyor. Haraketli hoş arka planı sayesinde farklı şekillerde kullanılabilecek çok güzel bir uygulama.

Kullanışlı Html5 video oynatıcı: SublimeVideo

angelsdemos | 12 October 2010 09:44

Html5’in yeniliklerinden biri olan web sayfasında herhangi bir eklenti gerektirmeksizin video oynatabilme özelliğini kullanarak geliştirilmiş SublimeVideo, video oynatıcılarda isteyebileceğiniz tüm özelliklere sahip olan, özelleştirilebilir bir html5 video oynatıcısıdır.

Tüm tarayıcılarda kullanabileceğiniz ayrıca iPhones, iPads ve Android yüklü telefonlarda da kullanılabilecek olan bu muhteşem html5 video player oldukça kullanışlıdır.

Ses kontrolü, tam ekran modu, zaman ve ters zaman göstergesi, boyutlandırma, şık efektler gibi birçok özelliği bulunan bu html5 video oynatıcıda arayabileceğiniz tüm özellikler bulunmakta. Ekstra olarak sayfada tooltip olarak küçük bir pencere olarak video oynatıcıyı açma, videoları galeri şeklinde sıralama gibi özelliklerde bulunuyor.