-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (120 loc) · 8.76 KB
/
index.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
<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 - 從設計思考出發的視覺化網頁應用</title>
<link rel="stylesheet" href="./dist/css/index.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="section row section-start">
<div class="col-xs-12 mobile-logo">
<h1>以設計思考為出發的視覺化網頁應用</h1>
</div>
<div class="wrap">
<div id="logo-experience" class="pojoro"> ● </div>
<p class="hintText">
嗨，我叫 艾克斯・貝利恩斯，要來玩玩嘛？
</p>
<p class="myName">
<em>Meng-Tse, Hang</em>
</p>
</div>
</section>
<section class="section">
<div class="board-title">
<h1 class="col-xs-6 col-md-2 col-md-offset-1">Why</h1>
</div>
<div class="row">
<div id="why-board" class="board-card col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<p>
以往，網頁被用來當作
<wbr>「傳達資訊的一種手段」。
<br> 至今，因為科技進步的關係，
<wbr>網頁可以有了不一樣的體驗。
</p>
<p>
<span class="is_mobile_hidden">從接觸網頁以來我就開始思考</span>
<wbr>
<span class="color-green p-font-400">到底網頁可以呈現給使用者什麼？</span>
<br> 是一些冰冷的資訊，
<wbr>還是可以傳達某些不一樣的
<span class="p-font-400 color-red--pink">「溫度」</span>？
</p>
<p class="p-font-600 color-black--hard letter-spacing-s">「下一個世代的網頁應該要擁有什麼樣的特點才能被使用者所喜歡？」</p>
<div class="circle"></div>
</div>
</div>
<div class="board-title">
<h1 class="col-xs-6 col-md-2 col-md-offset-1 ">What</h1>
</div>
<div class="row">
<div id="what-board" class="board-card col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<p>
對於新一代的網頁必須擁有什麼樣的特色我也還在思索，
<wbr> 但我把這一年來所做的一些作品分成六個主題，
<wbr> 並與大家分享
<span class="color-green p-font-400">為什麼我要這樣設計及如何思考。</span>
</p>
<div class="circle"></div>
</div>
</div>
<div class="board-title">
<h1 class="col-xs-6 col-md-2 col-md-offset-1 ">Value</h1>
</div>
<div class="row">
<div id="impact-board" class="board-card col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<p>
而且，這些應用都發展出其<span class="color-green p-font-400 link" onclick="window.open('/impact.html');"> 獨特不凡的價值</span>！
</p>
<div class="circle"></div>
</div>
</div>
</section>
<section class="section section-blocks">
<div class="row row-1">
<div class="block col-xs-12 col-md-4">
<div id="block-blue" class="in-block" onclick="window.location='3dvr.html'">
<h2>3D ＆ VR</h2>
<p>基於 WebGL 技術渲染3D電腦圖形，
<wbr>創造更擬真、實境的網頁瀏覽體驗。</p>
</div>
</div>
<div class="block col-xs-12 col-md-8">
<div id="block-green" class="in-block" onclick="window.location='issue.html'">
<h2>深度議題</h2>
<p>轉化人們對於議題的沈重特性，加入故事性的元素使其生動、活潑起來。</p>
</div>
</div>
</div>
<div class="row row-2">
<div class="block col-xs-12 col-md-7">
<div id="block-red-pink" class="in-block" onclick="window.location='simple-app.html' ">
<h2>有趣小應用</h2>
<p>加入活潑的頁面、互動性的元件，改變人們對原先使用網頁小程式的單調印象。</p>
</div>
</div>
<div class="block col-xs-12 col-md-5">
<div id="block-yellow-earthy" class="in-block" onclick="window.location='visualization.html'">
<h2>視覺化圖表</h2>
<p>把死板的資料欄位整理再分析，
<wbr>用視覺化技術創造出人們「容易解讀」的圖像化資訊，
<wbr>呈現其背後的意義。</p>
</div>
</div>
</div>
<div class="row row-3">
<div class="block col-xs-12 col-md-5">
<div id="block-green-pink" class="in-block" onclick="window.location='story.html'">
<h2>報導 ＆ 故事書</h2>
<p>我嘗試用「講故事」的方式，結合數據視覺化圖表佐證，引導出深刻的事實或著人們所沒發現的議題。</p>
</div>
</div>
<div class="block col-xs-12 col-md-7">
<div id="block-purple" class="in-block" onclick="window.location='game.html'">
<h2>遊戲</h2>
<p>讓遊戲不只是遊戲，還可以讓使用者在玩樂中學習新知識。</p>
</div>
</div>
</div>
</section>
<div class="gogoGuide" id="gogoGuide"><div id="experience" class="pojoro"> ● </div><p class="experience-talk">我是貼心小助手，艾克斯・貝利恩斯！請多多指教 😊</p><div class="experience-icon-home fa-icon"><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a></div><div class="experience-icon-close fa-icon"><a><i class="fa fa-times-circle-o" aria-hidden="true"></i></a></div><div class="experience-icon-lists fa-icon"><a href="#menu-lists"><i class="fa fa-bars" aria-hidden="true"></i></a></div></div><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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script><script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><script src="src/jquery.ui.touch-punch.min.js"></script><script src="./dist/js/gogoGuide.js"></script><script type="text/javascript" src="./dist/js/index.js"></script>
</body><!-- jquery-ui css --></html>