bildirgec.org - atroskaspik - beğendikleri

10 adet mootools kayan i̇çerik uygulaması

atroskaspik — Thu, 19 Aug 2010 15:08:00 GMT

Günümüzde, neredeyse tüm web tasarım yazılarında "CSS3 ve jQuery" kelimeleri başrolde görülse de, tasarılarınızda kullanacağınız tek seçenekler bunlar değil. Esasında javascript framework olan MooTools ile bir sürü ilgi çekici eklenti elde etmek mümkün. Bu yazıda, MooTools ile yapılan en iyi 10 "kayan içerik uygulamalarına" (content slider) bakacağız. Site tasarımlarınızda işinize yarayacağını düşünüyorum.

Floom

i̇ndirme demo

SlideShow2

i̇ndirme demo

nivoo-slider

i̇ndirme demo

slideitmoo

slidegallery

noobslide

icarousel

gradually

sliding tabs

scrollgallery

smoothgallery 2.0

i̇ndirme demo

Umarım işinize yarar. Tekrar görüşmek üzere.

Kaynak

ayrıca, "2009'un en iyi 40 photoshop yazı efekti" adlı yazıma da göz atabilirsiniz.

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web 2.0 için Tasarım Araçları

atroskaspik — Fri, 20 Nov 2009 12:26:00 GMT

Web 2.0 gelince web siteleri dahada güzelleşip renklendi.Fakat eski tasarımcıların bazıları buna uyum sağlayamadı.Örneğin bir arka plan için photoshop vb. program ile uğraşmak istemiyorsanız aşağıdaki araçlar tam size göre. Sizin için butonlar, arka planlar, rozetler, yükleniyor simgelerini birkaç dakikada oluşturabilirler. Bazen dar zamanda yapmak zorunda olduğunuz bir iş varsa sizin için hayat kurtarıcı olabilirler. Sizin 10 dakida yapıcağınız işi 1-2 dakika gibi kısa sürede bitirirler.

Favico

(Çok kullanışlı bir favicon oluşturucu. Web siteleriniz için favicon oluşturabilirsiniz.)

SpiffyBox

(Artık yuvarlak köşeli kutu ve bloklar yapmak için uğraşmanıza gerek kalmayacak. Bu servis sizin için yapıyor ve size css, html kodlarınızı veriyor. Size bunları web sitenize eklemek kalıyor.)

Ajax Load

(Dolu dolu bir web siteniz var ise yavaş yüklenecektir. Birçok sitede gördüğünüz yükleniyor iconları bu site yardımı ile web sitenize ekleyebilirsiniz.)

Web 20 Badges Generator

(web 2.0 ilk çıktığında rozetler çok modaydı. Bu rozetler hem web sitenizi çok şık gösterir hem de oldukça ziyaretçi çeker. Yuvarlak, kare, yıldız vb. rozetleri bu uygulama ile herşeyini ayarlayıp üstüne yazı da yazarak web sitenizde yayınlayabilirsiniz.)

Buttonator

(Eğer çok az zamanınız varsa ve web siteniz için buton yapmak istiyorsanız bu site tam size göre. O sizin yerinize her şeyi yapıyor.)

Load Info

(Başka bir ajax yükleme jenaratörü.Ajax Load'dan daha fazla seçenek bulunuyor. 16*16, 24*24, 48*48 boyutlarında oluşturabilir arkaplan vb. gibi seçenekleri değiştirip kullanabilirsiniz.)

Stripe Generator

(Web 2.0 ile gelen başka bir yenilik ise şeritli (çizgili) arka planlar.Eğer uğraşıp uzun uzun yapmak istemiyorsanız bu jenaratör sizin yerinize herşeyi yapıyor. Renkleri çizgilerin nasıl olacağını seçin anında arkaplanınız oluşturulsun)

Bg Patterns

(Eğer çizgili arka planlar yerine daha dikkat çekici arka planlar kullanmak istiyorsanız bu servis tam size göre. Birçok seçeneği isterseniz eğip bükerek arka planınızı birkaç dakikada oluşturabilirsiniz.)

Adobe Kuler

(Web siteleri için uyumlu renk kombinasyonları üreten kullanışlı bir jenarotör. Ayrıca adobe tarafından yapılmış)

CSS Typeset

(Farklı yazı tiplerini değiştirip anında css kodunu alabileceğiniz harika bir jenaratör.)

Blind Text Generator

(Yazınızı farklı biçimlere çeviren. Paragraflara bile ayırabilen ilginç bir jeneratör.)

Reflection Maker

(Web 2.0 logolarının güzel kılan bir şeyde aşağıda oluşan yansımalarıdır. Bu jenaratör bunu sizin yerinize anında yapabiliyor.)

Kaynak ; quaness

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Muhteşem HTML5 ve CSS3 Uygulamaları

atroskaspik — Mon, 17 May 2010 06:36:00 GMT

HTML5 ve CSS3 yeni olmasına rağmen web tasarımcıları oldukça başarılı uygulamalar yapıyorlar. Klasik tasarımların aksine daha renkli ve interaktif tasarımlar kullanıcılar tarafından daha dikkat çekici ve taha tatmin edici gözüküyor. Ayrıca masaüstü uygulamalarından yapabildiğiniz birçok özelliği artık interaktif olarak tarayıcılar üzerinden de kullanabiliyoruz. Muhteşem HTML5 ve CSS3 Uygulamaları;

Carbon Fiber Signup Form - Demo

Html5, css3 ve jQuery ile yapılan bu uygulama gelişmiş bir form sistemidir. Formlarda yer alan sıradışı parlak efekti ziyaretçiler tarafından oldukça dikkat çekici. jQuery ile yapılan tooltip özelliği sayesinde kullanıcılarınız istenilen dışında formu doldururlarsa hata mesajı veriyor.

Create a Cool Messy List with CSS3 and nth-child - Demo

Bu css3 ve Html5 ile yapılan uygulama ile web sitenizdeki blogları istediğiniz şekilde yana yatırarak eğim oluşturabilirsiniz. Ayrıca bunu yaparken içeriğinede aynı şekilde eğimi uygulayabilirsiniz.

CSS3 Glow Tabs - Demo

CSS3 Glow Tabs sayesinde web 2.0 ile gelen tab özelliğini web sayfanıza ekleyerek yeni sayfa yüklenme derdinden kullanıcılarınızı kurtarabilirsiniz. Tek sayfa içerisine birden fazla sayfayı bu css3 kullanan uygulama ile gerçekleştirebilirsiniz.

Elegant Accordion with jQuery and CSS3 - Demo

Elegant Accordion slider uygulaması sayesinde farklı menüler veya ürünlerinizi tanıtacağınız farklı içerikler yaratabilirsiniz. jQuery ve css3 bileşimi bu uygulama sayesinde blogların içerisine istediğinizi yerleştirmekte özgürsünüz.

Pimp Your Tables with CSS3 - Demo

css3 ile yapılan bu farklı uygulama ile benzersiz tablolar yapabilir ve içeriğini istediğiniz gibi doldurabilirsiniz. Farklı temalarını uygulayabilir veya siz kendi temanızı oluşturabilirsiniz.

Create a Speech-Bubble Tooltip using CSS3 and jQuery - Demo

Bu tooltip eklentisi diğerlerinin aksine sadece jQuery kullanılarak değil css3 kullanılarakta oldukça renklendirilmiş. Web sitenizde yer alan metinlere bu uygulama sayesinde kısa bilgi notları düşebilirsiniz. Ayrıca bunu yaparken kullanıcılarınızn yeni sayfa açma zahmetinden kurtarmış olursunuz.

Colourful rating system with CSS3 - Demo

Colourful rating system, diğer oylama uygulamarından farklı olarak css3 kullanılarak oldukça hoş bir görünüme sahip.Her nota bilgiler ekleyebileceğiniz gibi (5 üzerinden 1- çok kötü, 5 üzerinden 4-güzel vs.) hepsinde farklı renk tonları kullanabilirsiniz.

Ayrıca Bakınız ;

angelsdemos : Blog | Twitter | Email | RSS

Kaynaklar : impressivewebs, tutorialzine, tympanus, css-plus

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jval ile formların kontrolü elinizde

atroskaspik — Mon, 03 May 2010 09:14:00 GMT

Web formları, günümüzde web sitelerinin çoğunda bulunakta. Olmazsa olmaz olarak nitelendirilen web formları; üyelik işlemleri, metinler hazırlama, iletişim ve yorum gibi farklı niteliklerde hazırlanabiliyor. Fakat ziyaretçileriniz formlarınıza istediğiniz ölçüde değerler girmiyor olabilirler. Bunu engellemek istiyorsanız jVal tam size göre.

jVal, interaktif ortamda hazırlanmış eş zamanlı form takip aracıdır. Formu dolduran ziyaretçilerinizin formu doğru doldurup doldurmadığını takip ederek ziyaretçileri uyarır. Doldurulması gereken fakat boş bıraklıan kısımlar, geçersiz karakter kullanımı (sayı yerine harf gibi), mantık hataları, geçersiz e-posta adresleri gibi birçok yanlışı bulur.

jQuery ile hazırlanan bu uygulama sayesinde ziyaretçilerinizin formlarda yapacağı bu hataları eş zamanlı olarak uyarabilir ve hata yapmamalarını sağlayabilirsiniz.

Ayrıca kişiselleştiribileceğiniz bu uygulama sayesinde web formlarınızın hangi niteliklerde olacağına siz karar verebilirsiniz.jVal ile ziyaretçilerinizi kendi geliştirdikleri efekt ile uyarabilir veya tooltip şeklindeki bir uyarı yazısı çıkmasını sağlayabilirsiniz. Görüntü olarak temel temasını düzenleyerek web siteniz ile uyum içinde olmasını sağlayabilirsiniz.

Sadece 8kb. olan bu uygulamanın kendi sayfasına buradan ulaşabilir ve indirebilirsiniz. Dilerseniz demo adresine buradan göz atabilirsiniz.

Ayrıca Bakınız ;

angelsdemos: Blog | FriendFeed | Twitter | Email | RSS

Kaynak : overset

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Virtual Private Server, VPS'ler Hakkında Birçok Şey

atroskaspik — Thu, 07 Jan 2010 14:56:00 GMT

Vps, Virtual Private Server, bir sunucunun sanallaştırma yazılımı yardımıyla birçok parçaya bölünüp, bu parçaların her birinin kullanıcının dilediği işletim sistemiyle kullanabildiği sanal sunuculardır.

Shared hosting denilen klasik hosting paketlerine göre siteleri ağır olan ancak dedicated server'a da ihtiyacı olmayan siteler için biçilmiş kaftandır. Kullanıcı VPS'ine sunulan işletim sistemlerinden birini kurup, istediği yazılımları yükleyip istediğini çıkartarak kendi sunucusunu oluşturabilir. Hatta kimi virtualization yazılımları kernel üzerinde dahi modifikasyon yapılmasına izin vermektedir.

Virtualization yazılımlarından şöyle bir bahsetmek gerekirse:

Virtualization olarak dört farklı tür var. Virtuozzo, OpenVZ, `Xen` ve `XenServer`. Bir de Hyper-V var ancak ondan pek bahsetmeyeceğim bu yazıda. (unuttuğum varsa lütfen yorumlara ekleyin)

Virtuozzo Parallels (Plesk'in üreticisi) tarafından üretilen lisanslı bir yazılım. Overselling (kapasite üzeri satış) mümkün, makine üzerindeki vps sayısına göre lisans satılıyor. Memory management yöntemi olarak SLM'yi kullanmakta.

OpenVZ Virtuozzo'nun açık kaynak hali. OpenVZ'de de overselling yapmak mümkün. Bu yüzden low end vpslerde daha çok OpenVZ kullanılmakta. Burstable Ram denilen olay sayesinde garanti edilen ram'den daha fazlasını kullanabiliyorsunuz. Aslında pek de öyle olmuyor ama. Memory management yöntemi olarak UBC'yi kullanıyor. Çalışan programların ram kullanımı yerine allocate ettikleri ram miktarını hesaplayıp kullanılan ram miktarı olarak size gösteriyor. (top komutu) Node'da, yani birçok vps'i barındıran makinede, ağır çalışan ya da o anda makineyi zorlayan başka bir vps varsa bu durum size de yansıyor. izolasyon sağlam değil.

Xen de yine açık kaynak kodlu bir virtualization yazılımı. Overselling yapmak -yanlış hatırlamıyorsam- v4.0'dan sonra mümkün oldu ama pek de yapıldığı söylenemez. Zira OpenVZ'ye oranladığımızda çok sağlam bir izolasyon var. Bir vps başına 1-4 kadar cpu verilebiliyor. Burstable imkanı olmasa da swap ile bir derece durumu kurtarmak mümkün. Bilenlerin tercihi.

XenServer da Xen sistemi üzerine kurulmuş Citrix isimli bir şirket tarafından üretilen bir virtualization yazılımı. Şu anda gigenet bu yazılımla vpshive'in test sürüşlerini yapıyor. Hiç fenaya benzemiyor açıkçası. XenServer yazılımının kendisi ücretsiz olsa da yönetimi için oluşturulan yazılımlar lisans ücretlerine tabii.

Vps almayı düşünenler için tavsiyeler:

- Türkiye'deki firmalar hakkında pek bilgim yok zira herkes gibi benim de ağzım çok yandı vaktinde. İngilizce konusunda sıkıntınız yoksa Amerika ya da İngiltere kaynaklı bir şirketten alın.

- Managed düşünürseniz ve bütçeniz varsa servint.com, wiredtree.com, knownhost.com ve futurehosting. bu işte gerçekten ustalar. "Bunlara fiyatım yetmez" diyenler de servercomplete.com'a bakabilirler, semi-managed diyorlar ancak monitoring dışında bir sorun olursa çözmek için ellerinden geleni yapıyorlar.

- Unmanaged düşünenler için linode.com ve slicehost.com biçilmiş kaftan. Kendi yazdıkları çok sağlam panelleri mevcut. İkisi de Xen kullanıyorlar, ancak slicehost'da sadece 64 bit OS kullanılabiliyor.

- Bunun dışında low end box denilen, pahada hafif olduğu gibi özellikler konusunda da hafif olan vps paketleri mevcut. Lowendbox.com'dan sürüsüyle şirket bulabilirsiniz.

- Öğrenmek adına bir VPS alıp çok da masrafa girmemek isteyenler için vpslink.com'un en küçük paketi pek uygundur. Dökümantasyonları da hiç fena değildir. (Rahatsızlık uyandırabileceği için önerilen şirketlere link vermedim)

Şimdilik bu kadar.

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En İyi 5 Tasarım Programı

atroskaspik — Mon, 04 Jan 2010 16:48:00 GMT

Her profesyonelde olduğu gibi, internet tasarımcılarının kullandıkları aletler de yaptıkları işlerin kalitesini belirler. Dışarıda internet tasarımı üzerine kullanabileceğiniz oldukça çok sayıda uygulama mevcut. Ancak bazıları var ki, kalabalığın arasından sıyrılıp öne çıkıyor. Bu yazıda en iyi olarak belirtilenler, popüler olarak en çok kullanılan araçlar oluyor.

SixRevisions sitesinde yapılan bir oylama sonucu göre işte sonuçlar.

5. Fireworks

Adobe tarafından geliştirilmiş ve piyasaya sürülmüş olan Fireworks, hem windows hem de Mac üzerinde çalışabilen bir vektör grafik editörüdür. Photoshop'tan farklı olmak üzere, sadece web tasarımcıları için geliştirilmiştir. Site yayılım tasarımına kadar birçok araç Fireworks ile beraber gelmektedir.

Hızlı tasarım yapılmasını sağlayan, tasarımın bir resim halinden HTML/CSS haline dönüştürmede kullanılan dilimleme özelliği ve site denemesi olarak, bütün site tasarımını üzerine tıklanabilen etkileşimli pdf haline dönüştürebilmesi en önde gelen özellikleri arasında sayılabilir. En iyileme araçlarını da unutmamak gerekir.

4. Dreamweaver

Yine Adobe firmasının bir ürünü olan, Dreamweaver programı hem Windows hem de Mac üzerinde kullanılabiliyor. Yazım renklendirme, kod ipuçları, gömülü ftp istemcisi, canlı görüntüleme aracı onu diğer kod yazım programlarının önüne getiriyor. Ve diğer Adobe programları ile de uyumlu çalışıyor.

3. Panic Coda

Panic Coda, Mac kullanıcıların gözdesidir ve sadece Mac üzerinde kullanılabilir. Esas amaç olarak, internet tasarımında kullanılan programların sayısını azaltmak üzere geliştirilmiştir. FTP istemcisi, css editörü, versiyon kontrol sistemi gibi birçok özelliği bünyesinde barındırır. Coda, genel itibariyle görsel tasarımda tap kullanılan bir tasarıma sahiptir. Basit tasarımı ve kullanışlılığı ona 2007 yılında Apple'ın tasarım ödülünü kazandırmıştır.

2. Photoshop

Gelmiş geçmiş en klasik resim işleme programı. Ve üreticisi gene Adobe. Şu ana kadar kullanılan en popüler program olan Photoshop, Windows ve Mac işletim sistemlerinde etkin olarak çalışır. Profesyonel fotoğrafçılar ve tasarımcıların resim işleme ve internet tasarımı yaratmaları amacıyla yapılmıştır. Photoshop, ihtiyaç duyabileceğin bütün araçlara sahiptir. Filtreler, fırçalar, uygulamalar, scripler ve iş akışları.

1. Firebug

Firebug, firefox için bir eklenti olarak hazırlanmış, bedava, açık kaynak kodlu bir tarayıcı-içi internet tasarım aracıdır. Canlı olarak html ve css dosyalarını düzenlemenizi, kayıt işlemleri için konsol kullanmanızı, javascript'leri analiz etmenizi ve düzenlemenizi, DOM işlemleri yapmanızı ve sonuçları kısa bir sürede ekranınızda görmenizi sağlar.

Firebug eklentisini kullanmak için 10 sebep, onun neden popüler olduğunu ve neden kullanmanız gerektiğini size çok daha iyi açıklıyor. Firebug eklentisinin popülaritesi o kadar fazlalaşmıştır ki, firefox eklentisi olan bu firebug'ın kendisi için de eklentiler yazılmaya başlanmıştır. Örnek YSlow ve FirePHP.

Ayrıca belirtmekte fayda olduğunu düşündüklerim.

Adobe Flash
Web Developer (Firefox Eklentisi)
Aptana
Kağıt ve Kalem (ön-tasarım ve karalama için)
CSSEdit
Notepad++
GIMP

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Chrome'un En Popüler Eklentileri

atroskaspik — Thu, 31 Dec 2009 09:54:00 GMT

Chrome oldukça yeni ve popüler bir tarayıcı. Geliştirilmesini hala sürdüren Chrome'un oldukça kullanıcısı bulunmakta. Fakat firefox kullanıcıları genellikle firefox'taki eklentiler için Chrome'a geçmekte zorlanıyordu. Bu yüzden Google, Chorome üzerine eklenti kurmaya izin verdi. İşte firefox'tan vazgeçmenizi sağlayacak Chrome eklentileri;

XMarks

XMarks, tarayıcılar arasında yerimi transferi yapmanızı sağlayan bir eklenti. Günümüzde birçok internet kullanıcısı tek tarayıcı yerine birden fazla tarayıcı kullanabiliyor. Ayrıca birden fazla bilgisayar kullanımıda oldukça yaygın. Bu gibi durumlarda yer imlerinizi herhangi bir tarayıcıdan Chrome'a aktarabilir ya da diğerlerine chrome'dan aktarım yapabilirsiniz. Firefox'ta Foxmarks adından bu eklentiye benzer bir eklenti bulunuyor.

Google Mail Checker

Chrome kullanıcıların çoğu google dolayısıyla Gmail kullanıcıları. Gelen e-postalarınızın anında size iletilmesini fakat Google toolbar veya Google Talk gibi programlar kurmak istemiyorsanız tam size göre bir eklenti.
Eklentiyi kurduğunuz taktirde yeni bir sekme açarak yeni e-posta geldiğinde uyarıyor ve kaç tane e-posta geldiğinide size belirtiyor.

Stumbleupon

Stumbleupon, oldukça popüler bir eklenti. İnternette farklı zevklere ait kullanıcılara göre, hangi siteye gittiğinizi bilmeden sörf yapabiliyorsunuz.
Stumbleupon kendi sitesinde aynı aracı size toolbar olarak sunuyor. Fakat internet kullanıcıları genelde toolbarları sevmiyor. Bu yüzden bu eklentinin bir avantajı daha var. Tek bir tuş ile sörfe başlıyorsunuz.

Evernote Web Clipper

Evernote Web Clipper, herhangi bir sayfadaki url'leri ekran görüntülerini ve notları kayıt altına alır. Eğer isterseniz internet hesabınızı Android yüklü cep telefonunuz var ise senkronize edebilirsiniz. Eğer isterseniz tüm internet sayfasını kopyalayıp saklayabilirsiniz.

RSS Subscription Extension

Bu eklenti ile herhangi bir sitedin rss akışını otamatik olarak izleyebilirsiniz. Adres çubuğunda yer alan küçük bir rss simgesi ile rss akışını takip edebilirsiniz.

Ayrıca Bakınız ;

angelsdemos : Blog | FriendFeed | Twitter | Email | RSS

Kaynak ; Google Chrome Extensions

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jQuery İle Hazırlanmış Sürgülü Panel Eklentisi

atroskaspik — Sun, 02 Aug 2009 09:34:00 GMT

Günümüzün web sayfalarında artık sabitlenen araç çubukları, animasyonlu geçişlerle açılan pencereler, interaktif formlar gibi tasarımın sınırlarını zorlayan öğeler kullanılmakta.Bunun en önemli nedenlerinin başında da özellikle web sayfaları ile direkt olarak etkileşimde olan javascript için yazılmış çatıların/eklentilerin oldukça yetenekli olmalarından kaynaklanmakta.

Sliding Login Panel eklentisi ise bu yetenekli çatılardan biri olan jQuery ile hazırlanmış oldukça kullanışlı bir eklenti.

Web sayfalarının sadesinin makbul görüldüğü günümüzde, bu sayfalarda bulunması istenen bazı öğelerin çeşitli görünür-gizlenir yötemler ile eklenmesi zaman zaman rağbet edilen bir yöntemdir.

Sliding Login Panel eklentisi de web sitenizin üyelik işlemlerini gerçekleştirmek için hazırlayacağınız formları, web sayfanızın üst bölümüne sürgülü olarak eklemenizi ve hem yer tasarrufu hem de kullanıcılarınızın beğenisini kazanacak bir şekilde eklemenizi sağlamakta.

Sliding Login Panel eklentisi IE6, IE7, IE8, Firefox, Safari, Opera ve Chrome tarayıcılarında çalışabilmekte.

Demosunu buradan görebileceğiniz Sliding Login Panel eklentisi ile ilgili eğitici bilgilere buradan erişebilir ve kendisini de buradan indirebilirsiniz.
Ayrıca Mootools 1.2 ile hazırlanmış önceki versiyonuna da buradan bir göz atabilirsiniz.

Kaynak: web-kreation
algoz: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox Çözümü

atroskaspik — Wed, 18 Mar 2009 07:45:00 GMT

Aslında ilk olarak bir web tasarım projesi için kendime sade bir görsel galerisi çözümü arıyordum ancak araştırmamı ilerlettikçe İnternet üzerindeki tüm başarılı görsel galerilerinin yer aldığı bir makale yazmanın ne kadar kullanışlı olabileceğinin farkına vardım ve sonuçta da bu yazıyı yazdım. Listeyi AJAX, JavaScript ve Lightbox tabanlı galeriler, CSS tabanlı galeriler ve Flash tabanlı galeriler olmak üzere 3 ana kategoriye ayırdım bu sayede doğrudan ilgilendiğiniz kategorideki örnekleri inceleyebileceksiniz. Eminim listede bu alanda herhangi bir gereksinimi olan herkesin işine yarayacak bir çözüm mutlaka vardır.

AJAX, JavaScript (jQuery, mooTools), Lightbox Tabanlı Galeriler

1. Jon Design's SmoothGallery
mooTools 1.11 kütüphanesini kullanan bu JavaScript galerisi ve slayt gösterisi sistemi, geçiş efekti içeren yumuşak görünümlü görsel galerileri, slayt gösterileri, vitrinler ve diğer güzel görünümlü içerikleri web siteniz üzerinde kullanabilmenizi sağlıyor. Site üzeride aynı kodu kullanan 7 farklı galeri örneği bulacaksınız. Dilediğiniz örneği indirebilir ve bilgisayarınız üzerinde test edebilirsiniz.

Diğer sistemlerin aksine JonDesign'ın SmoothGallery betiği en başından itibaren web standartları ile uyumlu olacak şekilde kodlanmış durumda. Galeriyi dilediğiniz belge üzerinden besleyebilir, özel CSS seçicilerini kullanabilirsiniz. Daha da iyisi bu gelişmiş betiğin kullandığı kod sadece 24KB.

SmoothGallery

2. MiniShowcase Gallery
MiniShowcase küçük ve sade bir PHP/JavaScript tabanlı çevrimiçi fotoğraf galerisi olup, AJAX desteği sayesinde herhangi karmış bir veritabanı ya da kod kullanmadan görsellerinizi çevrimiçi ortamda paylaşabilmenizi sağlıyor. Bu betik aracılığı ile sadece birkaç dakika içerisinde çalışır bir galeriniz olacaktır.

MiniShowcase Gallery

3. jQuery SlideViewer
SlideViewer'ın dosya boyutu sadece 1.5KB. Bir jQuery eklentisi olan bu uygulama sadece birkaç satır HTML kodu yazarak görsel galerileri oluşturabilminizi sağlıyor. SlideViewer listenizde kullandığınız görselleri otomatik olarak sayıyor ve kullanılabilecek bağlantıları otomatik olarak oluşturuyor. Ayrıca her bir görsel üzerine tıklandığında otomatik olarak bir sonraki görsele geçiş yapılıyor. Sade ve kullanışlı.

jQuery SlideViewer

4. DevKick Galleria
Galleria bir JavaScript görsel galerisi olup jQuery kullanmaktadır. Görselleri sırasız liste üzerinden yüklüyor ve yüklenen her bir görselin önizleme resmini görüntülüyor. Eğer dilerseniz görsellerin önizleme resimlerini otomatik olarak oluşturabilen bu betik, önizleme resimlerinin oluşturulmasında da orantılı/orantısız, ortalanmış ya da kırpılmış gibi seçenekleri de size sunuyor ve ilgili önizleme resmini CSS ile tanımlanmış sabit önizleme kutusunun içerisine yerleştiriyor.

DevKick Galleria

5. ZenPhoto
ZenPhoto çevrimiçi galeri ihtiyacında olan kullanıcıların pek çok sorununu giderebilecek kapasitede bir betik. Karmaşık olmaktan ziyade sadece görselleri görüntülemeye odaklanan bu betiğin geliştiricileri, bir çevrimiçi galeriden beklenen herşeyi yapabildiklerini ancak bunu oldukça sade bir arabirim üzerinden görüntüleyebildiklerine dikkat çekiyorlar. Galerinin özellik listesi bir hayli uzun. Sitelerinden kontrol etmeyi ihmal etmeyin.

ZenPhoto

6. Lightbox 2
Lightbox sade ve rahatsız etmeyen bir betik olup görselleri sayfanın üzerinde ön plana çıkararak gösterebilen bir betik. Kurulumu oldukça basit ve tüm modern tarayıcılar üzerinde çalışıyor.

Lightbox 2

7. Visual Lightbox
VisualLightbox ücretsiz bir sihirbaz program olup web fotoğraf galerilerini, tek bir satır kod yazmadan oluşturabilmenizi sağlıyor. Program, popüler Lightbox 2 betiğini kullanıyor.

Visual Lightbox

8. Photo Gallery with mooTools
Tümüyle detaylandırılmış ders niteliğinde açıklamasının yanısıra pek çok görseli görüntüleyebilecek muhteşem bir fotoğraf galerisi.

Photo Gallery with mooTools

9. Grey Box
GreyBox, web siteleri, görseller ve diğer içeriği güzel bir şekilde görüntüleyebilmenizi sağlayan bir betik. Kullanımı oldukça kolay olan bu betik ile tam ekran web siteleri, görsel galerileri kullanabilirsiniz. Betik, pop-up engelleyicileri tarafından etkilenmiyor ve sadece 22KB dosya boyutuna sahip.

Grey Box

10. TripTracker
TripTracker slayt gösterisi küçük boyutlu bir JavaScript görsel görüntüleyicisi olup animasyonlu slayt gösterisi özelliğine sahip.

TripTracker

11. qGallery
qGallery kullanması kolay, prototype tabanlı bir galeri betiği. Tüm görsel işleme süreci betik tarafından gerçekleştirildiği için sunucunuza gönderdiğiniz görseller için endişelenmenize gerek yok. Tüm görseller sunucunun geçici depolama alanında depolandığı için sunucuya da fazladan bir yük bindirmiyor.

qGallery

12. jFlow Gallery
jFlow eklentisini kullanarak kendi galerinizi nasıl oluşturabileceğinizi gösteren bir rehber ve açıklama.

jFlow Gallery

13. noobSlide
Görsellerinizi mooTools kullanarak 8 farklı şekilde görüntüleyebileceğiniz bir betik. Ne yazık ki betik hakkında herhangi bir belgeleme bulunmuyor ancak kaynak kodunu incelediğinizde kullanımının ne kadar kolay olduğunu göreceksiniz.

noobSlide

14. Spacegallery jQuery Eklentisi
Görsellerinizi görüntüleyebilmenin bir diğer yolu.

Spacegallery jQuery Eklentisi

15. jQuery Cycle Plugin
jQuery Cycle eklentisi küçük boyutlu bir slayt gösterisi eklentisi. Fare imlecinin görsel üzerine getirildiğinde animasyonun duraklatılması, otomatik durdurma, otomatik sığdırma, önceki/sonraki bağlantları, tıklama önleyicileri ve pek çok geçiş efekti için destek içeriyor. Eklenti ayrıca Metadata ve Easing eklentilerini de destekliyor ancak bu eklentileri kullanmak zorunda değilsiniz.

jQuery Cycle Plugin

16. Slider Gallery
Bu 'ürün kaydırıcısı' sade bir galeriye benziyor ancak onun yerine öğreler arasında gezinmek için kaydırıcıyı kullanıyor. jQuery eklentilerini kullanan sade bir uygulama.

Slider Gallery

17. PrettyPhoto
jQuery Lightbox kopyası olan bu uygulama orjinal Lightbox uygulamasına benziyor ancak ona birkaç yeni özellik ekliyor ve tam belgelenmiş kod gibi avantajlar içeriyor.

PrettyPhoto

18. Pretty Gallery
Fotoğraflarınızı jQuery kullanarak gösterebilmenin bir diğer yolu.

Pretty Gallery

19. FrogJS
FrogJS sade, rahatsız etmeyen bir javaScript galerisi. Lightbox JS gibi örneklerin yerine kullanabileceğiniz bir uygulama olmasa da galerileri görüntülemek için bir başka yöntemi kullanıyor. Özellikle her bir görsel için bir sayfanın kullanıldığı galeriler ve fotoromanlar için ideal.

FrogJS

20. Galleriffic
Hızlı işleyen fotoğraf galerilerini işlemek için kullanılabilecek bir jQuery eklentisi. Galleriffic Mike Alsup'un Cycle eklentisinden esinlenmiş ancak daima yüksek performansı göz önünde bulundurarak özellikle çok sayıda fotoğrafın sorunsuz bir şekilde görüntülenebilmesi için optimize edilmiş.

Galleriffic

21. Pirobox jQuery Eklentisi
Özellikle son birkaç aydır görsellerin web siteleri üzerinde görüntülenmesi için kullanılan Lightbox betikleri çok popüler hale geldiler. Piyasada bu tip betiklerden onlarcası mevcut ve bunlar farklı çatıları ya da kodlama dillerini kullanıyorlar. DesignShack bu listeye bir yenisini ekliyor. Bu betiğin tasarımı ve geliştirilmesi Diegro Valobra tarafından yapılmış.

Pirobox jQuery Eklentisi

22. Slideshow 2
Slideshow 2, mooTools 1.2 için bir JavaScript sınıfı olup web sitenizdeki görsellerin sunumunu hareketli hale getiriyor. Yukarıdaki bağlantı üzerinde ilgili eklentinin farklı kullanım şekilleri örneklendirilmiş. Eklentinin kullanım bilgisi için sayfanın kaynak kodunu incelemeniz yeterli.

Slideshow 2

23. jQuery Flickr Galerisi
FlickrGallery bir jQuery eklentisi olup Flickr fotoğraflarınızın web sitenize dahil edilebilmesini sağlıyor. Eklenti bir galeriyi Flickr'ın kolleksiyonlarına benzer albümler olarak nitelendiriyor. Albümler ise fotoğraf setlerini içeriyor.

jQuery Flickr Galerisi

24. Otomatik Oluşturan Galeri
Bu galeri sizin belirleyeceğiniz bir klasör içerisindeki görselleri otomatik olarak tarayıp galeri oluşturuyor. Galerinize yeni resimler eklemek ya da resimleri çıkarmak için tek yapmanız gereken sunucudan görsellerin bulunduğu klasöre müdahale etmek. Bu güzel özellik PHP kullanılarak mümkün hale getirilmiş.

Otomatik Oluşturan Galeri

25. Photo Slider
Başlat/Duraklat düğmelerini içeren ve jQuery kullanarak nasıl bir fotoğraf slayt gösterisi oluşturabileceğinizi anlatan bir rehber.

Photo Slider

26. JavaScript Tiny Slideshow
Bu dinamik JavaScript slayt gösterisinin dosya boyutu sadece 5KB.

JavaScript Tiny Slideshow

27. S3Slider jQuery Eklentisi
Üç farklı özelliğe ve slayt gösterim yöntemine sahip bir jQquery slayt gösterisi eklentisi. Kod iyi bir şekilde kullanmış ve ileri seviyede özelleştirilebilir. Bu örneği ben bugüne kadar geliştirdiğim bazı projelerde kullandım ve şimdiye kadar bir sorun yaşamadım. Denemenizi öneririm.

S3Slider jQuery Eklentisi

28. AJAX Photo Gallery
AgileGallery'nin AJAX sürümü ücretsiz bir AJAX Fotoğraf Galerisi olup Google'nin ücretsiz Picasa uygulaması üzerinden alacağınız XML dosyasından aldığı tüm bilgileri web tabanlı bir galeri haline getiriyor. Uygulama tamamen AJAX tabanlı olduğundan resimler arasında gezinirken sayfanın yeniden yüklenmesine gerek kalmıyor.

AJAX Photo Gallery

29. Suckerfish HoverLightbox Redux
Kullanışlı bir JavaScript / CSS tabanlı görsel galerisi olup Lightbox'un bir başka sürümünü içeriyor.

Suckerfish HoverLightbox Redux

30. PhatFusion Slideshow
Çeşitli geçiş, döndürme, kaydırma efektleri içeren etkileşimli bir JavaScript mooTools galerisi.

PhatFusion Slideshow

31. HighSlide JS
Highslide JS açık kaynaklık bir JavaScript yazılımı olup Web 2.0 yaklaşımını pop-up pencerelere uygulayabiliyor. Önizleme görsellerini ve HTML açılır pencerelerini web sayfaları üzerinde kullanabilmenizi sağlıyor.

HighSlide JS

32. SlideFlow AJAX Image Gallery
Görsellerinizi web siteniz üzerinde kullanışlı bir şekilde gösterebilmek için, tam ekran desteği de bulunan bu slayt gösterisini kullanabilirsiniz. Fotoğraflar ve başlıklar XML dosyası üzerinden okunurken önizleme resimleri pakete dahil edilmiş olan Photoshop eylemleri kullanılarak önceden oluşturulabilir.

SlideFlow AJAX Image Gallery

33. Barack SlideShow
Kullanışlı ve küçük dosya boyutuna sahip bir slaytgösterisi JavaScript betiği.

Barack SlideShow

34. JQZoom Evolution
JQZoom, JavaScript ile hazırlanmış bir görsel büyüteci olup popüler JavaScript çatısı jQuery üzerinde geliştirilmiştir. JQZoom, özellikle web sitelerinin dilediğiniz bir bölümünü büyüterek göstermek isteyen kullanıcılar için ideal.

JQZoom Evolution

35. jQuery Multimedia Portfolio
jQuery için geliştirilen bu eklenti medya dosyalarının uzantısını otomatik olarak algılıyor ve ona uygun yürütücüyü yüklüyor.

jQuery Multimedia Portfolio

36. jQuery Küresel Panaroma Görüntüleyicisi
Küresel panaromalar görüntülemek için kullanılabilecek bir JavaScript görüntüleyicisi. Java ve QuickTime teknolojilerine bir alternatif.

37. jQuery Sanal Gezinti
Basi panaroma görüntüleyicisi için bir eklenti olan bu kod sayesinde jQuery desteği sayesinde panaromik görüntülerinizi sanal gezinti uygulamalarına dönüştürebilirsiniz.

jQuery Sanal Gezinti

38. mooSlideBox
mooSlideBox küçük ve zarif, AJAX tabanlı bir uzantı olup günümüzün tüm popüler web uygulamalarının neredeyse tamamında bulabileceğiniz "Lightbox"a bir alternatif teşkil ediyor. Bu Lightbox kopyası IE6/7, Opera ve Firefox üzerinde çalışıyor ve mooTools sürüm 1.11 kullanıyor.

mooSlideBox

39. jqGalScroll
jQuery Gallery Scroller (jqGalScroll= bir dizi görseli alıyor ve dikey, yatay ya da diagonal olarak ilgili görseleri sırasıyla görüntülüyor. Eklenti ayrıca görsellerinizi sayfalara ayırarak ziyaretçilerinizin görseller arasında gezinebilmelerini de sağlıyor.

jqGalScroll

40. Featured Content Slider
Kendi başına çalışır "öne çıkarılan başlıklar" uygulaması oluşturabilmenizi sağlayacak bir rehber.

Jquery için Veri tablosu Eklentileri (Datagrid Plugins)

atroskaspik — Mon, 28 Sep 2009 14:58:00 GMT

JQuery - DataGrid Eklentileri

Hızlı ve tutarlı yapısıyla diğer javascript kütüphaneleri arasından hızlıca sıyrılıp kendine özel bir yer edinen JQuery kütüphanesinin zengin özelliklerinden yararlanılarak yapılan zengin tablo uygulamaları sayesinde liste halindeki verilerinizi (Tables for Tabular Data) daha fazla kullanıcı dostu ve daha fazla etkileşimli olarak sunabilirsiniz.

İşte sizler için derlediğim Zengin JQuery Veri tablo Eklentileri (Datagrid Plugins)

1. jqGrid

jqGrid Görünümü

Favori veri tablosu eklentilerimden. Sayfalama (paging), XML, JSON, yapılarına yatkınlığı, alan başlıklarını sıralama (sortable), yeni veri ekleme, silme ve tüm bunların üzerine veri arama özelliği. Daha ne olsun değil mi? :) Ayrıca css entegrasyonu da başarılı. Bazı durumlarda hantal kalabiliyor, dikkat etmek lazım. İndirip denemek için buraya tıklayabilirsiniz.

2. Flexigrid

Flexigrid Görünümü

Bu eklenti, jqGrid'in yapabildiği herşeyi yapabiliyor üstüne bir de sütunları gizleme/gösterme ve sütunların genişliğini tekrar ölçeklendirebiliyorsunuz. (Resizable) Tek kusuru jquery'nin son versiyonu ile çalışırken başınızı ağrıtabilir. İndirmek için buraya tıklayın.

3. Ingrid

Ingrid Görünümü

İlk iki eklenti kadar tutmasamda alternatif tasarımı ile yine sayfalama ve sütunları sıralama özelliklerini barındıran bir eklenti. Yanlız bu eklenti kullanırken iyice bir araştırırsanız iyi olur çünkü okuduğum bir yazıya göre geliştirmesi durdu.
4. jTPS

jTPS Görünümü

Diğer eklentilerden farklı olarak sayfalama özelliği efektlerle zenginleştirmiş. Henüz veri arama özelliği yok. Ama alternatif arayüzü ile dikkat çeken bir eklenti.
5. FireScope Grid

FireScope Görünümü

Arabirimi çok basitmiş gibi görünebilir fakat son sürümü ile kazandığı Ajax özellikleriyle hem PHP ile hem de ASP ile sorunsuz çalışmakta. Bir göz atmanızda fayda var.
6. tgrid

tgrid Görünümü

Çok yeni bir eklenti o nedenle kullanırken dikkat etmekte fayda var. Yine diğer eklentilerde olan tüm özellikler bu eklentide de mevcut.
7. DataTables

DataTables Görünümü

İlk bakışta arabirimi çok basit hatta çirkin gelebilir fakat aldanmayın özelleştirme ve dilediğiniz gibi projenize adapte edebilme çok kolay. Çünkü jquery ThemeRoller'la uyumlu. Ayrıca çok tutarlı ve kararlı çalışan bir eklenti. Diğer eklentilerden farklı olarak belli satırlara öntanımlı renkler de verebiliyorsunuz.

Bu yazı atroskaspik tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage