http://www.bildirgec.org/ tr-tr 40 bildirgec.org - kivancpehlivan - beğendikleri kivancpehlivan <p>eskiden dinamik web sayfaları derken bunun server-side kısmını ele alırdık. ajax ile birlikte artık sadece kod değil görüntüde oldukça dinamik, yerinde düzenleme ile yapılan değişiklikler, kendini yenileyen div-ler ve benzer uygulamalar. hem programcının işini basitleştirdi, hem de ziyaretçinin daha hoş görünen bir sitede gezmesine sebep oldu. başlıktanda anladığınız gibi işimizi kolaylaştıracak ajax kütüphanelerinden neredeyse en ünlüsü olan jquery ile yapılmış örnekleri sizle paylaşmak istedim. bu örnekleri kullanmasınız bile jquery dili ve kullanışlılığı açısından size bir fikir verecektir.</p> <p>*<strong>geçiş efektleri</strong></p> <p><a href="http://medienfreunde.com/lab/innerfade/">innerfade</a></p> <p>(tasarımlar üzerine uygulandığında iyi çalışan standart bir geçiş efekti)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects00.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://lab.smashup.it/flip/">flip</a></p> <p>(flash'a benzeyen ama saf jquery ile yapılan geçiş efekti)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects05.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://css-tricks.com/examples/Circulate/">jquery circulate<br></a></p> <p>(dairesel hareket kullanan bir animasyon)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects27.jpg' alt="\"\"" border="0"><br></div></p> <p><!-- buradan kes --></p> <p><a href="http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/">3d tag cloud</a></p> <p>(bu tag bulutunu örneğinde görüldüğü gibi; alan derinliği hissi yaratmak için fotoğraf ya da hacimsel nesneleri kullanız gerekmez)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects44.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://4coder.info/en/jquery-smart3d-en/#demo">smart 3d</a></p> <p>(genel olarak web sitelerinde iyi çalışan 3d afiş örneği, aynı zamanda da mause tepkilerine cevap veriyor)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects50.jpg' alt="\"\"" border="0"><br></div></p> <p>*<strong>yazı/metin efektleri</strong></p> <p><a href="http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/">flying text with fade effect</a></p> <p>(solarak uçan metin efekti)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects60.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://cssglobe.com/post/3503/fading-color-effect-for-inline-text-links-using-jquery">fading color effect</a></p> <p>(link (bağlantı) üzerinde göstermek için ince bir degrade katacak bir jquery efekti)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects63-thumb.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/">use the jquery ui to control the size of your text</a></p> <p>(ihtiyaçlarınıza göre bir blok metnin yazı boyutunu ayarlamanızı sağlar)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects67.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://plugins.jquery.com/project/TextareaCharactersCounter">jquery word counter<br></a></p> <p>(html bir textarea içinde karakter sınırını belirlemenize ve görüntülemenize olanak saglar)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects73.jpg' alt="\"\"" border="0"><br></div></p> <p>*<strong>slayt show efektleri</strong></p> <p><a href="http://www.professorcloud.com/mainsite/carousel.htm">cloud carousel</a></p> <p>(yansımaları ile doğal hareketlere sahip bir slayt show)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects74.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://bxslider.com/">boxslider</a></p> <p>(klasik slayt gösterisi, jquery ile birçok web sitelerinde uygulanması için ideal bir slayt)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects77.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://galleria.aino.se/">galleria</a></p> <p>(eğer özel olarak bir tasarım düşünüyorsanız, sitenizde her zaman kullanabileceğiniz güzel bir galeri)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects83.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://activetuts.s3.amazonaws.com/freebies/003_pieceMaker/piecemaker/index.html">piecemaker</a></p> <p>(3d flash görüntü rotator galerisi)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects89.jpg' alt="\"\"" border="0"><br></div></p> <p>*<strong>görüntü düzenlemek için hazırlananlar</strong></p> <p><a href="http://deepliquid.com/content/Jcrop.html">jcrop</a></p> <p>(photoshop'a benzer şekilde resim kesmeye yarıyor, bu kesinlikle faydalı bir jquery aracı)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects105.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.mind-projects.it/projects/jqzoom/demos.php#demo2">jqzoom</a></p> <p>(güzel bir jquery, resim üzerinde zoom (yakınlaştırma) yapmaya yarar)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects107.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en">jquery virtual tour<br></a></p> <p>(360 derece gözlemler oluşturmak için büyük bir jquery efekti -panaroma görüntü aracı-)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects108.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://buildinternet.com/2009/11/making-an-interactive-picture-with-jquery/">interactive picture</a></p> <p>(bu araç sayesinde görüntü üzerinde, resim içindeki belirli şeyler için açıklamalar yapabilirsiniz. bunun için ideal bir jquery)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects122.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/">apple-like retina effect<br></a></p> <p>(ben uzun süre iphone kullandım ve en beğendiğim özelliklerinden birisi buydu, eğer sizde bu ürünlere aşina iseniz bu özelliği sitelerinizde de kullanabilirsiniz)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects124.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://plugins.jquery.com/project/blurimage">image blur</a></p> <p>(ilk başta bulanık, siz üzerine geldiğinizde netlik kazanan resim efekti. benzersiz bir efekt gibi görünüyor)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ismlyldz/jqueryeffects136.jpg' alt="\"\"" border="0"><br></div></p> <p>ben ilk bakışta dikkatimi çeken ve ilgi duyacağınızı düşündüğüm jquery örneklerini sizin için ekledim, daha fazlası için <a href="http://www.webdesignshock.com/showcase/best-jquery-effects/">bu linke</a> tıklayınız.</p> <p><a href="http://www.bildirgec.org/yazi/30-taze-ve-guzel-web">bundan önceki yazım >></a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/kivancpehlivan">kivancpehlivan</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-tasarim-ve-gelistiricileri-icin ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Thu, 07 Oct 2010 12:03:00 GMT 240519@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-tasarim-ve-gelistiricileri-icin kivancpehlivan <p>Wordpress hakkında söylenecek çok şey, yazılacak çok yazı var. Wordpress'e aşık olmamak elde değil çünkü wordpress bir blog sisteminden çok daha öte bir şey.. devamı bu yazıda gizli.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/wordpress.jpg' alt="\"\"" border="0"><br></div><br>Bu yazıda wordpress'i nasıl bir e-ticaret sistemi olarak kullanırız sorusunun yanıtını arıyacağız.</p> <p>Eğer daha önce bir e-ticaret sistemi geliştirmedi iseniz bu yazı sayesinde temel bilgileri edineceksiniz. Bir e-ticaret sitesinde olması gerekenleri en temel ve basit şekliyle hazırlayacağımız sisteme dahil edeceğiz. İsterseniz hemen başlayalım.<br><strong><br>Ana Kaynağımız: Wp e-Commerce</strong><br>Wordpress için hazırlanmış birçok e-ticaret eklentisi mevcut ama biz bu yazımızda basit ve kolay kullanıma sahip <a href="http://getshopped.org/">WP e-Commerce</a> eklentisini kullanacağız.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/wp-e-commerce-tutorial.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Eklentinin Kurulumu</strong><br>Eklentiyi <a href="http://wordpress.org/extend/plugins/wp-e-commerce/">wordpress eklenti dizininden</a> ya da e<a href="http://www.getshopped.org/">klentinin resmi websitesinden</a> indirin. Eklentiyi yönetim panelinizden aktifleştirdikten sonra Comments (Yorumlar) sekmesinin altına Pruducts (Ürinler) sekmesinin geldiğini göreceksiniz. <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress.jpg' alt="\"\"" border="0"><br></div>O sekmeye tıklayın ve bazı düzenlemeler ve ürün ekleme gibi işlemleri yapmaya başlayalım.<br><strong><br>Ayarlar > Genel</strong><br>İlk sekme genel sekmesi. Ürünlerini sattığınız ülkeleri, o ülkelerde uygulayacağınız vergi oranı vs gibi ayarları bu sekmeden yapıyoruz.</p> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-1.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Ayarlar > Tanımlamalar</strong><br>Sisteminizdeki genel tanımlamaları; buton görünümü, tıklanma sayıları gibi ayarları bu sekmeden yapıyoruz. Ayrıca daha detaylı ayarlamalar yapmak için bu sekmede biraz daha fazla zaman harcamanızı öneririm.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-2.jpg' alt="\"\"" border="0"><br></div> <p><strong>Ayarlar > Admin<br></strong><br>IP engelleme, müşterilere özel mesajlar gönderme gibi işlemleri admin sekmesinden yapıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-3-1.jpg' alt="\"\"" border="0"><br></div><br>Aşağıdaki gibi değişikler yaparak da müşterilerinizi farklı sayfalara yönlendirebiliyorsunuz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-3-2.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Ayarlar > Kargo</strong><br>Kargo-nakliye ayarlarını bu bölümden yapıyoruz. Ağrılığa veya boyuta göre farklı ücretlendirmeler yapabiliriz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-4.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Ayarlar > Ödeme Seçenekleri</strong><br>Kuşkusuz bir e-ticaret sisteminin en önemli bölümü ödeme kısmıdır. Bu eklenti bize 3 farklı ödeme seçeneği sunuyor. Paypal, Google Checkout veya kapıda ödeme seçenekleri.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-5.jpg' alt="\"\"" border="0"><br></div><br>Ödeme seçeneklerine dikkat etmenizi öneriyoruz.<br><strong><br>Ayarlar > Ödeme</strong><br>Kullancı ürünü almadan önceki son ekranda hangi iletişim bilgilerine ihtiyaç duyduğumuzu ayarladığımız bölüm. <div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-settings-7.jpg' alt="\"\"" border="0"><br></div><br>Ayarları burada noktalıyoruz. Şimdi de ürün ekleme, kategori oluşturma gibi işlemleri yapalım.<br><strong><br>Ürün Grupları ve Kategorileri Oluşturma</strong><br>Bu yazıda tişört satan bir mağaza oluşturuyoruz. Bunun için de gruplama yapmaya ihtiyaç duyacağız; cinsiyet, beden, renk vs...<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/ekran-alintisi-2.JPG' alt="\"\"" border="0"><br></div><br>Yeni bir grubu aşağıdaki gibi oluşturuyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-groups-1.jpg' alt="\"\"" border="0"><br></div><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-2.jpg' alt="\"\"" border="0"><br></div><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-groups-3.jpg' alt="\"\"" border="0"><br></div><br><strong><br>İlk Ürünümüzü Ekleyelim</strong><br>Wordpress yönetim panelimizdeki sol kısımda bulunan menüden Products>Products yolunu izliyoruz. Wordpress'in yazı editörüne benzer bir editör olan WYSIWYG editör bizi karşılıyor ve ürünlerimizi ekliyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-1.jpg' alt="\"\"" border="0"><br></div><br>Ürünümüze ait stok adedi, fiyat gibi bilgileri girdikten sonra kategori, ürün gurubu, etiketleme işlemlerini aşağıdaki gibi yapıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/creating-e-commerce-websites-wordpress-product-2-2.jpg' alt="\"\"" border="0"><br></div><br>İlk ürünümüzü ekledikten sonra sitemizin görünümü aşağıdaki gibi olacaktır.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/marfan46/wordpress-e-commerce-store.jpg' alt="\"\"" border="0"><br></div></p> <p>Bu yazıyı burada noktalıyoruz. Kullanabileceğiniz e-ticaret temaları <a href="http://webloti.org/wordpress-e-ticaret-temalari/">burada</a> listelenmiş.</p> <strong>Not:</strong> Bu yazı <a href="http://www.1stwebdesigner.com/tutorials/create-e-commerce-websites-wordpress/">buradan</a> Türkçeleştirilimiş ve özetlenmiştir.<br><br><strong>Ayrıca bakınız;</strong> <ol> <li><a href="http://www.bildirgec.org/yazi/web-tasarimci-ve-gelistiriciler-icin">Web Tasarımcı ve Geliştiriciler için En İyi Açık Kaynak Kodlu Yazılımlar</a></li> <li><a href="http://www.bildirgec.org/yazi/flash-gelistiriciler-icin-10-harika">Flash Geliştiriciler için 10 Harika Flash Framework</a></li> <li><a href="http://www.bildirgec.org/yazi/en-iyi-5-online-resim">En İyi 5 Online Resim Düzenleme Aracı</a></li> <li><a href="http://www.bildirgec.org/yazi/birbirinden-kullanisli-modal-window-iletisim">Birbirinden Kullanışlı Modal Window (İletişim Penceresi) Eklentileri</a></li> <li><a href="http://www.bildirgec.org/yazi/twitter-da-arkadaslarinizi-nasil-bulabilirsiniz">Twitter'da Arkadaşlarınızı Nasıl Bulabilirsiniz?</a></li> </ol><p>Bu yazı <a href="http://www.bildirgec.org/uye/kivancpehlivan">kivancpehlivan</a> tarafından <a href=" http://www.bildirgec.org/yazi/worpdress-ile-e-ticaret ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 28 Sep 2010 14:33:00 GMT 240260@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/worpdress-ile-e-ticaret