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.

• 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

İlgili Yazılar:

1. Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)
2. CSS ile sayfalama görselliğini ayarlama
3. CSS’in Yapısı

@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.

Kaynak: Vikipedia

@font-face Yazı tipi Çeşitleri

@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ç: http://www.fontsquirrel.com/fontface/generator
• ttf yazı tiplerini eot’ya çevirmek için çevirim içi araç: http://www.kirsle.net/wizards/ttf2eot.cgi
• Farklı yazı tiplerini birbirine çeviren çevirim içi araç: http://onlinefontconverter.com/
• ttf’den eot ye çeviren başka bir çevirim içi araç http://ttf2eot.sebastiankippe.com/
• ttf’den svg’ye çevirme aracı: http://xmlgraphics.apache.org/batik/tools/font-converter.html

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ı

        @font-face {
        font-family: Gentium;
        src: url(http://site/fonts/Gentium.ttf);
        }

        p { font-family: Gentium, serif; }

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:

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('Graublau Web Regular'), local('Graublau Web'),
    url('GraublauWeb.woff') format('woff'),
    url('GraublauWeb.svg#GraublauWeb') format('svg'),
    url('GraublauWeb.otf') format('opentype');
}

p { font-family: "Graublau Web", serif; }

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.

@font-face {
        font-family: 'TR Centurion Old  Italic';
        src: url('TR_Centurion_Old_Italik.eot');
        src: local('TR Centurion Old  Italic'), local('TRCenturionOldItalic'), url('TR_Centurion_Old_Italik.woff') format('woff'), url('TR_Centurion_Old_Italik.svg#TRCenturionOldItalic') format('svg'), url('TR_Centurion_Old_Italik.TTF') format('truetype');
}

Daha sonra bu yazı tipini sayfamızda kullanabiliriz.

h1{font:44px 'TR Centurion Old Italic', Arial, sans-serif; color:#1259C7;}
h3{font:24px 'TR Centurion Old Italic', Arial, sans-serif; color:#1259C7;}
p.ilkParagraf{font:16px/1.5em 'TR Centurion Old Italic', Arial, sans-serif;}

Ö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.

Kaynaklar

• http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/ (ayrıntılı makale)
• http://nickcowie.com/2008/font-face/
• http://www.w3.org/TR/css3-webfonts/#font-descriptions
• http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ (kod yapısı)
• http://www.kadirgunay.com/font-face-kullanimi-ve-kolayliklari.html
• http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ (detaylı)
• http://randsco.com/index.php/2009/07/04/p680 (farklı tarayıcılar için)
• http://craigmod.com/journal/font-face/
• http://nimbupani.com/blog/font-in-your-face.html
• http://opentype.info/blog/2009/07/29/why-webfont-services-are-the-future-of-fonts-on-the-web/ (detaylı anlatım)
• http://www.zeldman.com/2009/08/17/web-fonts-and-standards/
• http://blog.themeforest.net/tutorials/css-font-face-and-15-free-fonts-you-can-use-today/
• http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/(hız)
• http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
• http://randsco.com/index.php/2009/09/04/better_font_face_syntax
• http://hacks.mozilla.org/2009/10/font-control-for-designers/ (Firefox 3.6 ile yeni font tipi desteği)
• http://www.font-face.com/
• http://www.alistapart.com/articles/cssatten
• http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
• http://reference.sitepoint.com/css/at-fontface
• http://www.seomium.com/xhtml-css-javascript-kodlama/ucretsiz-ve-yasal-fontlarla-font-face-kullanimi.html
• http://randsco.com/index.php/2009/07/04/p680
• http://opentype.info/demo/webfontdemo.html (örnek)
• http://devfiles.myopera.com/articles/593/webfonts.html (örnek)
• http://www.hipertipo.org/stuff/webfonts/ModularSerif.html (örnek)
• http://www.typotheque.com/webfonts/sample (örnek)
• http://nimbupani.com/blog/about-fonts-in-svg.html (SVG hakkında)
• http://www.spoono.com/html/tutorials/tutorial.php?id=19 (EOT hakkında bilgi)
• http://www.phpied.com/gzip-your-font-face-files/ (optimizasyon)
• http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
• http://paulirish.com/2009/the-direction-forward-with-web-fonts/
• http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/ (örnekler)
• http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

İlgili Yazılar:

1. Firefox 3.1 Yenilikleri
2. CSS ve Tipografi
3. CSS İpuçları – 1

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.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	//isler burada
 });
</script>

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 

$(document).ready(function (){});

aklımıza gelmeye bilir

$(function (){});

bu daha kolay ve akılda kalıcı bence

3- fare üzerinde iken ve üzerinden gittiğinde

$("li").hover(
function () {
  // fare üzerinde iken bunu yap
},
function () {
  // fare kaçınca bunu yap
}
);

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.

$('ul#sekme li a').not("ul li#diger a").click(function(){
    // yapılacak işler
});

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://www.fatihhayrioglu.com/jquery-ile-basit-sekme-yapimi/ anlatırken kullanmıştım.

$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');

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.

6- HTML içine jQuery den eleman eklemek:

var ekleBunu = $('<div></div>');
ekleBunu.attr("id","yeniKatman").appendTo("body");

7- Bir elemanın varlığını kontrol etmek

if ($("#someDiv").length) {
  // eğer varsa bunu yap
}

8- Kolay kullanılan tarayıcıyı yakalama

$.browser.safari
$.browser.msie
$.browser.mozilla

tarayıcı sürümünü yakalamak için

if ($.browser.msie && $.browser.version <= 7 ) 

Kaynaklar

• http://www.ajaxlines.com/ajax/stuff/article/_reasons_why_you_should_let_google_host_jquery_for_you.php
• http://stackoverflow.com/questions/182630/jquery-tips-and-tricks
• http://docs.jquery.com/Events/hover
• http://docs.jquery.com/Selectors/not
• http://jquery-tr.blogspot.com/search/label/tips

İlgili Yazılar:

1. Lightbox seçimi
2. jQuery ve mootools birlikte kullanmak
3. jQuery ile Basit Sekme Yapımı

table{border-collapse:collapse}
table tr{border-bottom:1px solid #000;}

Gayet basit normal bir tanım. Ancak ie6 ve 7 için durum öyle değil. Karmaşık gelmiş olmalı ki bu atamayı uygulamadı. border-collapse:collapse tanımı kenar çizgileri arasında boşluk olmamaısı için kullanıyoruz.

Peki İnternet Explorer 6 ve 7 için nasıl bir çözüm üretmeliyiz. Satıra değilde satırı oluşturan hücrelere kenar çizgisi verirsek sorunumuz ortadan kalkıyor.

table{border-collapse:collapse}
table td{border-bottom:1px solid #000;}

Örneği görmek için tıklayınız.

Kaynak

http://www.csarven.ca/tr-border-trick-for-ie

İlgili Yazılar:

1. Css de kodumuzu İE6′dan gizleme
2. CSS Hata Ayıklama Yöntemleri
3. Internet Explorer 6 olmasa hayat daha kolay ve zevkli olurdu

Sorunumuz tam olarak şöyle; id atadığım bir elemana sınıf tanımladığımda ve id ve sınıf tanımlarında aynı özellik tanımlamış isem diğer tarayıcılar sorusuz çalışırken ie6 sorun çıkarıyor. Aynı şey iki adet sınıf tanımladığımızdada yaşıyoruz. 

Uygulama olarak şöyle bir uygulama yaptım. Bir elemana bir id verip bu id’li elemanın ardalan resmi olarak genel bir resim tanımladım. Daha sonra farklı bölümler için bu elemena farklı resimler atamam gerektiğinde aynı elemana .bolumA, .bolumB, vd. gibi sınıflar atadım. Bir bölümü olmayan sayfalarda ana resmimi görünecek bölümü olan sayfalarda ise ilgili resim görünecekti. 

#tanitimAlani{
    background:transparent url(../images/genel.jpg) no-repeat scroll center top;
    text-align:center;
    width:100%;
}

#tanitimAlani.bolumA {
	background:transparent url(../images/bolumA.jpg) no-repeat scroll center top;
}

#tanitimAlani.bolumB {
	background:transparent url(../images/bolumB.jpg) no-repeat scroll center top;
}

Tanımı ile yapıyordum. Bu düşüncem tüm tarayıcılarda sorunsuz çalışırken ie6 sorun çıkardı. İlk atanan genel resmini gösterdi sadece, bölüm resimlerini göstermedi.

Çözüm

id ile atadığım genel ardalan resmi tanımı kaldırıp genel içinde bir sınıf(.bolumGenel) tanımladım ve bu sorunu aştım. Yani kodumu şöyle değiştirdim.

#tanitimalani{
    text-align:center;
    width:100%;
}

.bolumA {
	background:transparent url(../images/bolumA.jpg) no-repeat scroll center top;
}

.bolumB {
	background:transparent url(../images/bolumB.jpg) no-repeat scroll center top;
}

.bolumGenel {
	background:transparent url(../images/genel.jpg) no-repeat scroll center top;
}

hribar.info’nun yaptığı örnek güzel inceleyin.

http://hribar.info/static/projects/multi-class_ie6_bug/error.html

 Kaynaklar

• http://paulirish.com/2008/the-two-css-selector-bugs-in-ie6/
• http://blog.solutionset.com/wpmu/2008/02/15/internet-explorer-id-class-bug/
• http://hribar.info/en/archive/80/entrie.html
• http://www.ryanbrill.com/archives/multiple-classes-in-ie/
• http://sonspring.com/journal/ie6-multi-class-bug

İlgili Yazılar:

1. IE6′da CEE-EEE(peek-a-boo) Hatası
2. IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak
3. CSS Hata Ayıklama Yöntemleri

“Setup failed to write data to the registry”

C:\Users\Administrator\AppData\Local\Temp Bu yol sizin bilgisayarınıza göre değişebilir.

vminst.log dokümanında aşağıdaki bilgiler vardı.

VMInst: 01/19/08 19:41:29 Setting up registry
VMInst: 01/19/08 19:41:29 Writing entries to HKEY_LOCAL_MACHINE\SOFTWARE\VMware, Inc.\VMware Workstation
VMInst: 01/19/08 19:41:29 Getting Property CustomActionData = VMware Player;C:\Program Files\VMware\VMware Player\
VMInst: 01/19/08 19:41:29 Failed to create key SOFTWARE\VMware, Inc.\VMware Workstation: 5
VMInst: 01/19/08 19:41:29 Cannot add installation path to registry.
VMInst: 01/19/08 19:41:29 Attaching to window with title "VMware Player"
VMInst: 01/19/08 19:41:34 End Logging

Çözüm

Sorunun çözümü ise

Çalıştırı açıp(ctrl + R )

regedit

Yazıyoruz ve HKEY_LOCAL_MACHINE\SOFTWARE de

“VMware, Inc.”

ve daha sonrada bunun altında

“VMware Workstation”

diye alanlar oluşturup. Kurulumu yapalım.

Kaynak: http://communities.vmware.com/message/843711

No related posts.

Çeşitli yollardan bize musallat olan virüs(aslında pek virüs mantığı ile hareket etmiyor.) Sistemimizdeki ftp bilgilerini alıp bu bilgiler üzerinden sitelere otomatik olarak bir iframe kodu ekliyor. Genellikle index.xxx ve default.xxx isimli dosyalara otomatik olarak eklenen bir iframe kodu bu. Eklenen bu iframe kodu bazen boş bir sayfayı açarken bazende malware olarak adlandırılan kullanıcının bilgisayarına sızan bir virüs yükletmeye çalışıyor. Eklenen bu iframe genelde gizli olarak kodlandığı için(visibility:hidden) göremiyoruz.

Belli bir süre sonra Google siteyi tararken bu kodlamayı görüyor ve linki takip edincede siteden virüs yayılmaya çalışıyor diye sitenizi Saldırgan Site sınıflandırmasını sokuyor. 

Saldırgan Site sınıfına giren sitemiz Google Chrome ve Firefox ile sitemize açmayan kişilere yukarıdakine benzer bir ekran ile karşılık verecektir ve kullanıcılar sitenize erişemeyecektir. 

Peki biz bu işten nasıl kurtulacağız. İlk olarak siteden bu kodları arayıp(genelde body etiketi sonrasına eklendiği için bulmak kolay.) bulup kaldıracağız. Ayrıca bilgisayarımızı sağlam bir virüs taramasından geçirip, tüm ftp şifrelerimizi değiştirmeyi unutmayalım. 

Bir sonraki adım olarak google’un saldırgan site listesinden çıkmak için Google Webmaster Tools‘una gireceğiz.

Siteye girdikten sonra sırası ile(İngilizce seçili olarak girdiğiniz farz ederek devam edeceğim. İşlerin hızlı yürümesi için İngilizceyi tercih etmenizi öneririm)

• Add Site deyip sitemizi ekleyeceğiz. http://www.orneksite.com/
• Continue basıp ilerleyince karşımıza Site verification sayfası çıkacak. Sitenin bize ait olup olmadığını kontrol için
• Burada iki tür doğrulama isteniyor bizden Meta tag ve HTML file diye iki yolumuz var. Ben Meta tag’i seçip ilerliyorum. 
• Site bize bir meta etiketi veriyor. Bu kodu alıp sitemize(<head>…</head> arasına) ekliyoruz. Sadece ana sayfaya eklemek yeterli. 

Sonra sitenin bize ait olduğunu anlayan goole bize sitemizin saldırgan site olarak listelendiğini söylüyor ve bundan kurtulmak için bir çare gösteriyor. 

Request a review linkine tıklıyoruz. İşaret kutucuğunu işaretleyip metin girdi alanına bir cümlelik bir  durum beyan ediyoruz. 

Bu işlemlerden sonra google yaklaşık olarak 2-3 saat içinde sitemizi saldırgan site listesinden çıkarıyor.

Kaynaklar

• http://sites.google.com/site/webmasterhelpforum/en/faq-malware-and-hacked-sites
• http://www.cogzidel.com/blog/2009/07/malware-affects-your-google-listing-google-webmaster-tools-will-save-you/

İlgili Yazılar:

1. IE iframe ardalanında beyaz renk sorunu

Google Chrome Normal Hali

Google Chrome Odaklanmış Hali

Safari Normal Hali

Safari Odaklanmış Hali

Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.

En son projelerimden bonus.com.tr’de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

Bu kodlarım Firefox ve IE’de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome’da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
outline:0
}

tanımı bizi çözüme ulaştırdı.

Örnek kodu görmnek için tıklayınız.

Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.

Kaynaklar

• http://gandamanurung.com/css/how-to-get-rid-textinput-blue-border-in-safari/ (google chrome safari de mavi kenarları yok etmek)
• http://forums.devshed.com/css-help-116/safari-input-focus-blue-border-477819.html
• http://dev.markhaus.com/blog/2009/03/how-to-annul-safaris-outline-effect-in-input-fields-and-friends/
• http://www.usabilitypost.com/2008/10/15/css-tip-remove-mac-osx-glowing-blue-outlin-for-custom-styled-input-fields/
• http://www.infoqu.com/dev/css-help/safari-input-fields-142336-1/

İlgili Yazılar:

1. sIFR, Flash Player10 ve Firefox sorunu
2. CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek
3. Dış hat çizgisi(outline) özellikleri

Bir kaç sitede gördükten sonra ve bende bir iphone projesine başlayacak olmamdan dolayı buraya eklemeyi uygun gördüm. Daha önce çıktı almak için(print) benzer bir yapıyı kullanmıştık.

Kodumuz çok basit

<!--[if !IE]>–>
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<!–<![endif]–>

veyahut

@media only screen and (max-device-width: 480px) {
  body {color:#000;}
}

şeklinde bir tanımlamada yapabiliyoruz. İlk koddaki ie şartlı koşulu bazı eski ie sürümlerinde bu kodu algılama durumu içindir.

Yukarıdaki tanımlar sadece iPhone’da görünecektir. İşin püf noktasını max-device-width: 480px kısmı oluşturuyor.

Kaynaklar

• http://www.w3.org/TR/css3-mediaqueries/
• http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
• http://squaregirl.com/blog/2009/6/1/iphone-css.html

İlgili Yazılar:

1. CSS İpuçları 4 : CSS ile birlikte yürürlükten kalkan HTML özellikleri
2. CSS Birimleri
3. CSS Editörleri

Yeni sürüm ile gelen özellikler;

• Sekmeleri üste alınmış. Görsel olarak biraz daha derli toplu olması için. Eskiye alışanlar için ilk başta biraz garip olsada zamanla alışacağız.
• Birden fazla panelde arama imkanı. Bu bir çok zaman gereksinim duyduğumuz bir şey idi.
• Daha gelişmiş bir Net paneli
• Panel akif-pasif geçişi kolaylaştırılmış.
• Script paneli performansı arttırılmış.
• Firefox 3.5 desteği var

Bunun dışında 150′den fazla hata giderilmiş.

http://getfirebug.com/

İlgili Yazılar:

1. CSS Hata Ayıklama Yöntemleri
2. Firefox’da satıriçi(inline) elemanların padding-right sorunu
3. FireBug – Genel Bakış