HTML sayfası içinden CSS ve Javascript dosyalarına nasıl link verilir?


Basit bir HTML dosyasını dışarıdan stilize etmek için CSS kullanırız. Aynı şekilde sayfamıza etkileşim katmak için ise Javascript kullanırız. Her ikisi de mevcut html dosyası içerisinde dışarıdan linkle ithal edilmeksizin direkt olarak tanımlanabilmektedir. Ancak bu kod okunabilirliği ve modülerlik bakımından tercih edilen bir yöntem sayılmaz.
Peki nasıl tanımlarız dış CSS ve Javascript dosyalarını: Aşağıda gösteriliyor:

https://gist.github.com/suatatan/f2fc490f01359d2cc13f.js

Reklamlar

Google Jsapi ile JQuery üzerinden AJAX post işlemi


Aşağıda yazdığım hazır şablon AJAX post işlemlerinizi kolayca yapabilmeniz içindir. Form elementlerini ve formun post edileceği kısmı değiştirdikten sonra sayfa yenilemesi olmadan form yollama ve sonucu sonuç alanına yazdırma için kolayca kullanabilirsiniz.

https://gist.github.com/2422149d5e4ccde76a52.js

Excel makroları içinde gelişmiş denetimli formüller yazma


Bazen excel’deki formüllerin yetmediği durumlar olabilir. Mesela içiçe 5 eğer fonksiyonu veya karmaşık matematiksel hesaplamalar gibi. Bu durumlarda excel makrolarını kullanabilirsiniz.
Aşağıdaki ekte bulunan makro bundan evvel  şu makalede anlattığımız python ile yaptığımız parasal değere karşılık risk analizi yapan formülasyonun  excel makrosu dili (VBA) ile yazılmış halidir.
Şu adresten indirip makro alanına import edebilirsiniz.
https://docs.google.com/open?id=0B2QbjSFSlgaMX2NJWkU2U0dhT28

Makro kaynak kodları ise şöyle:

Sub VeriKontrol()
    ‘For dongumuzu acalim
    For i = 1 To 99
        ‘Parasal degerimizi tanimliyoruz
        Dim parasal_deger As Long
        ‘Sonra bu degere A1,A2,A3… hucremizden aldigimiz degeri atiyoruz her seferinde
        parasal_deger = Range(“A” & i)
        
        ‘Parasal degerimizi checkediyoruz.
        ‘Bunun icin parasal degeri x sayalim
        Dim x As Long
        x = parasal_deger
        ‘Risk degerimizi varsayian olarak 0 atayalim
        Dim risk As Integer
        risk = 0
        ‘If blogumuz pythondaki : yerine Then ve sonda Endif kullandik
        If x > 10000 And x
            risk = 1
        ElseIf x > 100000 And x
            risk = 2
        ElseIf x > 500000 And x
            risk = 3
        ElseIf x > 1000000 And x
            risk = 4
        ElseIf x > 2000000 Then
            risk = 5
        Else:
            risk = 0
        End If
        ‘Simdi hesaplanan risk degerimizi B sutunumuza siraliyoruz
        Range(“B” & i) = risk
        ‘For dongumuzu guzel guzel next ile devam ettiryoruz
        Next i
End Sub

Python ile Excel Manipülasyonu


Python üzerinden Excel dosyalarına erişim sağlayarak içindeki verileri alıp işlemek ve daha sonrasında bu verileri excel dosyasına yazdırmak pratik bir çözüm olabilir. Çünkü bazen exceldeki formüllerle aşılamayacak durumları oluyor. Bu durumlarda büyük miktardaki verileri python ile işlemek büyük kolaylık sağlıyor. Bu iş için  excel dosyası ile okuma operasyonlarında xlrd ve yazma operasyonlarında xlwt kütüphanelerini kullanacağız.
Aşağıdaki hazırladığım örnek risk.xls dosyası içindeki parasal değerleri alıp, risk değerli olarak 1 ila 5 arasındaki değerleri atıyor. Sonra bu sonuçları output-risk.xls dosyasına yazdırıyor.

İşte kodlar:

# -*- coding: utf-8-*-
import xlrd
import xlwt
#read

“”“
tek satira kaydedilmiş proje parasal degerlerini check edip
risk degerlendirmesi yapar 1 ila 5 arasindaki risk puanlarini bulur.
output-risk.xls dosyasina parasal degerler ve karsilik gelen risk degerlerini yazar
”“”
class DataController:
    def data_risk_test(self,parasal_deger=0):
        x=parasal_deger
        if (x>10000)&(x
                risk=1
        elif(x>100000)&(x
            risk=2
        elif(x>500000)&(x
            risk=3
        elif(x>1000000)&(x
            risk=4
        elif(x>2000000):
            risk=5
        else:
            risk=0
        return risk
   
    def risk_test(self):
        okuwb = xlrd.open_workbook(‘risk.xls’)
        okuwb.sheet_names()
        okuhucre = okuwb.sheet_by_index(0)
        okuhucre = okuwb.sheet_by_name(u’Sheet1’)
        #write
        yazwb = xlwt.Workbook()
        yazhucre = yazwb.add_sheet(‘Otomatik1’)
        risk=0
        i=0
        for rownum in range(okuhucre.nrows):
            #print sh.row_values(rownum)
            VAL=okuhucre.row_values(rownum)
            x=VAL[0]
            risk=self.data_risk_test(x)           
            #print str(x)+“:”+str(risk)
            yazhucre.write(i,0,x)
            yazhucre.write(i,1,risk)
            i=i+1
        yazwb.save(“output-risk.xls”)
        print “**Risk kontrolleri yapilarak output-risk.xls dosyasina islendi”
#**********************
dc=DataController()
dc.risk_test()

#———————————————-

Bu kodları aşağıdaki linkten indirebilirsiniz:
https://docs.google.com/open?id=0B2QbjSFSlgaMemZqSnl2T1BtOVE

Aynı işi Makro (Excel VBA) ile yapmak isterseniz şu makaleme bakın:
http://blog.suatatan.com/2012/06/excel-makrolar-icinde-gelismis.html

Aynı işi Google App Script ile yapmak isterseniz şu makaleme bakın:
http://blog.suatatan.com/2012/06/google-app-script-ile-tablo.html
   

Kendiliğinden kayma özelliği de olan basit bir Jquery content slider


Bundan önceki yazımızda kendiliğinden kaymayan yanlızca kullanıcı sayıların üzerine gelince kayan bir “kayar haber” scripti hazırlamıştık. Şimdi ise sitesini hazırladığım bir arkadaşımızın talebi üzerine, çoğu haber sitesinde olduğu gibi kullanıcı karışmasa dahi kendiliğinden kayma efekti veriyoruz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması-otomatik akış da dahil edildi
Her hakkı saklıdır
-->



Suat ATAN's Simple News Slider

http://www.google.com/jsapi

google.load("jquery", "1.4.2");




$(document).ready(function() {
/*HUMAN INTERACT*/
$(".slide").not(":first").hide();

$(".slide-hook").mouseover(function() {
var index = $(".slide-hook").index(this);

$(".slide").hide();
$(".slide:eq(" + index + ")").show();

$(".slide-hook").css("color", "black");
$(this).css("color", "red");
});
/*AUTOSCROLL*/
var timer = setInterval(rotate, 4000);

});
//dr
function rotate() {
var cur_slide = $(".slide:visible");
var ls_slide = $(".slide:last");
var fr_slide = $(".slide:first");

if(cur_slide.html() != ls_slide.html()) {
cur_slide.hide();
cur_slide.next(".slide").show();

} else {
cur_slide.hide();
fr_slide.show();
}
}



.slide-hook {
float: left;
padding: 5px;
background-color: #990000;
border-right: solid 1px #C2E1EF;
}
.slide-image {
width: 500px;
height: 375px;
}
#slider {
width: 500px;
height: 550px;
}
.slide {
}









Title 1




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 2




Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 3




Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3


slide-image





Title 4




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image






1


2


3


4




Burada mantık şudur: rotate fonksiyonumuz o anda “visible” yani görünür olan “slide” elemanını saklayıp, bir sonraki “visible” ediyor. En son slide’a gelince onu da saklayıp bu kez ilk elemanı visible ediyor.

Bu fonksiyonu da setInterval ile 4000 milisaniyede bir çağırıyoruz. setIntetval fonksiyonu aslında bir tetik fonksiyon. Bir insanın düzenli olarak aynı hareketi yapması gibi bir durum. Gerisi tamamen zamanlama dışı klasik fonksiyonlar.

Kendiliğinden kayma özelliği de olan basit bir Jquery content slider


Bundan önceki yazımızda kendiliğinden kaymayan yanlızca kullanıcı sayıların üzerine gelince kayan bir “kayar haber” scripti hazırlamıştık. Şimdi ise sitesini hazırladığım bir arkadaşımızın talebi üzerine, çoğu haber sitesinde olduğu gibi kullanıcı karışmasa dahi kendiliğinden kayma efekti veriyoruz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması-otomatik akış da dahil edildi
Her hakkı saklıdır
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Suat ATAN's Simple News Slider</title>
		<!--JQUERY-->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load("jquery", "1.4.2");

		</script>
		<!--OUR SCRIPT-->
		<script type="text/javascript">
			$(document).ready(function() {
				/*HUMAN INTERACT*/
				$(".slide").not(":first").hide();

				$(".slide-hook").mouseover(function() {
					var index = $(".slide-hook").index(this);

					$(".slide").hide();
					$(".slide:eq(" + index + ")").show();

					$(".slide-hook").css("color", "black");
					$(this).css("color", "red");
				});
				/*AUTOSCROLL*/
				var timer = setInterval(rotate, 4000);

			});
			//dr
			function rotate() {
				var cur_slide = $(".slide:visible");
				var ls_slide = $(".slide:last");
				var fr_slide = $(".slide:first");

				if(cur_slide.html() != ls_slide.html()) {
					cur_slide.hide();
					cur_slide.next(".slide").show();

				} else {
					cur_slide.hide();
					fr_slide.show();
				}
			}
		</script>
		<!--CSS-->
		<style type="text/css">
			.slide-hook {
				float: left;
				padding: 5px;
				background-color: #990000;
				border-right: solid 1px #C2E1EF;
			}
			.slide-image {
				width: 500px;
				height: 375px;
			}
			#slider {
				width: 500px;
				height: 550px;
			}
			.slide {
			}

		</style>
	</head>
	<body>
		<div id="slider-capsule">
			<div id="slides">
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm5.static.flickr.com/4004/4612662356_888c2a81ca.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 2</h2>
					</div>
					<div class="slide-text">
						Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm6.static.flickr.com/5008/5307303826_a33a56c1ae.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 3</h2>
					</div>
					<div class="slide-text">
						Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3574/3341953499_ab044c925a.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 4</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3564/3342789118_9de9992351.jpg" alt="slide-image">
					</div>
				</div>
			</div>
		</div>
		<div id="slider-navig">
			<div class="slide-hook">
				1
			</div>
			<div class="slide-hook">
				2
			</div>
			<div class="slide-hook">
				3
			</div>
			<div class="slide-hook">
				4
			</div>
		</div>
		</div>
	</body>
</html>

Burada mantık şudur: rotate fonksiyonumuz o anda “visible” yani görünür olan “slide” elemanını saklayıp, bir sonraki “visible” ediyor. En son slide’a gelince onu da saklayıp bu kez ilk elemanı visible ediyor.

Bu fonksiyonu da setInterval ile 4000 milisaniyede bir çağırıyoruz. setIntetval fonksiyonu aslında bir tetik fonksiyon. Bir insanın düzenli olarak aynı hareketi yapması gibi bir durum. Gerisi tamamen zamanlama dışı klasik fonksiyonlar.

Basit bir Jquery news slider uygulaması


İnternette bulunan yüzlerce karmaşık news slider ya da content slider scriptinden sıkıldıysanız, aşağıda “kendi ellerimle” hazırladığım Jquery news slideri tam size göre.

Aşağıdaki kodları indirip bir html dosyasına kayderek direkt olarak çalıştırabilirsiniz.

Sorularınız olursa çekinmeden sorunuz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması
Her hakkı saklıdır
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Suat ATAN's Simple News Slider</title>
		<!--JQUERY-->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load("jquery", "1.4.2");

		</script>
		<!--OUR SCRIPT-->
		<script type="text/javascript">
			$(document).ready(function() {
				$(".slide").not(":first").hide();

				$(".slide-hook").mouseover(function() {
					var index = $(".slide-hook").index(this);

					$(".slide").hide();
					$(".slide:eq(" + index + ")").show();

					$(".slide-hook").css("color", "black");
					$(this).css("color", "red");
				});
			});
			//dr
		</script>
		<!--CSS-->
		<style type="text/css">
			.slide-hook {
				float: left;
				padding: 5px;
				background-color: #990000;
				border-right: solid 1px #C2E1EF;
			}
			.slide-image {
				width: 500px;
				height: 375px;
			}
			.slide{
				
			}
			
		</style>
	</head>
	<body>
		<div id="slider-capsule">
			<div id="slides">
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm5.static.flickr.com/4004/4612662356_888c2a81ca.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 2</h2>
					</div>
					<div class="slide-text">
						Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm6.static.flickr.com/5008/5307303826_a33a56c1ae.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3574/3341953499_ab044c925a.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 4</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3564/3342789118_9de9992351.jpg" alt="slide-image">
					</div>
				</div>
			</div>
		</div>
		<div id="slider-navig">
			<div class="slide-hook">
				1
			</div>
			<div class="slide-hook">
				2
			</div>
			<div class="slide-hook">
				3
			</div>
			<div class="slide-hook">
				4
			</div>
		</div>
		</div>
	</body>
</html>