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

Задание состоит из двух частей - создания виджета визуализации данных (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 16 марта.

Комментарии

  1. https://rewrqwe.blogspot.com/2019/03/jjjjj-body-background-color-transparent_57.html
    Попов Сергей

    ОтветитьУдалить
    Ответы
    1. Не принято. Вариант отображения статистики не несет в себе графической составляющей (слева у вас синий забор, справа - типовая таблица), сам виджет статистики снес верстку. Цвета колонок не изменены. Жду исправленный вариант.

      Удалить
  2. Не принято. В статистике есть непереименованные значения (F3, F4). Виджет со статистикой неправильно встроен - он стоит не в колонке, а над колонками. Жду исправленный вариант.

    ОтветитьУдалить
  3. https://borisovaanna56.blogspot.com/2019/02/menu-body-background-color-transparent.html

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

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