jquery menü eklentileri

Tarih: Salı, Nisan 28, 2009 Kategori: Teknoloji, İnternet Haberleri

jquery eklentilerinden sitenizin birçok bölümünde yararlanmanız mümkün. bu alanlardan biri de menüler. işinize yarayabilecek 10 menü eklentisi:

Etiketler: AJAX, eklenti, JavaScript, jQuery, jquery addon, jquery eklentileri, jquery menu, jquery plugins, JS, menü eklentileri, menu uygulamaları

web ve grafik tasarımcıları için harika kaynaklar

Tarih: Pazar, Nisan 19, 2009 Kategori: Teknoloji, İnternet Haberleri

Birçok web ve grafik tasarımcısı için faydalı olabilecek orjinal simgelere, photoshop fırça ve desenlerine aşağıdan ulaşabilirsiniz.

1 – Hand ColorStroked (El Çizim Rengi)

2 – Drink Web 2.0 (Web içeceği)

devamını oku »

ilgili yazılar

Ücretsiz simgeler (15)
3 boyutlu ve parlak web simgeleri (5)
47 adet webmaster aracı (0)
Ücretsiz Grafik Tasarım Kaynakları (5)
Kaliteli Siyah Beyaz İkonlar (0)
40 yüksek kaliteli simge seti (0)
70′den fazla JavaScript kaynağı (1)
Tasarımcılar için 25 ücretsiz simge kaynağı (11)

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

etiketler: kaynak, icon, grafik, web, web design, web tasarımı, graphic, simge, web 2.0, faydalı siteler, icon set, brushes, resource, grafik tasarımı, faydalı araçlar, simge seti, simgeler, patterns, photoshop fırçaları, yararlı linkler, photoshop desenleri, web tasarım kaynakları, grafik kaynakları, sosyal simge, sosyal simgeler, media icons, twitter icons, marka simgeleri

Etiketler: Bir, Drink Web, Grafik, Grafik Tasar, Hand ColorStroked El, Icon, JavaScript, Kaliteli Siyah Beyaz, Kaynaklar, LeBron, Rengi, Simge, Tasar, tasarm, Web

Google Maps API Kurulum ve Kullanımı

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

Google Maps API ile ilgili bu yazıyı ne zamandır yazmayı düşünüyordum. Ama geçen gün Nettuts adlı sitede benden önce Google Maps API ile ilgili bir yazı yazmışlar. Yazının başlığını Google Reader’da gördüğümde “Tüh!” diyerek hayıflandım. E ne demişler: “Atamayana atarlar!”, pardon “Yazamassan yazarlar!”. xD

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.

<!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 Ekim 2008 17:07 tarihinde yazıldı. 23 yorum var.

Etiketler: ABQIAAAApJ fZWusAp, Ama, Anahtar, API, Atamayana, ayn, Ayr, Az, Ben, Bu, Content-Type, CSS, DOCTYPE, DTD, Ekim, Fakat, Farkl, Fatih Turan, GBrowserIsCompatible, Get Lan Lon, getElementById, GLatLng, GMap, google, Google Maps, Google Maps API, Google Maps API Demo Galerisindeki, Google Reader, Google Static Maps API, GUnload, Ha, Hem T, hTy mNriyUhaj OkidWbtIeb, iin, ile, JavaScript, Koordinatlar, Kurulum, maps, Meta, Ne, Nettuts, nihayet, nPrMcxM xRWK WhrfsCEgcYY INOmv, Olu, Print Screen, PUBLIC, Rize, Sat, SCRIPTS, setCenter, Siz, Son, Strict EN, STYLES, TR, tr-TR, W C DTD XHTML, xD, Yani, Yaz, Yazamassan, Yine

Web Sayfalarımızı Neden Elle Kodlamalıyız?

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

Web tasarımcılığı veya web geliştiriciliğine yeni başlayan hemen hemen herkes Dreamweaver veya benzer tarzda WYSIWYG (Türkçesiyle “Ne görüyorsanız onu alırsınız”) tipindeki editörler ile tablo etiketlerini kullanarak (veya kullanmayarak), adeta suya sabuna dokunmadan, yani kodlara bulaşmadan, programdaki komutlarla anında görüp, düzeltme ve değişiklik yapıp web sayfalarını inşa etmeye çalışmışlardır.

Ş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 Ekim 2008 01:01 tarihinde yazıldı. 33 yorum var.

Etiketler: ayn, Ben E Text Editor, Bence, Bir, Bu, CSS, De, Dreamweaver, Ekim, Expression Web, Fatih Turan, Genelde WYSIWYG, Gereksiz, Hatta, JavaScript, Mesela Aptana Notepad Komodo Edit PSPad, Ne, Neden, Okunabilirlik, olarak, SEO, Sitepoint, Sonu, Web, WYSIWYG, WYSIWYG T, xD, XHTML, Yani, Yine

Sinemalardan.com Açıldı!

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

Çok uzun zamandır üzerinde çalıştığım Sinemalardan adını verdiğimiz blogumuz açıldı. Sinemalardan, adından da anlaşılacağı üzere izlediğimiz sinema filmlerini tanıtan, eleştiren ve onları yorumlayan kollektif bir blog. Bunun yanısıra sinema tutkunlarının özgürce tartışıp, konuşabileceği bir forumumuz da yer almakta. Üye olmanız için sizleri bekliyoruz.

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 Ekim 2008 23:56 tarihinde yazıldı. 14 yorum var.

Etiketler: Ayr, ayrca, Bu, Bunun, da, Dolay, Ekim, Erhan, Fatih Turan, JavaScript, RSS, Sinema, Sinemalardan, Wordpress, XHTML CSS

JQuery ile Şık Bir Teknik

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

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

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

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

Ve Benim Paylaşım

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

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

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

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

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

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

1
2
3

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

ile

1
2
3

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

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

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

Ne Yapmak İstiyoruz?

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

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

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

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

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

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

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

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

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

JQuery’ye Giriş

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

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

Çalışmaya Başlayalım

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

1
2
3

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

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

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

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

1
2
3

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

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

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

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

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

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

1
2
3

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

İki kodu birleştirince

1
2
3

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

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

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

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

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

Evet istediğim oldu, ve ayrıca ben

1	.slideDown('slow');

veya

1	.slideDown('fast');

değerlerini kullanarak ya da direk rakam girerek,

1	.slideDown(400);

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

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

Ufak Bir Sorun Var

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

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

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

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

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

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

Sihirli Komut, Toggle

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

1	.slideToggle(400);

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

Ne Kadar Kolaymış değil mi?

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

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

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

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

Etiketler: acilacakAlan, Alan, Alternatif, Ama, Arkada, Art, Ayr, Ben, Bir, Birg, Bu, Burada, CSS, Evet, Eyl, Fatih Turan, Fatih Turan Wordpress, firefox, Gelin, Harika, HTML, iin, ile, JavaScript, jQuery, Kendisi, Oysa, Sayfam, SEO, Sinemalardan, slideDown, slideToggle, slideUp, Tasar, Toggle, Umar, Volkan G, Web Deneyimleri, Yani, Yani A Kapa, Yapmak, Yukar, Zaten JQuery, Zaten Toggle

sIFR’i Optimum Şekilde Kullanın

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

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

sIFR Kullanımı

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

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

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

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

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

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

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

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

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

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

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

Hareket Vakti

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

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

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

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

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

1
2
3

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

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

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

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

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

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

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

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

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

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

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

Etiketler: Agora Regular, Ama, Anti-Alias, Artt, Ayr, Az, Bak, Ben, Ben sIFR, Bir, Bu, CSS, Dolay, Evet, Eyl, FAQ, Fatih Turan, flash, Genelde, Gerekti, Hem, How You Get sIFR, HTML, Image Replacement, JavaScript, JS, Mesela, Muhammet Sevim, Neden, Peki, Php, Sayfan, Siberk, sIFR, sIFR Documentation, sIFR Kullan, sIFR Tutorial, sIFR-active, sIFR-alternate, sIFR-fixfocus, sIFR-flash, sIFR-ignore, sIFR-print, sIFR-replaced, sIFR-root, sIFR-screen, sIFR-unloading, Sitenizin Performans, Siz, Sizce, Son, Sonra, Sonu, Sunucuya, SWF, Toplamda, tuneHeight, Use Your Own Fonts This, Veya sIFR, Yani, Yine, Yukar, Zaten

Web Tasarımı İçin Kullanabileceğiniz Firefox eklentileri

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

Beni biraz yakından tanıyanlar sıkı bir Firefox kullanıcısı olduğumu bilir. Bunun birkaç sebebi vardır. Fakat o sebeplerin arasında en önemli olanı Firefox‘un bir sürü eklenti seçeneğine sahip olmasıdır. Ve web tasarımında da eklentiler bazı işleri gerçekten kolaylaştırabiliyor. Bu yüzden onları kullanmakda fayda var. Şimdi hangi eklentileri kullanıyorum ve bunların ne işe yaradığını hep birlikte öğrenelim.

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 Eylül 2007 17:56 tarihinde yazıldı. 10 yorum var.

Etiketler: Aardavark, ARA LAR, Ard, Ayr, Baz, Beni, Bu, Bunun, COLOR PICKER, Colorzilla, COPY, CSS, CSS Viewer, eklentisi, eklentisini, Eklentiyi, Eyl, Fakat, Fatih Turan, Firebug, firefox, HEX, HTML, Html Validator, IE Tab, Internet Explorer, JavaScript, KB, Kullan, Measure It, NET, olarak, PNG, R I P, RESIZE WINDOW, RGB, SAVE, Screengrab, Simge, Split Browser, START AARDAVARK, Ve, Web Developer Toolbar, xD, Yet Another Window Resizer, ykleyebilirsiniz

Internet Explorer’ın Web Standartlarına Uymasını Sağlayın

Tarih: Cuma, Nisan 3, 2009 Kategori: Bilgisayar

Internet Explorer bana göre Microsoft‘un kendi kafasına göre yaptığı standartları destekleyen, web standartlarını doğru düzgün desteklemeyen ve desteklese de bir sürü hata ile web tasarımcıların kafasını bozan aptal bir tarayıcıdır. Tamam belki de sıradan bir kullanıcı için bu kelimeler pek bir anlam ifade etmeyebilir. Fakat web standartlarına uygun site/uygulama yapmaya çalışan ve Internet Explorer yüzünden kafayı yeme noktasına gelen web tasarımcıları/geliştiricileri ne demek istediğimi anlayıp bana hak verecektir. xD

Eee 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.

<!--[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 Eylül 2007 13:37 tarihinde yazıldı. 9 yorum var.

Etiketler: Art, Ayr, Bir, Birazdan, Bu, Bunlar, Conditional Comments, CSS, Daha, Dean Edwards, Explorer, Eyl, Fakat, Fatih Turan, HTML, IE, İnternet, Internet Explorer, JavaScript, KB, Microsoft, PNG, Son, Sonra, Tamam, W C, Web, xD, ZIP, Zira Internet Explorer

Makaleler, Teknoloji

Google Maps API’de Neyin Nesi?

Google Maps API Kurulumu

Google Maps API Kullanımı

Örnek Açıklaması:

Haritamız Hazır

Ve Benim Paylaşım

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

Ne Yapmak İstiyoruz?

JQuery’ye Giriş

Çalışmaya Başlayalım

Ufak Bir Sorun Var

Sihirli Komut, Toggle

Ne Kadar Kolaymış değil mi?

sIFR Kullanımı

Hareket Vakti

Aardavark

Colorzilla

CSS Viewer

Firebug

HTML Validator

IE Tab

Measure It

Screengrab

Split Browser

Web Developer Toolbar

Yet Another Window Resizer

Eee Peki Ne Yapabiliriz?

Kullanım Kılavuzu

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

Sonuç

Kategoriler

Son Yazılar

Sayfalar