Staj

11 Eylül 2013 Çarşamba

Format Atma

Daha önce hazırlamış olduğumuz DVD yi bilgisayarımıza takıyoruz.Bilgisayarı kapatıyoruz.Açarken sürekli F11 F12 ve Delete tuşlarına sürekli basıyoruz.Karşımıza boot device geliyor ve oradan DVD yi seciyoruz..Devamını resimlerle takip edelim..

Veri Merkezi (Data Center)

Veri Merkezi(Data Center), bilgisayar sistemleri ile telekomünikasyon ve veri ambarı sistemleri gibi ek sistemleri barındıran bir tesistir. Sunucu odası veya sistem odası olarak da adlandırılan bu tesisler işletmelere ait sunucu ve veri ambarlarının bulunduğu alanlardır. Veri merkezleri genel olarak iki kategoriye ayrılır:özel veri merkezleri ve internet veri merkezleri. Özel veri merkezleri sadece bir kuruluş tarafından kendi hizmetlerinde kullanılır. İnternet veri merkezleri ise üçüncü şahıslara hizmet verir.

Veri merkezlerinde işlenen ve saklanan verinin önem derecesine göre elektrik, mekanik, güvenlik sistemleri değişmektedir. Genel olarak düşünüldüğünde veri merkezleri; yedek güç kaynakları, yedek veri iletişim bağlantıları, merkez içerisinde bulunan sistemlerin soğutulması için kullanılan iklimlendirme sistemleri, yangın söndürme sistemleri ve dış ortamdan gelebilecek tehlikelere karşı verinin güvenlik derecesine göre güvenlik sistemlerini bulundururlar.

İnternet Veri Merkezleri Tarafından Sunulan Hizmetler

Internet veri merkezi tarafından sağlanan ana hizmetler ise yer paylaşımı (co-location) ve barındırma(hosting) olarak adlandırılmaktadır. Bu hizmetler, yönetimin internet veri merkezi işletmesine veya hizmet alan kuruluşa ait olduğu farklı birleşimlerle sunulabilir.
Barındırma(Hosting): Ev sahipliği hizmeti; internet veri merkezinden hizmet alan kuruluşun kendi işi çerçevesinde kullandığı yazılım, veri ve uygulamalarını internet veri merkezinde bulunan sunucular ve veri depolama birimlerinde çalıştırması ve/veya internet veri merkezi işletmecisi tarafından sağlanan uygulamaları kullanmasıdır.
Yer paylaşımı(Co-location): Yer paylaşımı hizmeti; internet veri merkezinden hizmet alan kuruluşun kendi işi çerçevesinde kullandığı (kendisine ait) BT sistemlerini internet veri merkezi alanına kurması, internet veri merkezinin temel altyapı olanaklarını ve ağ altyapısını, isteğe bağlı olarak da yönetim hizmetini kullanmasıdır.
Veri merkezlerinde sağlanan diğer hizmetler; veri tabanı yönetimi, web yönetimi, sunucu yönetimi, servis yönetimi, konfigürasyon yönetimi, performans yönetimi, kullanıcı yönetimi, yedekleme / geri yükleme, ek güvenlik duvarı, ağ ve bilgi güvenliği yönetimi, yük dengeleme, veri ambarı, felaket kurtarma hizmeti, sayısal sertifika.^[5]
Bugün birçok veri merkezi internet hizmet sağlayıcıları tarafından kendilerine ait veya üçüncü şahıs sunucularını barındırmak maksadıyla çalıştırılmaktadır. Bununla birlikte bugüne kadar uygulanan veri merkezleri sadece bir dev şirketin kullanımında olabilir(örneğin Google, Amazon gibi) veya üçüncü şahsa ait sunucuları barındırabilir(co-location) veya ağ bağımsız veri merkezi olarak kullanılabilir.

8 Eylül 2013 Pazar

jQuery Ders Kodlar

<html>
< head>
<title>odev</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0; padding:0;}
.tabMenuUst{width:500px; background:#B44D4D; display:block; text-align:center; float:left; margin:10px auto;}
.tabMenuUst li{display:inline-block; padding:5px 20px;}
.tabMenuUst li a{color:#fff;}
.tabMenuUst li a.secili, .tabMenuUst li a:hover{text-decoration:none; color#000;}

.tabMenuAlt{width:500px; float:left;}
.tabMenuAlt div{width:480px; height:500px; text-align:center; padding10px; background:#956FAC; display:none;}
.tabMenuAlt div.secili{display:Block;}
</style>
< /head>
< body>
<ul class="tabMenuUst">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletisim</a></li>
</ul>
<div style="clear:both"></div>
<div class="tabMenuAlt">
<div class="tabMenu1">
ilk tiklanan
</div>
<div class="tabMenu2">
ikinci tiklanan
</div>
<div class="tabMenu3">
son tiklanan
</div>
</div>
<script>
$('.tabMenuUst li:first-child.a').addClass("secili");
$('.tabMenuAlt div:first-child').addClass("secili");
$('.tabMenuUst li').click(function(){
$('.tabMenuUst li a').removeClass('secili');
$('.tabMenuAlt div').removeClass('secili');
$(this).find('a').addClass('secili')
var tiklananLi=$(this).index();
$('.tabMenuAlt div').eq(tiklananLi).addClass('secili');
});
</script>
< /body>
< /html>

Ekran çıktısı:

jQuery 2

attr()
.removeAttr()
.css()
.addClass()
.hasClass()
.removeClass()
.toggleClass()
.append()
.append to ()

.attr() -> Bu metod sayesinde seçtiğimiz nesnenin özniteliklerine ulaşabiliriz.

 $('img').attr('title','okyanus'); 

Bu kod ile img nesnemizin title özniteliğini okyanus olarak değiştirdik. Eğer title nesnesi olmasaydı bile kendi ekleme yapacaktı.

<img src="resim.png" alt="" title="Gökyüzü"  />

Başka bir örnek vermek gerekirse. xHTML standartlarına göre her resmin bir alt özniteliği olmalı. Siz sayfanızı yaparken buna dikkat etmediniz ve sonradan bunu düzeltmek istediniz. Tek tek bütün resimlere alt özniteliği eklemek yerine aşağıdaki kod ile tüm resimlerine boş bir alt özniteliği eklemiş olursunuz ki buda xHTML standartları için uygundur.

$('img').attr('alt','');  

// Sayfadaki tüm img nesnelerine alt özniteliği eklendi.

.removeAttr() -> Kullanımı attr() metodu gibidir. Adından da anlaşıldığı gibi seçtiğimiz nesnenin özniteliğini siler.
.css() -> Daha önceki derslerimizde de sık sık kullandığımız bu özellik seçtiğimiz nesnenin css özelliklerine değiştirmemize yarar.
Tek özellik kullanımı için:

$('a').css('text-decoration','none');

Çoklu özellik kullanımı için

$('a').css({

'text-decoration':'none',

'color':'red'

});

jQuery de bir metod içine çoklu özellik tanımı yapacaksak bunu süslü parantezler içinde ve yukarıda şekilde yaparız.
.addClass() -> Yine çok kullandığımız bir metottur. Seçtiğimiz nesneye daha önceden tanımlı bir class atar.
.hasClass() -> Seçtiğimiz nesnenin içinde belirlediğimiz class‘ın olup olmadığına bakar. Sonuç True yada False olarak döner.
.removeClass() -> Seçtiğimiz nesne içindeki belirlediğimiz class‘ı siler.
.toggleClass() -> Seçtiğimiz nesne içinde belirlediğimiz class varsa onu siler yoksa ekler.

$('p').toggleClass('yazi');

p nesnesi içinde yazi classi varsa siler yoksa ekler.

.append() nedir?

Append fonskiynonu belirtilen bir nesne üzerininin sonuna html tagı veya metin eklemeye yarar. (Detaylı bilgi jquery.com)

.append() nasıl kullanılır ?

Kodlarla örnek gösterecek olursak ufak bir html kodu oluşturuyoruz.

<div class="cerceve">

    <h1>jQuery .append()</h1>

    <p class="metin">Soru : jQuery append</p>

</div><!-- cerceve DIV Kapanış -->

Şimdi ise bu html kodları üzerinde oynama append() fonksiyonu yapıyoruz.

$(document).ready(function(){

    $('div.cerceve h1').append(' ~ aycan.net');

    $('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>');

    $('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>');

});

Kodları tek tek açıklayacak olursak ;

1	`$(document).ready(function(){ .. }`

Sayda yüklendiğinde

1	`$('div.cerceve h1').append(' ~ aycan.net');`

Class’ı cerceve olan div’in içerisindeki h1 tagının içine append komutu ile ‘ ~ aycan.net’ text değerini yazdırıyoruz.

1	`$('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>');`

Class’ı cerceve olan div’in içerisindeki p tagının içine ‘<strong>nedir? <br> Cevap : Ne bileyim ben arkadaş!</strong>’ bu değerini yazdırıyoruz.

1	`$('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>');`

ve birde reklam şart diyerek kendi logomuzu yeni bir h1 tagı > a tagı > img tagı bastırıyoruz.
Ön izleme;

Örnek : jQuery append uygulaması

.appendTo() nedir?

AppendTo fonskiyonu seçilen nesnenin sonuna bir html tagı olmak şartıyla bir nesne ekler. Deneme yanılma yönetimi ile bu sonuca vardım Html tag kullanmadan düz metin değerleri ekleme işleminde kullanmıyor. Ayrıca yazımıda biraz değişik.(Detaylı bilgi jquery.com)

.appendTo() nasıl kullanılır ?

1	`$('<htmlTagi>Eklenecek icerik</htmlTagi>').appendTo('eklenecek nesne ')`

Yani mantık kurarsak “Şunu” , “Şunun sonuna ekle” gibi bir mantığa ulaşıyoruz.
Html kodumuz ;

<div class="cerceve">

    <h1>jQuery .appendTo()'da değişik birşey </h1>

    <p class="metin">Hınk  ?</p>

</div><!-- cerceve DIV Kapanış -->

Js kodlarımız ;

$(document).ready(function(){

    $('<b> var!</b>').appendTo('div.cerceve h1');

    $('<p>Farketmedin mi ?</p>').appendTo('div.cerceve');

    $('<p>İşleyişi farklı</p>').appendTo('div.cerceve');

});

Kodları tek tek açıklıyoruz.

1	`$('<b> var!</b>').appendTo('div.cerceve h1');`

H1 tagının içine ‘Var!’ diye text yazdırıyoruz.

1	`$('<p>Farketmedin mi ?</p>').appendTo('div.cerceve');`

Cerceve claslı div’in sonuna p tagı ekliyoruz ve bundan sonraki işlemde aynıdır.

-DVD-

İlk olarak adres satırına ;

---> ftp://10.100.100.100/ yazıyoruz.

--->Dosyalar arasından Microsoft'u seçiyoruz.

--->Dosyalar arasından OperationSystems 'i tıklıyoruz.

--->Clients 'i tıklıyoruz.

--->windows_7_iso seçiyoruz.

--->Ardından 32/ 'yi seçiyoruz.

--->Ve son olarak 7_pro_x86_TR.iso yu tıklıyoruz.Adımlar sonunda karşımıza çıkacak ekran:

----->"yazdıktan sonra diski doğrula" seceneğini işaretliyoruz.

----> "yaz" a tıklıyarak,işlemi bitiriyoruz.

5 Eylül 2013 Perşembe

jQuery

Jquery denince akla ilk gelen olgulardan biri de sanırım efektlerdir. Bu yazıda jquery ve efekt fonksiyonlarını yazmaya çalışacağım.
Efekt fonksiyonları Jquery’nin resmi sitesinde 4 gruba ayrılarak anlatılmış, bende o şekilde anlatmayı düşünüyorum. Gruplandırmaya bir göz atalım ;

Temel (Basic) Efekt Fonksiyonları
Karartma (Fading) Fonksiyonlar
Slayt (Slide) Fonksiyonları
Özel (Custom) Efekt Fonksiyonları

Hemen incelemeye başlayalım.

Temel (Basic) Efekt Fonksiyonları

hide Fonksiyonu : Seçilen elemanı gizler.
show Fonksiyonu : Seçilen elemanın görünmesini sağlar. Genelde gizlenmiş bir elemana uygulanır.
toggle Fonksiyonu : Seçilen elemanın hem gizlenmesini, hem görünmesini sağlar. Daha önceki yazılardan hatırlayacağınız gibi bu işlemi aynı fonksiyon bloğu içinde yapmaya yarar.
Temel efekt fonksiyonları ile ilgili bir örnek yapalım. Sayfamızda 3 farklı link bulunsun, birisi hide(), birisi show(), diğeri ise toggle() fonksiyonları ile yüklensin ve linklere tıklandığında efekt işlemi gerçekleştirilsin.

$("a.gizle").click(function(){
   $("div").hide("slow");
});
$("a.goster").click(function(){
   $("div").show("fast");
});
$("a.gizleGoster").click(function(){
   $("div").toggle(1000);
});

Örneği buradan inceleyebilirsiniz. Buradan da indirebilirsiniz.
Yukarıda örnekte temel efekt fonksiyonlarının içine slow, fast, 1000 gibi farklı parametreler aldığnı farketmişsinizdir. Bu şekilde kullanımın yanında, aşağıdaki gibi bir kullanım da mümkündür. Ayrıca bu durum tüm efekt fonksiyonları içinde geçerlidir.

$("a").click(function(){
   $("div").toggle("slow", function(){
      alert("Efekt İşlemi Başarılı !");
   });
});

Karartma (Fading) Fonksiyonları

Fading fonksiyoları, seçilen elementin şeffaflık özelliğini (opacity) kullanarak efekt işlemini gerçekleştirir.
fadeOut Fonksiyonu : Elementi şeffaflaştırarak gizler.
fadeIn Fonksiyonu : Opacity değerini 1′e yaklaştırarak gizlenmiş elementi gösterir.
fadeToggle Fonksiyonu : Seçilen element üzerinde opacity değerini her iki yöne (1′e ve 0′a) azaltarak ve artırarak elementi gizler ya da gösterir.
fadeTo Fonksiyonu : Elementin opacity değerini istediğiniz bir değere ayarlamanızı sağlar.
Bu fonksiyonlar ile iligi olarak küçük bir örnek yapalım. 4 farklı link ile fadeOut, fadeIn, fadeToggle ve fadeTo fonksiyonlarını kullanalım ;

$("a.gizle").click(function(){ $("div").fadeOut("slow"); });
$("a.goster").click(function(){ $("div").fadeIn("fast"); });
$("a.gizleGoster").click(function(){ $("div").fadeToggle(1000); });
$("a.ayarla").click(function(){
   $("div").fadeTo(300,0.3);
});

Sonuca buradan bakabilirsiniz, buradan da indirebilirsiniz.

Slayt (Slide) Fonksiyonları

Jquery slide fonksiyonları bir elementin görünüp gizlenmesini aşağıdan yukarıya doğru yapar.
slideUp Fonksiyonu : Bu fonksiyon seçtiğiniz elementi yukarı doğru slayt yapar.
slideDown Fonksiyonu : Aşağıya doğru slayt yapmak için kullanabilirsiniz.
slideToggle Fonksiyonu : İki yönlü slayt için kullanabilirsiniz.
Bu fonksiyonları kullanarak yukarıdaki örneklerle aynı formatta başka bir örnek yapalım.

$("a.slideUp").click(function(){
   $("div").slideUp("slow");
});
$("a.slideDown").click(function(){
   $("div").slideDown("fast");
});
$("a.slideToggle").click(function(){
   $("div").slideToggle(1000);
});

Sonucu buradan inceleyebiirsiniz, buradan indirebilirsiniz.

Özel (Custom) Efekt Fonksiyonları

Yukarıda efekt fonksiyonlarının en çok kullanılanlarını yazmaya çalıştım. Bu fonksiyonların dışında 3 farklı efekt fonksiyonu daha anlatmak istiyorum.
Jqueryde, animate fonksiyonu ile css özelliklerini kullanarak kendi efektlerimizi oluşturabiliyoruz. Özellikle vurgulamak istiyorum, css özelliklerini kullamak zorundayız. Ayrıca kullanılan css özelliğinin değeri sayısal olması gerekiyor. Yani arkaplanı maviyken, kırmızı yapamazsınız. Fakat genişliği 400px’den 500px’e çıkarabilirsiniz, çerçeve kalınlığını artırabilirsiniz, left ve top değerlerini değiştirebilirsiniz. Sayısal özelliklerle ilgili aklınıza ne geliyorsa yapabilirsiniz.
Biz küçük bir örnek yapalım, örneğimizde önce soldan 100 px ilerleyelim, sonra yukarıdan 100px ilerleyelim ardından da padding değerimizi artıralım.

$("div").animate({
   left : "100px" },"slow"); // Sola gittik
$("div").animate({
   top : "100px" },"slow"); // Aşağı gittik
$("div").animate({
padding : "50px" },"slow"); // Padding değerini arttırdık

Sonuca buradan bakabilirsiniz, buradan indirebilirsiniz.
Farkettiyseniz animasyonlar tek tek icra ettiler, hepsini aynı anda yapmak isterseniz şu şekilde kullanabilirsiniz ;

$("div").animate({
   left : "100px",
   top : "100px",
   padding : "50px"
},"slow");

Bir başka özel efetk fonksiyonu olan delay fonksiyonu ile gerçekleştirmek istediğiniz animasyonların gecikmeli olarak gerçekleşmesini sağlayabiliyorsunuz.
Mesela az önceki örneğimizin üzerinden gidelim ve animate fonksiyonunun linke tıklandıktan 1 saniye sonra gerçekleşmesini sağlayalım.

$("div").delay(1000).animate({
   left : "100px",
   top : "100px",
   padding : "50px"
},"slow");

Buradan inceleyebilir, buradan indirebilirsiniz.
Son olarak stop fonksiyonunu inceleyelim. Stop fonksiyonu ile icra etmekte olan bir animasyonu durdurabilirsiniz. Hemen görsel olarak da görmek için bir örnek yapalım ;

$("a.animate").click(function(){
   $("div").animate({
      left : "500px",
   },3000);
});
$("a.stop").click(function(){
   $("div").stop();
});

4 Eylül 2013 Çarşamba

Alert 1 komutunu jquery ile çalıştırma

Web ödevi 2:

<html>
<head>
<link href="asdf.css" type="text/css" rel="stylesheet" media="all" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
alert(1);
});
</script>
</head>
<body>
<div class="tepe">
<h1>
  <img src="resim1.jpg"/>
</h1>
<ul>
  <li><a href="#"> Anasayfa </a></li>
<li><a href="#)"> Hakkimda </a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>

<li><a href="#"> Resimlerim </a></li>
<li><a href="#"> Sosyal Aglar </a></li>
</ul>
</div>
<div class="orta">
  <ul>
    <li><a href="anasayfa.html">Anasayfa</a></li>
    <li><a href="0">Hakkimda</a></li>
    <li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
    <li><a href="0">Bilgilerim</a></li>
    <li><a href="0">Resimlerim</a></li>
    <li><a href="0">Sosyal Aglar</a></li>
    <li><img src="resim2.jpg"></li>
   </ul>
  </div>
  <div class="alt">
  <ul>
    <li>Isminur Ates</li>
   </ul>
  </div>
    </body>
</html>