by Hamdi Yaman

Kod Arşivinize Çeki Düzen Verin

Web işinin veya yazılımların derinliklerini ucundan köşesinden bulaşmışsanız mutlaka bir kod arşiviniz var demektir. Bu kod arşivi ilk başlarda masum gibi görünse de ilerleyen zamanlarda bir çöplüğün minyatür halinden başka birşeyi ifade etmemektedir. Aradığımızı bulamama, yanlışlıkla silme ve bunlara benzer sorunlarla karşılaşıyoruz.

My Code Stock servisi bu konuda imdadımıza yetişerek kod arşivimizi düzenli bir hale getirmemizi sağlıyor. Klasör oluşturma imkanı, detaylı kod tanımı, kod renklendirme, kodları paylaşma veya gizli yapma özelliklerinin hepsini bulunduran servise üyelik de ücretsiz.  Ayrıca etiket sistemi ile yönlendirmeleri daha da kolay yapabiliyoruz.

by Hamdi Yaman

WordPress Kod Parçaları

WordPress ile tanışmış birçok insan mutlaka kodlara bulaşmıştır. En basit facebook adresi eklemesini bile “sidebar” içerisine eklemek için kodları eliyle tutmuş gözüyle görmüştür. İşin biraz daha ileri kısmında tabi tema düzenleme veya sıfırdan tema yapmak duruyor. İster sadece site yöneticisi olalım ister tema düzenleyelim istersek de sıfırdan tema kodlayan iyi bir kodlamacı olalım bazı zamanlar hazır kod parçalarına ihtiyaç duyarız. İlk aramamız Google veya WordPress Codex içerisinde gerçekleşecektir. Şimdi bunların yanına bir de WordPress Snippets‘i ekliyoruz.

WordPress Snippets içerisinde güncel kod başlıklarını etiket sistemi ile bulabiliyoruz. Bunun dışında kendi aramalarımızı da arama kutusu yardımıyla yapabiliyoruz. Arama sonucunda konuya gittiğimiz zaman kod ve hangi dosyaya ekleneceği bilgisini alıyoruz. Altına yapılan yorumlar ise güzel fikirler veriyor insana kod ile ilgili.

Oldukça güzel bir çalışma ve kaynak olacağı kesin. Tabi gün geçtikçe içeriği de büyüyecektir, her aramaya cevap verebilir hale gelecektir.

by Hamdi Yaman

Snippely: Adobe Air Kod Arşivleme Aracı

Web geliştirme, programlama ile uğraşan birçok kişinin çektiği sıkıntı belirli betikleri, kod parçalarını arşivlemektir. Güzel bir fonksiyonu internette görüp alıyoruz daha sonra da bu kodun nerede olduğunu, hangi dosyaya kaydettiğimizi bir türlü bulamıyoruz. Yani işin özü eğer kod arşivi yapıyorsak bunların arasında kaybolup gidiyoruz. Snippely bu soruna çözüm getiren çok güzel bir Adobe Air aracı.

Snippely‘i indirdikten sonra Air paketini açıp bilgisayarımıza yüklüyoruz.

Mantık olarak araç; çeşitli kategoriler oluşturup içine PHP, javaScript vb. kodları yerleştirmek, kodlara dair notlar eklemek üzere kurulu. Ayrıca kod renklendirme özelliği de bulunuyor.

Aracın en büyük eksiği içeri veya dışarı aktarma olmaması. Haliyle herhangi bir yedek alma, internet servislerinde paylaşma gibi bir durum da söz konusu değil. Ancak böyle bir özellik olmamasına rağmen yedeğimizi alabiliyoruz şöyle ki:

Windows Xp için: C:\Documents and Settings\USER\Application Data\com.snippely.xxx\Local Store

Windows 7 İçin  : C:\Users\USER\AppData\Roaming\com.snippely.xxx\Local Store

Yukarıdaki dizinlerin içinde yer alan application dosyası aracımızın veritabanı dosyası. Bu dosyasyı çektiğimiz zaman diğer bilgisayarlarda kullanma veya yedek alma işlemini yapmış oluyoruz.

Araç mantık olarak çok kullanışlı görünüyor. Genel olarak güzel de. Ancak kod, not aratma, dışarı/içeri aktarma özellikleri ile biraz daha zenginleşmesi gerekiyor. Şu anda 1.1 numaralı sürümü ki ilerleyen sürümlerde bahsettiğimiz özellikler de eklenecektir.

by Hamdi Yaman

CSS Kodu Hazırlamak Artık Çok Kolay

CSS, web işleri ile uğraşan herkesin kısmen de olsa bilmesi gereken bir iştir. Blog yazarlarının bile bloglarında yapacağı yerleşimlerde, ekleyecekleri resimlerde, yazacakları yazılarda mantıken bilmeleri gereken birşeydir. Daha sonraki aşamada ise kendi tasarımlarını CSS’e aktarıp bir dizayn oluşturması vardır. Ancak bazen bu durum çok kolay olmayabiliyor. CSS’deki tüm terimlerin akılda tutulması bazen zor olabiliyor.

İşte tüm bunları göz önünde bulunduran ve neredeyse hiç bilgisi olmayan birinin bile kolayca CSS hazırlamasına imkan sağlayan Drawter artık imdada yetişiyor. Drawter yazarak değil çizerek CSS kodları hazırlamamızı sağlayan çok güzel bir servis.

Şimdi servisin kullanımından biraz bahsedeyim resimler yardımıyla.

Bizi yukarıdaki gibi üst ve sol kısımda cetveli bulunan bomboş bir sayfa karşılıyor. Burada biz istediğimiz ölçüleri çizeceğiz. Örnekte ben 500 px genişlik ve 50 px yüksekliğe sahip bir alan çizdim. Şidmi ikinci resimde bu alana div mi yoksa başlık mı veya başka bir şey mi geleceğini belirleyeceğiz.

Az önce çizdiğimiz alana “drawing options” menüsünden ne atayacağımızı seçiyoruz. Ayrıca “markup tree” yardımı ile iç içe giren divleri görebiliyoruz. Daha doğrusu kutu modelini daha basit bir şekilde görebiliyoruz.

Tüm işlemlerimiz bittikten sonra da “code” menüsünden kodumuzu oluşturuyoruz. Hepsi bu kadar. Zaten HTML yerleşim kodunu da CSS kodu ile birlikte verdiği için tekrar zamanımızı harcamaya gerek kalmıyor. Ayrıca işe başlamadan önce şuradaki videoyu da izleyerek anlatmak istediklerim hakkında daha geniş bilgiye sahip olabilirsiniz.

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.

by Hamdi Yaman

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.

by Hamdi Yaman

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 →

by Hamdi Yaman

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.

by Hamdi Yaman

Safe Mode Kapatma

Sunucularda Safe Mode dediğimiz dışarıdan gelebilecek saldırılara karşı bir önlem bulunmaktadır. Bununla dış kaynaklardan bilgi çekilemiyor. Ancak asıl sorun resim dosyalarında çıkıyor. Kendi sunucumuz içindeki bir resimde bile sorun çıkabiliyor. WordPress kullananların da bir numaralı engellerindendir Safe Mode. Özellikle resim galeri eklentilerini kullanabilmemiz için sunucuda Safe Mode özelliğinin pasif olması gerekir. Tabi sunucu sahipleri de bu özellik işe yaramasa bile açık durumda kalmasını ön görüp kapatmıyorlar. Biz de bir durumda bu engelle karşılaştık. Sevgili Bilal Çınarlı da bize iki parça kod verdi.

Continue reading →