Firefox’da goo.gl Kullanımı

Birçoğumuz Google’ın geçtiğimiz hafta  Goo.gl adında bir link kısaltma servisi açtığını biliyoruz. Ancak diğer URL kısaltma servislerindeki gibi servis olarak çalışmıyor. Yardımcı araçlar ve kendi bünyesindeki araçlar ile çalışıyor. Google Chrome için eklentisi var ancak Firefox için yapılan çok da birşey yok. Ben araştırıp anca bir tane eklenti bulabildim ama o da çalışmadı. Bunun yerine Bookmarklet imi olarak kullanılan güzel bir javascript betiğinden yararlanacağız.

Goo.gl =bu linki yer imlerine doğru sürükleyip bırakın.

Kullanım için de yer imlerindeki Goo.gl butonuna basıp oluşan kodu uyarı penceresinden kopyalamak yeterlidir.

65 Kullanışlı Footer Tasarımı

Günümüz internet sayfalarında footer dediğimiz alt kısımların tasarımları da oldukça modern ve kullanışlı bir şekilde tasarlanıyor. Daha önce de bu footer tasarımlarının incelendiği oldukça fazla yazı yazıldı. Ben de uzun zamandır bu konuyla ilgili bir derleme yapmayı düşünüyordum. Sonuç olarak 65 tane örnekten oluşan bu derlemeyi oluşturdum. Derlemeyi hem tasarım bütünlüğü hem de kullanış açısından yaptım.

1-R.U.4 Children

2-PV.M Garage

3-Launch Min

4-Fatburgr

5-Electric Pulp

6-Bela Alvorada

7-Ecoki

8-Edgepoint Church

9-Productive Dreams

10-DennisBloete

11-Johanna Hallin

12-I Primi Dieci

13-Ungarbage

14-YoDiv

15-Volll

16-Larissa Meek

17-Logo Design

18-Big Media Daily

19-Guilago

20-Melly.me

21-ZDnet

22-PlayStop

23-SimpleBits

24-Veerle’s Blog

25-nGen Works

26-Viget

27-Hopking Design

28-Freelenz

29-Ritche Linao

30-Elan

31-New Concept

32-eSpace

33-David Airey

34-Split Da Diz

35-Bristol Archive Records

36-Amuki

37-Biola

38-bcandullo

39-Albertlo

40-incubus

41-Spodek

42-Us Trendy

43-NTV MSNBC

44-Dmry

45-sr28

46-Viget

47-Tulsa Tough

48-SamRayner

49-Apple iMac

50-Judorijeka

51-Carhartt Streetwear

52-Roome

53-Obsessable

54-CSS-Tricks

55-David Hellmann

56-Kanal D

57-Web Designer Wall

58-Creamy CSS

59-Drupal Con

60-Bush Theatre

61-Evanto

62-Freshout

63-Lionite

64-Carsonified Events

65-Yapı Kredi

Projelerinizde Kullanabileceğiniz 11 jQuery Araç İpucu (ToolTip) Eklentisi

Web sayfalarını hazırlarken kimi zaman yerden kazanmak için, kimi zaman bilinmeyen bir terimi açıklama için, kimi zaman da yapılması gerekenleri anlatmak için, arayüz tasarımcıları bolca araç ipucu baloncuklarını kullanırlar. Genel olarak metin bazlı içeriğe sahip olan bu araç ipuçları, tasarıma ve kullanım yerlerine göre farklı içerik ve görünümlere sahip oluyorlar. Hepsinin bilinen ortak özellikleri arasında ise, metin bazlı içerik, fare ilgili alan üzerine gelince görünme bulunuyor. Kullanışlı olduğunu düşündüğümüz jQuery javascript kütüphanesi kullanılarak hazırlanmış 11 tane araç ipucu eklentisini derledik. Continue reading

FriendFeed Embed Özelleştirme

Temamda kullandığım sosyal akış sayfasında kullandığım sosyal ağ ve servislerdeki son durum güncellemelerinin gösterildiğini söylemiştim. Bunun için de FriendFeed’in sağladığı API desteğini kullanmıştık. API arkaplan rengi, durum görüntülerinin istediğimiz şekilde düzenlenmesine imkan veriyor. Ancak biraz da programlama bilgisine sahip olmamız gerekiyor. Ancak FriendFeed’i sitemize eklerken özelleştirme yapmak için bir diğer yol da embed kodumuzu CSS ile desteklemektir.

Dün bir projemde kullanırken öğrendim FriendFeed’in embed koduna CSS ile katkı sağladığını. Düzeni bozmamak için varsayılan çerçeve rengini, yazı tipini, yazı rengini, logo durumunu ve daha birçok özelliği kendimiz belirleyebiliyoruz. Sadece arkaplan için herhangi bir yetkilendirme yapamıyoruz. Zaten logoyu gizleme, hesap daveti gibi özellikleri kaldırmak için embed kodunu oluşturmadan önce seçenekleri ayarlıyoruz. Bunun dışındaki çerçeve rengi, yazı tipini ise aşağıdaki kod ilebelirlemek mümkün.

#friendfeed { border: 0px !important;
background:none !important;}
.widget { border: 0px !important; font-family: Arial, Helvetica, sans-serif;}
.feed { border: 0px !important; font-family: Arial, Helvetica, sans-serif;}
.body {   border: 0px !important }
.logo { border: 0px !important }

Bu kodu sitemizin CSS dosyasına ilave ediyoruz. Hepsi bu kadar.

FeedBurner Beslemesini Twitter’da Görüntüleme

Google hergün karşımıza bir yenilikle çıkıyor. Dün link kısaltma ile ilgili çalışmalarını internette okumuştuk. Goo.gl şeklinde link kısaltmalarını artık çokça göreceğimiz kesin. Bununla birlikte bir diğer değişiklik de FeedBurner hesabımıza Twitter hesabımızı entegre etmemizdir.

Yani mevcut FeedBurner beslememize düşen girdileri otomatik olarak Twitter’da gönderip paylaşmak mümkün. Zaten yukarıdaki her iki yenilik de birbiri ile bağlantılı. Çünkü Twitter uzun linkleri otomatik kısaltıyor.  Entegre işlemi için FeedBurner hesabımıza giriş yapıp besleme adına tıklıyoruz. Karşımıza bir sonraki adımda gelecek olan sayfadaki üst menüden “publicize” seçeneğine gidiyoruz. Buradan da “socialize” kısmına gidiyoruz.

Bizi karşılayan bu sayfadaki “add a twiter account” butonuna basıyoruz. Buradan bizi Twitter’ın onaylama sayfayasına götürecek. Buraya güvenerek Twitter kullanıcı adı ve parolamızı girip “allow” yönergesine gidiyoruz. Ardından da üst resimdeki sayfanın en altına gidip “active” butonuna giderek bu özelliği aktifleştiriyoruz. Post Content seçeneğinden ister sadece başlık istersek hem başlık hem de izin verilen karakter sayısı kadar içerik Twitter’da yayınlanabilir.

Beslemelerimize düşen girdiler Twitter’da yukarıdaki gibi görünecek. Tabi başlık ve içerik olarak yayınlamayı seçersek içeriğin de bir kısmını görebiliriz. Böylece bir eksik daha çok iyi bir şekilde kapatılmış oldu.

PHP Çalışmalarınız İçin Apache, PHP ve MySQL Kurulumu

Blogunuzda, hazırladığınız web sitesinde yapacağınız bir çok değişikliği, dosyalarınızı her seferinde sunucuya yüklemeden önce kendi bilgisayarınızda kuracağınız bir lokal sunucu ile kontrol edebilirsiniz. Özellikle son yıllarda kullanımı çok yaygınlaşan bloglar ile hemen hemen her blog sahibi bir lokal sunucuya ihtiyaç duymaya başladı. PHP derslerimizin birinci adımı olarak bu ilk dersimizde bilgisayarımıza XAMPP programı yardımı ile bir lokal PHP sunucusu kuracağız. Continue reading

Sade ve Harika Yapılacaklar Listesi Servisi

Bugüne kadar onlarca to-do dediğimiz yapılacaklar listelerinin sunulduğu sevisi inceledik ve kullandık. Benim son kullandığım ise Gmail içindeki listeydi. En büyük avantajı ise Gmail içindeyken tüm herşeyi kontrol edebiliyor olmamızdı. Ancak TeuxDeux tüm bunları alt üst ediyor. Sebebi ise çok sade bir şekilde sunuluyor olması ve kullanışlı olması.

Kullanışlı olmasındaki en büyük etken ise masaüstü ajandaları gibi yapılacakları günler halinde sıralıyor. İleriye veya geriye dönük tarama yapmak ise kaydırma özelliği sayesinde çok basit bir hal alıyor.

Servisi bizzat test ettim ve birkaç gündür kullanıyorum. Herkese de tavsiye etmeyi unutmuyorum. İlerleyen günler de bir de Adobe Air aracı ile birleştirilirse tadından yenmez, yanında da yatılmaz 🙂

CSS3:Oval Köşe Kullanımı

Web sayfalarında görsel açıdan önemli yer tutan öğelerden birisi de oval köşelerdir. Oval köşelerin tasarım aşamasında çizimi basit olsa da kod dökümünde oldukça sıkıntı verenek bir olaydır.  CSS3’e kadar her köşeye bir resim atayıp oval görüntüyü bu şekilde elde ediyorduk. Ancak bu durum gereğinden fazla kodu, gereksiz resimleri de yanında getiriyordu. Bu da sayfayı görüntülemek isteyince de haliyle daha yavaş yüklenmekte. Resimlerin gereksiz bantwith kullanımını hiç söylemeyelim bile. İşte tüm bunlar CSS3 ile birlikte son buluyor. CSS3’ü de şu anda modern tarayıcalardan olan Firefox ve Opera tarafından ağırlıklı olarak destekleniyor. Yani aşağıda yapacağımız örnekleri bu iki tarayıcıdan birinde görüntülemek en doğrusu olacaktır.

Örnek 1: Her Köşeye Ovallik Verme

#ornek1{
	width:500px;
	height:100px;
	background:#C6EAFF;
	border:2px solid #0080FF;
	-moz-border-radius:10px;
	-webkit-border-radius:0px;
	padding:10px;}

Yukarıdaki kodlarda -moz-border-radius ve -webkit-border-radius yardımıyla köşeleri oval yapabiliyoruz. Buralardaki pixel değerlerinde oynama yaparak daha oval veya daha düz görüntüler elde etmek mümkün. Örnekteki 10px ovallik değeri ile aşağıdaki görüntüyü elde ediyoruz.

Örnek2: İstediğimiz Köşeyi Oval Yapma

Yukarıdaki örnekte her köşe yazdığımız standart kod yardımıyla oval oldu. Ancak istediğimiz köşeyi oval istediğimizi keskin yapmak mümkün.

#ornek2{
	width:500px;
	height:100px;
	background:#FDD;
	border:solid 2px #EA0000;
	-moz-border-radius-topleft:15px;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-right-radius:15px;
	padding:10px;}

Biz bu örnekte sol üst köşeyi ve sağ alt köşeyi oval yaptık. İstersek tam tersini de yapmak mümkün. Bunun için aşağıdaki değerlere göz atmak gerekiyor.

  • -moz-border-radius-topleft
    -webkit-border-top-left-radius
    sol üst köşe
  • -moz-border-radius-topright
    -webkit-border-top-right-radius
    sağ üst köşe
  • -moz-border-radius-bottomright
    -webkit-border-bottom-right-radius
    sağ alt köşe
  • -moz-border-radius-bottomleft
    -webkit-border-bottom-left-radius
    sol alt köşe

Yukarıdaki konumlamalar ile kodlarımızı oluştururarak istediğimiz köşeye istediğimiz ovalliği verebiliyoruz.

Örneği görüntülemek için buraya CSS dosyasına bakmak için de buraya bağlantı vererek yazımızı bitirelim. Sorularınızı yorumlardan iletebilirsiniz.

Flickr Resim İndirme Aracı:Bulkr

En beğendiğim ve aktif olarak kullandığım resim paylaşım ağı Flickr resim indirme konusunda biraz cimri davranıyor. Cimri derken kendi resimlerimizi bile indirirken dört sayfaya uğrayıp resimlere ulaşabiliyoruz. Tabi bu işlem biraz fazla sıkıcı ve zaman alıcı. Şimdi bahsedeceğim araç yardımıyla bu süreyi zayi etmeden ve o kadar sayfanın arasında kaybolmadan indirebiliyoruz resmi. Araç Adobe Air tabanlı ve oldukça kullanışlı.

Araç genel olarak bakınca;

  • Kendi dosyalarımızın orjinal boyutlarını
  • Favori resimlerimizi
  • Herhangi bir fotoğraf koleksiyonunu
  • Kendi fotoğraf koleksiyonlarımızı
  • 6 farklı boyutta yine kendi fotoğraf koleksiyonumuzu
  • Arama sonuçlarında çıkan resimleri

İndirme imkanı sunuyor.

Bulkr adındaki bu aracı indirmek için buraya uğrayıp “install now” butonuna basmak yeterli.

WordPress:Yorum Formunda HTML Etiket Kullanımını Engelleme

Blogların en can alıcı noktalarından birisi yorumlardır kuşkusuz. WordPress bloglarında da diğer bloglar gibi yorumlar mevcuttur. Hatta gelişmiş özellikler de sunabilir. Bunlardan birisi HTML etiketlerinin kullanılmasıdır. HTML etiketleri de yorum içinde link verme, resim gösterme, kalın veya italik yazı yazma gibi bazı özellikler sunuyor. Ancak bir durum da var ki bu etiketler açık olduğu taktirde spam mesajların da vazgeçilmezi durumuna geliyor. Spam mesajlar için her ne kadar eklentiler bulunsa da tam istenilen sonuçlara ulaşılamıyor. Örneğin Akismet’de bazı spam olmayan yorumlar da spam olarak alglanıyor ve silme işleminde kurunun yanında yaş da yanar misali siliniyorlar. HTML etiketleri kaldırdığımız taktirde bunların tamamen olmasa da bir miktar önüne geçmiş oluyoruz.

HTML etiketlerini kaldırmak için temamızın functions.php dosyasına aşağıdaki kodu dahil ediyoruz:

// This will occur when the comment is posted
function plc_comment_post( $incoming_comment ) {
// convert everything in a comment to display literally
$incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);
// the one exception is single quotes, which cannot be #039; because WordPress marks it as spam
$incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] );
return( $incoming_comment );
}
// This will occur before a comment is displayed
function plc_comment_display( $comment_to_display ) {
// Put the single quotes back in
$comment_to_display = str_replace( ''', "'", $comment_to_display );
return $comment_to_display;

Hepsi bu kadar. Yazının orjinali de burada yer almaktadır.