Posts Tagged "jquery"
jQuery otomatik tamamlama eklentisi: jQuery.Suggest
Web sitelerinde, özellikle arama satırlarında otomatik tamamlama scripti ile sıkça karşılaşıyoruz. En basit örneğini Google‘ın arama satırında görebilirsiniz. Bu tür scriptler, arama satırına yazmaya başlayan kullanıcıya otomatik önerilerde bulunarak yardımcı olur. jQuery.Suggest adı ile geliştirilen aşağıdaki eklenti de tam olarak bu işe yarıyor. Yazının sonunda bulunan linkten demosunu görebilir ve ücretsiz olarak indirebilirsiniz. Şimdi gelelim eklentinin öne çıkan detaylarına…
Devamını OkujQuery ile sıraya dizerek oy ver: Sort & Vote
Web sitelerine hareket getirme ihtiyacı duyduğumuz her an yardımımıza koşan jQuery, Sort & Vote eklentisi ile online anketlere yeni bir soluk getiriyor. Anket listesindeki şıkları sürüklereyek sıraya dizmemize ve oylamamıza imkan veren eklentiyi ücretsiz olarak indirebilirsiniz.
Demodaki listede resimlerden tutup aşağı – yukarı sürükleyerek öğeleri nasıl sıraya dizebileceğinizi görebilirsiniz. Her standart anket gibi, oy kullandıktan sonra anket sonuçlarını da görüntüleyebiliyorsunuz. Eklentinin hazırlanışının üstünden bayağı bir zaman geçmiş olsa da hala geçerliliğini koruyacak kadar başarılı görünüyor. Bu zamana kadar hiç bir sitede uygulandığını görmemem de şaşırtıcı gerçekten. Bunu mutlaka bir projede kullanmak isterim şahsen. Özellikle yıl sonlarında çeşitli müzik ve sinema sitelerinde düzenlenen “yılın en iyileri” gibi anketler için fazlasıyla kullanışlı olabilir.
Devamını OkuYeni ve kullanışlı 10 Jquery eklentisi
Kolay geliştirilebilir esnek yapısıyla, web tasarımcılara Javascript kodlamayı sevdiren Jquery hepimizin vazgeçilmezi olmaya devam ediyor. Artık neredeyse her web sitesinde bir Jquery eklentisi görmek mümkün. Birbirinden farklı işlevleriyle web sitelerini canlandıran Jquery eklentilerine her geçen gün bir yenisi daha ekleniyor. Yazının devamında 10 yeni Jquery eklentisini ücretsiz olarak indirebilir ve kullanıma hazır yapısıyla kolayca sitenize ekleyebilirsiniz.
Devamını OkuGoogle Docs ve Jquery ile Sıkça Sorulan Sorular sayfası hazırlamak
Artık neredeyse bütün sitelerde ihtiyaç duyulan Sıkça Sorulan Sorular (SSS) sayfasını, içerik yönetim sistemine sahip olmayan web sitelerinde hazırlamak web tasarımcı için oldukça zahmetli ve zaman kaybına neden olan bir iş. Hatta bazı CMS‘lerde bile SSS sayfasını kolayca hazırlayabilecek bir bölümün olmaması, web tasarımcının üstüne ekstradan bir iş yükü bindiriyor. Bunun yerine, Google Docs (Dökümanlar) hizmeti ile web sitesinin SSS bölümünü kolayca hazırlayabilirsiniz. Hatta yönetiminin çok basit olmasından dolayı bu içeriği doğrudan müşterinizin hazırlamasını da sağlayabilirsiniz. Bunun için Jquery ile geliştirilmiş bir scripti web sitenize yerleştirmeniz yeterli.
Devamını OkuJquery tab menüde Internet Explorer sorunu ve çözümü
Jquery’de hazırlanan eklentilerin tamamı maalesef Internet Explorer‘da kararlı çalışmayabiliyor. Bununla birlikte, profesyonel ve kurumsal web sitesi isteyen müşterilerimiz de bütün majör tarayıcılarda sitenin sorunsuz çalışmasını isterler. Internet Explorer’da alışık olduğumuz CSS hatalarını düzeltmek, artık işinin ehli web tasarımcılar için çocuk oyuncağı haline gelse de Jquery ile ilgili aynı şeyi söyleyemem. Çünkü her tarayıcıda sorunsuz çalışacak şekilde Javascript düzenlemesi yapmak, biz web tasarımcılar için daha zahmetli ve ekstra zaman kaybettiren bir çalışma.
jQuery ile oluşturulan hazır tab menü kullandığım sitede, Internet Explorer’un bu scripti daha yavaş yorumlamasından dolayı küçük bir sorun oluştuğunu farkettim, bu sabah. Küçük de olsa kurumsal bir site için hiç de hoş durmayacak bir sorundu. Ben de scripti değiştirip bütün tab menü çalışmasına en baştan başlamak istemememden dolayı, soruna bir çözüm bulmaya karar verdim ve buldum:) Ayrıca bulduğum çözümü sizin de uygulamanız için hiç bir şekilde jQuery bilmenize gerek yok.
Devamını OkuYeni başlayanlar için Türkçe jQuery dersleri
Günümüzün en meşhur ve en kullanışlı Javascript kütüphanesi jQuery, ülkemizde de web tasarımcılar tarafından yaygın olarak kullanılmaya başlandı nihayet. Tavsiyelerimiz işe yaradı anlaşılan:) (bkz. Jquery öğrenmek ve kullanmak için 5 neden) Yaygınlaştıkça, web geliştiricileri tarafından hazırlanan jQuery dersleri de internette boy gösteriyor bir süredir. Ancak bir çoğu, “ders” adı altında yayınlanmış hazır jQuery eklentisinden ibaret, maalesef. Birbirinden güzel efektler, animasyonlu menüler, foto galerileri ve slaytlar (ve daha fazlası) şeklinde hazırlanmış bu eklentiler, çoğu zaman web sitelerimizde işimizi görse de, istediğimiz eklentiyi sıfırdan yazabilmek için bize gerekli bilgiyi vermiyorlar. Bu nedenle, İngilizcesi yeterli olmayıp da sıfırdan jQuery öğrenmek isteyenler kaynak bulmakta hala zorlanıyorlardır, tahminimce. Şimdilik elimizdekilerle yetinmekten ve yeterli Türkçe kaynağın oluşması için bir süre daha beklemekten başka çaremiz yok. Yine de mevcut Türkçe jQuery dersleri, yeni başlayanların sıfırdan öğrenmesini sağlayabilecek kadar iyi hazırlanmış aslında. Ben de nette bulduğum Türkçe ders kaynaklarını bir araya getirip, sıfırdan jQuery öğrenmek isteyenlerin işini biraz olsun kolaylaştırmak istedim. Önizleme resimlerine tıklayarak kaynaklara ulaşabilirsiniz.
jQuery dünyasına adım atıyoruz
jQuery ile web programlama dersleri – 1
jQuery ile web programlama dersleri – 2
jQuery ile animasyon yapmak
Yeni başlayanlar için jQuery dersi (video)
jQuery ve seçiciler
jQuery ve Ajax işlemleri
jQuery ve efekt işlemleri
jQuery ve olaylar
jQuery ve DOM işlemleri
Son olarak, jQuery ile CSS 3′ü birlikte kullanarak neler yapılabileceğini merak ediyorsanız buradaki örneklere gözatabilirsiniz.
Devamını OkuÜcretsiz en iyi 10 Flash foto galeri
Bir zamanların modası Flash foto galeriler, her ne kadar jQuery‘nin kullanılmaya başlamasıyla artık yavaş yavaş unutulmaya başlasa da, hala ihtiyaç duyulduğu zamanlar olabiliyor. Ayrıca blogumda Flash’ı fazlasıyla ihmal ettiğimi farkedince, Flashseverlerin gönlünü almak için derhal Flash’la ilgili bir yazı yazmak istedim:) Ve aklıma da ilk gelen Flash uygulaması, foto galeriler oldu. Nette şöyle bir gezindim de, önceden bu foto galerileri ne kadar gözümüzde büyüttüğümüz aklımıza geldi. Düzenlemek, resimleri eklemek ve uygulamayı siteye entegre etmek vs derken, oldukça zahmetli bir iş olarak görürdük. jQuery ile kolay foto galerilerin oluşturulması Flash kullanıcılarını da etkilemiş olacak ki, nette dolaşan yeni Flash foto galerileri kullanmak artık eskisi kadar zor değil. Hala Flash foto galerileri tercih ediyorsanız, sizin için en iyilerini seçmeye çalıştım. Demolarını görmek ve ücretsiz olarak indirmek için resimlere tıklamanız yeterli. Ama siz de hala benim gibi ısrarla jQuery kullanmayı tercih edenlerdenseniz, sizi buraya alalım.
Haftalık OZD #20
OZD Tasarım 20. haftayı da geride bıraktı. Geçtiğimiz hafta, özellikle freelance tasarımcıların işine çok yarayacağını düşündüğüm iki makale yazmış olmaktan mutluyum. Böylelikle, bir süredir içinde olduğum yoğun dönemden dolayı freelance tasarımcılara yönelik eksikliği telafi ettiğimi düşünüyorum. Freelance tasarımda iyi bir konuma yükselmek ve kazanç sağlamak istiyorsanız Müşteri portföyünüzü genişletmek için yapılacaklar listesi ve Freelance tasarımcılar için ek gelir kaynakları başlıklı makalelerimi dikkate almanızı şiddetle öneriyorum.
Bu iki yazının haricinde, Jquery ile haşır neşir olanların çok ilgisini çekecek bir eklentiyi tanıttım: DualSlider. Farklı ve kullanışlı özelliği ile diğer slayt eklentilerinden bir adım öne çıkıyor. Sitelerinizde Jquery kullanıyorsanız, göz atmanızda fayda var.
Müşteri portföyünüzü genişletmek için yapılacaklar listesi
Farklı bir Jquery slayt eklentisi: DualSlider
Freelance tasarımcılar için ek gelir kaynakları
Farklı bir Jquery slayt eklentisi: DualSlider
Bildiğiniz üzere, Jquery slayt eklentileri sayesinde artık fotograf ve içerik slaytları için Flash ile uğraşmak zorunda değiliz. Küçücük bir script ile sitede animasyonlu slaytlar ve galeriler oluşturabiliyoruz. Dosya boyutunun da flasha göre çok daha küçük olması en büyük tercih sebeblerinden biri elbette. (bkz. Jquery kullanmak için 5 neden) Bu nedenle, artık neredeyse her yeni nesil web sitesinde gördüğümüz Jquery slayt eklentilerine bir yenisi daha eklendi: DualSlider
Bu eklentiyi başlı başına bir makale ile paylaşmak istememin sebebi ise görmeye alıştığımız standart slayt eklentilerinden farklı bir özelliğe sahip oluşu. Adındaki “Dual” kelimesi de bu özelliğinden geliyor. Eklenti; içerik ve başlık olmak üzere iki farklı bölümden oluşuyor ve slayt haretketi her iki tarafta da gerçekleşiyor. Bu da eklentiye hem farklı bir görünüm hem de iki tarafın hareketindeki küçük zaman farkından dolayı güzel bir akışkanlık kazandırmış. (Demoyu izlediğiniz zaman ne demek istediğimi anlayacaksınız)
Eklentinin bir diğer özelliği ise; içerik bölümüne resim, video, html gibi her türlü içeriği ekleyebiliyor olmanız. Yani sadece fotograf slaytı değil, her türlü içerik slaytı oluşturabilirsiniz. Bu nedenle, özellikle magazin blogları, haber siteleri gibi portallara entegre ederek, sitenizi oldukça kullanışlı bir hale getirebilirsiniz. Ayrıca portfolyonuzu yayınladığınız web siteniz için de çok güzel bir showcase (vitrin) bölümü olacaktır.
DualSlider’ın siteye eklenmesi, neredeyse her Jquery eklentisi kadar kolay olduğundan, web tasarımcıların kullanmakta zorlanmayacağından eminim.
DualSlider’ı test etmek ve indirmek için Test et ve Ücretsiz İndir>>
Bütün dökümanlarına ulaşmak için DualSlider dökümanları>>
linklerini kullanabilirsiniz.
Devamını OkuFlash & XML ile 3 boyutlu resim slaytları
Flash, neler yapabileceğini bize çoktan kanıtladı aslında. Ancak Jquery‘nin yaygınlaşması ile daha önce resim slaytları için başvurduğumuz Flash’ı ihmal ettiğimizi kendisi de anlamış olacak ki bu konuda ilgi çekici uygulamalar görmeye başladık. Son örneği ise bir süredir web tasarım aleminde göze çarpan 3 boyutlu resim slaytları. Gerçekten uzun zamandır Flash tabanlı yapılmış bir uygulama dikkatimi çekti. Hem ücretsiz paylaşılması hem de Xml sayesinde kullanım kolaylığı nedeni ile blogda yayınlamak istedim. Ayrıca yoğun iş temposu dolayısıyla haftanın ikinci makalesini ancak bugün yazabiliyorum. Demek ki bloga neredeyse koca bir hafta zaman ayıramayacağım günler de olacakmış. Ama yorulsam da kaldığımız yerden devam edeceğiz, panik yok : )
Şimdi yazının başında bahsettiğim Flash tabanlı 3D resim slayt uygulamaları olan The Piecemaker ve Cuber ile ilgili detaylara bakabiliriz…
The Piecemaker Flash & XML Galeri
Modularweb tarafından geliştirilen bu uygulama sayesinde 3 boyutlu resim (veya fotoğraf) galerileri hazırlayabiliyorsunuz. Ve bunu yapmak için Flash biliyor olmanıza gerek de yok. XML dosyası sayesinde resimlerinizi çok kolay bir şekilde slayta dahil edebilirsiniz. Ayrıca açık kaynak kodlu hazırlanmış olması da geliştiricilerin dikkatini daha çok çekecektir. Bunun için .Fla dosyasını indirmeniz gerekiyor tabi.
Çalışma şekli için kısaca, resimleri parçalara bölerek yatay ve dikey eksende 3 boyutlu döndürüyor diyebiliriz. Uygulamanın demosunu izlediğinizde siz de beğenip bana hak vereceksiniz. Uygulamanın kendi sitesinde animasyonun 4 farklı versiyonu mevcut. Dördü de birbirinden şık ve eğlenceli. Aşağıdaki linklerden demosunu izleyebilir ve uygulamayı bütün dosyaları ile birlikte ücretsiz olarak indirebilirsiniz.
Cuber Image Slider
Cuber ya da kendi deyişleriyle CU3ER, aynen Piecemaker’ın yaptığı işi çok daha fazla seçenek ile yapabiliyor. Resimleri parçalara bölüp slayt edebildiği gibi aynı zamanda tek parça halinde, küp şeklinde döndürebiliyor. Bu özelliğinden dolayı Cuber adını almış tahmin ettiğimiz üzere. Cuber’ın küp şeklindeki sunumu özellikle portfolyolarını yayınlamak isteyen fotoğrafçıların hoşuna gidecektir diye düşünüyorum.
3D Transition özelliği ile göz alıcı ve özgün bir görünüme sahip, 3 boyutlu resim slaytlarını CU3ER ile çok kolay bir şekilde hazırlayabilirsiniz. Bu da aynı şekilde XML dosyası üzerinde yapacağımız düzenleme ile hiç Flash bilgisi olmadan hazırlanabiliyor. Uygulamanın demosunu izlemek ve ücretsiz indirmek için aşağıdaki linkleri kullanabilirsiniz.
Devamını OkuSponsorlar
Facebook’ta beğen.
