@font-face Genel Bilgi
@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
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.
<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
İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak
17 Eki
Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.
Yine bir İnternet Explorer sorunu ile karşı karşıyayız. Bu seferki sorunum ile bir tablo satırına alt kenar çizgisi tanım yapınca karşılaştı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
İE 6 iki CSS seçicisi Sorunu ve Çözümü
2 Eki
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Yine bir ie6 sorunu ile karşınızdayız. Microsoft ie6 kullananları düşünerek 2014′e kadar ie6 desteğini sürdüreceğini söylemiş, peki bizi kim düşünüyor, Microsoft’un düşünmediği kesin. Neyse biz konumuza gelelim.
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
VMware Kurarken “Setup failed to write data to the registry” hatası aldım
1 Eyl
Yazı Fatih HAYRİOĞLU tarafından Haberler kategorisine eklendi.
VMware güzel bir program. Bilgisayarıma kurarken bi yerde takılıyor ve kuramıyorda ve kendini kaldırıyordu ve sonrada aşağıdaki hatayı veriyor.
“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.
iframe virüsü ve Saldırgan Site damgalamasından kurtulmanın yolu
15 Ağu
Yazı Fatih HAYRİOĞLU tarafından XHTML kategorisine eklendi.
Yaklaşık 2-3 haftadır bir çok yerde karşılaştığımız bu sorunun kaynağının ne olduğu konusunda bir çok makale okudum. Çözümler okudum uygulamalar yaptım sonuç olarak konuyu şöyle özetleyebiliriz.
Ç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/
