Arayüz Geliştiriciler İçin Paket Yönetimi – Bower

Nodejs ve npm’i anlattıktan sonra Bower’ı anlatmamak olmaz. Bower için npm’in arayüz geliştiriciler için olanı demek yanlış olmaz herhalde. Javascript’in sunucu tarafına geçmesi ile arayüz geliştiriciler daha çok otomatize olmaya başladı.

Birçok projemizde javascript ve css kütüphaneleri ve eklentileri kullanıyoruz. Kullandığımız bu kütüphane ve eklentileri sitemize eklemek ve güncellemek bizim için yük olmaya başladı. Burada size bir anımı anlatayım. sahibinden.com’da çalışırken jquery sürümünü yükseltmek bir dert olmaya başlamıştı. Güncellemeyi kimse göze alamıyordu. Çünkü her güncellemede bazı sorunlar çıkıyordu. En son bir iş olarak açıldı ve Sercan yaptı. Uzun ve dertli bir süreçti. Bu tip sorunlarla karşılaşmış bizim gibi arayüz geliştiriciler için bower velinimettir.

Gelelim bower’ı kullanmaya. Çeşitli editörlerden de bu işi yapabiliyoruz ama ben burada komut satırından çalıştırmayı göstereceğim.

Bower’ı yüklemek

Bower’ı yüklemek için npm’in bilgisayarınızda yüklü olması gerekmektedir. Eğer bilgisayarınızda npm yüklü değilse. Bilgi almak için Nodejs ve npm yazımızı okumanızı tavsiye ederim.

Sistemde npm yüklü ise komut satırına aşağıdaki kodu yazalım.

npm install -g bower

npm yazısından bildiğimiz gibi -g parametresi kurulacak kod blokunun genele kurulmasını sağlıyor. Kurduktan sonra bir sonraki adıma geçelim.

Paket bulmak

Npm’den bildiğimiz gibi kütüphane ve eklentiler paket olarak adlandırılıyor. Eklemek istediğimiz paketleri aramanın iki yolu var. Bower’ın arama sayfasını kullanmak ya da komut satırından aşağıdaki kodu yazarak aramak.

bower search <sorgu>

Bir örnek yapalım.

bower search bootstrap

Araması sonucundan bootstrap ile ilgili kütüphaneler listelenir.

enter image description here

Her bir satır bir paketi tanımlar. İlk mor renkli kısım ismi, ikinci beyaz kısımda paketin indireceği git adresini gösterir.

Paket yüklemek

Projemize eklemek istediğimiz paketi yüklemek için komut satırına aşağıdaki kodu yazarız.

bower install <paket_adi>

install komutundan sonra paket_adi ile yüklenebildiği gibi, github kısayolu, Git enpoint ve bir url’den de yüklenebilmektedir.

# kayıtlı paket adı
$ bower install jquery
# GitHub kısayolu
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# Herhangi bir URL
$ bower install http://example.com/script.js

Normalde yüklemek istediğimiz paketi yazdığımızda paketin son sürümü yüklenir. Ayrıca istediğimiz sürümü indirmek için araya diyez işareti (#) koymamız yeterli.

bower install bootstrap#3.2.0

enter image description here

Paket yüklendiğinde proje klasöründe bower_components klasörü oluşturur ve içine dosyaları indirir. Bower bu klasörü otomatik olarak seçer ve adlandırır, ancak konfigürasyon (.bowerrc) dosyası yolu ile bize yolu ve ismini değiştirme imkanı verir.

bower_components klasörünü incelediğimizde yüklediğimiz paket ve bağımlılıkları otomatik yüklendiğini görürüz.

enter image description here

İlk yüklemeden sonra yüklediğiniz dosyayı html dokümanınıza eklemeniz gerekir. Bower paketleri genelde javascript dosyaları içerir, bazen css ve resim dosyası içerir.

<script src="bower_components/jquery/jquery.min.js"></script>

Paket kaldırmak

Yüklediğimiz bazı paketleri kaldırmak isteyebiliriz. Bunun için yazmamız gerke komut:

bower uninstall bootstrap

Birden fazla paketi kaldırmak için araya boşluk vererek isimlerini yazmamız yeterlidir.

bower uninstall jquery modernizr sass-bootstrap

bower.json dosyası

Eğer birden fazla paket kullanacaksanız bir bower.json dosyası ile bu paketleri yönetmek daha mantıklıdır. Zaten tek kütüphane için bower kullanmakta çok mantıklı gelmiyor bana. bower.json dosyasını kendimiz elle oluşturabildiğimiz gibi

bower init

komutunu yazıp, sorulan soralara cevap verip bir bower.json dosyası elde edebiliriz.

Örnek bir bower.json dosyası

{
  "name": "yeni-proje",
  "private": true,
  "dependencies": {
    "jquery": "~2.1.1"
    "swiper": "~3.0.8",
    "waypoints": "~3.1.1",
    "jcarousellite": "~1.9.3",
    "jquery.countdown": "~2.0.5"
  }
}

Yeni bir paket ekledeğimizde bower.json dosyasını güncellemek için –save parametresini eklememiz gerekir.

bower install jquery --save

Bu kullanımı alışkanlık haline getirmekte fayda var. Her paket indirdiğimizde bower-json dosyasını ayrıca açıp güncellemek çok mantıklı değil.

Paketi güncellemek

Paketlerimizi güncellemek için aşağıdaki komutu yazmamız yeterlidir.

bower update

Tüm paketler güncellenebildiği gibi

bower update <paket_adi>

Komutu ile sadece belirli bir paket de güncellenebilir.

Yüklü paketleri listelemek

Mevcut paketleri ve güncelleme olup olmadığını görmek için

bower list

komutunu kullanırız.

➜  yeni-proje  bower list
bower check-new     Checking for new versions of the project dependencies..
yeni-proje#0.0.1 /Users/fatih/yeni-proje
├─┬ bootstrap#3.2.0 (latest is 3.3.5)
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└─┬ jcarousellite#1.9.3
  └── jquery#2.1.4 (3.0.0-alpha1+compat available)

Sonuç

Bu makalede twitter’ın geliştridiği bower paket yöneticisini tanıtmaya çalıştım. Bower’ın arama, yükleme, kaldırma, listeleme komutlarını anlatmaya çalıştım. Bunlar genel itibari ile yeterlidir bence.

Sunucu taraflı kod yazarlarının alışık olduğu paket yönetim araçlarına biz arayüz geliştiricilerde böylelikle kavuşmuş oluyoruz.

Kalın sağlıcakla.

Kaynaklar

WordPress’de RSS İçerisinde Belli Kategorileri Gizlemek

Çoğumuz mail yoluyla bloglarımıza abone olan takipçilerimizi bilgilendirmek için, RSS üzerinden veri çeken sistemler kullanmaktayız. Kullandığımız bu sistemler, blogumuzun RSS adresinde ki içeriği kontrol ederler ve yeni eklenmiş içerikleri takipçilerimize mail olarak gönderirler.

Normal şartlar altında blogumuza eklediğimiz tüm içerikler RSS içerisinde yer alır ancak bazı durumlarda sizde benim gibi bazı kategorilere eklediğiniz içeriklerin RSS içerisinde yer alıp, takipçilerinize gönderilmesini istemeyebilirsiniz. Özellikle de gereksiz veya özel kategorilere eklediğiniz yazıların, takipçilerinize mail olarak gitmesini istemeyebilirsiniz. Örneğin, ben sitemde tanıtım yazılarının ve oyunlarla ilgili paylaşımlarımın RSS içerisinde yer almasını istemiyorum, nedeni ise mail yolu ile beni takip eden çoğu kişinin beni takip etme amacı daha çok; SEO, webmaster dünyası ve kişisel konularda yazdığım konulara ait içerikler olduğu için. Bende bu kategoriler haricinde ki yazılar ile takipçilerimi rahatsız etmek ve takipçi kaybetmek istemiyorum.REKLAM

Bu ihtiyaç sonrasında ise RSS içerisinde belli kategorileri gizlemek (kaldırmak) amaçlı bir araştırma yaptım, yaptığım araştırma sonucu birçok eklenti buldum ancak böyle basit bir olayı eklenti yerine kodla halletmek blogumuza daha az yük oluşturacağı için bende çalışan bir kod buldum. Aslında piyasa da benzer yapıda birkaç kod var ancak WordPress’in güncel sürümü ile çalışan bir tek bu koda ulaşabildim.

function rssKategoriGizle($query) {
    if ($query->is_feed) {
        $query->set('cat','-1, -2, -3'); // Kategori ID'lerini değiştirmeyi unutmayın!
    }
return $query;
}
add_filter('pre_get_posts','rssKategoriGizle');

Öncelikle kodu kullandığınız temanın functions.php dosyasına eklemeniz gerekiyor. Bunun için yönetim panelinizden Görünüm > Düzenleyici yolunu izleyebilir ve açılan sayfanın sağında bulunan listeden functions.php dosyasını seçebilirsiniz. Dosyayı seçtikten sonra açılan sayfada, yukarıda verdiğim kodu uygun bir yere yapıştırınız.

Daha sonra da kod içerisinde yorum satırı ile de belirttiğim gibi, kodun içerisinde ki kategori ID’lerinin yer aldığı kısmı düzenlemelisiniz. Yazacağınız kategori ID’lerinin başında ise “-” işareti olmalıdır. Kodun içerisine örnek olarak 1, 2 ve 3 ID’li kategorilerin RSS içerisinden gizlenmesini gerçekleştirdim. 1, 2, 3 yazan kısımlara tek bir kategori ID’si yazabileceğiniz gibi çok daha fazla kategori ID’si de yazabilirsiniz.

Eğer kategori ID’sini nasıl öğreneceğinizi bilmiyorsanız, burada ki yazımdan bu konu hakkında detaylı bilgi edinebilirsiniz.

Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)

Xhtml ile kodlama yaparken genelde metinleri kullanırız. Çünkü metinlerin eklemesi, düzenlemesi kolaydır ve arama motorları indekslemesini kolay yapar. Ancak bazı durumlarda metin yerine resim kullanmak sitemizin görselliği açısından önemlidir metinler CSS ile bir yere kadar şekillendirilir, bir çok metin şekillendirme yöntemini CSS ile yapamayız. Bazı durumlarda metin yerine resim kullanmak durumunda kalırız.

Web standartlarına göre kodlama yaparken metin yerine resim kullanıldığı durumlarda arama motorlarının rahat indekslemesi ve CSS’i ve resimleri desteklemeyen tarayıcılarda görüntünün ve erişebilirliğin bozulmaması için Metin Yerine Resim Ekleme Teknikleri(Image replacement) kullanılır.

Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir, bazıları CSS ve resimlerin desteklenmediği tarayıcılarda sorun çıkardığı için web kodlamacısı tarafında kullanımı terkedildi. Biz burada belli başlı 4 metin yerine resim ekleme tekniğini anlatacağız ve avantaj, dezavantajlarını sizlerle paylaşacağız.

1- Fahrner’in Metin Yerine Resim koyma tekniği (Fahrner Image Replacement – FIR)

Todd Fahrner arkadaşımızın ürettiği bu kod en popüler metotlardan biridir. Uygulanması en basit metot olması kullanımını arttırmıştır. Teknik çok basittir yerine resim konacak metin <span> etiketi içine alınır. Xhtml kodu:

:::html
<h1> <span>Selam</span> </h1>

Metin yerine görünecek resim <h1> etiketine uygulanır: CSS kodu

:::css
h1 {
	background:url(selam.gif) no-repeat;
	width: 62px;
	height: 19px;
	font-size:16px;
}

ve son olarakta <span> etiketi içindeki metni gizlemek için:

:::css
span {
	display: none;
}

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

Bu yöntem bir çok yönden avantajlıdır ancak son yazdığımız kod biraz problemlidir, Bir çok ekran okuyucu bu kodda sorun çıkaracaktır. Erişilebilirlik açısından eksik bir kodlama tekniğidir. Bu eksikliği gidermek için başka yöntemler geliştirilmiştir.

2- “Phark” Metin Yerine Koyma Tekniği

www.phark.net’in ürettiği bu teknik ekran okuyucuları tarafından görüntülenecektir, bu yönüyle FIR tekniğinden avantajlıdır. Ayrıca fazladan <span> etiketi üretmemesi yönüylede avantajlıdır. Html kodu:

:::css
<h1>Selam</h1>

FIR tekniğinden farklı olarak bu teknikte text-indent değeri yüksek eksi değer(genelde -999px) verilerek ekranı dışına atılarak üretilir. CSS kodu:

:::css
h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

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

Bu teknik ekran okuyucularda sorunsuz çalışacaktır ancak resim görüntülemeyi iptal eden kullanıcılar bu metot ile kodladığımız sayfalarda sorun yaşayacaktır. Biz bu tekniği CSS ile Menü Oluşturmak V – Resimli Menüler makalemizde uygulamıştık.

3- Gilder/Levin Metin Yerine Koyma Tekniği

Tom Gilder ve Levin Alexander bu kodlamayı geliştirmiştir. Ekran okuyucularında ve resim görüntülemeyi iptal eden kullanıcılarda sorunsuz çalışır. Bu teknikte boş bir <span> etiketi ile yazının üzeri kapatılır, eğer resimleri kapatıp sitenizi ziyaret eden olursa altındaki metni görür.

Bu metot için fazladan <span> etiketi üretilir. Html kodu:

:::html
<h1> <span></span>Selam </h1>

<h1> etiketinin boyutları resmin boyutları ile aynı atanır ve göreceli olarak konumlandırılır. CSS kodu

:::css
h1 {
	width: 62px;
	height: 19px;
	position:relative;
	font-size:16px;
}

Ekstradan üretilen <span> etiketi mutlak konumlandırma ile konumlandırarak metnin üzerini kapatırız. Ayrıca boyutları %100 verilerek tam kapanma sağlanır. Son olarakta görünecek resim zemin resmi olarak atanır.

:::css
h1 span {
	background: url(selam.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

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

Bu metot hem ekran okuyucuları hemde resim göstermeyen tarayıcılarda sorunsuz çalışır. Tek dezavantajı fazladan bir <span> etiketi eklenmesidir.

Fakat bu metodun boş, anlamsız, ekstra bir <span> elementi ile gerçekleştirilmesi, “web anlamlılığı” bakımından iyi bir davranış değil. “Web Anlamlılığı” bize her HTML elementinin bir görevi olması gerektiği ve gereksiz kodlamadan kaçmamızı söylüyor. Mehmet Doğan

Bunların dışında Radu, Leahy/Langridge, Dwyer, Lindsay ve Shea Enhancement Teknikleride mevcuttur. Ayrıca hala bir çok teknik çıkarılmaktadır.

4- Inman Metin Yerine Flash ekleme Tekniği (Inman Flash Replacement (IFR)) ve Boyutlandırılabilir Inman Metin Yerine Flash ekleme Tekniği (Scalable Inman Flash Replacement (sIFR))

Metin yerine resim ekleme tekniklerinin amaçlarında bir taneside herkesin bilgisayarında olmayan fontları kullanmaktır. Mike Davidson ve

Shaun Inman daha yaratıcı bir teknik geliştirdiler. Metin Yerine Flash ekleme Tekniği ve Boyutlandırılabilir Metin Yerine Flash ekleme Tekniği.

Flash swf dosyalarına font gömmeye izin veriyor, metin yerine resim koymak yerine metin yerine niye flash dosyası koymayalım diye düşünen bu arkadaşlar bize gerçekten çok farklı bir tekniği öğrettiler, yani sFIR’ı. Bu yöntemde javascript, doküman içinde belirli bir metini veya belirlenmiş sınıf ismini bir döngü ile bulup yerine flash elementini koyuyor. Javascript metin yerine küçük flash dosyalarını koyuyor. Bu teknik ile sadece belirtilen yerler flash dosyası ile değiştirilir tüm sayfa değiştirilmez. Bu tekniğin bir diğer avantajı flash dokümanları seçilebilirdir yani eklediğimiz metni kopyalanıp yapıştırma imkanımız var demektir. Bu metot ile metinler tekrar boyutlandırılabilir.

Bu tekniği kolayca uygulamamız için Mike Davidson bu metod için gereken dosyaları içeren bir paket hazırlamıştır. Bu metodu uygulamak için ilk olarak buradan bu paketi indirmek gerekiyor. İndirdiğimiz paketin içinde;

  • dokümantasyon
  • css
  • demo
  • flash
  • js

dokümanları var.

sIFR Nasıl Uygulanır

Bu teknik devamlı kendini geliştirmektedir, biz burada sIFR2.0.2 versiyonu üzerinden anlatacağız.

Flash

İlk olarak indirdiğimiz sIFR-2.0.2.zip doyasını açacağız ve flash do kümanı sifr.fla açacağız.

Dokümanı açtığımızda Scene1’deki gördüğümüz beyaz alana(holder Movie cilp’i) çift tıklayalım. Karşımıza yazılı olan metine dokunmamamızı isteyen bir dinamik metin alanı çıkacak(Do not remove this text.), dokunmasak iyi olur 😀

Bu dinamik metin alanı fare ile seçip alttaki Properties penceresinden istediğimiz fontumuzu(Eğer fontu gömeceksek(embed) Türkçe karakter içeren fontları seçmemiz iyi olacak.) seçiyoruz.

Eğer fontu gömeceksek, Properites ekranından Embed… butonuna tıklıyoruz. Açılan pencereden All seçip ok tıklayıp bu pencereyi kapatıyoruz. Böylelikle kullandığımız fontu flash dokümanı içine gömmüş olduk, yani kullanıcının bilgisayarında bu font olmasa bile fontu görecektir.

Sonra flash dokümanımızı kaydedelim. Flash dosyası Flash 2004 ile üretildiği için eğer Flash 2004 sonraki versiyonları kullanıyorsak bize yükseltme yapıp yapmayacağımızı soracak bizde Save deyip yükseltme yapalım.

Son olacak Flash dosyamızı yayınlayalım(publish..). Şimdi elimizde kendi oluşturduğumuz bir sifr.swf dokümanı var. İsmini değiştirebiliriz, ben fatih.swf yaptım.

HTML

Html dokümanınız açıp <head> içine aşağıdaki kodları eklememiz gerekiyor.

:::html
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

sonra bunların altına javascript dosyalarını ekleyelim.

:::html
<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-addons.js" type="text/javascript"></script>

Sonra Html içeriğinin sonuna aşağıdaki kodu ekleyelim.

:::javascript
<script type="text/javascript">
//<![CDATA[ /* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){ // This is the older,
	ordered syntax sIFR.replaceElement("h2", "fatih.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
}; //]]>
</script>

Bu javascript kodunda metin yerine eklenecek swf fosyasını, metnin rengini, hangi elemente(etiket, id ve sınıf) uygulanacağını, padding, link rengi gibi bir çok özelliği buradan düzenleyebiliyoruz. İndirdiğimiz dökümandaki örnek html(index.html) ve dokümantasyonu inceleyerek bu konuda daha ayrıntılı bilgi edinebilirsiniz.

CSS

sIFR-screen.css dokümanın açıyoruz.

:::css
.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -7px;
	font-size: 36px;
	margin:0;
	padding:0;
}

Burada ekleyeceğimiz fontun ayarlarını yapıyoruz. font boyutunu kendi seçtiğimiz fonta göre ayarlıyoruz. Örnek dosya üzerinden gidersek bu css dokümanında bir çok başlık tanımı mevcuttur biz burada sadece kendi kullandığımızı bırakıp diğerlerini silebiliriz.

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

Bu metodun ayrıntılı olarak anlatımı Adobe’un sitesinde [Introduction to Scalable Inman Flash Replacement (sIFR)][] isimli çok güzel bir video var, buradan tekniğin nasıl uygulandığını ayrıntısı ile görebiliriz.

Bu tekniğin dezavantajı sayfa yüklenmeden önce javascript’in yüklenmesidir. Bu sitemizin açılış hızına etki edecektir.

Not(01.05.2008 eklendi): Bazen sFIR uyguladığımız metin ikinci satıra inmiyor bunun için başlığa bir genişlik tanımlamamız gerekiyor.

:::css
h1{
	width:250px
}

[sIFR3][]’ün betası var ancak kararlı sürümü çıkmadı.

Sonuç olarak şunu söyleyebiliriz ki; Metin yerine resim eklemek için bir çok teknik geliştirildi ve geliştirilmektedir kodlama yaparken hangisinin bizim için daha kullanışlı olduğunu seçerek uygulamalıyız. Metin yerine resim ekleme yöntemlerini sayfamızda çok fazla yerde kullanmak pek mantıklı gelmiyor bana ama gerektiği yerde, örneğin sadece başlıklar için kullanmak gayet mantıklı. Takdir ve seçim sizin.

Kaynaklar

Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama

Daha önce Metin Yerine Resim ekleme yöntemini anlatmıştım ve bir çok yerde örnekler ile göstermiştim. Bu yöntemin uygulandığı eleman içindeki metni ekran dışına çıkarmak için text-indent:-9999px değeri atarız.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Burada şöyle bir sorunumuz oluyor eğer bu elemana text-align:right tanımıda atamış isek. Maalesef metin ekran dışına çıkmıyor.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:right
}

Bu sorunu gidermek için sola dayalı sistemlerde negatif text-indent değeri veriyoruz, sağa dayalı sistemlerde de pozitif değer vererek bu durumu çözebiliyoruz. Bu çözüm yeni nesil tarayıcılarda sorun çıkarmazken İnternet Explore’da scroll çıkarmak kaydı ile sorun oluşturuyor.

h1 {
	text-indent: 9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Tüm tarayıcılarda çözüm için ise yapmamız çok kolay bir şey aslında. text-align:left tanımı atamak. Metin yerine resim koyma metodu uygulanan metinlerin hizalaması sola olmalıdır.

h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:left
}

Bu sorun ile genelde metin yerine resim metodu uygulanmış elemanını kapsayan bir elemana text-align:right uygulandığında rastlarız. Kalıtsallık ile bu özellik tüm alt elemanlarınıda etkilediği için biz bu elemana text-align:right değerini atamasak dahi elemanımız bu değeri üst elemanından kalıtsal olarak alır ve böyle bir soruna neden olur.

Categories CSS

Medya dosyalarını birleştirerek optimizasyon yapmek

Bir çok web kod yazarı için sayfaların yavaş açılması büyük bir sorundur. Bu sorunun çözümü için çeşitli metotlar uygulanır. Farklı araçlar ile testler yapılır çözümler üretilmeye çalışılır. Sonuçta en kararlı hale ulaşılmaya çalışılır. Bende bir test aracı ile(Firefox – FireBug – YSlow) test ediyorum. Test ettiğim siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor. Fazla sayıda css ve javascript dosyasının eklenmesi bu soruna neden oluyor. Bunun için en kolay ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.

optimizedenonce

Genelde projelermizde css dosyalarımızı genel stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.

<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print"></link>

Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.

<link rel="stylesheet" href="/style/iskelet.css" type="text/css"></link>

gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.

/* all media */
@media all {
    body {
        color:#666;
        font:13px arial, helvetica, sans-serif;
        padding:20px 0 30px 0;
        }
}

@media print {
    body {
        color:#000;
        font:12px arial, helvetica, sans-serif;
        padding:0;
        }
}

şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz. Daha fazla sayıda css dosyası kullanmamız durumunda ise sunucu veya istemci taraflı kod yardımı ile css veya js dosyalarımızı tek bir dosya gibi gösterebiliriz. Bu konuya burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.

CSS ile Önden Resim Yükleme Teknikleri

:hover display:none ile gizlenmiş öğelere atanmış ardaalan resimlerini tarayıcı yüklemiyor. Bu durum :hover haline geldiğimizde resim yüklenmeye başlar ve görüntü sonra gelir ve kötü bir görüntü oluşturur. Bu sorunu çözmek için css sprite tekniğini kullanırız. Benzer bir sorun ajax ile çalışan bir yapıda sayfa ilk yüklendiğinde yüklenmemiş alanlarda tanımlı ardalan resimleri içinde geçerlidir. Bu durumda ise resimleri ön yükleme yapmak önemlidir.

Daha önceki makalemizde bir iki yöntem anlatmıştık. http://fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/

Şimdi daha basit bir yöntemi daha bilgi dağarcığımıza ekleyelim.

Ajax ile sonradan yüklenen elemanlarımızın ardalanına atadığımız resimleri önceden yüklemek için mevcut ardalan atanmamış bir elemana bu ardalan resmini tanımlarız ve konumunuda sayfa dışına vererek(-9999px) görünmez yaparız. Böylelikle resim yüklenmiş olur ve sonradan yüklenen alanlar açıldığında görüntü problemi yaşamamış oluruz.

<div class="resimYukle"></div>

CSS kodumuzda

.resimYukle{
	background:url(/images/bg.gif) -9999px -9999px no-repeat
}

Bu durum için fazladan bir div açıp onun ardalanına bu resmi atayabiliridk ama eğer sayfa içinde ardalan tanımı olmayan bir eleman varsa bunu tanımlayarak fazladan bir divden kurtulmuş oluruz. Bir not bu kodu css kodumuzun sonuna eklememiz daha mantıklıdır.

.baskaBirEleman{
	background:url(/images/bg.gif) -9999px -9999px no-repeat
}

Benzer bir kodu :after seçicisi ve content özelliği ile de yapabiliriz.

body:after {
	content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) url(img05.png)
}

Bu kodu ie7 ve ie6 desteklemiyor maalesef.

Ayrıca CSS3 ile bir elemana birden fazla background tanımıda yapabiliyoruz bu özellik yardımı ile de yapabiliriz. Tabi tüm tarayıcılar desteklemediği için beklemek gerekiyor.

Kaynaklar

CSS ile Araç İpucu(Tooltip) Hazırlama

Bazı web tarayıcıları title tanımlı nesnelerin üzerine gelince tanımlanan bilgileri gösterirler. Bir çok tasarımcı javascript ve css yardımıyla Araç İpucu geliştirerek farklı tipte ve çeşitte araç ipucu oluşturmaktadır ve oluşturmaya devam etmektedir. Biz burada sadece CSS ile Araç İpucu oluşturmayı göreceğiz. Bu metot yeni nesil tarayıcılarda sorunsuz çalışmaktadır.

XHTML kodu :

<p>
    <a href="http://fatihhayrioglu.com/" class="aracIpucu">Fatih Hayrioğlu<span> (Fatih Hayrioğlu’nun Not Defteri) </span></a> web sitesine bir göz atın.
</p>

Araç İpucu eklenecek linke aracIpucu sınıfı atanmış ve Araç İpucu içinde görünecek açıklama <span> etiketleri arasına alınmıştır.

a.aracIpucu{
    position: relative;
}
a.aracIpucu span {
    display: none;
}

Buradaki espri konumlandırma(realtive->absolute) esprisidir. Araç İpucu eklenecek linke position: relative; ataması yapıp, içindeki span elementinide mutlak konumlandırma atayarak işi halledeceğiz. Ama sayfa ilk yüklendiğinde span içindeki bilgi görünmemesi için başlangıç durumunda span etiketini görünmez yapıyoruz(display:none;).

a.aracIpucu:hover span {
    display: block;
    position: absolute;
    top: 18px;
    left: 20px;
    width:200px;
}

Fare imleci link üzerine geldiğinde(:hover) span içeriğini göstermek için display:block ataması yapıyoruz. Ayrıca araç ipucunun yerini belirliyoruz. Araç İpucuna görsellik kazandırmak isteyenler için aşağıdaki kodları ekleyebiliriz.

a.aracIpucu:hover span {
    display:block;
    position:absolute;
    top:18px;
    left:20px;
    width:200px;
    padding:2px 6px;
    border:1px solid #963;
    background-color:#FF6;
    color:#000;
}

Maalesef bu kod IE5x versiyonlarda tam anlamıyla çalışmayacaktır. Bu durumu düzeltmek için

a.aracIpucu:hover {
    font-size: 100%; /* IE5.x/Win duzeltmek icin */
}

Örneği görmek için tıklayınız. Veyahut resimli bir tanıtım için başka bir örnek yaparsak tıklayınız.

Ayrıca Safari kullanıcıları için üzgünüz. Safari bu kodlara olumlu yanıt vermiyor.

Görselliği daha hoş olan araç ipuçlarıda yapabiliriz. Bunun için Xhtml kodumuzu aşağıdaki em eklemesini yapıyoruz. Amacımız bu elemente ikon resmini eklemek.

<p>
<a href="http://fatihhayrioglu.com/" class="aracIpucu">
Fatih Hayrioğlu<span><em></em> (Fatih Hayrioğlu'nun Not Defteri) </span></a>
web sitesine bir göz atın.
</p>

CSS koduna gelince:

a.aracIpucu:hover span {
    display:block;
    position:absolute;
    top:25px;
    left:-5px;
    width:200px;
    padding:2px 6px;
    border:1px solid #963;
    background-color:#FF6;
    color:#000;
}

düzeltmesini yapıyoruz. Ayrıca ikon için aşağıdaki eklemeyi yapıyoruz.

a.aracIpucu:hover span em {
    position:absolute;
    left:20px;
    top:-6px;
    width:11px;
    height:6px;
    background:#fff url(yukariok.gif) 0 0;
    display:block;
    font-size:1px;
}

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

Categories CSS

WordPress Mail Gönderme Sorunu ve SMTP Ayarları

Çoğu sunucu firması ne yazık ki güvenlik gerekçesi ile mail gönderimini engellemiş oluyorlar. Dolayısıyla blogunuz üzerinde bulunan hiçbir form (iletişim,sipariş vs.) veya wordpressin kendi özellikleri (parola sıfırlama, yorum uyerısı vs.) çalışmıyor. Özellikle de merdiven altı host firmalarında karşılaşılan bu durum sonucunda sorunu bulmak bazen blog sahiplerini çıldırtacak hale geliyor. Yeni projelerim için aldığım bir hostta karşılaştığım bu durum için bir çözüm araştırması yaptım ve çözümü de sizlerle paylaşmaya karar verdim.

Öncelikle arkadaşlar blogumuza aşağıda ki eklentiyi kuruyoruz.REKLAM

wp-mail-smtp

Eklentiyi kurduktan sonra etkinleştirip, ayarlar > email sekmesinden eklentinin ayar sayfasına ulaşıyoruz. Karşınıza aşağıda ki gibi bir sayfa çıkmış olması lazım.

wp-mail-smtp-ayarlar

From Email: Bu kısma mailin kimden geldiğinin görülmesini istiyorsanız o adresi yazmalısınız. Mesela destek@google.com.tr bile yazabilirsiniz. Mailin gittiği kişi, mailleri buraya yazdığınız adresten gelmiş gibi görecek.

From Name: Bu kısma ise mailin gittiği kişide gözükmesini istediğiniz ismi yazınız.

Mailer: Bu kısımda kesinlikle “Send all WordPress emails via SMTP.” seçeneğini seçmelisiniz aksi taktirde bu eklentiye gerek kalmazdı.

Return Path: Bunun ayarı size kalmış, ister aktif edin isterseniz etmeyin.

SMTP Host: Bu kısma SMTP host adresinizi yazınız. Muhtemelen bu adres mail.siteadiniz.com şeklindedir. İsterseniz SMTP host olarak gmail, yahoo, outlook veya yandex gibi servisleri de kullanabilir ve sunucunuza mail trafiği yaşatmamış olursunuz.

SMTP Port: Buraya SMTP adresinizin port değerini yazınız. Gmail, yahoo, outlook ve yandex bilgilerini yazının sonunda bulabilirsiniz.

Encryption: Bu kısımda kullandığınız SMTP sağlayıcısına göre SSL veya TLS seçeneklerinden birini seçeceksiniz.

Authentication: Bu seçeneği “Yes: Use SMTP authentication.” yapınız.

Username ve Password: Bu kısımlara hangi SMTP sağlayıcısını kullanıyorsanız ona ait mail adresi ve şifresini yazınız. Örneğin ben SMTP host olarak kendi adresim mail.burakisci.com servisini kullanacaksam bu kısımlara da oluşturduğum mail adreslerinden (smtp@burakisci.com, 123456 gibi) birini yazmalıyım. SMTP host olarak gmail, outlook gibi servisler kullanacaksanız, o hizmetlere ait mail adresleri ve şifrelerinizi yazmalısınız.

Bu değerleri yerlerine yazdıktan sonra değişiklikleri kaydedebilirsiniz. Daha sonra değerlerin doğru olup olmadığını yani mail sisteminin çalışıp çalışmadığını kontrol etmek için “Send a Test Email” kısmından istediğiniz bir mail adresine deneme maili gönderebilirsiniz.

Gmail, Yahoo, Outlook ve Yandex SMTP Bilgileri

SMTP Host: smtp.google.com
SMTP Port: 465
Encryption: SSL

SMTP Host: smtp.mail.yahoo.com
SMTP Port: 465
Encryption: SSL

SMTP Host: smtp-mail.outlook.com
SMTP Port: 587
Encryption: TLS

SMTP Host: smtp.live.com
SMTP Port: 587
Encryption: TLS

SMTP Host: smtp.yandex.com.tr
SMTP Port: 465
Encryption: SSL

Gmail, Yahoo, Outlook ve Yandex gibi servisleri SMTP Host olarak kullanabilmek için hesaplarınızdan bazı ayarlamalar yapmanız gerekmektedir. Bunları da bir sonra ki yazım da sizlerle paylaşacağım.

CSS İle Özel Kaydırma Çubuğu Yapmak

Daha önce yazacaktım ama desteği çok düşüktü. Webkit’in %82(mobil + web) desteğinden sonra uygulanabilirliği arttı. Ben Firefox’tan destek bekledim ama ondan ses çıkmadı.

Tasarımcıların form elemanlarını tasarlama sevdası hiç bitmedi, bitmeyecek de 😀 Tüm ihtiyaçları CSS ile halledebilsek sorun yok da işin içine javascript girince durum değişiyor. Çünkü CSS işin işlevsel kısmını yine doğal haline bırakıp görselliğine yönelirken; javascript ile yapılan çözümler işin işlevselliğine de müdahale ediyor. İşin doğallığı bozulunca da tonla sorun çıkıyor.

Neyse biz gelelim kendimize özel kaydırma çubuğu(scroll) yapmaya;

Bu kadar basit bir kod ile özel kaydırma çubuğu elde ettik. Biz yukarıda 3 adet sahte(pseudo) kaydırma çubuğu elementi kullandık. Ancak toplamda yedi tane element vardır.

Özel Scroll Sahte(Pseudo) Elemanları

enter image description here

  1. ::-webkit-scrollbar Kaydırma çubuğu alanını tanımlar. Genelde diğer elemanları kapsar
  2. ::-webkit-scrollbar-button Yön tuşlarını seçmeye yarar.
  3. ::-webkit-scrollbar-track Kaydırma çubuğunun altta kalan boş kısmını seçmeye yarar.
  4. ::-webkit-scrollbar-track-piece Kaydırma çubuğunun tutamacı dışında kalan boşluğu seçmemize yarar.
  5. ::-webkit-scrollbar-thumb Kaydırma çubuğunun tutamacını seçmemize yarar.
  6. ::-webkit-scrollbar-corner Yatay ve dikey kaydırma çubuğunun köşesini seçmemizi sağlar.
  7. ::-webkit-resizer Yatay ve dikey kaydırma çubuğunun köşesinde boyutlandırma çıkması durmunu seçmemizi sağlar.

Öze Kaydırma Çubuğu Sahte(Pseudo) Sınıfları

Farklı durumları yakalayabilmemiz için kaydırma çubuğunun sahte(pseudo) sınıfları vardır. Bu sınıflar kaydırma çubuğu elementinin parçalarına özel seçimin yapmamızı sağlar.

:horizontal, :vertical, :decrement, :increment, :start, :end, :double-button, :single-button, :no-button, :corner-present, :window-inactive

Bu sözde sınıfları tanımlamak yerine örnekleri inceleyerek daha iyi anlayacağımızı düşünüyorum.

Tarayıcı Desteği

Chrome explorer Firefox
+(-webkit)

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +(-webkit)

Çift çizgili ayraç kullanımı

Genelde menülerde kullanılan bir durumdur bu. Menü öğelerini ayırmak için araya çizilen çizgilerin iki farklı renkte olması durumunda nasıl bir çözüm üretmek gerektiğine dair bir ipucu. Bazen resim olarak kullanıyorum, ama bazende soldaki öğenin sağ kenar çizgisine bir renk, sağdaki öğenin sol kenar çizgisine farklı bir renk atayarak çözüm üretmeyi deniyorum.

.clearfix:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.clearfix{
	display: inline-block;
}

* html .clearfix{
	height: 1%;
}

.clearfix{
	display: block;
}

ul{
	background-color: #008bc6;
	margin: 0 auto;
	padding: 10px;
	width: 450px;
}

ul li{
	border-left: 1px solid #05a3e6;
	border-right: 1px solid #046e9b;
	float: left;
	list-style: none;
}

ul li a{
	color: #fff;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-right: 10px;
	padding: 0 10px;
	text-decoration: none;
}

HTML

<ul class="clearfix">
   <li><a href="">Bak postacı</a></li>
    <li><a href="">geliyor</a></li>
    <li><a href="">selam veriyor</a></li>
    <li><a href="">her kes ona bakıyor</a></li>
</ul>

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

İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.

ul li.ilkOge{
	border-left:0;
}

ul li.sonOge{
	border-right:0;
}

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

Bu uygulamayı dikey menü olarakta yapabiliriz.

ul{
	background-color: #008bc6;
	margin: 0 auto;
	padding: 10px;
	width: 200px;
}

ul li{
	border-bottom: 1px solid #05a3e6;
	border-top: 1px solid #046e9b;
	list-style: none;
}

ul li.ilkOge{
	border-top: 0;
}

ul li.sonOge{
	border-bottom: 0;
}

ul li a{
	color: #fff;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-right: 10px;
	padding: 10px 0;
	text-decoration: none;
}

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

Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.

HTML kodu

<a href="">
	+ <span>Çizgili buton</span>
</a>

CSS kodu

a{
	background-color:#ed145b;
	padding:5px 10px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	font-size:16px;
}

a span{
	border-left:2px groove rgba(144, 71, 95, 0.55);
	display:inline-block;
	padding-left:6px
}

Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.

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

Categories CSS