Günümüzde popüler olarak kullanılan Font Awesome, Glyphicons kütüphaneleri gibi bir çok font tabanlı ikon kütüphanesi vardır. Sizde kendi hazırladığınız ya da internetten edindiğiniz ikonları font’a çevirerek bir kütüphane oluşturabilir, paket halinde kullanabilirsiniz. İkonlarınızı font haline (yazı tipine) çevirmek için IcoMoon, Fontello, Fontastic, Glyphter gibi servislerden birini tercih edebilirsiniz. Bu yazıda IcoMoon servisini kullanarak kendi fontumuzu oluşturacağız. İhtiyacınız olan en önemli şey .SVG uzantılı vektör ikonlar. Bu ikonları internetten edinebilir, Illustrator vb. vektörel bir çizim programı ile de oluşturabilirsiniz.
CSS
Bir web sitesi veya web uygulaması geliştirirken yaşanılan en büyük sorunlardan bir tanesi uygulamamızı farklı ekran çözünürlüklerine göre uyarlamak oluyor. Günümüz de yeni yapılan web sitelerinin veya uygulamaların neredeyse tamamı responsive olarak hazırlandığından yayına çıkmadan önce kapsamlı bir test işleminden geçmesi gerekiyor.
Css’ de uppercase kullandığınızda küçük “i” karakterleri büyük “I” karakterine dönmektedir. Bunun nedeni Css’in varsayılan olarak İngilizce’ye göre çalışmasıdır. Bu nedenle bir çok kişi uppercase kullanmak yerine kendi methodlarını yazmaktadır.
Aslında bu işlemin çözümü çok çok basit. Yapmamız gereken sayfanın head tagleri arasına sitemizin dilinin Türkçe olduğunu belirten bir tag eklemek.
Örnek:
[html]<meta http-equiv="content-language" content="tr">[/html]
Msdn forumları, Stack overflow vb. baya araştırmam sonucu yazılan mesajlardan yapılamayacağını öğrendim. Ama yaptım, evet başardım :)
FontAwesome’ı neden button olarak kullanmam gerektiğini merak edenler için; repeater içerisinde ikon olarak kullanıp, tıklandığında itemcommand’ı tetiklemem gerekiyordu. Bunun için bir asp button’una ihtiyacım vardı.
Anlatacaklarım Asp.net WEBFORMS içindir, Asp.net MVC yapısı gereği zaten çok basit bir şekilde kullanılabilmektedir.
Öncelikle button’umuzu button görünümünden kurtarıp metin haline getirmek için aşağıdaki gibi bir css class’ı yazıyoruz.
Web tabanlı bir uygulama veya web sitesi geliştirirken dikkat ettiğimiz kriterlerinin başında sayfalarımızın hızlı açılması gelir. Eğer sayfalarımız geç açılıyorsa hem arama motorları tarafında puanımız düşecek, bu da sıralamamızı etkileyecek, hem de kullanıcılar beklemeyip web sitemizden çıkacaklardır.
“O da neyin sesi?” diyenler olabilir :)
Örnek vermek gerekirse ne kadar temiz bir css kullanırsak kullanalım hazırladığımız bir tasarım farklı tarayıcılarda farklı farklı gözükebiliyor. Bunun en büyük nedenlerinden biri tarayıcıların kendilerine has varsayılan değerlerinin olmasıdır. (IE ile Firefox’ un default line-height lerinin farklı olması gibi…) CSS sıfırlama işlemi tam da burada imdadımıza yetişiyor ve hazırladığımız tasarımın farklı tarayıcılar üzerinde de tamamen(neredeyse :P) aynı gözükmesini sağlıyor.
Web üzerinde CSS sıfırlama ile ilgili onlarca kaynak ve css kodu bulabilirsiniz. CSS sıfırlama işlemi için bu konuda en popüler olan Eric Meyer tarafından yazılan YUI CSS Reset‘ i tavsiye ederim.
Chrome’ da textboxlara tıklandığında (seçildiğinde) tarayıcı tarafından otomatik olarak highlight/focus efekti veriliyor. Bazen bu efekt tasarımlarımızın kötü görünmesine sebep olabiliyor. Bu özelliği kapatmak için aşağıdaki içeriği css dosyanıza eklemeniz yeterli olacaktır.
[css]*:focus {outline: none;}[/css]