Web Mevzuları › Page 4

17.2.2010 by Hamdi Yaman

WordPress İçeriklerini Google Buzz’da Paylaşma

Geçtiğimiz hafta duyrulan Google Buzz için eklentiler ve araçlar bir bir ortaya çıkmaya başladı. Bunlardan birisi de WordPress blogumuzda yayınladığımız içerikleri Google Buzz’da paylaşmak için diğer sosyal ağ butonlarının yanına Google Buzz’u da ekleyen Wp Google Buzz. Kullanımı oldukça basit. Öncelikle eklentiyi indiriyoruz. Eklentiyi plugin dizinine atıyoruz ve aktifleştiriyoruz.

Panelde eklentinin ayarları ile ilgili kısım karşımıza geliyor. Buradan buton ayarlarını ve diğer ayarları kendimize göre uyarlayıp aşağıdaki kodu temamızın single.php (tema yerleşimine göre comment.php dosyası da olabilir) dosyasının içinde uygun bir yere yerleştiriyoruz.

<?php if(function_exists('add_wp_google_buzz')) { add_wp_google_buzz(); } ?>

Hepsi bu kadar. Artık ziyaretçilerimiz veya kendimiz yazılarımızı bu yolla Google Buzz’da paylaşabileceğiz.

10.2.2010 by Hamdi Yaman

10 İlham Kaynağı WordPress E-Ticaret Tasarımı

WordPress temelinde her ne kadar blog içerik yönetim sistemi olsa da birçoğumuzun farklı projelerde kullandığı bir ilaçtır. Gerek firma tanıtım siteleri için, gerek ürün sergilemek için gerekse e-ticaret için. Bu durum da WordPress’in kullanıcılara sağladığı dizayn esnekliğinden kaynaklanıyor. Birçok içerik yönetim sistemi kendi fonksiyonları dışındaki öğelere yer vermezken WordPress’e istediğimiz herşeyi entegre edebiliyoruz. Bu yazımda da WordPress’in blog haricinde e-ticaret için kullanıldığı yerleri derledim. İlerleyen günlerde bunu sağlayan eklentileri de derleyip bilginize sunacağım.

1-camerashopper.info

2-icondock.com

3-daisyjs.com

4-demo.billionstudio.com

5-neuro-enhancement.com

6-simpleshopper.info

7-ebookshopper.net

8-flowershopper.info

9-babyshopper.info

10-camerashopper.info

5.2.2010 by Hamdi Yaman

10 Güzel Kod Gösterim Şekli

Bloglarımızda veya diğer internet sayfalarımızda ara ara kodlar yayınlıyoruz. Yayınlanan bu kodların tasarım bütünlüğünü bozmaması ve okunabilirlik oranı da oldukça önemlidir. Bu derlememde bu kriterleri ele alan 10 farklı kod gösterim şekline göz atacağız. Aslında daha birkaç adet fazla gösterim şeklini listeye alabilirdim ancak onlar da listeye aldıklarımın aynılarıydı. Bu yüzden farklı olanlara göz atmak daha iyi olacak.

1-siarto.com

Renklendirme ve arkaplan rengi ile birlikte okunabilirliği geçrekten muhteşem. Tasarım bütünlüğü de ele alınarak harika bir gösterim elde edilmiş. Ayrıca CSS, HTM, PHP dillerinin hepsinde renklendirme yapılmış.

2-goodbytes.be

Arkaplan çok hoş görünmese de renklendirmesi oldukça iyi. Ayrıca siyah tasarım içinde hemen fark edilebiliyor. Yine farklı dillerde renklendirme yapılmış.

3-onwired.com

Listedeki en güzel kod gösterimlerinden. Satırların farklı renkle ve numaralarla gösterilmesi çok hoş. Ayrıca tasarım bütünlüğünü bozmayan renklerle ve okunaklı yapılması da müthiş. Tek eksiği kod renklendirmesinin eksik olması 🙂

4-24ways.org

Satırların numaralarla belirtilmesi ve her satırın farklı iki renkle ayrılması okunmasını kolaylaştırıyor. Her ne kadar kodlarda renklendirme yapılmasa da seçilen kod rengi okunabilirliği arttırıyor. Bu gösterim şeklinin en büyük artısı kodların en altında kod kaynağının txt dosyasında verilmesidir. Kopyalama yapılması için güzel bir özellik.

5-snipt.net

Renklendirme yapılması ve kod alanının diğer alana göre daha açık bir renkle gösterilmesi oldukça hoş.

6-alexsancho.name

Satırların numaralandırılmış olması ve satırların altının çizgilerle belirtilmesi güzel ve kullanışlı. Renklendirme yapılmasa da seçilen kod rengi aykırı durmuyor. Ancak kodu kopyalamak istersek biraz uğraşıyoruz çünkü satır numaraları ile birlikte ve aradaki boşlukları da alarak kopyalanıyor. Kaynak gösteriminde bile aynı sorun var. Bir artısı da kodun istendiğinde gizlenebilmesi.

7-viget.com

Kod alanının farklı bir renk ile belirtilmesi ve genel dizayna aykırı durmaması oldukça güzel. Uzun kod satırları için üzerine gelince alanın büyümesi çok kullanışlı. Renklendirme olmasa da rahat okunabiliyor. Ayrıca kopyalama yapmak çok basit. Tek kötü yanı numaralandırma yok.

8-yakuter.com

PHP, CSS, HTML ve diğer dilleri desteklemesi ve renklendirme yapması çok güzel. Ayrıca kaynak kodu görüntüleme ve kopyalamayı kolaylaştırma, yazıcıdan çıktı almak için buton bulunması, panoya kopyala butonunun bulunması çok büyük bir artı. Erhan’ın kullandığı bu gösterim şekli WordPress’e ait Syntax Highlighter eklentisi sayesinde yapılıyor.

9-kadirgunay.com

Renklendirme ve okunabilirlik oldukça iyi. CSS, HTML, JavaScript ve diğer birçok dili de destekliyor.

10-veerle.duoh.com

Kod alanının çizgili kağıt gösteriminde belirtilmesi ve her satırın hatasız gösterimi muhteşem. Numaralandırma, kod renklendirme de çok iyi. Ayrıca seçilen renkler de çok güzel. Listedeki en iyi gösterimlerden birisi de budur.

25.1.2010 by Hamdi Yaman

WordPress:Spam Yorumları Otomatik Olarak Çöp Kutusuna Gönderme

Bloglarımızda en sık karşılaştığımız sorunlardan birisidir spam yorumlar. Ancak WordPress’de bunun önüne geçmek için akismet tarzı eklentiler kullanılıyor. Bu tür eklentiler yorumları filtreleyip yorumların içindeki kelimelere göre içlerinden spam olanları çekip alıyor. Şimdi değineceğimiz konu ise bu yorumlar geldiğinde akismete veya diğer filtreleme eklentilerine devretmek yerine WordPress’in yeni özelliği “çöp” kutusuna direkt göndermekle ilgili olacak. Çöp kutusuna gönderme işin içine girince ekstra bir eklenti kurmaya da gerek kalmıyor. Çalışma mantığı olarak da belli kelimelerin bulunduğu bir havuzumuz var. Gelen yorumlar bu havuzdaki kelime veya kelime grupları ile karşılaştırılıyor. Eğer havuzdaki kelimelerden birisi kullanılmışsa hemen yorum çöpe atılıyor. Şimdi kodumuzu görelim ve ondan sonra birkaç noktaya daha değinelim.

Kodu temamızın foksiyon dosyası olan functions.php dosyasına ekliyoruz.

function in_comment_post_like($string, $array) {
	foreach($array as $ref) { if(strstr($string, $ref)) { return true; } }
	return false;
}
function drop_bad_comments() {
	if (!empty($_POST['comment'])) {
		$post_comment_content = $_POST['comment'];
		$lower_case_comment = strtolower($_POST['comment']);
		$bad_comment_content = array(
			'viagra',
			'hydrocodone',
			'hair loss',
			'[url=http',
			'[link=http',
			'xanax',
			'tramadol',
			'russian girls',
			'russian brides',
			'lorazepam',
			'adderall',
			'dexadrine',
			'no prescription',
			'oxycontin',
			'without a prescription',
			'sex pics',
			'family incest',
			'online casinos',
			'online dating',
			'cialis',
			'best forex',
			'amoxicillin'
		);
		if (in_comment_post_like($lower_case_comment, $bad_comment_content)) {
			$comment_box_text = wordwrap(trim($post_comment_content), 80, "\n  ", true);
			$txtdrop = fopen('/var/log/httpd/wp_post-logger/nullamatix.com-text-area_dropped.txt', 'a');
			fwrite($txtdrop, "  --------------\n  [COMMENT] = " . $post_comment_content . "\n  --------------\n");
			fwrite($txtdrop, "  [SOURCE_IP] = " . $_SERVER['REMOTE_ADDR'] . " @ " . date("F j, Y, g:i a") . "\n");
			fwrite($txtdrop, "  [USERAGENT] = " . $_SERVER['HTTP_USER_AGENT'] . "\n");
			fwrite($txtdrop, "  [REFERER  ] = " . $_SERVER['HTTP_REFERER'] . "\n");
			fwrite($txtdrop, "  [FILE_NAME] = " . $_SERVER['SCRIPT_NAME'] . " - [REQ_URI] = " . $_SERVER['REQUEST_URI'] . "\n");
			fwrite($txtdrop, '--------------**********------------------'."\n");
			header("HTTP/1.1 406 Not Acceptable");
			header("Status: 406 Not Acceptable");
			header("Connection: Close");
			wp_die( __('bang bang.') );
		}
	}
}
add_action('init', 'drop_bad_comments');

Fonksiyonda kelime havuzumuz 10. satırdaki ilaç markası ile başlıyor (direkt ilaç ismini yazmama sebebim Google aramalarında o ilaçla ilgili aramalarda blogumun listelenecek olması ve gerçekten bunu hiçbirimiz istemeyiz). Eklemek istediğimiz kelime veya kelime grupları varsa onları da aynı havuzdaki biçimde yani ‘kelime’; şeklinde araya sıkıştırmak yeterli olacaktır 🙂 Bu fonksiyonu ayrıca istemediğimiz bir yazıya gelen yorumları elemek için de kullanabiliriz. Mesela blogumda çok önceleri yazdığım msn şifresi ile ilgili bir yazı var. Bunu tamamen eğlenci amaçlı yazmıştım anca sonraları google aramalarında ilk sıralarda çıktı. Ve ardından hergün bu konuyla ilgili onlarca yorum silmek zorunda kaldım. Ben buna çözüm olarak ‘msn şifre’ yazacağım havuza. Çünkü bu yazıya gelen yorumların çoğunluğu bu kelimeleri içeriyor. Otomatik olarak silinmiş olacak yorumlar. Ayrıca diğer küfürlü yorumlar için de kullanabileceğiz.

Yazının orjinal hali WpRecies‘de mevcuttur.

19.1.2010 by Hamdi Yaman

50 İlham Verici Sekme Tasarımı

Hazırladığımız web sayalarında kullanış olarak çok faydasını gördüğümüz bölümlerden birisi de sekmelerdir.” Tab” olarak karışımıza çıkan bu yapılar ile aynı sayfa içinde birden fazla sayfanın verebileceği bilgiyi ziyaretçilerimiz ile paylaşma imkanı buluyoruz. Ajax’ın gelişmesi ile biraz daha görsel ve işlevsel bir hal alarak sayfayı hiç değiştirmeden bile sekmelerin altı görüntülenebilir hale geldi. WordPress temalarında da yan kısımda ve içerik kısımlarında oldukça yoğun bir şekilde kullanılmaya başlandı. Ben de sekmeli tasarımlar hazırlarken ipucu vermesi anlamında 50 tane örneği bu yazıda derledim.

1-slidedeck.com

2-popscreen.com

3-delibarapp.com

4-theofficeclue.com

5-sourcebits.com

6-dishizzle.com

7-typejockeys.com

8-imgspark.com

9-thecssblog.com

10-livestream.com

11-32round.com

12-ceusa.com

13-nameourbaby.ca

14-zunostudios.com

15-monassoc.com

16-freeagentcentral.com

17-myfonts.com

18-berttimmermans.com

19-outlawdesignblog.com

20-atebits.com

21-vyniknite.sk

22-apple.com

23-expressionengine.com

24-apple.com

25-jepcoministorage.com

26-simplifiedbuilding.com

27-getmiro.com

28-ministryofsound.com

29-cnn.com

30-bohemiancoding.com

31-veer.com

32-fidesvita.org

33-audi.de

34-wireandtwine.com

35-bigbrownbox.com.au

36-postrank.com

37-domestika.org

38-thewojogroup.com

39-whatalovelyname.com

40-kids.threadless.com

41-tumblon.com

42-mormon.org

43-jivesoftware.com

44-yourchurch.com

45-bell.ca

46-designologue.com

47-onebuttonmouse.com

48-cnn.com

49-dmry.net

50-facebook.com

13.1.2010 by Hamdi Yaman

WordPress:Son Yorumları Gravatar İle Gösterme

WordPress blogların hemen hemen tamamında “son yorumlar” adında bir bölüm görüyoruz. Bu bölüm blog içerisinde yazı zamanı gözetmeksizin ziyaretçi tarafından en son yapılan yorumları gösterir. Genelde gördüklerimiz yorum yazarının adı ve yorum formatındadır. Ancak bazı temalarda bu formata ilave olarak resim, avatar da gösteriliyor. Özellikle özel temalarda bunu görmek mümkün. Görsel olarak çok güzel görünüyorve tabi anlaşılırlık olarak da aynı seviyede… Resimler ise Twitter veya Gravatar servislerinde belirlenmiş profil reimlerinden alınıyor. Bu yazımızda Gravatar’dan alınan küçük resimlerle bunun nasıl yapılacağına bakacağız. Aslında çok basit bir kod yığınından faydalanıyoruz bunu yaparken.

Aşağıdaki kodu temamızın “sibebar.php” veya başka göstermek istediğimiz bir yer varsa oraya kopyalıyoruz.

<?php
$query = "SELECT * from $wpdb->comments WHERE comment_approved= '1'
ORDER BY comment_date DESC LIMIT 0 ,5";
$comments = $wpdb->get_results($query);
 
if ($comments) {
    echo '<ul>';
    foreach ($comments as $comment) {
        $url = '<a href="'. get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID .'" title="'.$comment->comment_author .' | '.get_the_title($comment->comment_post_ID).'">';
        echo '<li>';
        echo '<div class="img">';
        echo $url;
        echo get_avatar( $comment->comment_author_email, $img_w);
        echo '</a></div>';
 
        echo '<div class="txt">Par: ';
        echo $url;
        echo $comment->comment_author;
        echo '</a></div>';
        echo '</li>';
    }
    echo '</ul>';
}
?>

Yazının aslı ve kaynağı Wp Recipes‘dir.

30.12.2009 by Bilal Çınarlı

Yeni Nesil Popuplar 1: jQuery Lightbox Eklentileri

2000li yılların ilk başlarında yaşadığımız popup kabuslarından sonra popup engelleyici programların çoğalması ile yazılımcılar yeni arayışlara başladılar. Asıl amacı yeni nesil bir popup gösterici olmasa da, birçok yazılımcı için 2006 yılında Lokesh Dhakar‘ın hazırladığı lightbox fotogaleri uygulaması sadece fotogaleriler için yeni bir dönemi değil aynı zamanda popuplar ve websitesi uygulamaları için kullanılmaya başlayacak bir çok uyarı, tanıtım ve işlem pencerelerinin de hazırlanmasına öncülük etti. Continue reading →

28.12.2009 by Hamdi Yaman

50 İlham Kaynağı İletişim Sayfası

İnternet sayfalarının vazgeçilmezlerinden birisi belki de en önemlisi iletişim sayfalarıdır. Şirket sayfalarında iletişim bilgilerinin yanında elbette erişim, ulaşım bilgileri de olmak zorundayken kişisel sayfalarda bu mecburiyet yerini iletişim formlarına bırakıyor. Aslında bu yazı ile vereceğim örnek iletişim sayfalarında ve bölümlerinde bu bölümün önemini daha iyi anlayacağız. Ben şahsen hazırladığım sitelerde iletişim bölümüne çok özenmiyordum ve bugün anladım ki normal tasarımdan daha fazlasına ihtiyacı var bu sayfaların. 50 tane örnekte çok akıllıca, kullanışlı hazırlanmış olanlarını ele aldım. Ayrıca içinde birkaç tane yerli site de mevcut.

1-Fernando Landi

2-Radium Labs

3-Koorman

4-Paper Street

5-Mutant Labs

6-CramerDev

7-Pampaneo

8-Odopod

9-Wallace HCL

10-Baritchi

11-Aston Agency

12-Fajne Chlopaki

13-KevAdamson

14-Bert Timmer Man

15-Clear Left

16-Sprocket House

17-MB Dragan

18-Simplified Building

19-Piraja

20-Popular Front

21-Kyan Media

22-Paramore Redd

23-Sam Brown

24-Ordered List

25-Artificial Studio

26-Alexandru Cohaniuc

27-Substrakt

28-Deluge Studios

29-Thedolectures

30-Mormon

31-Roome

32-Hotel Oxford

33-Head Scape

34-Edit Studios

35-V-S-P

36-House Hold

37-Pixel Light Creative

38-Cámara de Comercio Hispano – Sueca

39-Made by Elephant

40-Kurtnoble

41-SR28

42-Cuban Council

43-BublesSOC

44-The Chemistry Group

45-Point Zero

46-Steve Ottenad

47-Ufuk Bahar Dördüncü

48-MYK-Medya

49-3Renk

50-Vodacoangency

22.12.2009 by Bilal Çınarlı

Yeni Başlayanlar için jQuery

Son yıllarda javascript kütüphanelerinin artması ve gelişmesiyle web sayfalarının çehresi oldukça değişti. Artık javascript animasyonlarının daha kolay yapılabilmesi, kütüphaneler ve eklentileri sayesinde hazırlanan aksiyonların tekrar tekrar kullanılabilmesini sağladı. İleri seviyede yapılan çalışmalarla flash animasyonlara taş çıkaran javascript tabanlı siteler hazırlanmaya başlandı. Ayrıca sayfalarımızın vazgeçilmezi olan bir çok uygulamanın da (lightbox, tooltip, ajax) ana kaynağı oldu bu kütüphaneler.

Şimdiki yazımızda, bu kütüphanelerden en çok bilinenlerinden biri olan ve eklenti bakımından en zengini sayılan jQuery kütüphanesinin sayfalarımıza eklenmesinin nasıl yapılacağını öğreneceğiz. Continue reading →

20.12.2009 by Hamdi Yaman

35 jQuery Resim Galeri Eklentisi

jQuery eklentilere günlük kullandığımız sitelerin birçoğunda rastlamak mümkün. Bunu da hem görsellik yönünden zengin olması hem kullanım kolaylığı hem de kullanılan projelere entegrasyonda kolaylık sağlamasına bağlayabiliriz. Bu eklentileri elimizden geldiğince inceliyorum ve sizlerle de paylaşıyorum. Bu yazımda da değişik türde 35 tane resim galerisine birlikte bakacağız.