-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathimpact.html
147 lines (127 loc) · 7.69 KB
/
impact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html style="height:100%;width:100%;margin:0px;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="WebExhibition" content="yes"><link href="https://fonts.googleapis.com/earlyaccess/notosanstc.css" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- flexboxgrid --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">
<title> WebExhibition - Impact 影響價值</title>
<link rel="stylesheet" href="./dist/css/impact.css">
</head>
<body>
<nav class="menu"><ul><li class="list"><a href="3dvr.html"><em>3D ＆ VR</em></a></li><li class="list"><a href="issue.html"><em>深度議題</em></a></li><li class="list"><a href="simple-app.html"><em>有趣小應用</em></a></li><li class="list"><a href="visualization.html"><em>視覺化圖表</em></a></li><li class="list"><a href="story.html"><em>報導故事書</em></a></li><li class="list"><a href="game.html"><em>遊戲</em></a></li></ul></nav><nav class="menu-mobile"><div id="experience" class="pojoro nav"> ● </div><p class="nav-main-text">嗨，我叫艾克斯・貝利恩斯，要來玩玩嘛？</p><a href="#menu-lists"><i class="fa fa-bars" aria-hidden="true"></i></a></nav><div class="nav-sub-text-div"><p class="nav-sub-text">這個網頁共包含六個主題，分別是<b>「3D & VR」、「深度議題」、「有趣小應用」、「視覺化圖表」、「報導＆故事書」、「遊戲」</b>，每一個都是很有趣的體驗，大家玩玩看吧！</p></div><div id="menu-lists" class="menu-lists-block"><div class="toggle-close"><a href="#experience"><i class="fa fa-times" aria-hidden="true"></i></a></div><a class="menu-link" href="./"><h3>起源</h3><p> - Experience 的反思之路</p></a><a class="menu-link" href="./impact.html" target="_blank"><h3>影響</h3><p> - Experience 的延續影響</p></a><a class="menu-link" id="fa-lists-applications"><h3>應用</h3><p> - Experience 的小小體悟</p><i class="fa fa-caret-down" aria-hidden="true"></i></a><div class="menu-lists-applications"><a class="menu-link" href="./3dvr.html"><h3>3D & VR</h3><p> - 簡易手機 VR 體驗</p></a><a class="menu-link" href="./issue.html"><h3>深度議題</h3><p> - 掌蚊人</p></a><a class="menu-link" href="./simple-app.html"><h3>有趣小應用</h3><p> - 抽獎機、即時回饋</p></a><a class="menu-link" href="./visualization.html"><h3>視覺化圖表</h3><p> - 台南市 1999 統計資訊</p></a><a class="menu-link" href="./story.html"><h3>報導 ＆ 故事書 </h3><p> - < 幸福的定義 > 網頁故事書</p></a><a class="menu-link" href="./game.html"><h3>遊戲</h3><p> - 掌蚊宗師</p></a></div></div>
<section class="wrap">
<h1>影響</h1>
<h3 class="color-green">「設計的本質在於解決問題。而對於網頁來說就是創造殺手級的體驗。」</h3>
<p>期許未來，我可以設計出一個殺手級體驗的網站，成功解決問題。</p>
</section>
<div class="guide-box"></div>
<section class="row section-content">
<div data-0="opacity:0;" data-40p="opacity:1" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 section-part">
<div class="left-bar"></div>
<div class="top-date p-font-400 date-long">
<p>2015.12 ~ 2016.01</p>
</div>
<div class="part-img-box">
<div id="review2015" class="part-img">
<p>Review 2015</p>
</div>
<div id="happiness" class="part-img">
<p>幸福的定義</p>
</div>
</div>
<div class="part-event">
<p>
FB貼文皆破百讚
<br> 觸及人數共超過14000人次
</p>
</div>
</div>
<div data-bottom-top="opacity:0;" data-110-bottom-center="opacity:1" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 section-part">
<div class="left-bar"></div>
<div class="top-date p-font-400">
<p>2016.03</p>
</div>
<div class="part-img-box">
<div id="realtime-draw" class="part-img">
<p>即時問卷系統</p>
</div>
<div id="draw-demo-video" class="part-img" onclick="window.open('https://www.youtube.com/watch?v=bUDkm9_4Q4k')">
<p>Demo 影片(點圖)</p>
</div>
</div>
<div class="part-event">
<p>
在兩場活動中使用過皆大受好評。
<br> 即時分析問卷的資料，立即與觀眾互動一起看有趣的結果，讓資料的價值立刻顯現。
</p>
<p class="p-font-400">
曾有廠商主動詢問未來系統合作可能性。
</p>
</div>
</div>
<div data-bottom-top="opacity:0;" data-110-bottom-center="opacity:1" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 section-part">
<div class="left-bar"></div>
<div class="top-date p-font-400">
<p>2016.09</p>
</div>
<div class="part-img-box">
<div id="theMosquitoMan" class="part-img">
<p>掌蚊人</p>
</div>
<div id="theMosquitoMan_game" class="part-img">
<p>掌蚊宗師</p>
</div>
</div>
<div class="part-event">
<p>
粉專人數突破800讚。
<br> 單篇貼文最高按讚接近600讚，分享次數高達300次，觸及人數高達30000人。
</p>
<p class="p-font-400">
與台南市政府、成功大學合作推出手機APP，
<br> 與遠傳電信合作推出「掌蚊人@line」機器人服務。
</p>
<p class="p-font-400 color-green">
在2016年透過民眾集力式回報與台南市政府合作，用智慧科技的力量在防疫上劃下一個重大里程碑。
</p>
<img src="./dist/img/impact_theMosquitoMan.jpg">
</div>
</div>
<div data-bottom-top="opacity:0;" data-110-bottom-center="opacity:1" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 section-part">
<div class="left-bar"></div>
<div class="top-date p-font-400">
<p>2016.11</p>
</div>
<div class="part-img-box">
<div id="slotMachine" class="part-img">
<p>抽獎機</p>
</div>
</div>
<div class="part-event">
<p>
作為抽獎活動專用小程式，加入背景與音效，呈現出其活潑可愛的元素。
</p>
</div>
</div>
<div data-bottom-top="opacity:0;" data-110-bottom-center="opacity:1" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 section-part">
<div class="left-bar"></div>
<div class="top-date p-font-400">
<p>2016.12</p>
</div>
<div class="part-img-box">
<div id="proj-1999" class="part-img">
<p>1999視覺化</p>
</div>
</div>
<div class="part-event">
<p>
與台南市政府研究發展考核委員會合作，
<br> 將民眾陳情的1999案件做成視覺化圖表給人民檢驗與分析。
</p>
</div>
</div>
<div data-bottom-top="opacity:0;" data-bottom-bottom="opacity:1" class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 section-end">
<div class="left-bar"></div>
</div>
</section>
<footer id="footer" class="row"><div class="col-xs-12 col-md-3 col-md-offset-1 footer-block"><a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i></a><a href="https://www.facebook.com/mengzeh" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a><a href="https://github.com/TseHang/WebExhibition" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></div><div class="col-xs-12 col-md-3 col-md-offset-3 footer-block"><p><i class="fa fa-copyright"></i>Copyright 2017 Meng-Tse, Hang</p></div></footer>
<script src="./src/skrollr.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="./dist/js/impact.js"></script>
</body></html>