Типология сетевых СМИ. Лабораторное занятие №2. Javascript-виджет
Для выполнения задания вам понадобится собрать любой XML-поток в виде графического виджета и разместить его у себя в блоге. Обычно в виджетах интегрируют любые обновляемые данные - от погоды до курсов валют. Для упрощения задачи рекомендую всем пользоваться одним и тем же потоком - валютной сводкой Центробанка. Для этого мы будем использовать javascript с сайта: https://www.cbr-xml-daily.ru/daily_jsonp.js
Поскольку blogger не дружит с iframe, то размещать виджет лучше не через опцию "создать сообщение", а через опцию в сайдбаре слева: "страницы-создать страницу".
Чтобы упаковать скрипт в графический интерфейс, нужно создать стили страницы, для этого открываем свой блог и переходим в режим HTML, после чего указываем общие параметры, опираясь на стиль вашего блога:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Далее прописываем сам стиль виджета:
(Обратите внимание, что контейнер виджета я называю условно с префиксом ktech-widget для удобства распознания компонента - вы можете назвать его как хотите). В настройках стиля есть несколько переменных, которые вы должны заменить: это шрифт, цвет текста и фон. Шрифт задается в параметре font-family, цвет текста в соответствующем блоке в разделе color, для фона вам нужно будет подключить внешнюю картинку. Можно загрузить ее в блог через форму для файлов в разделе google sites: https://sites.google.com (вкладка "управление сайтом", затем - "приложения", после чего взять URL из параметра "скачать" и отсечь на символе файла - в моем случае это .jpg). Можно загрузить картинку через яндекс.фотки. Обратите внимание, что размеры картинки должны совпадать с размерами виджета (указываются в параметре высоты и ширины) и смотреться органично. После этого вы указываете адрес картинки в параметре фона. В целом блок стиля будет выглядеть так:
<style type="text/css">
html, body, body * {
margin: 0;
padding: 0;
}
.ktech-widget, .wbd-widget * {
box-sizing: border-box;
width: 300px;
height: 196px;
background-image: url(https://sites.google.com/site/konoplevmedia/curses300x196.jpg);
font-family: Garamond;
}
.ktech-widget {
border: solid 3px #333;
padding: 20px;
color: black;
}
.ktech-widget__info {
color: black;
font-size: 20px;
text-align: left;
background: transparent;
}
.ktech-widget__form-label {
color:black;
display: block;
line-height: 30px;
}
</style>
</head>
Теперь собственно тело виджета. Вам нужно создать интерактивный блок, куда и поместятся курсы валют. Для этого привязываем его код к стилям:
<div class="ktech-widget">
<div class="ktech-widget__info">
Валютный курс (данные ЦБ)<span id="ktech-widget-curses"></span>
</div>
<form id="ktech-widget-form" class="ktech-widget__form">
<label class="ktech-widget__form-label">
Выберите необходимую валюту
<select id="ktech-widget-city" class="ktech-widget__form-select">
В данной части кода соответствующие надписи в блоках виджета могут быть заменены на любые другие, кроме того в верхней части кода вы можете изменить их подложку (у меня сделана прозрачной - transparent)
Далее вы добавляете поля селектора в которых и поместятся валютные курсы из javascripta сайта.
Для этого вы прописываете опции: <option id="USD" selected></option> а затем помещаете в них формат отображения валюты - у меня <div id="USD">Доллар США $ — 00,0000 руб.</div>
То есть селектор получается в виде:
<option id="USD" selected><div id="USD">Доллар США $ — 00,0000 руб.</div></option>
Строку с евро нужно сделать также, заменив в параметрах USD на EUR, а
Доллар США $ — 00,0000 руб. на
Евро € — 00,0000 руб.
после этого вы закрываете селектор и виджет:
</select>
</label>
<label class="ktech-widget__form-label">
</form>
</div>
Далее собственно сам javascript от ЦБ с курсами, обновляемыми онлайн:
сначала блок с указанием растет ли валютный курс или падает. Выглядит он так:
<script>
function CBR_XML_Daily_Ru(rates) {
function trend(current, previous) {
if (current > previous) return ' ▲';
if (current < previous) return ' ▼';
return '';
}
А затем и параметры парсинга данных (после них закрываем скрипт):
var USDrate = rates.Valute.USD.Value.toFixed(4).replace('.', ',');
var USD = document.getElementById('USD');
USD.innerHTML = USD.innerHTML.replace('00,0000', USDrate);
USD.innerHTML += trend(rates.Valute.USD.Value, rates.Valute.USD.Previous);
var EURrate = rates.Valute.EUR.Value.toFixed(4).replace('.', ',');
var EUR = document.getElementById('EUR');
EUR.innerHTML = EUR.innerHTML.replace('00,0000', EURrate);
EUR.innerHTML += trend(rates.Valute.EUR.Value, rates.Valute.EUR.Previous);
}
</script>
В конце указываем откуда будут браться эти данные:
<script src="//www.cbr-xml-daily.ru/daily_jsonp.js"></script>
В результате у вас должен будет получиться вот такой виджет: http://konoplevtech.blogspot.ru/p/blog-page.html
Ссылки на выполненное задание принимаются до 20:00 17 марта (лабораторная рассчитана на эту дату, но выполнять ее придется вместо занятия в формате домашнего задания). Следующее лекционное занятие - 24 марта.
Поскольку blogger не дружит с iframe, то размещать виджет лучше не через опцию "создать сообщение", а через опцию в сайдбаре слева: "страницы-создать страницу".
Чтобы упаковать скрипт в графический интерфейс, нужно создать стили страницы, для этого открываем свой блог и переходим в режим HTML, после чего указываем общие параметры, опираясь на стиль вашего блога:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Далее прописываем сам стиль виджета:
(Обратите внимание, что контейнер виджета я называю условно с префиксом ktech-widget для удобства распознания компонента - вы можете назвать его как хотите). В настройках стиля есть несколько переменных, которые вы должны заменить: это шрифт, цвет текста и фон. Шрифт задается в параметре font-family, цвет текста в соответствующем блоке в разделе color, для фона вам нужно будет подключить внешнюю картинку. Можно загрузить ее в блог через форму для файлов в разделе google sites: https://sites.google.com (вкладка "управление сайтом", затем - "приложения", после чего взять URL из параметра "скачать" и отсечь на символе файла - в моем случае это .jpg). Можно загрузить картинку через яндекс.фотки. Обратите внимание, что размеры картинки должны совпадать с размерами виджета (указываются в параметре высоты и ширины) и смотреться органично. После этого вы указываете адрес картинки в параметре фона. В целом блок стиля будет выглядеть так:
<style type="text/css">
html, body, body * {
margin: 0;
padding: 0;
}
.ktech-widget, .wbd-widget * {
box-sizing: border-box;
width: 300px;
height: 196px;
background-image: url(https://sites.google.com/site/konoplevmedia/curses300x196.jpg);
font-family: Garamond;
}
.ktech-widget {
border: solid 3px #333;
padding: 20px;
color: black;
}
.ktech-widget__info {
color: black;
font-size: 20px;
text-align: left;
background: transparent;
}
.ktech-widget__form-label {
color:black;
display: block;
line-height: 30px;
}
</style>
</head>
Теперь собственно тело виджета. Вам нужно создать интерактивный блок, куда и поместятся курсы валют. Для этого привязываем его код к стилям:
<div class="ktech-widget">
<div class="ktech-widget__info">
Валютный курс (данные ЦБ)<span id="ktech-widget-curses"></span>
</div>
<form id="ktech-widget-form" class="ktech-widget__form">
<label class="ktech-widget__form-label">
Выберите необходимую валюту
<select id="ktech-widget-city" class="ktech-widget__form-select">
В данной части кода соответствующие надписи в блоках виджета могут быть заменены на любые другие, кроме того в верхней части кода вы можете изменить их подложку (у меня сделана прозрачной - transparent)
Далее вы добавляете поля селектора в которых и поместятся валютные курсы из javascripta сайта.
Для этого вы прописываете опции: <option id="USD" selected></option> а затем помещаете в них формат отображения валюты - у меня <div id="USD">Доллар США $ — 00,0000 руб.</div>
То есть селектор получается в виде:
<option id="USD" selected><div id="USD">Доллар США $ — 00,0000 руб.</div></option>
Строку с евро нужно сделать также, заменив в параметрах USD на EUR, а
Доллар США $ — 00,0000 руб. на
Евро € — 00,0000 руб.
после этого вы закрываете селектор и виджет:
</select>
</label>
<label class="ktech-widget__form-label">
</form>
</div>
Далее собственно сам javascript от ЦБ с курсами, обновляемыми онлайн:
сначала блок с указанием растет ли валютный курс или падает. Выглядит он так:
<script>
function CBR_XML_Daily_Ru(rates) {
function trend(current, previous) {
if (current > previous) return ' ▲';
if (current < previous) return ' ▼';
return '';
}
А затем и параметры парсинга данных (после них закрываем скрипт):
var USDrate = rates.Valute.USD.Value.toFixed(4).replace('.', ',');
var USD = document.getElementById('USD');
USD.innerHTML = USD.innerHTML.replace('00,0000', USDrate);
USD.innerHTML += trend(rates.Valute.USD.Value, rates.Valute.USD.Previous);
var EURrate = rates.Valute.EUR.Value.toFixed(4).replace('.', ',');
var EUR = document.getElementById('EUR');
EUR.innerHTML = EUR.innerHTML.replace('00,0000', EURrate);
EUR.innerHTML += trend(rates.Valute.EUR.Value, rates.Valute.EUR.Previous);
}
</script>
В конце указываем откуда будут браться эти данные:
<script src="//www.cbr-xml-daily.ru/daily_jsonp.js"></script>
В результате у вас должен будет получиться вот такой виджет: http://konoplevtech.blogspot.ru/p/blog-page.html
Ссылки на выполненное задание принимаются до 20:00 17 марта (лабораторная рассчитана на эту дату, но выполнять ее придется вместо занятия в формате домашнего задания). Следующее лекционное занятие - 24 марта.
http://michail-bychkov97.blogspot.ru/p/blog-page.html
ОтветитьУдалитьБычков Михаил, ФЖ-302
http://year3term2.blogspot.ru/p/blog-page.html
ОтветитьУдалитьПочему-то не отображается фоновая картинка, хотя отдельно ссылка работает.
.ktech-widget, .wbd-widget * {
box-sizing: border-box;
width: 250px;
height: 188px;
background-image:url(https://sites.google.com/site/okkovach/imgonline-com-ua-Resize-WxfDleULLAz.jpg)
font-family: calibri;
Проблема в отсутствии пробела после параметра background-image: - он у вас слит с url. И нет закрывающих ; после адресации фото ...Az.jpg)
УдалитьКроме того у вас селектор вылезает за границы виджета. Жду исправленный вариант - либо ставлю оценку "хорошо".
http://year3term2.blogspot.ru/p/blog-page.html
УдалитьИсправила
Теперь все в порядке, оценка "отлично"
Удалитьhttp://babazoya.blogspot.ru/p/blog-page.html
ОтветитьУдалитьА.Кузовенкова ФЖ-302
Оценка "отлично"
Удалитьhttp://verikar.blogspot.ru/p/blog-page.html
ОтветитьУдалитьФЖ-302
Хотела сделать белую плашку и к фразе "выберите нужную валюту", но не знаю, возможно ли это.
Оценка "отлично".
УдалитьДа, конечно, белую плашку можно сделать если в соответствующем стиле отдельной стройкой прописать параметр background: white;
Никита Васильев
ОтветитьУдалитьhttp://vasilevjour.blogspot.ru/p/blog-page.html
Оценка "отлично"
Удалитьhttp://aseev174.blogspot.ru/p/blog-page_20.html?m=1
ОтветитьУдалитьКсения Можаева, ФЖ-302
ОтветитьУдалитьhttp://strokach.blogspot.ru/p/blog-page.html