झंडे का मैशअप: एक विदेशी देश के बारे में अधिक जानने के लिए कैसे

वेब पेज के लिए एक देश के झंडे के स्प्राइट के प्रकाशन ने एक इंटरफ़ेस समाधान पर एक प्रयोग के लिए एक विचार दिया।

देशों की एक सूची और एक (लगभग) खाली फ्रेम से एक पृष्ठ की पेशकश की जाती है । चयनित लाइन पर क्लिक करके, विकिपीडिया से सामग्री को फ्रेम में लोड किया जाता है। दूसरे देश के विवरण में जाने के लिए देशों की सूची खिड़की के शीर्ष पर लटकी रहती है।

मैशप के लिए स्रोत

1) स्प्राइट में राज्य के झंडे के चित्र । देशों के झंडे में से एक स्प्राइट (कई व्यक्तिगत आंकड़ों की एक समूहीकृत संकुचित छवि) डेवलपर के पृष्ठ से लिया गया था, जो देशों की सूची में उपयोग के लिए एक पाठ दृश्य (मज़े के लिए) में एन्कोडेड है। रूसी और अंग्रेजी में देश के नाम प्रदर्शित करने के लिए JSON सरणी भी वहां से ली गई है (fg.zip संग्रह, डेवलपर पृष्ठ के निचले भाग में लिंक);

2) छवि, स्काइप से एक संसाधन के रूप में नियत समय में खींची गई, रैप्टर द्वारा प्रकाशित की गई थी; जब उपयोग किया जाता है, तो ध्वज तालिका को स्क्रिप्ट द्वारा ट्रांसपोज़ किया जाएगा ताकि पहला अक्षर ऊर्ध्वाधर और दूसरा अक्षर क्षैतिज रूप से हो। 25% तक की हानि के बिना फ़ाइल भी सिकुड़ जाती है।

अन्य डिजाइनरों से झंडे के साथ स्प्राइट हैं, लेकिन ये साथ की जानकारी की सापेक्षता पूर्णता के कारण चुने गए थे।

कैसे और क्यों

इस तरह के डेटा स्रोत होने के बाद, मैंने सोचा: डेवलपर्स को स्प्राइट से डेटा प्राप्त करने के लिए पर्याप्त निर्देश नहीं हैं और सामान्य तौर पर, त्वरित लॉन्च के लिए एक कोड वातावरण। पहले स्रोत के अनुसार, देशों की आवश्यक संख्या के झंडे के लिए एक पूरे स्प्राइट जनरेटर है, लेकिन उनके साथ आगे क्या करना है? एक तरफ, डेवलपर्स पहले से ही जानते हैं कि क्या करना है, और दूसरी तरफ, मैं एक त्वरित परिणाम देखना और लागू करना चाहता हूं।

खैर, हम सीखेंगे कि स्प्राइट को चित्रों में कैसे खींचें और व्यक्तिगत झंडे दिखाएं। इसे कैसे प्रदर्शित करें? ध्वज के साथ चित्र के लिए कोड जनरेट करने के लिए एक लाइन का एक सरल विकल्प दिलचस्प नहीं है। बेहतर होगा कि आप इमेज कोड कोड की पीढ़ी को किसी उपयोगी फ़ंक्शन में आसानी से एकीकृत कर सकें। उदाहरण के लिए, शायद ही कभी उल्लिखित विदेशी देश का नाम देखकर, एक आश्चर्य होता है: यह कैसा देश है, मुझे क्यों नहीं पता है?

तो एक जाल पृष्ठ में झंडे द्वारा प्रौद्योगिकी एकत्र करने के लिए विचार आया (अब यह एक चर्चा है; इसका मतलब है कि एक नई वेब परियोजना में कई वेब सेवाओं का उपयोग करना है, लेकिन इस मामले में यह 2 विचारों और उनके उत्पादों और तीसरी सेवा का मिश्रण है - विकिपीडिया) । करने के लिए:

1) किसी देश के झंडे पर क्लिक करें और नाम देखें;
2) नाम पर क्लिक करें (रूसी या अंग्रेजी में) और विकिपीडिया पर विवरण देखें;
3) झंडे और देशों की सूची से न हटें।

परिणामस्वरूप, पृष्ठ निकला:

देशों के झंडे के साथ दुनिया का वर्णन

WinXP - IE8, FF3.6, Chrome12, Opera11.5 के तहत परीक्षण किया गया। (किसी कारण से, सफारी 5.02 फ्रेम में झंडे की उत्पन्न तालिका नहीं दिखाती है, बाकी सभी दिखाते हैं; आप निश्चित रूप से इस तालिका को एक अलग पृष्ठ से लोड कर सकते हैं, लेकिन यह बदसूरत है।) IE9 - alexxxst के अनुसार , यह इस पर काम करता है , लेकिन इसे डीबग करने और इसे ठीक करने की कोई तकनीकी संभावना नहीं है। खुद IE9)। एक सिद्धांत की कमी सादगी के लिए की जाती है, इसलिए स्क्रिप्ट द्वारा फ्रेम ऊंचाई = 100% (एफएफ और आईई के लिए) का उत्पादन करने के लिए नहीं।

यह तकनीक अपरिवर्तित (देश के झंडे के साथ) अन्य पृष्ठों पर लागू की जा सकती है, और पृष्ठ पर अन्य सक्रिय तत्वों की सूची के साथ काम करने के लिए, भौगोलिक मानचित्र, सक्रिय क्षेत्रों के साथ ड्राइंग।

IE के लिए रवैया । कोड ने jQuery जैसी पुस्तकालयों का उपयोग नहीं किया, जो आसानी से क्रॉस-ब्राउज़र संगतता प्रदान करेगा। किसी भी मामले में, जब किसी अन्य परियोजना में लागू किया जाता है, तो यह आसान (और अनुशंसित) है, लेकिन पुस्तकालय का उपयोग या आधुनिक ब्राउज़र प्रौद्योगिकियों का उपयोग न करने की आवश्यकता से आधार पृष्ठ कठिन हो जाएगा: DOM क्वेरीसेलेक्टर विधि, सीएसएस url गुण (डेटा ... ... base64 ...); , स्थिति: निश्चित। IE8 में व्यवहार्यता कोड के लिए कठोरता के अलग-अलग डिग्री के हैक (एक विशिष्ट कोड के लिए लगाव) किया। मुझे (केवल IE के लिए) आधार में इसके कोड का उपयोग करने के बजाय छवि fg.png अपलोड करना था।

IE8 को एंकर को स्क्रॉल करने के लिए मजबूर करने के लिए एक विशेष रूप से दिलचस्प हैक की आवश्यकता थी। यह पाया गया कि यह केवल तभी स्क्रॉल करना शुरू करता है जब ब्लॉक आकार (माउस को मँडराकर) या खिड़की के आकार में बदलता है (संभवतः एक निश्चित ऊंचाई के ब्लॉक में एंकरों के प्लेसमेंट की ख़ासियत के कारण)। सॉफ्टवेयर पिक्सेल प्रति ब्लॉक ऊंचाई मरोड़ते। 200 ms के भीतर IE को इस क्रिया में धकेलने में मदद करता है।

(गैर-) जानकारी की पूर्णता

चूंकि देश के डेटा को अन्य स्रोतों से निकाला जाता है, इसलिए वे जानकारी की पूर्णता के लिए पूरी तरह से "जिम्मेदार" हैं। सबसे पहले, स्काइप के नक्शे पर झंडे पूरे नहीं होते हैं - केवल अधिकांश राज्यों द्वारा मान्यता प्राप्त राज्य। इसलिए, यह देखा जा सकता है कि दूसरे स्रोत से राज्यों की अधिक पूरी सूची में तालिका में खाली कोशिकाओं के स्थान पर राज्य और झंडे हैं जो विकिपीडिया पर प्रस्तुत किए गए हैं। उदाहरण के लिए, "एमएफ" - "सेंट मार्टिन द्वीप", "ब्ल" - सेंट-बारथेलेमी (अपना स्वयं का डोमेन होने वाला)।

लेकिन इस स्रोत में भी राज्यों की सूची अधूरी है। उदाहरण के लिए, इसके ध्वज के साथ कोई सोमालीलैंड नहीं है और कई राज्यों द्वारा मान्यता प्राप्त है।

ऐसे राज्य भी हैं जो विकिपीडिया पर रूसी में नहीं हैं। उदाहरण के लिए, "उम" कोड के तहत द्वीप। अंग्रेजी विकिपीडिया बचाव के लिए आता है। और ऐसे नाम भी हैं ताकि उनका नाम विकिपीडिया पर उपलब्ध न हो, हालाँकि उनका एक अलग नाम है, उदाहरण के लिए, वेटिकन ("वा"), फ्रांसीसी दक्षिणी और अंटार्कटिक प्रदेश ("tf")। कुल मिलाकर, देशों की सूची में भी इस पृष्ठ के लिए समायोजन की आवश्यकता है। लेकिन फिर मेष की संगतता गायब हो जाएगी - देश के झंडे के साथ स्प्राइट के नए (या छंटे हुए) संस्करणों का प्रत्यक्ष पोर्टिंग। यहाँ समाधान कई देखी गई विशेषताओं की अतिरिक्त स्क्रिप्ट प्रोसेसिंग में है।
यहाँ मुझे तय करना है (शायद लेखक fg.js स्क्रिप्ट में डेटा को ठीक करने के लिए सहमत है)। शो: विकिपीडिया के लिए उपयुक्त संक्षिप्त नाम और संशोधित पाठ।

corr ={ ax: " " , cd: "  " , cm: " " , ht: " " , hm: "    " , ky: " " , sj: "  -" , um: "   " , va: "" , tf: "    " }; 

स्थिति को ठीक करने का दूसरा तरीका विकिपीडिया पर वांछित उपनाम दर्ज करना है।

चूंकि नामों में बहुत सारी "त्रुटियां" थीं और इसे सिस्टम में शामिल किया गया था (हालांकि यह ज्ञात नहीं है कि कौन है - विकिपीडिया का अनुवाद या राज्यों की सूची का लेखक), रूसी विकिपीडिया के लिए राज्य के नामों की एक सही सूची को स्क्रिप्ट में जोड़ा गया है। उपरोक्त उदाहरण इसमें शामिल हैं और अब सही ढंग से काम करते हैं। (लेकिन सभी को सत्यापित नहीं किया गया है - पत्र "ई" के बाद कहीं क्षैतिज त्रुटियां संभव हैं, इसे ठीक करने के लिए टिप्पणियों में लिखें।)

PS यदि आप "ताज़ा करें" (F5) पर क्लिक करते हैं, तो झंडे की तालिका वाला प्रारंभिक पृष्ठ लोड होगा यदि उपयोगकर्ता ने विकिपीडिया पर लिंक का पालन नहीं किया है। यदि आप गए, तो "बैक" बटन कोने में उसी के लिए निलंबित है।

UPD : 11 जुलाई, 01:00, इसके अलावा - संस्करण 2. स्काइप फ़ाइल की कोई आवश्यकता नहीं है, सभी डेटा fg.png से लिया गया है। लेकिन तुलना के लिए, लिंक "ver.1" बचा हुआ है। यदि आप इसे क्लिक करते हैं, तो 1568279_432x297.png ड्राइंग स्काइप संसाधन से झंडे लोड किए गए हैं। आप देख सकते हैं कि Skype में कई ध्वज गायब थे। जहां राज्य एक आश्रित क्षेत्र है, एक रक्षक ध्वज को दर्शाया गया है (उदाहरण के लिए, 'एनसी', 'उम')। इसलिए, संस्करण 2 झंडे में अधिक समृद्ध है, और केवल लिंक जमा करने का फॉर्म 1 स्रोत से बना हुआ है। बेस 64 के साथ डिस्क्रिप्टर का मूल्य भी इससे हटा दिया गया है, इसका अर्थ खो गया है।