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.

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

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.

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.

Google’dan DNS hizmeti

Geçtiğimiz gün Google herkesin kullanımına açık bir dns hizmetini duyurdu. Yaptıkları açıklamaya göre bu interneti daha hızlı hale getirmek için yaptıkları çalışmalara katkı sağlayacakmış. Henüz beta aşamasında bulunan hizmetlerini 8.8.8.8 ve 8.8.4.4 DNS adreslerinden veriyorlar. Hizmet yeni başladığı için OpenDNS ile sahip olduğumuz gibi bir yönetim paneli ve gelişmiş kullanıcı arayüzü bulunmuyor. Sadece DNS adreslerini yazıp internette gezmeye başlıyorsunuz. Continue reading

WordPress 2.9 Veritabanı Onarma Özelliği

Wp Engineer’in şuradaki yazısına göre WordPress 2.9 içinde veritabanı onarma özelliği olacak. Peki bu özelliği ne için kullanacağız? Özellikle veritabanının kitlenmesi durumunda çok faydalı olacak. Bazı eklentilerden dolayı veritabanları kitleniyor ve yönetim paneline ulaşılamıyor. Bunun yanında gelen spam mesajlardan dolayı da kitlenme durumuna maruz kalabiliyoruz. Bu durumlarda yaptığımız işlem phpMyAdmin’e girip tüm tabloları seçmekti. İşte bu işlemi host yönetim paneline girmeden WordPress yönetim paneli içinde yapabiliyor hale geceğiz.

Continue reading

jQuery ile Hareketli Arkaplan Yapma

Web tasarımının önemli unsurlarından birisi arkaplanlardır. Arkaplanların da en yaygın kullanım şekli hareketsiz resimlerden oluşan kombinasyonlardır. Hareketli olanlarına şimdiye kadar pek rastlamadım işin açığı. Ben kendim blogumda header resmini hareketli yapmak istemiştim ve bunu flash dosyası yardımıyla yapabilmiştim. Ancak bu da hem blogun yüklenme süresini uzattı hem de kodların bir hayli iç içe girmesine neden olmuştu. Ancak jQuery ile hareketli arkaplanlar oluşturmak artık daha kolay olacak. Burada bir örneğine ulaşacağımız tekniğin nasıl yapıldığını öğrenmek, kaynak kodlara ulaşmak için de şuraya uğramak yeterlidir. Kesinlikle arşive alınması gereken bir döküman olduğu için buraya yazma ihtiyacı hissettim. Belki ilerleyen projelerimde sıkça da kullanacağım.

jQuery Tabanlı Site Yapım Aşaması Aracı

Daha önce birçok sitenin yapım aşaması ekranına şahit olmuştuk. Kimisi geri sayım ekranlarında kimisi başka türde ibareler yerleştirmişti. Bunlardan geri sayım yapanını ben de kullanmıştım. Benim kullandığım Erhan’ın da kullandığı bir javascript uygulamasıydı. Dosya içinde yaptığımız zaman ayarı ile belirlediğimiz bir zamana geri sayım yapıyordu. Ancak bugün çok daha kullanışlı bir araç ile karşılaştım.

Continue reading