Современные информационные технологии. 4 курс. Лабораторное занятие №1. Простой Mash-up


Часть первая:

Вам необходимо собрать обработанные данные из разнородных источников и сгруппировать их, создав мэшап. Для создания стартового форка (fork, сценарий связи объектов для последующей трансляции) вы:

1) Переходите к мэшап-платформе https://www.pipes.digital/ и регистрируетесь в ней до начала работы.

2) Создаете несколько фид-каналов (не менее трех) из любого источника (в моем случае - YouTube: то есть берете ссылки на видео на каждом из каналов и помещаете по одной ссылке на фид - на скриншоте 1,2,3). Для соединения компонентов – зажать первый компонент (он станет светлее) и кликнуть на второй.  Для удаления связи (если компоненты соединились по ошибке) – кликнуть левой кнопкой и сдвинуть курсор.



3)Выбираете контроллер Combine и собираете в него эти фиды.

4) На выходе добавляете секвенсер Sort с произвольным аутпутом (у меня - item.updated и автосортировка).

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

6) Добавляете инструмент исключений (Replace) - по ключевому слову (словам). Важно! Разделителем в фильтре является модульный слеш "|"

7) Через инструмент Truncate задаете число модулей в ленте (в моем примере - 10).

8) Выдаете весь фид в итоговый канал и сохраняете готовый мэшап. После сохранения открываете мэшап в настройках профиля и делаете общедоступным (make public) иначе он не будет виде в виджете в блоге.

 Обратите внимание, что если все сделано верно, то по кнопке view output в окне truncate будет видна ваша feed-лента.

 В дальнейшем вам потребуется URL фида:



Часть вторая:

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

CSS
9) Задаем шрифт, цвет абзацев и ссылок:

html, body {

  font-family: Roboto;
}

a {
  color: #fd084a;
  text-decoration: none;
}

p {
  color: #fff;
}

10) Указываем расположение описания:

.description {
  margin-top: 50px;
}

11) Задаем положение и цвет стрелок навигации:

span.left-arrow, span.right-arrow {
  color: #fbfbfb;
  cursor: pointer;
  display: block;
  font-size: 1em;
  height: auto;
  padding: 1em;
  position: absolute;
  top: 80%;
  transition: all 0.3s ease;
  width: auto;
  z-index: 999;
}
span.left-arrow:hover, span.right-arrow:hover {
  background-color: #87CEEB;
}

.left-arrow {
  right: 60px;
}

.right-arrow {
  right: 0;
}

12) Указываем цвета и положение слайдера

.slider {
  color: #fbfbfb;
  overflow: hidden;
  position: relative;
}

.slider .carousel {
  height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.slider .carousel .carousel-footer {
  color: #ffffff;
  bottom: -80px;
  position: relative;
}

13) Задаем фон слайдера:

.slider .carousel li {
  background-image: url(здесь ваш фон);
  display: block;
  float: left;
  height: 300px;
  margin: 0;
  padding: 70px 0;
  position: relative;
  text-align: center;
}

.slider .carousel li h3, .slider .carousel li a, .slider .carousel li p {
  color: #fbfbfb;
}

14) Указываем параметры адаптивной верстки:

@media only screen and (min-width: 780px) {
  .slider .carousel li {
    width: 700px;
  }
}
@media only screen and (min-width: 680px) and (max-width: 779px) {
  .slider .carousel li {
    width: 600px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 679px) {
  .slider .carousel li {
    width: 400px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  .slider .carousel li {
    width: 300px;
  }
}
@media only screen and (max-width: 319px) {
  .slider .carousel li {
    width: 200px;
  }
}

15) Задаем фон фида и его размеры:

.feed {
  background-color: #fbfbfb;
  margin: auto;
}

.feed ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

16) Цвет заголовков фида:

.feed h3 {
  color: #424242;
  padding: 0 0.8em;
}

.feed li {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  list-style: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

17) Цвет ссылок фида (активных и неактивных)

.feed li a {
  color: #0000ff;
  margin: 0;
  padding: 1em;
}

.feed li:hover {
  background-color: #87CEEB;
}

18) Адаптивная верстка для блока фида:

@media only screen and (min-width: 780px) {
  .feed {
    width: 700px;
  }
}
@media only screen and (min-width: 680px) and (max-width: 779px) {
  .feed {
    width: 600px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 679px) {
  .feed {
    width: 400px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  .feed {
    width: 300px;
  }
}
@media only screen and (max-width: 319px) {
  .feed {
    width: 200px;
  }
}

19) И упаковку фида:

.wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: auto;
}

JavaScript

20) Задаем функцию RSS-запроса. Здесь вам нужно указать ссылку на фид из pipes digital:

var slideCount;
var slideWidth;
var slideHeight;
var sliderUlWidth;

$(function() {
 getRssFeed("ссылка на ваш фид", mapFeed);

 $('.left-arrow').on('click', function () {
  moveLeft();
 });

 $('.right-arrow').on('click', function () {
  moveRight();
 });

 $(window).on('resize', function () {
  returnCarouselList();
 });
});

21) Функция движения по стрелкам:

function moveLeft() {
 $('.carousel').animate({
  left: + slideWidth
 }, 200, function () {
  $('.carousel li:last-child').prependTo('.carousel');
  $('.carousel').css('left', '');
 });
}

function moveRight() {
 $('.carousel').animate({
  left: - slideWidth
 }, 200, function () {
  $('.carousel li:first-child').appendTo('.carousel');
  $('.carousel').css('left', '');
 });
}

22) Функция отображения RSS-канала:

function getRssFeed(url, callback) {
 return feednami.loadGoogleFormat(encodeURI(url), callback);
}

function mapFeed(result) {
 if (result.error) {
      console.log(result.error)
  } else {
  createCarouselList(result.feed.entries.slice(0, 5));
  createFeedList(result.feed.entries.slice(0, 20));
  }
}

function createCarouselList(elements) {
 var list = [];
 $(elements).each(function(index, element) {
  list.push("<li><h3><a href='"+ element.link +"'>"+ element.title +"</a></h3><p>"+ new Date(element.publishedDate).toLocaleDateString("pt-BR") +"</p><span class='carousel-footer'>"+ (index + 1) +" out of 5</span></li>");
 });

 $(".carousel").append(list);

}

function createFeedList(elements) {
 var list = [];
 $(elements).each(function(index, element) {
  list.push("<li><a href='"+ element.link +"'>"+ element.title +"</a></li>");
 });
 $(".list").append(list);
 returnCarouselList();
}

function returnCarouselList() {
 slideCount = $('.carousel li').length;
 slideWidth = $('.carousel li').width();
 slideHeight = $('.carousel li').height();
 sliderUlWidth = slideCount * slideWidth;
 $('.slider').css({ width: slideWidth, height: slideHeight });
 $('.carousel').css({ width: sliderUlWidth, marginLeft: - slideWidth });
 $('.carousel li:last-child').prependTo('.carousel');
}

HTML
23) Указываем DOCTYPE, стандартный заголовок и стандарт библиотеки стилей:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Carousel Rss Feed Reader</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

24) Встраиваем шрифты:

<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>

25) Встраиваем CSS и закрываем </head>

26) Внутри <body> разворачиваем классы стрелок навигации:

<div class="wrapper">
 <div class="slider">
  <span class="left-arrow">
   <i class="material-icons">keyboard_arrow_left</i>
  </span>
   <span class="right-arrow">
   <i class="material-icons">keyboard_arrow_right</i>
  </span>

27) Внедряем класс отображения сообщений:

 <ul class="carousel"></ul> и закрываем  </div>

28) Открываем класс фида с заголовком:

 <div class="feed">
  <h3>Последние публикации</h3>

29) Добавляем класс перечня: 

  <ul class="list"></ul> и закрываем оставшиеся классы: 
 </div>
</div>

30) Встраиваем стандарт библиотек JS:

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js'></script>

31) Теперь ваш JavaScript и закрываем </body> и </html>

Если все верно, то ваш mash-up будет выглядеть примерно так: https://konoplevtech4.blogspot.com/2019/09/rss-feed.html

Обратите внимание, что из-за запроса данных из RSS страница может выгружаться медленно - до 20-30 секунд.

Ссылки на выполненное задание принимаются в комментариях к этому посту до 15:00 22 сентября.

Комментарии

  1. Виталий Карпенко17 сентября 2020 г. в 10:20

    https://vkar15.blogspot.com/2020/09/mashup-yt.html

    ОтветитьУдалить
  2. Екатерина Волосникова18 сентября 2020 г. в 01:04

    https://katevolosnikova.blogspot.com/2020/09/blog-post.html

    ОтветитьУдалить
  3. Полина Малышева20 сентября 2020 г. в 07:26

    https://verstkadizpm.blogspot.com/2020/09/mash-up.html

    ОтветитьУдалить
  4. Кваша Дмитрий21 сентября 2020 г. в 01:23

    https://dmitrykvasha1.blogspot.com/2020/09/blog-post.html

    ОтветитьУдалить
  5. Unknown21 сентября 2020 г. в 08:17

    https://sorokina03.blogspot.com/2020/09/blog-post.html
    https://sorokina03.blogspot.com/2020/09/flat-design.html

    ОтветитьУдалить
  6. Дмитрий Носов21 сентября 2020 г. в 12:34

    https://auditoriasmidz19.blogspot.com/2020/09/blog-post.html

    ОтветитьУдалить

Добавлять новые комментарии запрещено.

Популярные сообщения