‘Erişebilirlik’ etiketi için sonuçlar
Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu
Aralık 1st, 2010 • 19 yorum CSS, HTML5
Etiketler: css ile kodlama, divli yapı, Erişebilirlik, html5, kullanılabilirlik, tablolu yapı
Ben bu siteyi açtığımdan beri CSS tabanlı yani div ile kodlamanın önemini ve avantajını anlatmaya çalışıyorum. Bu geçiş o kadar kolay olmadı ve hala Türkiye’de birçok site tablo alt yapını kullanıyor. Bunda standartların bu yönde bir telkini olmamasının önemi çoktur. Uzun süredir yazmayı düşündüğüm bu makaleyi yazmak bu güne nasipmiş.
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
Arayüz Geliştiricilerin Görev Tanımı
Kasım 2nd, 2009 • 29 yorum CSS, Web Standartları, XHTML
Etiketler: arama motoru, arayüz-geliştiriciler, CSS, Erişebilirlik, Javascript
Şu anki bulunduğum durum ve FirendFeed’deki Arayüz Geliştiricileri grubunun etkisi ile bu yazıyı yazmayı düşündüm. Bir çok şirket eleman ararken bazı şartları ileri sürüyor, peki bunlar ne kadar gerçekçi. Bir listede ben çıkardım, sizlerde katkıda bulunursanız Arayüz Geliştiricilerini Görev Tanımı’nı çıkarmış oluruz.
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.
Dış hat çizgisi(outline) özellikleri
Haziran 22nd, 2009 • 13 yorum CSS
Etiketler: bağlantılar, Border, dış-hat-çizgisi, Erişebilirlik, kenar-çizgisi, klavye-kullanmak, outline
CSS2 ile birlikte gelen kutu dışı şekillendirme(outline) özellikleri kenar çizgisine(border) benzer bir özelliktir. Fakat kenar çizgisi özelliğinden iki önemli farkı vardır. İlki outline özelliği kenar çizgisi gibi normal akışı etkilemez. Bir elemana 10px outline değeri atandığında elemanın etrafındaki elemanların üzerine 10px kadar taşar, diğer elemanları ötelemez. İkinci farklılık outline kenar çizgisi gibi dikdörtgen şeklinde değildir.
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.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
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.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
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.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
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.
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+
03 Eylül Web’den seçme haberler
Eylül 3rd, 2008 • Haberler
Etiketler: CSS filtreleme, display:inline-block, Erişebilirlik, Google Analytics, Google Chrome, internet explorer, internet explorer 6, jParallax, yazı tipi
- Hasan Yalçın sitesini yenilemiş. Hayırlı olsun. Bağlantı
- Bu aralar yazı tipi gömme işleri üzerine bayağı bir çalışma var. Bence çok gecikmiş bir özellik umarım tüm tarayıcılar anlaşırlarda iş tatlıya bağlanır. Bağlantı
- Internet Explorer 8.0 Beta 2 yayınlanmış. Bağlantı
- Internet Explorer 8.0 Beta 2 ile gelen güvenlik yenilikleri – daron.yondem.com Bağlantı
- display-inline:block hakkında güzel bir makale. Bağlantı
- Ağustos ayında yayınlanmış güzel makaleler. Süper derleme Bağlantı
- Web tasarımlarınızın erişebilirliğini ölçebileceğimiz 10 araç. Bağlantı
- 30 günde mootools öğrenmeyi anlatan güzel bir site. Bağlantı
- Birebir tasarıma uygun kod yazmak için güzel bir yöntem. Bağlantı
- Internet Explorer 6′yı engelleyelim. Bağlantı
- FireFox, Internet Explorer, Safari ve Opera’ya göre filtreleme yapmak. Bağlantı
- Google internet tarayıcı sektörünede girdi. Google Chrome adlı yeni tarayıcı rekabeti kızıştıracak gibi. Bağlantı
- Google Chrome çıktı. Hızlı, sade ve güven veriyor. Stadandartları destekliyor. Acid 2 testinden tam puan aldı. İndirmek için tıklayınız. Özelliklerini incelemek için tıklayınız Bağlantı
- Html elemanlarının CSS testini sağlamak için hazırlanmış güzel bir html dosyası. Bağlantı
- jQuery’nin güzel bir eklentisi jParallax. Bağlantı
- Profoyonel sitelerden temel olarak nasıl yardım alabilriz. Bağlantı
- Modern web sitelerinde javascript’in yeri. Bağlantı
- Çok kademeli sitler için güzel bir menü örneği. Bağlantı
- Google Analitics ipuçları. Bağlantı
16 Haziran 2008 web’den seçme haberler
Haziran 16th, 2008 • 1 yorum Haberler
Etiketler: Erişebilirlik, Firefox 3, google-belgeler-etablolar, İnternet Tarayıcısı, jquery, Takvim scripti, web araçları, WordPress
- Firefox 3′ün desteklediği CSS özellikleri. Bağlantı
- 10 adet ücretsiz grafik scripti. Bağlantı
- Kullanışlı WordPress ipuçları. Bağlantı
- Güzel bir geçiş efekli ve ileri-geri düğmeli bir javascript uygulaması. Bağlantı
- Aeron Cannon’dan web erişebilirlik listesi. Bağlantı
- İnternet tarayıcı savaşları iyice kızıştı. Opera 9.5′nın hızından sonra acaba yeni tarayıcılardan hangisi daha hızlı sorusunun yanıtı. Bağlantı
- Google Dökümanlar’a Pdf Yükleyin | Google Docs – fikirbozan.net Bağlantı
- jQuery ile ipod benzeri DrillDown menü yapmak. Bağlantı
- Vista’daki takvime benzetilmiş ajax takvim uygulaması. Bağlantı
- 20 adet CSS düzeltmesinin güzel bir listesi. Bağlantı
- CSS’de tek resim ile genişleyebilir alanlar yapmak. Bağlantı
- web sitesi veya günlüğü olanlar için 60 kullanışlı araç. Bağlantı
05 Nisan 2008 web’den seçme haberler
Nisan 5th, 2008 • 2 yorum Haberler
Etiketler: ASP.NET, bloglar için gelir, css ile site yapmak, css in geleceği, css teknikleri, dikey menü, Erişebilirlik, ie css, jquery, öneriler, satıriçi kod, sql injection, super cache, wordpress2.5, xhtml ve html
- Asp.net’de satıriçi kod yazmak. Bağlantı
- Internet Explorer’un 5. sürümünden 8. sürümüne kadarki CSS gelişmesini gösteren bir tablo. Bağlantı
- CSS’de bilmemiz gerek 6 teknik. Bağlantı
- CSS’in geleceği: Değişkenler ve Hesaplamalar. Bağlantı
- CSS ile hazırladığımız Dikey menülerimizi javascript yardımı ile nasıl daha estetik hale getirebiliriz. Bağlantı
- CSS ile site yapmayı anlatan cameronmoll.com’dan “Erişilebilirliğin test edilmesi” Bağlantı
- “XHTML’in HTML’den Farkları Nelerdir” Bağlantı
- Anlaşılabilir internet adresinin avantajları. Bağlantı
- 65 güzel jquery kaynağı. Bağlantı
- “Türkçe SQL Injection Referansı” Bağlantı
- Ferruh Mavituna’dan “Hayatınızı Değiştirecek 62 Öneri” Bağlantı
- “Tarayıcıya göre farklı css kodu yazmak” Bağlantı
- “Bloglar İçin Yeni Gelir Modellleri” Bağlantı
- “WordPress 2.5 ve Wp Super Cache” Bağlantı
