Mash of flags: how to find out more about an exotic country
Publishing a sprite of country flags for web pages gave an idea for experimenting with an interface solution.
A page from a list of countries and a (almost) empty frame is suggested. By clicking on the selected line in the frame material is loaded from Wikipedia. The list of countries at the same time remains to hang at the top of the window to change to another country description.
')
1) Icons of national flags in the sprite . A sprite (a group compacted image of many separate drawings) from the flags of countries is taken from the developer’s page, recoded into a text view (for fun) for use in the list of countries. JSON array for displaying country names in Russian and English is also taken from there (archive fg.zip, link at the bottom of the developer page);
2) The image, pulled out in due time as a resource from Skype , was published by raptor ; when used, the flag table will be transposed by the script so that the first letter is vertically, the second is horizontally. The file is also 25% lossless.
There are sprites with flags from other designers, but these are chosen because of the relative completeness of the related information.
Having such data sources, it was thought: there are not enough instructions for developers on pulling data from the sprite and, in general, the code environment for quick launch. For the first source there is a whole generator of sprites for the flags of the required number of countries, but what next to do with them? On the one hand, the developers already know what to do, and on the other, I want to see and apply a quick result.
Well, let's learn how to drag a sprite into pictures and show individual flags. How to show it? A simple choice of the line for generating the code of a picture with a flag is uninteresting. It would be better if it is easy to integrate the generation of image codes into any useful function. For example, seeing the name of a rarely mentioned exotic country, you ask yourself: what kind of country, why do not you know?
This is how the idea of ​​collecting technologies by flags into one mashup page appeared (now it is a buzzword; it means using several web services in one new web project, but in this case - mixing 2 ideas and their products and the 3rd service - Wikipedia) . To:
1) click on the flag of any country and watch the name;
2) click on the title (in Russian or English) and see the description in Wikipedia;
3) do not lose the list of flags and countries of sight.
As a result, the page turned out:
Descriptions of the states of the world with the flags of countries
Tested under WinXP - IE8, FF3.6, Chrome12, Opera11.5. (Safari 5.02 for some reason does not show the generated table of flags in the frame, the rest shows; you can, of course, download this table from a separate page, but this is ugly.) IE9 - according to the message alexxxst works like this , but there is no technical possibility to debug and fix it ( IE9 itself). The absence of the doctype is done for simplicity, so as not to display the height of the frame = 100% by the script (for FF and IE).
This technique can be applied on other pages either as unchanged (with country flags), or for working with a list of other active elements on a page, a geographical map, a drawing with active areas.
Relation to IE . The code did not use jQuery type libraries that would easily provide cross-browser compatibility. In any case, if implemented in another project, this is easy (and recommended), but the base page would make it harder to use the library or not to use modern browser technologies: DOM querySelector method, CSS url properties (data: ...; base64 ...) , position: fixed. For the feasibility of the code in IE8 made hacks of varying degrees of rigidity (attachment to a specific code). It was necessary (only for IE) to upload the fg.png image instead of using its base64 code.
A particularly interesting hack was required in order to force IE8 to scroll to the anchor. It was found that it starts to scroll only when the block size changes (by mouse over) or the window size (probably due to the peculiarity of the placement of anchors in a fixed-height block). Software pull block height by 1 pix. for 200 ms helps push IE to this action.
Since data on countries are extracted from other sources, they are completely “responsible” for the completeness of the information. First, the flags on the Skype map are incomplete - only the states recognized by the majority of states. Therefore, it can be seen that in the place of empty cells in the table in a more complete list of states from the 2nd source there are states and flags that are represented in Wikipedia. For example, "mf" - "St. Martin", "bl" - St. Barthelemy (who has his own domain).
But in this source the list of states is incomplete. For example, there is no Somaliland with its flag and recognized by a number of states.
There are some states that are not in Wikipedia in Russian. For example, islands under the code "um". English Wikipedia comes to the rescue. And there are those named in such a way that their name is absent in Wikipedia, although under a different name they are, for example, the Vatican (“va”), the French Southern and Antarctic Territories (“tf”). Total, the list of countries also requires adjustment for this page. But then the compatibility of the mashup disappears - direct porting of new (or trimmed) versions of the sprite with the flags of the countries. The output here is in additional scripting processing of a number of noticed features.
Here's what had to be fixed (maybe the author agrees to correct the data in the fg.js script). Showing: abbreviation and corrected text, suitable for Wikipedia.
Another way to correct the situation is to register the desired alias in Wikipedia.
Since there are a lot of “errors” in the names and it is included in the system (although it is not known who is mistaken - Wikipedia in translation or the author of the list of states), a corrective list of names of states for Russian Wikipedia has been added to the script. The above examples are included in it and now work correctly. (But all are not checked - somewhere after the letter "e" horizontal errors are possible, write in the comments to fix it.)
PS If you click on “Refresh” (F5) - the initial page with the table of flags will be loaded if the user did not follow the links in Wikipedia. If you went - the button “Back” in the corner for the same one is suspended.
UPD : July 11, 01:00, supplement - version 2. The need for the Skype file disappears, all data is taken from fg.png. But for comparison, the link is "ver.1". If you click on it, the flags will be loaded from the Skype resource pattern 1568279_432x297.png. You can see that a number of flags in Skype were missing. Where the state is a dependent territory, the protectorate flag is depicted (for example, 'nc', 'um'). Therefore, version 2 is richer in flags, and from the 1st source only the linking form has remained. The value of the descriptor with base64 has also been removed from it, it has lost its meaning.
A page from a list of countries and a (almost) empty frame is suggested. By clicking on the selected line in the frame material is loaded from Wikipedia. The list of countries at the same time remains to hang at the top of the window to change to another country description.
')
Sources for Mashup
1) Icons of national flags in the sprite . A sprite (a group compacted image of many separate drawings) from the flags of countries is taken from the developer’s page, recoded into a text view (for fun) for use in the list of countries. JSON array for displaying country names in Russian and English is also taken from there (archive fg.zip, link at the bottom of the developer page);
2) The image, pulled out in due time as a resource from Skype , was published by raptor ; when used, the flag table will be transposed by the script so that the first letter is vertically, the second is horizontally. The file is also 25% lossless.
There are sprites with flags from other designers, but these are chosen because of the relative completeness of the related information.
How and why
Having such data sources, it was thought: there are not enough instructions for developers on pulling data from the sprite and, in general, the code environment for quick launch. For the first source there is a whole generator of sprites for the flags of the required number of countries, but what next to do with them? On the one hand, the developers already know what to do, and on the other, I want to see and apply a quick result.
Well, let's learn how to drag a sprite into pictures and show individual flags. How to show it? A simple choice of the line for generating the code of a picture with a flag is uninteresting. It would be better if it is easy to integrate the generation of image codes into any useful function. For example, seeing the name of a rarely mentioned exotic country, you ask yourself: what kind of country, why do not you know?
This is how the idea of ​​collecting technologies by flags into one mashup page appeared (now it is a buzzword; it means using several web services in one new web project, but in this case - mixing 2 ideas and their products and the 3rd service - Wikipedia) . To:
1) click on the flag of any country and watch the name;
2) click on the title (in Russian or English) and see the description in Wikipedia;
3) do not lose the list of flags and countries of sight.
As a result, the page turned out:
Descriptions of the states of the world with the flags of countries
Tested under WinXP - IE8, FF3.6, Chrome12, Opera11.5. (Safari 5.02 for some reason does not show the generated table of flags in the frame, the rest shows; you can, of course, download this table from a separate page, but this is ugly.) IE9 - according to the message alexxxst works like this , but there is no technical possibility to debug and fix it ( IE9 itself). The absence of the doctype is done for simplicity, so as not to display the height of the frame = 100% by the script (for FF and IE).
This technique can be applied on other pages either as unchanged (with country flags), or for working with a list of other active elements on a page, a geographical map, a drawing with active areas.
Relation to IE . The code did not use jQuery type libraries that would easily provide cross-browser compatibility. In any case, if implemented in another project, this is easy (and recommended), but the base page would make it harder to use the library or not to use modern browser technologies: DOM querySelector method, CSS url properties (data: ...; base64 ...) , position: fixed. For the feasibility of the code in IE8 made hacks of varying degrees of rigidity (attachment to a specific code). It was necessary (only for IE) to upload the fg.png image instead of using its base64 code.
A particularly interesting hack was required in order to force IE8 to scroll to the anchor. It was found that it starts to scroll only when the block size changes (by mouse over) or the window size (probably due to the peculiarity of the placement of anchors in a fixed-height block). Software pull block height by 1 pix. for 200 ms helps push IE to this action.
(Not-) Completeness of information
Since data on countries are extracted from other sources, they are completely “responsible” for the completeness of the information. First, the flags on the Skype map are incomplete - only the states recognized by the majority of states. Therefore, it can be seen that in the place of empty cells in the table in a more complete list of states from the 2nd source there are states and flags that are represented in Wikipedia. For example, "mf" - "St. Martin", "bl" - St. Barthelemy (who has his own domain).
But in this source the list of states is incomplete. For example, there is no Somaliland with its flag and recognized by a number of states.
There are some states that are not in Wikipedia in Russian. For example, islands under the code "um". English Wikipedia comes to the rescue. And there are those named in such a way that their name is absent in Wikipedia, although under a different name they are, for example, the Vatican (“va”), the French Southern and Antarctic Territories (“tf”). Total, the list of countries also requires adjustment for this page. But then the compatibility of the mashup disappears - direct porting of new (or trimmed) versions of the sprite with the flags of the countries. The output here is in additional scripting processing of a number of noticed features.
Here's what had to be fixed (maybe the author agrees to correct the data in the fg.js script). Showing: abbreviation and corrected text, suitable for Wikipedia.
corr ={ ax: " " , cd: " " , cm: " " , ht: " " , hm: " " , ky: " " , sj: " -" , um: " " , va: "" , tf: " " }; Another way to correct the situation is to register the desired alias in Wikipedia.
Since there are a lot of “errors” in the names and it is included in the system (although it is not known who is mistaken - Wikipedia in translation or the author of the list of states), a corrective list of names of states for Russian Wikipedia has been added to the script. The above examples are included in it and now work correctly. (But all are not checked - somewhere after the letter "e" horizontal errors are possible, write in the comments to fix it.)
PS If you click on “Refresh” (F5) - the initial page with the table of flags will be loaded if the user did not follow the links in Wikipedia. If you went - the button “Back” in the corner for the same one is suspended.
UPD : July 11, 01:00, supplement - version 2. The need for the Skype file disappears, all data is taken from fg.png. But for comparison, the link is "ver.1". If you click on it, the flags will be loaded from the Skype resource pattern 1568279_432x297.png. You can see that a number of flags in Skype were missing. Where the state is a dependent territory, the protectorate flag is depicted (for example, 'nc', 'um'). Therefore, version 2 is richer in flags, and from the 1st source only the linking form has remained. The value of the descriptor with base64 has also been removed from it, it has lost its meaning.
Source: https://habr.com/ru/post/123804/
All Articles