Yenilikler

• Forumumuzu kapattık. Çünkü blogun yanısıra forumla uğraşmak gerçekten çok zaman alıyordu. İleride böyle bir ihtiyaç doğarsa ve şartlarda uygunsa yine bir forum açabiliriz.
• Artık yazılarımızdaki fotoğraflar tek bir yerde toplandı. Bu sayede okunulabilirlik sorununu ortadan kaldırdığımızı düşünüyoruz. Yazıların alt kısmında yer alan fotoğraf kutusundan ilgili fotoğraflara hızlıca erişebiliyorsunuz.
• Yazdığınız yorumlarda isimlerinizin yanında artık Gravatar hesabınızdaki size özel avatar gösteriliyor. Eğer avatarınız yoksa bizim varsayılan avatarımız görüntüleniyor. (Gravatar nedir ve nasıl kullanılır bilmek ister misiniz?)
• Artık blogumuza özel Twitter ve Friendfeed hesabımız var. Her ikisiyle de yeni yazılan yazılarımıza kolayca ulaşabileceksiniz (ayrıca Friendfeed’den gelen yorumları da blogumuzda göstermeye çalışacağız).
• Artık yazılarımıza puan verebiliyorsunuz (bu kategoride olan yazılara hariç :)). Verdiğiniz puanlara göre de alttaki “En Popüler Yazılar” kısmı sıralanıyor.
• Az önce de bahsetmiş olduğum blogun altında yer alan “En Popüler Yazılar” kısmının yanısıra, “En Son Yorumlar” ve “Vasat Filmler” bölümü yapıldı. Aslında blogumuzun alt kısmı tamamen yenilendi diyebiliriz. Sizce de alt kısıma güzel bir makyaj oldu değil mi? :)
• Daha iyi okunulabilirlik adına biraz Tipografi düzenlemesi yapıldı.
• Yazılara etiket sistemi getirildi. Artık sağdaki kısımda yer alan “Etiketler” adlı bölümden etiketlere göre de yazıları gösterebiliyorsunuz. Ayrıca her yazının altında da etiketler gösteriliyor. Yine buradan da etiketlere göre ilgili yazılara erişebiliyorsunuz.
• Ekonomik şartlar göz önüne getirerek reklam fiyatlarını makül bir seviyeye çektik. Tamam, ilk açıldığımızdaki sunduğumuz tarifeyi biraz abarttığımızı itiraf ediyorum. :) En azından yeni açılan bir blog için yanlış bir tarife idi. Şimdi daha makül bir seviyede. Yani aylık 30$’a 125×125 piksellik kutularımızın bir tanesine reklamınızı yerleştirebiliyorsunuz. Eğer bu konuda iletişime geçmek istiyorsanız sizi buraya alalım. :)
• Sağdaki 125×125 piksellik reklam kutularının yanısıra okuyucularımızı rahatsız etmeyeceğini düşündüğümüz şekilde Google Adsense reklamları yerleştirdik.
• Arşiv sayfasında eski yazılarımızı liste halinde görüntülemenin dışında oradaki etiket bulutu ile de ilgili yazılara ulaşabiliyorsunuz.
• Eskiden sadece sağ kısımda küçük bir kutu halinde yer alan “Vizyondakiler” kısmı şimdi ayrı bir bölüm haline geldi. Hatta eğer yapabilirsek seans bilgilerine de yine bu bölümden ulaşabileceksiniz. Şimdilik sadece gösterime giren filmler hakkında kısa bilgi ve fragmana erişebiliyorsunuz.
• Blogumuza artık iPhone/iPod Touch ile girerken yazılarımızı daha rahat biçimde okuyabileceksiniz. Bunun için özel bir eklenti kullanıp iPhone/iPod Touch kullanıcılarına daha rahat blog okuma şansı tanıyoruz. Eğer iPhone/iPod Touch’da sitemizi dolaşırken herhangi bir hata ile karşılaşırsanız bize bildirebilirsiniz.

Blogumuzu Destekleyin

Eğer siz de bizim gibi sinema ile ilgili bir bloga sahipseniz karşılıklı olarak bağlantı değişimi yapabiliriz. Bunun için bizimle iletişime geçmeniz yeterli. Öte yandan herhangi bir konuda bir bloga sahipseniz bizi desteklemek adına da blogunuzda bize bağlantı sağlayabilirsiniz. Buna kesinlikle hayır demeyiz ve bunun için şimdiden size teşekkür ederiz.

Blogumuzda herhangi bir hata ile karşılaşmanız durumunda bizimle iletişime geçebilirsiniz. Aynı zamanda blogumuz hakkında yapıcı eleştirilerinizi bu yazıya yorum olarak yazabilirsiniz.

İşte Sürprizimiz!

Blogumuzun tekrar açılışı nedeniyle siz okuyucularımıza küçük bir sürpriz yapmayı düşündük ve bir kişiye bir adet DVD filmi hediye etmek istiyoruz.

Hediyemizi kazanmanız için yapmanız gereken tek şey sinemalardan.com’daki yazımızda yer alan soruyu doğru cevaplandırmak.

Sorumuzu doğru bilenler arasında yapacağımız çekiliş sonucunda DVD’yi kazanan kişiyi 1 hafta sonra açıklayacağız. İyi şanslar!

Bu yazı Fatih Turan tarafından 22 February 2009 23:21 tarihinde yazıldı. 6 yorum var. Sen de yorum yaz.

İşin bitiminden sonra bana Comfydesk’den bir adet Comfydesk Plus model sehpa hediye edildi. Bunun için Comfydesk’deki dostlarımıza ayrı ayrı teşekkür ediyorum. Ve ayrıca Designfabrika sahibi Oğuzhan Aydın’a da. ;) Ben de bunun üzerine blogumda bir yazı yazarak Comfydesk Plus modelini incelemeyi uygun gördüm.

Öncelikle izin verirseniz Comfydesk’in ne olduğunu size anlatmak istiyorum: Comfydesk dizüstü bilgisayarlarımızı kullanırken ortaya çıkabilecek bazı sağlık sorunlarıyla karşılaşmamız için ve konforlu biçimde dizüstü bilgisayarımızı kullanabilmemiz için geliştirilmiş çok fonksiyonlu bir dizüstü sehpasıdır.

Ürün kargo aracılığıyla elime ulaştığında dikkatimi çeken ilk şey web sitesindeki kurumsal kimliğin gerek ürün kutusunda olsun gerek kullanım kılavuzunda gayet tutarlı bir şekilde yansıtılmış olduğuydu. Bu güzel birşey.

Ürün kutusunu açtığımda sehpanın yanısıra kullanım kılavuzu, garanti belgesi ve bana gelen Comfydesk Plus modeli olduğu için bir adet USB kablosu ile karşılaştım. USB kablosunu bilgisayara bağladığımızda hem sehpadaki çift fanı çalıştırabiliyoruz ve hem de fanların arkasındaki 4 adet USB portunu kullanabiliyoruz.

Sehpadaki fanlar gerçekten çok iyi düşünülmüş. Zira dizüstü bilgisayarlar çok kullanıldığında aşırı derecede ısınabiliyor. Eh tabi dizüstü bilgisayarın ısınması zamanla ömrünün kısalmasına yol açıyor. Comfydesk sayesinde bu ısı sorunun üstesinden gelebiliyoruz. Üstelik rahatımızdan ödün vermeden.

Sehpayı kurarken ilk başta biraz zorlandım gibi geldi fakat daha sonra -alıştığımdan olsa gerek- rahatça farklı kullanım şekillerinde deneyebildim. Kurulum aslında basit; sehpanın eklem noktalarında buttonlar eklenmiş bunlara basıp açıları ayarlıyoruz. Ayrıca bu kullanım şekillerinden kullanım kılavuzunda bahsedilmiş. Dilerseniz oradaki açıları kullanarak sehpanızı hızlıca hazır hale getirebiliyorsunuz.

Bu yazımda devamlı Plus modelinden bahsettim ama Comfydesk’in bir de Classic modeli bulunmakta. Classic modelinde fan ve USB portları bulunmamakta. Ama fiyat olarak diğer modelden daha uygun olduğunu söylemem gerek.

Her iki modeli kredi kartı, banka havalesi veya kapıda ödeme yöntemi ile satın alabilirsiniz.

Bu yazı Fatih Turan tarafından 21 January 2009 18:42 tarihinde yazıldı. 12 yorum var. Sen de yorum yaz.

Şahsen ben öyleyim. Devamlı olarak yeni yöntemler keşfederek mevcut düzenimi daha iyiye yönelik geliştiriyorum. Yani şimdiki yöntemimi belkide bir dahaki yıl daha farklı bir biçimde kullanmış olacağım. :) Yine de bu yazımda hali hazırda kullanıyor olduğum mevcut geliştirme düzenimi sizinle paylaşmam yerinde olacağını düşünüyorum.

Projenin Klasör Yapısı

Klasör yapısı web projelerindeki düzeni oluşturmamızı sağlayan önemli etkenlerden biridir. Klasör yapısı ne kadar karmaşık olursa projelerimizi geliştirmek bir o kadar zor olacaktır. Hele bir de ofis çatısında takım olarak çalışıyorsanız işler iyice karmaşık bir hal alabilir. Bu sebepten dolayı takımınızın benimseyeceği, ortak olarak kullanabileceğiniz, akıllı bir şekilde standart klasör yapısını oluşturmanız iyi olacaktır.

Web projelerinde benim oluşturduğum ve kullanıyor olduğum klasör yapım ve açıklamaları aşağıda yer almakta:

Klasör isimlerini İngilizce olarak oluşturdum çünkü XHTML KITCHEN‘da artık yabancılara da hizmet vermeyi planlıyoruz. Siz kendi ihtiyaçlarınıza göre klasör isimlerini Türkçe’de yazabilirsiniz.

İsterseniz yukarıdaki klasör yapısını şablon olarak indirip siz de kendi çalışmalarınızda kullanabilirsiniz.

Projenin Dosya Yapıları

Projelerimizdeki klasör yapısının düzenli olmasının yanısıra dosyalarınızın da düzenli olması tutarlılık ve verimlilik açısından gayet önemli. Bunun için xHTML ve CSS dosyalarınız için size ayrı başlıklar altında tavsiyelerde bulunacağım.

xHTML Dosyaları İçin Tavsiyelerim

• Kodlarınızı TAB tuşunu kullanarak girintili biçimde yazmaya özen gösterin. Girintili kodları okumak daha kolaydır.
• Sayfanızdaki önemli bölümleri xHTML‘de kullanılan yorum etiketi yani <!--YORUM--> ile gruplandırın.
• Beyaz boşluğu en iyi şekilde ayarlayın. Ben genelde xHTML dosyalarımdaki önemli bölümleri yorumlarla ayırmamın yanısıra bir de birer satır boşluk bırakarak ayırmaya çalışırım. Yine okunabilirlik açısından bunu yapıyorum.
• Etiketlere id ve class verirken mantıklı bir isimlendirme yöntemi ile verin. Ben ecnebilerin CamelCase diye tabir ettikleri türde kelimeleri birleşik yazıyorum. Örneğin: <div id="mainContent"></div>. Bunun yanısıra alt çizgi ve tire ile de isimlendirme yapabilirsiniz (yani _ ve - karakteri ile). Örneğin: <div id="main_content"></div> veya <div id="main-content"></div>.

Unutmadan örnek olarak hazırladığım xHTML dosyasının kodunu inceleyebilir ve üstteki tavsiyelerle karşılaştırma yapabilirsiniz.

CSS Dosyaları İçin Tavsiyelerim

• CSS dosyanızın başında hazırladığım örnekteki gibi müşteri ile ilgili isim, editör adı ve tarih/saat gibi bilgiler yerleştirin. Böylece kimin hangi dosyayı ne zaman kim için düzenlediğini belirlemiş olursunuz.
• Yine örnekte görebileceğiniz üzere önemli bölümler için yorumları kullanarak gruplandırma yapabilirsiniz. İşin bu kısmında dikkat ederseniz grup başlıklarında eşittir işareti bulunmakta. Bununla kullandığınız editör ile arama yaparken gruplar arasında kolayca geçebiliyoruz. Kısacası bu eşittir işaretini kullanarak grup adları ile kodlar karışmamış oluyor.
• Web projesindeki sayfaların herhangi bir yerinde kullanılabilecek önemli CSS komutlarını class haline getirip kullanıma hazırlayın. Hazırladığım örnekte Global Classes grubu altında kullanıma hazır 11 tane class vardı.
• Seçici adından önce (yani selector’dan önce) xHTML etiketini yazın. Örneğin: div#header { ... }. Böylece bu kodun xHTML dosyasında hangi etiket için yazılmış olduğunu kolayca görüp anlayabileceğiz.
• Her CSS kodunu tek satırda yazın. Bu CSS dosyanızın boyutunu azaltmakla kalmaz, kodları gözünüzle çok daha rahat tararsınız.
• Daha önce xHTML dosyaları için bahsettiğim TAB tuşu ile girinti oluşturma yöntemini CSS dosyalarınızda da kullanmalısınız.
• Yine daha önce xHTML dosyaları için bahsettiğim beyaz boşluğu iyi ayarlama yöntemini CSS dosyalarınız için de kullanabilirsiniz. Ben CSS dosyalarımda her gruptan sonra üç satırlık boşluk bırakıyorum. Bu da kodları daha okunabilir yapıyor.

Yine örnek olarak hazırladığım CSS dosyasını inceleyebilir ve üstteki tavsiyelerle karşılaştırma yapabilirsiniz.

Benim bilmediğim ve burada yazmadığım, sizin bildiğiniz bu tip güzel tavsiyeleriniz varsa onu yorum yazıp bu yazıya katkıda bulunabilirsiniz.

Bu yazı Fatih Turan tarafından 07 November 2008 22:31 tarihinde yazıldı. 20 yorum var. Sen de yorum yaz.

Şahsen ben bu şekilde web sayfalarımızı geliştirmememiz gerektiğini düşünüyorum. Çünkü:

• WYSIWYG tarzı editörler yeni başlayanlar için genelde kolay gözükmesine karşın arkaplanda ürettiği kodlar bizim kontrolümüz dışında oluşturulur. Bu yüzden bir sürü gereksiz kod ile karşılaşabiliriz.
• Bu gereksiz kodlar yüzünden xHTML ve CSS dosyamızın boyutları artabilir. Aynı zamanda kodların okunulabilirliği de azalır. Okunabilirlik azalırsa, çalışmanızda bir sorun ile karşılaştığınızda profesyonel birinden yardım istemeniz durumunda yardım alma olasılığınız da azalabilir. Şahsen ben forumlarda tablo etiketi ile hazırlanmış, karışık kodlara sahip web sayfalarındaki sorunlarla pek ilgilenmiyorum.
• Gereksiz kodlar aynı zamanda SEO açısından bizim için bir dezavantaj oluşturabilir. Çünkü arama motorları genelde kötü kodlanmış web sayfalarını daha iyi ve sade kodlanmış web sayfalarına göre önemsiz olarak nitelerler (bu konuda bazı istisnalar olabilir).
• Genelde WYSIWYG tarzı editörler web sayfalarını yapı, sunum ve davranış olarak ayırmada (bu konuyu daha sonra ayrı bir yazı olarak ele almayı düşünüyorum) beceriksizdir. Yani oluşturulan xHTML dosyalarınıza CSS ve Javascript kodlarını da katarlar.
• Yine yukarıdaki maddede bahsettiğim arkaplanda yaratılan kodlar otomatik olarak oluşturulduğu için tam olarak ne olduğunu, ne işe yaradığını anlamayabiliriz. Hatta öyle ki bazılarımız -özellikle tembeller xD- “nasıl olsa herşeyi fare ile bir-iki tıkla yapabiliyorum” diye düşünüp hangi etiketin, hangi kodun ne işe yarayıp yaramadığını öğrenme yerine komutları ezberlerler. Kısacası öğrenme ihtiyacı hissetmezler. Sonuçta neyin ne işe yaradığını bilmeden iş yapmış olursunuz ama bir sorunla karşılaştığınızda da kafanızdaki saçlarınızı yolabilirsiniz. xD
• Dreamweaver veya Expression Web gibi WYSIWYG tarzı editörler pahalı uygulamalardır. Neden daha ucuz veya tamamen ücretsiz daha iyi programlar varken bu programları kullanalım ki? Değil mi? :) Ben E Text Editor‘u geçenlerde 35$ karşılığı satın aldım. Böylece uzun bir aradan sonra kod düzenleme aracı arayışıma son verdim. :) Bence siz de kendinize uygun bir kod düzenleme aracını edinin (Mesela Aptana, Notepad++, Komodo Edit, PSPad).

Kısacası web sayfalarını kodlarken WYSIWYG tarzı editörler kullanmayalım. Web sayfalarını kodlarken hangi etiketin, hangi kodun ne işe yaradığını öğrenelim (bunun için Sitepoint‘in çevirimiçi xHTML referansı ve CSS referansı kesinlikle işinize yarayabilir), ezbere gitmeyelim ve tabii ki web sayfalarımızı elle kodlayalım. Bu sayede orta ve uzun vadede siz kazanacaksınız. ;)

Bu yazı Fatih Turan tarafından 31 October 2008 01:01 tarihinde yazıldı. 33 yorum var. Sen de yorum yaz.

Siz de Wordpress ile çalışan blogunuz varsa aşağıdaki iki adımı izleyerek basitçe güncelleme işlemini yapabilirsiniz:

• İlk olarak class-snoopy.php ve version.php‘yi bilgisayarınıza indirin.
• Daha sonra blogunuzun yer aldığı sunucuya FTP üzerinden bağlanın ve az önce indirdiğiniz her iki dosyayı wp-includes adlı klasöre kopyalayın (eski dosyaların üzerine yazacaksınız bu yüzden her ihtimale karşın yine de eski dosyaları yedekleyin).

Güncelleme işlemimiz bu kadar. Çok kolaydı değil mi? :)

Bu yazı Fatih Turan tarafından 24 October 2008 18:12 tarihinde yazıldı. 6 yorum var. Sen de yorum yaz.

Yine de ben kendi blogumda Google Maps API hakkında yazı yazmak istedim. Ne de olsa herkes İngilizce’den anlamıyor. Hem Türkçe kaynak da az bu tür konularla ilgili. Yani bu yazı Nettuts’daki yazının çevirisi olmayacak.

Google Maps API’de Neyin Nesi?

Google’ın interaktif harita servisini yani Google Maps‘ı biliyorsunuzdur. İşte Google Maps API ile de kendi web sitemize veya web uygulamamıza Javascript aracılığıyla etkileşimli harita uygulamalarını yerleştirebiliyoruz.

Google Maps API‘nin o kadar gelişmiş özellikleri var ki insan Google Maps API Demo Galerisindeki örneklere bakınca aklı bitiyor. :) Kısacası Google Maps API ile basit haritaların yanısıra gelişmiş özelliklere sahip harita uygulamaları da oluşturabiliyoruz.

Google Maps API Kurulumu

Kurulum için ilk önce Google Maps API üyelik sayfasından haritayı kullanacağımız alan adına özgü anahtar almamız gerekiyor. Bu anahtar ile haritamız sadece üye olurkenki yazdığımız alan adında çalışacaktır. Aynı anahtar ile başka bir alan adında harita uygulamanız çalışmayacak. Farklı alan adlarında da Google Maps API’yi kullanmak istiyorsanız her farklı alan adı için yeni bir anahtar almanız gerekiyor.

Ben örnek için yukarıdaki ekran görüntüsündeki gibi kendi alan adıma ait bir API anahtarı aldım. Üye olduktan sonra aşağıdaki gibi anahtarınızı, hangi alan adı için aldığınızı ve bir de kullanımına dair küçük bir örnek veriyor.

Google Maps API Kullanımı

Anahtarımızı aldığımıza göre haritamızı sayfamıza entegre edebiliriz. Şimdi bunun için aşağıda bir örnek hazırladım. Eğer isterseniz örneği direkt olarak bilgisayarınızda indirip inceleyebilirsiniz. Örneği inceledikten sonra kodlara dair açıklamaları okuyabilirsiniz.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Google Maps API Örneği</title>
 
<!--META-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Google Maps API Örneği" />
<meta name="author" content="Fatih Turan" />
<meta name="robots" content="index,follow" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="content-language" content="tr-TR" />
<!--/META-->
 
<!--STYLES-->
<style type="text/css" media="screen">
	* { margin:0; padding:0 }
	div#map { width:500px; height:500px }
</style>
<!--/STYLES-->
 
<!--SCRIPTS-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAApJ4fZWusAp4s0nPrMcxM0xRWK7WhrfsCEgcYY7INOmv0f1t97hTy6mNriyUhaj8OkidWbtIeb_t6hA" type="text/javascript"></script>
<script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(41.02407481503792, 40.52083969116211), 14);
      }
    }
</script>
<!--/SCRIPTS-->
 
</head>
 
<body onload="load()" onunload="GUnload()">
<div id="map">
	<noscript><img src="rize.png" alt="Rize" /></noscript>
</div>
</body>
 
</html>

Örnek Açıklaması:

• Satır 20′deki CSS kodu sayesinde haritanın yer aldığı div‘in boyutunu ayarladım.
• Satır 25′de Google Maps API için Javascript dosyasının yolu (direkt Google sunucusundan çağırıyoruz) ve az önce aldığımız anahtarı key adlı değişkene giriyoruz.
• Satır 29′da hangi div elementi üstünde haritayı göstermek istiyorsak onun id’sini yazıyoruz. Ben örnekte map olarak belirledim.
• Satır 30′da haritanın nereyi göstereceğine dair koordinatları belirtiyoruz. Koordinatları belirlemek için birçok yol bulunmakta. Fakat ben size Get Lan Lon adlı aracı öneriyorum.
• Satır 38′de haritanın sayfa yüklendiğinde çalışması için load() fonksiyonunu, sayfadan çıktığımızda bellek sızıntısı oluşmaması için de GUnload() adlı fonksiyonu çağırdım.
• Satır 39′da sayfa üzerinde haritanın gösterileceği alanı div elementi olarak tanımladım.
• Son olarak satır 40′da da tarayıcının Javascript özelliği kapalı olduğunda haritanın statik görselini göstermesi için noscript etiketinden yararlandım. Siz de bu görseli klavyenizden Print Screen tuşu ile alabilirsiniz.

Üstte yer alan maddelerdeki sonuncusunda dile getirdiğim tarayıcıdaki Javascript’in kapalı olma durumunda statik görsel yerleştirme yöntemi yerine yeni farkettiğim daha iyi bir yöntem olan Google Static Maps API‘yi kullanabilirsiniz. Bu konu ile ilgili ayrıntıları daha sonra ayrı bir yazı ile açıklamayı düşünüyorum.

Haritamız Hazır

Nihayet haritamız kullanım için hazır. Az önce tek tek açıklamasını yazdığım örneği şimdi canlı olarak görebilirsiniz.

Ayrıca Google Maps API ile ilgili bir tane daha yazı yazmayı düşünüyorum. Oluşturduğumuz haritayı nasıl daha fazla özelleştirebileceğimize dair bilgiler vereceğim. Şimdilik Google Maps API ile ilgili belgeleri, örnekleri ve uygulamaları incelemenizi tavsiye ediyorum.

Bu yazı Fatih Turan tarafından 21 October 2008 17:07 tarihinde yazıldı. 28 yorum var. Sen de yorum yaz.

Sinemalardan’ın tasarımı, xHTML/CSS kodlaması ve Wordpress’e adaptasyonu benim tarafımdan gerçekleştirildi. Dolayısıyla blogun tamamlanması çok uzun süre aldı. Ayrıca Javascript konusunda da Erhan‘dan birazcık destek aldım. Bu yüzden ona desteğinden ötürü teşekkür ediyorum. :)

Bu arada blogumuzda eksik gördüğünüz veya beğendiğiniz kısımları yorumlarınızla bizimle paylaşırsanız çok memnun olacağız. :)

Şimdi eğer sinema ilgi alanınıza giriyorsa ve blogumuzu beğendiyseniz gelecekte yazdığımız yazıları takip etmek için RSS yayınımıza abone olun. Ayrıca forumumuza üye olup aktif olarak katılım yapmanızı sizden rica ediyoruz. :)

Bu yazı Fatih Turan tarafından 18 October 2008 23:56 tarihinde yazıldı. 14 yorum var. Sen de yorum yaz.

Yazılarımdan birinde aşağıdaki şekilde birazcık alaycı olarak nitelenebilecek bir yorum yazıldığını gördüm. Bu yorumu görünce içimden “Lan kibrit, bu yazıda modern tarayıcılara alternatif bir tarayıcı tanıtmıyoruz. Sadece Linux kullanıcılarının web sayfalarını Internet Explorer 6′da herhangi bir emülator kullanmadan nasıl test edebileceklerine dair bir yöntem anlatıyoruz.” diye düşünüp Bildirgeç‘in yeni özelliği olan yorumlara puan verme özelliğini kullanarak -1 puanı bastım. Evet bunu yaptım! xD

Bir diğer yazımda da yazılan bir yorum üzerine “Aman sen de… B.kun içinde boncuk arıyorsun. Ha Internet Explorer 6 logosu ha Internet Explorer 7 logosu… Ne farkı var?” diye içimden beni düşündüren bir yorum gördüm. Yine -1 puanı bu yoruma bastım. Evet yine yaptım! xD

Sonra birden birşey aklıma geldi. Bildirgeç‘teki yorumlarda yer alan puan verme özelliği olmasaydı az önce her iki yorum hakkında içimden düşündüğüm karşı cevabı sanırım burada yazacaktım. Belki de yazacağım bu cevaplar gereksiz bir yorum olacaktı. Hatta daha sonra yine gereksiz bir sürü polemik ile karşılaşabilecektim. Bu da yorumları okuyanlar için ve benim için boşa vakit harcamaktan başka birşey olmayacaktı. Ne kadar saçma bir durum değil mi?

İşte bu durumdan sonra edindiğim ders oluşturduğumuz arayüzlerle kullanıcıların psikolojisini etkileyebileceğimiz, hatta onları yönlendirebileceğimiz oldu.

Sonuç olarak web tasarımında olsun, web uygulamalarında olsun veya geliştirilen programların arayüzlerinde olsun kendimizi kullanıcı yerine koyup, onun gibi düşünüp bu doğrultuda arayüzleri tasarlamamız gerekli olduğunu düşünüyorum.

Siz de bu tip bir durumla karşılaştıysanız çekinmeden yorumlarda yazabilirsiniz. :)

Bu yazı Fatih Turan tarafından 05 October 2008 13:19 tarihinde yazıldı. 5 yorum var. Sen de yorum yaz.

Şimdi 24 yaşındayım. Küçükken yaşadığımız bayramları göremesem de sağolsun arkadaşlar sayesinde bu bayram çok sıradan geçmedi. Güzel geçti yani. Sağolun beyler!!! xD

Bayramda herkesin yaptığı gibi cep telefonu ile kısa mesaj atmak yerine ben biraz daha çıtayı yükselterek herkese e-posta göndererek bayram tebriği gönderdim. :) Ama göndermediklerim varsa kusuruma bakmasınlar unutmuşumdur veya e-posta listesinde yoktular. Onların da geçmiş bayramlarını kutluyorum. :)

Yaptıklarım kısaca bayramda gezip tozmaktan ibaretti. Peki bundan sonra kısa ve orta vadede neler yapacağım biliyor musunuz?

• Bloguma yeni yazılar yazacağım. Yazılacak listem epey kabarık! :)
• Sinemalardan adlı blogdaki son hataları düzeltip ve eklemeleri yapıp açmayı düşünüyoruz. Çok geciktik biliyorum ama mükkemeliyetçi ruhum beni rahat bırakmıyor! xD
• Burada kullandığım temayı Wordpress 2.7 çıkana kadar test yapmayı düşünüyorum. Wordpress 2.7 çıkışının ardından Emerald’ı da dağıtacağım. Yani az kaldı!
• XHTML KITCHEN‘a yakın zamanda uğramışsanız geçici bir tasarım ile karşılaştığınızı farketmişsinizdir (merak etmeyin bizler iş başındayız ve hala iş alıyoruz! :)). Yeni tasarımı bir öncekinin aksine ben değil ekibimizden Emre Efendioğlu yapıyor. Bu konuda da epey ilerleme kaydettik. Sanırım yakında tasarımı XHTML/CSS‘ye dönüştüreceğiz.
• Blog camiasına da faydasını dokunacağını umduğum bir proje var kafamda (sürpriz!). O projeyi XHTML KITCHEN‘daki arkadaşlarla birlikte yapmayı planlıyorum.
• Eğer bir üstteki maddede anlattığım projeyi yapabilirsem farklı konularda iki tane daha blog açmayı düşünüyorum (bu da sürpriz! xD).

Yapılacak listem de görebildiğiniz üzere bu şekilde. Umarım bir sıkıntı olmaz da bütün bu işleri kazasız belasız atlatırız. Şimdi çalışmaya devam! :)

Bu yazı Fatih Turan tarafından 04 October 2008 14:29 tarihinde yazıldı. 7 yorum var. Sen de yorum yaz.

Ö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 September 2008 19:05 tarihinde yazıldı. 22 yorum var. Sen de yorum yaz.

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 September 2008 17:17 tarihinde yazıldı. 5 yorum var. Sen de yorum yaz.

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 September 2008 01:57 tarihinde yazıldı. 44 yorum var. Sen de yorum yaz.

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 September 2008 01:29 tarihinde yazıldı. 18 yorum var. Sen de yorum yaz.

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 September 2008 23:52 tarihinde yazıldı. 14 yorum var. Sen de yorum yaz.

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 September 2008 12:28 tarihinde yazıldı. 13 yorum var. Sen de yorum yaz.

Az önce blogumu revizyondan geçirdiğimi söylemiştim. Evet blogumda birtakım yenilikler var. Artık benim hakkımda biraz daha ayrıntılı bilgi edinebilecek, tüm yazılarıma arşiv sayfasından erişebilecek, daha önce yapmış olduğum ticari ve serbest çalışmalarımı görebilecek ve yeni keşfettiğim Search Unleashed adlı arama eklentisi sayesinde daha gelişmiş aramalar yapabileceksiniz.

Ayrıca artık sağ tarafta görebileceğiniz üzere bloguma aylık 75$ karşılığı 125×125 boyutunda reklam verebiliyorsunuz. Eğer reklam vermek veya ödeme koşulları hakkında bilgi almak istiyorsanız benimle iletişime geçebilirsiniz.

Kullandığım temamda tasarım olarak da biraz değişiklik yaptım. Mesela artık yazı boyutları daha büyük. Bir önceki sürümde çok küçük olduğunu düşünüp böyle bir değişikliğe gittim. İyi de yaptığımı düşünüyorum. Herkesin gözleri küçük boyutlu yazıları okumaya elverişli olmayabilir. :) Sonra yorum kutularında birtakım ince detaylar ekledim. Bazı çapalarda (anchor) ufak bir kayma efekti ekledim (Opera’da biraz sorunlu ama olsun napalım :)).

Diğer yandan nihayet bir isim verebildim bu temaya. Adı Emerald. Yani zümrüt… Unutmadan söylemem gerekir; Burada kullandığım Emerald adlı temayı bir süre sonra ücretsiz olarak dağıtacağım. Beni izlemeye devam edin. :)

Arkadaşlar yorum ve eleştirilerinize açığım. Aşağıdaki yorum kısmından yorum, eleştirilerinizi ve yakaladığınız hataları yazabilirsiniz.

Bu yazı Fatih Turan tarafından 18 September 2008 01:18 tarihinde yazıldı. 11 yorum var. Sen de yorum yaz.

Bu yazı Fatih Turan tarafından 08 May 2008 16:41 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Oy verme işlemi gayet basit: İlk önce üye kayıt formunu dolduruyorsunuz. Ardından e-posta adresinize hesabınızı etkinleştirmeniz için bir e-posta gönderiliyor ve hesabınızı aktifleştiriyorsunuz. Son olarak da Oy Ver sayfasından oyunuzu kullanıyorsunuz. Bu arada ben yarışmaya teknoloji kategorisi altında katıldığımı söylemeliyim.

Bu yazı Fatih Turan tarafından 21 April 2008 10:53 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Ben bu sorunu Firefox’da Web Tasarım ve Sörf adında iki farklı profil oluşturarak ve bir de Web Tasarımla alakalı eklentileri Web Tasarım adlı profile, Web’de sörf için kullanabileceğiniz eklentileri de Sörf isimli profile aktararak aştım. Böylece Firebug, Web Developer Toolbar gibi ağır eklentiler sörf esnasında Firefox’u boşa yere yavaşlatmıyor. Dolayısıyla bu da performans artışına sebep oluyor.

Profil Yöneticisini Etkinleştirin

İlk olarak Firefox’da profil oluşturmak için profil yöneticisini etkinleştirmemiz gerekiyor. Bunun için de masaüstünüzdeki Firefox’un kısayol özelliklerine gelip aşağıdaki görüntüdeki gibi Hedef yazan satırın içindeki son çift tırnakdan sonra bir boşluk bırakıp -profilemanager yazıyoruz. Ardından Tamam düğmesine basıp pencereyi kapatıyorsunuz.

Profilleri Oluşturun

Şimdi de masaüstündeki Firefox kısayoluna çift tıklayarak profil yöneticisini açın. Profil yöneticisinde hali hazırda default adında bir tane profil bulunması gerekiyor. O profili seçip sol taraftan Kimliğin Adını Değiş düğmesine basarak Web Tasarım adını verin. Daha sonra yine sol tarafdaki Kimlik Oluştur düğmesine basıp Sörf adıyla yeni bir profil oluşturun. Sonuç olarak profil yöneticiniz aşağıdaki gibi olacak:

Eklentilerinizi Kurun

Son adımımızda da eklentilerimizi kurmamız gerekiyor. İşin bu kısmı tabi ki çok basit. Hangi profilde hangi eklentinin yer almasını istiyorsanız profil yöneticisinden onu seçip Firefox Uygulamasını Başlat düğmesine basarak ardından ilgili eklentileri kurun.

Bu yazı Fatih Turan tarafından 13 April 2008 18:59 tarihinde yazıldı. 6 yorum var. Sen de yorum yaz.

Bookmark Duplicate Detector

Bookmark Duplicate Detector adlı eklenti ile Firefox’unuzda aynı yer iminden (bookmark’lardan bahsediyorum) birden fazla var ise bunları bulabilir, silebilir, veya farklı bir yer imleri klasörüne taşıyabilirsiniz.

Düzenli bir yer imleri sistemi istiyorsanız bence bu eklentiyi kullanmalısınız. Çünkü kimi zaman farkında olmadan aynı yer imini birden fazla eklemiş olabiliyoruz. Bu yüzden bu eklentiyi size öneriyorum. Bookmark Duplicate Detector eklentisini buradan indirebilirsiniz.

Customize Google

Google hizmetlerinden hala yararlanmayanınız var mı? :) Bir çok insan Google‘ın hizmetlerini büyük keyif alarak kullanıyor. Tabi bende öyle… :) Customize Google eklentisi ile Google’ın arama hizmeti en başta olmak üzere Gmail, Google Takvim, Google Reader, Google Video gibi hizmetler için ek ayarlar yapabiliyorsunuz.

Mesela Google hizmetlerinin bazılarında sağda gözüken Google Adsense reklamlarını iptal ettirebiliyorsunuz. Veya bu uygulamalarda Https protokolüne geçebiliyorsunuz (güvenlik açısından). Bunun gibi birtakım ek ayarları yapabiliyorsunuz. Customize Google eklentisini buradan indirebilirsiniz.

DownThemAll!

DownThemAll! ile Flashget veya Getright gibi bir başka indirme yöneticisine gerek duymayacaksınız. Çünkü DownThemAll! bu işi çok iyi yapıyor. DownThemAll! eklentisi yüklendiğinde Firefox’un kendi indirme yöneticisi yerine geçiyor ve kullanıma hazır hale geliyor. Bu eklenti ile web sitesi üzerindeki farklı biçimdeki dosyaları (.jpg, .gif, .png, .mp3, .wav, .mpeg, .avi vs. vs.) kolayca indirebiliyorsunuz.

Ayrıca Firefox’un kendi içinde entegre olan indirme yöneticisinde olmayan tekrar indirme özelliğinden (resume) bu eklenti ile faydalanabilirsiniz. DownThemAll! eklentisini buradan indirebilirsiniz.

FaviconizeTab

Birden çok sekme içinde arasında kaybolan kullanıcıların imdadına FaviconizeTab eklentisi yetişiyor. Kullanımı gayet basit: sekmenin üzerine sağ tıklayıp açılan menüden Faviconize komutuna bastığınızda veya eklentinin seçeneklerine girip özel bir tuş ile aynı komutu verdiğinizde 16×16′lık küçük ikonu (favicon) gösterecek şekilde daralıyor. Böylece sekme çubuğunda karışıklığı önlemiş oluyorsunuz. FaviconizeTab eklentisini buradan indirebilirsiniz.

Go To Selection

Go To Selection eklentisi çok basit işlevi olmasına rağmen, kimi zaman çok işe yaradığını söylemeliyim. Web sitesi üzerinde yer alan bağlantı adreslerinde kimi zaman tıklanabilir bağlantı yapılmadığı için o bağlantı adresini seçip kopyalamamız, sonra yeni sekme açmalı ve arından da Firefox’un adres satırına yapıştırmalıyız ki bağlantıya ulaşmış olalım. Nasıl? Tam bir eziyet değil mi? xD

İşte bu eklenti sayesinde bu eziyetten kurtarmış oluyoruz. Bağlantı yazısını seçip ardından sağ tıklayıp New Tab komutunu vermemiz sayfayı açmamız için yeterli oluyor. Go To Selection eklentisini buradan indirebilirsiniz.

Google Not Defteri

Google Not Defteri hizmetini daha önce kullandınız mı bilmiyorum ama benim olmazsa olmaz diyebileceğim bir hizmet. Ve bu hizmeti Firefox tarayıcısı ile beraber kullanmak gerçekten çok işe yarıyor.

Bu eklenti ile web sayfasının herhangi bir yerini seçip Google Not Defteri’ne kaydedebiliyorsunuz. Öte yandan sörf yaparken bazı ufak tefek notlar almak için de oldukça ideal! Google Not Defteri eklentisini buradan indirebilirsiniz.

Line Marker

Line Marker eklentisi ile web sayfasındaki istediğiniz bir metini farklı renklerde boyayabiliyorsunuz. Bu eklentiyi bazı sayfaların tamamını okuyamadığımda, en son kaldığım yeri işaretlemek için kullanıyorum. Tabi siz daha farklı işler için de kullanabilirsiniz. Line Marker eklentisini buradan indirebilirsiniz.

Paste Go

Paste Go, az önce tanıtımı yaptığım Go To Selection eklentisine çok benziyor. Belki de ondan daha da iyi sayılabilir. Çalışma mantığı yine çok basit. Bağlantı verilmemiş adresi seçip kopyalıyorsunuz, ardından Araçlar menüsünden Paste Go komutuna tıklayarak kopyalanan adresi yeni sekmede açmış oluyorsunuz.

Daha kolay bir yöntem için Paste Go düğmesini araç çubuklarınıza da ekleyebilirsiniz. Paste Go eklentisini buradan indirebilirsiniz.

Resizeable Textarea

Bu eklenti ile Safari’deki metin kutularının boyutlarını fare ile yeniden boyutlandırma özelliğini Firefox’a da kazandırmış oluyorsunuz. Bazı bloglarda yorum yazarken yorum kutularının veya bazı formlarda yine metin kutularının boyutları küçük olması canınızı sıkıyorsa (bu durum kimi zaman benim canımı çok sıkıyor) büyük ihtimalle bu eklenti işinize yarar. Resizeable Textarea eklentisini buradan indirin.

Shareacolic

Shareacolic harika bir Firefox eklentisi! Ben sevdiğim web sayfalarını del.icio.us veya ma.gnolia (şimdiki tercihim ma.gnolia) gibi yer imleri hizmetlerine kaydetmeyi seviyorum. Bu eklenti ile del.icio.us ve ma.gnolia’nın dışında digg, tumblr gibi popüler hizmetlere de beğendiğiniz sayfaları ekleyip insanlarla paylaşabiliyorsunuz. Kısaca olmazsa olmaz bir eklenti bu. Shareacolic eklentisini buradan indirebilirsiniz.

StumbleUpon Toolbar

StumbleUpon Toolbar ile bir başka popüler yer imleme sitesi olan StumbleUpon‘da belli konu başlıkları altında rastgele gezinebiliyorsunuz. Yeni web sitelerini keşfetmek için oldukça ideal bir eklenti.

Eklentiyi kullandıkdan sonra onu kullanabilmeniz için StumbleUpon’a üye olmanız gerekmekte. StumbleUpon eklentisini buradan indirebilirsiniz.

Tab Mix Plus

Tab Mix Plus ile Firefox’un sekme sistemini kendinize göre özelleştirebiliyorsunuz. Ayrıca araç çubuğuna ekleyebileceğiniz bir düğme ile en son kapanan sekmeleri tekrar geri çağırabiliyorsunuz. Bu eklenti de yine olmazsa olmaz eklentilerden. Mutlaka kullanmalısınız. Tab Mix Plus eklentisini buradan indirebilirsiniz.

Tab Scope

Tab Scope eklentisi ile sekmeleri açmadan, sekmenin üstüne geldiğinizde sayfanın görüntüsünü küçük bir şekilde görebiliyorsunuz. Kimi zaman işe yarayabiliyor. Tab Scope eklentisini buradan indirebilirsiniz.

Bu yazı Fatih Turan tarafından 11 April 2008 19:38 tarihinde yazıldı. 6 yorum var. Sen de yorum yaz.

Üstteki görsellerin soldakine dikkatlice bakın. Alias kelimesindeki l harfi i harfine göre biraz daha yukarıya kaymış. Yine aynı şekilde Alias kelimesinin sonundaki s harfi de yukarıya doğru kaymış.

Şimdi üstteki görsellerin sağdakine dikkatlice bakın. Soldaki gibi harf oynamaları yok. Çünkü Character paletindeki Anti-Alias yöntemi olarak Smooth seçilmiş durumda.

Benim gibi ayrıntılara önem veren bir kişiyseniz bu ipucu işinize yarayabilir. Zira ayrıntılar önemlidir. :)

Bu yazı Fatih Turan tarafından 11 April 2008 14:00 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Bu mimin konusunu başlıkdan muhakkak anlamışsınızdır ama ben yine de Süleyman Sönmez’in kendi anlatımıyla tekrar edeyim:

En sevdiğiniz filmden, sevdiğiniz sahneyi bulup ekliyorsunuz, fotoğraf olabilir, video olabilir. Elbette “fair use /centilmence kullanım” başlığıyla. İşi abartmadan uzun bir parça koymadan, telif haklarını çiğnemeden. (Mesela şarkıların bile 20 – 30 sn’si uluslararası anlaşmalarla tanıtım için çaldırılabiliyor.)

Benim Tercihim

Çağan Irmak‘ın yönettiği Babam ve Oğlum adlı film gerçekten harikaydı. Ben sinemada çok severek izlemiştim. Bence bu filmin en etkileyic sahnesi aşağıdakiydi. Çetin Tekindor‘un o ağıtındaki sesi ne kadar etkileyici… İzleyin:

Başka, Başka?

Umudunu Kaybetme‘deki baba ve oğulun imkansızlıklardan dolayı şehirdeki bir tuvalette kaldıkları sahne etkileyiciydi. Will Smith ve küçük partneri bu filmde gerçekten iyi iş çıkarmışlar. :)

Sonra, Kanlı Elmas adlı filmde çocukların eline tutuşturulan silahlarla bir köyü basması bu filmin en etkileyici sahnesiydi. Bu tür olaylar gerçek hayatta da Afrika’da oluyor mu bilemiyorum ama eğer oluyorsa çok vahim bir durum olduğu gerçek.

Aslında aklımdaki sahnelerin video ve fotoğraflarını bulabilsem daha güzel olacakdı ama sadece Babam ve Oğlum filmindeki sahnenin videosunu Youtube‘da bulabildim. Diğerlerini bulamadım.

Gitsin Paslar, Gelsin Mimler :)

Bu yazımın sonunda ben de bir kaç arkadaşıma pas atmak istiyorum: Muhammet Sevim, İsmail Altuntaş, Erhan Burhan, Eray Endeş.

Sınavdan sonra görüşmek üzere… :)

Bu yazı Fatih Turan tarafından 02 April 2008 17:23 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Tekrar Eden Eklem İncinmesi (RSI) Nedir?

Türkçe Wikipedia’da bu hastalığı araştırdım fakat herhangi bir bilgi bulamadım (İngilizce Wikipedia’da ayrıntılı bilgi mevcut). Yine de Ekşi Sözlük’de yazılan maddelerden alıntılar yaparak sanırım size bu hastalığın ne olduğunu anlatabilirim. xD

repeated strain injury. cok mouse/klavye kullanan veya cok yazi yazan insanlarda gorulen hastalik. el ve bilekte sizi, uyusma veya bu eylemlerin yapildigi zamanlarda siddetli agri baslica semptomlaridir. #

hastalığın hangi aşamada farkedildiğine bağlı olarak şiddeti ve etkisi değişen, aşırı durumlarda geri dönüşü olmayan, bazı durumlarda senelerce tedavi gerektiren, klavyeden mouse’tan force feedbackli joystickten adamı uzak tutan ve acı çektiren bir hastalık. en kötüsü de çevrenin hastalığı hafife alması veya empati kuramaması sonucu kişinin girdiği bunalım, suçluluk psikolojisi, doğaya ve tendonlara isyan. bu noktada başkasının yalancısıyım.

kısaca repetitive strain injury ve fakat repeated da denebilir niçin denmesin, ben olsam derim. #

uzun sureli bilgisayar kullanicilarinin mutlaka dikkat etmesi gerektigi, mesleki hayatlarini iskenceye donusturebilecek cok tehlikeli olmasa da aci cektirici hastalik. sadece bilekte degil parmak, dirsek, omuz, boyun, sirt ve belde olusan rahatsizliklari da kapsar.

en iyi cozum daha rahatsizliklar baslamadan workpace, rsiguard, workrave, stretch break tarzi sizi bilgisayar kullanirken kil kil rahatsiz eden ama aslinda her seyi sizin icin yapan programlari kullanmaktir. bende olmaz demeyin, sansinizi denemeyin, rahatsizliklar basladiktan sonra iyilesmek daha zor oluyor ve bu programlarin soylediklerini yapmamak sizi hizla basa donduruyor. #

Nasıl sizce de ciddiye alınacak hastalığa benziyor değil mi? xD

Workrave’de Neyin Nesi?

Workrave daha önce bir Linux dağıtımlarında gördüğüm Typing Break (Yazım Molası) adlı özelliği ile temelde aynı mantığa sahip bir program. Fakat Workrave biraz daha farklı özellikleri bünyesinde barındırıyor.

Workrave ile:

• Kısa süreli molalar verebilir
• Dinlenme molası verebilir
• Günlük kullanma sınırı verebilir
• Molalar arası verilen talimatlar ile egzersiz yapabilir
• Molalar, Fare ve klavye kullanımı hakkında detaylı istatistiklerinize bakabilirsiniz

Workrave’in bütün ayarlarını programı çalıştırdıkdan sonra aşağıda sistem tepsisinde (Windows işletim sisteminde saatin yanında) beliren simgeye sağ tıklayıp Tercihler’e basıp açılan pencereden yapılıyor.

Workrave’i İndirin

Workrave’in şu anda Windows ve Linux sürümleri mevcut. Bu sürümlere download sayfasından erişebilirsiniz. Malesef Mac kullanıcıları için bu program yok ama onun yerine yine Mac’de kullanabileceğiniz Timeout adlı program bulunmakta. Arabirimi daha farklı olmakla beraber programın mantığı yine aynı.

Bu yazı Fatih Turan tarafından 27 February 2008 18:45 tarihinde yazıldı. 6 yorum var. Sen de yorum yaz.

Eleştirilerim

Bir sonraki yıl için tekrar düzenlenmesi düşünülen bu yarışma için bazı eleştirilerim olacak. Umarım bir sonraki yarışma için yaşanan aksilikler tekrarlanmaz. Eleştirilerim ise şunlar:

• Sürekli yapılan takvim değişiklikleri ve verilen tarihlere sadık kalınmaması gerçekten çok can sıkıcıydı.
• Yarışma sitesinin hem tasarımı hem de bilgi olarak çok zayıf kalmış. Bu yüzden bazı basit şeyleri e-posta aracılığıyla sormak zorunda kalmıştım. Halbuki bir sıkça sorulan sorular sayfası yapılsa ve orada basit sorulara cevap yazılsa çok daha iyi olacaktı.
• Eleme aşamasında eğer yanılmıyorsam sitelerin W3C (x)html ve css geçerlilik testinden geçmesi gerekiyordu (büyük bir oranla da olsa). Ama birçoğu web standartlarıyla uzaktan yakından ilişkisi olmamasına rağmen elemeden geçmişti. Hatta birinci seçilen site bile W3C geçerlilik testinden kalıyor (xhtml, css). İkinci seçilen site de yine geçerlilik testlerinden kalıyor (xhtml, css).
• Yarışmaya katılan bazı siteler elemeden geçtikden sonra kapanmış fakat nedense hala listede yer alıyordurlar. Bu tür şeyler yarışmanın ciddiyetini zeddeleyeceğini düşünüyorum.
• Yarışmaya katılan bazı siteler gerçekten çok komikti. Yani kimi site ne ortalama bir görselliğe sahip ne de doğru düzgün kodlanmıştı. Hatta içlerinde ücretsiz alan adlarına sahip siteler de vardı! xD
• Yarışmanın halk oylaması esnasında sunulan oylama arabirimi gerçekten çok kötüydü. Sitelerin en azından bir ekran görüntüsüne sahip olması gerekirdi.
• Şimdi somut bir örnek sunamayacağım fakat bazı siteler hazır şablonlarla yapılmıştı.

Herşeye rağmen böyle bir organizasyonun yapılması iyi olmuş. Ayrıca bana oy veren (vermeyenlerin de canı sağolsun xD) arkadaşların hepsine teşekkür ediyorum. Sağolun, varolun. :)

Bu yazı Fatih Turan tarafından 13 February 2008 15:58 tarihinde yazıldı. 12 yorum var. Sen de yorum yaz.

Firefox 3′ün çıkmasıyla birlikte birçok yenilikde bizlerle buluşuyor. Bu yenilikler arasında CSS için iyileştirmeler de bulunuyor. Bunlar arasında anlayabildiklerimi aşağıda sizin için sıraladım:

• Display özelliğinin inline-block ve inline-table değerleri tamamlandı
• Daha önce sadece Windows’da çalışan the font-size-adjust özelliği artık bütün platformlarda çalışıyor.
• Color özelliği için rgba() ve hsla() desteği eklendi.
• :default pseudo-class eklendi
• Width, min-width ve max-width özelliklerine -moz-max-content, -moz-min-content, -moz-fit-content, ve -moz-available değerleri eklendi.
• HTML için yumuşak tire (­) desteği eklendi
• Ime-mode özellik desteği eklendi.
• Text-rendering adlı CSS özelliği HTML için destekleniyor.
• -moz-border-*-start ve -moz-border-*-end CSS özellikleri tamamlandı.
• Bütün CSS özelliklerinde -moz-initial değeri tamamlandı (quotes ve -moz-border-*-colors hariç).
• Bütün desteklenen CSS özelliklerinde window.getComputedStyle() artık destekleniyor.
• content özelliğinin none değeri tamamlandı

Daha önce söylediğim gibi bunlar sadece CSS için dökümanlaştırılan iyileştirmeler. Firefox 3 ile birlikte çok daha fazla yenilik geliyor. Bütün bu yenilikleri inceleyebilir veya Firefox 3 Beta 2 portatif sürümü yükleyerek bilgisayarınızda Firefox 3′ü daha da yakından deneyebilirsiniz.

Bu yazı Fatih Turan tarafından 31 December 2007 15:26 tarihinde yazıldı. 4 yorum var. Sen de yorum yaz.

Karakter Paleti

Type Tool’u kullanırken yazdığınız yazıya dair bir çok seçeneği aşağıdaki görüntüde yer alan Character adlı palet ile ayarlıyoruz. Bu palet eğer sizde kapalı ise Window menüsünden Type-Character veya klavyeden CTRL+T tuşlarına basarak açabilirsiniz.

Karakter paletinde yazı tipini (1), yazı stilini (2), yazı boyutunu (3), satır aralığı (leading) (4), espas (kerning) (5), harf aralığı (tracking) (6), yatay boyutlandırma (7), dikey boyutlandırma (8), referans çizgisi (baseline) (9), karakter döndürme (10) gibi seçenekleri ayarlayabiliyoruz.

Seçenek Paleti

Ayrıca yazımızın rengini (1), kenar çizgisinin rengini (2), kenar çizgisinin kalınlığını (3), yazının şeffaflığının (4) yanısıra az önce yukarıda anlattığım karakter paletindeki seçeneklerin bir kısmını buradan yani ekranın üstünde beliren seçenek paletinden de ayarlayabiliyorsunuz.

Paragraf Paleti

Paragraf paleti ile Illustrator’de tek satır olarak yazdığınız yazıların aksine, paragraf halinde yazdığınız yazıların seçeneklerini ayarlayabiliyorsunuz. Bu palet genellikle karakter paletinin hemen yanında bulunur. Fakat sizde görünmüyorsa Window menüsünden Type-Paragraph komutu ile veya klavyeden ALT+CTRL+T tuşları ile bu paleti açabilirsiniz.

Paragraf paletindeki seçenekler ile paragrafınızı sola hizalayabilir (1), ortaya hizalayabilir (2), sağa hizalayabilir (3), paragrafı her iki tarafa yaslayıp paragrafın son satırını sola hizalayabilir (4), paragrafı her iki tarafa yaslayıp paragrafın son satırını ortaya hizalayabilir (5), paragrafı her iki tarafa yaslayıp paragrafın son satırını sağa hizalayabilir (6) veya bütün paragrafı her her iki tarafa yaslayabilirsiniz (7).

Ayrıca paragrafa soldan (8) ve sağdan (9) girinti vermenin yanısıra ilk satır için de girinti (10) verebilirsiniz.

Type Tool Alt Araçları

Type Tool (1) dışında yine yazı yazma ile alakalı fakat biraz daha farklı fonksiyonlara sahip alt araçlar mevcuttur. Bunlar Area Type Tool (2), Type On A Path Tool (3), Vertical Type Tool (4), Vertical Area Type Tool (5), Vertical Type On A Path Tool (6) araçlarıdır.

Area Type Tool

Bu araç ile ekranda hazır şekillerle (örneğin Rounded Rectangle Tool veya Ellipse Tool ile çizilen şekiller) veya path tool ile birleştirilmiş (veya kapatılmış diye tabir edebiliriz) biçimde çizilen şekillerin içinde yazı yazmamızı sağlar. Type Tool gibi direkt sahneye tıklayıp yazınızı yazamazsınız. Eğer öyle yapmayı denerseniz size hata mesajı olarak “You must click on a non-compound, non-masking path to create text inside a path” belirecektir. Tekrar ediyorum bu aracı kullanabilmeniz için sahnede bir birleştirilmiş bir path olan bir şekil olması veya çizmeniz gerekir.

Yukarıdaki örnekde görüleceği üzere en üstte Ellipse Tool ile çizilen yuvarlak şeklin içi Area Type Tool ile yazı ile doldurulmuş. Hemen altında ise Rounded Rectangular Tool ile çizilmiş oval kutuyu Area Type Tool ile nasıl doldurulacağı gösteriliyor.

Bunu yapmak gayet basit; ilk önce sahneye örneğin Rectangular Tool ile (klavye kısayolu M’dir) bir kutu çizin. Sonra Area Type Tool ile çizdiğiniz kutunun kenar çizgisinin hemen kenarına geldiğinizde fare imleci yukarıdaki görüntüdeki gibi değişecek. Ardından istediğiniz bir yazıyı buraya girebilirsiniz.

Type On A Path Tool

Bu araç ile sahnede çizilmiş herhangi bir path üstünde (pathler nasıl yapılır bilmek istiyorsanız Pen Tool’u tanıtan bir önceki yazımı okuyun) yazı yazabiliriz. Yine bir önceki Area Type Tool gibi sahneye tıklayıp direkt kullanamıyoruz. Bu aracı kullanabilmemiz için sahnede önceden bir path çizmemiz gerekir.

Yukarıdaki örnekde görebileceğiniz gibi path üzerine yazılmış bir yazı bulunmakta. Hemen altında da görebileceğiniz üzere bir path bulunmakta. Bu pathin üzerine geldiğinizde fare imleci şekil değiştirecek ve o anda pathin üzerine tıklarsanız yazınızı artık onun üzerinde yazabileceksiniz. Yine kullanımı gayet kolay değil mi? :)

Vertical Type Tool

Bu araç ile aşağıdaki örnekde de görebileceğiniz üzere dikey olarak yazı yazabiliyoruz.

Kullanımı yine gayet basit. Vertical Type Tool’u seçtikden sonra sahnemizde istediğimiz yere tıklayıp yazımızı dik olarak yazıyoruz.

Vertical Area Type Tool

Bu aracın çalışma mantığı Area Type Tool ile hemen hemen aynı. Tek farkı yazıyı yatay olarak değil dikey olarak yazması.

Kullanımı Area Type Tool’a çok benziyor. Aynı örneği bu araç içinde uygulayabiliriz; Rectangular Tool ile (klavye kısayolu M’dir) bir kutu çizin. Sonra Vertical Area Type Tool ile çizdiğiniz kutunun kenar çizgisinin hemen kenarına geldiğinizde fare imleci yukarıdaki görüntüdeki gibi değişecek. Ardından istediğiniz bir yazıyı buraya dikey olarak girebilirsiniz.

Vertical Type On A Path Tool

Bu araç da az önce anlattığım Type On A Path Tool’a çok benziyor. Tek farkı harfleri farklı bir açıda daha doğrusu path üzerine göre dikey olarak yerleştirmekdedir.

Kullanımına dair Type On A Path Tool’daki örneği vermek istiyorum; ilk önce sahnede bir path çizin. Sonra bu pathin üzerine geldiğinizde fare imleci yukarıdaki görüntüdeki gibi şekil değiştirecek ve o anda pathin üzerine tıklarsanız yazınızı artık onun üzerinde yazabileceksiniz.

Bu yazı Fatih Turan tarafından 30 December 2007 14:29 tarihinde yazıldı. Hiç yorum yok. Sen de yorum yaz.

Değişikliklerden bahsetmem gerekirse;

• Artık yorum yazdıkdan sonra önizleme yapabiliyorsunuz
• Alt kısımdaki bölümlerin başlıklarına ilgili hesaplarıma bağlantı koydum ve isimlerini daha açıklayıcı biçimde yazdım
• Alt kısımdaki Bildirgeç yazılarımı kaldırıp onun yerine en son dinlediğim 4 müzik parçasını gösteren listeyi koydum
• Alt kısımdaki fotoğraflarımı blogumdan ayrılmadan artık görebiliyorsunuz
• Sağda yer alan kenar notlarının Rss beslemesini tekrar çalışır hale getirdim (lütfen tekrar abone olunuz xD)

Oh be! Dünya varmış! xD Bütün bu sıkıntıları atlattığıma göre artık blogumda yeni yazılar yazmaya devam edebilirim.

Bu yazı Fatih Turan tarafından 26 December 2007 11:57 tarihinde yazıldı. 2 yorum var. Sen de yorum yaz.

Daha önceden de farklı yerlerde bu yarışmaya üç adet çalışma ile katıldığımı söylemiştim. Birinci gönderdiğim çalışma şu anda üzerinde bulunduğunuz bu blog, ikinci gönderdiğim çalışma İmaj Digital Fotoğrafçılık adlı web sitesi, üçüncü ve son olarak da geçenlerde burada tanıttığım Xhtmlmutfağı adlı projemizi gönderdim.

Şimdi efendim bu üç çalışmayı eğer beğendiyseniz sizden onlara güzelce puanlar vermenizi istiyorum. :) Bunu yapmak için ilk önce yarışmanın yer aldığı web sitesine uğruyorsunuz. Ardından Yeni Kayıt yazan bağlantıya basıp hemen üye oluyorsunuz ve sonra e-posta adresinizle giriş yapıp Halk Oylaması bağlantısı ile oy vereceğiniz sayfaya gelip istenilen çalışmaya (benim çalışmalarımın sıra numarası şöyle: 33, 48 ve 97) istenilen puanı veriyorsunuz. Durum bundan ibaret. :)

Bu yazı Fatih Turan tarafından 15 November 2007 19:23 tarihinde yazıldı. 15 yorum var. Sen de yorum yaz.

Pen Tool Neden Bu Kadar Önemli?

Pen Tool Illustrator’un (ve diğer vektörel/raster 3çizim programlarının) olmazsa olmaz bir aracı. Çünkü serbest formdaki çoğu çizimler bu araç ile yapılıyor. Illustrator’de bir logo veya vektörel türde çizim yapmak istiyorsanız Pen Tool’a iyi derecede hakim olmalısınız. Örneğin en son yaptığım vektörel çizimimini dış çizgi kipinde (outline mode) bakınca bütün çizgilerin Pen Tool ile çizildiğini göreceksiniz.

Pen Tool Nasıl Kullanılır?

Illustrator’de Pen tool ile çizim yaparken bir kalem gibi sürekli çizgi çizerek değil, bağlantı noktaları (anchor point), yön noktaları ve çizgiler aracılığıyla çizimleri oluşturuyoruz (aşağıdaki görselde bunu gösterdim).

1. Bağlantı Noktası

Bağlantı noktası (anchor point) diye tabir ettiğim noktalar yukarıda da görüldüğü gibi çizgileri (yani Path’leri) oluşturan noktalardır. Bu noktaların iki farklı çeşidi vardır. Birincisi köşe noktalarıdır. Bunlar çizginin yönünü belirler. Diğer ikincisi ise yumuşak noktalardır. Bunlar ise çizginin eğim noktasını yani eğimin hangi noktada oluşacağını belirler. Aşağıdaki görüntüde bu iki bağlantı noktası tipini görebilirsiniz:

Herhangi bir köşe noktasını yumuşak noktaya dönüştürmek için CONVERT ANCHOR POINT TOOL aracını (klayveden SHIFT+C ile) kullanabilirsiniz. Aşağıdaki görüntüdeki gibi bu aracı seçip (SHIFT+C) ile köşe noktasının üzerine gelip hangi yönde eğim vermek istiyorsanız o yönde farenizi çekiyorsunuz.

2. Yön Noktası

Yön noktası bir önceki maddede açıkladığım yumuşak noktaların hangi yöne doğru ve ne kadar eğim verileceğini belirleyen noktalardır. Yön noktasını kullanmak için araç kutusundan DIRECT SELECTION TOOL’u (klavyeden A tuşu ile) seçip ardından hangi yumuşak noktanın eğimini ayarlamak istiyorsanız o noktayı seçiyoruz ve sonra aşağıdaki göründüdeki gibi hangi yönde ve ne kadarlık eğim vermek istiyorsak fare ile yön noktasını eğimi veriyoruz.

3. Çizgi (Path)

En az iki bağlantı noktası ile oluşan çizgilere denir. Çizgileri eğer dolguya (fill) dönüştürmek istiyorsanız ilk bağlantı noktası ile son bağlantı noktasını birbirine bağlamanız gerekmektedir. Aşağıdaki görüntüdeki gibi bu işlemi en son bağlantı noktasının üzerine PEN TOOL ile gelip işaretçinin yanında yuvarlak simgesi geldiğinde tıklayarak yapabilirsiniz.

Önerilerim

Pen tool ile daha iyi çizim yapabilmek için bol bol pratik yapmak gerekiyor. Bunu herhangi bir ücretsiz stok fotoğraf sitesinden alabileceğiniz fotoğraf üzerinde veya çizim yeteneğiniz var ise kendi çiziminizi tarayıcı ile bilgisayara aktarıp üzerinde pen tool ile çalışabilirsiniz. Belki bazı eğitselleri uygulayarak da pratik yapabilirsiniz. Yeterki bol bol pratik yapın. Unutmayın ne kadar çok pratik yaparsanız Pen tool’a o kadar hızlı alışırsınız.

Bu yazı Fatih Turan tarafından 02 November 2007 18:08 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Projemizin tasarımını ve genel işleyişini Web 2.0 özütüne uygun olarak yapmaya çalıştık. Altyapısını da kendi yapımımız olan bir CMS ile yaptık. Arkadaşlarla ilk projemiz olduğu için sistemde ufak tefek hatalar olabileceğini belirtmek isterim. Eğer sizin de gözünüze çarpan herhangi bir hata var ise bize iletişim formu aracılığıyla bunu bildirebilirsiniz. Ayrıca bu çalışma ile W’07 web tasarım yarışmasına katılıyorum. :)

Bizimle Çalışırken Elde Edeceğiniz Avantajlar

Aslında yukarıda da birazcık değindiğim avantajlara ek olarak bizimle çalışırsanız şu avantajları elde edebileceğinizi söyleyebilirim:

• Güncel tarayıcılarda uyumlu sayfalar
• Arama motorları için optimize edilmiş sayfalar
• El ile yazılılarak düzenli kodlanmış sayfalar
• Size sunduğumuz özel panel ile siparişlerinizi rahatça takip edebilirsiniz

Ayrıca bu konu hakkında daha fazla bilgiye XHTMLMUTFAĞI üzerinden de erişebilirsiniz.

XHTMLMUTFAĞI Nasıl Çalışıyor?

İlk önce sipariş formunu doldurarak bize web tasarımınızı ve siparişiniz ile ilgili bilgileri iletiyorsunuz. Ardından biz sipariş bilgilerinizi ve tasarımınızı kontrol ediyoruz. Herşey yolunda ise size siparişinizin onaylandığına dair bir e-posta yollayıp ödemenizi gerçekleştirebileceğiniz banka hesabını veya sipariş verirken Paypal‘ı seçtiyseniz Paypal üzerinden ödeme ekranı için bir bağlantı sunuyoruz. Ödemenizi yapıyorsunuz ve ardından dekont bilgilerinizi bize ulaştırıyorsunuz. Eğer tasarımınız çok karışık veya teknik anlamda herhangi bir eksiklik var ise sizinle iletişime geçip bunu bildiriyoruz.

Sonrasında bize seçtiğiniz zaman tercihine göre (standart süre 3 gün) bir süre veriyorsunuz. Biz de o süre içinde tasarımınızı mutfağımızda pişirip size sunuyoruz. :)

Ya Ücretler Ne Alemde?

XHTMLMUTFAĞI‘ndaki her işi ben ve arkadaşlarımla beraber en üst kalitede yapmaya özen gösteriyoruz. Kaliteden ödün vermemek adına fiyatlarımızı da tatminkar bir seviyede tutmak zorunda olduğumuzu düşünüyoruz. Bu yüzden aşağıdaki fiyat tarifesi ile bu işe başlamayı uygun bulduk:

• XHTML/CSS Çevirimi: 249$
• XHTML/CSS Çevirimi + Wordpress Tema Entegrasyonu: 498$
• XHTML/CSS Çevirimi + XT-Commerce Tema Entegrasyonu: 848$

Ayrıca ilk sayfadan sonraki sayfalar 75$ olarak ücretlendiriliyor.

Söz Sizde…

Biz bu girişimi Türkiye’de başlatmış bulunuyoruz. Peki siz XHTMLMUTFAĞI adlı projemiz hakkında ne düşünüyorsunuz? Hadi bana ne düşündüğünüzü söyleyin. :)

Bu yazı Fatih Turan tarafından 24 October 2007 12:45 tarihinde yazıldı. 19 yorum var. Sen de yorum yaz.

Geçersiz Yazılmış Ve İmi (“&”)

• Örnek: a href=”foo.php?chapter=1&section=2
• Geçerlilik Testi Rapor Sonucu: Unknown entity (bilinmeyen varlık).
• Çözüm: & karakterinden kaçınıp onun yerine daima & kullanın. Ayrıca diğer karakterlerin yazılışını XHTML Character Entity Reference sayfasında bulabilirsiniz.
• Doğru Kullanım Şekli: a href="foo.php?chapter=1&section=2

Elementlerin Yanlış Yuvalandırılması

• Örnek: <strong><em>…</strong></em>
• Geçerlilik Testi Rapor Sonucu: Missing </em> tag (</em> etiketi kayıp).
• Çözüm: Etiketleri doğru yerde, yani iç içe kapatın.
• Doğru Kullanım Şekli: <strong><em>…</em></strong>

DOCTYPE’ın Küçük Harf Yazılması

• Örnek: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
  "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
• Geçerlilik Testi Rapor Sonucu: Missing DOCTYPE (DOCTYPE Kayıp).
• Çözüm: DOCTYPE tanımlamasını büyük harfle yazın.
• Doğru Kullanım Şekli: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Kapanış Etiketi(“/”) Kayıp

• Örnek: <img src="image.gif" width="100" height="100"alt="Logo">
• Geçerlilik Testi Rapor Sonucu: Missing closing tag (kapanış etiketi kayıp).
• Çözüm: img, input, br gibi “boş elementler” olarak çağrılan etiketlerin sonu bir boşluk ve “/” ile kapatılmalı. Bütün XHTML elementlerin kodlarını bu sayfadan görebilirsiniz.
• Doğru Kullanım Şekli: <img src="image.gif" width="100" height="100"alt="Logo" />

Etiketlerin Büyük Harf Yazılması

• Örnek: <STRONG><EM>…</EM></STRONG>
• Geçerlilik Testi Rapor Sonucu: There is no such element (Sözkonusu element orada yok)…
• Çözüm: Bütün element ve özelliklerini küçük harf ile yazın.
• Doğru Kullanım Şekli: <strong><em>…</em></strong>

Tırnaklandırılmamış Özellik Değerleri

• Örnek: <td rowspan=3>
• Geçerlilik Testi Rapor Sonucu: Missing quotation marks (tırnak işaretleri kayıp).
• Çözüm: Bütün özellik değerleri tırnaklandırılmalı.
• Doğru Kullanım Şekli: <td rowspan="3">

Bu yazı Fatih Turan tarafından 28 September 2007 21:12 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Ve Güzel Bir Sürpriz

Şimdi düşünüyorum da güzel bir sürpriz ile karşılaşmayalı uzun zaman olmuş. Sağolsun Fatih abim(aynı zamanda adaş oluyoruz xD) geçen hafta bana sürpriz yaparak Kütahya’dan güzel bir hediye gönderdi: bir duvar saati! Aşağıdaki fotoğraflarda onu görebilirsiniz.

Bunu ilk gördüğümde çok şaşırmıştım. Çok da hoşuma gitti. Seramik ürünler üstüne kaliteli baskı alınabildiğini de görmüş olduk. :)

Son Projelerimiz

Bu ay içinde Trabzon’u turistik açıdan tanıtan bir dergi hazırladık. Daha tam bitmiş sayılmaz ama büyük bir kısmı bittiğini söyleyebilirim. Bu benim InDesign’da ilk ciddi çalışmam oldu. Bakalım herhangi bir aksaklık olmaz ise sonucu göreceğiz. İlk olduğu için bayağı bir acemilik yaşadığımı itiraf etmeliyim. :)

Bir de Temmuz ayından beri üstünde çalıştığımız bir başka projemiz var. Bu da son aşamaya geldi. Ufak tefek eksikleri tamamlanınca hemen açmayı ve sizlere tanıtmayı düşünüyoruz. Şu an için bu konuda başka bir ayrıntı vermek istemiyorum.

Bu yazı Fatih Turan tarafından 25 September 2007 13:26 tarihinde yazıldı. 5 yorum var. Sen de yorum yaz.

Peki Ne Yapabiliriz?

Birazdan kullanımını anlatacağım Dean Edwards‘ın 22KB’lik IE7 adlı Javascript betiği sayesinde Internet Explorer 6 ve aşağı sürümlerinin(5, 5.5 sürümleri) daha fazla web standartlarına uymasını sağlayabilirsiniz.

Bu betik sayesinde Internet Explorer 6 ve aşağı sürümlerinde her element üzerinde CSS ile :hover, :focus, :active gibi pseudo sınıf ve elementlerini kullanabilecek, şeffaf PNG dosyalarını farklı bir Javascript betiği veya CSS hilesine ihtiyaç duymadan kullanabilecek, W3C kutu modelini standart ve garip(quirks mode) modlarının her ikisinde de kullanabileceksiniz.

Bunlar betiğin ilk göze çarpan özellikleri idi. Daha detaylı bilgiye buradan erişebilirsiniz.

Kullanım Kılavuzu

İlk adım olarak IE7_0_9.ZIP dosyasını buradan indirip kullanmak istediğiniz çalışmanızdaki dosya klasörüne atıyorsunuz ve bütün dosyaların ie7 klasöründe olduğundan emin olun(bakınız). Eğer dosyaları farklı bir klasöre atacak olursanız, bir sonraki adımda belirttiğim yolu değiştirmelisiniz.

Sonra bu betiği kullanmak için aşağıdaki kodu meta etiketlerinin hemen sonrasına(eğer sonrasına yerleştirmezseniz bizarre bug denilen bir hata ile karşılaşabilirsiniz) yerleştirin.

1
2
3
4

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

Bu noktada dikkat edecek olursanız Conditional Comments denilen şartlı HTML yorumları ile Internet Explorer 7′nin aşağısındaki sürümlerde(6, 5.5, 5) bu betiğin yüklenmesini söyledik. Böylece sadece Internet Explorer 5, 5.5 ve 6′da bu betik çalışacak. Bu betiğin Internet Explorer 7′de çalışmasının pek bir anlamı yok. Zira Internet Explorer 7 zaten web standartlarını destekliyor. Ayrıca bu şartlı yorumların kullanımını daha sonra ayrıntılı olarak anlatmayı düşünüyorum.

Şeffaf PNG’lerin Kullanımına Dair Küçük Bir Not

Şeffaf PNG dosyalarını kullanırken dosya isimlerinizin sonuna -trans eklemeyi unutmayın. Örneğin elimizde deneme.png adlı dosya var ise deneme-trans.png olarak değiştirmelisiniz.

Sonuç

Son olarak sizin için bir örnek hazırladım(Internet Explorer 6′da betik aktifken bakın ve bir de betik pasifken bakın). Artık web standartlarını daha fazla destekleyen bir Internet Explorer’ımız oldu.

Bu yazı Fatih Turan tarafından 18 September 2007 13:37 tarihinde yazıldı. 9 yorum var. Sen de yorum yaz.

Aardavark

Aardavark eklentisi ile sayfa üzerindeki HTML etiketlerini görebiliyoruz, bunların HTML kodlarını inceleyebiliyoruz ve sayfamızdan geçici olarak HTML etiketlerini kaldırabiliyoruz(R.I.P eklentisi ile HTML etiketlerini tamamen kaldırabilirsiniz). Kullanışı da gayet basit: hangi sayfada kullanmak istiyorsanız, o sayfa da sağ tıklayıp START AARDAVARK komutuna uyguluyorsunuz ve eklenti çalışmaya başlıyor. Ardından da klavyedeki kısayolları kullanarak istediğiniz işlemi yapabiliyorsunuz. Bu kısayolları ve ne işe yaradıklarını öğrenmek için Aardavark eklentisi etkinken klavyeden H düğmesine basmanız yeterli. Eklentiyi kapatmak için de Q kısayol tuşunu kullanabilirsiniz.
Aardavark eklentisini bu sayfadan yükleyebilirsiniz.

Colorzilla

Colorzilla eklentisi ile sayfa üzerindeki herhangi bir nesnenin rengini HEX veya RGB kodu olarak alabilirsiniz. Ayrıca COLOR PICKER komutu ile renk seçim penceresini açıp oradan da renk seçimi yapabilirsiniz. Colorzilla eklentisini yüklediğinizde Firefox’un durum çubuğunun solunda simge olarak yerleşecektir. Simge üzerine sol fare tuşu ile birkez basınca renk seçim aracı açılır ve sayfa üzerinde herhangi bir nesneye basarak rengi belirleyebilir, sağ fare tuşuyla basınca da açılan menüden renk kodunu HEX veya RGB olarak alabilirsiniz. Colorzilla eklentisini bu sayfadan yükleyebilirsiniz.

CSS Viewer

CSS Viewer eklentisi de sıkça kullandığım eklentiler arasında. Bu eklenti ile sayfa üzerindeki nesnelerin temel CSS özelliklerini görebilirsiniz. Kullanımı yine çok basit: ARAÇLAR menüsünden CSS VIEWER komutuna birkez basınca CSS Viewer eklentisi aktif hale geliyor ve sayfa üzerinde nesnelerin üzerlerine gelip CSS Viewer kutusunda temel özellikleri görebiliyorsunuz. CSS Viewer’ı kapatmak için yine ARAÇLAR menüsünden CSS VIEWER komutuna basıyoruz. CSS Viewer eklentisini bu sayfadan yükleyebilirsiniz.

Firebug

Firebug benim en sık kullandığım Firefox eklentisidir. Bu eklenti web tasarımcı ve geliştiricileri için adeta bir ilaç! xD Çünkü Firebug sayesinde sayfanızdaki HTML ve CSS etiketlerini görüntüleyebilir, anında düzenleyebilir ve Javascript betiklerinizde yer alan hataları gözlemleyip yok edebilirsiniz. Ayrıca ağ monitörü özelliği(Firebug’daki NET sekmesi) ile sayfanızla ilişik diğer dosyaların yükleniş anında kaç KB olduğunu, kaç saniyede yüklendiğini ve ilişik dosyaların yüklenip yüklenmediğini görebilirsiniz. Firebug eklentisi yüklendiğinde Firefox’un durum çubuğunun sağında simge olarak yerleşecektir. Bu simgeye basarak Firebug penceresini açabilir, aynı zamanda kapatabilirsiniz. Firebug eklentisini bu sayfadan yükleyebilirsiniz.

HTML Validator

HTML Validator eklentisi de bana göre en az Firebug kadar gerekli bir eklentidir. Bu eklenti sayesinde sayfanızın HTML kurallarına uygun olup olmadığını öğrenebilirsiniz. Bu eklenti yüklendiğinde yine Firebug gibi Firefox’un durum çubuğunun sağında simge olarak yerleşecektir. Html Validator eklentisini bu sayfadan yükleyebilirsiniz.

IE Tab

IE Tab eklentisi ile Firefox’dan ayrılmadan sayfanızı Internet Explorer motoru ile aynı veya yeni bir sekmede açabilirsiniz. Bu eklentiyi kurduğunuzda Firefox’un adres satırının yanında simge olarak yerleşecektir. IE Tab eklentisini bu sayfadan yükleyebilirsiniz.

Measure It

Measure It eklentisi ile sayfanızdaki nesnelerin genişlik ve yüksekliğini piksel cinsinden öğrenebilirsiniz. Bu eklenti yüklendiğinde Firefox’un durum çubuğunun solunda simge olarak yerleşecektir. Measure It eklentisini bu sayfadan yükleyebilirsiniz.

Screengrab

Screengrab eklentisi ile sayfanızın bütününü veya görünen kısmını PNG olarak kaydedebilir ya da direkt kopyalayıp hafızaya alabilirsiniz. Bu eklenti kuruldukdan sonra Firefox’un durum çubuğunun sağında ikon olarak yerleşecektir. Simge üzerine basıp SAVE veya COPY menülerinin altındaki komutları uygulayarak bu eklentiyi kullanabilirsiniz. Screengrab eklentisini bu sayfadan yükleyebilirsiniz.

Split Browser

Split Browser eklentisi sayesinde Firefox sayfanızı yatay veya dikey olarak bölümlere ayırabilirsiniz. Bu sayede iki sayfayı karşılıklı görebilme şansına erişeceksiniz. Split Browser eklentisini bu sayfadan yükleyebilirsiniz.

Web Developer Toolbar

Web Developer Toolbar eklentisi yine benim açımdan “olmazsa olmaz” denilebilecek Firefox eklentileri arasına giriyor. Bazı işlevleri açısından Firebug’a benzemesinin yanısıra ondan çok daha fazla işlevi bulunmakta. Bu eklenti yüklendikden sonra Firefox’a yeni bir araç çubuğu olarak yerleşiyor. Web Developer Toolbar eklentisini bu sayfadan yükleyebilirsiniz.

Yet Another Window Resizer

Yet Another Window Resizer eklentisi sayesinde tarayıcınızı 640×480, 800×600 ve 1024×768 gibi boyutlara değişebiliyorsunuz. Bu eklentiyi kullanmak için sayfanızda sağ fare tuşuyla açılan menüden RESIZE WINDOW’ın altındaki komutlardan istediğiniz bir boyutu seçmeniz gerekiyor. Yet Another Window Resizer eklentisini bu sayfadan yükleyebilirsiniz.

Bu yazı Fatih Turan tarafından 03 September 2007 17:56 tarihinde yazıldı. 10 yorum var. Sen de yorum yaz.

Adım-1

İlk adımda kullanmak istediğimiz bir deseni seçiyorsunuz. Ben Kaliber10000 sitesinden bu deseni örneğimizde kullanmak için seçiyorum ve bilgisayarıma kaydediyorum.

Adım-2

Photoshop’a geçip CTRL-O kısayol tuşlarına basarak az önce kaydettiğimiz desen dosyamızı açıyoruz. Sonra CTRL-A kısayol tuşlarına basıp aşağıdaki görüntüdeki gibi desenin tamamını seçili hale getiriyoruz.

Adım-3

Desen seçili iken aşağıdaki görüntüdeki gibi EDIT menüsünden DEFINE PATTERN komutunu uygulayıp desenimize bir isim verdikden sonra OK düğmesi ile desenimizi Photoshop’a aktarmış oluyoruz.

Adım-4

CTRL-SHIFT-N kısayol tuşları ile yeni bir katman(layer) açın. Sonrasında deseni döşeyeceğimiz boş bir dosyayı CTRL-N kısayol tuşları ile açıyoruz. Ardından SHIFT-F5 kısayol tuşlarına basarak FILL penceresini açıyoruz. Buradaki USE listesinden PATTERN’ı seçiyoruz. Ve son olarak aşağıdaki görüntüdeki gibi daha önce seçmiş olduğumuz desene basıp OK düğmesi ile desenimizi arkaplana döşemiş oluyoruz.

Sonuç

Desenimiz aşağıdaki görüntüdeki gibi döşenmiş olacak. Ayrıca burada bir not düşmek istiyorum. Dört maddelik anlattığım bu işlemde deseni bütün bir dosyanın boyutuna döşemiş olduk. Eğer siz istiyorsanız araç kutusundaki RECTANGULAR MARQUEE TOOL(M) ile kendi yaptığınız şekillerede aynı yöntem ile deseninizi döşeyebilirsiniz.

Biraz Daha Ayrıntı İster misiniz?

Desenlerle uğraşmak gerçekten zevk verici bir iş. Hadi bu işe biraz daha ayrıntı katalım.

Adım-5

Desenin bulunduğu katmanın(layer) bir altında bulunan BACKGROUND adlı katmanını PAINT BUCKET TOOL(G) veya farklı bir yöntem ile siyaha(#000000) boyayalım. Ardından aşağıdaki gibi desenin bulunduğu LAYER’ı seçip SHIFT-ALT-H tuşu ile desenin bulunduğu katmanın BLENDING MODE ayarını HARD LIGHT’a çevirelim.

Adım-6

D kısayol tuşuna basarak renkleri standart değere yani siyah ve beyaza çevirin. Sonra araç çubuğundan GRADIENT TOOL(G)’u seçip aşağıdaki görüntüdeki ayarları uygulayın. Yani REFLECTED GRADIENT’i seçin.

Adım-7

Desenin bulunduğu katmanı seçip ardından LAYERS paletinin altında bulunan ADD LAYER MASK düğmesine veya LAYERS menüsünden LAYER MASK-REVEAL ALL komutunu uygulayın. Desenin bulunduğu katmana maskeyi ekledikden sonra aşağıdaki görüntüdeki gibi GRADIANT TOOL(G) ile sayfanın ortasından soluna doğru geçiş oluşturuyoruz.

Sonuç

Böylece desenimiz aşağıdaki gibi sadelikden kurtarmış olup daha farklı bir görünüme kavuşacak.

Bu yazı Fatih Turan tarafından 30 August 2007 18:05 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Kaliber10000

Kaliber10000 desen kaynakları arasındaki en çok beğendiğim kaynakdır. Çünkü bana göre en özgün desenler burada sergileniyor. Ama tek eksiği var o da bazı kullanıcıların desenleri ticari olarak kullanmaya izin vermemesi. Buna uyup uymamanız yine size kalmış fakat ben her zaman bu kurala uyuyorum(sadece desenler için değil, ikonlar, yazıtipleri, stok fotoğrafları vs. vs. için de uyuyorum).

Kaliber10000‘de ‘Pixel Pattern List’ adında, kullanıcıların oluşturduğu desenleri görebiliyorsunuz. Burada herhangi bir desenin üzerine basınca, sağ kısımda o desen açılıyor. Ayrıca aynı kullanıcının diğer desenlerini de yine sağ alt kısımdan görebiliyorsunuz.

Deseninizi buradan almak için de az önce bahsettiğim sağ kısımdan önizleme için açılan desene basarak, açılan pencereden deseni dosya olarak farklı kaydedebilir veya kopyala-yapıştır yöntemi ile tasarımınızı geliştiriyor olduğunuz programa aktarıp direkt desen olarak kullanabilirsiniz(desenleri Photoshop’da nasıl kullanılacağını bir sonraki yazımda yazacağım).

Tile Machine

Tile Machine‘de bayağı bir güzel desenler yer almakta. Fakat buradaki güzel desenlerin arasında dandik olanları da olmuyor değil. Yine de iyi bir kaynak ve sıkça başvurmak gerekebilir.

Buradaki desenleri almak için Kaliber10000‘de uyguladığımız taktiğin aynısını kullanacağız. Yani farklı kaydet komutu veya kopyala-yapıştır yöntemi ile deseni alabilirsiniz.

The Inspiration Gallery

Buradaki desenler her ne kadar duvar kağıdı diye geçse de, desen olarak da kullanabildiğimiz için buraya yazmak istedim. Bir de buradaki desenler diğer kaynaklardaki desenlerden daha farklı. Örneğin buradaki örgü desenlerine bakın. Harika değil mi?

Buradaki desenleri almak diğer yöntemlere göre daha basit. Yukarıda görülen herhangi bir kategoriye girdikden sonra istenilen desenin altındaki ‘Download’ bağlantısına basarak .zip dosyasını bilgisayarınıza indiriyorsunuz. İşlem bu kadar basit.

bgMaker’s Gallery

Çok öncesinde desen kaynakları arasında ilk rastladığım kaynak bgMaker’s Gallery idi. Öte yandan Kaliber10000‘den sonra itibar ettiğim ikinci kaynak da budur.

Buradan da deseni almak gayet basit. Beğendiğiniz desenin altındaki ‘download’ düğmesine basarak, .png dosyasını bilgisayarınıza kaydediyorsunuz.

Peki Ben Bunları Nasıl Kullanacağım?

Bu yazıyı okuyan ve web tasarımında desenlerin kullanımını bilmeyen arkadaşlarımız yazının sonunda bu soruyu sormuş olabilirler. Ben bu sorunun cevabını bir sonraki yazımda vermeyi düşünüyorum.

Bu yazı Fatih Turan tarafından 29 August 2007 17:11 tarihinde yazıldı. 7 yorum var. Sen de yorum yaz.

Yeni Birşeyler Var mı?

Tabii ki! Hemen kenar notlarından bahsedelim. Burada internette gördüğüm küçük haberleri, yararlı ipuçlarını ve ilginizi çekebilecek konularla ilgili küçük bir not ve bağlantı olarak burada yazacağım. Bir de kenar notları için ayrıca bir RSS beslemesi oluşturdum. Yani kenar notlarını RSS okuyucunuzdan ayrıca takip edebilirsiniz.

Tasarım konusunda sadeliği ön plana çıkardım ve küçük ayrıntılara da yer verdim diyebilirim. Öte yandan blogda flickr, bildirgeç, last.fm ve twitter gibi sosyal öğelere de blogumda yerini aldı.

Ayrıca Share This eklentisi sayesinde yazılarımı sosyal yer imleme sitelerine(bunlara yerli yer imleme siteleri de dahil) kaydedebilir veya arkadaşlarınıza e-posta yoluyla kolayca yollayabilirsiniz.

Ayrıntılar

Blogun tasarımını xhtml ve css’ye çevirirken elimden geldiğince web standartlarına uygun ve semantik açıdan doğru biçimde kodlamaya çalıştım.

Söylemeden geçemeyeceğim. Internet Explorer’ın bana çektirdiği çile için Microsoft’daki mühendis beylere selamımı(!) söylüyorum. xD Internet Explorer için web sayfası hazırlamak gerçekten tam bir eziyet. Herneyse bunun öcünü almak için bir ara, boş vaktimde bloguma Internet Explorer 6 ile girenler için bir uyarı sayfası tarzında birşey yapmayı düşünüyorum. Maksat web standartlarını en iyi hangi tarayıcı destekliyorsa kullanıcıları da o kazansın(Tabii ki Firefox! xD).

Son Söz

Son olarak bir önceki sürümdeki gibi geç aralıklarla değil, tam tersi sık aralıklarla burada yazı yazmayı planlıyorum. Hangi konu başlığı altında yazacağımı söylemeye gerek yok diye düşünüyorum. Çünkü kategorilerde bunun ipucunu zaten verdim. :) Bir de eski yazılarımdan birkaç tanesini yeniden burada yayımladım. Herneyse, sözü fazla uzatmadan ilk yazımı sonlandırmak istiyorum. Tekrar görüşmek üzere. ;)

Bu yazı Fatih Turan tarafından 27 August 2007 20:52 tarihinde yazıldı. 20 yorum var. Sen de yorum yaz.

Hadi Başlayalım

İlk adımda File menüsünden New komutu ile veya CTRL+N kısayol tuşuna basıp aşağıda görülen ayarlarla yeni bir dosya açıyoruz.

Sonrasında araç kutusundan elips aracını seçip, Artboard(veya sayfa diyebiliriz)a SHIFT tuşunu basılı tutarak bir daire çiziyoruz.

Araç çubuğundan bıçak aracı(knife tool)u seçip ardından aşağıda görüldüğü gibi dairenin sağ üst kısmını ALT+SHIFT tuşunu basılı tutarak düzgün bir şekilde kesiyoruz.

Araç çubuğundan seçim aracı(selection tool)u seçip az önce kestiğimiz bölümü DELETE tuşu ile siliyoruz.

Sayfamızdaki çemberi CTRL+C ile kopyalayıp CTRL+V ile sahnemize tekrar yapıştırıyoruz. Yani çemberi çoğaltıyoruz. Daha sonrasında çemberlerin pozisyonlarını da aşağıda görüldüğü şekilde ayarlamamız gerekiyor. Bunu rahatlıkla yapmamız için dış çizgi moduna(Outline Mode) CTRL+Y tuş kombinasyonu ile geçiş yapıp çemberlerin pozisyonunu Selection Tool(kısayol tuşu V)’la ayarlıyoruz ve işimiz bitince yine CTRL+Y ile dış çizgi modundan(Outline Mode) çıkıyoruz.

Şimdi ise alt kısımdaki dairemize Selection Tool(kısayolu V) ile bir kere tıklayıp seçili olmasını sağladıkdan sonra CTRL+C ile kopyalayıp bu sefer CTRL+F ile yapıştırıyoruz. Bu arada belirtmeliyim ki CTRL+F tuş kombinasyonu, CTRL+C ile kopyalanan nesnenin ait olduğu orijinal pozisyona yapıştırmaya yarıyor.

Az önceki kopyalama işlemini tamamladıkdan sonra Layer paletine bakacak olursak(eğer layer paleti sizde görünmüyorsa Window menüsünden Layers komutu veya F7 tuşu ile açabilirsiniz) üç tane Path geldiğini göreceğiz. Ortadaki Path’i, yani ikinci Path’i aşağıdaki görüntüdeki gibi yukarıya doğru sürükleyip en yukarda yer almasını sağlayın. Veya Layer paletinden ortadaki Path’i seçip Object menüsünden Arrange>Bring to front komutu ile de aynı işlemi yapabilirsiniz. Bu işlemi de yaptığınızda sayfamızdaki nesnelerimiz bu görüntüdeki gibi görülmesi gerekiyor.

Aşağıdaki görüntüye bakacak olursak Layer Paletindeki Pathlerin yanlarında küçük çemberler olduğunu göreceksiniz. Bu adımda CTRL tuşunu basılı tutarak ortadaki ve üstteki Path’in yanındaki çemberlere basarak sayfamızdaki nesneleri seçmiş olacağız. Bu işlemi SHIFT tuşunu basılı Selection Tool(kısayolu V) ile her iki nesneye tıklayarak da yapabilirsiniz.

Object menüsünden Clipping Mask>Make komutu veya CTRL+7 tuşuna basarak maskemizi uyguluyoruz. Bu işlem sonucunda sayfamızdaki nesnemiz aşağıdaki gibi olmalı:

Layer paletindeki ilk Path(bu sayfadaki dairemiz oluyor)’i seçip, ekranın üstündeki kontrol paletindeki Fill kısmından White, Black adlı Gradient’e tıklayarak siyah beyaz gradient ile boyanmasını sağlayın. Sonuç aşağıdaki gibi olmalı.

Şimdi bu siyah beyaz rengi biraz değişelim. Büyük dairenin seçili olduğundan emin olun(üstteki resimdeki gibi). Ardından Swatches ve Gradient paletinin her ikisini de açın(eğer açık değilseler Window menüsü altındaki Gradient ve Swatches komutu ile açabilirsiniz). Aşağıda görüldüğü gibi Swatches paletindeki sol taraftaki koyu turuncu rengi(pumpkin) Gradient paletinin sol kutusuna bırakın ve yine aynı işlemi sağ tarafdaki açık turuncu rengi(squash) Gradient paletindeki sağ kutuya bırakın.

Bu işlemi tamamladıkdan sonra çalışmamız şu halini alması gerekiyor:

Şimdi ise üst dilimi renklendirmek için Layer Paletinde bir grup var ve bunun içindeki Path’i seçiyoruz(aksini belirtmediğim takdirde seçimi iptal etmeyin yoksa ilerdeki adımlarda problem çıkabilir ve eğer yanlışlıkla seçimi iptal ederseniz yine bu adımı tekrar edip üst dilimin seçilmesini sağlayın). Grubu açmak için aşağıdaki görüntüde işaretlenen aşağı oka basmanız gerekiyor.

Üst dilimi seçtikden ekranın üstündeki kontrol paletindeki Fill kısmından “White, Black” adlı Gradient’e tıklayarak siyah beyaz gradient ile boyanmasını sağlayın.

Araç kutusundan Gradient Tool(kısayolu G)’u seçin ve aşağıda görülen çizgi doğrultusunda fareyi sürükleyip bırakın.

Gradient Paletine geçip en sağdaki kutuya çift tıklayarak Color Paletine ulaşın ve oradan K renk kaydıracının değerini %50′ye ayarlayın.

CTRL+A ile bütün nesnelerimizi seçip ekranın üstündeki kontrol panelinde bulunan Stroke özelliğine girip aşağıda görülen görüntüdeki gibi ‘[None]‘yi seçerek dış çizgilerimizi yok ediyoruz.

Son olarak elde edeceğimiz görüntü aşağıdaki gibi olacak:

CTRL+A ile bütün nesnelerimizi seçip araç kutusundan Rotate Tool veya klavye kısayolu olan R tuşuna basarak 90 derece sağa doğru döndürün. Ve üzerine aşağıdaki gibi istediğiniz bir yazıtipi ile yazınızı yazın. İşte bu kadar. Elde edeceğimiz sonuç aşağıdaki gibi olacak.

Bu yazı Fatih Turan tarafından 25 August 2007 18:28 tarihinde yazıldı. 5 yorum var. Sen de yorum yaz.

Photoshop’un arabirimine alışıksanız, Illustrator’ün de arabirimine çok rahatlıkla alışabilirsiniz. Çünkü her iki programında arabirimi neredeyse aynı. Sonuçta ikisi de Adobe’nin elinden geçmiş. Şimdi Illustrator’un arabirimine bir göz atalım:

Arabirim

Aşağıdaki görüntüye baktığımızda solda birtakım araçların yer aldığı araç kutusu, sağda paletler, üstte kontrol paleti ve ortada artboard(sayfa) bulunmakta.

Ekrandaki paletlerimiz ve araç kutumuzu yine Photoshop’daki gibi TAB tuşu ile gizleyip gösterebiliyoruz. Eğer SHIFT+TAB tuşlarına basacak olursak sadece paletlerimizi gizleriz. Paletlerimizi ve araç çubuğunu kendinize göre uygun bir biçimde yerleştirdikden sonra üstteki menüden WINDOW-WORKSPACE-SAVE WORKSPACE komutunu çağırdıkdan sonra bir isim vererek çalışma alanındaki paletlerin ve araç çubuğunun pozisyonlarını kaydedebiliriz. Bu komut paletlerin yerlerini karıştırınca veya istemeden kapatınca tekrar eski istediğimiz düzende geri götürebilmek için gayet yararlıdır. Eğer paletlerin konumunu Illustrator’un ilk açılışındaki gibi ayarlamak istiyorsanız WINDOW-WORKSPACE-DEFAULT’u seçmeniz yeterlidir.

Ayrıca ekranımızda daha fazla yer açmak için her defasında F tuşuna basarak menü çubuğu ile tam ekran, tam ekran ve standart görünüme geçiş yapabilirsiniz. Bu size daha ferah bir çalışma ortamı sunar.

Araç Kutusu

Araç çubuğunda az önce birtakım araçların yer aldığından bahsetmiştik. Bu araçların altında yine Phohoshop’da olduğu gibi(ne kadar çok benzerlik olduğunu görüyorsunuz sanırım) alt araçlar bulunmakta. Örneğin aşağıdaki görüntüdeki gibi araç kutusundaki düğmelerin altında küçük bir ok işareti(A) var ve o düğmeyide basılı tutunca, o aracın altında gizlenmiş farklı araçların var olduğunu göreceksiniz.

Alt araçları açınca en sağda yine küçük bir ok işareti(B) bulunur ve buraya basarsanız yukarıda görüldüğü gibi araçları açık halde bırakabilirsiniz. Eğer sıkça kullandığınız araçlarınız var ise bu şekilde bir yol izleyerek Illustrator’u daha rahat bir şekilde kullanabilirsiniz.

Kontrol Paleti

Kontrol paleti ekranın en üstünde bulunan, seçilen araca veya nesneye göre, seçilen öğenin temel özelliklerini ayarlamanızı sağlayan en önemli paletlerdendir. Bu paletle sayfamızdaki öğelerin temel özelliklerini(stroke, brush, yazıtipi büyüklüğü, x-y konumlandırma, genişlik-yükseklik vs…) belirleyebiliriz.

Kontrol paletinin konumunu ise en sağdaki küçük ok ikonuna tıklayarak açılan menüden ayarlıyoruz. Aşağıdaki görüntüde açılan menüdeki komutlardan Dock To Bottom’a basarsak palet en aşağıya, Dock To Top’a basarsak üste gelir.

Paletler

Paletlerlede yine az önce anlattığım ekranın üstünde yer alan kontrol paleti gibi sayfada seçilen öğelerin özelliklerini belirlemeye yarar. Paletleri WINDOW menüsü altındaki komutlarla açıp kapatabilirsiniz.

Aşağıdaki görüntüye bakacak olursak bazı paletlerin başlıklarının solunda aşağı ve yukarı ok ikonu(A) bulunmakta. Buna basarak paleti genişletip ek fonksiyonları görebiliyorsunuz. Ayrıca paletlerin sağ üst köşesinde küçük bir ok ikonu(B) bulunmakta ve bu ikona basıldığında bir alt menü açılmaktadır.

Menü Çubuğu

Her programda olduğu gibi Illustrator’un da birçok komutunun yer aldığı çubukdur. İlerde mümkün olursa buradaki önemli komutları bir kaç yazı halinde anlatacağım.

İlk Tercihlerinizi Belirleyelim

Adobe Illustrator’un arabirimine kısa bir gezinti yaptıkdan sonra şimdi de işinize yarayacağını düşündüğüm bazı ufak tercih ayarlamalarını göstermek istiyorum. Illustrator’un tercihlerine girmek için CTRL+K veya ekranın üstündeki menüden EDIT-PREFERENCES komutuna basmanız gerekiyor. Ardından aşağıdaki gibi bir ekran belirir. Tercih sayfalarında dolaşmak için PREVIOUS ve NEXT düğmelerini veya bu pencerenin sol-üst köşesindeki listeyi kullanabilirsiniz.

Şimdi sol üst köşedeki listeden Units&Display Performance’ı seçerek tercih sayfasının en altındaki kaydırma çubuğunu göreceksiniz. Burada Hand Tool(el aracı) kullanırken, Illustrator’un çalışmanızı daha net veya daha hızlı güncellemesi için ayar bulunmakta. Sıkı bir Illustrator kullanıcısı çalışmasını oluştururken Pen Tool(kalem aracı), Zoom Tool(büyütme aracı) ve Hand Tool(el aracı) üçlüsüne sık sık başvurur. İşin Hand Tool(el aracı) kullanma kısmında bilgisayarınız eğer yavaşsa Illustrator’de hantallaşma başlar. Bu da kullanıcı açısından problem oluşturur(en azından benim için yavaşlık en büyük problemlerdendir). Aşağıdaki görüntüdeki gibi bu ayar ile oynayarak Illustrator’un ekranı daha hızlı(Faster Updates) veya daha kaliteli(Full Quality) güncellemesini belirlersiniz.

Yine bir performans için küçük bir ipucu daha vermek istiyorum. Preferences penceresindeyken sol üst köşedeki listeden Plug-ins&Scratch Disks adlı sayfaya ulaştıkdan sonra sayfanın ortasındaki Scratch Disks bölümünden Primary olarak C:\ sürücüsünden farklı ikincil bir sabit disk bölümü belirleyin(örneğin D:\). Bu ayar ile Illustrator’un çalışma esnasında oluşturduğu geçici dosyasını farklı bir bölüme yerleştirerek biraz daha performans artışı sağlıyoruz.

Takip Edin

Eğer İngilizceniz yeterli ise aşağıdaki bağlantıları okuyabilir veya izleyebilirsiniz. Maalesef Illustrator hakkında Türkçe olarak herhangi bir kaynağa rastlayamadım. Sizin bu konuda rastladığınız Türkçe eğitsel bağlantısı varsa yorumunuzda bildirebilirsiniz.

• Ndesign-studio
• Veerle
• Layers Magazine
• Tutvid
• Illustrationclass
• Pixeladdiction
• Biorust
• Illustrationworld
• Vecpix
• Video-tutes

Bu yazı Fatih Turan tarafından 25 August 2007 16:53 tarihinde yazıldı. 1 yorum var. Sen de yorum yaz.

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 August 2007 16:14 tarihinde yazıldı. 3 yorum var. Sen de yorum yaz.

Vektör grafik nedir? Vektör grafikler hangi programlarla oluşturulabilir ve düzenlenebilir? Bitmap nedir? Bitmap grafikler hangi programlarla oluşturulabilir ve düzenlenebilir? Bütün bu soruların yanıtını bildiğim kadarı ile cevap verip en sonunda bu iki türü karşılaştırmaya gideceğim.

Vektör Grafik Nedir?

Vektör grafikler çözünürlükten bağımsız, herbir nesne matematiksel ifadelerle oluşturulan ve en önemlisi detay kaybetmeden herhangi bir boyuta yeniden ölçeklendirilebilen grafik türüdür. Aşağıda görüldüğü üzere vektörel nesne büyütüldüğünde herhangi bir bozulma gerçekleşmiyor.

Vektörel Grafikler Hangi Programlarla Oluşturulabilir?

Vektör grafik üretmek için yapılan birçok program mevcut. Bunların arasında en çok bilinen ve benimde severek kullandığım program olan Adobe Illustrator‘dur. Adobe Illustrator’un dosya uzantısı .ai’dir. Öte yandan ülkemizde özellikle baskı alanında kullanılan ve bence Illustrator kadar kullanışlı olmayan Corel Draw bulunuyor. Corel Draw’ın dosya uzantısı .cdr’dir. Yine ülkemizde pek bir popüler olan ve kullanımı diğer programlara nazaran daha basit olan fakat geleceği biraz meçhul olan Macromedia(Adobe) Freehand bulunur. Freehand’in dosya uzantısı .fh(X)’dir. Bu ticari programların yanısıra arabirimi Corel Draw’a benzeyen ve açık kaynaklı, ücretsiz bir program olan Inkscape‘de denenmeye değer bir program olduğunu söylemeden geçmeyelim. Inkscape ile çok sağlam çalışmalar yapıldığını gördüm ve Inkscape çoğu işletim sisteminde çalışır durumdadır. Inkscape’in kullandığı dosya uzantısı .svg’dir. Son olarak yukarda bahsettiğim programlar kadar gelişmiş olmasada web grafikleri için kullanabileceğiniz, vektörel çizim yeteneğine sahip olan Macromedia(Adobe) Fireworks‘dan da bahsedebiliriz. Öte yandan Fireworks’un bitmap çizim yetenekleride mevcut. Bunun için Muhammet Sevim’in hazırlamış olduğu yazıyı gözden geçirmenizi tavsiye ederim. Fireworks’un kullandığı dosya uzantısı ise .png’dir.

Bahsettiğim bu dosya uzantılarının yanısıra .svg, .eps, .wmf gibi dosya uzantılarını da yukarıdaki programlar ortak olarak kullanabiliyorlar.

Bitmap Grafik Nedir?

Bitmap türü grafiği tanımlayacak olursak, ilgili imajı oluşturan ve herbiri renk bilgisi içeren piksel veya noktaların yanyana ve alt alta dizilmesiyle oluşan grafik türüdür. Piksel’den kısaca bahsetmek gerekirse bir bitmap görüntüyü oluşturan en küçük noktadır. Aşağıdaki nesneye yakından bakıldığında piksellerden oluştuğu görülüyor ve büyütüldüğünde görüntü kalitesinde kayıp yaşanıyor.

Bitmap Grafikler Hangi Programlarla Oluşturulabilir?

Bu tür grafikleri oluşturmak için en bilindik ve en popüler olan, yine benim kullanıyor olduğum Adobe Photoshop‘u ilk başta sayabiliriz. Sonrasında uzun zamandır Adobe Photoshop’a alternatif olarak gösterilen Corel PaintShop Pro‘dan bahsedebiliriz. Yine bir açık kaynaklı ve ücretsiz bir program olan Gimp‘i de duymuşsunuzdur. Eğer Gimp’in arayüzüne yabancı iseniz GimpShop‘u deneyebilirsiniz. GimpShop’daki menüler ve kısayol tuşları Adobe Photoshop ile hemen hemen aynı yapılmaya çalışılmış böylece bir nebzede olsa Adobe Photoshop kullanıyor gibi Gimp’i kullanabiliyorsunuz. Bitmap grafiklerde en çok kullanılan uzantılardan bahsetmek gerekirse .jpg, .png, .gif, .bmp gibilerini sayabiliriz.

Avantajlar-Dezavantajlar

Vektör Grafik Türlerinin Avantajları

• Vektör grafikler farklı boyutlar ve farklı renklerde üretilmesi gereken çalışmalarda kullanmak için idealdir. Örneğin bir vektörel görsel çalışması büyük bir ilan tahtası için büyütülüp kullanılabilir. Aynı zamanda istenilen derecede küçültülüp kalite kaybı olmaksızın bir kartvizit üzerine de basılabilir. Çalışmanın görsel olarak detaylarıı her iki durumda da kayıba uğramaz.
• Vektör grafikler gerektiğinde bitmap haline kolaylıkla getirilebilir.
• Vektör grafikler istenildiğinde büyütülebilir, nesneler yeniden renklendirilebilir, nesneler yeniden şekillendirilebilir.
• Dosya boyutu olarak daha az yer kaplarlar.

Vektör Grafik Türlerinin Dezavantajları

• Vektörel grafik çalışmalarında görsel olarak fotoğraf kalitesinde üretim yapamassınız.
• Vektörel grafik çalışmaları web üzerinde bitmap olarak çevirmeden kullanamassınız. Yalnız son zamanlarda .svg diye bir dosya türü ile bu mümkün gibi görünsede bu konu hakkında tam olarak bir bilgim yok.

Bitmap Grafik Türlerinin Avantajları

• Bitmap grafikler milyonlarca renk değişimi alabilir.
• Bitmap grafiklerde piksellerin herbirine müdahale edebilirsiniz. Bu sayede fotoğrafçılar veya sayısal sanatçılar fotoğraflara rötüş işlemi veya manipüle edebiliyorlar.

Bitmap Grafik Türlerinin Dezavantajları

• Bitmap grafiğin sahip olduğu çözünürlükten daha yükseğe getirildiğinde keskinliğini yitirir ve görüntüde bozukluk meydana gelir. Aynı zamanda sahip olduğu çözünürlükten daha aşağı hale getirildiğinde de pikseller kaldırıldığı için orijinal görüntüsünü kaybeder.
• Bitmap grafikler özel dosya biçimlerini saymassak(Photoshop gibi programların kullandığı .psd dosya türü gibi) katman bilgileri içermezler. Bu yüzden düzenlenmesi vektör grafiklere nazaran zordur.
• Bitmap grafikler vektör grafiklere nazaran bilgisayarda dosya boyutu olarak daha fazla yer kaplar.

Yazımızın sonuna geldik. Eğer bir eksiğim veya hatam varsa bu konu üzerinde yorumda bulunup yazımı genişletebilirsiniz.

Bu yazı Fatih Turan tarafından 25 August 2007 11:29 tarihinde yazıldı. 2 yorum var. Sen de yorum yaz.

Extensis Suitcase’in Avantajları

• Yazıtiplerini kurmadan önizleme olarak görebilirsiniz.
• Windows’a fontları kopyalamak zorunda kalmazsınız, bu sayede Windows daha hızlı ve kararlı çalışır.
• Kayıp yazıtiplerini bulup düzeltebilirsiniz.
• Yazıtiplerinizi istediğiniz örnekler eşliğinde yazıcıdan çıktısını alabilirsiniz.
• Yazıtiplerinizi oluşturabileceğiniz setlerle yönetip, düzenli şekilde arşivleyebilirsiniz.
• Yazıtiplerinizi istediğiniz klasör üzerinden, gerektiği zaman aktif, gerekmediği zamanda ise pasif hale getirebilirsiniz.
• Yazıtiplerinizi geçici olarak aktif hale getirip, sisteminiz yeniden başlayana kadar aktif halde kalmasını sağlayabilirsiniz.

Hadi Başlayalım

İlk adımda buradaki bağlantı üzerinden Extensis Suitcase’in 30 günlük deneme sürümünü indiriyoruz. Bu program 79$’a satılıyor eğer isterseniz ve durumunuzda uygunsa satın alabilirsiniz. Eğer bir Mac’e sahipseniz bu bağlantı üzerinden de Mac sürümünü indirip deneyebilirsiniz.

Extensis Suitcase’in Arabirimi

Arabirimin en tepesinde temel işlemlerin yapıldığı bir araç çubuğu, sağda Suitcase’e eklediğiniz yazıtiplerin önizlemesini yapabileceğiniz bir panel, solda setlerinizi gösteren ve onları yönetebileceğiniz bir panel ve son olarak da en altda bütün yazıtiplerini, sistem yazıtiplerini, kayıp veya aynı yazıtiplerini görebileceğiniz bir panel bulunmakta.

Yazıtiplerini Suitcase’e Ekleyelim

Şimdi elinizdeki yazıtiplerini bilgisayarınızda Windows’un Fonts klasöründen farklı bir klasör altında topladığınızdan emin olun. Örneğin C:\Yedek\Yazıtipleri adlı klasör olabilir. Daha sonrasında Suitcase’in en üstteki araç çubuğundaki ilk düğme olan New Set’e basıp aşağıdaki ekran görüntüsünde olduğu gibi Suitcase’de yeni bir set oluşturup ona bir isim verelim.Örnek vermek gerekirse ’sevdiğim fontlar’ ismini verebilirsiniz.

Ardından aşağıdaki ekran görüntüsündeki gibi yine Suitcase’in üstteki araç çubuğundan Add Fonts düğmesine basıp karşınıza gelen diyalog kutusunda yazıtiplerinizin bulunduğu klasörü belirtip Add düğmesine basıp yazıtiplerinizi setinize ekleyin.

Yazıtiplerini Aktifleştirme

Bu adımda ise yazıtiplerini programlarda kullanabilmeniz için aktifleştirme işlemini gerçekleştireceğiz. Şimdi aşağıda gördüğünüz üzere daha önce oluşturmuş olduğumuz setimizi seçip üstteki araç çubuğundan Activate Fonts düğmesine basıp setimizin içerisindeki bütün yazıtiplerini aktif hale getiriyoruz. Artık bundan sonra istediğiniz programda, aktifleştirdiğiniz yazıtiplerini kullanabiliyorsunuz. Unutmayın yazıtiplerinizi setlere bağlı kalmaksızın teker teker de aktifleştirip, pasifleştirebilirsiniz.

Yazıtiplerini Pasifleştirme

Kullandığınız yazıtipleriyle işiniz bittiğinde onları Suitcase’den pasifleştirmemiz gerekir. Neden diyorsanız şöyle cevaplayalım; yazıtiplerin boşa yere aktif halde durması, gereksiz yere sistem kaynaklarını tüketmesine yol açar. Bu yüzden işimiz bittiğinde yazıtiplerimizi pasifleştiriyoruz. Yine aşağıdaki ekran görüntüsü eşliğiyle bu işlemi yapalım. Setlerimizdeki aktif halde bulunan setimizi seçiyoruz ve üstteki Deactivate Fonts düğmesine basıyoruz böylece yazıtiplerimizi pasifleştirmiş olduk.

Yazıtiplerini Önizleme ve Yazdırma

Aşağıdaki ekran görüntüsünde olduğu gibi setinizde bulunan yazıtiplerinizi istediğiniz boyutta ve istediğiniz örnek yazı ile önizleme olarak görebilirsiniz. Önizleme olarak görmek için soldaki panelden setinizi seçmeniz yeterli. Eğer isterseniz bunları yazıcınızdan çıktısını da almanız mümkün. Bunun için File menüsünden Print Sample Pages komutunu uygulamanız yeterli. Bu sayede elinizde bulunan yazıtiplerini daha iyi tanımış olup, nerede nasıl şekilde kullanacağınıza rahatça karar verebilirsiniz.

Setleri Kaldırma

Kimi zaman gereksiz olan setlerinizi kaldırmanız gerekebilir. Bunu yapmak gayet kolay. Soldaki panelden setinizi seçip üzerine sağ fare tuşu ile bastıkdan sonra açılan menüden Remove komutunu uygulayın. Unutmayın Suitcase’den kaldırdığınız yazıtipleri ve setler sisteminizde yer almaya devam edecektir. Eğer tamamen kaldırmak istiyorsanız kendiniz Windows’dan elle silmeniz gerekiyor.

Bu yazı Fatih Turan tarafından 25 August 2007 11:07 tarihinde yazıldı. Hiç yorum yok. Sen de yorum yaz.