sIFR’i Optimum Şekilde Kullanın

Image Replacement teknikleri arasında en popüleri sIFR‘dir. Her tarafta gördüğümüz ve bazı projelerde uyguladığımız bu teknikle kullandığımız işletim sistemindeki standart yazıtiplerine bağlı olmadan herhangi bir yazıtipini başlıklarımızda kullanabiliyoruz. Hem de daha düzgün bir Anti-Alias tekniği ile. Aşağıdaki görüntüde sonuca dair bir örnek görebilirsiniz. Veya sIFR 3′ün demosuna bakıp canlı olarak görmeniz de mümkün.

sIFR Kullanımı

Bu yazımda size sIFR‘in temelde nasıl kullanılacağını değil, bu tekniği nasıl daha optimum bir şekilde kullanabiliriz buna değineceğim. Zaten etrafta yeterince kullanımı anlatan yazılar var. Mesela bunun için sevgili dostum Muhammet Sevim‘in yazdığı sIFR 3 Kullanım Kılavuzu adlı makaleyi okuyabilirsiniz. Ayrıca sIFR Tutorial: Use Your Own Fonts, This is How You Get sIFR to Work ve sIFR 3 Documentation & FAQ adlı makaleleri de okuyabilirsiniz.

Eğer sIFR ile daha önce hiç tanışmamışsanız mutlaka yukarıda bağlantılarını verdiğim yazılardan en azından birini okumanızı ve sIFR‘in kullanımına aşina olmanızı öneririm.

sIFR‘in yukarıdaki makalelerde anlatılan normal kullanımlarında HTML dosyamıza birçok dosya eklememiz gerektiğini söylüyorlar. Ben sIFR‘i projelerimde kullanırken böyle yapmıyorum. Genelde mümkün olduğunca az dosyayı HTML sayfamdan çağırıyorum.

Yani normal kullanımda HTML dosyanızda aşağıdaki CSS dosyalarını;

1
2

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

ve aşağıdaki dosyaları JS dosyalarını çağırmamız gerekiyor:

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Toplamda 4 dosyayı çağırıyoruz. Sizce çok değil mi? Peki şimdi burada ben size sadece üstteki <script src="sifr.js" type="text/javascript"></script> dosyasını HTML sayfamıza ekleyerek sIFR‘i kullanabileceğimizi söylesem nasıl olur? İyi olur değil mi?

Böyle bir yöntem izleyince sunucuya daha az istek göndermiş ve ayrıca kullanımı daha da basitleştirmiş olacağız.

Neden daha az istek göndermemiz gerektiğini ise daha önce Siberkültür‘de Sitenizin Performansını Arttırın adlı yazıdaki aşağıdaki paragrafta gayet iyi bir şekilde açıklanmıştı:

Sayfanızda ne kadar çok öğe bulunuyorsa, sunucuya gidecek istek de o kadar fazlalaşacaktır. Sunucuya giden her istek ise milisaniyelerle talep/cevap paralelini uzatacaktır. Sayfanızdaki öğelerden kastım tabiki de CSS dosyaları, JavaScript dosyaları ve imaj gibi harici dosyalar.

Hareket Vakti

Şimdi ilk olarak sifr.js dosyasını ve web sayfamız için diğer gerekli fonksiyonları taşıyan functions.js dosyasını aşağıdaki şekilde HTML sayfanıza ekleyin.

1
2

<script src="scripts/sifr.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>

Bakın ben yukarda bütün JS veya gerekli olabilecek küçük PHP betiklerini scripts adlı klasörde tutuyorum. Siz hangi klasörde bu dosyaları tutuyorsanız yukarıdaki kodu ona göre düzenlemeniz gerekir.

Az önce tek bir JS dosyası ile bu işi halledebileceğimizi söyledim. Evet bu doğru. Çünkü çoğu web sayfasında ufak tefekte olsa muhakkak JS kodları kullanıyoruz. Ben genelde yukarıdaki örnekteki gibi bu dosyamın ismini functions.js veriyor ve kodlarımı o dosya içinde tutuyorum.

Sonra functions.js dosyanızı açın, aşağıdaki örnek kodu yapıştırın ve tabi ki kendi kullanım ihtiyacınıza göre yeniden düzenleyin:

1
2
3

var agora_regular = {src: 'images/swf/agora_regular.swf' };
sIFR.activate(agora_regular);
sIFR.replace(agora_regular, {selector: 'div#content h1, div#content h2', css: ['.sIFR-root { color: #3e3e3e; font-weight:bold; letter-spacing:-1 }'], wmode: 'transparent', tuneHeight: '-5'});

Yine burada ilk satırda Flash’da ürettiğim Agora Regular adlı yazıtipini barındıran agora_regular.swf dosyasını images/swf klasöründen çağırıyorum. Yine siz kendi gereksinimlerinize göre yuarıdaki kodu düzenleyebilirsiniz.

Son olarak varsayılan olarak kullandığınız CSS dosyanızı açıp aşağıdaki kodları dosyanızdaki uygun bir yere yapıştırın:

1
2
3
4
5
6
7
8
9
10
11
12

.sIFR-flash { visibility:visible !important; margin:0; padding:0 }
.sIFR-unloading .sIFR-flash { visibility:hidden !important }
.sIFR-replaced, .sIFR-ignore { visibility:visible !important }
.sIFR-alternate { position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden }
.sIFR-replaced div.sIFR-fixfocus { margin:0pt; padding:0pt; overflow:auto; letter-spacing:0px; float:none }
 
@media print {
 .sIFR-flash { display:none !important; height:0; width:0; position: absolute; overflow:hidden; }
 .sIFR-alternate { visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important }
}
 
.sIFR-active div#content h1 { visibility:hidden; font-size:30px; line-height:1em }

Yukarıdaki kodda 1. satırdan 5. satıra kadar sIFR için gerekli CSS kodlarını (yani standart kurulumdaki sifr-screen.css dosyasındaki gerekli satırları), 7. satırdan 10. satıra kadar normalde sifr-print.css adlı sIFR için gerekli dosyadaki kodları ve 12. satırda da sIFR tekniği uyguladığımız başlığın boyutunu belirliyoruz.

Yukarıda @media print kodu sayesinde gereksiz yere sifr-print.css dosyasını HTML sayfamıza gömmekten kurtardık. Ama burada dikkat etmemiz gereken birşey var. Yukarıdaki kodu eklediğiniz ana CSS dosyasını (ben genelde screen.css olarak adlandırırım) HTML dosyasına gömerken <link href="styles/screen.css" rel="stylesheet" type="text/css" media=”screen” /> şeklinde media="screen" özelliğini kullanarak verirseniz az önce bahsettiğim @media print arasındaki kodlar çalışmayacaktır. Çünkü bu CSS dosyasını tanımlarken sadece ekran için çalışmasını söylediniz.

Dolayısıyla web sayfanızı yazdırırken sIFR‘in ürettiği .SWF dosyaları yüzünden kimi boşluklar veya birtakım gariplikler görebilirsiniz.

Kısacası HTML sayfamıza ana stil sayfamızı çağırırken media="screen" özelliğini kullanmamamız gerekir.

Ayrıca eğer hali hazırda yazıcı için bir CSS dosyası kullanıyorsanız yukarıdaki örnekte yer alan @media print {} arasındaki kodları o dosya içine de atabilirsiniz.

Sonuç olarak web sayfalarımızı kodlarken mümkün olduğunca az dosya kullanmamız iyi olacaktır. Gerektiğinde bu yazımda anlattığım tarzda bir değişiklik yapmamız da optimizasyon adına iyi olacaktır.

Bu yazı Fatih Turan tarafından 19 Eylül 2008 23:52 tarihinde yazıldı. 13 yorum var.

Ücretsiz Stok Fotoğraf Kaynakları

Stok fotoğraflar’ın ne işe yaradığını ve ne olduğunu kendimce tanımlayacak olursam; web ve grafik tasarımcıların çalışmalarında kullandıkları vermek istedikleri mesajı daha etkili vurgulayabileceği fotoğrafik malzemelerdir. Bu yazımda da ücretsiz stok fotoğraf sağlayabileceğimiz bu siteleri inceleyeceğim.

Sxc

Stok fotoğraflar’ın ne işe yaradığını ve ne olduğunu kendimce tanımlayacak olursam; web ve grafik tasarımcıların çalışmalarında kullandıkları vermek istedikleri mesajı daha etkili vurgulayabileceği fotoğrafik malzemelerdir. Bu yazımda da ücretsiz stok fotoğraf sağlayabileceğimiz bu siteleri inceleyeceğim.

Bu sitede kategorilendirme işlevi gayet iyi yapılmış. Hemen üstte görebileceğiniz kategori listesinde ‘Hall Of Fame’ denilen sitedeki en ünlü fotoğrafları, ‘Highest Rated Images’ kategorisinde en çok puan verilen fotoğraflar, ‘Most Commented Images’da en çok yorum alan fotoğraflar ve ‘Most Downloaded Images’ kategorisinde ise en çok indirilen fotoğrafları görebilirsiniz. Ve tabiki yine listede yer alan diğer kategorilerle de aklınızdaki konuya göre istediğiniz fotoğrafı kolayca bulabilirsiniz.

Gelelim fotoğraf arama olayına. Aramak istediğiniz fotoğrafı sitenin sağ tarafındaki kısımdan kolayca arayabiliyorsunuz. Arama yaparken aklınızdaki terimin İngilizcesini yazmanızı öneririm(İngilizceniz yeterli değil ise bu siteden Türkçe-İngilizce çeviri yapabilirsiniz.). Zira buradaki kullanıcıların çoğu yabancı ve yükledikleri resimlerin etiketlerini de İngilizce olarak atıyorlar. Örneğin ‘karanlık’ kelimesi yerine ‘darkness’ı kullanırsanız bir sürü sonuca ulaşabilirsiniz. Ayrıca aşağıda da görüldüğü üzere kullanıcıları, dosyaları, fotoğraf makinesine göre, ülkeye ve şehire göre arama da yapabiliyorsunuz.

Standart arama bölümü sizi kesmediyse ‘Advanched Search’ bölümünden gelişmiş arama yapabilirsiniz. Buradan tek bir kategori veya bütün kategorilere ait, istediğiniz çözünürlükte, istediğiniz fotoğrafçı tarafından ve istediğiniz tarih aralığında arama yapabiliyorsunuz.

Arama sonuçlarındaki fotoğrafları filtrelemek istiyorsanız, arama sonuçları sayfasının sağında görülen filtreleme listesinde tarih, boyut, puan, yorum gibi kriterlere göre yeniden sıralandırabiliyorsunuz. Ayrıca arama sonuçlarında çıkan fotoğraf sayısını aşağıda görüldüğü gibi arttırabiliyorsunuz

Gelelim kendi fotoğrafınızı Sxc.hu’ya yollama metoduna. Sitenin sağ tarafındaki menüden ‘My Account’a, ardından ‘Upload Photos via web forms’ düğmesine bastıkdan sonra aşağıdaki gibi bir form ile karşılaşacaksınız. Başlık, açıklama, etiket gibi gerekli bilgileri doldurdukdan sonra fotoğrafınızı Sxc.hu’ya gönderebiliyorsunuz. Sxc.hu’nun fotoğraf yükleme kuralları ile ilgili ayrıntılı bilgiyi bu sayfadan bulabilirsiniz.

Son olarak Sxc.hu’nun diğer özelliklerinden kısaca bahsetmek gerekirse; üstte menüde görülen ‘Randomizer’ adlı düğmeye basarsak karşımıza rastgele fotoğraf da getirebiliyorsunuz. Öte yandan kendi galerimizde eğer fotoğrafımız olması şartı ile bize küçük bir blog alanı da tahsis ediyorlar. Yani sxc.hu hesabımız altında kendi blogunuzda yazı da yazabiliyorsunuz. ‘Tutorials’ bölümünde kullanıcıların yazmış oldukları çeşitli konulara ait eğitsel yazıları da okuyabilirsiniz. Beğendiğiniz, ilginizi çeken fotoğrafları favorilerinize ekleyebiliyorsunuz. Bunları ‘My Page’ bölümünden kendi hesabınız altında tekrar görebiliyorsunuz.

Photocase

Bu stok fotoğraf sitesi Alman kökenli olmasına rağmen İngilizce arayüze de sahip. Sitede gördüğüm kadarı ile diğer sitelere nazaran daha kaliteli fotoğraflar var ama yine diğer sitelere göre daha sınırlı dosya indirme izini vermişler. Günlük ücretsiz olarak 3 adet fotoğraf indirebiliyorsunuz. Bunun yanısıra eğer siz buraya fotoğraf yüklerseniz her kabul edilen fotoğrafa 5 kredi daha veriyorlar. Toplamda 10 adet kabul edilen sizin yüklediğiniz fotoğrafınız var ise günlük limitinizi 1 adet arttırıyorsunuz. Çok param var diyorsanız size tabi ki ücretli kredi satın alma seçeneğini de sunuyorlar. Herneyse işi böyle bir ince matematiğe bağlamışlar fakat dediğim gibi çok kaliteli fotoğrafları buradan temin edebiliyoruz.

Buraya kaydoldukdan sonra yine Sxc.hu’daki gibi elektronik posta adresimize bir aktifleştirme maili yolluyorlar. Gerekli talimatları izleyip hesabınızı aktifleştirdikden sonra üstteki ‘Login’ düğmesi ile kullanıcı adı ve şifremiz ile giriş yapalım. Eğer sitenin arayüzü sizde Almanca görünüyorsa üst kısımdan ‘English’ yazan yere basarak sitenin arayüzünü İngilizce diline çevirebilirsiniz. Giriş yaptıkdan sonra aşağıda da görüldüğü üzere sayfanın sağ üst köşesinde kullanıcı adı, kredi durumu ve duyurularınızı görebiliyorsunuz.

Anasayfadaki ‘Photo Search’ bölümü ile arama işlemine hemen geçebilirsiniz. Fakat burada arama yaparken yine Sxc.hu’da olduğu gibi daha fazla sonuç elde edebilmeniz için Almanca terimler kullanmanızı öneririm.(Almancanız yeterli değil ise bu adresden Almanca-İngilizce çeviri yapabilirsiniz.) ‘Advandced Search’ bölümünde ise site üzerindeki fotoğraflarda, forumda, haberlerde, yazılarda ve kısa öykülerde arama yapabiliyorsunuz. Sonuç olarak photocase.de’nin gelişmiş arama bölümü Sxc.hu gibi gelişmiş değil, daha basit yapılmış.

Sayfanın üstündeki ‘Photos’ adlı düğmeye basarsanız kendinizi en son yüklenilen fotoğraflar arasında bulacaksınız. Buradan ilerleyen sayfaları takip ederek fotoğrafları görebilir ve beğendiğiniz var ise indirebilirsiniz de. Ayrıca bu sayfada photocase.de’de her kullanıcıya ait galeri diye tanımlayabileceğimiz ‘Lighbox’lar bulunmakta. Bunlara sayfanın sağındaki ‘Public Lightboxes’ ile ulaşabilirsiniz.

Şimdi de kendi fotoğrafınızı photocase.de’ye nasıl yükleyebileceğinizi anlatacağım. Üst menüde bulunan ‘Take Part’ adlı düğme ile aşağıda görülen forma ulaşacaksınız. Buradan dosyanızın yerini belirtip diğer iki kutucuğu işaretledikden sonra ‘Submit’e basıyorsunuz ve fotoğrafınız yükleniyor. Eğer Photocase’in jürileri fotoğrafı beğenmişse sizin fotoğrafınızda diğer fotoğraflar arasında beliriyor.

Genel olarak photocase.de’yi değerlendirirsek; kısıtlı ama kaliteli fotoğrafları bünyesinde bulunduran bir stok fotoğraf sitesi olarak tanımlayabiliriz.

Imageafter

Son olarak imageafter.com adlı stok fotoğraf sitesini ele alacağım. Bu sitede stok fotoğrafların yer almasının yanısıra ‘Texture’ bölümünde doku fotoğrafları da yer almakta.

Hemen hızlıca belirli bir konuya ait fotoğraf bulmak için sitenin üst kısımında bulunan, aşağıdaki resimde de gördüğünüz gibi kategori listesinden yararlanabilirsiniz. Diğer stok fotoğraf sitelerinde olduğu gibi çeşitli kategorilere göre ayrılmış bölümlerden kafanızdaki konuya ait fotoğrafı bulabilirsiniz.

Imageafter.com’da fotoğraf aramak için üstde bulunan arama kutusunda gerekli terimi yazarak istediğiniz sonucu döndürmesini sağlayabilirsiniz. Ayrıca sonuç penceresinde sıralamayı değiştirebilir, renklere göre sonuçları filtreleyebilir, sayfada kaç adet fotoğraf görüntülendiğini ayarlayabilir, küçük fotoğraf görüntülerini büyütebilir ve sonraki sayfalara kısayoldan ulaşabilirsiniz.

Imageafter.com’un diğer özelliklerini görmek için sitenin sağ üst köşesinde bulunan ‘Extras’ adlı listede foruma bakmamız gerekir. Burada en son yüklenen fotoğrafları görebilir, belirli bir renge göre fotoğraf arayabilir, rastgele fotoğrafları gösterebilir, ‘Abstract Search’ denen farklı bir arama metodunu kullanarak contrast, brightness vs.. gibi özelliklere göre fotoğraf arayabilirsiniz.

Imageafter.com’un hoşuma giden bir özelliğinden size bahsetmek istiyorum. Fotoğrafların üzerinde gördüğünüz makas işaretine basarak bir nevi favori listesine fotoğraf gönderebiliyorsunuz.

Dahası bu favori listenizdeki fotoğrafları elektronik posta olarak arkadaşlarınıza veya yine kendinize gönderebiliyorsunuz. Favori fotoğraflarınıza ulaşmak için üst menüde bulunan makas ikonuna tıklamanız gerekiyor. Eğer favori fotoğraflarınızı göndermek istiyorsanız, ‘Email box’ düğmesine bastıkdan sonra göndermek istediğiniz fotoğrafları seçip ardından da üstteki alıcının elektronik posta adresi ve kendi isminizi girmeniz gerekiyor.

Son Sözler

Aslında bu tür stok fotoğraf siteleri internette epeyce mevcut. Genel bir liste arıyorsanız Blue Vertigo‘daki ‘Stock Photography/Free’ kısmındaki bağlantılara bakmanızı öneririm.

Bu yazı Fatih Turan tarafından 25 Ağustos 2007 16:14 tarihinde yazıldı. 3 yorum var.