July 10, 2011 at 13:32Mashup of flags: how to learn more about an exotic country
The publication of a country flag sprite for web pages gave an idea for an experiment on an interface solution.
A page is offered from a list of countries and an (almost) empty frame. By clicking on the selected line in the frame, material from Wikipedia is loaded. The list of countries remains hanging at the top of the window to go to another country description.
1) Pictograms of state flags in the sprite . A sprite (a grouped compressed image of many individual figures) from the flags of countries was taken from the developer’s page, transcoded into a text view (for fun) for use in the list of countries. The JSON array for showing country names in Russian and English is also taken from there (fg.zip archive, 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 vertical and the second horizontal. The file is also compressed without loss by 25%.
There are sprites with flags from other designers, but these were chosen because of the relative completeness of the accompanying information.
Having such data sources, I thought: there are not enough instructions for developers to get data out of a sprite and, in general, a code environment for quick launch. According to the first source, there is a whole sprite generator for the flags of the desired number of countries, but what next to do with them? On the one hand, developers already know what to do, and on the other hand, I want to see and apply a quick result.
Well, we’ll learn how to drag a sprite into pictures and show individual flags. How to demonstrate this? A simple choice of a line to generate code for a picture with a flag is not interesting. It would be better if you could easily integrate the generation of image code codes into some useful function. For example, seeing the name of a rarely mentioned exotic country, one wonders: what kind of country, why I don’t know?
So the idea came up to collect technology by flags in one mesh page (now this is a buzzword; it means using several web services in one new web project, but in this case it is a mixture of 2 ideas and their products and the 3rd service - Wikipedia) . To:
1) click on the flag of a country and look at the name;
2) click on the name (in Russian or English) and see the description on Wikipedia;
3) do not lose sight of the list of flags and countries.
As a result, we got the page:
Descriptions of the states of the world with the flags of countries
Tested under WinXP - IE8, FF3.6, Chrome12, Opera11.5. (For some reason, Safari 5.02 does not show the generated flag table in the frame, it shows the rest; of course, you can load this table from a separate page, but this is ugly.) IE9 - by messagealexxxst works like this , but there is no technical capability to debug and fix (IE9 itself). The lack of a doctype is done for simplicity, so as not to output the frame height = 100% by the script (for FF and IE).
This technique can be applied on other pages both unchanged (with country flags), and to work with a list of other active elements on the page, geographic map, drawing with active areas.
Relation to IE. The code did not use libraries like jQuery, which would easily provide cross-browser compatibility. In any case, when implemented in another project, this is easy (and recommended) to do, but the base page would be heavier using the library or the need to not use modern browser technologies: the DOM querySelector method, CSS url properties (data: ...; base64 ...) , position: fixed. For feasibility code in IE8 made hacks of varying degrees of rigidity (attachment to a specific code). I had to (only for IE) upload the image fg.png instead of using its code in base64.
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 (by hovering the mouse) or the window size changes (probably due to the peculiarity of the placement of anchors in a block of a fixed height). Software jerking block height per pixel. within 200 ms helps push IE to this action.
Since country data are extracted from other sources, they are completely “responsible” for the completeness of the information. Firstly, the flags on the Skype map are not fully represented - only states recognized by most states. Therefore, it can be seen that in place of empty cells in the table in the more complete list of states from the 2nd source there are states and flags that are presented on Wikipedia. For example, “mf” - “St. Martin's Island”, “bl” - Saint-Barthelemy (having its own domain).
But even 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 also such states that Wikipedia does not have in Russian. For example, islands under the code "um". English Wikipedia comes to the rescue. And there are those named so that their name is not available on Wikipedia, although they have a different name, 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 mesh will disappear - direct porting of new (or truncated) versions of the sprite with country flags. The solution here is in additional script processing of a number of noticed features.
Here is what I had to fix (maybe the author agrees to fix the data in the fg.js script). Showing: abbreviation and revised text suitable for Wikipedia.
Another way to fix the situation is to register the desired alias on Wikipedia.
Since there were a lot of “errors” in the names and it was included in the system (although it is not known who is wrong - Wikipedia is translated or the author of a list of states), a correcting list of state names for the Russian Wikipedia has been added to the script. The above examples are included in it and now work correctly. (But all have not been verified - somewhere after the letter “e” horizontally errors are possible, write in the comments to fix it.)
PS If you click on “Refresh” (F5), the initial page with a table of flags will load if the user did not go along Wikipedia links. If you went, the “Back” button is suspended in the corner for the same one.
UPD: 07/11, 01:00, addition - version 2. There is no need for a Skype file, all data is taken from fg.png. But for comparison, the link “ver.1” is left. If you click it, the flags from the skype resource drawing 1568279_432x297.png are loaded. You can see that a number of flags in Skype were missing. Where the state is a dependent territory, a protectorate flag is depicted (for example, 'nc', 'um'). Therefore, version 2 is richer in flags, and only the link submission form remains from the 1st source. The value of the descriptor with base64 is also removed from it, it has lost its meaning.
A page is offered from a list of countries and an (almost) empty frame. By clicking on the selected line in the frame, material from Wikipedia is loaded. The list of countries remains hanging at the top of the window to go to another country description.
Sources for Mashup
1) Pictograms of state flags in the sprite . A sprite (a grouped compressed image of many individual figures) from the flags of countries was taken from the developer’s page, transcoded into a text view (for fun) for use in the list of countries. The JSON array for showing country names in Russian and English is also taken from there (fg.zip archive, 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 vertical and the second horizontal. The file is also compressed without loss by 25%.
There are sprites with flags from other designers, but these were chosen because of the relative completeness of the accompanying information.
How and why
Having such data sources, I thought: there are not enough instructions for developers to get data out of a sprite and, in general, a code environment for quick launch. According to the first source, there is a whole sprite generator for the flags of the desired number of countries, but what next to do with them? On the one hand, developers already know what to do, and on the other hand, I want to see and apply a quick result.
Well, we’ll learn how to drag a sprite into pictures and show individual flags. How to demonstrate this? A simple choice of a line to generate code for a picture with a flag is not interesting. It would be better if you could easily integrate the generation of image code codes into some useful function. For example, seeing the name of a rarely mentioned exotic country, one wonders: what kind of country, why I don’t know?
So the idea came up to collect technology by flags in one mesh page (now this is a buzzword; it means using several web services in one new web project, but in this case it is a mixture of 2 ideas and their products and the 3rd service - Wikipedia) . To:
1) click on the flag of a country and look at the name;
2) click on the name (in Russian or English) and see the description on Wikipedia;
3) do not lose sight of the list of flags and countries.
As a result, we got the page:
Descriptions of the states of the world with the flags of countries
Tested under WinXP - IE8, FF3.6, Chrome12, Opera11.5. (For some reason, Safari 5.02 does not show the generated flag table in the frame, it shows the rest; of course, you can load this table from a separate page, but this is ugly.) IE9 - by messagealexxxst works like this , but there is no technical capability to debug and fix (IE9 itself). The lack of a doctype is done for simplicity, so as not to output the frame height = 100% by the script (for FF and IE).
This technique can be applied on other pages both unchanged (with country flags), and to work with a list of other active elements on the page, geographic map, drawing with active areas.
Relation to IE. The code did not use libraries like jQuery, which would easily provide cross-browser compatibility. In any case, when implemented in another project, this is easy (and recommended) to do, but the base page would be heavier using the library or the need to not use modern browser technologies: the DOM querySelector method, CSS url properties (data: ...; base64 ...) , position: fixed. For feasibility code in IE8 made hacks of varying degrees of rigidity (attachment to a specific code). I had to (only for IE) upload the image fg.png instead of using its code in base64.
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 (by hovering the mouse) or the window size changes (probably due to the peculiarity of the placement of anchors in a block of a fixed height). Software jerking block height per pixel. within 200 ms helps push IE to this action.
(Non-) Completeness of information
Since country data are extracted from other sources, they are completely “responsible” for the completeness of the information. Firstly, the flags on the Skype map are not fully represented - only states recognized by most states. Therefore, it can be seen that in place of empty cells in the table in the more complete list of states from the 2nd source there are states and flags that are presented on Wikipedia. For example, “mf” - “St. Martin's Island”, “bl” - Saint-Barthelemy (having its own domain).
But even 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 also such states that Wikipedia does not have in Russian. For example, islands under the code "um". English Wikipedia comes to the rescue. And there are those named so that their name is not available on Wikipedia, although they have a different name, 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 mesh will disappear - direct porting of new (or truncated) versions of the sprite with country flags. The solution here is in additional script processing of a number of noticed features.
Here is what I had to fix (maybe the author agrees to fix the data in the fg.js script). Showing: abbreviation and revised text suitable for Wikipedia.
corr ={
ax: "Аландские острова"
, cd: "Демократическая Республика Конго"
, cm: "Республика Кипр"
, ht: "Республика Гаити"
, hm: "Остров Херд и Острова Макдоналд"
, ky: "Каймановы острова"
, sj: "Шпицберген и Ян-Майен"
, um: "Внешние малые острова США"
, va: "Ватикан"
, tf: "Французские Южные и Антарктические территории"
};Another way to fix the situation is to register the desired alias on Wikipedia.
Since there were a lot of “errors” in the names and it was included in the system (although it is not known who is wrong - Wikipedia is translated or the author of a list of states), a correcting list of state names for the Russian Wikipedia has been added to the script. The above examples are included in it and now work correctly. (But all have not been verified - somewhere after the letter “e” horizontally errors are possible, write in the comments to fix it.)
PS If you click on “Refresh” (F5), the initial page with a table of flags will load if the user did not go along Wikipedia links. If you went, the “Back” button is suspended in the corner for the same one.
UPD: 07/11, 01:00, addition - version 2. There is no need for a Skype file, all data is taken from fg.png. But for comparison, the link “ver.1” is left. If you click it, the flags from the skype resource drawing 1568279_432x297.png are loaded. You can see that a number of flags in Skype were missing. Where the state is a dependent territory, a protectorate flag is depicted (for example, 'nc', 'um'). Therefore, version 2 is richer in flags, and only the link submission form remains from the 1st source. The value of the descriptor with base64 is also removed from it, it has lost its meaning.