ページは、国のリストと（ほぼ）空のフレームから提供されます 。 選択した行をクリックすると、Wikipediaの素材がフレームにロードされます。 国のリストは、別の国の説明に移動するために、ウィンドウの上部に残っています。
マッシュアップのソース
1） スプライトの状態フラグの絵文字 。 開発者のページから、国の旗からスプライト（多くの個々の数字のグループ化された圧縮画像）が取得され、国のリストで使用するためにテキストビュー（楽しみのため）にトランスコードされました。 ロシア語と英語で国名を表示するためのJSON配列もそこから取得されます（fg.zipアーカイブ、開発者ページの下部にあるリンク）。
2） 画像は、Skypeからリソースとして期限内に取り出され、 raptorによって公開されました。 使用すると、最初の文字が垂直になり、2番目の文字が水平になるように、スクリプトによってフラグテーブルが転置されます。 ファイルも損失なしに25％縮小されます。
他のデザイナーからのフラグ付きのスプライトがありますが、これらは付随する情報の相対的な完全性のために選択されました。
方法と理由
そのようなデータソースがあるため、開発者がスプライトからデータを取得するための十分な指示がなく、一般に、クイック起動用のコード環境があると考えました。 最初の情報源によると、必要な数の国の国旗用のスプライトジェネレーター全体がありますが、次にそれらをどうするのでしょうか？ 一方では、開発者は何をすべきかをすでに知っています。他方では、迅速な結果を見て適用したいと思います。
さて、スプライトを写真にドラッグして個々のフラグを表示する方法を学びます。 これを実証する方法は？ フラグ付きの画像のコードを生成するための行を単純に選択することは面白くないです。 画像コードコードの生成をいくつかの便利な機能に簡単に統合できるとよいでしょう。 たとえば、めったに言及されていないエキゾチックな国の名前を見ると、疑問に思う人がいます。
そのため、1つのメッシュページでフラグによってテクノロジーを収集するというアイデアが浮上しました（今ではこれが流行語です。1つの新しいWebプロジェクトで複数のWebサービスを使用することを意味しますが、この場合は2つのアイデアとその製品と3番目のサービス-ウィキペディア） 。 宛先：
1）国の旗をクリックして名前を確認します。
2）名前（ロシア語または英語）をクリックして、ウィキペディアの説明を参照してください。
3）旗と国のリストを見失うことはありません。
その結果、ページが判明しました：
国の旗が付いた世界の説明
WinXP-IE8、FF3.6、Chrome12、Opera11.5でテスト済み。 （何らかの理由で、Safari 5.02は生成されたフラグのテーブルをフレームに表示しません;残りは表示します;もちろん、このテーブルを別のページから読み込むことができますが、これはいです。） IE9自体）。 スクリプトによってフレームの高さ= 100％を出力しないように（FFおよびIEの場合）、doctypeの欠如は簡単にするために行われます。
この手法は、変更せずに（国旗を使用して）他のページに適用できます。また、ページ上の他のアクティブな要素のリスト、地理マップ、アクティブな領域を使用した描画にも使用できます。
IEへの態度 。 コードは、ブラウザー間互換性を簡単に提供するjQueryのようなライブラリーを使用しませんでした。 いずれにせよ、別のプロジェクトに実装する場合、これは簡単です（推奨）が、ベースページはライブラリを使用する方が重いか、最新のブラウザーテクノロジーを使用する必要がありません：DOM querySelectorメソッド、CSS urlプロパティ（data：...; base64 ...） 、位置：固定。 IE8の実行可能性コードでは、さまざまな程度の剛性（特定のコードへの付加）をハッキングしました。 base64でコードを使用する代わりに、（fg.pngの）画像をアップロードする必要がありました。
IE8にアンカーまでスクロールさせるには、特に興味深いハックが必要でした。 ブロックサイズが（マウスをホバリングすることによって）変更されるか、ウィンドウサイズ（おそらく固定高さのブロック内のアンカーの配置の特性のため）が変更されたときにのみスクロールを開始することがわかりました。 ピクセルあたりのソフトウェアジャーキングブロックの高さ。 200ミリ秒以内にIEをこのアクションにプッシュできます。
（非）情報の完全性
国データは他のソースから抽出されるため、情報の完全性については完全に「責任」があります。 まず、スカイプマップ上のフラグは完全ではありません。ほとんどの州で認識されているのは州のみです。 したがって、2番目のソースからのより完全な状態リストの表の空のセルの代わりに、Wikipediaに表示される状態とフラグがあることがわかります。 たとえば、「mf」-「St. Martin's Island」、「bl」-Saint-Barthelemy（独自のドメインを持つ）。
しかし、このソースでも、状態のリストは不完全です。 たとえば、フラグ付きのソマリランドはなく、多くの州で認識されています。
ウィキペディアにはロシア語ではない州もあります。 たとえば、コード「um」の下の島。 英語版ウィキペディアが助けになります。 また、バチカン（ "va"）、フランス南部および南極地域（ "tf"）などの別の名前を持っていますが、Wikipediaで名前が利用できないように名前が付けられています。 合計、国のリストもこのページの調整が必要です。 ただし、メッシュの互換性は失われます。国旗付きのスプライトの新しい（または切り捨てられた）バージョンを直接移植します。 ここでの解決策は、多くの注目される機能の追加のスクリプト処理です。
ここに私が修正しなければならなかったものがあります（おそらく著者はfg.jsスクリプトのデータを修正することに同意します）。 表示：ウィキペディアに適した略語と改訂テキスト。
corr ={ ax: " " , cd: " " , cm: " " , ht: " " , hm: " " , ky: " " , sj: " -" , um: " " , va: "" , tf: " " };
状況を修正する別の方法は、Wikipediaに目的のエイリアスを登録することです。
名前に多くの「エラー」があり、システムに含まれていたため（誰が間違っているかは不明ですが、Wikipediaが翻訳されているか、州のリストの著者）、ロシア語のWikipediaの州名の修正リストがスクリプトに追加されました。 上記の例が含まれており、正常に動作するようになりました。 （ただし、すべては検証されていません。文字「e」の横方向のエラーが発生する可能性がある場合は、コメントを書き込んで修正してください。）
PS 「更新」（F5）をクリックすると、ユーザーがウィキペディアのリンクをたどらなかった場合、フラグの表を含む最初のページがロードされます。 あなたが行った場合、「戻る」ボタンは同じものの隅に停止しています。
UPD ：7月11日、01：00、追加-バージョン2。Skypeファイルは不要です。すべてのデータはfg.pngから取得されます。 ただし、比較のために、リンク「ver.1」は残されています。 クリックすると、スカイプリソース図面1568279_432x297.pngのフラグがロードされます。 Skypeのいくつかのフラグが欠落していることがわかります。 州が従属地域である場合、保護フラグが表示されます（たとえば、「nc」、「um」）。 したがって、バージョン2はフラグが豊富であり、リンク送信フォームのみが最初のソースから残ります。 base64を持つ記述子の値も削除され、その意味を失います。