Как сделать информер погоды
Обновлено: 06.07.2024
Люди часто интересуются погодой. Многим интересно узнать погоду в их городе, в других городах(местах для отпуска) и так далее. Кто-то узнает эту информацию по телевидению, а кто-то на специальных интернет-ресурсах.
Виджеты погоды распространены на многих сайтах, взять к примеру сайты "синоптики", которые предоставляют информацию о погодных условиях в различных городах. Также это полезно для многих туристических агентств, чтобы предоставить клиенту информацию о погоде в различных местах отдыха.
Вы можете разместить её на вашем сайте. Можете заказать виджет у любого веб-разработчика, а можете сделать его вручную. В этой статье мы подробно расскажем о том, как создать виджет погоды на JavaScript. Такая разработка может добавить уникальности вашему сайту.
Создание каркаса. HTML
Для начала работы нам необходимо подключить все необходимые документы. Сначала подключим нашу таблицу стилей. Создадим непарный тег link >, в атрибуте " rel " запишем значение " stylesheet ". В атрибуте " href " укажите ссылку, если этого не сделать, то виджет будет отображаться некорректно.
Для того, чтобы подключить скрипты создадим парный тег style >. В его атрибуте " src " записываем ссылку на файл JavaScript, в котором мы и будем работать.
Ещё один момент — для создания нашего виджета используется несколько скриптов. Один из них мы уже подключили в теге head >, второй же, будет находиться в нашем HTML документе. В теге body > создаем тег script >, в его атрибуте " type " записываем значение " text/javascript ".
Ниже мы запишем основные функции для нашего виджета. В основном это функции для добавления стилей для элементов. Да, мы используем JavaScript, а не CSS документ.
Закрываем тег script > и приступаем к добавлению контента. Нужно создать общий контейнер, который будет содержать в себе наш виджет. В нем мы размещаем остальные элементы.
Для размещения элементов мы используем тег SVG. Этот инструмент позволяет создавать уникальные элементы дизайна, которые нельзя создать при помощи HTML и CSS. Именно поэтому он является основой нашего проекта.
Стилизация виджета. CSS
Основа создана, теперь необходимо её оформить. Открываем CSS документ, в нем будем указывать основные стили.
CSS код мы используем для правильного позиционирования элемента на странице. Изменяем шрифты и добавляем анимацию, с помощью свойства " transition ". Виджет содержит также списки, необходимо задать им позиционирование и удалить стандартную декорацию.
На скриншоте вы видите небольшой отрезок CSS кода — форматирование контейнера. Остальную часть кода можете найти в исходных материалах.
JavaScript для виджета погоды
В этом примере JQuery не используется, а только стандартные JavaScript функции. Они будут работать совместно с SVG.
На скриншоте малая часть всего скрипта. Если хотите изучить его полностью — смотрите исходники. Кода довольно много, поэтому не советуем изменять значения без необходимых знаний.
Заключение
В итоге у нас получился отличный виджет погоды:
За него нужно поблагодарить Стива Гарднера из Калифорнии. Разработка виджета — его заслуга.
Если хотите полностью разобраться в работе виджета — изучайте исходники, которые можно скачать на нашем сайте. Желаем вам удачи в разработках!
Информер по умолчанию использует графику для отображения погоды.
- Состояние будет показано иконкой
- Фон автоматически подстраивается под состояние погоды(Дождь, Снег, Солнце, и т.д.)
Если данный формат не вписывается в ваш дизайн, просто отключите использование графики и настройте свои цвета и не используйте графику..
Внешний вид Информера:
Получить код
Большой Виджет или компактный Информер?
Часто дизайн сайт не позволяет встроить на сайт большой погодный виджет, как тот который приведен на этой странице. Для Этой цели мы подготовили компактную версию html информера с двумя наборами иконок или без использования графики на ваш выбор. Вот несколько примеров того как может выглядеть ваш погодный виджет на вашем сайте.
Примеры компактного информера
Если Вам больше нравится компактный информер, пожалуйста, настройте его внешний вид и получите html код на этой странице
Как установить информер?
Примеры настройки текстовых HTML Информеров
Попробуйте поиграть с настройками цвета и возможностью наложения градиентов. При этом заметьте, что при некоторых настройках лучше применить тень или свечение в зависимости от фона информера.
Примеры отображения графических Информеров
Для графического информера фон подбирается автоматически в зависимости от текущей погоды в вашем городе. Заметьте, пожалуйста, что для подобного рода информера лучше выбрать текст с тенью, так его будет он будет более читаемым.
Для обоих видов информеров минимальная ширина 400 пикселей. На данный момент в нашей базе более 126 тысяч населенных пунктов в России, Казахстана, Украины и Беларусии. А также все крупные города мира. По каждому из них вы можете установить информер с вашим персональным оформленим.
Как установить информер?
Для установки информера достаточно, скопировать и вставить код на ваш сайт. В случае если вы используете WordPress вы сможете установить информер в область виджетов или в область контента.
Виджет погоды на панели задач Windows 11
Итак, друзья, погода в Windows 11. Самый простой способ посмотреть её – запустить панель виджетов кнопкой на панели задач или горячими клавишами Win+W.
Но можно сделать и так, чтобы погода в реальном времени в виде небольшого виджета отображалась у нас прямо на панели задач.
Реализовать такую возможность может бесплатное приложение Weather Bar . Устанавливаем его. Достаём виджет из свёрнутой области трея панели задач. Кликаем его, и здесь будем видеть детализацию погоды в текущий момент и прогноз на ближайшие дни для своей местности. Но сначала давайте настроим виджет, кликаем настройки.
Можем переключиться на русский язык.
Ещё приложение позволяет отслеживать погоду в нескольких местностях.
И на этом возможности Weather Bar заканчиваются, но вряд ли нужно что-то более для практической цели. Ну вот, собственно, таким образом, друзья, можно реализовать виджет погоды на панели задач Windows 11.
Дата: 2 ноября 2010 43589 37
Итак, первым делом идем на сайт и узнаем url-адрес XML-документа, для нужного Вам города. Это можно сделать здесь.
Итак, когда мы знаем url-адрес XML-документа, который содержит подробную сводку о погоде, нам остается спарсить её и записать нужную нам информацию в базу данных! Ну что приступим?
Теперь посмотрим на описание формата:
информация о пункте прогнозирования:
уникальный пятизначный код города
закодированное название города
широта в целых градусах
долгота в целых градусах
FORECAST
информация о сроке прогнозирования:
дата, на которую составлен прогноз в данном блоке
местное время, на которое составлен прогноз
время суток, для которого составлен прогноз: 0 - ночь 1 - утро, 2 - день, 3 - вечер
день недели, 1 - воскресенье, 2 - понедельник, и т.д.
заблаговременность прогноза в часах
PHENOMENA
облачность по градациям: 0 - ясно, 1- малооблачно, 2 - облачно, 3 - пасмурно
тип осадков: 4 - дождь, 5 - ливень, 6,7 – снег, 8 - гроза, 9 - нет данных, 10 - без осадков
интенсивность осадков, если они есть. 0 - возможен дождь/снег, 1 - дождь/снег
вероятность грозы, если прогнозируется: 0 - возможна гроза, 1 - гроза
PRESSURE
атмосферное давление, в мм.рт.ст.
TEMPERATURE
температура воздуха, в градусах Цельсия
WIND
минимальное и максимальное значения средней скорости ветра, без порывов
направление ветра в румбах, 0 - северный, 1 - северо-восточный, и т.д.
RELWET
относительная влажность воздуха, в %
HEAT
комфорт - температура воздуха по ощущению одетого по сезону человека, выходящего на улицу
Итак, прогноз погоды выдается сразу для 4 времен суток. Это:
0 – ночь, 1 - утро, 2 - день, 3 – вечер
Но так как мы хотим показывать у себя на сайте актуальную информацию о погоде, нам необходимо будет в начале определить время суток, а лишь потом, заносить информацию в базу данных!
Итак, с целями и задачами определились. Теперь переходим к непосредственному парсингу XML-документа. Для этих целей мы воспользуемся специальным классом SimpleXML, который появился в РНР 5.0.
Если вы работаете с РНР версии 5.0 или выше, то поддержка SimpleXML у вас включена по умолчанию, если это не так, используйте опцию конфигурации --enable-simplexml (или --disable-simplexml для отключения).
Прежде чем продолжить создадим таблицу в базе данных, в которой будет храниться информация о погоде. Для этого необходимо выполнить следующий SQL-запрос:
Данная таблица содержит следующие поля:
Я специально создал в этой таблице 2 дополнительных поля (уникальный идентификатор и имя города), т.к. в дальнейшем Вы можете добавить несколько городов, и парсить информация для них! Но в данном примере мы будем рассматривать парсинг для одного конкретного города! Итак, идем дальше.
Дальше вставим в эту таблицу данные. Это делается так:
Так как вся информация хранится в базе данных, то первым делом создадим файл, который будет отвечать за подключение к базе данных MySQL и назовем его db.php
Далее создадим файл parser.php, который будет отвечать за парсинг и первым делом подключим файл db.php, отвечающий за подключение к базе данных!
Далее необходимо загрузить XML-данные. Это может быть как файл, так и просто строковая переменная, содержащая XML-код. В нашем случае XML-документ представляет из себя файл, поэтому загружать мы его будем следующим образом:
Далее определим текущей день и время. Это можно сделать так:
Далее определяем время суток:
Дальше пробегаем по всем прогнозам для выбранного города и когда находим время суток и дату, соответствующие текущим, записываем температуру в базу:
Так, ну вот собственно парсер и готов! Теперь его надо поставить на cron (планировщик задач) и запускать этот скрипт 4 раза в сутки: 2, 8, 14, 20
Теперь дело за малым! Осталось вывести всю эту информацию на странице!
Я особо не буду "напрягаться" с красотой, а лишь покажу пример, как можно использовать, ту информацию, которую мы записали в базу данных. Для этого создадим новый файл и назовем его index.php. Подключим файл db.php, для подключения к базе данных!
Далее сделаем выборку из базы данных для нужного нам города.
Определим среднюю температуру воздуха
Дальше определим тип осадков и в зависимости от типа осадков присвоим определенный класс для отображение (солнечно, пасмурно, дождь и т.д.)
Когда стили определены, выведем информацию на странице. Для этого будем использовать следующую html- разметку:
Теперь осталось прописать стиль:
Здесь мы прописали фоновые изображения для разных типов осадков! И вот что у меня получилось:
Не обращайте внимание на температуру воздуха, так как это я делал в качестве примера.
Читайте также: