Загрязнение HTML шаблоны

Удобные для поиска HTML-шаблоны для отображения данных о загрязнении воздуха

Публикация данных о загрязнении воздуха подразумевает многократное повторение одних и тех же элементов: показаний, превышенного порогового значения и указаний, что с этим делать. HTML-шаблон для отображения данных о загрязнении воздуха предоставляет вам уже готовую разметку, поэтому первый час работы уходит на замену демонстрационных значений реальными измерениями.

Готовая разметка для карточек загрязняющих веществ

Информация о качестве воздуха необычна тем, насколько часто она повторяется. Каждому показателю AQI требуется цветовая индикация состояния, краткое описание и временная метка, и для следующего загрязняющего вещества требуется аналогичная обработка. Создание такой структуры из пустого файла занимает много времени, и она смещается к четвертой или пятой копии.

Полезно открыть демонстрационный файл, чтобы найти элементы, которые постоянно требуются для отображения данных о загрязнении воздуха:

• сводка AQI со значком состояния для текущих условий;

• карточки загрязняющих веществ для показаний PM2.5, PM10 и озона;

• сравнительная таблица для источников выбросов, таких как транспорт или промышленность;

— Предупреждающий баннер, который может располагаться поверх всего остального во время эпизода смога.

Подобные блоки часто встречаются в демонстрационных версиях данных об окружающей среде, хотя ни один шаблон не гарантирует наличие всех четырех. Важно, можно ли редактировать имеющиеся блоки в исходном коде, чтобы можно было скопировать карточку загрязняющего вещества, изменить ее метку и быть уверенным, что копия будет работать так же, как и оригинал.

Многоразовые блоки на разных станциях мониторинга

Данные об окружающей среде также повторяются географически. Поля, описывающие станцию в центре города, совпадают с полями, описывающими станцию в сорока километрах от центра, а квартальный отчет, опубликованный в марте, возвращается в июне с новыми данными. Дублирование — это обычный режим работы, поэтому редактируемый исходный код важнее, чем отполированная демонстрационная версия.

При клонировании поддерживайте стабильный рейтинг информации. Загрязняющее вещество находится выше своего измерения, измерение выше порогового значения, а статус выше рекомендуемого действия. Тот, кто бегло просматривает только первые два уровня, все равно узнает, безопасно ли сегодня утром выходить на пробежку.

Адаптивное поведение на маленьких экранах

Узкие дисплеи плохо справляются с большим количеством информации об окружающей среде. Широкое сравнение загрязняющих веществ в нескольких районах не может просто уменьшиться в размере; его необходимо разбить на группы, расположенные друг над другом, чтобы каждое число оставалось привязанным к своей метке. Приоритеты также меняются, поскольку активное оповещение должно отображаться в верхней части экрана телефона, в то время как фоновое объяснение ожидает.

Nicepage документирует свои элементы управления адаптивной версткой, которые объясняют, как контент перестраивается и располагается друг над другом на разных устройствах с разной шириной экрана.

HTML-шаблон, посвященный загрязнению окружающей среды, оправдан, когда блоки, относящиеся к окружающей среде, уже существуют в коде и могут быть переставлены без перестройки базовой структуры. Демонстрации, созданные на основе широких фотографий и одного заголовка, оставляют вам все это писать самостоятельно, что сводит на нет смысл использования шаблона.