Типология сетевых СМИ. 3 курс. Лабораторное занятие №2. Подгруппа 2. Визуализация статистики

Задание состоит из двух частей - создания виджета визуализации данных (1) и публикации этого виджета в виде колонки под блоком меню из предыдущего задания (2).

Часть 1.

1) Вам нужно выбрать любые открытые данные - можно, например, взять статистику челябинскстата - http://chelstat.gks.ru/ - в формате excel (минимум - два файла с различными данными).
2) Открыть сервис Tableau Public и зарегистрировать в нем аккаунт - https://public.tableau.com/s/ Затем начать работу с версией 2019 года (если у вас нет программы - скачать дистрибутив с сайта).
3) Запустить программу и выбрать данные (экспортируются из текстового файла, access или excel).
4) Оформить данные в таблице (sheet) различным образом для различных данных (у вас два варианта для минимума), распределив по колонкам и строкам.
5) Создать дэшбод-страницу (Dashboard-New Dashboard) и перенести туда таблицу (sheet 1 и sheet 2, соответственно).
6) Оформить страницу на русском языке и удалить все нулевые параметры из конечного виджета.
7) Зарегистрироваться в tableausoftware и загрузить статистику в сервис (File - Save to web).
8) Открыть дэшбод в вашем профиле и скопировать embed-код.

Часть 2.


9) Для добавления простых колонок нужно добавить на страницу CSS-стиль этих колонок и указать их в HTML.

10) Внутри параметров стилей создаем идентификатор #maket  и указываем в нем атрибут ширины макета в процентах ( в моем примере - 145%). После этого закрываем идентификатор


11) Обозначаем селекторы таблиц-колонок с идентификаторами левой и правой. Ширину вы задаете свою, как и фоновые цвета:


TD {
vertical-align: top;
padding: 5px;
}
TD#leftcol {
width: 800px;
background: #87ceeb;
}
TD#rightcol {
width: 500px;
background: #4169e1;
}

12) После этого задаем подвал сайта с помощью селектора footer и указываем его атрибуты: цвет (background-color), цвет текста (color) и ширину (width) в процентах (равна ширине всего макета)


13) Закрываем селектор футера и тег <style>


14) После закрытой части меню навигации задаем колонки как таблицу с идентификатором макета:


<table cellspacing="0" id="maket">


15) Внутри указываем тело таблицы с идентификатором колонки (левой и правой): 

<tbody>
<tr>
<td id="leftcol">содержимое левой колонки</td>
<td id="rightcol">содержимое правой колонки</td>
</tr>
</tbody>
</table>

16) После тега </body> вставляете тег подвала страницы <footer> и указываете в нем произвольное содержимое.

17) Встраиваете виджет визуализированных данных в любую колонку, настраивая ширину виджета.

Если все верно, то у вас получится примерно такой вариант: https://konoplevtech3.blogspot.com/2019/02/css.html

Ссылки на выполненное задание принимаются в комментариях до 20:00 23 марта.

Комментарии

  1. https://elizavetabelyakova.blogspot.com/2019/02/menu-body-background-color-transparent.html

    ОтветитьУдалить
    Ответы
    1. Оценка "хорошо" - выпадающее меню не перенесено из под виджета.

      Удалить
  2. https://sonya98.blogspot.com/2019/02/3_42.html

    ОтветитьУдалить
  3. https://dyadina74tatyana.blogspot.com/2019/03/menu-body-background-color-pink-margin_22.html

    ОтветитьУдалить
    Ответы
    1. Оценка "хорошо". Во втором блоке данных у вас нерепрезентативный забор.

      Удалить
  4. https://shishkovaelena.blogspot.com/2019/02/blog-post_14.html

    ОтветитьУдалить
  5. https://anasstasia-man.blogspot.com/2019/02/menu-body-background-color-cornsilk.html

    Анастасии Мансуровой

    ОтветитьУдалить
  6. https://ekaterinaaaaaaaaaaa.blogspot.com/2019/03/td-vertical-align-toppadding.html

    ОтветитьУдалить
  7. Оценка "хорошо" - некорректно отображаются параметры в виджете.

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

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