‘Erişebilirlik’ etiketi için sonuçlar
Arayüz Geliştiricilerin Görev Tanımı
Kasım 2nd, 2009 • 21 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.
- 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 • 10 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ı
01 Ekim 2007 Web’den Seçme Haberler
Ekim 1st, 2007 • Haberler
Etiketler: css3.0, Erişebilirlik, Haberler, png, rss, Vdsl, WordPress, yui
- CSS3.0 ile ilgili yenilikler devam ediyor. Açı verme özelliği eklenmiş. Nesneleri ve resimleri belli açılarda döndürebilecekmişiz. Bağlantı
- Erişebilirlik için yapmamamız gereken 10 ipucu. Bağlantı
- Temiz saydam PNG elde etmeyi anlatan güzel bir makale. Bağlantı
- CSS ile yapılmış enteresan site alt kısımları. Bağlantı
- 35 farklı RSS ikonu. Bağlantı
- Güzel WordPress temalarını yayınlayan bir site. Bağlantı
- SmashMagazine YUI, yahoo’nun javascript kütüphanesini mercek altına almış. Bağlantı
- TTNET Vdsl ile 30 Mbit internet hızını getirmeyi planlıyormuş. Bağlantı.
- Biliyorsunuz WordPress2.3 sürümü çıktı. Türkçe’side hazırmış. Bağlantı
