Как сделать информер погоды
Как добавить виджет погоды на сайт
Виджет погоды будет актуален, прежде всего, на сайтах турагенств или просто на ресурсах с интересной информацией о других странах, их природе и климате.
Давайте установим информер погоды на Ваш сайт в виде виджета.
Как сделать погодный информер для сайта
Для начала нужно создать сам информер: сделать это можно, например, с помощью конструктора от GisMeteo. Перейдя по этой ссылке, Вы сможете выбрать один из стандартных виджетов (вкладка «Простой информер») или создать собственный (вкладка «Конструктор»). Предпочтительнее второй вариант: так Вы сможете точнее настроить все необходимые параметры виджета.
Итак, мы перешли в режим конструирования уникального погодного информера. Количество опций впечатляет: можно изменять язык виджета, иконки, шрифты, оформление и т.д. Все это можно настроить, положась на собственный художественный вкус.
Не забывайте о размерах: ширина виджета не должна превышать ширину узкой колонки сайта (220 точек).
Давайте для примера сделаем информер погоды для города Воркута.
В разделе «Параметры» галочками отметим те данные, которые будет показывать виджет: текущая погода, прогноз, скорость ветра, давление, влажность и т.д. Черновик виджета, расположенный в правой части экрана, сразу отобразит сделанные Вами изменения.
Можно также изменить единицы измерения температуры и скорости ветра, выбрать другой стиль иконок, поработать с внешним видом и шрифтами виджета.
Когда работа над виджетом завершена, перейдите к разделу «Персонализация». В специальные поля введите адрес Вашего сайта и электронной почты, на которую будет отправлен код информера. Установите флажок «Я не робот» и нажмите кнопку «Получить код информера».
Поздравляем! Ваш уникальный информер погоды готов. Скопируйте код со страницы или из письма, высланного на указанный адрес электронной почты.
Как вставить информер погоды в колонку сайта
Теперь необходимо разместить созданный виджет на Вашем сайте. Для этого войдите в админку, откройте раздел «Виджеты» в меню управления (слева) и выберите колонку, в которую хотите добавить информер.
Если Ваш сайт имеет только узкую колонку слева, используйте колонку № 1 (виджеты колонки № 2 на сайте не отобразятся). Для сайтов с узкой колонкой справа — колонку № 2.
Затем нажмите кнопку «Создать текстовый блок».
Откроется страница редактирования виджета. Определите, как будет отображаться информер на сайте, при желании задайте заголовок и настройте дизайн виджета.
Затем нажмите кнопку «Источник» в текстовом редакторе: в этом режиме Вы сможете работать с кодом страницы. Вставьте код погодного информера, полученного на ГисМетео, в текстовое поле и сохраните изменения.
Вот и все: виджет с информером погоды опубликован в выбранной колонке сайта.
Как установить информер погоды на сайт
У природы нет плохой погоды, а любые капризы – всего лишь временные мелкие неприятности, которые человек может спокойно пережить ( если речь, конечно, не об ураганах и наводнениях ). Но тот, кто предупрежден – тот вооружен, и о грядущем дожде или похолодании полезно быть проинформированным заранее.
Именно поэтому мир уже более полутора веков прислушивается к специалистам в области прогнозов метеоусловий. Впервые подобную информацию напечатали в газете в 1861 году ( сам же метеоролог после нескольких несбывшихся предсказаний наложил на себя руки ).
В наше время получать информацию гораздо проще. В несколько щелчков мыши можно добраться до прогноза погоды ( и её состояния на данный момент, если лень смотреть в окно ). Но человек постоянно стремится упростить себе задачу и не выполнять лишнюю работу.
Иногда данные о метеоусловиях хочется лицезреть не на специализированных веб-ресурсах, а на собственном рабочем столе. Также у владельцев информационных ресурсов часто возникает желание установить информер погоды на сайт, чтобы снабжать соответствующим прогнозом своих посетителей:
Что это такое
Информер погоды, естественно, не самостоятельно оценивает ситуацию на улице, а берет информацию со стороннего сайта ( который уже пользуется услугами профессиональных метеорологов ). Некоторые информеры позволяют пользователю настраивать отображение погодных характеристик ( к примеру, показывать только температуру и осадки ).
Устанавливаем на рабочий стол
Рассмотрим два простых способа оснастить свой рабочий стол погодным информером.
Второй способ – это загрузить понравившийся информер из интернета ( если стандартный не по душе ). Введя в строке поиска запрос и перейдя по одному из результатов, получаем предложение загрузить погодный информер от компании Яндекс:
Популярные решения для сайта
Перечислим некоторые погодные информеры, которые часто устанавливаются на страницах информационных ресурсов.
Однако очень удобен для быстрой установки стандартного информера на свой сайт ( сразу предлагается html-код ):
Устанавливаем на сайт
Установить погодный информер на сайт без каких-либо проблем сможет даже новичок. Процесс идентичен установке счетчика посещений. Всё, что нужно – вставить полученный код информера в нужном месте на вашем сайте.
Виджет погоды на сайт — как сделать?
Люди часто интересуются погодой. Многим интересно узнать погоду в их городе, в других городах(местах для отпуска) и так далее. Кто-то узнает эту информацию по телевидению, а кто-то на специальных интернет-ресурсах.
Виджеты погоды распространены на многих сайтах, взять к примеру сайты «синоптики», которые предоставляют информацию о погодных условиях в различных городах. Также это полезно для многих туристических агентств, чтобы предоставить клиенту информацию о погоде в различных местах отдыха.
Вы можете разместить её на вашем сайте. Можете заказать виджет у любого веб-разработчика, а можете сделать его вручную. В этой статье мы подробно расскажем о том, как создать виджет погоды на 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.
На скриншоте малая часть всего скрипта. Если хотите изучить его полностью — смотрите исходники. Кода довольно много, поэтому не советуем изменять значения без необходимых знаний.
Заключение
В итоге у нас получился отличный виджет погоды:
За него нужно поблагодарить Стива Гарднера из Калифорнии. Разработка виджета — его заслуга.
Если хотите полностью разобраться в работе виджета — изучайте исходники, которые можно скачать на нашем сайте. Желаем вам удачи в разработках!
Информер погоды на сайте — api OpenWeatherMap
В этой статье мы создадим небольшое приложение на PHP, которое будет показывать прогноз погоды, а затем повторим тоже самое на JavaScript. Для этих целей нам понадобиться данные о погоде и получать мы их будем с помощью API. Существует множество вариантов, за которые нужно заплатить. Для наших целей мы будем использовать сервис OpenWeatherMap, который позволяет отправлять до 60 запросов в минуту бесплатно. Если ваш трафик будет больше, то вы сможете либо воспользоваться продвинутым платным API, либо настроить кэширование для информера погоды на сайте.
Интегрировать этот API на свой сайт и создать полноценный информер погоды довольно легко. Мы сделаем это в 3 этапа, а затем попробуем сделать тоже самое на JS:
Быстрая навигация:
1 Получение ключа OpenWeatherMap API
Чтобы получить API ключ, нам нужно зарегистрироваться в сервисе OpenWeatherMap. Если у вас возникли проблемы и страница не загружается, не работает регистрация — попробуйте зарегистрироваться через VPN.
Для создания информера погоды на сайте введите название компании и выберите цель вашего приложения.
После регистрации вы окажетесь в вашем профиле. Перейдите на вкладку API keys и скопируйте ключ, мы будем использовать его для отправки запросов к API погоды.
1 Определение id города
Скачайте архив с json файлом, откройте его в текстовом редакторе/вашей любимой IDE. Через поиск (ctrl + F) найдите нужный вам город. К примеру Moscow. Обратите внимание, что городов с одинаковым названием может быть несколько, по этому ориентируйтесь по полю country. Сохраните id города под рукой, он нам еще понадобится.
PHP код отправки запроса в API погоды OpenWeatherMap
С помощью кода ниже мы отправим запрос для получения прогноза погоды. Для этого мы используем PHP cURL и в ответ получим данные в формате JSON. Для начала подготовим URL:
Далее выполняем cURL запрос:
Мы получили нужные данные и текущее время, давайте создадим разметку и подставим в нее нужные значения.
Подготовка HTML разметки для отображения прогноза погоды на сайте
Выведим в HTML код описание погоды, диапазон температуры, влажность и скорость ветра.
4 API погоды через JavaScript
Попробуйте создать новую разметку в виде виджета погоды. Добавьте в неё элементы с классами weather__city, weather__forecast, weather__desc и weather__icon.
Посмотрите как работает такой код. В этом примере вместо иконки мы используем разные background-image.
Узнать погоду в Москве
OpenWeatherMap является отличным способом попробовать API погоды на своем сайте, но все же работает он не идеально. Если вы приняли решение, что вам нужен подобный функционал, стоит обратить внимание на платные решения.
Информер погоды: делаем сами
Прогноз погоды для своих сайтов новостные ресурсы реализовывают по-разному, чаще в виде готовых информеров с сторонних сервисов, которые легко интегрируются на сайт. Основное преимущество таких информеров погоды в том, что вебмастеру не надо беспокоиться об актуальности данных о погоде или работе скрипта информера: поставил на сайт и забыл! Но и минусы такого «взаимовыгодного сотрудничества» очевидны. Среди минусов погодных информеров с других сайтов:
Это основные, но не все «тормоза», которые обеспечивают веб-сайтам информеры погоды с внешних сервисов. Но так ли все безнадежно в эпоху, когда каждый третий школьник программирует на РHP?
Информер погоды своими руками
Итак, зададимся целью создать свой информер погоды для своего новостного сайта. Среди его особенностей:
Как сделать информер погоды для своего города, не обладая какими-либо специфическими навыками в программировании? Как сделать этот информер полностью бесплатным для своего сайта и стабильно работающим? Давайте разбираться в этих вопросах.
Естественно, мы не будем программировать сложные программы и алгоритмы для получения погоды со спутников! Найдем надежного и проверенного поставщика информации о погоде, будем получать от него такую информацию по некоторым критериям, кешировать на своем сайте с некой периодичностью и отдавать в браузер посетителям своего сайта в виде компактного информера.
Нам поможет Яндекс
Экспортный xml от Яндекса мы и будем эксплуатировать, примеров чтения xml можно найти в сети великое множество, за основу мы возьмем попытку от diseltoofast. В описанном там примере, скрипт выводит прогноз погоды для выбранного города на 10 дней по временам суток, направление ветра стрелками, усредненные значения температуры т.д. Мы усовершенствуем данный скрип для построения информера погоды, а именно:
Весь код поместится в одном файле: скрипт загружает экспортный xml-файл с адреса export.yandex.ru/weather-ng/forecasts/id_города.xml и формируют выдачу в браузер пользователя:
Тут нужны некоторые пояснения к настройкам скрипта, которые необходимо отредактировать непосредственно перед установкой информера погоды на сайт. По сути, нужно внесение лишь двух параметров: ввести id города, для которого будем получать погоду и время кеширования скрипта.
id города для информера погоды
Время кеширования скрипта
Картинки для информера погоды
Информер использует картинки, иллюстрирующие погодные сводки. Мы аккуратно их выкачали с Яндекса, поместили в папку и подгружаем со своего сервера.
В архиве картинки лежат в папке pogoda и в скрипте (если сам скрипт будет рядом с папкой) подключаются кодом:
Собственно и все! Информер погоды для сайта готов: скачивайте, внедряйте, пользуйтесь! Информируйте своих посетителей сайта о погодных условиях в Вашем городе, безусловно, те будут вам благодарны!
Ах, да! Пример забыл показать! Вот он (погода на 10 дней для Москвы):
Красивый информер погоды для сайта на php
FIX информера погоды (март 2016 года)
Описанный в статье информер погоды от Яндекса оказался востребованным, я знаю не менее дюжины сайтов его установивших, как собственно и новые, непредвиденные ситуации, которые возникли (и могут возникнуть в будущем) у пользователей скрипта на практике. К слову, многие «сдаются» в попытке установить и прикрутить такой скрипт погоды самостоятельно, для таких всегда есть готовый погодный информер для сайта.
Опытным путем удалось установить, что Яндекс не блокирует запросы к нему нашего скрипта, сервера Яндекса очень часто перегружены и xml отдаются порционно. Нижеследующий fix cкрипта поможет устранить проблемы с доступностью xml файла от Яндекса.
Я не буду полностью приводить скрипт, а лишь основную, верхнюю его часть, где скрипт кеширует xml файл от Яндекса:
Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой.
Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро.