HTML5 bizim div ile oluşturduğumuz yapı yerine kendi yapısal etiketleri yerleştirdi ve bu hareketli ile tablolu yapı ile site yapısına son darbeyi indirdi.

Alışkanlıkları kolay bırakamayan insanlar hala tablo ile kodlamaya devam ediyor. Ben çalışma hayatımın belli bir bölümün tablolu yapı ile kodlama yaparak geçirdim, daha sonra div ile kodlamaya başladım. Her ikisininde kolaylıklarını ve zorluklarını gördüm. Div ile kodlamanın tek dezavantajı dikeyde ortalama diyebilirim. Onun dışında tablolu yapıya göre avantajlıdır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

• Daha hızlı sayfa yükleme zamanları
  Tabloların yapısından kaynaklanan fazla kod ve kod karmaşası yazılan kodun boyutunu arttırır buda sitenin daha yavaş yüklenmesine nedendir. Siteyi hızlandırmak için divli yapıda çeşitli yöntemler vardır. Örn:(CSS sprite tekniği)
• Daha Düşük Barındırma ücretleri
  Daha az yüklenme zamanı barındırma ücretleri ve bant genişliğinin az kullanılması demektir ve bunun sonucu barındırma hizmeti aldığımız şirkete daha az ödeme yaparız. Küçük sitelerde değilde büyük çaplı sitelerde bu konu büyük önem kazanır.
• Site düzenlemek daha daha kolay
  Tablolu yapının zorluklarından biri karmaşık yapısından dolayı düzenlemek çok zor olur. Div ile hazırlana sitelerde düzenleme yapmak daha kolay olur
• Tekrar tasarlama daha ucuzdur
  Hazır sistemlerde gördüğümüz gibi(wordpress vb.) aynı yapı üzerine farklı tasarımların adapte edilmesi kolaydır.
• Web sitesinde Görsel tutarlılık vardır
  Tek yerden(css) kontrol edilen div’li yapı tablolu yapıya göre daha tutarlı olur.
• Daha iyi SEO için
  Daha az kod olması ve kodlama yapısının tablolu yapıya göre daha düzenli olması arama motorlarının indekslemesi için bir avantajdır. Ayrıca h1, h2, h3 … ve ilgili elementlerin yerinde kullanılması ile arama motorlarına daha uygun kodlama yapabiliriz. Ayrıca CSS ile birçok javascript ile yapabileceğimiz işleri yapabiliriz. Örneğin menüler gibi.
• Hızlı web sitesi çapında güncellemeleri
  CSS ile kontrol edilen siteler daha hızlı kontrol edilir ve düzenlenir. Bu projelerin daha hızlı oluşması için bir avantajdır.
• Takım çalışmalarına daha uygundur
  Web sitesi önyüzü ve arka planı ayrımı yapılır. Bu sayede daha organize site üretimi yapılabilir. Arayüz geliştirici ve programcı arasında daha kolay ve güzel iletişim sağlanır. İki ayrı koldan iş yürür.
• Kullanılabilirlik ve Erişilebilirlik Artar
  Farklı tarayıcılara göre kod yazmak daha kolaydır. ie6 ile uğraşırken bu başlığı pek inandırıcı bulmayabilirsiniz, ancak eskiden tablolu yapı zamanımda Netscape ile ie5.5 ile az uğraşmazdık ve bir çok yerinde sabunlardık(es geçerdik)

  Div ile kodlama yapılırken yazılan kodlar css yardımı ile farklı araçlar için ayrı ayrı kodlanmadan sadece css kodu değiştirilerek elde edilebilir. Mesela yazıcıdan çıktı almak için print medya tipi kullanılan css yorumlanır, benzer şekilde mobil araçlar için handle medya tipli css dosyası kullanır. Şimdi iPone, iPad içinde benzer ayrımı yapabiliyoruz.

• Daha karmaşık düzenler ve tasarımlar
  Tablolar ile oluşturulan karmaşık yapılı siteler bazen içinden çıkılmaz haller alabiliyordu, ancak div ile kodlama yaparken birçok yapı kolay bir şekilde oluşturulabiliyor.
• Boş GIF kullanımı
  Tablolu kodlamada düzeni sağlamak için kullandığımız 1×1 lik bir saydam gif hazırlanır ve tablo düzeni bu gifler yardımı ile sağlanır. Div ile kodlamada böyle bir ihtiyaca gerek yoktur. Bu fazla kod ve yükten bizi kurtarır.
• Geleceğe dönük bir yapıdır
  HTML5 ile birlikte gelen yeni etiketler ve HTML5’in yapısı div ile kodlamanın devamı niteliğindedir. Daha önce yazdığım HTML5’in yapısal elemanları adlı makaleye göz atın.

Sonuç olarak şunu söyleyebilirim ki, 2002’den beri div ile kodlama yapıyorum ilk başlarda çok zorlanıyordum, hatta ilk projemde(koc.net) yarı div yarı tablolu bir yapı kurdum zorluklarında dolayı. Ama şimdi daha fazla kaynak, örnek mevcut, birçok yöntem teknik ve araç  ile div’li yapıda kodlama yapmak artık daha kolay.

Hala tablo ile kodlama yapanlara önerim bir sonraki projenizi muhakkak div ile yapın ve ne kadar zorlansanız da tabloya geri dönmeyin, yani gemileri yakın.

HTML5’in filizlenmeye başladığı bir dönemde bu konuya dikkat çekmek istedim.

Kalın sağlıcakla

Kaynaklar

• http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
• HTML Utopia Designing Without Tables Using CSS, 2nd Edition.pdf 1.konu
• http://phrogz.net/css/WhyTablesAreBadForLayout.html (madde madde)
• http://resources.bravenet.com/articles/site_building/CSS/tables_bad_css_good/ (genel anlatım)
• http://www.sitepoint.com/article/tables-vs-css/ (güzel anlatım, ama geniş)
• http://webdesign.about.com/od/layout/a/aa111102a.htm (güzel)
• http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/ (çok geniş ve güze lanlatım)
• http://www.andybudd.com/archives/2004/05/an_objective_look_at_table_based_vs_css_based_design/ (farklı bakış açısı)
• http://www.stopdesign.com/present/2004/ddw-seattle/tables/ (grafiklerle anlatım)
• http://osman.borutecene.com/tablosuz-tasarim-fetisi-ve-erisilebilirligi-zayif-web-standartlari/ (karşı görüş)
• http://erkana.wordpress.com/2006/09/15/tablosuz-tasarim-tableless/
• http://eskiz.ksahin.com/?category=web-tasarim/tablosuz-tasarm-tablolu-tasarma-kar
• http://alastairc.ac/2006/08/why-css-is-important-for-accessibility/
• http://www.w3.org/TR/CSS-access

Aslında bundan önce bir web ajansının yapısını ve iş akışını çıkarmak gerekir ve buna göre görev tanımları yapılmalıdır, ama o biraz daha kapsamlı bir iş.

Bizim memlekette genelde bir iş yapılır daha sonra standartları yerleşir. Aynı durum web mecrasında da var. Bir çok kişi bu mecrada çalışmasına ve bir sektör oluşmasına rağmen iş akışı ve görev tanımları tam olarak oturmamıştır. Ben yaklaşık 10 senelik bir çalışma hayatımdaki yaşadıklarım ve okuduklarım ile Arayüz Geliştiricileri için şöyle bir liste çıkardım;

• HTML bilmek: Çok iyi derecede HTML bilmelidir ve uygulamada gereksiz kod yığınlarında kaçınmalıdır.
• CSS Bilmek: Çok iyi derecede CSS bilmelidir. Katman tabanlı kodlamayı bilmelidir. Tablosuz sayfa yapısını tasarlamalıdır.
• Javascript: Çok iyi derecede javascript bilmelidir. Ajax ve  javascript kütüphanelerinden birine(jquery, mootools, vd.) hakim olmalı ve uygulama geliştirebilmelidir.
• Gelişmiş Kod Yazma: Arama motorlarına, erişebilirlik ilkelerine, farklı platform ve tarayıcılara uygun kod yazmalıdır. En az kod ile en yüksek performansı almalıdır.
• İçerik Yönetim Sistemleri: Şirket içi CMS vb. içerik yönetim sistemlerini bilmeli ve kullanmalıdır.
• Mailing: Mailing standartların bilemeli ve buna uygun mailing kodları hazırlamalıdır. HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler | HTML Mailing 2 – Mailing HTML Kodunun Yazılması
• Görsel Araçlar: Adobe Photoshop, Firework veya benzeri bir programı kendi işini yapacak kadar bilmelidir.
• Takım Çalışması: Takım çalışmalarına uyumlu olmalıdır. Proje Yöneticisi, tasarımcı, flashçı ve programcılar ile etkileşimli çalışmalıdır.
• Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.
• Yabancı Dil: En az yenilikleri takip edecek kadar İngilizce bilmelidir.
• Sunucu Taraflı Diller: Asp.Net, PHP vb. sunucu taraflı dillerin genel mantığını bilmelidir.
  

Bu liste tasarımcı, programcı, flashçı ve Arayüz geliştirici ayrımını yapabilmiş şirketler için geçerlidir. Memlekette hala bu ayrımı yapmamış şirketlerin olması üzücü. Ayrıca yukarıda tanımladığımız Arayüz Geliştiricilerinin Görev Tanımı zamanla gelişebilir. Örneğin Arama motoruna uygunluk ve erişebilirlik ve javascript  için gelecekte ayrı birimler kurulabilir. Daha da ileri gidip jquery geliştirici bile aranabilir. Malum sektör hızlı gelişiyor.

• http://v1.garrettdimon.com/archives/the-time-is-now-for-front-end-architects
• http://www.cherny.com/webdev/105/front-end-web-designers-developers-and-engineers
• http://fuelyourcoding.com/steps-to-becoming-a-front-end-web-developer/
• http://onlinetools.org/articles/fed2.html

Outline özelliği kullanıcının o an nereye odaklandığını belirlemek için kullanılır. Tarayıcı arayüzünde kullanıcının nereye odaklandığını bilmek bize birçok avantajlar sağlayacaktır. Erişebilirlik açısından önemli bir özelliktir. 

Klavyeden web sitelerini gezen kullanıcılar için önemli bir özelliktir. Bu durumu şöyle anlatırsak daha iyi anlaşılacaktır. Bir site düşünün metin içeriğindeki bağlantıların rengi ve tipi metinler ile aynı olduğunu bağlantıları metinden ayıran hiç bir belirtinin olmadığı durumu, bu durum kullanıcıyı ne kadar zorlayacağını düşünün. Bu gibi durumları engellemek için biz sayfa içindeki bağlantılara, düğmelere ve gezinti elemanlarına normal içerikten ayrı stiller tanımlarız. Benzer şeyleri sadece klavyeden interneti gezmeye çalışan insanlar içinde outline tanımları sağlar.

Şu aklımıza gelebilir; kim sadece klavye kullanarak  internette gezer ki. Ama erişebilirlik demek zaten bir sayfaya en fazla kişinin erişmesini sağlamak değil mi?

Şimdi dış hat çizgileri(outline) özelliklerine bir göz atalım.

Dış hat çizgisi biçemi (outline-style)

Dış hat çizgisinin biçemini belirlemek için kullanırız.

Yapısı: outline-style: <deger>
Aldığı değerler: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: none
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat biçemi none değeri haricindeki değerler için görüntülenir.

• none: Dış hat görünmesin anlamındadır.
• dotted: Dış hat belirli aralıklarla dizilmiş noktalardan oluşur.
• dashed: Dış hat belirli aralıklarla dizilmiş çizgi parçalarından(tire) oluşur.
• solid: Dış hat bir çizgi olarak görünür
• double: iki çizgi seklinde görünür. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı outline-width değerine eşittir.
• groove: Dış hat tuvale oyulmuş gibi görünür.
• ridge: groove’un zıddı; Dış hat çizgisi kabartma gibi görünür.
• inset: Dış hat çizgisinin kutunun tamamını tuvale gömülü gibi görünmesine sebep olur.
• outset: inset’in zıddı; Dış hat çizgisi kutunun tamamının kabartma gibi görünmesine sebep olur.

Dış hat çizgisi genişliği (outline-width)

Atandığı elemanın dışına çizilen hattın kalınlığını belirlemek için kullanırız.

Yapısı: outline-width: <deger>
Aldığı değerler: thin | medium | thick | length | inherit
Başlangıç değeri: Medium
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat çizgisi genişliği border-width gibi CSS uzunluk değerlerini (px, pt, em) ve anahtar kelimeler(thin <= medium <= thick) alır, ancak yüzde değer ve eksi değer almaz.

Dış hat çizgisi rengi (outline-color)

Atandığı elemanın dışına çizilen hattın rengini belirlemek için kullanırız.

Yapısı: outline-color: <deger>
Aldığı Değerler: color | invert | inherit
Başlangıç değeri: invert
Uygulanabilen elemanlar: tüm elemanlara
Kalıtsallık: Yok

CSS’in desteklediği renk değerlerini kullanabiliriz, hatta invert değerinide kullanabiliriz. invert, rengi tersine çevirir.

Dış hat çizgisi (outline)

Dış hat çizgisi(outline) özelliği yukarıda gördüğümüz özelliklerin tek seferde kullanılmasını sağlayan bir kısa yoldur.

Yapısı: outline: <deger>
Aldığı Değerler: [ <outline-color> || <outline-style> || <outlinewidth>] | inherit
Başlangıç değeri: Tanımlı değildir
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Kenar çizgisi(border) özelliğine benzer bir yapısı vardır. Ancak ayrıldıkları kısım kenar çizgisinde(border) her kenar için bir atama(border-right, border-bottom, vd.) yapılmasına karşın dış hat çizgisinde(outline) böyle bir özellik yoktur. Dış hat çizgisinin(outline) tüm kenarları aynı özellikleri taşır.

Dış hat çizgileri(outline) normal akıştaki boşlukları tamamlamaz. (taşma yapmaz.) diğer elemanların üzerini örter. Dış hat çizgisinin(outline) önemli özelliklerinden biri etrafını çevreleyen elemanlar üzerinde(üzerine örtmek dışında) bir etki yapmamasıdır, bu sayfa planlamadaki problemlerimizi çözmemiz için önemlidir. Problem olan bir elemana dış hat çizgisi(outline) ataması yaptığımızda tam olarak sorunun ne olduğunu göreceğiz ve elamanın tam yerini öğreneceğiz. Bu kenar çizgisi(border) uygulamaktan farklıdır, dış hat çizgisi(outline) uygulandığında dokümandaki normal akış üzerine bir etki yapmayacaktır.

Dış hat çizgileri(outline) satıriçi elemanların etrafına yerleşir. İki satıra kaymış satıriçi elemanlarda dış hat çizgisi dikdörtgen şeklinde olmayacaktır. Bu da kenar çizgisi(border) ile arasındaki farklardan biridir.

Dış hat çizgileri elemana odaklanıldığında görsel bir çıkıntı gibi görünmesini sağlayabilir.

• Erişebilirlik açısından yapılan genel yapılan hatalar hakkında bir makale Link
• HTML 5 ve XHTML 2.0 çalışmaları başlamış. Link
• WordPress 2.0.7 versiyonu çıktı. PHP güvenlik açığı ve Feedburner sorunu yeni versiyonun çıkmasına neden olmuş. Link
• Internet Explorer 7 Türkçe çıktı. Ayrıca IE 8.0 versiyonu çalışmalarına başlamış. Link
• blogcu.com kendini yenilemiş. Link
• Ajax ile hazırlanmış güzel bir online web sitesi hazırlama sitesi Link
• CSS ve javascript ile hazırlanmış linklere favori ikonlarını ekleme kodu. Link
• Wikipedia için özel motoru: Wikiseek Link
• WordPress şžablonlarındaki 10 değişim Link
• Google Analytics tüm referer linklerini elde etmek için küçük bir kod Link
• dmry.net’den “CSS ile basit bir ilerleme durum çubuğu yapımı” makalesi Link