jDigiClock

jDigiClock hem hava durumu hemde saat olarak kullanılan bir örnek. Android cihazlardaki hava durumu widgetinin aynısı olarak hazırlanmış. Örneğin sağ ve sol tarafında bulunan ikonlara tıkladığınızda saat ve hava durumu bölümleri arasında geçiş yapılabiliyor. İlk bakışta flash ile hazırlanmış gibi bir görüntüye sahip. İnternette gördüğüm saat ve hava durum uygulamalarından en kullanışlı ve en şık tasarımlı olanı bu bence ama 1.77 mb boyuta sahip. Sitenin herhangi bir köşesine bu boyutta bir örnek eklemek ne kadar mantıklı olur bilemem açıkçası.

Dosya boyutunun yüksek olması çok fazla resim eklendiğinden kaynaklanıyor. Saati ve dakikaları gösteren her bir rakam için  dört tane resim eklenmiş. Toplamda images klasörü içinde 83 adet resim bulunuyor. Sanırım geliştirici daha çok resimlerle uğraşmışa benziyor. Ben tasarımdan yanayım diyenlerdenseniz kesinlikle kullanmanız gerek, yok ben limitten yanayım diyecekseniz hiç uğraşmayın derim 🙂 Demo olarak iframe içine atıp aynı bu sayfaya ekledim sizler için. İsteyenler kaynak kodlarına bakıp iframe kodunu alıp kendi sitelerine ekleyebilirler. KEsinlikle tavsiye etmesem de bunu yapmakta serbestsiniz. Zaten yapmayın dersem yaparsınız. Hem benim sağım solum pek belli de olmuyor. Bir bakarsınız dosyaları silip atarım bir gün 🙂

Demo : 

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve stil dosyaları : 

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

 Javascript : 

Download adresinden indireceğiniz dosya içinde WeatherLocationDatabase.txt adlı bir metin dosyası göreceksiniz. Kaç tane olduğunu saymadım ama bu metin dosyası içinde sanırım dünyanın bütün şehirleri desem yalan olacak ama aklıma gelen bir kaç tane Türkiye şehrini girdim ve hepsi vardı. WeatherLocationDatabase.txt içinden göstermek istediğiniz şehrin kodunu alarak Javascript kod bölümüne yapıştırın. Örnek : “MEA|TR|TU040|ISTANBUL” şeklinde yaptığınız zaman İstanbul şehrine ait hava durumu bilgilerinin görünmesi gerekiyor ama bir türlü yapamadım veya var bir sorun. Hatta eklenti dosyasındaki Bourgas şehrini bile değiştirmeme rağmen değişiklik olmadı. Tarayıcı çerezlerinden kaynaklanan bir durum olabilir diye onları da sildim sonuç değişmedi. Başka sefere yine bu yazıyı inceler sonuca bakarım. Sonuçta js uzantılı dosya içinden değiştirildiği zaman böyle bir hata olmaması gerekiyor. Zaten js dosyası içinde default olarak bir şehir eklenmesi gerekiyor ve açılır açılmaz eğer Javascript kodlar içinde bir şehir belirlenmemiş ise bu sefer jDigiClock.js dosyası içindeki şehri göstermesi gerek.

        <script type="text/javascript">
            $(document).ready(function() {
                $('#digiclock').jdigiclock({ weatherLocationCode: "MEA|TR|TU040|ISTANBUL" });
            });
        </script>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html kodu : 

<div id="digiclock"></div>

 Test edilen tarayıcılar : 

• Internet Explorer 7 (PC)
• FireFox 3.5 (PC/Linux)
• Google Chrome 3.0 (PC)
• Safari 4.0 (PC)

İndirdiğiniz dosyadaki index.html dosyası verileri php ve asp üzerinden çektiği için masaüstünde inceleyemezsiniz. Ya bir sunucuya atmanız gerek yada masa üstünde localhost kurarak denemeniz gerek. Ayrıca asp olarak kullanmak isteyenlerin jDigiClock.js dosyasını açıp proxyType: ‘php’  kodunu proxyType: ‘asp’ olarak değiştirmeleri gerekiyor.