-
Notifications
You must be signed in to change notification settings - Fork 110
/
Copy pathindex.html
316 lines (254 loc) · 11.7 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<html>
<head>
<title>Big Road: Simplist's solution to a mobile-only web story</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0">
<style>
/* Inspired by: http://embedresponsively.com/ */
responsive-block {
display: block;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
ratio-1-to-1 responsive-block {
display: block;
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
max-width: 100%;
}
ratio-4-to-3 responsive-block {
display: block;
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
max-width: 100%;
}
responsive-block iframe,
responsive-block object,
responsive-block embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body {
max-width: 360px;
margin-left: auto;
margin-right: auto;
color: #333;
}
img {
max-width: 100%;
}
p {
padding-left: 1rem;
padding-right: 1rem;
}
figure {
width: 100%;
margin-left: 0;
margin-right: 0;
}
figure figcaption {
display: block;
padding-left: 2rem;
padding-right: 2rem;
font-size: 0.85em;
}
h2 {
border-bottom: 1px solid #ccc;
margin-top: 2em
}
cover-image {
display: block;
position: relative;
}
cover-image h1 {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #eee;
text-align: center;
}
cover-image author-block {
position: absolute;
bottom: 1em;
left: 0;
right: 0;
color: black;
text-align: center;
padding: 10px;
opacity: 0.6;
background-color: white;
}
code {
margin: 0;
max-width: 100%;
word-break: break-all;
font-family: monospace;
}
</style>
</head>
<body>
<cover-image>
<img src="images/Rainbow-Desert-Road-Beautiful-Big-Bend-Wallpaper-3414934.jpg" alt="cover photo">
<h1>
Big Road
</h1>
<author-block>
<em>By</em>
<br>
<strong>
Pili Hu, VSCode and GitHub
</strong>
</author-block>
</cover-image>
<p>This is a simplist solution to a mobile-only web story. Users with no coding background should be able to use this template after a 10 minute crash course on HTML. One does not need to learn CSS, in order to make it work in a reasonable way.</p>
<h2> Features </h2>
<p>
"Big Road" has the following key features:
</p>
<ul>
<li>
<strong>HTML only</strong> -- Actually, you don't need to learn HTML. Just get the code of current page and modify it.
</li>
<li>Sensible default style.</li>
<li>Common elements:
<code>p, em, strong</code>
</li>
<li>Snippet for responsive embedding of interactive charts, via <code>iframe</code></li>
</ul>
<h2> Getting started </h2>
<p>Make your first web story in three steps:</p>
<ol>
<li>Fork this repository</li>
<li>Modify <code>index.html</code> to include your content</li>
<li>
Your web story is available on <code>username.github.io/big-road/</code>. For example this current page is available at <a href="hupili.github.io/big-road/">hupili.github.io/big-road/</a>. Checkout
<a href="https://github.com/hupili/python-for-data-and-media-communication-gitbook/blob/master/notes-week-00.md#github-pages">this page</a> for more information about hosting on GitHub Pages.
</li>
</ol>
<h2>Demo of supported elements for your article</h2>
<p>
You have already seen headings (<code>h1</code>, <code>h2</code>, <code>h3</code>), listings (<code>ul</code>, <code>ol</code>, <code>li</code>), and paragraph (<code>p</code>) in previous codes. In this section, we show you several other useful
elements.
</p>
<h3>Highlight texts in a paragraph</h3>
<p>
In a pragraph, there may be some key information that you want to highlight. In HTML, we have two basic semantic tags for this purpose. You can <em>emphasize something</em> , or <strong>strongly emphasize something</strong>. The difference here
is subtle and the choice depends on the author.
</p>
<h3>Image with caption</h3>
<figure>
<img src="images/screenshot-demo.png" alt="">
<figcaption>
<em> How "Big Road" looks like on mobile phone.</em>
<br> Source: screenshot
</figcaption>
</figure>
<figure>
<img src="images/screenshot-demo.png" alt="">
<figcaption>
Sometimes, the caption can be very long which is a standalone story by itself. So you don't have to put the entire block into emphasis mode. Just <em>emaphsize the part you find most important</em>.
</figcaption>
</figure>
<p>Note, an image aspect ratio of 16:9 is recommended as a sensible default.</p>
<h3>Responsive video embedding</h3>
<p>Embedding videos in a responsive manner is always a pain. The conventional technique is to embed by <code>iframe</code>. You need to specify the width and height of the iframe, making it non-responsive to different screens.</p>
<p>Use Youtube as an example. You can copy the following code of
<a href="https://www.youtube.com/watch?v=qp0HIF3SfI4">this video</a> from its "Share --> Embed" button:
</p>
<p><code>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qp0HIF3SfI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</code></p>
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/qp0HIF3SfI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<p>The default result is as follows:</p>
<figure>
<img src="images/responsive-embedding-video.png" alt="">
<figcaption>
Default iframe embedding is not responsive to the screen width. It is either too small or too big.
</figcaption>
</figure>
<p>
Following is one responsive video. You can check the source code of this page to see how it works. You don't have to completely understand the internal works. Simply subsituting the URL suffices.
</p>
<responsive-block>
<iframe src='https://www.youtube.com/embed/qp0HIF3SfI4' frameborder='0' allowfullscreen>
</iframe>
</responsive-block>
<h3>Responsive interactive chart</h3>
<p>With the wide spread tools today, you don't have to learn frontend technology in order to make interactive charts. For example, there are off-the-shelf online tools like
<a href="https://infogram.com/">infogram.com</a>,
<a href="https://www.datawrapper.de/">datawrapper</a>, and
<a href="https://flourish.studio/">flourish</a>.
</p>
<p>
If you are Python developer, libraries like <code>plotly</code>, <code>pyecharts</code>, <code>bokeh</code>, and <code>folium</code> can help you generate interactive charts and maps within Python environment. Next question is how to embed those
interactive charts into your final work.
</p>
<p>
The first thing is to use your chosen library/ online tool to export a standalone webpage that includes your chart. The webpage may come along with other auxiliary files like Javascript and CSS. You need to put those files all in one folder. Then use
your browser to visit the webpage and make sure the chart looks normal as a standalone project. After that, ou can apply the same technique used from above responsive Youtube video to embed it into your web story Just use the following code block
and replace the "src" attribute with the right path to your stand alone interactive chart.
</p>
<p>
<code><responsive-block><iframe src='//server-name/path/to/the/file.html' frameborder='0' allowfullscreen></iframe></responsive-block></code>
</p>
<p> Here is an example of a map made from Python's <code>folium</code> library. It is the original hi-fi version of the raster image used in <a href="https://mp.weixin.qq.com/s/aFfa7WlyT0vwXBlDYvacCg">this blog post</a>. Although the following one is
not interactive or animated, you can easily make it so from the <code>folium</code> library. </p>
<responsive-block>
<iframe src='charts/openrice-sichuan-food/map.html' frameborder='0' allowfullscreen>
</iframe>
</responsive-block>
<p>
Following is an animated and interactive map of Sichuan's earthquake in past 100 years. It is made by D3. The project includes many auxiliary files to make the chart work. We'd like to show you that the responsive block works with not only charts on your
local disk, but also charts (more precisely HTML pages) from the Internet. Note, in the "src" attribute, <strong>please start your URL with "//"</strong>, not "http", or "https". This notation lets the browser determine which protocol
to use and improves compatibility.
</p>
<responsive-block>
<iframe src='//hupili.net/20170800-sichuan-earthquake-in-100years/' frameborder='0' allowfullscreen>
</iframe>
</responsive-block>
<p>
Note that the default aspect ratio is 16:9. Sometimes, 1:1 may look better on a vertical screen. Or, you can try 4:3, whose code is available in HTML comment block. Other aspect ratios are not suggested since this is a starter's template.
</p>
<ratio-1-to-1>
<responsive-block>
<iframe src='//hupili.net/20170800-sichuan-earthquake-in-100years/' frameborder='0' allowfullscreen>
</iframe>
</responsive-block>
</ratio-1-to-1>
<!--
<ratio-4-to-3>
<responsive-block>
<iframe src='//hupili.net/20170800-sichuan-earthquake-in-100years/' frameborder='0' allowfullscreen>
</iframe>
</responsive-block>
</ratio-4-to-3>
-->
<h2>This page on desktop?</h2>
<p>It does not use up the entire space on a desktop computer. However it is still readable. Now that 80% traffic is on mobile web, this should suffice for most web stories. Also note that, you just learned HTML 10 minutes ago and this is what you can
make.
</p>
<h2>Epilogue</h2>
<p>Have fun.</p>
<p>Find the GitHub repo <a href="https://github.com/hupili/big-road">here</a>.</p>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-37311363-17"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-37311363-17');
</script>
</body>
</html>