Fatih Hayrioğlu'nun not defteri » Dreamweaver

CSS İpucu 30 : background() tanımında tırnak kullanımı

fatih.hayrioglu — Thu, 20 Jan 2011 19:49:36 +0000

CSS kodu yazarken background tanımlarında bazı yerlerde tırnaklı tanım yapıldığını, bazı yerlerde ise tırnaksız tanım yapıldığını görmüşsünüzdür.

	background("deneme.gif");

veya

	background(deneme.gif);

Ben birkaç güne kadar arada bir farkın olmadığını düşünüyordum.(Aslında benim gibi özel durumlar hariç bir fark olmadığı hakkındaki düşüncem devam ediyor.)

Projede css’de kullanılan resimlerin ön belleğe alınmaması için background:url(denem.gif?v={VERSION}) diye bir yol izliyoruz versiyon kısmına her atılan versiyonun numarası yazıyor ve böylelikle tarayıcılar resimler önbelleğe almıyor özelliklede Chrome!

Tabi bu kullanım Dreamweaver’da css otomatik tamamlamasını ve bu tanımdan sonraki özelliklerin renklendirmesini bozuyor.

	background(deneme.gif?v={VERSION});

Dün ise eğer bu tanımı tırnak içinde yazarsam Dreamweaver otomatik tamamlaması ve kod renklendirmesini bozmadığını gördüm ve sevindim.

	background("deneme.gif?v={VERSION}");

Sağlıcakla kalın.

Adobe Dreamweaver CS5 Yenilikleri

fatih.hayrioglu — Mon, 25 Oct 2010 20:17:04 +0000

Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.

Yeni sürüm ile birlikte gelen yenilikler ;

CSS Inspection

Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.

Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.

En büyük yeniliklerden birisi bu olmuş.

Adobe BrowserLab

Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.

Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.

Her şeye rağmen bir artıdır ama eksik olduğu kesin.

CSS Aktik/Pasif

Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.

FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.

CSS başlangıç sayfaları

Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.

Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.

HTML5 ve CSS3 Desteği

Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.

Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.

PHP Tabanlı CMS Desteği

Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.

Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.

Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.

PHP özel sınıfı kod ipuçları

PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.

Dinamik İlişkili Dosyalar

Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.

SVN(Subversion) Desteği Geliştirilmiş

Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.

Business Catalyst® ile uyum

Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.

Basit Site Kurulumu

Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.

Widget Browser Özelliği

Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik

Özellik hakkında daha fazla bilgi için http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.

İlişkili Dosyaları Filtreleme

Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.

Sonuç

Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.

Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.

Kalın sağlıcakla.

Kaynaklar

İpucu: Dreamweaver’da Kullanılmayan Özellikleri Kaldırmak

fatih.hayrioglu — Thu, 14 Jan 2010 22:46:50 +0000

Css ile kod yazarken gereksiz bazı kodlar kod yazma hızımı kesiyordu, bazen hızla kod yazarken arada başka kodları yazdığımda olmuyor değildi. Bu sorunumu friendfeed‘de paylaştım ve sağolsun arkadaşlar bu konuda bana yardımcı oldu. Şenol‘un yardımları ile sorunun çözümünü bulduk.

Bu ipucunu burada paylaşma ihtiyacı duydum.

Çözüm şöyle;

C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\CodeHints (Bu yol tam uymaya bilir farklı işletim sistemlerinde farklı yerlerde olabilir, ama bu yol size bir fikir verecektir)Klasörü içindeki CodeHints.xml xml dosyasında istemediğimiz etiketleri kaldırıyoruz.

Örneğin benim ilk kaldırdığım kod widows kodu. Bu kod için xml dosyasındaki aşağıdaki kodu silmek gerekiyor.

Bunun dışında xml dokümanındaki kullanmadığım ve bir daha kullanmayacağım css kodlarını sildim. Silerken dikkat edin bu dosya içinde sadece css kodları yok. Tüm otomatik tamamlama kodları bu xml dokümanı içinde

azimuth
caption-side
counter-increment
counter-reset
cue
cue-after
cue-before
direction
elevation
marker-offset
marks
orphans
pause
pause-after
pause-before
pitch
pitch-range
play-during
richness
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
unicode-bidi
voice-family
volume

Bunları sildim ve width ve white-space yerini değiştirdim.

Benim sonuç xml dosyamı burada paylaşıyorum. Eskisinin yedeğini almayı unutmayın.

CodeHints.xml dosyasını indirmek için tıklayınız.

Şenol’un hazırladığı

CodeHints.xml dosyasını indirmek için tıklayınız. (Şenol’un geliştridiği)

Yazının sonunda Şenol‘a tekrar teşekkürlerimi sunarım.

Kaynak

http://ff.im/efoQ4

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması

fatih.hayrioglu — Tue, 29 Dec 2009 09:13:53 +0000

Yaptığım bir projeyi baştan sonra anlatmak uzun süredir düşündüğüm ama yapamadığım bir işti. Son denememde direkten döndü bu sefer inşallah tamamına erdireceğiz.

Fanatik Marşlar Nedir?

Fanatik Marşlar, taraftar marşlarının toplantığı tüm fanatiklerin buluşma noktasıdır. Barlarda, sahalarda, tirübünlerde, maç yolunda otobüslerde, trenlerde, salonlarda, stadyumlarda kısacası taraftarların her yerde söylediği tezahüratları bulabileceğiniz, sizin de takımınız için marşınızı paylaşabileceğiniz bir taraftar sitesidir.

Ayrıca Mustafa’nın siteyi tanıttığı televidyon’daki etohum programınıda izleminizi öneririm.

Bu projede Mustafa Özyurt ve Hasan Yalçın ile birilikte çalıştım. İki arkadaşımada teşekkürlerimi sunarak yazıma başlıyorum. Mustafa Özyurt hem projenin sahibi, hemde programlamasını yaptı. Tasarımlarda sevgili dostum Hasan Yalçın’a ait. Bende html, css ve javascript kodunu yazdım.

Yazının biraz uzun olacağı ve derlemesi zaman alacağı için makaleyi üçe böldüm

I -Kodlama Öncesi Hazırlıklar
II – Ana Sayfa Kodlaması
III – Alt Sayfaların Kodlaması

I – Kodlama Öncesi Hazırlıklar

Projelere başlamadan önce tüm projelerde kullandığım klasör yapısını sizlerle paylaşmak isterim. İkonlar Windows Vista’nın kütüphanesinden, farklı ikonlar olabilirdi ama o zaman farklı bilgisayarlara o ikonları taşımak gerekiyor. İkon kullanmanın avantajı seçmek daha kolay oluyor. Her klasör isminden önce rakamlar koymamın nedeni sıralamayı istediğim gibi yapmak. Klasör ismi verirken Türkçe karakter kullanmamaya dikkat ediyoruz. Gerçi dosyalara, klasörlere isim verirken Türkçe kullanmayacağımızı biliyoruz.

00 – Gonderilen: Bu klasöre proje için gönderilen dosyaları koyuyorum. Projenin şablon psd’leri, içerik dokümanları(doc), resimler (jpeg, gif, png vd.), projede geçen yazı tiplerini(ttf) bu klasöre koyuyorum.

10 – Program: Bu kısma eskiden projede yazdığım program kodlarını koyuyordum. Son zamanlarda pek program yazmıyorum genelde css, xhtml ve javascript kısmını yapıyorum projelerin. Bu klasörü şimdilerde kullandığım eklentileri koymak için kullanıyorum. Örneğin akordiyon eklentisi, lightbox eklentisi, galeri eklentisi vb.

20 – Arsiv: Arşiv kısmında proje adımlarını belli aralıklarla arşivleyerek bu klasöre koyuyorum. Ayrıca devamlı güncelleme yaptığım projelerde güncellediğim her sayfa veya dokümanın yedeğini alıp bu klasöre koyuyorum. Bu mesleği iş olarak edinmek isteyen herkes yedek almayı bir görev bilmeli kendine. Yedeksiz çalışmanın bedeli çok ağır sonuçlar doğura bilir.

30 – Musteriye: Müşteriye klasörünü yaptığım projenin, işin, güncellemenin son dosyalarının sıkıştırılmış hallerini koyuyorum. Böylelikle çalıştığım ve müşteriye gönderdiğim dosyaların ayrımını daha kolay yapabiliyorum. Devamlı güncelleme yaptığım sitelerde bu klasörü daha yoğun kullanıyorum.

40 – HTML: Projede çalıştığım dosyaları bu klasöre koyuyorum. html, css, javascript, resimler ve flash dosyaları. Bu klasör içinde de bir düzenim var.

images: resimleri(jpeg, gif ve png) ve flash dosyalarını(.swf) buraya koyuyorum.

scripts: javascript dosyalarını(.js) buraya koyuyorum.

style: css dosyalarımı buraya koyuyorum.

html dosyalarıda HTML klasörü içinde kalıyor.

Bu genel proje standardım. Bazı projelerde bu klasör yapısı değişik olabiliyor. Mesela resim galerisinin olduğu sitelerde images/galeri/ klasörü açıp resimleri onun içine koyuyorum. Xml’leri yoğun olarak kullandığım projelerde bunlara ek olarak /xml/ klasörü oluşturuyorum. Flash yoğunluklu projelerde /swf/ klasörü açıyorum. Yani projeden proje farklılıklar gösterebiliyor, ama standardım bu.

Buraya kadar anlattıklarım hazır klasör yapısıdır, bundan sonra projeyi kodlamaya başlamadan önceki hazırlıklar olacak.

1- İlk olarak tüm psd’leri kontrol ederek hangi bölümlerin tüm sayfalarda aynı olduğu belirleyip ona göre kodlama yapmayı düşünüyorum. Genel bir değerlendirme bakışıda diyebiliriz buna.

2- İkinci olarak genel yapıyı görebileceğimiz bir eskiz çiziyoruz. Çizim her zaman bize neyin nasıl olacağı ve hangi alanlarda hangi teknikleri kullanacağımızı göstermesi bakımından önemlidir.

Her ne kadar sanal dünyada çalışıyor olsak da gerçek çizimler bize yardımcı olacaktır.

3- Eskizini çıkardığımız bu yapıyı sırası ile kodlamaya başlayacağız. İlk olarak boş bir html sayfası açıp index.html adı ile kaydederiz. Sonra boş bir css dosyası açarız. Aslında ilk açtığım bu boş dokümanlar bile bir şeyler içerir.

XHTML sayfamız





FanatikMarşlar.Com

Bu dokümanı Adobe DreamWeaver ile oluşturduğumda dw benim için oluşturuyor.

DocType olarak xhtml-strict kullanıyoruz. Doküman tipleri hakkında ayrıntılı bil için tıklayınız.
Karakter kodumuz utf-8. uft-8 seçimi bizim karakter kodu konusunda sorunsuz çalışmamız için önemlidir. Ayrıntılı bilgi için tıklayınız.
Genel html kodları (html, head ve body)

İlk yaptığım iş başlık kısmını değiştirmek olur.

FanatikMarşlar.Com

Daha sonra boş bir css dokümanı oluştururum. Genelde isim verirken ana, main, iskelet, veya sirket_adi nokta css şeklinde tanımlarım bu seferde site ismini tanımlıyorum fanatikmarslar.css Oluşturduğum bu dokümana sırası ile imza alanımı ve sıfırlama kodlarını ekliyorum.

/************************
************************
Fanatik Marşlar - http://fanatikmarslar.com/
fatih hayrioglu
24 Eylul 2009
ie6, ff, opera, chrome, safari
************************
************************/

Bunu benim imzam olarak nitelendirebilirsiniz. Genelde tüm projelerime eklerim. Bazılarında unuttuğumda oluyor. Daha sonra css sıfırlama kodlarını ekleyelim. Ben genelde standart sıfırlama tekniklerini kullanmam kendi ufak bir iki tekniğim vardır onları yazar geçerim. Ama bu sefer bazı sıfırlama kodlarının elenmiş halini kullandım ve koduma ekledim. Bide kapsayamama sorunu kodunu ekledim.

/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{    outline: 0; }

/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}

/* float uygulanan elemanları kapsayamama sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

/* Css Sifirlama */

CSS sıfırlama tekniğini kısaca açıklarsak; Farklı tarayıcılarda farklı şekillerde yorumlanan html elemanlarının özelliklerini her tarayıcıda aynı görünmesini sağlayacak kodlara sıfırlama denir. Bu sayede her tarayıcıda bu elemanlar aynı sıfır noktasına gelecektir. Örneğin p{margin:0; padding:0}

Daha sonra xhtml sayfamıza css kodumuzu ekleyelim.

Bundan sonra genelde ben psd’yi açıp sırası ile eskizde çizdiğim yapıya uygun olarak kodlamama başlarım. Bunun dışında bir yöntem daha vardır ki ben genelde bu yönteme başvurmuyorum. Genel sayfa yapısını içeren kısımlar(üst alan, promo alanı, içerik alanı alt alan vb.) kodlanır ve içleri doldurulur. Dediğim gibi ben psd yi açarak sırası ile kodlamaya başlarım.

Tasarımlara bakınca site genel olarak anasayfadaki üç kolonlu yapı ve alt sayfadaki iki kolonlu yapı olarak ikiye ayrılıyor. Ana Sayfa kodlaması ile başlayalım

Bir sonraki makalede kaldığımız yerden devam edeceğiz.

CSS Kod Yazma Düzeni

fatih.hayrioglu — Wed, 03 Jun 2009 14:08:09 +0000

CSS yazarken bazı kurallar koyarsak ve bu kurallara göre kodumuzu yazarsak bir çok konuda yararını göreceğiz.

Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
Daha okunabilir kodlar elde ederiz.
Daha performanslı sayfalar elde ederiz.
Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.

CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.

1. CSS doküman indeksini oluşturun

CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama

/*------------------------------------------------------------------
[CSS Kod indeksi]
1. Body
2. Üst Alan / #ustAlan
2.1. Menü / #menu
3. İçerik Alanı / #icerik
	3.1. Sol Kolon / #solKolon
	3.2. Sidebar / #yanKolon
		3.2.1. RSS / #rss
		3.2.2. Arama / #arama
		3.2.3. Kutular / .kutu
4. Alt Alan / #altAlan
-------------------------------------------------------------------*/

2. CSS dokümanınıza imzanızı atın

Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

3. Seçici isimlendirirken standart ve anlamlı isimler verin

Seçici isimleri ve genel isimlendirmede bir standardı oturtun.

Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.

#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.

İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.

#icerikOzu{..}
#solIcerikAlani{..}

Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.

#icerik_ozu{..}
#sol-icerik-alani{..}

Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.

4. Kısaltma kullanın.

CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi için http://www.fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

yerine

font: bold 11px/15px verdana, sans-serif;

5. CSS dokümanlarınızı anlamlı bölümlere ayırın.

Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.

@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/sifirlama.css);

Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.

Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer‘in ki var mesela.

/************************
************************
MYK Medya - http://myk-medya.com/
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu{display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu{height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

6. Her satıra bir tanım yöntemini kullanın

CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.

Ben daha önce her satıra bir özellik tanımı yapıyordum.

#aramaAlani{
    float:left;
    width:265px;
    background-color:#fff;
    border:3px solid #525252;
}

Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.

Her Satırda Bir Tanım Yapma Yöntemi

Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.

#anaKapsul{...}    
#ustalan{...}    
#icerikAlani{...}    
#solIcerikAlani{...}    
#sagIcerikAlani{...}
#altAlan{...}

Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.

#icerikAlani{float:left; clear:left; padding-top:20px;}   
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}   
	#sagIcerikAlani{float:left; width:300px; margin:0;}

7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.

Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.

#anaKapsul{margin:0 auto; width:960px;}    
/**************************************************** ustalan   */
#ustalan{padding-top:20px;}

/**************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}

/*sol icerik alani */    
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}

/* sagIcerikAlani */

	#sagIcerikAlani{float:left; width:300px; margin:0;}

8. CSS özellik tanımlarını sıralayın.

Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.

#solIcerikAlani{float:left; width:647px; margin-right:13px}

Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.

Sıralayı şöyle yapmak mantıklı olacaktır.

Konumlandırma, boyutlar (width, height, position, float, clear)
Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
Metin tanımları (font, line-height, color)
Diğer özellikler

9. Çalışma gruplarınızda ortak standardınızı oluşturun.

Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.

10. CSS Editör araçlarından yararlanın

Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.

Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına

10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.

10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.

10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.

10.4 Dreamweaver’ın stil dosyalarını standarda oturmak çok kolay.

Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.

Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW’da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.

Sonuç

Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:

XHTML kodu:

CSS kodu

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

/************************************************** Genel Tanımlar   */

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
    .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    .kapsayamamaSorunu{display: inline-block;}
    /* IE-mac de bu bolumu sakla \ */
    * html .kapsayamamaSorunu{height: 1%;}
    .kapsayamamaSorunu {display: block;}
    /* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

#anaKapsul{margin:0 auto; width:960px;}    

/************************************************** ustalan   */
#ustalan{padding-top:20px;}
            
/************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}
    
/*sol icerik alani */    
    #solIcerikAlani{float:left; width:647px; margin-right:13px}
    #icerikOzu{float:left; clear:left; margin-top:20px}
    
/* sagIcerikAlani */

    #sagIcerikAlani{float:left; width:300px; margin:0;}                

/************************************************** altAlan */

#altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}

Kaynaklar

En çok kullandığım CSS Hileleri(Hack)

fatih.hayrioglu — Mon, 03 Nov 2008 14:34:55 +0000

Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.

Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.

1- Kutu Modeli ve CSS hillesi

Kutu modeli sorunları ve çözüm önerilerinden bahsettiğimiz makale ve bu konunun önemi açısından bu css hilesini başa aldık. Gerçekten birçok yerde karşılaştığımız bu sorun kullanılması en karmaşık gelen bir sorundur. Genel mantık olarak ie’nin özellikle 6 ve garip mod daki diğer tarayıcılarında farklı görünmesini engellemek için tantek çelik tarafından oluşturulan bir hiledir.

Kutu genişliği tanımlanmışsa ve padding veya kenar çizgiside tanımladığımızda uygulanan bu yöntem için yazdığımız kod aşağıdadır

#icerik{
width:230px;
padding:10px;
margin:5px; /* Bundan sonraki kısmı ie5win sakla */
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
}

Sorun olan kodumuza biz sadece

voice-family: "\"}\"";
voice-family:inherit;
width:200px;
}
html>body #icerik {
width:200px;
}

Bölümünü uygulamamız yeterlidir. Daha sonra eğer genişlik ise genişliği yükseklik ise yüksekliği ayarlamamız gerekir. Daha sonra html>body #icerik kısmından #icerik yerine kendi nesne adımızı yazmalıyız.

2- Float uygulanmış nesnelerin kapsayamama sorunu

Aslında clearfix olarakta adlandırılan bu sorun bir çok yerde başımıza dert olur. Alıştıktan sonra hemen uygular ve geçeriz.

Sorunumuzun genel tanımı Float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir.

Kodumuz;

.kapsul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 

.kapsul {display: inline-block;} 

/* IE-mac de bu bolumu sakla \ */
* html .kapsul {height: 1%;} 

.kapsul {display: block;}
/* IE-mac bu bolumu saklam artik */

Bu kodda .kapsul yerine kendi nesne ismimizi yazmamız yeterlidir.

3. IE6′un Tekrarlayan Karakter Sorunu

Bu hata birden fazla float uygulanmış iç içe elementlerde meydana gelir. Son float uygulanmış elementin son karakterleri tekrarlar. Soruna nedeni html yorum satırlarıdır ve çözüm için

Kodunu yazarız. Ben burada yorum yazarken bu sorunla karşılaşabilirim diye tüm yorumlarımı bu şekilde yazarak bu sorundan kaçınmaya çalışıyorum.

4. IE6′nın min-height Sorunu

Son zamanlarda gelen işlerde çok rastlamam nedeni ile bu listeye son anda ilave ettim. IE6′nın desteklemediği min-height özelliği için

min-height:500px;
height:auto !important;
height:500px;

yazmamız yeterli.

Bunun dışında CSS Derslerindeki sayfasındaki CSS Problemleri ve Çözüm Önerileri kısmında birçok problem görünse de yukarıda saydıklarım problemlerle çok sık karşılaşıyorum. Bu sorunlarla karşılaştığımda her defasında siteye girip bu kodları kopyalamak sorun oluyor, bu nedenle Adobe Dreamweaver’ın Snippets Aracı ile bu sorunu giderdim.

Dreamweaver’da Snippets eklemek çok basit. İlk olarak eğer açık değilse Snippets penceresini açmak için üst menüden Window -> Sineppets veya shift+F9 kısayolu ile açabiliriz. Açtıktan sonra farenin sağ tuşuna basarak New Sineppet tıklayalım.

Açılan pencerede Name kısmına ismini yazalım(Örne: kutu hilesi) Insert Code kısmına da kodumuzu ekleyelim.

Evet kodumuzu eklemiş olduk. Bu şekilde devamlı kullandığımız kodları Sineppets penceresine ekleyerek kolaylık sağlayabiliriz.

Daha sonra kod yazarken bu kodlara ihtiyaç duyduğumuzda

Hemen bu pencereden ilgili başlığa çift tıklayarak kodumuzun içine ekleyebiliriz.

Javascript’te Parantez Takibi

fatih.hayrioglu — Thu, 09 Oct 2008 12:55:40 +0000

Javascript ve jquery ile program yazarken en çok parantezleri nerede açıp kapadığımız önem kazanıyor. Çoğu zaman parantez takibi yapmak zorunda kalıyoruz.

Dreamweaver’ın “Balancing Braces” özelliği sayesinde parantez takibi kolaylaşıyor. Fonksiyonun nereden başlayıp nerede bittiğini görmek gerekiyor. Bu özellik bize parantez takibi sağlıyor.

Güzel bir özellik olsa da NotePad ++’ ın çizgileri ve parantez takip olayı bence daha iyi. Bilmiyorum belki Dreamweaver’ın böyle bir ayarı vardır. Ama ben bilmiyorum.

Adobe Creative Suite 4 çıktı

fatih.hayrioglu — Thu, 25 Sep 2008 09:41:01 +0000

Adobe Creative Suite 4 benim açımdan sadece Dreamweaver önemli. Dreamweaver yenilikleri ümit verici. Sabırsızlanıyorum. Daha önce bahsetmiştik. Adobe Macromedia Dreamweaver CS4 Beta

Ayrıca Adobe Türkçe’de güzel bilgiler var. Ayrıntılı bilgi için tıklayınız.

Ayrıca Photoshop mu Fireworks mu? kararınıda vermek gerekecek. Alışkanlıklar kolay bırakılmadığı için Photoshop ile devam edecek gibiyiz.

28 Mayıs 2008 web’den seçme haberler

fatih.hayrioglu — Wed, 28 May 2008 07:53:35 +0000

“Tasarımcılar için SEO Rehberi” – siberkultur.com Bağlantı
jQuery ile animasyonlu açılıp kapanan katmanlar yapmak. Bağlantı
iFrame gibi davranan katmanlar oluşturmak. Bağlantı
Design Shack CSS 3 anlatmaya devam ediyor. Bu makaledeki konu ardalanalar(background) ve yeni özellikleri. Bağlantı
Türk Blog Yazarları ve Acı Gerçekler – listeniz.net Bağlantı
Google javascript kütüphanelerini host ediyor. Hazırlanan api sayesinde bilinen başlıca kütüphaneleri google üzerinden site kodlarken kullanabileceğiz. Bağlantı
Profesyonel web sitesi oluşturmak için yapılması gerekenler listesi. Bağlantı
Adobe Dreamweaver CS4 Beta’yı duyurdu. Güzel yeni özellikleri var gibi. Bağlantı
jQuery ve Mootolls karşılaştırması. Bağlantı
Asp.net’de mesaj kutularını CSS ile oluşturmak. Bağlantı
CSS ile süslü resim galerisi yapmak. Bağlantı

07 Şubat web’den şeçme haberler

fatih.hayrioglu — Wed, 06 Feb 2008 22:46:29 +0000

Dreamweaver ile javascript kütüphaneleri kolay kullanmamız için güzel bir eklenti hazırlamışlar. Artık dw javascript kütüphaneleri ile çalışmak daha kolay. Bağlantı
Google’dan farklı arama araçları. Bağlantı
Yahoo javascript kütüphanesinden CSS sayfa iskeleti oluşturma aracı. Bağlantı
CSS3 ile birlikte gelen sözde seçicisi :target hakkında güzel bir makale. Bağlantı
Etkileyici web sayfası tasarlamanın 10 yolu. Bağlantı
Güzel html mailing hazırlamanın yolları. Bağlantı
CSS ile kitap bölüm girişi örneği. Bağlantı
Seçilen metinin artalan rengi atamak.(Firefox ve Safari için) Bağlantı
Erişilebilirlik için 10 kural. Bağlantı
web kodlayıcılarının yaptığı 8 hata. Bağlantı
jQuery ve DOM işlemleri Bağlantı
Tasarımcının Sağ, Programcının Sol Eli: HTML Coder Bağlantı