bildirgec.org - semih1 - beğendikleri

Olmazsa Olmaz 6 Wordpress Eklentisi

semih1 — Tue, 20 Apr 2010 09:33:00 GMT

Wordpress her ne kadar zekice bir araya getirilmiş kodlardan oluşsa da çeşitli eklentilerle sistem daha da mükemmelleştirilebilir.

Altyapınızı güçlendirek, site performansını arttıracak ve zaman kazandıracak olmazsa olmaz 6 adet wordpress eklentisi karşınızda;

1. WP Super Cache

'cache' yüksek trafikli blogların en büyük sorunlarındandır. statik bir önbellekleme eklentisi olan WP Super Cache ile ziyaretçiler için her defasından msql işlemi yapmaktansa belirli hazırlanmış statik html sayfasını sunar. Böylelikle bw değeriniz şişmediği gibi host firmasına da gereksiz ücret ödemezsiniz. Normal bir site için performansı 259.1% artırır. Yani 9.56s olan yüklenme süresini 3.69s 'ye düşürüyor.

WP Super Cache | İndirme Sayfası

2. Akismet

Spam yorumlar database için büyük bir sıkıntıdır. Performansa etkisi olduğu kadar, gün geçtikçe artan sayısıyla psikolojik bir tehtit de. Akismet, Six Revisions adlı bir sitede yapılan deney ile spam yorumların 99.3% 'ü olan 124,000 spamı başarıyla temizlemiştir.

Akismet | İndirme Sayfası

3. WP-SpamFree

Akismet kadar mükemmel olan bu eklenti database'inde bulunan bir kara listeye göre çalışır. Basitçe nedir dersek kullanıcıların farketmeyeceği captcha benzeri bir sistem ile yorumlama şablonunu robotlardan bir katmak ile korur. Kişisel tecrübem günde yaklaşık 130 adet spam yorumu engelliyor.

WP-SpamFree | İndirme Sayfası

4. Google XML Sitemaps Generator

Sitemaps XML arama motorlarının sitenizi indexlemesi için onlara yol göstermenizdir diyebiliriz. Bu eklenti ile oluşturduğunuz XML dosyasını Google Webmaster Tools gibi hizmetler üzerinde tanıttığınızda arama motorlarından daha fazla verim alacaksınız.

Google XML Sitemaps Generator | İndirme Sayfası

5. All in One SEO Pack

All in One SEO Pack ile Wordpress üzerinde ihtiyacınız bulunan tüm SEO'sal gereksinimlerinizi karşılayabilirsiniz. Arama motorlarına yönelik sistemi ile otomatik etkiletleme, anahtar kelimeler, site açıklaması, kategorilere özgü anahtar kelimeler gibi birçok gelişmiş özellik sunar.

All in One SEO | İndirme Sayfası

6. WP-PageNavi

WP-PageNavi eklentisini kısaca sayfalama eklentisidir diye tanıtabiliriz. Wordpress default sisteminde 'önceki' ve 'sonraki' şeklinde ileri geri butonu halinde olan sayfa sistemini numaralandırır ve çeşitli tasarımsal imkanlar sunar.

WP-PageNavi | İndirme Sayfası

Eğer bu yazı ilginizi çektiyse Bilmeniz Gereken 10 Wordpress Eklentisi başlıklı yazıyı da inceleyiniz. Ayrıca Wordpress Yorum Sayfası için 10 İpucu da sizi bekliyor. isterseniz diğer yazılarımı da inceleyebilirsiniz.

Bu yazı semih1 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

Websitenizi Hızlandıracak ve Kodunuzu İyileştirecek 15 İpucu

semih1 — Wed, 08 Apr 2009 07:06:00 GMT

Bir süre kodlama yaptıktan sonra artık kendinizi tekrar etmeye başlar, aslında ne kadar zeki olduğunuzu unutursunuz. Kaç yüz tane klavye kısayolunu hafızamızda tutuyoruz? Kaç tane kodlama dili öğrendik? Kaç tane çatı? Kaç tane hile? Web geliştirme/tasarım dünyasının zor bir endüstri olduğunu söylemek, işin kolayına kaçmak olur. Ayrıca bugün bildiğimiz şeylerin pek çoğu, birkaç yıl sonra artık kullanılmayan teknolojiler listesindeki yerini alacaktır.

Bugünkü yazımızda özellikle giriş seviyesindeki geliştiricilerin geliştirmek için harcadığı süreyi kısaltacak ve daha verimli şekilde kodlama yapabilmelerini sağlayacak bir dizi ipucunu bulacaksınız. İpuçlarının arasında zaman kazandıran ipuçlarının yanısıra bazı özel programlama dillerine özgü ipuçları sayesinde web uygulamalarınızın verimliliğini de arttırabileceksiniz.

Görsellerinizi Daha Fazla Sıkıştrın

Photoshop üzerinde "Save for Web" (Web İçin Kaydet) aracını kulandığınız zaman, görsellerinizi sıkıştırarak dosya boyutunu indirgeyebilirsiniz. Ancak ilgili dosyaların kalitesinden ödün vermeden daha da fazla sıkıştırabileceğinizi biliyor muydunuz? Smush.It adındaki bu site sizler için bu işlemi hallediyor.

Peki Bu Nasıl Mümkün Olabiliyor?

Smush.It ekibi bunun için bir dizi araç kullanıyor:

Görselin biçimini algılamak ve onu GIF ya da PNG'ye dönüştürmek için ImageMagick,
PNGlerin gerekli olmayan bölümlerni kaldırmak için pngcrush. Site ayrıca daha da iyi png optimizasyonu için pngout, optipng, pngrewrite gibi diğer araçları da inceliyor,
JPEGlerdeki tüm meta verilerini kaldırmak ve progresif JPEGler oluşturmak için jpegtran (şimdilik etkin değil),
GIF animasyonlarını, farklı çerçevelerdeki tekrar eden pikselleri kaldırmak için gifsicle.

Bu yüzden yeni bir sitenin duyurusunu yapmadan önce, sitenizin URL'sini Smush.It'e girerek tüm görsellerinizin otomatik olarak optimize edilmesini sağlayablirsiniz. Eğer site, görsellerinizi optimize ederek kalitesinden ödün vermeden dosya boyutunu önemli ölçüde düşürebilirse (ki büyük ihtimalle sonuç bu olacaktır), o zaman sitenizde kullandığınız görselleri Smush.It'in verdikleri ile değiştirebili ve gerekirse HTML ve CSS dosyalarınızı da güncelleyebilirsiniz. Hazır görsel dosya biçimlerinden bahsediyorken, dosyalarınızı PNG biçiminde kaydetmek her zaman en doğrusu olacaktır. Artık demode olan animasyonlu GIF görselleri kullanmadığınız sürece PNG biçimini kullanmayı alışkanlık haline getirin.

Akıllı Olun. Kod Parçacıkları Kullanın.

Pek çok IDE, "code snippet" (kod parçacığı) panelini destekler ve bu paneller aracılığı ile özellikle sık sık kullandığınız kod parçacıklarını kategoriler altında depolayabilirsiniz. Sırf müşterinize tasarımın nasıl olacağını göstermek için her seferinde lipsum.com web sitesini ziyaret ederken mi buluyorsunuz? Bunun yerine neden birkaç paragraflık lorem ipsum metnini kod parçacığı olarak kaydetmeyesiniz ki? Örneğin Dreamweaver uygulamasında "Shift F9" klavye tuş kombinasyonunu kullanarak kod parçacığı sekmesini açabilirsiniz. Ardından sizin için uygulan olan kod parçacığını yine sizin için uygun olan yere sürükleyip bırakabilirsiniz. Bu özellik kod yazarken bana çok fazla zaman kazandırıyor.

Console.log() Hata Ayıklamasını Kullanın

jQuery kütüphanesini indirdiniz ve sözdizimini anlamak için çabalıyorsunuz. Bu sırada bir yerde takıldığınız ve $bilmemne değişkenin neye eşit olduğunu bilmiyorsunuz. Sorun değil, tek yapmanız gereken console.log($degiskenadi); kodunu eklemeniz.

Ardından Firefox'u çalıştırın (Firebug eklentisinin kurulu olduğundan emin olun) ve F12'ye basın. Doğru değişken değeri ile karşılaşacaksınız.

Şimdi ise bunu sonsuzlukla çarpın ve zamanın derinliklerine götürün. Bunun sonucunda bile Firebug ve console.log()'un ne kadar kullanışlı olduğunu fark edemeyeceksiniz :)

Web Geliştirici Araç Çubuğunu İndirin

Chris Pederick tarafından geliştirilen bu inanılmaz derecede yardımcı Firefox eklentisi size sayısız seçenek kuluyor. Bu eklenti sayesinde sitenizdeki CSS dosyalarını eşzamanlı olarak düzenleyebilmeniz mümkün. Eklentinin desteklediği diğer özellikler ise:

JavaScript'i kolayca etkisizleştirmek,
CSS'yi kolayca etkisizleştirmek,
Hızlı HTML / CSS doğrulama bağlantıları,
Cetveller,
Çerezleri etkisizleştirme,
Ve daha sayısız kullanışlı özellik.

Web Developer Toolbar eklentisi, her web geliştiricisinin Firebug ile birlikte kullanması gereken bir eklenti.

Betik Etiketlerini Alta Yerleştirmeyi Deneyin

Günümüzde kullandığımız pek çok tarayıcı, aynı sunucu adı üzerinden eş zamanlı olarak en fazla iki adet dosyayı indirebilir. Ancak bir betik indirirken diğer dosyaların indirilebilmesi için önce betiğin tamamen indirilmiş olması gerekir.

Bu yüzden mümkün olduğu kadar betiklerinizi çağıran bu kodları belgenizin sonuna eklerseniz, görseller ve css gibi diğer bileşenlerin önce indirilip sitenizin görüntülenebilmesini, ardından da son olarak bu betiklerin indirilebilmesini sağlayabilirsiniz.

Unutmayın, bu yöntem kullandığınız betiğin işlevine göre kullanılabilir ya da kullanılamayabilir. Bu sebeple betik kodlarınızı belgenizin alt kısmına taşıdıktan sonra sitenizi test etmeyi unutmayın.

Yayım Yaparken, CSS ve JavaScript Dosyalarınızı Sıkıştırın

Eğer performans, web siteniz için önemli ise, o zaman sitenizi yayımlamadan hemen önce CSS ve JavaScript kodlarınızı sıkıştırmanızı öneririm. Bunu geliştirme işinizin en başından itibaren yapmaya kalkışmayın zira bunun size yarardan çok zararı dokunur. Ancak kodlamayı bitirdikten sonra kodunuzu sıkıştırabilirsiniz.

JavaScript Sıkıştırma Servisleri

CSS Sıkıştırma Servisleri

JavaScript kodlarını paketlemek için kullanabileceğiniz diğer iki servis ise YUI Compressor ve JSMin.

Bnun yanısıra HTML kodlarınızı da sıkıştırmayı deneyebilirsiniz, ancak bunu önermem. HTML dosyalarınızı sıkıştırarak kazanacağınız dosya boyutu gerçekten çok az.

jQuery Kolay ve Hızlı İpuçları

Kısa bir süre önce tvdesign.co.uk'den Jon Hobbs-Smith, 25 jQuery ipucunu listelediği mükemmel bir makale yazmıştı. Bu sayfayı yer imlerinize eklemeyi ihmal etmeyin. İşte bu yazıdan benim en beğendiğim birkaç ipucu.

jQuery'de Bir Elementin Olup Olmadığını Kontrol Etmek

if ($('#myDiv).length) {
// bu kod sadece #myDiv ID'sinin bulunduğu zaman çalışacaktır.
}

Kontekst Kullanın

Pek çok insan, DOM elementlerine erişirken, jQuery'nin ikinci bir parametreyi kabul ettiğinin farkında değildir. Aşağıdaki koda bir bakın.

var myElement = $('#someElement');

Bu kod, jQuery'nin tüm DOM'u geçmesini gerektirir. Bunun yerine ikinci bir parametre ekleyerek hızı oldukça arttırabiliriz.

var myElement = $('#someElement', $('.someContainer'));

Yukarıdaki kodda jQuery'e, .someContainer elementi içerisinde arama yapmasını ve onun dışındakileri dikkate almamasını söylüyoruz.

Sınıflar Yerine IDler Kullanın

jQuery ile IDlere erişirken, kütüphane bilinen getElementById yöntemini kullanır. Ancak sınıflara erişirken jQuery, DOM'u geçebilmek için kendine özgü yöntemleri kullanmayı dener, zira getElementByClass diye bir yöntem yoktur. Sonuç olarak, ID yerine sınıf kullanmanız durumunda işlem biraz daha uzayacaktır.

25 İpucunun Tamamını İnceleyin

$_POST Yerine Mümkünse $_GET Kullanın

Eğer AJAX istekleri yaparken $_GET ve $_POST arasında bir seçim yapma şansınız varsa, $_GET kullanın.

Yahoo! Mail ekibi, XMLHttpRequest kullanırken, POST'un tarayıcılar üzerinde iki işleme neden olduğunu görmüştür. POST, ilk olarak başlıkları, ardından da verinin kendisini göndermektedir. Bunun yerine GET kullanmanız durumunda, eğer çok fazla çereziniz yoksa, sadece bir TCP paketi gönderilmektedir.

Unutmayın - $_GET verisini her zaman kullanamazsınız. ilk olarak ne yaptığınızdan emin olun ve querystring ile veritabanı erişimini hiçbir zaman karıştırmamanız gerektiğini unutmayın. Kısa bir süre önce Twitter arkadaşlarımdan bir tanesi, bana URL'sinde bir MySQL sözdizimi olan bir web sitesi gönderdi. Bunu asla yapmayın!

Pratik Olduğunda Kütüphaneleri ve Çatıları Kullanın

İster PHP kullanın ister ASP.NET, mooTools ya da jQuery, ya da tüm bunların bir birleşimi, uygun olduğu zamanlarda çatıları kullanmayı deneyin.

Örneğin:

Eğer basit bir statik web sitesi kullanıyorsam sadece fare imlecini bir elementin üzerine getirdiğimde bir efektin belirmesini istiyorsam, bunun için jQuery kütüphanesini kullanmam doğru olmaz.
Eğer statik web sitemin en karmaşık özelliği bir XML dosyası üzerinden veri almak ise bunun için bir çatı kullanmama gerek yok. Bu gibi durumlarda sitem hem daha yavaş çalışacak, hem de daha fazla bant genişliği kullanacağı için bana daha pahalıya malolacak.

Ancak eğer tam bir içerik yönetim sistemi ve karmaşık veri erişim yöntemlerini gerektiren bir web sitesi geliştiriyorsam, o zaman beğendiğim çatılara bir göz atmayı ihmal etmem.

Unutmayın - çatıların sizin için çalışmasını sağlayın, tam tersini değil. Bu kararları verirken zeki olun.

YSlow

YSlow, web sitenizi inceleyip onun mümkün olan en verimli şekilde çalışıp çalışmadığını kontrol eden ve size öneriler sunabilen mükemmel bir servis. Yahoo! geliştirme ekibi, kısa bir süre önce, web uygulamaları geliştirirken takip etmeniz gereken öğelerin yer aldığı bir kılavuz yayımlamıştı.

Ayrıca dilerseniz Yslow Screencastı'na bir göz atarak bu zaman kazandırıcı ipuçlarının neler olduğunu görebilirsiniz. Vaktiniz olduğunda kesinlikle izlemenizi öneririm.

Klavye Kısayolları. Öğrenin!

Pek çok deneyimli tasarımcılar ve geliştiriciler burada bana katılacaktır, eğer sitemde ya da tasarımımda ne zaman bir değişiklik yapmak istesem elimi fareye uzatıp araç çubuğuna gitmiş olsaydım, çok zaman kaybetmiş olurdum. Klavye kısayollarını o kadar uzun zamandan beri kullanıyorum ki artık bu kısayolların işlevlerin hangi araç çubuğu ya da hangi menü altında olduğunu unuttum diyebilirim. Tek bildiğim, "Shift X"in doğru paneli açtığıdır.

İşe yeni başladığınızda bu kısayolları öğrenmek size zaman kaybı gibi görünebilir. Ancak sizi temin ederim ki yanılıyorsunuz. Size Google üzerinde "X keyboard shortcuts" (X klavye araması) (burada X kullandığınız yazılımın adını temsil ediyor, örneğin Photoshop için "Photoshop Keyboard Shortcuts") araması yapmanız. Ardınan bulduğuğnuz tablonun yazıcıdan çıktısını alın ve bilgisayarınızın yanına koyun. Ondan sonraki birkaç haftalık süre içerisinde fareye mümkün olduğu kadar az dokunarak bu kısayollar üzerinde pratik yapmayı deneyin. Klaye kısayollarını bilmek, uzman kullanıcılar ile giriş seviyesindeki kullanıcıları birbirinden ayıran belki de en önemli etkenlerden biridir.

Yeni Web Sitesi Şablonu Oluşturun

İtiraf edin, her web sitesi gelişmiş ve karmaşık uygulamalar gerektirmez. Bazen, hatta belki de kimileri için çoğu zaman, sadece bugüne kadar yaptığımız işlerin yer aldığı bir web sitesini göstermek isteyebiliriz. O zaman bu gibi durumlarda kullanabilmek için her yeni bir web sitesi oluşturacağımızda kullanacağımız bir web sitesi "şablonu" oluşturmayalım?

"Template" klasörümün içerisine "JS" ve "CSS" klasörlerini yerleştirdim.

"JS" klasörüm, DD_belatedPNG.js dosyasını içeriyor (bu dosya, IE6'de PNGlere 24 bit saydamlık desteği getiriyor).
"CSS" klasörümde ise içi boş "default.css" dosyamın yanısıra benim hazırladığım sıfırlama dosyası yer alıyor.

Bunun yanısıra index.html(php) dosyamın içerisinde de projelerimin pek çoğunda kullanacağım birkaç kod parçası yer alıyor. Bu kod öyle aman aman özel bir kod değil ancak bunu önceden hazırlamak size zaman kazandıracaktır.

Kullandığım index.html dosyasının bir örneği

Yukarıdaki kodda da göreceğinz üzere önce CSS ve JavaScript dosyalarıma bağlantı verdim ve ardından Google jQuery dosyasına da bağlantıyı ekledim. son olarak document.ready() jQuery fonksiyonunu oluşturdum ve standart "container" divimi açtım.

Bu kod her ne kadar basit görünse de inanın size zaman kazandıracaktır. Bu sayede ne zaman yeni bir web sitesi oluşturmanız gerekirse, o zaman tek yapmanız gereken "template" klasörünün içerisindeki bu dosyaları kopyalamaktır.

Satıriçi ve Harici Karşı Karşıya

Genelde tüm CSS ve JavaScript dosyalarınız sayfadan çıkarılmalı ve kendi harici dosyalarında korunmalıdırlar.

Bunu neden yapmalıyız?

Daha temiz kod,
Sunumun ve içeriğin birbirinden ayrılması önemlidir,
Harici dosyalar kullanarak onları istemcinin sisteminde depolamış oluyoruz. Bu, HTML dosya boyutunu düşürmenin yanısıra harica HTTP isteğine de yol açmıyor, zira ziyaretçi ya da istemci ilgili dosyayı ilk kez istediğinde depoluyor ve sonraki seferlerde aynı dosyayı indirmiyor.

Eğer sadece birkaç satırlık stiliniz var ise o zaman onun için harici dosya oluşturmayabilirsiniz. Bu gibi durumlarda, ama sadece bu gibi durumlarda, ilgili kodu HTML içerisine gömebilirsiniz.

PHP Betiğinin JavaScript İle Çağırılıp Çağırılmadığını Kontrol Edin

AJAX aldı başını gidiyor, özellikle en sonunda, JavaScript kütüphaneleri sağolsun, kullanıcı dostu hale geliyor. Bazı durumlarda betiğin JavaScript ile mi çağırılıp çağırılmadığını belirlemeniz gerekebilir. Bu görevi yerine getirmek için kullanabileceğiniz birkaç yöntem bulunmaktador.

Bunlardan birisi POST'u gönderirken JavaScript'iniz ile özgün bir anahtar değerini JavaScript'inize iliştirmektir. Ardından PHP kullanarak bu anahtarın varolup olmadığını kontrol edebilirsiniz. Eğer var ise, o zaman JavaScript etkin olduğunu anlarız.

Daha iyi bir yöntem olarak PHP'nin HTTP_X_REQUESTED_WITH özelliğini kullanmaktır. Şöyle ki...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// kodunuzu buraya yazın ve JavaScript'in etkin olduğundan emin olun
} else {
// JavaScript'in etkin olmadığı kullanıcılar için birleyler yapın.
}

Google CDN'ye Bağlantı Verin

Kısa bir süre önce Google jQuery gibi popüler betikleri kendi sunucularında depolamaya başladı. Eğer bu tip kütüphanelerden birisini kullanıyorsanız, o zaman ilgili betiği kendi sunucunuzda depolamaktansa bu betikleri Google CDN üzerinden çağırmanız şiddetle önerilir.

AJAX Kütüphaneleri API'si

Peki Ama Neden?

Caching (Depolama): Bu tip betikleri Google CDN üzerinden çağıran web sitelerinin sayısı gün geçtikçe artmaktadır. Bu sebeple eğer siz de ilgili dosyayı Google sunucusu üzerinden çağırırsanız, ziyaretçiniz muhtemelen o dosyayı sizin siteniz üzerinden indirmeyecektir, zira bir başka site üzerinden aynı dosyayı daha önce indirmiş olabilir. İlgili dosyayı daha önce indirmiş bir ziyaretçi sizin sitenizi ziyaret ettiğinde istemci, Google sunucularından 304 (değiştirilmemiş) mesajı alacak, bu sebeple de o dosyayı doğrudan istemcinin yerel bilgisayarı üzerinden kullanacaktır. Bunun sonucunda da sizin web uygulamanız kullanıcıya daha çabuk açılacaktır.
Eş Zamanlılığı Arttırın: Daha önceki bir ipucunda bundan bahsettim. Bu fazladan dosya isteğini kaldırarak istemcinin daha fazla içeriği eş zamanlı olarak indirebilmesini sağlamış olursunuz.

Firefox Eklentilerini Kullanın

Ben Google Chrome'nin büyük bir fanatiğiyim. Çok hızlı açılıyor ve JavaScript'i diğer tüm tarayıcılardan daha hızlı çalıştırıyor (Firefox'un henüz yayımlanmamış 3.1/3.5 sürümü sanırım Chrome'nin hızını yakalayacak).

Buna rağmen bu, Firefox'u kısa bir süre içerisinde bırakacağım anlamına gelmiyor. Bu tarayıcın için sunulan bazı kullanışlı eklentiler gerçekten büyüleyici. İşte benim beğendiklerim:

Yardımcı Olduğunda IDE Kullanın

Tıpkı günümüzde Microsoft'tan nefret etmek ne kadar moda ise, geliştirme yaparken IDE kullananlara saldırmak ta o kadar moda. Bu gerçekten çok saçma.

Pek çok durumda, gelişmiş bir IDE kullanımı çok önemlidir, özellikle nesne yönelimli programlama (OOP) dilleri üzerinde çalışırken. Şimdi, eğer sadece sade bir HTML şablonu oluşturuyorsanız, o zaman Notepad++ ya da Coda/ sizin için mükemmel bir araç olacaktır. Aslında, bu araçların kullanımını bu gibi durumlarda öneririm. İhtiyacınız olmadığında bu tip programları kullanarak işinizi daha da zorlaştırmayın. Ancak, gelişmiş uygulamalar geliştirirken, IDE'nin avantajlarından da faydalanın.

Hepsi Bu Kadar!

Sanırım şimdilik bu kadar yeterli. Umarım bunlardan bazıları (belki de hepsi) sizi daha iyi birer tasarımcı ya da geliştirici kılmaya yardımcı olacaktır. Sizin beğendiğiniz kısayollar hangileri? Yorumlarınızla paylaşın.

İpuçları Hakkında Yazdığım Diğer Yazılar

Bu yazı semih1 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

Google maps için jQuery eklentileri

semih1 — Thu, 04 Feb 2010 12:57:00 GMT

Google maps artık birçok interaktif sitede yerini aldı ve almaya devam ediyor. Sizler de sitelerinizde google maps kullanmak istiyorsanız aşağıdaki jquery eklentileri ile bunu kolaylıkla gerçekleştirebilirsiniz...

gMap

gmaps, özelleştirilebilir esnek yapısı ve küçük boyutu (2KB) ile google mapsi sitenize kolayca yerleştirebilmenizi sağlayan bir jquery eklentisidir. yapmanız gereken sadece gMap fonksiyonu kullanmak olacaktır. Ayrıca fonksiyonun seçenekleri sayesinde haritanızı istediğiniz gibi özelleştirebilirsiniz.

Demo - Download

Google Maps jQuery Plugin

Google Maps jQuery Plugin, Google Maps Javascript API için geliştirilmiş bir eklentidir. Bu eklenti sayesinde harita üzerindeki div veya bilgi pencerelerini CSS ile rahatlıkla kontrol edebiliyorsunuz.

Demo - Download

jQuery GPS

jQuery GPS, sizi yormadan kullanışlı bir harita oluşturabilmek için geliştirilmiş bir eklentidir. harita ilk açıldığında istediğiniz pozisyonu göstermesini veya sayfanıza yerleştireceğiniz form sayesinde gideceğiniz güzergahı göstermesini sağlayabilirsiniz.

Demo - Download

imGoogleMaps – Multiple Addresses

imGoogleMaps, çok basit özelliklerle geliştirilmiş bir eklentidir. Eklentiye vereceğiniz adresi veya adresleri (json ile basit bir şekilde yapılabiliyor) harita üzerinde gösterebilmenizi sağlıyor.

Demo - Download

Kaynak ve daha fazlası için tıklayınız

Diğer bildirilerim;
- Javascript grafik kütüphaneleri
- Twitter benzeri ajax ve jQuery örnekleri
- Ajax & PHP Webmail İstemcileri

Bu yazı semih1 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 iyi 10 jquery slider eklentisi

semih1 — Sat, 18 Apr 2009 07:01:00 GMT

jquery için hazırlanmış bu eklentiler ile web sayfanıza oldukça kolay ve kullanışlı slider'lar (kaydırma) ekleyebilirsiniz.

Accessible News Slider

jQuery.spinTheWheel.js

News Ticker Pro

Stinky Slider

CrossSlide

kaynak: ajaxline

takip edin: bildirgeç friendfeed rss

Bu yazı semih1 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

Portable Apache+PHP+Mysql Çözümü: XoopServer

semih1 — Tue, 02 Feb 2010 10:25:00 GMT

portable yazılımların gücü giderek artmakta. artık birçok uygulamanın portatif sürümü mevcut. örneğin tüm ftp hesaplarınızı portatif bir ftp programı ile yanınızda taşıyabilir her an kullanabilirsiniz. aynı olanaklar mail istemcileri için de geçerli. portatif yazılımlara olan rağbet o kadar yüksek ki birçok lisanslı yazılımında çok uygun boyutlarda portatif sürümleri mevcut. (bu sürümler yasadışı olduğu için burada isim veremiyorum.)

web geliştirme araçları da bu kategoriden kendilerine düşen payı aldı. birçok apache server paketi portatif hale getirildi.(örneğin mowes portable) kurulumu kolaylaştıran paketler halinde hazırlanıp bizim hizmetimize sunuldu. fakat bunlardan birtanesi çok stabil ve kararlı çalışmakta; xoopserver.

bu paket sayesinde tüm web projelerinizi her an yanınızda taşıyabilirsiniz. apache+mysql+php'nin son sürümlerinden oluşan bu paket ile çok kolay bir şekilde yönetebiliyorsunuz. apache ve mysql'i çalıştırmak için sadece xoopserver'ın uygulama dosyasına tıklamanız yeterli oluyor. böylece, apache+mysql otomatik olarak çalışmaya başlıyor.

ayrıca, bu paket usb belleğinizde yaklaşık 400 mb'lık bir alana ihtiyaç duymakta. phpmyadmin'de otomatik olarak kurulu geliyor. phpmyadmin'i kullanabilmek için ya browser'ınızın adres satırına http://localhost/phpmyadmin/ yazmalısınız ya da görev çubundaki simgeye sağ tıklayıp phpmyadmin seçeneğini seçmeniz yeterli oluyor.

projelerinizi kolay ulaşabilmeniz için de w harfiyle sanal bir sürücü yaratılmakta.

paket hakkında bir kaç bilgi;

sanal sürücü: w:/
sunucu url : http://localhost/
mysql - kullanıcı hesap bilgileri
kullanıcı adı: root
şifre :

xoopserver'ın son sürümünü buraya tıklayıp indirebilirsiniz.

portatif olarak tomcat çalıştırabilmek için de buraya inceleyebilirsiniz.

önemli bir ipucu: xoopserver skype ile aynı anda çalışamıyor. o nedenle xoopserver'ın sorunsuz çalışabilmesi için muhakkak skype'yi kapatın.

Bu yazı semih1 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

mükemmel photoshop dersleri

semih1 — Sat, 16 May 2009 06:50:00 GMT

En beğenilen Photoshop dersleri kategoriler altında toplanarak biz tasarımcıların beğenisine sunulmuş. Bazılarını daha önce çeşitli sitelerde görmüş olabilirsiniz ancak 60'dan fazla olan bu derslerin hepsinin bir arada ve kategorilenmiş olarak bulunması nedeniyle sizlerle paylaşmak istedim.

ışık Efektleri

the o series

Super Cool Abstract Vectors in Illustrator and Photoshop

Really Cool Eclipse Effect in Photoshop

Awesome Digital Bokeh Effect in Photoshop

Advanced Glow Effects

Create a Simple Vibrant Light Effect in Photoshop

Flying Girl in Photoshop

Magic Lighting Effect in Photoshop

Fantasy Light Effects in Photoshop

Sparkling Hot Girl in Photoshop

Fotoğraf Manüplasyonları

Combine Photo Elements to Create a Surreal Photo Manipulation

Design an Epic Fantasy Scene with Photoshop

Lighting a Giant Elephant

Create Amazing Photomontages

Making of a Sexy Humanoid

Combine 3D Renders with a Stock 3D Model

Slow Motion Bullet Shot Effect

Telling Stories with Shadows

Fotoğraf Efektleri

How to Make Digital Photographs Look Like Lomo Photography

Dark Grunge Photo Effect

Create a Retro Photo and Background

Alet Tasarımları

Create a Realistic Blackberry Style Mobile Phone from Scratch

Apple iPhone Mobile Phone Design

MacBook Air

Posterler ve duvar kağıtları

Creating an Old-Collage Effect Poster

Gig Poster Design

How to Make Retro/Futuristic Curves in 10 Steps

Trendy Geometric Lines Tutorial

Create Sci-Fi Poster Art

CD Cover Design

Create a Trendy Typographic Poster Design

Amazing Retro Rainbow Curves

How to Create a Movie Quality DVD Cover

Favorite Bands Tutorial

Yazı Efektleri

Create a Dream Design with 3D Typography

Create a Spectacular Grass Text Effect in Photoshop

Moon Shine Text Effect

Awesome Grunge Text Effect

Super Cool Frilly Bits Typography

3D Typographic Effects

Arayüz Tasarımı ve Yerleşim

Create a Clean Modern Website Design in Photoshop

Create a Sleek, High-End Web Design from Scratch

How to Create a Sleek and Textured Web Layout in Photoshop

Create a Nature-Inspired Painted Background in Photoshop

Photoshop Paper Texture from Scratch Then Create a Grungy Web Design with It

Create a Professional Portfolio Design in 17 Easy Steps

Design Watercolor Effect Menu

Hero Header

How to Create a Slick and Clean Button in Photoshop

Simge Tasarımı

How to Create a Super Shiny Pencil Icon

How to Create a Planet Icon Set in Photoshop

Araçlar

Photoshop’s Pen Tool: The Comprehensive Guide

Become a Master of the Pen Tool in Under 30 Minutes

Master Photoshop Selection Tools in Under 30 Minutes

Çeşitli

Creating Custom Patterns

Create a Retro Pop Art in Photoshop

Photoshop Tutorial: Space Environment

Photo Strip Photoshop Tutorial

How to Draw a Portrait in Photoshop

Custom Hang Tag

How to Make an Awesome Grungy Paper Texture from Scratch

Create a Realistic Blueprint Image from a 3D Object

Kaynak:vandelay

Bu yazı semih1 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

Arama Motorlarında Nasıl Hızlı Listelenilir?

semih1 — Tue, 22 Apr 2008 20:46:00 GMT

Arama motorlarında yeni açtığımız veya kullandığımız sitelerin listelenmesini sağlamak çoğu zaman bir sorun haline gelmiştir. Sitelerimize gelen kullanıcıların önemli bir kısmının arama motorlarından geldiğini düşünürsek arama motorlarının önemini bir kez daha anlamış oluruz.

Arama Motorlarına Kayıt

İşi fazla uzatmayalım ve arama motorlarında nasıl ve ne şekilde çabuk listelenebiliriz ona geçelim.

Arama motorlarında listelenme hızımız kısmende olsa sitemizin altyapısınada bağlıdır. Bu aşama için daha önce hazırladığım yazıyı inceliyerek işe başlamanızı öneririm.

Sonraki aşama için arama motorlarına merhaba demeliyiz ve kayıt sayfalarından sitelerimizi kaydetmemiz gerekmekte. Aşağıda popüler arama motorlarının kayıt sayfalarına ulaşabilirsiniz. Ayrıca şu aşamada şunuda belirtmem iyi olacaktır, program sitelerinde ve bazı sitelerde dolaşan ve otomatik arama motorlarına kayıt yapan programlar bulunmakta. Bu programlar altyapısından dolayı bazı sitelere kayıt yapabilmekte ama bunlar çokta verimli çalışan programlar değiller, programlarla uğraşmaktansa kendi yapacağınız kayıtlar işinizi daha düzenli ve kolay yapmanızı sağlayacaktır.
Google, Yahoo, Live Search, Submit Express, DMOZ, Genel arama motorları listesine şurdan, ülkelere göre arama motorları listesinede buradan ulaşabilirsiniz.

Arama motorlarına kayıtlarımızıda gerçekleştirdik şimdi ne yapacağız. Şimdi sitemize eli yüzü düzgün bir sitemap hazırlamanın vakti geldi. Sitemap arama motorlarımızın sitemizin link ve yollarını daha rahat bulmasına yardımcı olacaktır. Sitemap’ı google’ninde önerdiği ücretsiz xml-sitemap sitesi üzerinden gerçekleştirebilirsiniz. Site Haritamızı oluşturduk anasayfamızdan oluşturduğumuz sitemap’e link vermemiz iyi olacaktır ayrıca google webmaster’dan sitemap eklemekde google’da listelenmemiz hız kazanacaktır.

Site haritamızıda ekledikten normal kayıt ve listelenme süremiz 2-3 hafta arasında değişmekte tabi bu yazının amacı bunu dahada kısaltmak olduğu için devam ediyoruz. Arama motorları bilindiği üzere popülerliğe önem vermekte ve sitemizle aynı kategoride olan sitelerle link değişimi yapmanız yada reklam vermeniz googlede listelenme sürenizi yüksek derecede hızlandıracaktır. Peki nedir bu link değişimi link değişimi kendisinden belli olduğu gibi sitenin kendi içerisinde sitenizin linkini barındırmasıdır en kısa haliyle. Link değişimi içinse şuradan , burada yardım alabilirsiniz.Son olarak şunuda hatırlatmak isterim link değişiminde aşırıya kaçmak sizi google sandbox ile karşı karşıya getirecektir. Bu konuya dikkat etmenizi öneririm, google sandbox hakkında da ayrıntılara başka bir önceki yazımdan ulaşabilirsiniz.

arama motorlarında hızlı listelenmek için sizin bildiğiniz başka bir yol var mı?

Bu yazı semih1 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

101 Yüksek Kaliteli Css ve XHTML Web Şablonu

semih1 — Tue, 31 Mar 2009 09:01:00 GMT

Web Tasarımı için kullanabileceğiniz birbirinden güzel 101 yüksek kaliteli css ve xhtml şablonlara aşağıdan ulaşabilirsiniz.

Sıfırdan web sitesi oluşturalım yazısında bu yazım hakkında bir link yer almaktadır.

1. Çevresel Marka xhtml ve css web şablonu

çevresel marka

önizleme | indir

2. Organik Tasarım xhtml ve css web şablonu

organik tasarım

önizleme | indir

3. Üst Bölümü Kırılmış xhtml ve css web şablonu

üst bölümü kırılmış

önizleme | indir

4. Karanlık Boyutu xhtml ve css web şablonu

karanlık boyutu

önizleme | indir

5. iş xhtml ve css web şablonu

iş

önizleme | indir

6. Squick Tasarımı xhtml ve css web şablonu

squick tasarımı

önizleme | indir

7. Greefies Çözümü xhtml ve css web şablonu

greefies çözümü

önizleme | indir

8. Etkileyici xhtml ve css web şablonu

etkileyici

önizleme | indir

Devamı için buraya tıklayın.

kaynak

Bu yazı semih1 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

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

semih1 — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

CSS İle İlgili Yazdığım Diğer Yazılar

Bu yazı semih1 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

RapidShare Araçları ve İpuçları

semih1 — Tue, 13 Jan 2009 12:02:00 GMT

Rapidshare, inanılmaz database'iyle dünyanın en popüler dosya paylaşım/saklama sitesi olmakla birlikte aynı zamanda en çok ziyaret edilen siteler arasında. Kullanmak istemeseniz de o sizi bulur, mutlaka karşınıza çıkar ve kullanmak zorunda kalırsınız. Önceleri o sıkıcı bekleme süresini çeker, daha sonra "lanet olsun" deyip premium alırsınız. Böylece siz de bir "download" manyağı olmuşsunuz demektir. Bu yazıda tanıtılan rapidshare araç ve kaynaklarını paylaşmak istedim.

1. Ücretsiz İndirme Yöneticileri ve Hızlandırıcıları

2. Rapidshare Arama Motorları :

3. Bedava Premium Account Bildirici :

RapidCheck : RapidShare sık sık premium account dağıtıyor. Bunları yakalamak oldukça güç çünkü adetli dağıttığı için hemen bitiyor. Bu program bilgisayarınızda arkaplanda çalışırken dağıtım başladığı an haber veriyor.

4. İpucu & Kaçamak Kaynakları :

Sürekli güncellenen metodlar olduğu için kaynakları vermenin daha uygun olacağını düşünüyorum.

Tech-Recipes : Bekleme Zamanına Çözüm
Sr-Ultimate : Bir kaç değişik kaçamak tekniği
ReadYouth : Aynı anda birden çok dosya indirme
GHacks : Çeşitli İpuçları

Bir Tane de Benden : RapidShare Premium alarak bunların hepsinden kurtulabilirsiniz. Premiumu rapidshare üzerinden buradan aylık 7 euro'ya alabilirsiniz. Bir başka yol da benim yaptığım r10 premium satış sayfasından her zaman 8-10 TL civarına account alabilirsiniz. Buradaki arkadaşlar hesapları kendi puanlarıyla açtıkları için ucuza veriyorlar.

Bu yazı semih1 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