Friendfeed’deki Arayüz Geliştiricileri (Friendfeed; twitter’ın daha gelişmiş sürümü) grubunda konuştuktan sonra bu yazıyı yazmayı düşündüm. Şirketler eleman
ararken bazı şartları ileri sürüyor, peki bunlar ne kadar gerçekçi.
Daha önce Front-end kavramına karşılık “Arayüz Geliştirici” olarak tanımlıyorduk, ancak sonra irdeleyince “Önyüz Geliştirici” tanımının daha iyi karşıladığına karar verdik.
Aslında bundan önce bir yazılım şirketinin 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 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 Önyü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.
Javascript: Çok iyi derecede javascript bilmelidir. Javascript’in yeniliklerine takip etmeli ve uygulamalıdır. Genel kullanılan kütüphanelerin en az birinde yetkin olmalıdır.
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.
Yabancı Dil: En az yenilikleri takip edecek kadar İngilizce
bilmelidir.
Sunucu Taraflı Diller: Etkileşimde olduğu sunucu taraflı dillerin
genel mantığını bilmelidir.
Bu liste tasarımcı, programcı ve Önyü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 Önyü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 sadece bir javascript kütüphanesinde uzman geliştirici bile
aranabilir. Malum sektör hızlı gelişiyor.
@font-face özelliği web sitelerimizde sistemde yüklü olmayan yazı
tiplerini kullanma imkanı verir. @font-face kodu ile kullanıcının
bilgisayarına kullanılacak yazı tipleri yüklenir. @font-face özelliği
ilk olarak CSS2 ile birlikte geldi, ancak sonradan bazı problemlerden
dolayı CSS2.1’de kaldırıldı ve şimdi CSS3 ile birlikte yeniden geldi.
Tipografi hakkında bir çok makale yazıldı ve yazılmaktadır. Bende
zamanında CSS ve Tipografi adlı bir makale yayınlamıştım ve orada
yazı tipi seçiminin öneminden bahsetmiştim. Biz halihazırda farklı yazı
tiplerini sitelerimizde kullanmak için sIFR, Cufón vd. bazı
yöntemleri kullanmaktayız. Bu yöntemler işimizi görse de bazı
dezavantajları yok değildi. @font-face bu sorunları gidermek ve
yenilikler getirmek için bizlere sunuldu. Bu konuda ümitliyim.
@font-face özelliğini tüm yeni nesil tarayıcılar destekliyor. Diğer
özelliklerden farklı olarak ilk defa bu özelliği Firefox, Opera ve
Safari sonradan destekledi. Şu an ki durumda kullanmak mümkün olsa da
bence en az 4-5 aylık(Firefox’un eski sürümlerinin yerini Firefox 3.5
alması için) bir süre sonra tam anlamıyla bir projede kullanılabilir.
Tabi tek sorunumuz bu ise.
@font-face kullanımında farklı tarayıcılar farklı yazı tipi dosya
uzantılarını desteklediği için birden fazla yazı tipi dosyası
hazırlamalıyız. İnternet Explorer .eot uzantılı yazı tiplerini
desteklerken, diğer tarayıcılar .ttf ve .otf uzantılı yazı tiplerini
desteklemektedir. Biz kullanacağımız yazı tiplerinin ie için .eot
uzantılı ve diğerleri için .ttf veya .otf uzantılı dosyalarını
hazırlamamız gerekecektir. Ayrıca Opera9 ve Google Chrome içinde .svg
uzantılı dosya hazırlamalıyız.
@font-face kodu ile sayfalarımıza ekleyebileceğimiz yazı tipi
çeşitlerini incelersek;
.eot Uzantılı dosyalar: .eot(Embedded OpenType) Microsfot’un
baştan beri desteklediği yazı tipi dosya uzantısıdır. Diğer yazı
tipi çeşitlerine destek vermeyi pek düşünmeyen İnternet Explorer bu
konuda da ayak bağı olacağa benzer. WEFT aracı ile .ttf uzantılı
dosyalarınızı .eot uzantılı dosyalara çevirebilirsiniz. Biraz
karışık geldi bu program bana.
.ttf ve .otf uzantılı dosyalar: Genelde Windows işletim
sistemininde kullandığı bu yazı tipi dosya çeşitlerini Firefox,
Safari, Opera desteklemektedir.
.svg uzantılı yazı tipi dosyaları: Vektörel, esnek yapılı yazı
tipi dosya çeşidi. Safari, Google Chrome, Opera destekliyor.
FontForge sitesindeki SVG uzantılı oluşturulan Opera’da sorun
oluyor. Batik bu araç var, ama nasıl kullanıldığını öğrenebilmiş
değilim. Önerim [fontsquirrel.com][] sitesindeki aracı kullanmanız.
woff uzantılı yazı tipi dosyaları:Web için kullanılacak bir
standart. Boyut olarak diğelerine nazaran %40’lara varan bir avantaj
sağlıyor. Firefox 3.6 sonrasında destekleyeceğini açıkladı.
Yazı tip dosyalarını birbirine çevirme araçları
ttf yazı tipinizi font-face’in desteklediğin tüm yazı
tiplerini(.eot, .svg, ttf, woff) üreten güzel bir araç:
fontsquirrel.com/fontface/generator
Bunların dışında bazı programlar varsa da bunlar yeterli araçlar bence.
Burada şunu söylemeden geçemeyeceğim, fontsquirrel.com sitesi farklı
yazı tipi dosyaları üretmede çok yardımcı oldu. Bir çok site ve program
farklı yazı tipi dosyaları üretirken Ethan’ın sitesi web’de kullanılacak
tüm yazı tipi dosya uzantılarını üreterek bana çok yardımcı oldu. İlk
kez fontsquirrel.com sitesindeki aracı kullandığımda .svg uzantılı
dosyaların Opera’da kesik göründüğünü fark ettim. Sonra bu sorunu site
sahibi ile paylaşmak istedi, sağ olsun Ethan ilgilendi ve aracı
geliştirdi. Buradan Ethan’a tekrar teşekkürlerimi sunuyorum. Thanks,
Ethan
@font-face Kodu
Evet yazı tipi dosyalarımız hazırsa kodumuzu yazmaya başlayabiliriz.
@font-face kod yapısı
Kod yapımız iki kısımdan oluşmaktadır. İlk başta özel yazı tipimizi
sisteme yüklüyoruz. Sonra da bu yazı tipini kullanıyoruz.
Ancak durum bu kadar kolay değil. Buradan itibaren ie kendini gösteriyor
ve farklı yazı tipi ile farklı kod yazmamız gerekiyor. Bundan başka bir
kaç sorunuda gidermek için Paul Irish‘in yazdığı makaleden
çıkardığımız kod:
11 Kasım 2011 eklendi: font-weight: normal; font-style: normal;
Chrome’un kalın ve normal anlama problemi nedeni ile eklendi.
Bu kodlamanın özel yazı tipini sisteme tanıtırken ilk olarak .eot
uzantılı yazı tipini ekliyoruz ie için. Sonrasındaki satır ise diğer
tarayıcılar için yazılan kod. Buradaki yereldeki (local) tanımı eğer bu
yazı tipi kullanıcının bilgisayarında var ise yüklenmeden kullanılması
için ve de sonraki kodu ie’den gizlemek içindir. Devamı kodlamada diğer
tarayıcılar içindir.
Kendi Örneğimizi Yapalım
Hasan Yalçın’ın sitesinden Türkçe yazı tipi indiriyoruz. TR
Centurion Old Italik.TTF yazı tipini seçtim, sonra
[http://www.fontsquirrel.com/fontface/generator][] sitesinden farklı
yazı tiplerini ürettim. Şimdi elimde hem .ttf uzantılı hemde .eot
uzantılı yazı tipim var.
.ttf ve .eot uzantılı dosyalarım hazırsa kodu yazmaya başlayabiliriz.
Daha sonra bu yazı tipini sayfamızda kullanabiliriz.
Örnek sayfayı görmek için tıklayınız. Yazı tipi özgürlüğüne hoş
geldiniz.
@font-face Yükleme Zamanı
Kullanıcının bilgisayarına yükletilen yazı tipi dosyaları yüklü dosyalar
olabiliyor. Sitede kullanılmayacak bazı yazı tipi karakterleri
kaldırılabilir. Bazı TTF dosyaları 1Mb bulduğunu düşünürsek biraz
yükleme zamanını düşünmek lazım. Yazı tipi dosyaları belli karakter
setlerini içerir. Latin harfleri, Yunan harfleri, Para işaretleri vd. Bu
karakter setlerinde kullanmadıklarımızı silip yazı tipi dosyasının
boyutunu azaltabiliriz. Aynı şekilde tek tek karakterleride
silebiliriz.
Yazı tipi dosyaların iki şekilde yorumlanıyor. İlk olarak Firefox’un
yorumlaması; Sayfa genel yazı tipi ile açılıyor taki gömülen yazı tipi
dosyası yüklenene kadar. Yazı tipi dosyası yüklenince asıl yazı
tiplerini görüyoruz. İkinci yorum ise diğer tarayıcıların tercih ettiği
yol. Bu yorumda yazı tipi dosyası yüklenene kadar kullanıcı bekliyor,
yükleme tamamlanınca yazı görünüyor.
Bu nedenden dolayı font-face tanımını sayfamızın en üstüne koymalıyız.
Script dosyalarımız varsa onları tanımlamamızdan sonraya koymalıyız.
Yazı tipi dosyalarımızı sıkıştırabiliyoruz. sunucumuz gzip’i
destekliyorsa yazı tipi dosyalarımızı sıkıştırıp zaman kazanabiliriz.
Ayrıntılı bilgi için tıklayınız.
Yazı tipi dosyaları ön belleğe alındığı için kullanıcının sonraki
ziyaretlerinde daha az bekleme yapacaktır.
@font-face Sorunları
Örnek sayfamıza farklı tarayıcılarda baktığımızda her bir
tarayıcının ufak tefek farklılıklarla sayfayı gösterdiğini
göreceğiz. Ben yaptığım örneklerde yazı tipine göre değişiyor bazı
yazı tiplerinde mükemmele yakın sonuç verirken bazılarında köşeleri
yumuşatmadığı için kötü sonuçlar elde edebiliyoruz. Bizim
kullandığımız yazı tipi(TR Centurion Old Italik) eğik olduğu
için pek belirgin bir fark görünmüyor, gayetde hoş oldu.
En büyük sorunlarda biri hala ağırlıklı olarak kullanılan Windows
XP’de ClearType seçeneğinin başlangıçta aktif olmamasıdır. Mac
kullanıcılarının işletim sisteminin yazıları daha yumuşak kenarlı
göstermesinden dolayı yazıları daha göze hoş şekilde göreceklerdir.
Windows kullanıcılarının ClearType seçili durumda standarda nazaran
daha iyi görüntüler elde edeceği aşikar, ancak Mac’e göre
kıyaslarsak Mac bayağı bir fark atıyor PC’ye.
@font-face’in sifR vd. yöntemlere göre en büyük dezavantajı
anti-aliasing özelliğinden yoksun olması. Ancak kullanılan yazı
tiplerinin seçiminde eğer daha seçici olursak bu durumu
halledebiliriz.
font-face kullanımındaki en büyük sorunlardan biriside kullanıcının
bilgisayarına indirilebilen ve isteyenleri kolayca elde edebileceği
yazı tipi dosyalarının lisans haklarının nasıl korunacağı
konusundadır. CSS2.0 sonrası kaldırılmasının ana nedenlerinden
biriside budur. Bazı çözümler üretilse de tam anlamıyla bir çözüm
elde edilmiş değildir.
Firefox 3.5 ile font-face kullanımını desteklemeye başladı. Firefox
farklı hostlardan yazı tipi kullanmaya izin vermiyor(Böyle bir durum
için .htcaccess dosyasına bir ekleme yapmak gerekiyor). Ayrıca
font-stretch, unicode-range ve SVG yazı tipi dosyalarını da
desteklemiyor. Firefox 3.6 sürümünden sonrası için yeni yazı tipi
gelişmelerini destekleyeceğini açıkladı.
Opera’da local() yazı tipi tanımlamasında tırnak kullanmayınca sorun
yaşayabilirsiniz. Bu nedenle tanımlarda hep tek veya çift tırnak
kullanmalıyız.
Ziyaretçinin bilgisayarındaki isim ile bizim yazı tipi ismi aynı
değilse local() tanımı pek bi işe yaramayacaktır. Bu nedenle
bildiğimiz tüm isimleri ard arda local() tanımı içinde yazarak bu
sorunu aşabiliriz. src: local(“TR Centurion Old Italik”),
local(‘TRCenturionOldItalik’),
local(“Centurion Old Italik”),
local(‘CenturionOld’),
url(../font/font.ttf) format(‘truetype’);
FontForge programı ve fontsquirrel.com sitesinde üretilen .svg
dosyaları Opera’da içiçe görünüyor. Çözüm için Batik‘i
öneriyorlar.
Bir çok ücretsiz yazı tipi indirebileceğimiz site var ve bir çoğu
yabancı site. Burada şöyle bir sorun var, çoğu Türkçe karakter
içermiyor. Bunun için bizim bu karakterleri eklememiz gerekiyor.
Google’da şöyle bir arama yaptım “Font türkçeleştirme” bu işi
anlata bir çok site var.
Firefox kullanıcıları ilk olarak yazı tipi gömülmemiş halini
görürler, ne zaman yazı tipi yüklenirse o zaman özel yazı tipimizi
görürler.
@font-face’in Geleceği ve Sonuç
Genel olarak küçük boyutlu fontlar güzel görünürken büyük boyutlu
fontlarda iyi görüntü alamayabiliyoruz. Ayrıca kıvrımlı hatlara sahip
yazı tiplerinde kenarlar daha pürüzlü görünüyor. Bence kullandığınız
fontu Windows xp’de test etmeden yayına almayınız.
Tarayıcı kullanım oranlarını incelediğimizde %94’lik bir font-face
destekleyen tarayıcı grubu var. 4-5 ay sonra bu oran 98 - 99 civarına
gelecektir.
@font-face özelliğinin bu kadar geç desteklenmesindeki en büyük sebep
elbetteki yazı tipi üretenlerin haklarının korunmasıdır.
@font-face kullanılan sayfalardaki sonuçlar zamanla daha iyi sonuçlar
vereceğini düşünüyorum. İşletim sistemleri, tarayıcılar ve yazı tipi
geliştiricileri zamanla bu özelliğin farkına varıp buna göre kendilerini
geliştireceklerini düşünürsek zamanla daha iyi sonuçlar alacağımız
kesin.
Yazı tipi özelinde Tipografi genelindeki bu konuda araştırdığımız ve
öğrendiğimiz kadarını sizlerle paylaşmaya çalıştım, ancak konu çok geniş
ve derin olduğu için bir çok yönden eksik kalmış olabilir. Bir kusurumuz
aksaklığımız oldu ise affola.
jQuery’i artık neredeyse her projemde kullanıyorum. Aklıma gelen ve not
aldığım ipuçlarını burada yazdım. Sizinde aklınıza gelen olursa yorum
kısmında katkıda bulunabilirsiniz. Ayrıca kaynaklar kısmındaki linklerde
de daha fazlası var
1- jQuery kütüphanemizi Google’da host etmek:** google bize jQuery
kütüphanesini kendi hostu üzerinden yüklememizi sağlıyor. Bu bize ön
belleğe alınana dosyanın daha hızlı yüklenmesini sağlar.
Bu sayede jquery kütüphanesini her projeye eklerken kopyala yapıştır ile
de uğraşmak zorunda kalmıyoruz. İstediğimiz her yerde jQuery kullanma
imkanıda veriyor bize bu kod.
2- jquery kısaltması:** jquery kodlarımzı yazarken bazen
aklımıza gelmeye bilir
bu daha kolay ve akılda kalıcı bence
3- fare üzerinde iken ve üzerinden gittiğinde**
4- not seçicisi:** Bir seri elemana yaptırdığımız bir işi aradan bir
tane elemanın yapmasını istiyorsak bu seçiciyi uygulayabiliriz.
Yukarıdaki kodlamada biz sekmelere bir tanım yapıyoruz ama en son
sekmeye tıklayınca bu işlemin yapılmasını istemiyoruz. Bu iş için
biçilmiş kaftan :not seçicisi
5- siblings seçicisi** liste ve benzeri aynı seviyedeki elemanlar
üzerinde etkileşimli erişim sağlayan güzel bir seçici. Daha önce
http://fatihhayrioglu.com/jquery-ile-basit-sekme-yapimi/ anlatırken
kullanmıştım.
Bu kodda da görüldüğü gibi tıklanan sekmeye sekmeSecili sınıfı atıyoruz
diğer sekmelerde aynı sınıf varsa onları kaldırıyoruz.