KaiseRCrazY.CoM, Serkan Algur » Kodlama http://www.kaisercrazy.com Deliye Bayram Olmayan Gün Mü Var? Wed, 08 Sep 2010 06:13:50 +0000 en hourly 1 Em Hesaplayıcı http://www.kaisercrazy.com/kodlama/em-hesaplayici.html http://www.kaisercrazy.com/kodlama/em-hesaplayici.html#comments Wed, 08 Sep 2010 06:13:50 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1494 CSS yazarken px (pixel) kullanıyorum uzunlukları ve yazıtipi boyutlarında. Ama em olarak da yani tipografik uzunluk olarak hem yazıtiplerinde hem de tasarladığınız sitede diğer alanların uzunluklarında kullanabiliyorsunuz. 1 em 16px uzunluğa denk geliyor. Tabii ki bu zamana kadar px kullanmakta olan birinin işine gelebilir de gelmeyebilir de. Ama hem yazacağınız CSS dosyasında kullanabilirsiniz hem de varolan bir CSS uzantısında kullanılmış olan em uzunluklarını anlamanızı da sağlar. Böylece istediğiniz gibi kullanabilirsiniz. Sitenin adresini aşağıya aktarıyorum. Yeni versiyon olarak sanırım Dreamweaver için eklentisi yapılmış ama online bir araç olarak da kullanımda.

Siteye erişmek için tıklayınız.

Selametle.

No related posts.

]]> http://www.kaisercrazy.com/kodlama/em-hesaplayici.html/feed 0 Siteyle birlikte açılan jQuery Popup http://www.kaisercrazy.com/kodlama/jquery-kodlama/siteyle-birlikte-acilan-jquery-popup.html http://www.kaisercrazy.com/kodlama/jquery-kodlama/siteyle-birlikte-acilan-jquery-popup.html#comments Tue, 31 Aug 2010 12:00:10 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1491 Bu kod kadir a ‘nın Friendfeed üzerindeki şu yazdığı yardım isteğine rastlamamla  ortaya çıkmış oldu. İyi de oldu. Bugün ofiste toplanması gereken iki adet masaüstü bilgisayar vardı. Onları bitirdiğimde biraz ar-ge çalışması :) yaptım. Daha önceden elimde bulunan bir popup scriptini document.ready fonksiyonuyla birleştirme firkriyle bir adım da atmış oldum. Orasıyla burasıyla oynayınca istediğim gibi de ortaya çıktı. Şimdi bunu nasıl yapabileceğinizi anlatmaktan memnuniyet duyacağım. Başlayalım…

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Siteyle birlikte açılan jQuery Popup!</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
centerPopup();
loadPopup();
});
</script>
</head>
<body>
	<center>
		Açılıyoooor :)
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Siteyle birlikte açılan jQuery Popup!</h1>
		<p id="contactArea">
			Bu ufak kodlar ve jQuery sayesinde harikalar yaratabiliriz.
			<br/><br/>
			Açılışta popup gelmesi için biraz kafa yordum :D ama değdi.
			<br/><br/>
			ESC ye popup dışına yada x e basarak kapanabilir.
			<br/><br/>
		</p>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

Popup sisteminin aktifliğini belirleyelim.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Yükleme ve devredışı bırakma komutları

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

Ortalayalım…

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6

	$("#backgroundPopup").css({
		"height": windowHeight
	});

}

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Örneğe bakalım :) tıklayın bu yazıya.

Örnekte de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Note: There is a file embedded within this post, please visit this post to download the file.

Benzer Yazılar:

  1. jQuery ile üst giriş paneli ekleyin!
  2. jQuery İle Bacadan Duman Çıkartalım
  3. HTML5 Drag-Drop

]]> http://www.kaisercrazy.com/kodlama/jquery-kodlama/siteyle-birlikte-acilan-jquery-popup.html/feed 0 HTML5 Drag-Drop http://www.kaisercrazy.com/kodlama/html5-drag-drop.html http://www.kaisercrazy.com/kodlama/html5-drag-drop.html#comments Mon, 30 Aug 2010 10:32:15 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1488 HTML5 ile yapılabilecek şeyler listesinde bulunan Drga&Drop (Sürükle Bırak) yapımı basit bir örnek. HTML5 Tutorial sitesinde bulduğum bir kodlama. Basit bir sistem ile çalışıyor ve örnekte de görebileceğimiz gibi sade bir yapıya sahip. Geliştirilebilir olması da avantaj. Ancak sadece kullandığım Firefox 3.6.8 ile çalıştı. Chrome ve Opera ile denediğimde sanırım daha desteklenmediği için sistemsel olarak çalışmadı. Ama denemeye değer bir sistem.

Kodu Ekliyorum aşağıya. Kodun altında örneğe ait bir link te bulacaksınız;

<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/>
<center><title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
#boxA, #boxB, #boxC {
float:left; width:165px; height:165px; padding:10px; margin:10px;
}

#boxA { background-color: #474747; }
#boxB { background-color: #474747; }
#boxC { background-color: #474747; }

#drag, #drag2, #drag3 {
width:30px; height:30px; padding:5px; margin:5px;
-moz-user-select:none;
}
#drag { background-color: #e8e8e8;}
#drag2 { background-color: orange;}
#drag3 { background-color: purple; border:3px brown solid;}

</style>
<script type=”text/javascript”>
function dragStart(ev) {
ev.dataTransfer.effectAllowed=’move’;
//ev.dataTransfer.dropEffect=’move’;
ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}

function dragEnter(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
return true;
}

function dragOver(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
var id = ev.target.getAttribute(‘id’);
if( (id ==’boxB’ || id ==’boxA’) && (idelt == ‘drag’ || idelt==’drag2′))
return false;
else if( id ==’boxC’ && idelt == ‘drag3′)
return false;
else
return true;
}

function dragEnd(ev) {
ev.dataTransfer.clearData(“Text”);
return true
}

function dragDrop(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(idelt));
ev.stopPropagation();
return false; // return false so the event will not be propagated to the browser
}

</script>
</center></head>
<body>
<h1>Drag and drop HTML5 demo</h1>
<div>there are many other variables that can be used also, we will coer this another day.
</div>

<div id=”boxA”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>

<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag2″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag3″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

</div>

<div id=”boxB”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>

<div id=”boxC”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>
<div style=”clear:both”>Example created by <a href=”http://html5tutorial.net/”>HTML Tutorials</a>.</div>
</body>
</html>

Örnek linki için tıklayın…

Selametle…

Benzer Yazılar:

  1. jQuery ile üst giriş paneli ekleyin!
  2. IIS 7 Üzerinde Joomla SEO!

]]> http://www.kaisercrazy.com/kodlama/html5-drag-drop.html/feed 0 HTML Dosyalarınızı Temizleyin… http://www.kaisercrazy.com/kodlama/html-dosyalarinizi-temizleyin.html http://www.kaisercrazy.com/kodlama/html-dosyalarinizi-temizleyin.html#comments Fri, 27 Aug 2010 09:33:24 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1473 HTML bir şablon yazarken veya CSS dosyalarınızın optimizasyonunu yaparken sıkıntı yaşıyorsanız size üç adet araç önereceğim. Bunları kurmanız gerekmiyor çünkü bunlar internet üzerinden hallediliyor :) Çoğumuz minify tarzı eklentilerle javascript ve css dosyalarımızın boyutlarında ve dosya sayısında azaltmaya giderek sitelerimizin kullanıcılar için daha hızlı ve efektif olması için çalışıyoruz. CSS dosyaları çok büyük olabiliyor. HTML kodlarımız da WC3 standardına uymayabiliyor bazen. Bu üç araç bizim için bunları düzenlemek görevini üstleniyor. Aşağıda bunları sıralayacağım.

1. HTML Tidy Online

Bu sistem ile internet ortamından belirli bir linkte bulunan html sayfamızı ya da elimizde bulunan dosyayı gerek siteye yüklemek gerekse kodları site içindeki istenen yere kopyala-yapıştır usulüyle kodlarımız içinde yaptığımız hataları bulup bunların temizliğini ve düzeltimlesini sağlayabiliyoruz.  Dosyalarımızı WC3 standartlarına uygun hale getirebildiğini söyleyen bu site bence kullanışlı yaptığım bir iki kodu karşılaştırdım ve bazı eksikleri gösterdi. Denemeye değer.

2. HTML / XHTML Beautifier

Webmaster Gate sitesinin bir aracı olan bu sistem de online dosya ekleme ve kodları ekleme yöntemiyle WC3 standartlarına göre kodlarınızı kontrol eden ve gerekirse düzeltmeleri yapan bir özelliğe sahip. HTML Tidy Online tarzında çalışan sistem de denemye değer olarak göze çarpıyor. İkisinin arasında pek fark yok gibi.

3. Code Beautifier

Bu site ise tamamiyle CSS bazlı bir temizlik ve kontrol sağlıyor. 23,75Kb gibi büyüklükte olan dosyamı 18Kb gibi bir büyüklüe kadar indirdi. çoğu yapmış olduğum hatayı da neredeyse 0 a indirdi. Oldukça kullanışlı ve Kodlara göstereceği insiyatifi de siz belirleyebiliyorsunuz. Tek satırda okunabilir bir CSS dosyası haline getirebiliyor kodlarınızı. Gördüklerim arasında en kullanışlı ve yazmaya değer site diye düşünüyorum.

Benzer Yazılar:

  1. Minify nedir biliyor musunuz?
  2. Google Arama Sayfası Arkaplanı
  3. jQuery ile üst giriş paneli ekleyin!

]]> http://www.kaisercrazy.com/kodlama/html-dosyalarinizi-temizleyin.html/feed 0 jQuery İle Bacadan Duman Çıkartalım http://www.kaisercrazy.com/kodlama/jquery-kodlama/jquery-ile-bacadan-duman-cikartalim.html http://www.kaisercrazy.com/kodlama/jquery-kodlama/jquery-ile-bacadan-duman-cikartalim.html#comments Thu, 13 May 2010 13:34:17 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1329 Oldukça basit ve sanırım kullanışlı olabilecek bir efekti tanıtacağım size bugün. Anca vakit buldum işlerimden. Hatta iş değiştrdiğimi bile yazamayacak kadar yoğun geçti şu iki hafta. Boş zamanlarımda da unuttum yazmayı :). Neyse “Bacadan duman türrütmek” diye de tabir edebileceğimiz bu efekt (Smoke Puff Effect) ile sanki bir bacadan duman veya artık hangi resim isterse çıkartabilme yetsine sahip bir kodlama yapıyoruz. İsterseniz ufaktan başlayalım.

Aslı astarını birkaç kod parçası olan bu efekt için öncelikle bize  harici bir bağlantıdan (Örnek: google)  ya da lokal sunucumuzdan ekleyeceğimiz jQuery, bir iki imaj ve haya gücümüz lazım. Kodlara gelince;

İster sıfırdan bir HTML dosyası oluşturun, isterseniz varolan bir sitede deneyin. <head> ve </head> arasına aşağıdaki kodları ekleyin. Daha önceden dahil ettiğiniz bir jQuery varsa öncelikle onu kaldırın tabii.

<link href='css/smokePuff.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="js/smokeEffect.js" type="text/javascript"></script>

Bunu eklediniz mi? Çok Güzel. Şimdi çağırmamız gereken bir iki imaj dosyası var. Onları yavaş yavaş çağırırken bu arada efektimizin olacağı div lanını da oluşturalım.

<div id="smokeSpawnPoint">
	<img src='imajın-linki' alt='fabrika' />
</div>

Şimdi Fabrikamızı Çağırdığımıza göre ondan çıkıcak dumanı da çağırabiliriz. Bu dumanı isterseniz fabrika imajından önce de ekleyebilirsiniz.

<script type='text/javascript'>
	SmokeEffect.imgLocation = "http://www.siteadresi.com/resimler/duman.png";
	SmokeEffect.smokeWidth = 100;
	SmokeEffect.smokeHeight = 100;
</script>

Dumanı da çağırdık.  Şimdi tek kalan bu dumanın nereden nereye çıkacağını ve nasıl bir iş yapacağını düzenlemeye geldi. Bunun için de ufak ve basit bir javascript yazacağız.

<script type='text/javascript'>
	SmokeEffect.makeEffect("smokeSpawn", 24, 12);
</script>

Bitti desem inanırmısınız? :)

Örneğe Şuradan Bakabilirsiniz.

Kaynak Dosyasını ve örneği indirmek için;

Note: There is a file embedded within this post, please visit this post to download the file.

Bu yazının ve efekti tanıtan kişinin asıl yazısına ulaşmak için tıklayın…

Benzer Yazılar:

  1. jQuery ile üst giriş paneli ekleyin!
  2. Linklere Balooon!
  3. AdBlock Plus Eklentisini Engellemek!

]]> http://www.kaisercrazy.com/kodlama/jquery-kodlama/jquery-ile-bacadan-duman-cikartalim.html/feed 0 AdBlock Plus Eklentisini Engellemek! http://www.kaisercrazy.com/cms-sistemleri/wordpress/adblock-plus-eklentisini-engellemek.html http://www.kaisercrazy.com/cms-sistemleri/wordpress/adblock-plus-eklentisini-engellemek.html#comments Sun, 21 Mar 2010 20:42:27 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1244 Çoğunuz Firefox ile eklentiler kullanıyorsunuz. Ben de kullanıyorum. Ama öyle bir eklenti var ki bu tüm dünyadaki insanların istenmeyen reklamları görmemesini sağlıyor ama aynı zamanda Web Yayımcılarının kazançlarını sıfıra çekiyor bir anda. Evet AdBlock Plus‘tan bahsediyorum. Güzel bir eklenti olduğundan hiç mi hiç şüphem yok, hatta ben de kullanıyorum. Ama şöyle birşey var. Google Adsense dahil içinde javascriptlerde olsun kodlarında olsun “ad“, “ad server” gibi cümleler geçen tüm kodları engelliyor. Buda site gelirlerini sıfıra indirgiyor.

Sorun da orda doğuyor zaten. Sitemde bir yada iki alanda reklam ekliyorum. Hatta bazen hiç eklemediğim de oluyor ama bu işten para kazananların tüm kazancı sıfırlanıyor! Tabiiki erotik içerikli sitelerdeki açılan milyonlarca reklamı engelleme güzel birşey internet kullanıcılarının bu kesimi için. Neyse ben bu kodu nasıl aşabilirz ve hatta reklamları yayınlayamasak da serzenişimizi nasıl duyurabileceğimizi göstereceğim.

Öncelikle isterseniz aşağıdaki kodu halihazırda çağırdığınız bir java dosyasının içine entegre edin, isterseniz bundan bir dosya oluşturup (adının içinde sakın “ad” geçmesin “fj.js” gibi bişi olabilir) ikinci kodun içinde çaığırın. AdBlock Plus’u delip yazdığımız şeyi gösteren kod :)

adblock = false;

Dediğim gibi bunu bir dosya içinden çağırın ve Reklamı eklediğiniz yere bir div açarak class olarak “a” atayın. Aşağıdaki gibi birşey olacak.

<div class="a">
<!-- Reklam Kodunuz -->
</div>

Sonra o divin bitimine şu kodu ekleyin.

<script type="text/javascript">
<!--
	var adblock = true;
//-->
</script>
<script type="text/javascript">
<!--
	if(adblock) {
		var allElements = document.getElementsByTagName('div');
		for (var i = 0; i < allElements.length; i++) {
			if (allElements[i].className == 'a') {
				allElements[i].innerHTML = '<strong>Selam Arkadaşım</strong>, Firefox ile Beraber AdBlock Plus Kullandığını görüyorum. Site içerisinde olduğunca az Reklam Kodu eklemeye çalışıyorum ve bu siteyi ayakta tutmak oldukça zor. Google Adsense Kullnıyorsan sen de buna karşısındır. Lütfen AdBlock plusu bu sayfada etkisiz kılabilirmisin?.';
			}
		}
	}
//-->
</script>

Son görünüm böyle olacak;

<div class="a">
<!-- Reklam Kodunuz -->
</div>
<script type="text/javascript">
<!--
	var adblock = true;
//-->
</script>
<script type="text/javascript">
<!--
	if(adblock) {
		var allElements = document.getElementsByTagName('div');
		for (var i = 0; i < allElements.length; i++) {
			if (allElements[i].className == 'a') {
				allElements[i].innerHTML = '<strong>Selam Arkadaşım</strong>, Firefox ile Beraber AdBlock Plus Kullandığını görüyorum. Site içerisinde olduğunca az Reklam Kodu eklemeye çalışıyorum ve bu siteyi ayakta tutmak oldukça zor. Google Adsense Kullnıyorsan sen de buna karşısındır. Lütfen AdBlock plusu bu sayfada etkisiz kılabilirmisin?.';
			}
		}
	}
//-->
</script>

Resim olarak da AdBlock Plus kodunuzu engelleyince şu yazı ile karşılaşacak okur. İsterseniz yazıyı değiştirebilirsiniz.

Benzer Yazılar:

  1. Minify nedir biliyor musunuz?
  2. Linklere Balooon!
  3. jQuery ile üst giriş paneli ekleyin!

]]> http://www.kaisercrazy.com/cms-sistemleri/wordpress/adblock-plus-eklentisini-engellemek.html/feed 0 Minify nedir biliyor musunuz? http://www.kaisercrazy.com/kodlama/php/minify-nedir-biliyor-musunuz.html http://www.kaisercrazy.com/kodlama/php/minify-nedir-biliyor-musunuz.html#comments Wed, 20 Jan 2010 18:08:30 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1126 WordPress, Joomla gibi sistemler kullanırken eklediğimiz pluginler veya kendi yazdığımız ufak tefek eklentilerin ayrı birer css ve javascript dosyaları olabiliyor. Biz bunları wpheader.php veya header.php içine entegre etmek yoluyla sitemizde çağırıyoruz. Fakat bu çağırdığımız her dosya hem kullandığımız hazır sistemin, hem de sitemizin yükünün ağırlaşmasına ve dolayısıyla site yüklenme zamanına etki ediyor. 0,5 sn gibi bir sürede açılabiledcek bazı siteler yaklaşık 3 sn gibi bir sürede açılabiliyor. Bunu engellemek için güzel bir kodlama var aslında. Google Code alanındaki projeler içinde gezerken buldum sayılır.

Minify projesinin amacı bütün css ve javascript dosyalarını bir link üzerinden çağırıp (yani onları bir nevi birleştirip çağırmak) site üzerindeki yükü hafifletmek, böylece kulanıcı dostu, çabuk erişebilen siteler yapmak isteyenlere yardımcı olmak. Burada tanıtım tarzında geçeceğimden çok uzun uzadıya anlatmayacağım ama ileride onlara ait Kullanıcı El Kitabını ve diğer kaynakları türkçeleştirip pdf olarak bu konuyu devam ettirmeyi düşünüyorum.

Mantık olarak zaten yukarıda anlattığım bu sistemi indiriyorsunuz, sitenizin ana dizinine (root yada public_html dizini) atıyorsunuz ve birkaç ufak ayardan sonra siteadresiniz.com/mini uzantısı (yada hangi adı verirseniz) yoluyla kullanmaya başlıyorsunuz.

Siz java ve css dosyalarım burada diye bildirdikten sonra o size çok kullanışlı ve tek satır tarzında bir kod veriyor. Siz bunu kullanmaya başladığınızda aşağıdaki resimde de göreceğiniz gibi sitenizdeki dosyaların çağırılması azalıyor. Bu arada hatırlatmam gereken birşey var. Eğer eklentilerin css ve javascript dosyalarını çağıracaksanız ikilem yapmamak için eklentilerin bu dosyaları otomatik çağırmasını engellemelisiniz. Ha bu arada bu sistem için sunucunuzda PHP5 kurulu olmalı :)

İşte o fark yaratan resim.

Öncesi

Sonrası

İşte bu yukarıdaki resimler gibi istek azalıyor.

Sizin önceki kodunuz aşağıdaki gibiyken;

<script type="text/javascript" src="http://www.siteadınız.com/wp-content/themes/d_s/js/BubbleTooltips.js"></script><script type="text/javascript" src="http://www.siteadınız.com/wp-content/plugins/wp-recentcomments/js/wp-recentcomments.js"></script> . . .

Kullandıktan sonra ekleyeceğiniz kod;

<script type="text/javascript" src="/min/f=wp-content/themes/d_s/js/BubbleTooltips.js,wp-content/themes/d_s/js/mootools.svn.js,wp-includes/js/jquery/jquery.js,wp-content/plugins/wp-recentcomments/js/wp-recentcomments.js"></script>

Şeklinde olacak. Böylece sanırım hem siz, hem de kullanıcılarınız bir oh çekecektir. Hadi Selametle…
Minifye nasıl ulaşacağım diyorsan:

Benzer Yazılar:

  1. Linklere Balooon!
  2. jQuery ile üst giriş paneli ekleyin!

]]> http://www.kaisercrazy.com/kodlama/php/minify-nedir-biliyor-musunuz.html/feed 3 Linklere Balooon! http://www.kaisercrazy.com/cms-sistemleri/wordpress/linklere-balooon.html http://www.kaisercrazy.com/cms-sistemleri/wordpress/linklere-balooon.html#comments Fri, 15 Jan 2010 18:44:54 +0000 Serkan Algur http://www.kaisercrazy.com/?p=1122 Hani eskiden vardı balon satan amcalar “Bebelere Baloooon!” diye bağırırdı ya başlık ta öyle geldi akılma :) Aslında anlatacağım Tooltip yapımı ancak Dilimizde baloncuk gibi birşey kullanmak ta iyi gider sanki. Şaka bir yana javascript ile css kullanılarak yapılmış olan tooltip tarzı şeyleri temalarımıza ekleyebilmekteyiz. Tabiiki jQuery ile birlikte de bunların efektli olanları da yapılabilir durumda. Ama ben özelleştirebileceğiniz ve sitenizde istediğiniz yerde kullanabileceğiniz bir çeşitleme yapabilirsiniz. Ben sitemde Beni takip edin bölümünde kullandım. Siz de istediğiniz yer de kullanabilirsiniz. Hadi başlayalım…

Önce bir resim…

Site zaten demo alanı gibi oldu ama bir resim de şuraya ben eklemek istiyorum. Resmin üzerine tıklarsanız büyük halini de görebilirsiniz. Bu resimde görüldüğü üzere RSS simgesi üzerine geldiğinizde Bir başlık ve altında da bir link göreceksiniz. İşte bu script a href=” ile başlayıp devam eden link kodumuza eklediğimiz title ve yazdığınız linki alarak bu baloncuk içine yazıyor. bu bana güzel geldi ve kullanmak ihtiyacım vardı ve kullandım. Sizde kullanın diye buraya ekliyorum. bu kadar lak lak yeter. Hadi başlayalım…

İşte o kod!

Bu kod iki aşamalı oalrak düşünülebilir neden mi. Bir nerede kullanacağınız seçmenize gerek kalmayan kullanım var. Bir de istediğiniz yeri belirleyeceğiniz aşama. Şimdi öncelikle saf kodu ekliyorum buraya. Bu kodu header.php dosyası içine wp_head etiketinden önce ekleyin.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

İşte bu kod dışında benim yaptığım gibi özel bir alan için de kullanabileceğiniz kod burda. Burada enable Tooltips alanını özelleştirebilirsiniz. Kod aşağıda :)

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

Yukarıda content yazarak sitemizdeki Content alanında tüm bulunan linkleri tooltip olarak ayarlamış olduk. Burada seçmeniz gereken id alanı div içinde kullandığımız id alanıdır.

Gelelim CSS olayına…

Bu kodu style.css dosyanıza direkt oalrak ekleyin. Gerisini java halleder :)

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

Bu aşamada bir imaj ve bir de java dosyası gerekli. Onu da şu aşağıdaki dosya içinde bulabilirsiniz. İndirdiğiniz dosya tam olarak bu anlattıklarım ve örnekleriyle doludur. Hadi Selametle… Orjinal Yazı!

Note: There is a file embedded within this post, please visit this post to download the file.

Benzer Yazılar:

  1. jQuery ile üst giriş paneli ekleyin!

]]> http://www.kaisercrazy.com/cms-sistemleri/wordpress/linklere-balooon.html/feed 0 Wamp Server Kurulumu http://www.kaisercrazy.com/kodlama/php/wamp-server-kurulumu.html http://www.kaisercrazy.com/kodlama/php/wamp-server-kurulumu.html#comments Wed, 31 Dec 2008 22:52:43 +0000 Serkan Algur http://www.kaisercrazy.com/?p=272 Php Nuke ya da diğer Php + MySQL + Apache üçlüsünü kullanan İçerik Yönetim Sistemlerinden birini kurmak, kullanmak, denemek istiyorsanız ilk yapmanız gereken şey bilgisayarınızı PHP uygulamalarını çalıştırabilir hale getirmek olmalı.

Php + MySQL + Apache üçlüsünü kolayca bilgisayarınıza kurmanızı sağlayacak hazır bir paketle bu işin nasıl yapılacağını adım adım görelim.

Kullanacağımız paket WAMP server.
Bize lazım olan her şeyi içeriyor.

WAMP5 1.7.0
Note: There is a file embedded within this post, please visit this post to download the file.
adresinden indirilebilir.

Aşağıdakiler paketin içinde yer alıyor.
Apache 2.0.58
PHP 5.1.4 + PECL
SQLitemanager
MySQL 5.0.22
Phpmyadmin 2.8.1 versiyonu. (Bunu daha sonra güncelleyeceğiz)

WAMPSERVER 5.1.6.4a’yı indirdinizse kuruluma başlayalım.
İndirdiğimiz kurulum paketini çift tıklayarak çalıştırıyoruz, bizi Setup ekranı karşılıyor.

Bu ekrandan Next – İleri’yi tıklayarak sonraki ekrana geçiyoruz.

Lisans anlaşmasını onaylıyoruz. İleri’yi tıklıyoruz.

wamp server’in kurulacağı konumu seçiyoruz. Tavsiyem bu konumu değiştirmemeniz.

Program Files içerisinde hangi başlık altında wamp server kısayollarının tutulacağını gösteren ekran. İleri’yi seçiyoruz.

Apache web sunucusunun bilgisayarın açıldığında otomatik olarak çalıştırılmasını Windows’a öğreten seçenek. Bu işaretli olmazsa, web sunucunuzla herhangi bir işlem yapmak istediğinizde Başlat\Program Files\WampServer\Start Wampserver linkinden sunucunuzu çalıştırmak zorundasınız. Bırakın böyle kalsın. İstediğiniz zaman görev çubuğunun altındaki ikonundan her zaman kapatabilirsiniz.

Son kez onaylamamızı isteyen ekran.
Install’ı tıklayarak kurulumu başlatıyor ve bitmesini bekliyoruz.

Bu ekranda c:\wamp sunucu adresimizin içinde web sitelerimizin tutulacağı alan seçiliyor. Bu klasörün içinde açacağımız her klasör sunucumuz tarafından bir web sitesi olarak algılanacaktır.
Bu aşamayı da geçtiğimizde bir uyarı ile karşılaşacağız.
Apache web sunucununun kurulduğunu, çalışır hale geldiğini belirtiyor ve aynı zamanda Windows bir sunucu uygulaması çalışmaya başladı diye bizi uyarıyor.

Burada yapmamız gereken ortadaki Engellemeyi Kaldır yazan butonu tıklamak.
Kurulumla ilgili son ekrana geldik.

Finish’i tıklıyarak bitiriyoruz.

Bilgisayarımızın sağ alt köşesinde (Sistem saati ve hoparlör simgesinin olduğu yer) WAMP serverin yelpazeye benzer ikonu çıkmış olmalı.

Şimdi sunucumuzu deneyelim.
Başlat\Çalıştır yolunu izleyerek http://localhost yazıyoruz.

Tamam’a tıkladığımızda tarayıcı programımız açılıyor ve bizi WAMPSERVER’in açılış ekranı karşılıyor.

Gelen ekranda Tools bölümünün iki altında yer alan PHPmyadmin 2.8.1 i tıklayarak http://localhost/phpmyadmin sayfasına geçiyoruz.

Bu nokta önemli buraya lütfen dikkat edin. Şu anda web sunucunuz açısından iki güvenlik açığı ile karşı karşıyasınız. Bir tane root isimli standart kullanıcının şifresinin olmayışı ötekisi ise PHPmyadmin programının şu anda kurulu olan versiyonu olan 2.8.1 de bazı güvenlik açıklarının olması.
Merak etmeyin her ikisini de çözeceğiz.
Yukarıdaki grafikte en altta İmtiyazlar yazılı olan yeri görüyor olmalısınız. Sizin PHPmyadmin sayfanızda İmtiyazlar yazan yere tıklayın.

Üstteki ekranda gördüğünüz root kullanıcısını seçili hale getirip en sağdaki Kişi Resmi ve Kalem ikonunu tıklayarak şifre düzenleme ekranına geçin.

Ekranında (ekranı biraz aşağı kaydırın) üstteki resimde görüldüğü şekilde root kullanıcısına şifre verip sağdaki GİT yazan ikonu tıklayarak kayıt edin. (ISO-8859-1 karakterlerini kullanın yani Türkçe harfler yok)

İşlemi doğru yaptıysanız üstteki ekranı göreceksiniz.
İşte şimdi herkesin en çok takıldığı noktaya geldik. Şu anda artık PHPmyadmin’e erişemez durumdasınız.
İsterseniz deneyin;
http://localhost/phpmyadmin
Şu ekranı görüyor olmalısınız.

Merak etmeyin her şey yolunda. Bir şeyi bozmadık. Sadece root kullanıcısına ait şifrenizi gerek yere yazacaksınız o kadar.
Bu noktaya tekrar döneceğiz fakat önce PHPmyadmin’in yeni çıkan 2.8.2 versiyonunu yükleyelim.
Aşağıdaki adresten;
http://sourceforge.net/projects/phpmyadmin/
veya bu linkten;
http://sourceforge.net/projects/phpmyadmin/……zip/download
2.8.2 paketini indirin ve bir klasöre açın.

Yukarıdaki ekranda gösterilen klasöre girin ve tümünü seçip kopyalayın.
(CTRL + A sonra CTRL + C)

Yukarıdaki ekranda gösterilen ekrana geçin.
C:\wamp\phpmyadmin klasörü. – eğer değiştirmediyseniz -
Açtığınız arşivin içindekileri buraya yapıştırın. Üstteki ekranda sağ üst köşede görünen config.inc.php ye dikkat edin. Az sonra ona ihtiyacımız olacak. Yukarıda bahsi geçen şifreyi işte bu dosyanın içine yazacağız.
Kopyala işleminiz tamamlandıysa;
c:\wamp\phpmyadmin\config.inc.php dosyasını açın.

Ben editor olarak araneae kullanıyorum. Siz herhangi bir editorle (Notepad mesela) o dosyada 73. satıra gidin. Yukarıdaki ekranda görünen ‘yenisifrenizburaya’ yazan yere kendi (az önce girdiğiniz) şifrenizi girin ve kaydedin.
Şimdi ekranınızda en altta sağ taraftaki wampserver ikonuna sağ tıklayın ve exit ‘i seçerek sunucunuzu kapatın. Birazdan yeniden başlatacağız.
Aşağıdaki şekilde;

Başlat\Program Files\Wampserver yolunu izleyerek sunucunuzu yeniden başlatın.
Artık her şey yolunda ve web sunucunuza (http://localhost) veya phpmyadmin’e (http://localhost/phpmyadmin) erişebiliyor olmalısınız.
Çok küçük bir kozmetik düzeltme kaldı.
Biz az önce phpmyadmin 2.8.2 yüklemiştik fakat hala http://localhost sayfamız bize 2.8.1 gösteriyor. Aslında hata yok, http://localhost/phpmyadmin sayfası doğruyu yani 2.8.2 yi gösteriyor. Gelmişken bu ufak görsel kirliliği de çözelim. c:\wamp\www\ klasörünün içindeki index.php yi herhangi bir editörle açın ve;

75. satırdaki 2.8.1 i 2.8.2 ile değiştirin kaydedin.
Artık versiyonu doğru göreceksiniz.
Tüm işlerimiz bitti artık webmaster işlemlerimize başlayabiliriz.

Yeni bir web sitesi oluşturmak için de şu işlemi yapmanız yeterli.

Şekilde görüldüğü gibi c:\wamp\www\ klasörünün içinde yeni bir klasör oluşturuyoruz.
Şimdi http://localhost yazdığımızda yeni web sitemiz de Your projects bölümünün altında görüntüleniyor. Artık yeni bir web sitemiz var. Ya da en azından yeri var. Dosyalarımızı buraya koyabiliriz.

Açtığımız klasörün ismini tıklar ya da tarayıcımıza adresini yazarsak;
http://localhost/iao
ilgili web sitesi açılacaktır.

Hayırlı olsun.
Zahmet edip bu kadar okuduğunuz için teşekkürler.

Benzer Yazılar:

  1. Easy PHP Kurulum ve Kullanımı

]]> http://www.kaisercrazy.com/kodlama/php/wamp-server-kurulumu.html/feed 0 Easy PHP Kurulum ve Kullanımı http://www.kaisercrazy.com/kodlama/php/easy-php-kurulum-ve-kullanimi.html http://www.kaisercrazy.com/kodlama/php/easy-php-kurulum-ve-kullanimi.html#comments Sun, 07 Dec 2008 13:50:02 +0000 Serkan Algur http://www.kaisercrazy.com/?p=165 EasyPHP nedir?

EasyPHP hali hazırda ücretsiz sunulan web sunucu programlarını bir araya getirmiş yüklemesi kolay bir kurulum paketidir.Normalde bileşenleri ayrı ayrı indirip kurmak münkün olmasına rağmen zaman alıcı kurulum süresi ve birlikte çalışmaları için gereken ayarların zor olması, EasyPHP’nin tercih edilme sebeplerinden biridir.

Pakette neler var?

* MySQL Database System – v4.0.15
* Apache Web Sunucusu – v1.3.27
* PHP Programlama dili – v4.3.3
* PHP MyAdmin Database Interface – v2.5.3

Güvenlik Uyarısı

EasyPHP çokça bilinen açıkları kapatmış olmasına rağmen hala açıkları mevcut. Bu yüzden bu subucuyu bir firewall arkasında çalıştırmakta ve sadece öğrenim amaçlı kullanmakta fayda var. XP kullanıcı için servis olarak çalıştırmaları önerilmez hatta kullanmadığınız zamanlarda sunucuyu kapatmanız sizin yararınıza olacaktır.

Nereden bulabilirim?

Web Sitesi:

http://www.easyphp.org/

Download Sayfası:

http://sourceforge.net/project/showfiles.php?group_id=14045

yada hemen aşağıdan :))

Dosyalar:

Note: There is a file embedded within this post, please visit this post to download the file.

Kurulum:
Başlamadan önce:
1. Eskiden kurduğunuz sunucu programlarını kaldırın. (IIS, Personal Web Server veya eski versiyon Apache sunucusu ve MySQL.)
2. Sisteminizi güncelleştirin. (Windows Update sayfasını kullanabilirsiniz..)
3. Geçici olarak firewall programlarını devre dışı bırakın. (ZoneAlarm or Norton Internet Security)

Sorunlar mı var?

* Yukarıyı yeniden okuyun.
* Bilgisayaınızı yeniden başlatın.
EasyPhp.org sıkça sorulan sorular sayfasını ziyaret edin.

Başlıyoruz:
Kısaca önünüze gelen tüm pencerelere “Next” demeniz yeterli. Yine de ayrıntıları yazdık.
1. ‘easyphp1-1_setup.exe’ programını çalıştırın. Devam etmek için ‘Yes’ e tıklayınız.

2. Hoşgeldiniz penceresi geçmek için “Next” e tıklayınız.

3. PHP lisans sözleşmesi. Sözleşmeyi kabul etmek için ‘Yes’ i seçin ve “Next” e tıklayınız.

4. Uyarı ekranı:
Yeni sürüme geçmeden önce:
* eski bilgilerinizi yedekleyiniz.(scriptler, klasörler, ayar dosyaları, loglar… v.s)
* Apache, MySQL ve ardından EasyPHP yi kapatın.
* Apache ve MySQL servis olarak yüklenmişse devre dışı bırakın (sadece Administrator)
* EasyPHP eski versiyonunu kaldırın (kalan dosya ve klasörleri silin.)
Devam etmek için ‘Next’ e tıklayınız

5. Kurulacak klasörü seçin. (varsayılanı seçmeniz önerilir.)

6. Başlangıç menüsünde görünecek ismi yazın.

7. Ayarları kontrol edin . Devam etmek için ‘Next’ e tıklayınız

8. Yükleniyor. (1. veya 2 dakika sürebilir.)

9. Yükleme tamamlanıyor. Ekstra bilgiler:
* Register global, OFF olarak ayarlandı. Bu eski Php scriplerinin çalışmamasına neden olabilir.
*my.ini dışında tüm dosyalar EasyPHP klasörüne yerleştirildi.
Devam etmek için ‘Next’ e tıklayınız

10. Yükleme tamamlandı. Burada size hoşgeldin sayfasının görüntülenip görüntülenmemesini soruyor. Görüntülemek için ‘ouvrir la page d’accueil’ seçili bırakın. (Not: bu sayfa fransızcadır ) Bitirmek için Finish’ tıklayınız.

Türkçe Dilinin Seçilmesi

Saat Kısmında oluşan EasyPHP simgesine sağ tıklayın ve Configuration Kısmından Açılan Tab içinde EasyPHP Seçin ve Aşağıdaki ayarları yapın (Tabii önce Language alanından Turkish Seçin :) )

EasyPHP yi çalıştırıyoruz:
1. İlk olarak Windows başlangıç menüsünden EasyPHP kısayolunu bularak çalıştırın.
2. EasyPHP çalıştığında görev çubuğunda yanıp sönen ikonu görebiliyor olmanız gerkiyor.
Daha sonra bu ikona çift tıklayarak EasyPHP ayar penceresini açıyoruz.
Not: EasyPHP ikonunu görünmesi sunucunun çalıtığı anlamına gelmez.
3. EasyPHP ayar penceresinin varsayılan dili fransızcadır. Bunu ingilizce yapmak için pencerenin en altındaki kutudaki ‘Francais’ yerine ‘English’ seçiyoruz. Daha sonra ‘Close’ a tıklıyoruz.
4. Görev çubuğundaki ikona sağ tıklayarak EasyPHP menüsüne ulaşıyoruz. Buradan hem sunucuları başlatıp, kapatabilir hem de sunucu ile ilgili ayarlara ulaşabiliriz.

* Help – Yardım sitelerini çağırır..
* Log Files – Apache ve MySQL sunucuları hata raporlarını görmenizi sağlar.
* Configuration – Php, Apache, MySQL, PhpMyAdmin ve EasyPHP ile ilgili ayarlara ulaşmanızı sağlar.
* Explore – Windows gezgini ile web root kalsörüne ulaşmanızı sağlar.Burası web sayfalarınızı sakladığınız klasördür.
* Administration – EasyPHP yönetim sayfasını açar..
* Local Web – Varsayılan web tarayıcısını açarak yerel web sitenize gitmenizi sağlar..
* Restart – MySQL ve Apache sunucularını yeniden başlatır. Sunucular ile ilgili herhangi bir ayar değiştirdiysenizbunu yapmanız gerekebilir.
* Start / Stop – MySQL ve Apache sunucularını açıp kapamanızı sağlar..
* Exit – EasyPHP den çıkmanızı sağlar aynı zamanda MySQL ve Apache sunucularını da kapatır.(servis olarak çalışıyorlarsa sadece EasyPHP kapanır. )

* ‘C:\Program Files\EasyPHP 2.0b1\www’ – web sayfalarınızı kaydettiğiniz klasör.
* ‘http://localhost/’ – Web root
* ‘http://localhost/home/’ – EasyPHP yönetimi
* ‘http://localhost/home/mysql/’ – PHP MyAdmin (popüler MySQL database yönetimi)

Apache ve Php yi test edin:

< ?php
echo 'merhaba php.. ';
?>

bu kodları
C: Program Files\EasyPHP 2.0b1\www klasörü altına merhaba.php olarak kaydedin. Daha sonra http://localhost/merhaba.php adresine gidin.
Açılan sayfada “merhaba php..” yazısını görüyorsanız sorun yok demektir. Çalışmalarınıza başlayabilirsiniz.

No related posts.

]]> http://www.kaisercrazy.com/kodlama/php/easy-php-kurulum-ve-kullanimi.html/feed 0