كيفية تسخير ياهو!

في عام 2006 ، عندما كنت أعمل في وكالة تصميم في كارديف ، ويلز ، تصورت فكرة أن تظهر على موقعنا على الإنترنت أحوال الطقس الحالية خارج مكتبنا. أردت أن أجعل موقع الويب الخاص بنا جذابًا تمامًا وأن نعرض لزوارنا وعملائنا ما كنا نواجهه في الحياة اليومية كل يوم ، في الوقت الفعلي.

بعد القيام ببعض الأبحاث المكثفة ، اكتشفت أن أفضل نقطة بداية لهذا هي واجهة برمجة تطبيقات الطقس في Yahoo! ، لأنها تعطي الظروف الجوية في شكل ثابت وقابل للاستخدام. في ذلك الوقت ، ومع ذلك ، كانت الطريقة الوحيدة لتمثيل الطقس على موقع الويب هي استخدام Flash. كان وقت التطوير وحده كافياً لإخافة الفكرة من أذهان مديري الشركة ، ولم يتجاوز مرحلة الحمل.

الآن ، بعد ست سنوات ، وبصفتي المدير الفني لشركتي الخاصة ، قمت بإعادة النظر في الفكرة. كشف بحث في مختلف المواقع والمدونات والمنتديات أنه حتى بعد مرور ستة أعوام ، لم يقم أي شخص فعليًا بأي شيء من هذا القبيل ، لذلك يتعين علينا إنشاء الكود للقيام بذلك. أيضا ، في السنوات الست منذ أن تم تصميم الفكرة ، نمت طموحاتي. لم أعد أريد عرض الموقع على الويب خارج مكتبنا - أريد أن يعرض الطقس خارج نافذة الشخص الذي يشاهد الموقع.

لقد قمت بإنشاء قائمة أمنيات من الميزات - تحتوي على تحديثات الطقس المباشرة وأوقات الغروب وأوقات شروق الشمس ، ودورات ليلية ونهارية وحتى القمر - وأعطتها لمطوّرنا ستيفن لجعله كذلك.

مرة أخرى ، أثبتت واجهة برمجة تطبيقات الطقس في ياهو أنها الأكثر ثباتًا ، حيث تقدم رموزًا دقيقة جدًا لمختلف أنواع الطقس. باستخدام هذه المعلومات ، سنتمكن من إنشاء مصفوفة يمكنها التحكم في عرض الطقس لدينا.

ومع ذلك ، وبقدر ما كانت بيانات ياهو جيدة ، فقد كان دقيقًا تمامًا مثل الموقع الذي تمكنا من إطعامه من موقع الويب ، وبسبب نقاط الضعف في Microsoft Internet Explorer ، لم نتمكن من استخدام الموقع الجغرافي لاسترداد موقع دقيق لكل شخص يتصفح الموقع. ولذلك كان علينا أن نستقر على أفضل شيء ثاني ونستخدم موقع IPInfoDB لاسترداد أقرب رأس مال ، أو أقرب مدينة كبيرة ، استنادًا إلى عنوان IP الخاص بالمستخدم.

في جميع أنحاء الولايات المتحدة ، يؤدي هذا عادة إلى عاصمة أي دولة يقيم فيها الشخص الذي يبحث في الموقع. هنا في المملكة المتحدة ، يتم تخطيها في لندن ، بغض النظر عن مكان إقامة الشخص في المملكة المتحدة ؛ نأمل أن تلتقي Microsoft يومًا ما مع بقية عالم المتصفحات وتسمح لنا باستخدام تحديد الموقع الجغرافي.

باستخدام عنوان IP الخاص بالمستخدم وإدخاله في IPInfoDB ، تمكنا من استقراء البلد أو الولاية أو المقاطعة ، ومدينة أو بلدة الشخص الذي يشاهد الموقع. أعطتنا تغذية هذا إلى واجهة برمجة تطبيقات Yahoo (ياهو) الطقس الحالي لهذا الموقع بالتحديد.

أوقات غروب الشمس وشروقها دقيقة كل يوم ويتم حسابها على الطاير استنادًا إلى خطوط الطول والعرض ، مستمدة أيضًا من API لطقس ياهو.

أخيراً ، هناك مرحلة القمر ، التي ، على الرغم من أنها تعتمد على التاريخ فقط كمتغير ، أثبتت أنها الحساب الأكثر تعقيدا للجميع.

دعها الثلج ، والثلج ، والسماح لها الثلج ...

هذه هي النظرية. الآن ، لكيفية القيام به.

كانت الخطوة الأولى هي تقسيم أنواع الطقس التي تم استردادها من Yahoo! إلى صفيف يمكننا استخدامه للتحكم في التأثيرات على موقع الويب. يحتوي كل نوع من أنواع الطقس المختلفة في ياهو البالغ عددها 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;}

احذر من القمر

تعثرنا ، لحسن الحظ ، على حسابات دورة القمر مدونة ستيفن A. Zarkos . تمشيا مع رغبتنا في الحفاظ على الحد الأدنى من الصور ، تم الانتهاء من مرحلة القمر مع ورقة بكسل تظهر 10 مراحل مختلفة من القمر. باستخدام حسابات Zarkos ، تحدد التعليمة البرمجية التالية الجزء الصحيح من ورقة البيكسل للعرض ، مما يضمن عرض دورة القمر الصحيحة على موقعنا.

background-position: px 0;

مشاهدة غروب الشمس في الوقت الحقيقي

الجزء الأخير من المشروع ، والأكثر إثارة بصريا ، هو غروب الشمس وشروق الشمس في الوقت الحقيقي. كما ذكرنا ، يستخدم هذا خط الطول والعرض لأقرب مدينة رأس مال الشخص الذي يشاهد الموقع لاستقراء أوقات غروب الشمس وشروقها بالنسبة لهم. وهذا يعني أن شخصًا ما ينظر إلى موقع الويب في لوس أنجلوس سيشهد شروق الشمس ويضع ثلاث ساعات بعد شخص ينظر إلى موقع الويب نفسه في نيويورك.

يتكون غروب الشمس وشروق الشمس من ثلاثة آثار منفصلة للأفق تتحلل في بعضها البعض بالتسلسل. بالنسبة لغروب الشمس ، يذوب مشهد اليوم ببطء في مشهد برتقالي ، قبل أن يتحول إلى مشهد ليلي. وبينما يحدث ذلك ، يبدأ الرسم الشمسي (الذي يظهر دائمًا فوق طية المتصفح) في الانحدار و "التعيين". تستغرق هذه العملية الكاملة 300 ثانية بالضبط.

يتم تحويل وقت غروب الشمس (المستمد من خطوط الطول والعرض) إلى طابع زمني يونكس ، والذي يتم تخزينه كمتغير. يتم أيضًا تحويل الوقت الحالي إلى الطابع الزمني لـ Unix ، ويتم استخدام الفرق بين الوقتين لوظيفة مهلة jQuery. هذا هو ما يخلق الانتقال بين موضوعات اليوم والليل.

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

تستمر تأثيرات الطقس القياسية ، مهما كانت ، في الظهور بينما تغيب الشمس وترتفع. هذا يمكن أن يؤدي إلى بعض التحولات الجميلة ، وخاصة عندما تمطر بشدة.

يمكنك رؤية الرمز في العمل على Engage موقع الويب .

توقعاتنا للغد

نظرًا لأن هذا نظام طورناه بأنفسنا ، فإننا نبحث باستمرار عن طرق لتحسينه ولدينا ميزتان كنا نتطلع إلى إضافتهما منذ إطلاق نظام الطقس في أغسطس من هذا العام.

الأول هو شيء قمنا بإضافته للتو ؛ إعداد موقع يستند إلى ملفات تعريف الارتباط ، حيث يمكن للزائر للموقع أن يجعل عرض الطقس أكثر دقة عن طريق إدخال المدينة أو المدينة أو الرمز البريدي من أجل استرداد معلومات الطقس المحددة لمنطقتهم. كان هذا في الواقع أمرًا سهلاً للغاية ، نظرًا لأن واجهة برمجة تطبيقات الطقس في Yahoo تقبل الرموز البريدية والمدن كمدخلات ، كما توفر اتصالاً مع iponfodb.com. لقد اختبرنا ذلك مع مدن مختلفة من جميع أنحاء العالم ، من مناطق بعيدة مثل شمال كندا إلى جزر Antipodes قبالة سواحل نيوزيلندا - لذلك يمكنك أن ترى كيف يكون الطقس في أي مكان في العالم.

الميزة الثانية التي سنقدمها في العام الجديد هي مربع تحكم بحيث يمكن للزائرين تنفيذ تأثيرات الطقس كما يرونها مناسبة ، لذلك يمكن رؤية مجموعات من أنواع الطقس المختلفة بغض النظر عن الطقس الفعلي. على سبيل المثال ، سيتمكن الزوار من زيادة شدة المطر من 0٪ إلى 100٪ بزيادات 10٪. وسيشمل ذلك أيضًا إطلاقًا لغروب الشمس وشروق الشمس ، بحيث يمكن للجميع اللعب في Ed Harris من The Truman Show وإنشاء شروق الشمس في أي وقت تشاء.

هل استخدمت ياهو! 's الطقس API؟ ماذا بنيت مع ذلك؟ أخبرنا في التعليقات أدناه.

صورة مميزة / صورة مصغرة ، صورة الطقس عبر Shutterstock.