Spaksu Blog » Web Programlama

Siteniz yada blogunuz için javascript kar efekti

Spaksu — Thu, 10 Dec 2009 18:34:47 +0000

Malum yılbaşı geliyor internet alemi siteleri yılbaşına hazırlıyor. Kimileri logolarını değiştirip kar efekti veriyor, kimileri daha da zahmete girip temalarını değiştiriyor ve kimileri de sitelerine kar yağdırtıyor. İşte bende size sitenize kar yağdırma olanağı sağlayacak ve kendi sitemde kullandığım bir script’i paylaşıyorum. Yazının devamında kod yapısını ve js dosyasısnı indirebilirsiniz

Üstteki snowstorm.js dosyasını indiriyor ve kendi sunucunuza upload ediyorsunuz. Daha sonra alttaki kodlamayı sitenizin “…..” kod yapısının arasına (wordpress temalarına ekleyecek arkadaşların tema dosyalarında header.php dosyasında bu yapı mevcuttur) ekliyorsunuz. Tabiki src kısmını sitenize göre uyarlamayı unutmayınız.

Yatay rollover resim menüsü – ImageMenu

Spaksu — Sat, 29 Nov 2008 15:08:29 +0000

Ana sayfada gördüğünüz üzere bir yenilik daha yaparak siteye “imagemenu” adında bir resim menusu ekledim ve bu scripti sizinle paylaşmak istedim. Phatfusion isimli bir siteden ücretsiz olarak indirdiğim ve gerekli düzenlemeleri yapıp eklediğim bu script mootools 1.11 kütüphanesi ile geliştirilmiş. Tek kötü tarafı olarak nitelendirdiğim internet explorer 5′te çalışmaması dezavantaj. Bunun dışında diğer tarayıcıların desteği mevcut. Alttaki adreslerden bilgi ednebilir ve scripti ücretsiz olarak indirebilirsiniz. Kolay gelsin!

Script Sayfası | Direk İndir (328 kb)

Internet dünyasının favori simgeleri (favicons)

Spaksu — Sat, 22 Nov 2008 13:53:41 +0000

Yavaş yavaş internet sitelerinin vazgeçilmezi haline gelen favori simgeler yani Favicon’lar oldukça kullanılır hale geldi. Takip ettiğimiz smashing magazine sitesi ocak 2007′den beri toplam 8 başlık altında internet sitelerinin favori simgelerini inceliyor ve kullanıcılarına sunuyor. Peki favicon nedir. Internet Explorer tarayıcının yeni versiyonlarında ve diğer tarayıcıların adres çubuğunun yanında bulunan 16×16 pixellik genelde sitelerin logoları yada siteleri tanımlayabilecek bir simgedir. Alttaki linklerde ise bazı favori simgelerin listeleri var.

Favicons 1, 2, 3, 4, 5, 6, 7, 8 – Favicon nedir? Nasıl oluşturulur 1, 2

Tasarım ve Kodlama ile ilgili 5 Türk blogu

Spaksu — Sat, 18 Oct 2008 07:36:45 +0000

Geçenlerde sizinle paylaşmış olduğum kişisel beş adet blogun çoğundan olumlu tepki aldığım için bu seferde kategori olarak web tasarım ve kodlama bazında beş adet blogu sizinle paylaşacağım. Bazı arkadaşların diğer kategoride başka güzel bloglarda var onları neden yazmadın demesini haklı buluyorum fakat bu seçtiklerim kategori bazında düşünürsek bana göre diğerlerini bastırdığı için ilk beşe girdiler. Herneyse yazının devamında web tasarım ve kodlama bazında beş blogu bulabilirsiniz.

1- E-Burhan (www.eburhan.com)

Bu arkadaşımın sitesini nerdeyse açıldığından beri takip ederim özellikle Css , Js ve wordpress kodlamalarında oldukça başarılı dersler veriyor. Artı blogunda ki araçlar bölümünde indirip sitenize ekleyebileceğiniz kendi hazırlamış olduğu web uygulamaları mevcut. Yani eğer kendinizi web tasarımcı yada kodlamacı görüyorsanız güzel yardım alabileceğiniz bir blog.

2- Web Deneyimleri (www.webdeneyimleri.com)

Volkan Görgülü tarafından kurulan Web deneyimleri blogu CSS , XHTML ağırlıklı olarak konularına yön veriiyor ve yazıları fazlasıyla bilgilendirici bulunuyor. Ayrıca yabancı bir arkadaşı ile beraber hazırladığı SEO ile ilgili bir yazının hep beraber takip ettiğimiz Smashing Magazine sitesinin Ocak 2008 en iyileri derlemesinde yayınlandığını belirtmek isterim. Web Deneyimleri girmeniz gereken blogların başında yer alıyor.

3- Yakuter (www.yakuter.com)

Erhan Yakut arkadaşımız tarafından kurulan Yakuter blogu Web tasarım teknolojisi ve programlaması hakkında geniş içeriğe sahiptir. Ayrıca wordpress sistemi ile ilgili birkaç eklenti çalışmalarıda vardır. Takip ediyor ve tavsiye ediyorum.

4- Fatih Turan (www.fatihturan.com)

Genel olarak web tasarımı konularında yazılar yazan Fatih Turan arkadaşımız güzel bir blog hazırlamış. Söylediğimiz gibi tasarım konularına ağırlık veriyor. Yapılan tasarımları XHTML/CSS’ye dönüştürme konusunda da kendisi epey uzman. Siteye girdiğinizde çalışmalarını görebilirsiniz.

5- Sesebian (www.sesebian.com)

Web tasarım ve kodlama ile ilgili siteleri ve blogları gezerken karşıma çıkan ve hoşuma giden bir blog. Genel olarak arşiv türünde başka kodlamaları , eklentileri ve temaları tanıtan bir blog olmasına rağmen bence başarı düzeyi yüksek bir blog.

Şimdilik bu kadar başka zaman başka kategoride başka bloglar ile görüşürüz.
Enteresan bir bitiş oldu : )

Resimlerinize .htaccess ile Hotlink Protection

Spaksu — Tue, 24 Jun 2008 20:18:41 +0000

Bazı internet sitelerinden kendi sitenizde yayınlamak için resim alırsınız ancak resmi sitenize eklediğinizde ise farklı bir imaj ile resmin size ait olmadığını yada resmin başka sitelerde yayınlamak için izin almanız gerektiğini belirten bir görsel çıkar. Aynı şekilde .htaccess yöntemi ile sizde sitenizde yayınladığınız resimlerin başka sitelerde gösterimini engellemek için yazının devamındaki uygulamayı kullnabilirsiniz. Aynı zamanda vereceğim linktende sitenize ait değerleri girerek hazır htaccess kodunu alabilir ve sitenize yerleştirebilirsiniz. Yönteme kısaca Htaccess for hotlink protection adıda verilir. Eğer htaccess kullanımı hakkında bilginiz yoksa öncelikle buradan bilgilendirme almanızı tavsiye ediyorum.

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?spaksu.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ /yasaklikullanim.gif [NC,R,L]
Yukardaki kodlamada 3. satırdı izin verdiğiniz site olan siteyi yazabilirsiniz. 4. Satıırda ise yasaklanan imaj yerine kullanılacak imajın urlsini belirtirsiniz.

Hazır olarak kod oluşturabileceğiniz site;
http://www.htaccesstools.com/hotlink-protection/

Javascript Css stil değiştirici hazırlamak

Spaksu — Sun, 08 Jun 2008 09:22:29 +0000

Bir önceki yazımda size söz verdiğim gibi beraber javascript yardımı ile css stil değiştirici hazırlayacağız. Ancak eğer css konusunda bilgi sahibi değilseniz lütfen uzman biri yardımı ile hazırlamanızı yapınız. Yapacağınız hata sitenizde değişik bozulmalara neden olabilir. Yazının devamında anlattığım css stil değiştiri hazırlama yabancı bir siteden Türkçeye çevirilmiş halidir.

1. Javascript styleswitcher dosyasını indirin

Vereceğim bu dosya stil geçişlerini sağlamanız için gereken bir js dosyasıdır.
İndir (styleswitcher.js)

2. tagı arasında js dosyasını çağırın

Stil değiştiriyi ekleyeceğiniz sayfada tagının hemen üstüne alttaki kodu ekleyin eğer koddaki src çağırma kısmı farklı ise kendi sitenize göre uygun hale getirin:

3. Yeni bir stil dosyası oluşturun

Bu kısım en önemli kısımdır. Sitenizde bulunan css stil dosyasının bir kopyasını oluşturarak içindeki değerleri , renkleri yeni stile göre ayarlayın. Eğer stilinizdeki tanımlamalar diğer stil ile bağdaşmazsa uyumsuzluklar ortaya çıkabilir. Gerekli değişiklikleri yapıktan sonra dosyanızı “style-mavi.css” şeklinde farlı bir isim ile adlandırın ve kaydedin. Bu işlemi istediğiniz kadar stil oluşturmak için kullanabilirsiniz.

4. Head bölümünde stillere link verin

Dikkat etmeniz gereken nokta iki çeşit stil dosyası olduğudur. Ana stil ve Alternatif stil. Ana stiliniz temanın ilk stilidir Title yani başlık değeri default’dur.

Oluşturduğunuz diğer stil dosyaları alternatif stillerdiir. Alttaki kod gibi “Rel” ve “Title” değerleri ana stilden farklıdır. Birden fazla alternatif eklemek için alttaki kodları tekrarlayabilirsiniz..

5. CSS stil değiştiricileri sitenize link olarak ekleyin.

Üstteki stil dosyalarını oluşturup tanımladıktan sonra buları ziyaretcilernizin kullanacağı hale getirmek için sitenizde istediğiniz herhangi bir yerde link olarak ister text formatında isterseniz imaj formatın kullanıcınıza suınabiilirsiniz. Altta belirttiğim kodda dikkat çeken kısım setActiveStyleSheet(’mavi’); olarak belirtiğimiz stil aktifleştirme bölümüdür.
Mavi Tema

Aynı link kodu ile alttakini kullanarakda ziyaretçinin orjinal stile dönmesi sağlanabilir:
Orjinal Tema

İşte bukadar stil değiştiriciniz hazır.

Eğer Css hakkında bilgi sahibi değilseniz lütfen uzman birinin gözetimi ile yapın. Yanlış bir şey yaptığınızda sitenizin yapısını bozabilirsiniz ve ben kesinlikle bu nedenden ötürü sorumluluk kabul etmem.

Kolay gelsin.

Css’de Code Tagını Biçimlendirme

Spaksu — Sat, 10 May 2008 13:01:36 +0000

Sitenize yada blogunuza kullanımı göstermek amacıyla kaynak kodu eklerken epey zorluk çekersiniz. CSS ile hazırladığım basit ve ufak bir kodlama sayesinde istediğiniz biçimde ve renklerde sitenizde kodları gösterebilirsiniz. Verdiğim yapıyı css dosyanıza eklediğiniz taktirde … arasında kullanmanız yeterlidir. Size yazının devamında bir kaç renkte kodlama yapısı sunacağım. Yapıları gördüğünüz çerceveyide demo olarak kabul edebilirsiniz ve verdiğim kodları kendinize göre düzenleyip kendi biçiminizi oluşturabilirsiniz.

Sitemde gördüğünüz renkte;

code {font:1em 'Courier New',Courier,Fixed; display:block; overflow:auto; text-align:left; background:#f8f8f8; color:#111; border:1px solid #ccc; border-left:6px solid #ccc;padding:4px;}

Sitemde gördüğünüz biçimin mavisi;

code {font:1em 'Courier New',Courier,Fixed; display:block; overflow:auto; text-align:left; background:#EAF3FA; color:#222; border:1px solid #83B4D5; border-left:6px solid #83B4D5;padding:4px;}

Sitemde gördüğünüz biçimin kırmızısı;

code {font:1em 'Courier New',Courier,Fixed; display:block; overflow:auto; text-align:left; background:#FFE3DD; color:#111; border:1px solid #FF3300; border-left:6px solid #FF3300;padding:4px;}

35 adet kullanışlı kod editör programı

Spaksu — Wed, 07 May 2008 18:24:52 +0000

Zamanımın az olması nedeniyle pek yazı yazamıyorum ancak elimden geldiği kadar internette yayınlanan faydalı bilgileri size haberdar etmeye özen gösteriyorum. Yine Smashing magazine sitesi güzel bir listeleme yapmış. Bu seferki konu 35 Adet kullanışlı kod editörü. Kod yazarları için önemli olan kodu yazarken aynı zamanda kontrol edebilmektir. Zamanında “C” Programlama dilinde ufak programlar yazarken en ufak bir noktalama hatasını bulmak epey zaman alıyordu. Şimdiki bu anlatılan programlar kod yazmak çok basit ve aynı zamanda eğlenceli bir hal alabiliyor. Kodların renklendirmesinden tutun hazır kod şemalarına kadar programların içinde barındırılıyor ve kod yazmak kolaylaşıyor. Fazla uzatmadan sizi 35 adet kullanışlı kod editörleri ile başbaşa bırakıyorum.

http://www.smashingmagazine.com/2008/05/07/35-useful-source-code-editors-reviewed

PHP ile Rasgele Resim Çağırma

Spaksu — Sat, 03 May 2008 07:43:52 +0000

Mesela sayfanızda wallpaper tarzında sabit resimler yayınlıyorsunuz yada yine wallpeper tarzında sabit arkaplanınız var. Fakat kullanıcının sıkılmasınıda istemiyorsunuz . İşte vereceğim kod tam olarak burada devreye giriyor. İnternet sitenizde bir klasör oluşturup içine boyutları aynı olan istediğiniz kadar resim aatıyorsunuz . Ve bu kod o klasörde bulunan resimmleri rasgele şekilde kullanıcılarınıza resim yada arkaplan olarak gösteriyor. Kulaanımı çok basit. Yazının devamında kodlama ve kullanımı için bilgileri bulabilirsiniz.

Kodu hostunuzda veya localhost’ta deneyin.

PHP kodu ; (foto.php olarak kaydedin)
< ?php $dir = 'foto/'; $avatar_types[] = 'gif'; $avatar_types[] = 'jpg; //ekleme yapabilirsin. // ARTSTIL INTERACTIVE - www.artstil.net // BURDAN SONRASINI DEGISTIRMEYINIZ. $avatar = array_key_exists('avatar',$_GET)?$_GET['avatar']:''; if ($avatar != '') { $avatar = urldecode($avatar); } else { $avatars = array(); $directory = opendir($dir); while ($list = readdir($directory)) { if ($list != '.' && $list != '..') { $ext_check = explode('.',$list); foreach ($avatar_types as $variable => $value) { if (in_array($value,$ext_check) && !in_array($value,$avatars)) { $avatars[] = $list; } } } } closedir($directory); $random = array_rand($avatars,1); $avatar = $avatars[$random]; } $file = fopen($dir.'/'.$avatar,'r'); $content = fread($file,filesize($dir.'/'.$avatar)); fclose($file); die($content); ?>

Kullanım Şekli ; Üstteki kodu foto.php olarak kaydettikten sonra , kaydettiğiniz dosyanın bulunduğu alana foto/ isminde klasör oluşturun ve içine jpg yada gif formatında reesimlerinizi ekleyin. Kullanım şekli olarak normal src olarak çağırdığınız resimler yerine bu php dosyasını alttaki gibi çağırıcaksınız.

Sitenizde sağ tuş menüsü

Spaksu — Sat, 23 Feb 2008 08:43:18 +0000

Eskiden internet sitelerinde sağ tuş tıklayıp kaynak kodlarını yada resimlerini (ç)almak isteyenler olurdu ki şimdi de var. Bunun için bir sürü yöntem geliştirildi sağtuş yasakları gibi. İşe yaranabilirliği tartışılır. Vereceğim yöntem çok az sitede kullanılıyor ancak sitenin navigasyonuna değer katan bir yöntem olduğu için tercih edilebilecek bir yöntem. Yöntem sağtuşu bir nevi site menüsü haline getiriyor. Menü içeriğini istediğiniz şekilde değiştirmenizi sağlıyor.Bu da navigasyonda avantaj sağlıyor. Uzatmadan siteyi vereyim ingilizce açıklamalar ve download için bu siteye girin ;

http://yura.thinkweb2.com/scripting/contextMenu/