Polat Büyükarslan - Kişisel Blog

Blogun sağ alt köşesine Atatürk resmini nasıl koyduğumu ve bu resmin üzerine fareyi götürdüğümüzde sesin çıkmasını nasıl sağladığımızı anlatacağım.

Öncelikle elinizde, blogunuzda görünmesini istediğiniz resim ve bununla birlikte bir tane mp3 dosyası, bir tane de ogg dosyası olması gerekir.

Elinizdeki mp3 dosyasını, internette bulabileceğiniz çeşitli dönüştürme programlarından birisiyle ogg formatına dönüştürebilirsiniz. Bu konuda bir sıkıntı yaşarsanız yazının altına yorum olarak belirtin.

1-) Şimdi ilk önce blogunuzun style.css dosyasına aşağıdaki kodu ekleyin.

2-) Ardından header.php dosyasındaki <body> etiketinin altına aşağıdaki kodu ekleyin.

Dosyalarınızı kullandığınız FTP programıyla birlikte tema klasörünüzün içine atın. Ana dizine attığınızda hem resim, hem de ses dosyası çalışmaz.

Yukarıda hem mp3 hem de ogg formatını neden kullandığımızı merak ediyor olabilirsiniz. Hemen açıklayayım. Sadece MP3 formatını kullanırsak Chrome ve Safari’de düzgün çalışıyor. Fakat Firefox ve Opera kullanıcıları resimleri düzgün görüntülemelerine rağmen sesi duyamıyorlar. Sesin hem Firefox hem de Opera’da da çalışması için OGG formatını kullanıyoruz.

Bütün işlemleri doğru yaptığınız taktirde sorunsuz bir şekilde çalışacaktır.

Programlama öğrenmek için ilk adımı atmak eminim birçok kişi için zor olmuştur. Yeni başlayacak kişiler de kafalarındaki soruların yanıtlarını bulmak için etrafta dolanıp duruyorlar. Bugün bazılarınızın daha önceden bildiği, bazılarınızın da belki de ilk defa duyacağı bir siteden bahsetmek istiyorum. Sitenin ismi Codecademy. 

Bu siteyi uzun süredir bilmeme ve Rss ile de takip ettiğim halde yazı yazmak kısmet olmadı. Zaten siteyi de çok fazla kurcalamamıştım. Fakat siteyi daha ilk gördüğümde takip edilecek bir site olduğunu düşünmüştüm. Bir süre önce siteye üye oldum ve hazırlanan dersleri biraz inceledim. Aynı zamanda eski programlama bilgilerimi de tazeleme fırsatım oldu. 

Siteye girer girmez sizin de göreceğiniz gibi sitenin Türkçe dil desteği yok. Derslerde kullanılan İngilizce’nin çok ağır olmadığını söyleyebilirim. Gerçi programlama öğrenmeyi isteyen kişinin, en azından okuduğunu anlayacak kadar İngilizce bilmesi zaten gerekiyor. 

Neyse konumuza dönelim. Siteye ilk girdiğinizde kısa bir programlama deneyimi yaşıyorsunuz. Açıkçası benim en çok hoşuma giden de bu oldu. Kodlama yaparak programlamayı öğreniyorsunuz. Derslerde gereksiz detaya yer verilmemiş.

Üye olduktan sonra öğrenmeyi istediğiniz programlama dilini seçip kodlamaya başlayabilirsiniz. Sitedeki dersler Javascript, HTML, CSS, JQuery ve Python. Dersleri tamamladıkça profilinizde, derslerin yüzde kaçının tamamlandığını görebiliyorsunuz.

Profil sayfanızda, bitirdiğiniz derslerin isimleri de görünüyor.

Tamamladığınız her ders için badges’leriniz artıyor. Ayrıca dersleri bitirdikçe de puan kazanıyorsunuz.

Puanlama sisteminin olması sizin öğrenme isteğinizi arttırabilir. Mesela programlamaya ilgi duyan arkadaşlarınızla birlikte siteye üye olup hem programlama bilginizi geliştirebilir hem de arkadaşınızın puanıyla kendinizinkini kıyaslayarak kendinizi gaza getirebilirsiniz. 🙂

Programlama öğrenmek isteyenlere Codecademy‘i tavsiye ederim. Fakat sitede öğrendiklerinizle yetinmeyip kendinizi geliştirmeyi unutmayın. Yazı okuyarak veya video izlemeyle programlama öğrenmek yerine kod yazarak öğrenmek her zaman daha iyidir.

İyi kodlamalar.

Genelde gençlerde programlama öğrenme isteği çok fazla. Bir çoğu ne yapmak istediğine bile karar vermiş değil. Mesela forumlarda en sık karşılaştığım şeylerden birisi şu. Gençlerden birisi bir konu açıp, aklına ne gelirse sayıyor. HTML, CSS, XHTML, HTML5, Java, PHP…. Sorusu da şu. “Hangi programlama dilini öğreneyim?” veya “Hangisinden para kazanabilirim?” veya “Hangisini öğrenirsem iş bulma imkanım artar?”

Bir programlama dili öğrenilecekse, bu dil sizin istediğiniz bir dil olmalı. Bir dil size para kazandıracak veya daha popüler diye o dili öğrenmeye kalkmak, sizi diğer insanlarla aynı kefeye koyar. Herkes birbirinden farklıdır. Siz birine “Hangi programlama dilini öğrenmeliyim?” diye sorarsanız o kişi size sevdiği dilleri veya iş bulabileceğiniz dili söyleyecektir. Örneğin C#’ı ele alalım. Söyleyeceğim şey belki C# hayranlarını kızdırabilir. Fakat biraz da gerçekçi olmak lazım.

C# dünyada oldukça popüler bir dil. Bu dili biliyorsanız Türkiye’de iş bulma imkanınız da var. Peki bir dili iyi yapan şey nedir? Çok fazla kişi tarafından kullanılıyor olması mı? Bu dil sayesinde para kazanabiliyor olmanız mı? Hayır!. Bunların hiçbiri değil. Bir programlama dilini iyi yapan şey, platformdan bağımsız çalışmasıdır. Eğer bir dil, tek bir platformda çalışıyorsa, bu sizi o platforma bağımlı kılar. Bir platforma bağımlı olmak bile sizin özgürlüğünüzü kısıtlar. Çünkü başka platformları veya sistemleri kullanamazsınız. Çok fazla detaya girmek istemiyorum. Sanırım demek istediğim anlaşılmıştır.

Siz, kendinizi özgür hissettiğiniz ve dilediğiniz programlama dilini öğrenin. Bunun için de önce bir hedef belirleyip, hedefiniz gerçekleştirebilecek programlama dilleri hakkında araştırma yapın. İyi ve kötü yönlerini iyice araştırın. Ondan sonra kararınızı verip yolunuza emin adımlarla devam edin. Şunu sakın unutmayın. Öğreneceğiniz programlama dilini başkasına sorarsanız, sizin yaşayacağınız hayatı da o fikri veren arkadaş belirlemiş olacak.

Hayatınız ile ilgili önemli bir kararı bile kendiniz veremiyorsanız, programlama ile uğraşmak yerine gezin, tozun. Hayatın tadını çıkarın. Nasıl olsa her iki şekilde de zamanınızı boşa geçirmiş olacaksınız. En azından bir tanesinde eğlenirsiniz ve boşa geçirilmiş zamana acımazsınız. 🙂

Yine okuyucularımdan birinin sorusu üzerine yazdığım bu yazıda sitenize, jQuery countdown (geri sayım sayacı) nasıl ekleyeceğinizi anlatacağım. İnternette jQuery ile hazırlanmış çok fazla geri sayım sayacı var. Ben burada, okuyucumun bana gönderdiği dosyadakinin nasıl yapılacağını detaylı bir şekilde açıklayacağım.

Öncelikle Jquery Countdown dosyasını bilgisayarınıza indirin. Sıkıştırılmış dosyayı açtıktan sonra içerisindeki images, js ve style isimli klasörleri hostunuza yükleyin.

Aşağıda verdiğim kodları <head></head> etiketleri arasına ekleyin.

[code type="JavaScript"]<script src="js/jquery-1.4.1.js"></script> <script src="js/jquery.lwtCountdown-1.0.js"></script> <script src="js/misc.js"></script> <link href="style/main.css" rel="stylesheet"> [/code]

Bu kodda dikkat etmeniz gereken şey dosyaları hostunuza yüklerken herhangi bir klasör içine yüklemeyin. Klasörleri olduğu gibi atın. Eğer hostunuzda, deneme amaçlı bir klasör açıp dosyaları içine atmayı istiyorsanız, yukarıdaki kodda src içerisindeki yolun başına klasörünüzün ismini yazın. Örneğin; deneme isimli bir klasör oluşturduysanız src içerisini deneme/js/dosyaismi.js şeklinde değiştirmelisiniz. Aynısı CSS dosyası için de geçerli.

Buraya kadar sorunsuz bir şekilde yaptıysanız geri çok basit. Zaten hata yapma ihtimali olan kısım üst kısımdı.

Şimdi tek yapmanız gereken şey aşağıdaki kodları, geri sayım sayacının görünmesini istediğiniz yere eklemek ve üzerinde gerekli değişiklikleri yapmak.

[code type="HTML"]<div id="countdown_dashboard"> <div class="dash weeks_dash"> <span class="dash_title">hafta</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash days_dash"> <span class="dash_title">gün</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash hours_dash"> <span class="dash_title">saat</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash minutes_dash"> <span class="dash_title">dakika</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash seconds_dash"> <span class="dash_title">saniye</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dev_comment"> MAYA TAKVİMİNİN SON GÜNÜNE KALAN SÜRE </div> </div> [/code] [code type="JavaScript"]<script> jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetDate: { 'day': 21, // hedef gün 'month': 12, // hedef ay 'year': 2012, // hedef yıl 'hour': 12, // hedef saat 'min': 0, // hedef dakika 'sec': 1 // hedef saniye } }); }); </script> [/code]

Gördüğünüz gibi eklediğiniz kodların sonunda hedef gün, hedef ay gibi açıklamalar var. Sayacın hangi tarihten geriye doğru saymasını istiyorsanız, oradaki rakamları kendinize göre düzenleyin. Hepsi bu kadar.

Bu işlemi yapmak için aşağıda vereceğim kodları sırasıyla uygulayın. Kodlar ile ilgili gerekli açıklamaları da yeri geldiğince yapacağım. Amacımız butona tıkladığımızda sayfamızın tam ekran açılmasını sağlamak. Yani F11’e benzer bir özellik.

Bu arada yeri gelmişken hemen belirteyim. Kodlar Safari, Chrome ve Firefox‘ta çalışmaktadır. Şu anda Linux kullandığım için Safari ve IE kullanma imkanım olmadı. Opera‘da bu özellik çalışmıyor. Chrome ve Firefox’ta istediğim sonucu aldım.

İlk önce sitenizin <head></head>  etiketleri arasına aşağıdaki kodu girin. Bu kod sayesinde sitenizde jquery çalışacak.

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>

Ardından aşağıdaki kodu </body> etiketinin üstüne ekleyin. Yani body etiketinin arasında ve sonunda olacak.

<script>
(function() {
  var fullScreenApi = {
    supportsFullScreen: false,
    isFullScreen: function() { return false; },
    requestFullScreen: function() {},
    cancelFullScreen: function() {},
    fullScreenEventName: '',
    prefix: ''
  },
  browserPrefixes = 'webkit moz o ms khtml'.split(' ');

  if (typeof document.cancelFullScreen != 'undefined') {
    fullScreenApi.supportsFullScreen = true;
  } else {
    for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
      fullScreenApi.prefix = browserPrefixes[i];
      if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
        fullScreenApi.supportsFullScreen = true;
        break;
      }
    }
  }

  if (fullScreenApi.supportsFullScreen) {
    fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
    fullScreenApi.isFullScreen = function() {
      switch (this.prefix) {
        case '':
          return document.fullScreen;
        case 'webkit':
          return document.webkitIsFullScreen;
        default:
          return document[this.prefix + 'FullScreen'];
      }
    };
    fullScreenApi.requestFullScreen = function(el) {
      return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
    };
    fullScreenApi.cancelFullScreen = function(el) {
      return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
    };
  }

  if (typeof jQuery != 'undefined') {
    jQuery.fn.requestFullScreen = function() {
      return this.each(function() {
        var el = jQuery(this);
        if (fullScreenApi.supportsFullScreen) {
          fullScreenApi.requestFullScreen(el);
        }
      });
    };
  }

  window.fullScreenApi = fullScreenApi;
})();
</script>

<script>
var fsButton = document.getElementById('fsbutton'),
    fsElement = document.getElementById('specialstuff'),
    fsStatus = document.getElementById('fsstatus');

if (window.fullScreenApi.supportsFullScreen) {
  fsStatus.innerHTML = 'EVET: Tarayiciniz Tam Ekran Modu destekliyor';
  fsStatus.className = 'fullScreenSupported';

  // handle button click
  fsButton.addEventListener('click', function() {
    window.fullScreenApi.requestFullScreen(fsElement);
  }, true);

  fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
    if (fullScreenApi.isFullScreen()) {
      fsStatus.innerHTML = 'Tam ekran moduna gectiniz';
    } else {
      fsStatus.innerHTML = 'Normale don';
    }
  }, true);

} else {
  fsStatus.innerHTML = 'Maalesef, kullandiginiz tarayici Tam Ekran ozelligini desteklemiyor';
}
</script>

Yukarıda verdiğim kod içerisindeki Türkçe yazılmış yazıları kendi isteğinize göre değiştirebilirsiniz. Bu yazılar, tam ekran butonunu kullanmak isteyen kişilere uyarı olarak çıkacak. Biraz kurcalarsanız ne olduğunu anlarsınız.

Şimdi de son olarak butonumuzu ve yazımızın olduğu kodu ekleyelim.

<div id="specialstuff">
  <p>
    specialstuff isimli id icinde yazilacak olan yazilar tam ekran gorunecek
  </p>
  <p>Bu ozellik Safari, Chrome ve Firefox'ta calisir.</p>
  <p>Durum: <span id="fsstatus"></span></p>
</div>

<input id="fsbutton" type="button" value="Tam Ekran" />

Hepsi bu kadar.

Kodlar John Dyer's Code sitesinden alınmıştır.

Sitemdeki yazı tipini değiştirmeyi düşünürken aklıma Css’teki font-face kullanımı aklıma geldi. Uzun süredir font-face’i bilmeme rağmen ya uygulamaya vakit ayıramadım ya da üşengeçliğim tuttuğu için uğraşmamıştım. Sitede ufak ufak değişiklikler yaparken font-face’i de hem sitede uygulayıp hem de sitede yazayım diye düşündüm. @font-face’i kullanmak son derece kolay. Sitenizde yeni, boş bir klasör oluşturun. Sonra bu klasörün içerisine kullanmayı istediğiniz yazı tipini koyun. Css dosyanızı açıp aşağıdaki kodları ekleyin.

[code type="CSS"]@font-face { font-family: BreeSerif; src: url("klasör_ismi/BreeSerif.otf"); }[/code]

Url kısmında, sitenizde oluşturduğunuz klasörün ismi ve yazı tipinin adı yer almalı. Font-family kısmında da aynı şekilde yazı tipi yer almalı. Eğer bu yazı tipini parağraflar için kullanmak istiyorsanız aşağıdaki kodu css dosyanıza ekleyin.

[code type="CSS"]p { font-family: BreeSerif; }[/code]

Css dosyanızda parağraf için önceden tanımlanmış bir yazı tipi muhtemelen vardır. Böyle bir durum söz konusuysa yukarıdaki kodu direkt yapıştırmak yerine yazı tipinin adını, kendi eklediğiniz yazı tipi olarak ayarlayın.

Hepsi bu kadar.

Not: Eğer bu yöntem işe yaramıyorsa muhtemelen bir yerlerde yazım hatası yapıyorsunuzdur. Yazım hatalarınızı kontrol ediniz. Ayrıca font-face yönteminde yazıların az da olsa geç yüklendiğini unutmayın.

Geçenlerde target=”_blank” gibi eski web teknolojisi yerine rel=”external” kullanmaya karar verdim. Bilmeyenler için ufak bir hatırlatma yapayım. Bir web sitesinde herhangi bir linke tıkladığınızda, açılan sayfanın yeni sayfada açılması için target=”_blank” kodunu kullanıyorduk. Ben artık onun yerine rel=”external” kodunu kullanıyorum. 

Neyse konumuza dönelim. Jquery ile pek alakadar olmadığım için internette verilen kodları denediğimde tek başına işe yaramıyordu. İnternette biraz araştırınca ve Jquery‘nin sitesine bakınca olayı kavradım. Aşağıdaki kodu <head></head> etiketi arasına eklerseniz kodun çalıştığını göreceksiniz. 

Not: Aşağıdaki kodun üstüne 3 kere tıklayarak tek satırlık kodun tamamını seçebilirsiniz. Ardından kopyalayıp kullanabilirsiniz.

[code type="JavaScript"] <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script><script type="text/javascript">// <![CDATA[$(document).ready(function() {$("a[rel=external]").attr('target', '_blank');});// ]]></script>[/code]

HTML DERSİ - 1
HTML DERSİ - 2

HTML derslerine kaldığımız yerden devam ediyoruz. Bu üçüncü derste, önemli bir konu olan tablolardan bahsettim. Daha önce de dediğim gibi benim amacım size temeli vermek.

Tablolarla ilgili hazırladığım bu dersle yetinmeyip diğer anlatmadığım kısımları da kendi çabanızla öğrenin. Biraz pratik yaparak çok rahat bir şekilde olayı kavrarsınız.

Html 3. Dersi İndirmek için tıklayınız. (143 Kb, zip)

HTML Derslerine kaldığımız yerden devam ediyoruz. Bu 2. HTML Dersinde sizlere yine kısa kısa, bazı html etiketleri tanıttım ve bir iki tane örnekle bunları gösterdim. Örnek olarak göstermediğim diğer etiketleri kendiniz deneyebilirsiniz. 1. derse göre daha kısa bir ders oldu ama zaten HTML’de anlatılacak çok fazla şey yok.

Hazırladığım HTML dersleriyle ilgili bir şey söyleyeyim. Bütün HTML etiketlerini derslerde anlatmayı düşünmüyorum. En çok kullanılanları anlatmak bana göre daha mantıklı. Çünkü bazı etiketler artık pek fazla kullanılmıyor. İlla da öğrenmek isteyen arkadaşlar internetten araştırıp öğrenebilirler. 3. Dersi de en kısa sürede sitede bulacaksınız.

Html 2. Dersi İndirmek için tıklayınız. (187 Kb, zip)

HTML DERSİ - 1
HTML DERSİ - 3

HTML derslerini hem sayfa içerisinde hem de pdf dökümanı olarak vermeyi düşünüyordum. Fakat şu an için sayfa içerisinde hazırlamak bana zaman kaybettireceğinden sadece pdf olarak ekledim. Bu benim ilk hazırladığım ders olduğu için amatörlükten kaynaklanan hatalar/problemler olabilir. Özellikle yazım hatası veya kodlarda bir problem varsa bildirirseniz çok sevinirim. Umarım bu dersler, web tasarımına yeni başlayacak olan kişilere HTML’i öğrenmelerinde yardımcı olur.

Html 1. Dersi İndirmek için tıklayınız. (474 Kb, zip)

HTML DERSİ - 2
HTML DERSİ - 3

Çok yakın bir zamanda siteye web tasarımıyla ilgili dersler eklenecek. Eklenecek yazılar internetten kopyala-yapıştır yapıp siteye ekleme şeklinde olmayacak. Resimlerle desteklenecek ve yazılan kodlar, size yardımcı olması amacıyla eklenecek. Dersleri hazırlarken kafanızda soru işareti oluşmayacak ve detaylı bir şekilde açıklanarak anlatılacaktır. Dersler, web tasarımını öğrenmek isteyen ve bu işe yeni başlayacak olan kişilere hitap edecek.