Projekt

Obecné

Profil

Stáhnout (7.73 KB) Statistiky
| Větev: | Revize:
1
{% extends 'base.html.twig' %}
2
  
3
{% block title %}Heatmap.ZČU · O projektu{% endblock %}
4
{% block stylesheets %}
5
  <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
6
  <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
7
  <link rel="stylesheet" href="{{ asset('css/swiper.min.css') }}" />
8
{% endblock %}
9

    
10
{% block bodyClass %} class="intro"{% endblock %}
11
{% block body %}
12

    
13
  <header>
14
    <div class="logo">
15
      <a href="{{ path('home') }}">
16
        <img src="{{ asset('img/logo-zcu.svg') }}" alt="Logo Západočeské univerzity v Plzni">
17
      </a>
18
    </div>
19

    
20
    <nav class="navbar navbar-expand-lg">
21
      <a href="{{ path('heatmap') }}" class="navbar-brand shifted">
22
        <h1>Heatmap.ZČU</h1>
23
      </a>
24

    
25
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
26
        <span class="navbar-toggler-icon"></span>
27
      </button>
28

    
29
      <div class="collapse navbar-collapse" id="navigation">
30
        <ul class="navbar-nav ml-auto">
31
          <li class="nav-item">
32
            <h2>
33
              <a href="#" onclick="swiper.slideTo(1)" class="nav-link active" id="slide-nav-1" data-toggle="collapse" data-target=".navbar-collapse.show">Život na ZČU během dne</a>
34
            </h2>
35
          </li>
36
          <li class="nav-item">
37
            <h2>
38
              <a href="#" onclick="swiper.slideTo(2)" class="nav-link" id="slide-nav-2" data-toggle="collapse" data-target=".navbar-collapse.show">Hledání anomálií</a>
39
            </h2>
40
          </li>
41
          <li class="nav-item">
42
            <h2>
43
              <a href="#" onclick="swiper.slideTo(3)" class="nav-link" id="slide-nav-3" data-toggle="collapse" data-target=".navbar-collapse.show">O&nbsp;projektu</a>
44
            </h2>
45
          </li>
46
          <li class="nav-item button">
47
            <h2>
48
              <a href="/heatmap/?data_set[date]=2019-04-11&amp;data_set[time]=9&amp;data_set[type]=JIS" class="nav-link">Zobrazit heatmapu</a>
49
            </h2>
50
          </li>
51
        </ul>
52
      </div>
53
    </nav>
54
  </header>
55

    
56
  <div class="swiper-container">
57
    <div class="swiper-wrapper">
58
      <div class="swiper-slide slide-bg-1">
59
        <div class="container">
60
          <div class="slide-text">
61
            <span class="slide-index">01</span>
62
            <h3>Život na ZČU během dne</h3>
63
            <hr>
64
            <p>Zobrazte si heatmapu života univerzity hodinu po hodině během jednoho dne. Od ranního probouzení, kdy studenti a&nbsp;zaměstnanci přicházejí do laboratoří, přes polední špičku v&nbsp;menze až do samotného večera, kdy končí poslední z&nbsp;přednášek a&nbsp;cvičení.</p>
65
            <a href="/heatmap/?data_set[date]=2019-04-11&amp;data_set[time]=9&amp;data_set[type]=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
66

    
67
            <div class="map-point point-1">
68
              <div class="desc">
69
                <div class="circle"></div>
70
                <strong>Menza</strong>
71
                <p>Polední špička v menze.</p>
72
              </div>
73
            </div>
74

    
75
            <div class="map-point point-2">
76
              <div class="desc">
77
                <div class="circle"></div>
78
                <strong>Knihovna</strong>
79
                <p>Množství lidí v knihovně ukazuje, že se jedná o&nbsp;jedno z nejpopulárnějších míst na univerzitě.</p>
80
              </div>
81
            </div>
82
          </div>
83
        </div>
84

    
85
        <div class="slide-background"></div>
86
      </div>
87

    
88
      <div class="swiper-slide slide-bg-2">
89
        <div class="container">
90
          <div class="slide-text">
91
            <span class="slide-index">02</span>
92
            <h3>Hledání anomálií</h3>
93
            <hr>
94
            <p>Heatmapa vám také dává možnost prozkoumávat data vlastním způsobem &ndash; stačí jen zvolit konkrétní datum a&nbsp;čas, pro které chcete data zobrazit. Můžete tak objevit i&nbsp;různé anomálie, například narazit na noční návštěvníky kampusu nebo odhalit návraty na studentské koleje v&nbsp;brzkých ranních hodinách&hellip;</p>
95
            <a href="/heatmap/?data_set[date]=2019-04-11&amp;data_set[time]=9&amp;data_set[type]=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
96

    
97
            <div class="map-point point-3">
98
              <div class="desc">
99
                <div class="circle"></div>
100
                <strong>Podivný pohyb studentů</strong>
101
                <p>Po středečním večeru bylo zaznamenáno relativně hodně vstupů na kolej kolem 4:00 ráno.</p>
102
              </div>
103
            </div>
104
          </div>
105
        </div>
106

    
107
        <div class="slide-background"></div>
108
      </div>
109

    
110
      <div class="swiper-slide slide-bg-3">
111
        <div class="container">
112
          <div class="slide-text">
113
            <span class="slide-index">03</span>
114
            <h3>O&nbsp;projektu</h3>
115
            <hr>
116
            <p>Západočeská univerzita v&nbsp;Plzni poskytuje v&nbsp;rámci otevřených dat (<a href="http://opendata.zcu.cz" target="_blank">opendata.zcu.cz</a>) vybrané datové sady získávané z&nbsp;různých provozních a&nbsp;IoT systémů. V&nbsp;rámci výukového projektu se studentský tým rozhodl několik těchto datových sad využít, zpracovat je a&nbsp;vizualizovat na mapovém podkladu formou heatmapy. Zahrnuta jsou předem anonymizovaná data s&nbsp;časovými značkami získaná mj.&nbsp;z&nbsp;připojení k&nbsp;univerzitní síti, z&nbsp;kartových snímačů na vstupech (JIS karty) a&nbsp;ze stojanů k&nbsp;zapůjčování koloběžek.</p>
117
            <p>Na těchto stránkách si můžete tuto vizualizaci prohlížet a&nbsp;prozkoumávat den po dni, hodinu po hodině, a&nbsp;nahlédnout tak na univerzitní kampus (i&nbsp;studentské koleje) jako na jeden velký žijící organismus.</p>
118
            <hr>
119
            <div class="copyright">
120
              <p>
121
                <strong>Autoři aplikace:</strong> Tomáš Ballák, Petr Hlaváč, Jakub Vašta, Martin Šebela
122
              </p>
123
              <p>
124
                <span>Vytvořeno v&nbsp;rámci semestrální práce oboru <i>Softwarové inženýrství</i> na KIV&nbsp;FAV&nbsp;ZČU</span><br>
125
                <strong>Odborný dohled:</strong> doc.&nbsp;Přemysl Brada
126
              </p>
127
            </div>
128
            <p class="logos-partners">
129
              <a href="https://fav.zcu.cz" target="_blank">
130
                <img src="img/logo-fav-zcu.svg" alt="Logo Fakulty aplikovaných věd ZČU v Plzni">
131
              </a>
132
              <a href="http://opendata.zcu.cz" target="_blank">
133
                <img src="img/logo-opendata-zcu.svg" alt="Logo OpenData ZČU">
134
              </a>
135
            </p>
136
          </div>
137
        </div>
138

    
139
        <div class="slide-background"></div>
140
      </div>
141
    </div>
142

    
143
    <div class="swiper-pagination"></div>
144

    
145
    <div class="swiper-pagination-buttons">
146
      <a href="#" onclick="swiper.slidePrev()" class="btn btn-secondary btn-prev"></a>
147
      <a href="#" onclick="swiper.slideNext()" class="btn btn-secondary btn-next"></a>
148
    </div>
149
  </div>
150

    
151
{% endblock %}
152
{% block javascripts %}
153

    
154
  <script src="{{ asset('js/vendor/swiper.min.js') }}"></script>
155
  <script>
156
    const swiper = new Swiper('.swiper-container', {
157
      loop: true,
158
      pagination: {
159
        el: '.swiper-pagination',
160
      },
161
      on: {
162
        slideChange: function() {
163
          let elms = document.querySelectorAll('.nav-link');
164

    
165
          for (let i = 1; i < elms.length; i++) {
166
            document.getElementById('slide-nav-' + i).className = 'nav-link' + ((this.realIndex === i - 1) ? ' active' : '');
167
          }
168
        }
169
      }
170
    });
171
  </script>
172
  <script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
173
  <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
174

    
175
{% endblock %}
(3-3/3)