Публикация спрайта флагов стран для вебстраниц дала идею для эксперимента над интерфейсным решением.
Предлагается страница из списка стран и (почти) пустого фрейма. По клику на выбранной строчке в фрейм подгружается материал из Википедии. Список стран при этом остаётся висеть в верхней части окна для перехода на другое описание страны.
1) Пиктограммы государственных флагов в спрайте. Со страницы разработчика взят спрайт (групповое уплотнённое изображение многих отдельных рисунков) из флагов стран, перекодирован в текстовый вид (for fun) для использования в списке стран. JSON-массив для показа названий стран на русском и английском тоже взяты оттуда (архив fg.zip, ссылка внизу страницы разработчика);
2) Изображение, вытащенное в своё время как ресурс из Скайпа, опубликовал raptor; при использовании таблица флагов будет транспонирована скриптом, чтобы первая буква была по вертикали, вторая — по горизонтали. Файл также ужат без потерь на 25%.
Существуют спрайты с флагами от других дизайнеров, но эти выбраны из-за относительной полноты сопутствующей информации.
Имея такие источники данных, подумалось: не хватает инструкций разработчикам по вытаскиванию данных из спрайта и вообще, кодового окружения для быстрого запуска. По первому источнику есть целый генератор спрайтов для флагов нужного количества стран, но что дальше с ними делать? С одной стороны, разработчики и так знают, что делать, а с другой — хочется увидеть и применить быстрый результат.
Ну ладно, научимся мы растаскивать спрайт на картинки и показывать отдельные флаги. Как это продемонстрировать? Простым выбором строки для генерации кода картинки с флагом — неинтересно. Лучше будет, если непринуждённо встроить генерацию кодов картинок в какую-либо полезную функцию. Например, видя название редко упоминаемой экзотической страны, задаёшься вопросом: что за страна, почему не знаю?
Так появилась идея собрать технологии по флагам в одну мешап-страницу (сейчас это модное слово; означает использование нескольких веб-сервисов в одном новом веб-проекте, но в данном случае — смешение 2 идей и их продуктов и 3-го сервиса — Википедии). Чтобы:
1) кликать на флаг какой-либо страны и смотреть название;
2) кликать по названию (на русском или английском) и смотреть описание в Википедии;
3) не терять списка флагов и стран из виду.
В итоге, получилась страница:
Описания государств мира с флагами стран
Проверено под WinXP — IE8, FF3.6, Chrome12, Opera11.5. (Safari 5.02 почему-то не показывает генерируемую таблицу флагов в фрейме, остальное показывает; можно, конечно, загружать эту таблицу из отдельной страницы, но это некрасиво.) IE9 — по сообщению alexxxst работает вот так, но отладить и исправить нет технической возможности (самого IE9). Отсутствие доктайпа сделано для простоты, чтобы не выводить height фрейма =100% скриптом (для FF и IE).
Данная техника может быть применена на других страницах как в неизменном виде (с флагами стран), так и для работы со списком других активных элементов на странице, географической карте, рисунке с активными областями.
Отношение к IE. В коде не использовались библиотеки типа jQuery, которые легко обеспечили бы кроссбраузерность. В любом случае, при реализации в другом проекте это легко (и рекомендуется) сделать, но базовую страницу утяжелило бы использование библиотеки или необходимость неиспользования современных технологий браузеров: метод DOM querySelector, свойствa CSS url(data:...;base64...), position: fixed. Для выполнимости кода в IE8 сделаны хаки разной степени жёсткости (привязанности к конкретному коду). Пришлось (только для IE) загружать картинку fg.png вместо использования её кода в base64.
Особенно интересный хак потребовался для того, чтобы заставить IE8 прокрутиться к якорю. Обнаружено, что он начинает прокручиваться только тогда, когда изменится размер блока (наведением мыши) или размер окна (наверное, из-за особенности размещения якорей в блоке фиксированной высоты). Программное дёргание высоты блока на 1 пикс. в течение 200 мс помогает подтолкнуть IE к этому действию.
Поскольку данные о странах извлечены из других источников, за полноту информации полностью «ответственны» они. Во первых, на скайповской карте флаги представлены неполно — только государства, признанные большинством государств. Поэтому можно видеть, что на месте пустых ячеек таблице в более полном списке государств из 2-го источника имеются государства и флаги, которые представлены в Википедии. Например, «mf» — «Остров Святого Мартина», «bl» — Сен-Бартелеми (имеющий свой домен).
Но и в этом источнике список государств неполон. Например, отсутствует Сомалиленд со своим флагом и признанный рядом государств.
Есть и такие государства, которых в Википедии на русском языке нет. Например, острова под кодом «um». На помощь приходит английская Википедия. А есть названные так, что их название отсутствует в Википедии, хотя под другим названием они есть, например, Ватикан («va»), Французские Южные и Антарктические территории («tf»). Итого, список стран тоже требует корректировки для данной страницы. Но тогда пропадёт совместимость мешапа — прямое портирование новых (или урезанных) версий спрайта с флагами стран. Выход здесь — в дополнительной скриптовой обработке ряда замеченных особенностей.
Вот то, что пришлось исправить (может быть, автор согласится исправить данные в скрипте fg.js). Показаны: сокращение и исправленный текст, подходящий для Википедии.
Другой способ исправить положение — прописать нужный алиас в Википедии.
Поскольку «ошибок» в названиях накопилось много и это вошло в систему (хотя неизвестно, кто ошибается — Википедия в переводе или автор списка государств), в скрипт добавлен корректирующий список имён государств для русской Википедии. Приведённые выше примеры в него включены и теперь работают правильно. (Но все не проверены — где-то после буквы «е» по горизонтали возможны ошибки, пишите в комментарии, чтобы исправить.)
P.S. Если кликнуть на «Refresh» (F5) — загрузится начальная страница с таблицей флагов, если пользователь не ходил по ссылкам в Википедии. Если ходил — подвешена кнопка «Назад» в уголке для того же самого.
UPD: 11.07, 01:00, дополнение — версия 2. Пропадает необходимость в Скайповском файле, все данные берутся из fg.png. Но для сравнения оставлена ссылка «ver.1». Если её кликнуть, подгрузятся флаги из скайпового ресурсного рисунка 1568279_432x297.png. Можно увидеть, что ряд флагов в Скайпе отсутствовали. Там, где государство — зависимая территория, изображается флаг протектората (например, 'nc', 'um'). Поэтому версия 2 — более богата на флаги, а от 1-го источника осталась только форма подачи ссылок. Значение дескриптора с base64 из неё также удалено, потеряло смысл.
Предлагается страница из списка стран и (почти) пустого фрейма. По клику на выбранной строчке в фрейм подгружается материал из Википедии. Список стран при этом остаётся висеть в верхней части окна для перехода на другое описание страны.
Источники для мешапа
1) Пиктограммы государственных флагов в спрайте. Со страницы разработчика взят спрайт (групповое уплотнённое изображение многих отдельных рисунков) из флагов стран, перекодирован в текстовый вид (for fun) для использования в списке стран. JSON-массив для показа названий стран на русском и английском тоже взяты оттуда (архив fg.zip, ссылка внизу страницы разработчика);
2) Изображение, вытащенное в своё время как ресурс из Скайпа, опубликовал raptor; при использовании таблица флагов будет транспонирована скриптом, чтобы первая буква была по вертикали, вторая — по горизонтали. Файл также ужат без потерь на 25%.
Существуют спрайты с флагами от других дизайнеров, но эти выбраны из-за относительной полноты сопутствующей информации.
Как и зачем
Имея такие источники данных, подумалось: не хватает инструкций разработчикам по вытаскиванию данных из спрайта и вообще, кодового окружения для быстрого запуска. По первому источнику есть целый генератор спрайтов для флагов нужного количества стран, но что дальше с ними делать? С одной стороны, разработчики и так знают, что делать, а с другой — хочется увидеть и применить быстрый результат.
Ну ладно, научимся мы растаскивать спрайт на картинки и показывать отдельные флаги. Как это продемонстрировать? Простым выбором строки для генерации кода картинки с флагом — неинтересно. Лучше будет, если непринуждённо встроить генерацию кодов картинок в какую-либо полезную функцию. Например, видя название редко упоминаемой экзотической страны, задаёшься вопросом: что за страна, почему не знаю?
Так появилась идея собрать технологии по флагам в одну мешап-страницу (сейчас это модное слово; означает использование нескольких веб-сервисов в одном новом веб-проекте, но в данном случае — смешение 2 идей и их продуктов и 3-го сервиса — Википедии). Чтобы:
1) кликать на флаг какой-либо страны и смотреть название;
2) кликать по названию (на русском или английском) и смотреть описание в Википедии;
3) не терять списка флагов и стран из виду.
В итоге, получилась страница:
Описания государств мира с флагами стран
Проверено под WinXP — IE8, FF3.6, Chrome12, Opera11.5. (Safari 5.02 почему-то не показывает генерируемую таблицу флагов в фрейме, остальное показывает; можно, конечно, загружать эту таблицу из отдельной страницы, но это некрасиво.) IE9 — по сообщению alexxxst работает вот так, но отладить и исправить нет технической возможности (самого IE9). Отсутствие доктайпа сделано для простоты, чтобы не выводить height фрейма =100% скриптом (для FF и IE).
Данная техника может быть применена на других страницах как в неизменном виде (с флагами стран), так и для работы со списком других активных элементов на странице, географической карте, рисунке с активными областями.
Отношение к IE. В коде не использовались библиотеки типа jQuery, которые легко обеспечили бы кроссбраузерность. В любом случае, при реализации в другом проекте это легко (и рекомендуется) сделать, но базовую страницу утяжелило бы использование библиотеки или необходимость неиспользования современных технологий браузеров: метод DOM querySelector, свойствa CSS url(data:...;base64...), position: fixed. Для выполнимости кода в IE8 сделаны хаки разной степени жёсткости (привязанности к конкретному коду). Пришлось (только для IE) загружать картинку fg.png вместо использования её кода в base64.
Особенно интересный хак потребовался для того, чтобы заставить IE8 прокрутиться к якорю. Обнаружено, что он начинает прокручиваться только тогда, когда изменится размер блока (наведением мыши) или размер окна (наверное, из-за особенности размещения якорей в блоке фиксированной высоты). Программное дёргание высоты блока на 1 пикс. в течение 200 мс помогает подтолкнуть IE к этому действию.
(Не-) Полнота информации
Поскольку данные о странах извлечены из других источников, за полноту информации полностью «ответственны» они. Во первых, на скайповской карте флаги представлены неполно — только государства, признанные большинством государств. Поэтому можно видеть, что на месте пустых ячеек таблице в более полном списке государств из 2-го источника имеются государства и флаги, которые представлены в Википедии. Например, «mf» — «Остров Святого Мартина», «bl» — Сен-Бартелеми (имеющий свой домен).
Но и в этом источнике список государств неполон. Например, отсутствует Сомалиленд со своим флагом и признанный рядом государств.
Есть и такие государства, которых в Википедии на русском языке нет. Например, острова под кодом «um». На помощь приходит английская Википедия. А есть названные так, что их название отсутствует в Википедии, хотя под другим названием они есть, например, Ватикан («va»), Французские Южные и Антарктические территории («tf»). Итого, список стран тоже требует корректировки для данной страницы. Но тогда пропадёт совместимость мешапа — прямое портирование новых (или урезанных) версий спрайта с флагами стран. Выход здесь — в дополнительной скриптовой обработке ряда замеченных особенностей.
Вот то, что пришлось исправить (может быть, автор согласится исправить данные в скрипте fg.js). Показаны: сокращение и исправленный текст, подходящий для Википедии.
corr ={
ax: "Аландские острова"
, cd: "Демократическая Республика Конго"
, cm: "Республика Кипр"
, ht: "Республика Гаити"
, hm: "Остров Херд и Острова Макдоналд"
, ky: "Каймановы острова"
, sj: "Шпицберген и Ян-Майен"
, um: "Внешние малые острова США"
, va: "Ватикан"
, tf: "Французские Южные и Антарктические территории"
};Другой способ исправить положение — прописать нужный алиас в Википедии.
Поскольку «ошибок» в названиях накопилось много и это вошло в систему (хотя неизвестно, кто ошибается — Википедия в переводе или автор списка государств), в скрипт добавлен корректирующий список имён государств для русской Википедии. Приведённые выше примеры в него включены и теперь работают правильно. (Но все не проверены — где-то после буквы «е» по горизонтали возможны ошибки, пишите в комментарии, чтобы исправить.)
P.S. Если кликнуть на «Refresh» (F5) — загрузится начальная страница с таблицей флагов, если пользователь не ходил по ссылкам в Википедии. Если ходил — подвешена кнопка «Назад» в уголке для того же самого.
UPD: 11.07, 01:00, дополнение — версия 2. Пропадает необходимость в Скайповском файле, все данные берутся из fg.png. Но для сравнения оставлена ссылка «ver.1». Если её кликнуть, подгрузятся флаги из скайпового ресурсного рисунка 1568279_432x297.png. Можно увидеть, что ряд флагов в Скайпе отсутствовали. Там, где государство — зависимая территория, изображается флаг протектората (например, 'nc', 'um'). Поэтому версия 2 — более богата на флаги, а от 1-го источника осталась только форма подачи ссылок. Значение дескриптора с base64 из неё также удалено, потеряло смысл.
