Площадка,
10 мин. на прочтение

COVID-19: как быстро встроить статистику о коронавирусе на сайт

Sofya Marshalova
Опубликовала: Sofya Marshalova
8 мая, 2020 года
orange with crown on top

Коронавирус, или COVID-19, является, пожалуй, одной из самых актуальных тем в мире на данный момент. Все обсуждают количество заболевших, ношение масок, введение пропускного режима и «самоизоляции». Конечно, держать руку на пульсе событий необходимо, как и соблюдать правила безопасности при пандемии.

Сегодня не будем обсуждать симптомы и методы мытья рук за 20 секунд — надеемся, вы уже изучили это информацию — а поговорим про то, как встроить волнующую и актуальную статистику о COVID-19 к себе на сайт. В этой статье мы опишем простой метод по добавлению такого счетчика, а также плюсы и минусы этого метода.

Добавление счетчика коронавируса на сайт

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

Статистику о COVID-19 можно добавить на сайт в считанные минуты с помощью IFrame и разработчиков, которые готовы поделиться ранее созданным счетчиком.

Что такое IFrame?

IFrame или плавающий фрейм — окно, которое добавляется небольшим кусочком кода с закрывающимся тегом <iframe> и отображается вместе с другим содержимым страницы. Находиться такое окно может в любом месте страницы, по вашему желанию.

Тег <iframe> позволяет добавить на веб-страницу плавающий фрейм, который находится внутри документа. Этот документ используется для загрузки других независимых HTML-документов в область с заданными размерами. В результате мы имеем то, что на вашем сайте демонстрируется контент со стороннего URL-адреса. Именно так мы и будем загружать счетчик COVID-19.

Плюсы и минусы IFrame

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

Есть несколько достоинств использования IFrame. Во-первых, фреймовые технологии просты в использовании и имеют преимущество в скорости внедрения: разработка с нуля не требуется, так как можно взять готовый сторонний контент (например, счетчики, видео, презентации, карты) и «вживить» его.

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

В-третьих, у тега <iframe> есть солидный набор атрибутов, которые помогут подогнать фрейм под нужные размеры, добавить фон, настроить отступы и многое другое. Универсальные атрибуты и события также доступны с использованием этого тега.

Посмотреть полный список атрибутов

Теперь давайте обратимся к недостаткам. Первый минус состоит в том, что тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Фреймы не запустятся в браузерах для незрячих и слабовидящих (такие браузеры работают на основе аудио), а также на очень «древних» версиях браузеров. Но и тут все не так критично: можно указать альтернативный текст, который увидят (или услышат) пользователи. Добавьте его между элементами <iframe> и </iframe>.

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

Встраивание счетчика коронавируса с <iframe>

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

Именно поэтому мы предлагаем добавлять онлайн-мониторинг от Covidstat. К тому же, у Covidstat есть несколько вариантов статистики, на выбор.

  • Мировая карта распространения вируса

Встройте данный код к себе на сайт для добавления этого фрейма:

<iframe src="https://www.covidstat.ru/map/" frameBorder="0" height="400" width="900" style="max-width: 100%;"></iframe>

  • Карта заражений по России

Встройте данный код к себе на сайт для добавления этого фрейма:

<iframe src="https://www.covidstat.ru/map/" frameBorder="0" height="400" width="900" style="max-width: 100%;"></iframe>

  • Виджет общей статистики

Встройте данный код к себе на сайт для добавления этого виджета:

<div id="covidstat-stat"></div> <script src="https://www.covidstat.ru/stat/?type=stat"></script>

  • Виджет топ-10 стран по заражениям

Встройте данный код к себе на сайт для добавления этого виджета:

<div id="covidstat-top"></div> <script src="https://www.covidstat.ru/stat/?type=top"></script>

  • Виджет топ-10 регионов России по заражениям

Встройте данный код к себе на сайт для добавления этого виджета:

<div id="covidstat-russian"></div> <script src="https://www.covidstat.ru/stat/?type=russian"></script>

Oblivki.biz позволяют издателям расширять аудиторию, привлекать постоянных клиентов и получать доход. Зарегистрируйтесь или войдите в свою учетную запись.

Категории: Площадка


Рекомендуемые статьи


orange with crown on top

Как зарабатывать на блоге о красоте

orange with crown on top

COVID-19: как быстро встроить статистику о коронавирусе на сайт

orange with crown on top

9 инструментов для веб-мастера от Google

orange with crown on top

Создать свой сайт с нуля бесплатно: пошаговая инструкция

orange with crown on top

Топ-5 лучших конструкторов сайтов

orange with crown on top

Как и где продать сайт: раскрываем тайны выгодной сделки