Zeitgeist the Movie

Zeitgeist the Movie

Zeitgeist ; zamanını ruhu anlamına gelen bu sözcük bizlere yaşadığımız zamandan ve çok daha öncelerinden beslenen ve gelişen düşünce akımlarıyla dünya üzerinde nasıl bir hakimiyet kurulmaya çalışıldığını ve insanların bunlara karşı koymaksızın kabul ettiği, ona göre yaşadığı günümüz dünyasını anlatan belgeselin ismi. Peter Joseph’in kurgulayıp yazdığı ve ortaya çıkardığı bu belgesel ilk olarak internet üzerinden Google video’da gösterime sunulmuş ve çok kısa sürede gördüğü yoğun ilgi sayesinde tüm dünyanın ilgisini çekmiş.

Üç bölümden oluşan belgesel, ilk bölümde din olgusunu eski inançları hristiyanlık karşılaştırmalarıyla ve benzerlikleriyle ele alarak toplum üzerindeki etkisi anlatılıyor.

Zeitgeist

İkinci bölümde ise 11 Eylül saldırılarının aslında gösterildiği gibi olmadığını, perde arkasındakileri ve ulaşılması istenen hedefleri gerçekleştirmek için uygulanan planları komplo teorisi niteliğinde çeşitli görüntülerle kanıtlar eşliğinde sunuyor. Arşiv görüntülerinden yararlanılan belgeselde George W.Bush, Adolf Hitler, Usame Bin Ladin gibi önemli kişilerin görüntüleri de yer alıyor.

Zeitgeist

devamını oku »

ilgili yazılar

• The King of Kong: A Fistful of Quarters (1)
• Son Buluşma (3)
• Amerikan Gece Yarısı Ekspresi: RENDITION (5)

bu yazı gorcun tarafından sinepil.org adresli sitede yayımlanmak üzere yazılmıştır. kaynak gösterilmeksizin kopyalanamaz.

etiketler: belgesel, 2007, edebiyat, the matrix, 1984, 11 eylül, hitler, zeitgeist, peter joseph, equilibrium, distopya, cesur yeni dünya, george w. bush, zeitgeist addendum, google video, fahrenheit 451, komplo teorisi

İstiklal marşı // bağlama, gitar farklı şekillerde

Eylül 2007′de Gitarist M.Safa Yeprem’in İstiklal Marşını çalmasını yazmıştık: Gitarla istiklal marşı.

Dünya üzerinde böyle asil başka bir milli marş yok, gerçekten.

Şimdi de gitar, elektor gitar ve bağlama ile farklı şekilllerde çalınmış hallerinin videolarını buraya koyuyoruz.

Ayrıca 3 boyutlu bir halde Mehmet Akif Ersoy’un kendi ağzından okuduğu İstiklal Marşımızın 10 kıtasının videosu da burada. Ve İstiklal Marşı’ın ilk halinin de videosu var, en sondaki video marşın ilk hali.

BÖCEK / HANGİSİ DAHA BULAŞICI, AŞK MI, PARANOYA MI?

‘Bizim üzerimizde deney yapıyorlardı. Bir sürü kişi hastalandı. Kusma, baygınlık, ishal, migren…tuhaf tuhaf şeyler düşünmeye başlamıştım. Kendimi çok kötü hissediyordum. Hastalandım. Bir hastahaneye yatırdılar. Testlere başladılar. Hayal edemeyeceğin kadar çok doktor vardı. Sürekli gelip gidip sorular soruyorlardı. Uzun süre orada kaldım, çıkmama izin vermediler. Çünkü o allahın belası doktorlar üstümde bir şeyler deniyorlardı. Sonunda kaçtım.’

Bu cümleler ilk önce Tracy Letts tarafından kaleme alınan tiyatro oyunu “BUG” ile düştü sanat tüketicilerinin kulağına. Füsun Günersel tarafından dilimize kazandırılıp, 2006 – 2007 tiyatro sezonunda, Murat Daltaban‘ın rejisiyle DOT‘ ta da sahnelenen oyun 2007 yılında William Friedkin tarafından beyaz perdeye aktarıldı. Filmin baş rollerindeki Ashley Judd (Agnes) ve Michael Shannon (Peter) ‘a yan rollerde, Lynn Collins, Brian F. O’Byrne, Harry Connick Jr. eşlik ediyor.

Filmin tiyatro oyunu olan ve 20 Eylül 1996′da Wilson Milam rejisiyle Londra ‘daki Gate Theatre‘de prömiyeri yapılan orjinalinde de Peter karakterini canlandıran Michael Shannon’a Agnes rolünde Shannon Cochran eşlik etmiş.
Film Orijinal metne sadık kalınarak kurgulandığı için hemen hemen tamamen küçük bir motel odasında geçiyor, yönetmenin tiyatro ve sinema sanatında çokça kullanılan sıkıştırılmış mekan’dan ve bu mekanın getirdiği klostorofobik duygudan ziyadesiyle faydalanmış olması filmin artılarından sadece biri.

Öykü bir barda garson olarak çalışan Agnes’e (Ashley Judd) lezbiyen arkadaşı R.C.’ nin Peter’ı tanıştırmasıyla başlar.
Agnes altı yaşındaki oğlunu bir market alış verişi sırasında kaybetmiş ve bir daha bulamamış acılı bir anne olmanın yanısıra, karanlık işlerde kariyer yapan eski mahkum Jerry Goss’un da ayrıldığı eşidir. Büyük şehrin çiğneyip çiğneyip kent merkezinden uzağa tükürdüğü bu kadın karakterle Ashley Judd unutulmaz bir performans çıkartıyor.

devamını oku »

ilgili yazılar

• Like Mike 2 (2006) (0)
• Deja Vu (2006) (9)
• Little Miss Sunshine (7)
• Şöhret / El Cantante (eleştiri) (3)
• Düşüş ‘The Fall’ – Eleştiri (9)
• Penelope (2006) (5)
• Revolutionary Road (5)
• Apocalypto (2006) (7)

bu yazı sahaf1976 tarafından sinepil.org adresli sitede yayımlanmak üzere yazılmıştır. kaynak gösterilmeksizin kopyalanamaz.

etiketler: film, böcek, 2006, michael shannon, bug, ashley jud

Wordpress’te Arşiv Sayfası Nasıl Yapılır?

Geçenlerde bir ziyaretçim bana iletişim formu aracılığıyla arşiv sayfasını nasıl yaptığımı sordu. Ben de ona bu sorunun cevabını blogumda bütün ziyaretçilerle paylaşmamın daha iyi olacağını düşündüğümü söyledim. Şimdi bu yazımda blogumdaki arşiv sayfasının nasıl yapılabileceğini anlatacağım.

Öncelikle şunu söylemem gerekir ki burada bahsettiğim yöntem Dejan Cancarevic‘in kendi blogunda arşiv sayfasının yapımında izlediği yöntemi esas alıyor. Bu yöntem ile herhangi bir eklenti kullanmadan, Wordpress’in bizlere sunduğu imkanlar içinde arşiv sayfamızı oluşturabiliyoruz. Harika değil mi?

Arşiv Yapısı

Daha önce muhakkak arşiv sayfama uğrayıp nasıl birşey olduğunu görmüşsünüzdür ama yine de arşiv sayfamızın nasıl göründüğünü aşağıda göstermek istiyorum:

Evet, yukarıda görebildiğiniz üzere üst kısımda bir arama kutusu bulunmakta. Bunun burada olmasının nedeni ziyaretçilerimizin arşivi taramak yerine hemen aklında olan bir terimi aramak isteyebilir (tembel ziyaretçileri de düşünmemiz lazım değil mi? xD). Alt kısımda da arşivimizdeki yazıların yazı/tarih biçiminde listelendiğini göreceksiniz. Gördüğünüz üzere arşivimizin yapısı gayet sade bir şekilde olacak.

Gösteri Zamanı

Şimdi yukarıdaki yapıyı oluşturmak için anahtar niteliğinde üç kod parçamız bulunmakta.

Wordpress’e Özel Şablon Tanımlamak İçin:

Wordpress’de özel şablonlar oluşturup istedimiz sayfada kullanabileceğimizi biliyor muydunuz? Burada anlattığım arşiv sayfasını da özel şablon sayesinde oluşturacağız. Özel şablonu Wordpress’e tanıtmak çok kolay. Sadece aşağıdaki gibi bir kod parçasını kullanmanız yeterli oluyor.

1
2
3
4
5

<?php
/*
Template Name: Arşiv Sayfası
*/
?>

Arama Kutusunu Oluşturmak İçin:

Arama kutusunu oluşturmak için de aşağıdaki kod parçasını kullanıyoruz. Buradaki yapıyı siz kendi blogunza özel olarak ayarlayabilirsiniz.

1
2
3
4
5
6
7
8
9

<!--SEARCH-->
<form action="<?php bloginfo('url'); ?>/" method="get">
	<div>
		<label for="search_term">Arama Yapın:</label>
		<input type="text" id="search_term" name="s" />
	</div>
	<div><button type="submit">Ara</button></div>
</form>
<!--/SEARCH-->

Arşiv Listesini Oluşturmak İçin:

Ve geldik en önemli kod parçamıza. Buradaki kod parçamız sayesinde bütün yazıları tarihe göre sıralayıp gösterebiliyoruz.

1
2
3
4
5
6
7
8
9

<!--ARCHIVE LIST-->
<h2>Yazılar</h2>
<ul>
	<?php $myposts = get_posts('numberposts=-1&offset=0');
	foreach($myposts as $post) : ?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?><span><?php the_time('d F Y H:i') ?></span></a></li>
	<?php endforeach; ?>
</ul>
<!--/ARCHIVE LIST-->

Bakın size burada bir ipucu vereyim. Eğer arşiv listenizde bir kategoriye ait yazıların gösterilmemesini istiyorsanız (mesela ben çalışmalarım kategorisi altındaki yazıları göstermiyorum çünkü o kategori altında çalışmalarım sayfasındaki öğeler mevcut ve arşivde bunlar görüntülenmemesi gerekiyor) aşağıdaki 4. satırda yer alan get_posts() adlı fonksiyondaki argümana &cat=-8‘ı ekleyebilirsiniz.

Buradaki 8 değerini sizin engellemek istediğiniz kategori ID numarası ile değiştirmeniz gerekiyor. ID’yi bulmak için Wordpress panelinizden Yönet>Kategoriler bölümüne girip burada hangi kategorinin ID numarasını öğrenmek istiyorsanız onun üzerine gelince tarayıcınızın altındaki durum çubuğunda bu numarayı görebiliyorsunuz (buradaki ekran görüntüsüne bakabilirsiniz). Bu arada birden çok kategoriyi engellemek için bu argümana birden fazla ID numarası girebiliyorsunuz. Yani &cat=-8,-10,-15 gibi kullanabilirsiniz.

Şimdi siz de bu kod parçalarını kullanarak arşiv sayfanızı oluşturup arsiv_sayfasi.php adıyla temanızın bulunduğu dizine kaydedin (mesela ben wp-content/themes/emerald/ klasörü altında bu dosyayı kaydettim).

Sonuç olarak ben kendi blogumun tema yapısını da dikkate alarak arsiv_sayfasi.php adlı dosyamı aşağıdaki kodları içerecek şekilde ile sunucuma kaydettim. Ama bütün işlemler bununla da bitmiyor. Okumaya devam edin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<?php
/*
Template Name: Arşiv Sayfası
*/
?>
 
<?php get_header(); ?>
 
<!--CENTER-->
<div id="center">
 
	<!--CONTENT-->
	<div id="content">
 
		<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
 
		<!--ENTRY-->
		<div class="entry page">
			<div class="entry_content">
				<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
				<p>Aşağıdaki arama formunu kullanarak veya arşivden eski yazılarıma ulaşabilirsiniz.</p>
 
				<!--SEARCH-->
				<form action="<?php bloginfo('url'); ?>/" method="get">
					<div>
						<label for="search_term">Arama Yapın:</label>
						<input type="text" id="search_term" name="s" />
					</div>
					<div><button type="submit">Ara</button></div>
				</form>
				<!--/SEARCH-->
 
				<!--ARCHIVE LIST-->
				<h2>Yazılar</h2>
				<ul>
					<?php $myposts = get_posts('numberposts=-1&offset=0');
					foreach($myposts as $post) : ?>
						<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?><span><?php the_time('d F Y H:i') ?></span></a></li>
					<?php endforeach; ?>
				</ul>
				<!--/ARCHIVE LIST-->
			</div>
 
		</div>
		<!--/ENTRY-->
 
		<?php endwhile; ?>
		<?php endif; ?>
 
	</div>
	<!--/CONTENT-->
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

Son olarak da Wordpress yönetim panelinizden Yaz>Sayfa bölümüne girip sayfanın başlığına “Arşiv” yazın ardından da aşağıdaki görüntüdeki gibi sayfa şablonu olarak Arşiv Sayfasını seçin. Ve tabii ki bu sayfayı yayımlıyoruz.

İşte bu kadar! Eğer herşeyi doğru yapmışsanız blogunuzun adresinin sonuna /arsiv/ yazarak arşiv sayfanıza erişebilirsiniz (Örneğin: fatihturan.com/arsiv/).

Eğer herhangi bir sorunla karşılaşırsanız bunu çekinmeden burada yorum yazarak belirtebilirsiniz.

Bu yazı Fatih Turan tarafından 28 Eylül 2008 19:05 tarihinde yazıldı. 15 yorum var.

Yeni Adobe Creative Suite 4

Yeni Adobe Creative Suite 4 ailesi dün Adobe tarafından tanıtıldı. CS4 Design Premium, Web Premium, Production Premium ve Master Collection adı altında dört farklı paket sürümü ile geliyor. CS4 içinde yer alan programların yeni özellikler inanılmaz güzellikte. Gerçi ben hala Trial sürümleri indirip deneyemedim. En kısa zamanda indirip canlı olarak deneyeceğim ama bu yazımda CS4 ailesi içindeki bazı programların gözüme çarpan yeni özelliklerine değineceğim.

Adobe Photoshop

CS ailesinin amiral gemisi sayılabilecek Photoshop bir önceki CS sürümündeki gibi Photoshop ve Photoshop Extended adı altında iki ayrı versiyon ile satılmakta. Her iki sürüm arasındaki farklılıkları buradaki sayfadan öğrenebilirsiniz. Fakat ben burada Photoshop Extended’daki özelliklerden bahsedeceğim (nasılsa diğer sürümdeki özellikleri kapsıyor değil mi?).

Adobe hemen hemen her sürümde Photoshop’un arabiriminde mutlaka bir değişikliğe gidiyordu. Anlaşılan bu sürümde de bu huyundan vazgeçmemiş görünüyor ve Photoshop CS4′u yenilenmiş arabirim ile bizlere sunuyor. Açıkcası Photoshop’u -az önce de dediğim gibi- kurup inceleyemediğimden dolayı tam bir yorum yapamayacağım ama görebildiğim kadarıyla yeni arabirim gayet iyi. Arabirimde ilk dikkatimi çeken üst kısımdaki sekmeler oldu. Daha önceden dökümanlar arasında kaybolup duruyorduk. Sekmeler sayesinde bu sorun ile artık daha az karşılaşacağız gibime geliyor. Bu arada bu sekme özelliği sanırım diğer programlarda da mevcut.

Açıkcası Photoshop’un en çok ilgimi çeken Akıcı Tuval Yönü denen yeniliği oldu. Bu yenilik sayesinde tuvalimizde birtakım değişiklikler meydana geldi. Mesela önceki sürümlerde tuvalimize sadece %1600 boyutunda yakınlaştırma yapabiliyorduk. Oysa tanıtım videosundan gördüğüm kadarıyla tuvaldeki görselin piksellerine kadar yakınlaştırma yapabiliyoruz. Diğer yandan Rotate View Tool ile tuvalimizi 360 derece açıyla döndürebiliyoruz ki bu da çok ilginç bir özellik.

Bir diğer yeni özellik olan İçerik Bilinçli Ölçekleme ile Photoshop’ta görselleri yeniden boyutlandırırken içeriğin de boyuta göre yeniden şekilleniyor. Bunun pratikte işe yarayıp yaramayacağını bilmiyorum. Ama yararlı bir özellik gibi görünüyor. Herneyse ilerleyen günlerde deneyip göreceğiz.

Sık sık fotoğraflarla uğraşan kullanıcıların beğeneceğini düşündüğüm yeni Ayarlamalar Paneli sayesinde önceki sürümlerde birçok menü altında kaybolup levels, curves, brightness&contrast vs. ayarlamak artık tarih oldu. Adjustment adlı panel sayesinde bütün bu ayarlamaları menüler altında kaybolmadan kolayca yapabileceğiz artık.

Bir de bu Photoshop CS4′ün çıkmadan önce bir yerde Photoshop’un bilgisayarımızın GPU’sunu kullanacağını okumuştum. Ama nedense Adobe’nin yayınladığı özellik listesinde bu ibareye rastlayamadım. Photoshop’un yeni ve geliştirilmiş bütün özelliklerini bu sayfadan okuyabilirsiniz.

Adobe Illustrator

Adobe Illustrator vektör tabanlı programlar arasında -bana göre- kullanıcıya en iyi imkanları verebilen vektör çizim programıdır. Ben de vektörel çalışmalarımı (bazılarını çalışmalarım sayfasında bulabilirsiniz) Illustrator ile yapıyorum. Bunun birçok nedeni var ama en önemlisi sanırım Photoshop’a benzer arabirimi sayesinde kolay kullanımı ve dolayısıyla da kolay öğrenilebilir bir yapıya sahip olmasıdır.

Yeni Illustrator’de gradientlerde (Türkçesi ile degrade) büyük değişiklikler oldu. Artık oluşturduğumuz gradiantlardaki renk duraklarında şeffaflık belirleyebileceğiz. Bundan önce böyle bir özellik yer almıyordu Illustrator’de. Açıkcası bu durumu ben de önceden Illustrator’de çalışırken farketmiştim ve biraz da canımı sıkıyordu. Kısacası artık bu sorun yok ve gradientlerimize şeffaflık verebiliyoruz.

Yine Illustrator’de gradientlerin açı, konum ve boyutunu çalışılan nesne üstünde kolayca ayarlayabileceğimiz yeni bir özellik gelmiş. Daha önce Gradient paletinde kırk takla atarak çeşitli manevralarla yaptığımız değişiklikleri artık daha kolay yapabileceğiz.

Burada yazamadığım daha birçok yenilik Illustrator’de yer almakta. Yanlız Adobe’nin hala Illustrator’e çoklu sayfa özelliğini koymamasını biraz garipsedim. Keşke InDesign’daki o güzel özellik Illustrator’de de  olsaydı. Ama yine de Hot Door‘un Illustrator için geliştirdiği Multipage eklentisi sayesinde bu özelliği Illustrator’e katabiliyorsunuz.

Adobe Fireworks

Fireworks’de de diğer Adobe ürünlerinde olduğu gibi yeni özellikler geldi. Bir önceki Fireworks CS3 sürümündeki arabirimde eski Macromedia’nın arayüz tarzı ağır basıyordu. Bu sürümde nihayet Fireworks’un arabirimi tamamen yenilenerek Fireworks’un arabirimine Adobe’nin bakış açısı hakim oldu.

Fireworks’le pek çalışmadığım için bir önceki sürümde tasarımı otomatik HTML’ye dönüştürürken tam bir CSS desteği verip vermediğini veriyorsa ne denli verimli çalışıyor bunu bilmiyorum. Ama bu sürümde Adobe’nin iddia ettiğine göre web tasarımınızı tek adımda CSS tabanlı HTML dosyalarına dönüştürmeniz mümkünmüş. Gerçi hiçbir zaman bu tip yöntemleri tasvip etmiyorum (bunun XHTML KITCHEN‘da çalışmam ile alakası yok arkadaşlar ). Elle yazılan kod her zaman otomatik oluşturulan koddan daha iyidir. Herşey elinizin altında olur, kontrol sizin elinizdedir falan (daha birçok neden yazılabilir aslında )… Ama bu özellik sayesinde bu işten hiç anlamayan kullanıcılar için yararlı bir fonksiyon olmuş.

Yeni özellikler arasında tasarımınızı şifre korumalı olarak PDF dosya biçiminde dışarı aktarabiliyorsunuz. Hatta görüntüleme, baskı, kopyalama vs. gibi işlemler içinde ayrı olarak şifre belirleyebiliyorsunuz. Bu özelliğin diğer CS4 programlarında olup olmadığını bilmiyorum ama umarım vardır. Çok güzel bir özellik değil mi? Bence harika…

Adobe’nin bildirdiğine göre yeni Fireworks bir önceki sürüme göre daha performanslıymış. Bir önceki Fireworks’u ben de denerken kimi zaman bazı işlemlerde yavaşlığını farkediyordum. Bu da yararlı bir gelişme olmuş.

Fireworks’da bir önceki sürümün aksine metin motoru olarak Adobe’ninkini kullanıyormuş. Sanırım diğer Adobe programlarında olan anti-alias, paragraf ayarları seçenekleri gibi özellikleri artık Fireworks’da da kullanabileceğiz.

Kısacası Fireworks bu sürümle bayağı bir olgunlaşmış. Hatta kimi zaman Photoshop’u bırakıp Fireworks’a mı geçsem web tasarımlar için diye düşünmüyor değilim.

Adobe Dreamweaver

Dreamweaver’ı kullanmayalı bayağı oluyor. Bundan sonra da kullanmayı açıkcası düşünmüyorum. Çünkü WYSIWYG tarzı editörlere hiç ihtiyaç duymuyorum. “Ben Kimim?” sayfasında da yazdığım üzere çoğu işlerimde E Text Editor adlı programı kullanıyorum. Yine de Dreamweaver’da ilgimi çeken birkaç yenilik oldu. Bunlardan bahsetmem yararlı olacak.

Bundan önce bir sürü basit editörler de bile yer alan Subversion özelliği (geçenlerde bu konu hakkında Eren Emre bir yazı yazmıştı) nihayet Dreamweaver’a teşrif etmiş bulunmakta. Geç olsun güç olmasın diyerekten bu özelliğin önemli olduğunu belirtmekte fayda var.

Adobe, Dreamweaver’a Akıllı Nesneler adında yeni bir özellik eklemiş. Bu özellik sayesinde herhangi bir PSD belgesini Dreamweaver’daki çalışmanıza sürükleyerek bağlayabiliyorsunuz. Daha sonra bu bağladığınız belgeyi Photoshop’dan düzenlediğinizde Dreamweaver’a geçip hemen güncelleyebiliyorsunuz.

Bundan başka Dreamweaver’ın da arabirimi değişikliğe uğramış (biliyorum şaşırmadınız xD). Daha önce 3 adet olan görünüm kipleri arttırılmış ve 8′e çıkarılmış.

Adobe Flash

CS3 ailesi içinde belkide en çok yenilikle gelen program Flash’dır. Flash’daki yeni özellikler inanılmaz güzel görünüyor. Genel olarak görebildiğim kadarıyla bu sürümde animasyon konusunda bayağı gelişme sağlanmış.

Nesne Tabanlı Animasyon denen yeni Flash özelliği sayesinde Motion Tween tekniğiyle uyguladığınız animasyonları sahnedeki bir eğri yardımıyla kolayca gerçekleştirebiliyorsunuz. Bu yeni özellik gerçekten harika olmuş. Daha önceki sürümlerde bu tür olaylar tam eziyetti.

Öte yandan yine animasyon konusunda yarar sağlayacak Kemik Aracı adı altında yeni bir aracı bizlere bahşetti Adobe. Bu sayede daha önce 3D programlarda gördüğüm kemik editörü benzeri bir aracı Flash’da da görüyoruz.

Bir başka yeni özellik ile sahnemizdeki 2D nesneleri 3D çevirme ve döndürme araçları ile 3D animasyon yapabiliyoruz.

Yine ilgimi çeken güzel bir araç geldi Flash’a. Adı Spray Brush Tool olan bu araç ile herhangi bir sembolü sahnemize püskürtme şeklinde yerleştirebiliyoruz.

İzlenimlerim

Yeni Adobe Creative Suite 4 hakkında izlenimlerim genel olarak olumlu yönde. Şahsen yeni özelliklerden tatmin oldum diyebilirim. Siz bu konuda ne düşünüyorsunuz bilmek istiyorum doğrusu. Yeni özellikleri beğendiniz mi? Beğenmediğiniz yönleri neler? Eğer siz de CS4 ailesi içinde yer alan programları deneyebildiyseniz veya yukarıdaki yazımdan okuduğunuz kadarıyla edindiğiniz izlenimleri burada yorum olarak yazabilirsiniz.

Bu yazı Fatih Turan tarafından 25 Eylül 2008 17:17 tarihinde yazıldı. 5 yorum var.

Geçerlilik Testi Gerçekten Gerekli mi?

W3C Validator yani Türkçesiyle geçerlilik testi web standartlarıyla alakadar olan web tasarımcı ve web geliştiricilerinin sık sık kullandığı bir araçtır. Hani sağda solda da çok görüyoruz işte “XHTML/CSS Valid” diye ikonlar, bannerlar yerleştiriliyor site ve blogun altında geçerlilik testinden geçildiğini belirten. Kimimizin hiç umrunda olmayan kimimizin de aşırı derecede fanatikliği yapılan ve adeta bir minik bir pazarlama aracı olarak kullanılan (bu kötü birşey mi ayrıca tartışılır aslında xD) bu test.

Peki geçerlilik testi gerçekten gerekli mi? Bu soruya cevap vermeden önce gelin geçerlilik testinin ne olduğunu, yararlarını ve bu konu hakkında nasıl bir yöntem izleyebiliriz bunları inceleyelim. En sonunda da bu soruya cevap verelim.

Geçerlilik Testi Nedir?

Geçerlilik testi yazdığımız HTML, XHTML veya CSS dosyalarının W3C Birliği tarafından oluşturulan kurallara göre yazılıp yazılmadığını ve eğer hata yaptıysak nasıl düzeltileceğine ilişkin önerileri getiren yine W3C Birliği tarafından yaratılan interaktif bir test uygulamasıdır.

XHTML dosyalarını geçerlilik testine tabi tutmak için buradaki aracı, CSS dosyalarını geçerlilik testine tabi tutmak için ise buradaki araç kullanılır.

Yararları Nelerdir?

Geçerlilik testinin yararlarını ve dolayısıyla W3C Birliği’nin oluşturduğu kurallara uyarak elde edeceğiniz yararları listelemek gerekirse:

• Geçerlilik testi sonucunda çıkan sorunları çözmeniz karşılığında tarayıcılar arasındaki oluşabilecek görünüm farkı olasılığını aşağıya çekmiş olursunuz.
• Hataları düzeltilmiş ve kurallara uyan HTML veya XHTML sayfası ile daha temiz ve düzenli kodlara sahip olursunuz.
• Daha temiz ve düzenli kodlardan oluşan sayfalar da SEO açısından önemlidir. Yani Google sayfanızı daha iyi indeksler.
• Geliştirme süreciniz hızlanır. Eğer bir web uygulaması geliştirmeyi düşünüyorsanız muhakkak işin içinde JS, DOM gibi teknolojileri de kullanacaksınız demektir. Yazım yanlışları ve kuraldışı kodlar içeren HTML veya XHTML sayfalarınızın olduğunu bir düşünün. Bu sayfalara bağlı JS kodları yazdığınızda muhtemelen birtakım sorunlarla karşılaşacaksınız. Bu sorunlar da sizin zamanınızı ve paranızı alıp götürecektir.
• Olası gözden kaçan yazım hatalarını geçerlilik testi sayesinde elimine edebilirsiniz.

Şu anda aklıma gelen yararlar bunlar. Eğer bunlardan başka bildiğiniz bir madde varsa makaleyi ona göre güncelleyebiliriz.

Nasıl Bir Yöntem İzlemeliyiz?

Ben kendi tecrübelerime dayanarak sizlere birtakım önerilerde bulunmak istiyorum:

• Otomatik tamamlama özelliğine sahip bir editör kullanın. Böylece yazım hatalarını bir nebze azaltmış olacaksınız. Ayrıca biraz daha hızlı kod yazma olanağına sahip olacaksınız. Size önerim E Text Editor, Aptana veya ActiveState Komodo Edit adlı editörlerden herhangi birini kullanmanız. E Text Editor kişisel tercihimdir.
• Web tasarımınızı XHTML/CSS‘ye çevirirken belli aşamalarda geçerlilik testini muhakkak uygulayın. Örneğin #top, #center, #bottom adlı üç tane div‘imiz varsa her bir div ve iç kısmını kodladıktan hemen sonra geçerlilik testinden geçirin.
• Normalde XHTML dosyalarınız için buradaki geçerlilik testi uygulamasını, CSS için de buradaki geçerlilik testi uygulamasını kullanırız. Her iki geçerlilik testine Web Developer Toolbar adlı Firefox eklentisini kullanarak daha hızlı erişebilirsiniz. Hem FTP‘deki hem de yerel sunucunuzdaki dosyaları Web Developer Toolbar‘ın Tools menüsündeki komutlarla kolayca geçerlilik testine tabi tutabilirsiniz.
• Geliştirme işinizde yine işinize yarayacağını umduğum HTML Validator adlı Firefox eklentisini tavsiye edeceğim. Bu eklenti bir nevi Firefox içinde dahili geçerlilik testi yapıyor. Ama dikkat etmek gerekirki kimi zaman bu eklenti sayfanızda herhangi bir hata olmadığını söylemesine rağmen W3C‘nin geçerlilik testinde sorunlar çıkabiliyor. Kısacası bu eklentiyi muhakkak kullanın ama siz siz olun W3C‘nin geçerlilik testini yabana atmayın. Her ne olursa olsun yukarıda yazdığım önerideki gibi adım adım W3C‘nin geçerlilik testini çalıştırın.
• Yazım hatalarını en aza indirgemek için oluşturduğunuz hazır XHTML ve CSS şablonlarızı kullanın. Böylece tekrar tekrar kod yazmak zorunda kalmaz ve yanlış kod yazma olasılığınızı azaltmış olursunuz.
• XHTML ve CSS için referansları elinizin altında bulundurun. Benim en çok kullandığım Sitepoint‘in yaptığı XHTML referansı ve CSS referansı. Kimi zaman bazı özellikleri unutabiliyoruz değil mi?
• Geçerlilik testi sonunda çıkan hataların çözümlerini öğrenin. Bunun için benim daha önce yazdığım Sıkça Karşılaşılan XHTML Hataları adlı yazıma ve Eren Emre Kanal’ın Siberkültür‘de yazmış olduğu yine W3C Kontrolüne Takılan Hataları Ayıklama adlı yazıyı okuyun.

Yine benim bilmediğim sizin bildiğiniz farklı bir öneriniz varsa burada belirtmeniz beni memnun edecektir. Sonuçta bildiklerimizi burada paylaşıyoruz öyle değil mi?

Geçerlilik Testinin Önemi

Görebileceğiniz üzere geçerlilik testinin biz web tasarımcı ve web geliştiricileri açısından çok faydası var. Bunları görmezden gelmek tam anlamıyla saçmalık olur.

Ama şöyle de birşey var ki şu anki CSS 2.1 sürümü bazı ihtiyaçlarımızı karşılamıyor. Mesela CSS‘de şeffaflık için kullanılan opacity etiketinin tarayıcıdan tarayıcıya göre değişen kullanımı mevcut. Örneğin Internet Explorer’da sadece filter: alpha(opacity=50); gibi saçma bir kodla şeffaflık verebilirken diğer tarayıcılarda opacity:.5; vermemiz yeterli oluyor. Üstteki filter etiketini kullanınca da W3C geçerlilik uygulaması hata olduğunu belirtiyor.

Başka bir örnek vermek gerekirse mesela yine CSS 2.1′de olmayan ama CSS 3′de olan border-radius özelliği. Bu özellik sayesinde div‘lerin kenarlarına herhangi bir görsel kullanmadan ovallik verebiliyoruz. Ama bu bir CSS 3 özelliği olduğu için yine W3C geçerlilik testinde hata verecektir.

Arkadaşlar ben bu gibi durumları önemsemiyorum. Çünkü gerçekten bu tür özelliklere ihtiyacımız var ve kullanıyorum. Bu tip hataları kafanıza takıp fanatiklik yapmanın bir gereği yok.

Bir de web standartlarını sayfalarının XHTML ve CSS kodlarının geçerlilik testinden sıfır hata ile geçmesi sanan arkadaşlar var. Bence bu da yanlış bir düşünce.

Web standartları denen kavram çok geniş. İçinde erişilebilirliği, kullanılabilirliği, yapı ve sunumun ayrılmasını, anlamlı kod oluşturmayı vs. gibi alt kavramları barındırır. Geçerlilik testi ise bu alt kavramların altındaki yapı ve sunumun ayrılması ilkesini doğru ve düzenli bir şekilde yapabilmek için sadece ve sadece bir araç. Başka da birşey değil!

Kısacası sitenizin kodlarının geçerli olması demek web standartlarına tamamen uyduğunuz anlamına gelmiyor. Ama unutmamak gerekirki geçerlilik testi çok önemli bir araç ve bunu mutlaka kullanmamız gerekiyor.

Bu yazı Fatih Turan tarafından 22 Eylül 2008 01:29 tarihinde yazıldı. 18 yorum var.

Wordpress 2.7′nin Onaylanan Yeni Özellikleri

Wordpress ekibi bize gösterdikleri yol haritasında Wordpress 2.7′nin 10 Kasım 2008′de çıkacağını söylüyor. Yani yaklaşık 1.5 ay sonra herhangi bir aksilik olmazsa Wordpress 2.7 bizlerle buluşması lazım. Yeni sürümdeki onaylanan özellikleri Wordpress ekibinin baş programcısı Ryan Boren geçenlerde kendi blogundaki yazıda anlattı. Ayrıca Wordpress 2.7′nin geliştirilme aşamalarını sık sık güncellenen bu mikro blogdan da takip edebilirsiniz. Bunu da küçük bir not olarak Wordpress meraklılarına ileteyim.

Wordpress ekibi tarafından onaylanan bazı özellikler şunlar:

1. Yenilenen yönetim paneli.
2. Meta kutularının sürükleme ve bırakmaya izin veren yeni yazı düzenleme sayfası. Kutular daha önceki gibi genişleyebiliyor, katlanabiliyor ve tamamen gizlenebiliyor.
3. İçerik indeks sayfasındaki kolonları gizleyebilme özelliği.
4. İçerik indeks sayfasında yazı ve sayfaları satıriçi düzenleyebilme özelliği (yazıları açmadan düzenleyebilme).
5. Yeni geliştirilen yorum API’si sayesinde yeni geliştirilecek olan uygulamalarla Wordpress panelinizden bağımsız olarak yorumları denetleyebileceksiniz.
6. Yönetim panelinden yorumlara cevap verebilme özelliği.
7. Yorumları düzenlemek için yeni geliştirilen klavye kısayolları.
8. Daha önce Drupal‘da olan ve Wordpress‘in de bazı eklentiler sayesinde (mesela Wordpress Thread Comment eklentisi) yapabildiği iç içe yorum olanağı sağlayan yeni API.
9. Yine Drupal‘da hali hazırda gelen ve Wordpress‘in bazı eklentiler sayesinde (mesela WP-Sticky eklentisi) yapabildiği yapışkan yazı özelliği.
10. Otomatik eklenti kurulum özelliği ve entegre edilen eklenti gezgini.
11. Wordpress 2.6.2 ve aşağısındaki sürümlerde Wordpress Automatic Upgrade eklentisi sayesinde yaptığımız otomatik Wordpress güncellemesini artık yeni sürümde eklenti gerektirmeden yapabileceğiz.
12. HTTPOnly yetki çerezleri.
13. Yeni HTTP istek API’si.
14. sFTP üzerinden kurulum ve güncelleme için yeni SSH2 dosya sistemi soyutlaması (umarım yanlış çevirmemişimdir bu kelimeyi ayrıca İngilizce’si burada duruyor eğer yanlış çevirdiysem lütfen beni uyarın)

Benim şu yukarda yazdığım yeniliklerden en çok 4., 5., 6., 8., 10., 11. maddedeki olanlar hoşuma gitti.

Yani arkadaşlar görüyorsunuz. Yukarıda da bazı özelliklerin Drupal’da daha önceden var olduğunu belirttim. Tamam Drupal ile Wordpress arasında dağlar kadar fark var ama yine de bu denli basit özelliklerin şimdiye kadar Wordpress ile gelmesi gerekirdi.

Umarım Wordpress’in yeni sürümlerinde daha da kaliteli yeni özellikler görürüz.

Hakan Yamanoğlu Wordpress 2.7 Beta’yı canlı olarak test edebilmemiz için kendi sunucusuna kurmuş. Burada yer alan yazıyı okuyarak siz de Wordpress 2.7 Beta’yı canlı olarak deneyebilirsiniz. Teşekkürler Hakan.

Wordpress’in resmi blogunda Wordpress 2.7 Beta 1′in yayınlandığı duyurulmuş. Siz de Wordpress 2.7 Beta 1′i indirip yerel sunucunuzda test edip deneyebilirsiniz.

Bu yazı Fatih Turan tarafından 23 Eylül 2008 01:57 tarihinde yazıldı. 43 yorum var.

JQuery ile Şık Bir Teknik

Fatih Turan ile yaptığımız röportajdan sonra sık sık sohbet eder olduk. Kendisi bir süredir blogunda yeni paylaşım yayımlamıyordu.

Birgün bana tekrar paylaşımlarda bulunmak istediğini söyleyince bende bir atraksiyon yapalım dedim ona ve misafir paylaşımcı olarak birbirimizin bloglarında bu açılışı duyurmak, kutlamak amacı ile birer paylaşımda bulunmaya ve aynı anda yayınlamaya karar verdik.

Fatih Turan, Wordpress İçin SEO İpuçları adlı paylaşımda bulundu.

Ve Benim Paylaşım

Bu paylaşımda sizlere JQuery kullanarak çok basit bir şekilde oluşturabileceğimiz, şık bir teknikden bahsedeceğim. Şık bir teknikten kastımı bizzat kendi gözlerinizle görmek için şu sayfayı ziyaret edebilirsiniz.

Altyapımızı Hazırlamaya Başlayalım

JQuery ile çalışacaksak en öncelikle yapmamız gerekenler, JQuery web sitesinden, JQuery adlı JavaScript kütüphanesinin en son sürümünü indirmek (ben birde dosyanın ismini JQuery olarak değiştiriyorum, daha kısa oluyor) ve

1

<script type="text/javascript" src="jquery.js"></script>

kodunu HTML dökümanımızın head bloğu arasında kullanarak HTML dökümanımıza
jQuery.js dosyasının yolunu göstermek.

Ayrıca örneğimizde CSS ve JQuery kodları geliştireceğimiz için ve hazır head
kod bloğunun içindeyken atacağımız en mantıklı adım

1
2
3

<script type="text/javascript">
 
</script>

ile

1
2
3

<style type="text/css">
* {margin:0; padding:0}
</style>

kod bloklarını açmak ve işimizi görecek bir sıfırlama tekniği kullanmak olacak.

Alternatif olarakda bu paylaşım için başlangıç niteliğinde hazırladığım şu
klasörü bilgisayarınıza indirebilirsiniz.

Ne Yapmak İstiyoruz?

Yapmak istediğimiz şu, belirlediğim bir bağlantıya basılınca sayfanın üst kısmından x yükseklikte bir alanın, şık bir şekilde açılması.

Alan dediğimize göre bir div etiketine ihtiyacımız var.

1

<div id="acilacakAlan"></div>

İsterseniz birde div etiketimize yükseklik ve bir arkaplan rengi verelim.

1

#acilacakAlan {height:240px; background-color:#000}

Sayfamızı açıcak olursak, sayfanın üst kısmında, 240px yüksekliğinde, siyah renkli bir alan göreceğiz.

O zaman sayfamıza birde tetikleyici niteliğinde bir bağlantı ekleyelim ve HTML kısmı ile işimiz bitsin.

1

<a href="#" id="gosterici">Göster</a>

Burada href="#" tanımı önemli, çünkü href="" boş kaldığı zaman a etiketimiz bir bağlantı olarak görülmez ve basılır durumda olmaz, bu nedenle bir # işareti istediğimizi yapmak için yeterli.

JQuery’ye Giriş

JQuery’nin en sevdiğim yanı şu, JQuery geliştirmek için çok fazla bir JavaScript bilgisine sahip olmam gerekmiyor, ya da basit isteklerimi yapmak için sayfalarca kod yazmama gerek yok, önceden tanımlanmış fonksiyonları kullanabiliyorum.

Zaten JQuery’nin sloganı olan, Tasarımcılar için JavaScript, herşeyi anlatıyor.

Çalışmaya Başlayalım

JQuery kodu geliştireceğimiz zaman kullanmamız gereken bir kod var

1
2
3

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

Bu kodun türkçesi “döküman hazır olduğunda” demek, dolayısı ile şimdi bu kod bloğunun içine yazacağımız kodlar döküman hazır olduğunda çalışacak.

Bir defa öncelikle o div‘i gizlemeliyiz sayfa ilk açıldığında gizli olmalı. Yani şöyle birşey demem lazım, acilacakAlan.gizle yani acilacakAlan’ı seçip ona gizlenme komutunu vermem lazım.

$('#acilacakAlan') kodu ile ben o div etiketini seçiyorum ve bu kodun sonuna .hide(); kodunu ekleyerek div etiketine gizlenmesini söylüyorum.

1
2
3

$(document).ready(function() {
$('#acilacakAlan').hide();
});

Sayfamızı açıcak olursak bomboş bir sayfa göreceğiz, güzel.

Bu noktadan sonra yapmak istediğimizi yeniden gözden geçirelim. Ben gosterici adlı bağlantıya tıklandığımda acilacakAlan’ın gözükmesini istiyorum.

O zaman önce gosterici’ye tıklandığı anı bilmem lazım.

1

$('#gosterici').click();

Yukarıdaki kod ile, gosterici bağlantısına tıklandığı bilgisi avcumun içinde, artık acilacakAlan‘ın gözükmesini sağlayacak fonksiyonu yazabilirim:

1
2
3

function() {
$('#acilacakAlan').show;
}

İki kodu birleştirince

1
2
3

$('a#gosterici').click(function() {
$('#acilacakAlan').show();
});

ortaya yukarıdaki kod çıkıyor, bir deneyelim bakalım ne olacak?

Evet bağlantıya basınca alanımız geliyor, ama bir sorun var şu anda alanımız direk açılıyor, hiç bir şıklık ya da güzellik yok.

Oysa ben yukarıdan aşağıya doğru şık bir şekilde açılmasını istiyorum, o zaman ben yanlış bir komut kullanıyorum, aşağıya(down) kaydırmak(slide) için slideDown komutunu deneyelim o zaman.

.show(); yerine .slideDown(); yazalım ve sayfamızı kontrol edelim.

Evet istediğim oldu, ve ayrıca ben

1

.slideDown('slow');

veya

1

.slideDown('fast');

değerlerini kullanarak ya da direk rakam girerek,

1

.slideDown(400);

kayma hızını ayarlayabilirim, dikkat edin metinlerde ‘ kullanıyoruz ama rakamlarda kullanmıyoruz.

.slideDown(); kodunu .slideDown(400); ile değiştirerek kayma hızını 400′e ayarlıyorum.

Ufak Bir Sorun Var

Herşey çok güzel ama ufak bir sorun var, bu alanı açtıktan sonra birde kapatmamız lazım. İsterseniz en baştaki

1

$('#acilacakAlan').hide();

kodunun başına // koyarak onu yorum yapalım ve alanımız direk açık gelsin.

Şimdik alanımızı kapatmak istiyoruz ama yukarıya (up) doğru kayarak (slide) kapanmasını istiyoruz.

.slideDown(400); kodunu .slideUp(400); ile değiştirelim ve, evet, amacımıza ulaşıyoruz.

Ama şimdide şöyle bir durum var az evvel alanı aşağıya doğru kaydırarak açtık şimdi ise yukarıya doğru kaydırarak açtık ama ben aynı bağlantıya ilk defa basıldığında açılmasını tekrar basıldığında kapanmasını istiyorum. Bu işlem için iki ayrı bağlantı oluşturmak istemiyorum.

Sihirli Komut, Toggle

Arkadaşlar JQuery harika çünkü toggle adlı hazır bir fonksiyonu var ve bu fonksiyon tam istediğimizi yapmamızı sağlayacak. Gelin şu şekilde kodumuzu değiştirelim ve sayfamızı kontrol edelim.

1

.slideToggle(400);

Harika değil mi? Toggle ilk basıldığında önündeki (slide) komutu gerçekleştiriyor ve diğer basışta, ilk yaptığının tam tersini yapıyor. Yani Aç Kapa şeklinde düşünebiliriz. Zaten Toggle kelimesinin türkçe karşılığı, iki konumlu düğme demekmiş.

Ne Kadar Kolaymış değil mi?

Artık elimizde şık bir teknik var ve bu tekniği istediğimiz gibi süsleyebiliriz. Ben şu şekilde bir örnek geliştirdim (Arkadaşlar, örneğe sadece FireFox3′de baktım, diğer tarayıcılar için optimize etmedim), Fatih Turan ise, Sinemalardan adlı blogunda (şu anda kapalı olarak test ediliyor yakında açılacak) bu tekniği çok şık bir şekilde kullanmış, kısacası sınır sizin hayal gücünüz, çok efektif ve şık kullanımlar çıkartılabilir.

Umarım sizde ne kadar kolaymış bunu yapmak demişsinizdir, faydalı bir paylaşım oldu ise ne mutlu bana.

Bu yazı Web Deneyimleri adlı blogdan Volkan Görgülü tarafından konuk yazar olarak yazılmıştır.

Bu yazı Fatih Turan tarafından 18 Eylül 2008 12:28 tarihinde yazıldı. 13 yorum var.

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.