2006 yılında, Cardiff, Galler'de bir tasarım ajansında çalışırken, web sitemizde ofisimizin dışındaki mevcut hava koşullarını belirleme fikrini tasarladım. Web sitemizi tam anlamıyla ilgi çekici hale getirmek ve ziyaretçileri ve müşterileri gerçek hayatta her gün gerçek hayatta deneyimlediğimizi göstermek istedim.
Kapsamlı bir araştırma yaptıktan sonra, bunun için en iyi başlangıç noktasının Yahoo! 'Nun Hava Durumu API'sı olduğunu, çünkü hava koşullarının tutarlı ve kullanılabilir bir formatta olduğunu keşfettim. Ancak, bir web sitesinde hava durumunu gerçekten temsil etmenin tek yolu Flash'ı kullanmaktı. Tek başına gelişme zamanı fikri, şirketin yöneticilerinin zihninden korkutmak için yeterliydi ve hiçbir zaman fikir aşamasını geçmedi.
Şimdi, altı yıl sonra ve kendi şirketimin teknik direktörü olarak, bu fikri tekrar ziyaret ettim. Çeşitli web sitelerinin, blogların ve forumların etrafında yapılan bir araştırma, altı yılda bile hiç kimsenin böyle bir şey yapmadığını, dolayısıyla bunu yapmak için kod oluşturmamız gerektiğini ortaya koydu. Ayrıca, fikrin düşünüldüğü altı yıl içinde hırslarım büyüdü. Artık web sitesinin sadece ofis dışında hava durumunu görüntülemesini istemiyorum - hava durumunu web sitesini görüntüleyen kişinin penceresinin dışında göstermesini istiyorum.
Canlı hava durumu güncellemeleri, gün batımı ve gün doğumu saatleri ile gündüz ve gece ve hatta ay döngülerini içeren bir özellik listesi yarattım ve bunu yapabilmemiz için geliştirici Steven'ımıza verdim.
Bir kez daha, Yahoo Hava Durumu API'sı, çeşitli hava tipleri için çok doğru kodlar sunan, en tutarlı olduğunu kanıtladı. Bu bilgi ile hava durumu ekranımızı kontrol edebilecek bir dizi oluşturabileceğiz.
Ancak, Yahoo'nun verileri kadar iyi olsa da, yalnızca web sitesinden besleyebildiğimiz konum kadar doğruydu ve Microsoft'un Internet Explorer'ının zayıflıkları nedeniyle, doğru bir konum elde etmek için coğrafi konumu kullanamadık. Web sitesine göz atan herkes için. Bu nedenle, bir sonraki en iyi şey için yerleşmek ve IPInfoDB web sitesini kullanarak kullanıcının IP adresine göre en yakın başkenti veya en yakın büyük şehri almak zorunda kaldık.
ABD genelinde, bu genellikle web sitesinde görünen kişinin hangisi olduğuna dair sermayenin ortaya çıkmasına neden olur. Burada Birleşik Krallık'ta, kişinin Birleşik Krallık'ta nerede olduğuna bakılmaksızın varsayılan olarak Londra'ya; Umarım, Microsoft bir gün tarayıcı dünyasının geri kalanıyla yetişecek ve coğrafi konum belirlememize izin verecek.
Kullanıcının IP adresini kullanarak ve bunu IPInfoDB'ye girerek, ülkeyi, eyaleti veya eyaleti ve web sitesini görüntüleyen kişinin şehrini veya şehrini tahmin edebildik. Bunu, Yahoo API'sine aktarmamız bize söz konusu konum için mevcut hava durumunu verdi.
Gün batımı ve gün doğumu saatleri her gün doğrudur ve aynı zamanda Yahoo'nun Hava Durumu API'sından türetilen boylam ve enlemlere dayalı olarak hesaplanır.
Son olarak, bir değişkenin tarihine dayanmış olsa da, herkesin en karmaşık hesaplaması olduğu kanıtlanan ay fazı vardır.
Bu teori. Şimdi, nasıl yapıldığı için.
İlk adım Yahoo! dan alınan hava türlerini bölmek oldu. Web sitesindeki etkileri kontrol etmek için kullanabileceğimiz bir dizi içine. Yahoo'nun 47 farklı hava türünün her biri, dört sayıya bölünmüş kendi dizisine sahiptir. İlk sayı dizisi, açık bir günden karanlık ağır bulutlara uzanan bulut kapsamını belirler. İkinci rakam yağmur yağmuru ve yağmur yağmuru arasında değişen yağmur için. Üçüncü sayı, kar ve yıldırım gibi çeşitli ek hava türleri içindir. Son olarak, dördüncü sayı tasarımcı Steven'ın sis, toz ve sis gibi “sos efektleri” dediği şeydir.
$weatherarray[0]=array('tornado',3,3,5,3);$weatherarray[1]=array('tropical storm',3,3,5,3);$weatherarray[2]=array('hurricane',3,2,4,3);$weatherarray[3]=array('severe thunderstorms',3,3,5,3);$weatherarray[4]=array('thunderstorms',3,2,5,2);$weatherarray[5]=array('mixed rain and snow',2,1,1,0);$weatherarray[6]=array('mixed rain and sleet',2,1,1,0);$weatherarray[7]=array('mixed snow and sleet',2,1,2,0);$weatherarray[8]=array('freezing drizzle',1,1,1,0);$weatherarray[9]=array('drizzle',1,1,0,0);$weatherarray[10]=array('freezing rain',1,2,1,0);$weatherarray[11]=array('showers',2,2,0,0);$weatherarray[12]=array('showers',2,2,0,0);$weatherarray[13]=array('snow flurries',1,0,2,1);$weatherarray[14]=array('light snow showers',1,0,2,1);$weatherarray[15]=array('blowing snow',1,0,2,2);$weatherarray[16]=array('snow',1,0,2,0);$weatherarray[17]=array('hail',1,0,4,0);$weatherarray[18]=array('sleet',1,1,4,0);$weatherarray[19]=array('dust',0,0,0,5);$weatherarray[20]=array('foggy',0,0,0,4);$weatherarray[21]=array('haze',0,0,0,5);$weatherarray[22]=array('smoky',0,0,0,5);$weatherarray[23]=array('blustery',1,0,0,2);$weatherarray[24]=array('windy',1,0,0,2);$weatherarray[25]=array('cold',1,0,0,0);$weatherarray[26]=array('cloudy',2,0,0,0);$weatherarray[27]=array('mostly cloudy (night)',1,0,0,0);$weatherarray[28]=array('mostly cloudy (day)',1,0,0,0);$weatherarray[29]=array('partly cloudy (night)',1,0,0,0);$weatherarray[30]=array('partly cloudy (day)',1,0,0,0);$weatherarray[31]=array('clear (night)',0,0,0,0);$weatherarray[32]=array('sunny',0,0,0,0);$weatherarray[33]=array('fair (night)',0,0,0,0);$weatherarray[34]=array('fair (day)',0,0,0,0);$weatherarray[35]=array('mixed rain and hail',1,1,4,1);$weatherarray[36]=array('hot',0,0,0,0);$weatherarray[37]=array('isolated thunderstorms',3,2,5,2);$weatherarray[38]=array('scattered thunderstorms',3,2,5,2);$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);$weatherarray[40]=array('scattered showers',3,2,0,2);$weatherarray[41]=array('heavy snow',1,0,3,0);$weatherarray[42]=array('scattered snow showers',1,0,2,0);$weatherarray[43]=array('heavy snow',1,0,3,0);$weatherarray[44]=array('partly cloudy',1,0,0,0);$weatherarray[45]=array('thundershowers',3,2,5,2);$weatherarray[46]=array('snow showers',1,0,2,0);$weatherarray[47]=array('isolated thundershowers',3,2,5,2);$weatherarray[3200]=array('not available',0,0,0,0);Zaten ağır kodu ve görüntüyü minimumda tutabilmek için, mümkün olduğunca aynı resimleri geri dönüştürmeyi seçtik. Örneğin, sadece bir yağmur grafiği vardır ve Yahoo! 'Nun bilgilerine göre kontrol edilir. Yağmur grafiğinin ışık olması gerekiyorsa, daha hafif olması için daha düşük bir opaklıkla ayarlanır:
switch ( $effect1) {case 0:$weathercode.= 'jQuery('#rain').css("opacity", "0.0");';break;case 1:$weathercode.= 'jQuery('#rain').css("opacity", "0.10");';break;case 2:$weathercode.= 'jQuery('#rain').css("opacity", "0.30");';break;case 3:$weathercode.= 'jQuery('#rain').css("opacity", "0.50");';break;}Neyse ki, ay döngüsünün hesaplamaları üzerine tökezledik. Stephen A. Zarkos'un blogu . Görüntüleri minimumda tutma arzumuza uygun olarak, ay fazı, ayın 10 farklı fazını gösteren bir piksel sayfasıyla yapıldı. Zarkos'un hesaplamalarını kullanarak, aşağıdaki kod, görüntülenen piksel sayfasının doğru bölümünü seçerek, web sitemizde her zaman doğru ay döngüsünün gösterilmesini sağlar.
background-position: px 0;Projenin son kısmı ve en görsel olarak heyecan verici, gerçek zamanlı gün batımı ve gün doğumu. Bahsedildiği gibi, bu, web sitesini görüntüleyen kişinin en yakın başkentinin boylamı ve enlemini, onlar için gün batımı ve gün doğumu zamanlarını hesaplamak üzere kullanır. Bu, Los Angeles'taki web sitesine bakan birinin güneşin doğuşunu göreceğini ve New York'ta aynı web sitesine baktıktan sonra üç saatini ayarlayacağını gösterir.
Gün batımı ve güneşin doğuşu birbiri ardına çözünen üç ayrı ufuk çizgisi efektinden oluşur. Gün batımı için, gündüz sahnesi, bir gece sahnesine dönüşmeden önce, turuncu bir sahneye yavaş yavaş çözülür. Bu olsa da, (her zaman tarayıcı katının üstünde bulunan) bir güneş grafiği inmeye başlar ve “ayarlanır”. Bu işlem tam olarak 300 saniye sürer.
Gün batımı zamanı (boylam ve enlemden türetilmiştir) bir Unix zaman damgasına dönüştürülür, bu da daha sonra değişken olarak saklanır. Geçerli saat de bir Unix zaman damgası haline getirilir ve iki kez arasındaki fark jQuery zaman aşımı işlevi için kullanılır. Gündüz ve gece temaları arasındaki geçişi yaratan şey budur.
jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});}); Standart hava etkileri, ne olursa olsun, güneş doğarken ve yükselirken oynamaya devam ediyor. Bu, özellikle çok zor yağmur yağdığında bazı oldukça güzel geçişlere yol açabilir.
Koddaki eylemi görebilirsiniz. Web sitesini çalıştır .
Bu, kendimizi geliştirdiğimiz bir sistem olduğundan, sürekli olarak onu iyileştirmenin yollarını arıyoruz ve bu yıl Ağustos ayında hava sistemi başlatıldığından beri eklediğimiz iki özelliğe sahibiz.
İlki yeni eklediğimiz bir şey; Çerez tabanlı bir yer ayarı, bu sayede web sitesine gelen ziyaretçi, kendi bölgeleri için belirli hava durumu bilgilerini almak için şehir, şehir veya posta kodu girerek hava durumunu daha doğru gösterebilir. Aslında Yahoo'nun hava durumu API'sı posta kodlarını ve şehirleri girdi olarak kabul ettiğinden bu işlem çok kolaydı ve iponfodb.com'a bir çağrı kaydedildi. Bunu, dünyanın dört bir yanından, Kuzey Kanada kadar uzak bir bölgeden, Yeni Zelanda kıyılarından uzakta bulunan Antipodes Adaları'na kadar çeşitli şehirler ile test ettik - böylece dünyanın herhangi bir yerindeki havanın nasıl olduğunu görebilirsiniz.
Yeni Yılda sunacağımız ikinci özellik bir kontrol kutusu. Böylece ziyaretçiler hava şartlarını uygun gördükleri şekilde uygulayabilirler, bu yüzden farklı hava koşullarının kombinasyonları gerçek hava koşullarına bakılmaksızın görülebilir. Örneğin, ziyaretçiler yağmurun yoğunluğunu% 10'luk artışlarla% 0'dan% 100'e çıkarabilecektir. Bu, gün batımı ve gün doğumu için bir tetikleyici de içerecek, böylece herkes The Truman Show'dan Ed Harris olarak oynayabilir ve istedikleri zaman bir gün doğumu yaratabilir.
Yahoo! 'Nun Hava Durumu API'sini kullandınız mı? Onunla ne yaptın? Aşağıdaki yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, hava durumu resmi Shutterstock üzerinden.