در سال 2006، زمانی که در یک آژانس طراحی در کاردیف، ولز کار می‌کردم، ایده‌ای را برای نمایش در نظر گرفتم. روی وب سایت ما شرایط آب و هوایی فعلی خارج از دفتر ما. من می‌خواستم وب‌سایت خود را کاملاً جذاب کنم و به بازدیدکنندگان و مشتریان خود نشان دهم که در زندگی واقعی هر روز و در زمان واقعی چه چیزی را تجربه می‌کردیم.

پس از انجام برخی تحقیقات گسترده، متوجه شدم که بهترین نقطه شروع برای این امر، API هواشناسی یاهو است، زیرا شرایط آب و هوایی را در قالبی سازگار و قابل استفاده ارائه می دهد. با این حال، در آن زمان تنها راه برای نمایش واقعی آب و هوا بود روی یک وب سایت با استفاده از فلش بود. زمان توسعه به تنهایی برای ترساندن این ایده از ذهن مدیران شرکت کافی بود و هرگز از مرحله مفهوم عبور نکرد.

اکنون، شش سال بعد، و به عنوان مدیر فنی شرکت خودم، دوباره این ایده را بررسی کردم. جستجو در وب سایت ها، وبلاگ ها و انجمن های مختلف نشان داد که حتی شش سال روی، هیچ کس واقعاً چنین کاری را انجام نداده است، بنابراین ما باید کدی را برای انجام آن ایجاد کنیم. همچنین، در شش سالی که از زمان شکل‌گیری این ایده می‌گذرد، جاه‌طلبی‌های من رشد کرده است. من دیگر نمی‌خواهم وب‌سایت فقط آب‌وهوای خارج از دفتر ما را نشان دهد، می‌خواهم آب و هوا را در خارج از پنجره شخصی که وب‌سایت را مشاهده می‌کند نمایش دهد.

من یک لیست آرزویی از ویژگی‌ها ایجاد کردم – شامل به‌روزرسانی‌های آب و هوای زنده، زمان‌های غروب و طلوع خورشید، و چرخه‌های روز و شب و حتی ماه – و آن را به استیون توسعه‌دهنده خود دادم تا آن را انجام دهد.

بار دیگر، API هواشناسی یاهو ثابت کرد که سازگارترین است و کدهای بسیار دقیقی را برای انواع مختلف آب و هوا ارائه می دهد. با این اطلاعات، می‌توانیم آرایه‌ای ایجاد کنیم که می‌تواند نمایشگر آب‌وهوای ما را کنترل کند.

<yahoo-weather-codes>
 <code number="0" description="tornado"/>
 <code number="1" description="tropical storm"/>
 <code number="2" description="hurricane"/>
 <code number="3" description="severe thunderstorms"/>
 <code number="4" description="thunderstorms"/>
 <code number="5" description="mixed rain and snow"/>
 <code number="6" description="mixed rain and sleet"/>
 <code number="7" description="mixed snow and sleet"/>
 <code number="8" description="freezing drizzle"/>
 <code number="9" description="drizzle"/>
 <code number="10" description="freezing rain"/>
 <code number="11" description="showers"/>
 <code number="12" description="showers"/>
 <code number="13" description="snow flurries"/>
 <code number="14" description="light snow showers"/>
 <code number="15" description="blowing snow"/>
 <code number="16" description="snow"/>
 <code number="17" description="hail"/>
 <code number="18" description="sleet"/>
 <code number="19" description="dust"/>
 <code number="20" description="foggy"/>
 <code number="21" description="haze"/>
 <code number="22" description="smoky"/>
 <code number="23" description="blustery"/>
 <code number="24" description="windy"/>
 <code number="25" description="cold"/>
 <code number="26" description="cloudy"/>
 <code number="27" description="mostly cloudy (night)"/>
 <code number="28" description="mostly cloudy (day)"/>
 <code number="29" description="partly cloudy (night)"/>
 <code number="30" description="partly cloudy (day)"/>
 <code number="31" description="clear (night)"/>
 <code number="32" description="sunny"/>
 <code number="33" description="fair (night)"/>
 <code number="34" description="fair (day)"/>
 <code number="35" description="mixed rain and hail"/>
 <code number="36" description="hot"/>
 <code number="37" description="isolated thunderstorms"/>
 <code number="38" description="scattered thunderstorms"/>
 <code number="39" description="scattered thunderstorms"/>
 <code number="40" description="scattered showers"/>
 <code number="41" description="heavy snow"/>
 <code number="42" description="scattered snow showers"/>
 <code number="43" description="heavy snow"/>
 <code number="44" description="partly cloudy"/>
 <code number="45" description="thundershowers"/>
 <code number="46" description="snow showers"/>
 <code number="47" description="isolated thundershowers"/>
 <code number="3200" description="not available"/>
</yahoo-weather-codes>

با این حال، به همان اندازه که داده‌های یاهو خوب هستند، دقیقاً به اندازه مکانی بود که می‌توانستیم آن را از وب‌سایت تغذیه کنیم، و به دلیل ضعف‌های اینترنت اکسپلورر مایکروسافت، ما قادر به استفاده از موقعیت جغرافیایی برای بازیابی مکان دقیق نبودیم. برای همه افرادی که در وب سایت جستجو می کنند. بنابراین ما مجبور شدیم به بهترین چیز بعدی بسنده کنیم و از وب سایت IPInfoDB برای بازیابی نزدیکترین پایتخت یا نزدیکترین شهر بزرگ استفاده کنیم. روی آدرس IP کاربر

در سراسر ایالات متحده، این معمولاً منجر به پایتخت هر ایالتی می شود که شخصی که به وب سایت نگاه می کند در آن ساکن است. امیدواریم که مایکروسافت روزی با بقیه دنیای مرورگرها پیش بیاید و به ما اجازه دهد از موقعیت جغرافیایی استفاده کنیم.

با استفاده از آدرس IP کاربر و وارد کردن آن در IPInfoDB، توانستیم کشور، ایالت یا استان و شهر یا شهر شخصی را که وب سایت را مشاهده می کند، تعمیم دهیم. با وارد کردن این مورد به API یاهو، آب و هوای فعلی آن مکان خاص را به ما داد.

زمان غروب و طلوع خورشید هر روز دقیق است و محاسبه می شود روی بر اساس مگس روی طول و عرض جغرافیایی، همچنین از API هواشناسی یاهو گرفته شده است.

در نهایت، فاز ماه وجود دارد که اگرچه بر اساس آن است روی ثابت شد که فقط تاریخ به عنوان یک متغیر، پیچیده ترین محاسبه از همه است.

بگذار برف ببارد، بگذار برف ببارد، بگذار برف ببارد…

این تئوری است. حالا، برای اینکه چگونه انجام شد.

اولین قدم تقسیم انواع آب و هوای بازیابی شده از یاهو بود! به آرایه ای که می توانیم از آن برای کنترل افکت ها استفاده کنیم روی وب سایت هر یک از 47 نوع آب و هوای مختلف یاهو آرایه خاص خود را دارد که ما آنها را به چهار شماره تقسیم کردیم. اولین مجموعه اعداد پوشش ابر را تعیین می کند، از یک روز صاف تا ابرهای سنگین تیره. عدد دوم مربوط به باران است که از عدم بارندگی تا بارندگی شدید متغیر است. عدد سوم برای انواع مختلف آب و هوای اضافی مانند برف و رعد و برق است. در نهایت، شماره چهارم مربوط به چیزی است که استیون طراح ما آن را “اثرات گرانشی” می نامد، مانند مه، غبار و غبار.

$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);

به منظور به حداقل رساندن کد و تصاویر سنگین از قبل، ما تصمیم گرفتیم تا جایی که امکان داشت همان تصاویر را بازیافت کنیم. به عنوان مثال، تنها یک گرافیک باران وجود دارد و بر اساس آن کنترل می شود روی اطلاعات از Yahoo!. اگر لازم است گرافیک باران روشن باشد، برای روشن‌تر شدن آن، کدورت کمتری تنظیم می‌شود:

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;
}

مواظب ماه باش

ما خوشبختانه به محاسبات مربوط به چرخه ماه برخورد کردیم روی وبلاگ Stephen A. Zarkos. با توجه به تمایل ما برای به حداقل رساندن تصاویر، فاز ماه با یک صفحه پیکسلی انجام شد که 10 فاز مختلف ماه را نشان می داد. با استفاده از محاسبات زارکوس، کد زیر قسمت صحیح صفحه پیکسل را برای نمایش انتخاب می کند و اطمینان حاصل می کند که چرخه ماه صحیح همیشه نشان داده می شود. روی وب سایت ما

background-position: <?php echo $moonbgimagepos; ?>px 0;

غروب خورشید را در زمان واقعی تماشا کنید

بخش پایانی پروژه و از نظر بصری هیجان انگیزترین بخش، غروب و طلوع خورشید در زمان واقعی است. همانطور که گفته شد، این از طول و عرض جغرافیایی نزدیکترین شهر پایتخت شخصی که وب سایت را مشاهده می کند استفاده می کند تا زمان غروب و طلوع خورشید را برای او تعمیم دهد. این بدان معناست که شخصی که در لس آنجلس به وب‌سایت نگاه می‌کند، سه ساعت پس از اینکه کسی به همان وب‌سایت در نیویورک نگاه می‌کند، خورشید طلوع و غروب می‌کند.

غروب و طلوع خورشید از سه افکت افق مجزا تشکیل شده اند که به ترتیب در یکدیگر حل می شوند. برای غروب خورشید، صحنه روز به آرامی در یک صحنه نارنجی حل می شود، قبل از اینکه به صحنه شب تبدیل شود. در حالی که این اتفاق می افتد، یک گرافیک خورشیدی (که همیشه در بالای صفحه مرورگر وجود دارد) شروع به پایین آمدن و “غروب” می کند. این کل process دقیقا 300 ثانیه طول میکشه

زمان غروب (برگرفته از طول و عرض جغرافیایی) به یک مهر زمانی یونیکس تبدیل می شود که سپس به عنوان یک متغیر ذخیره می شود. زمان فعلی نیز به یک برچسب زمانی یونیکس تبدیل می‌شود و تفاوت بین این دو زمان برای یک تابع زمان‌بندی jQuery استفاده می‌شود. این همان چیزی است که باعث انتقال بین تم های روز و شب می شود.

jQuery('#daytime').fadeOut(200000, 'linear', function() {
 jQuery('#sill').fadeOut(100000, 'linear', function() {});
 jQuery('#sunset').fadeOut(100000, 'linear', function() {});
}); 

اثرات استاندارد آب و هوا، هر چه که باشد، در حالی که خورشید در حال غروب و طلوع است به نمایش خود ادامه می دهد. این می تواند منجر به تغییرات بسیار زیبایی شود، به خصوص زمانی که باران بسیار شدید می بارد.

می توانید کد را در عمل مشاهده کنید روی را وب سایت را درگیر کنید.

پیش بینی ما برای فردا

از آنجایی که این سیستمی است که خودمان توسعه داده‌ایم، به طور مداوم در حال جستجوی راه‌هایی برای بهبود آن هستیم و دو ویژگی داریم که از زمان راه‌اندازی سیستم هواشناسی در آگوست امسال، به دنبال اضافه کردن آن هستیم.

اولین مورد چیزی است که ما به تازگی اضافه کرده ایم. یک تنظیم موقعیت مکانی مبتنی بر کوکی، که به موجب آن بازدیدکنندگان وب سایت می توانند با وارد کردن شهر، شهر یا کد پستی خود، نمایش آب و هوای خود را دقیق تر نشان دهند تا اطلاعات آب و هوای خاص منطقه خود را بازیابی کنند. انجام این کار در واقع بسیار آسان بود زیرا API هواشناسی یاهو کدهای پستی و شهرها را به عنوان ورودی می پذیرد و تماس با iponfodb.com را ذخیره می کند. ما این را با شهرهای مختلف از سراسر جهان، از مناطق دوردست مانند شمال کانادا گرفته تا جزایر آنتی‌پود در سواحل نیوزلند آزمایش کرده‌ایم – بنابراین می‌توانید ببینید که آب و هوا در هر کجای دنیا چگونه است.

دومین ویژگی که در سال جدید معرفی خواهیم کرد یک جعبه کنترل است تا بازدیدکنندگان بتوانند جلوه های آب و هوا را به دلخواه خود اجرا کنند، بنابراین ترکیب انواع آب و هوا بدون توجه به آب و هوای واقعی قابل مشاهده است. به عنوان مثال، بازدیدکنندگان می توانند شدت باران را از 0٪ به 100٪ در 10٪ افزایش دهند. این همچنین شامل یک محرک برای غروب و طلوع خورشید می‌شود، بنابراین هرکسی می‌تواند به عنوان اد هریس از نمایش ترومن بازی کند و هر زمان که دوست داشت طلوع خورشید را ایجاد کند.

آیا از API هواشناسی یاهو استفاده کرده اید؟ باهاش ​​چی ساختی؟ در نظرات زیر به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر آب و هوا از طریق Shutterstock.