-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (202 loc) · 9.48 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to use Yeoman - a modern workflow toolset</title>
<meta name="description" content="A simple tutorial to introduce how to use the modern workflow toolset, Yeoman, for modern web developement">
<meta name="author" content="Cloud (Shih-Chang) Chen ">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Yeoman</h1>
<h3>Modern web development with modern workflow</h3>
<p>
<small>Created by <a href="http://facebook.com/tw.sinergy">Cloud Chen</a> / <a href="http://twitter.com/twCloudChen">@twCloudChen</a></small>
</p>
</section>
<section>
<h2>Why Yeoman?</h2>
</section>
<section data-markdown>
##Prerequirements
Before you get started to use yeoman, you got have it installed on your machine. Make sure you have [Node.js](http://nodejs.org/) and [Git](http://git-scm.com/) installed before installing yeoman.
- - -
 
</section>
<section>
<section data-markdown>
## Installation
Once you have Node.js run on your machine, use the following command to install yeoman:
```html
<pre><code contenteditable>npm install -g yo grunt-cli bower</code></pre>
```
The command above will install 3 tools on your machine:
1. yo
2. grunt-cli (grunt command line interface)</li>
3. bower
</section>
</section>
<section>
<section data-markdown>
## Step into your first web app
Make a new directory for your web applicaiton, then use the following command to create it:
```html
<pre><code>yo webapp</code></pre>
```
</section>
<section data-markdown>
After execue the `yo webapp` command, it tells you to run both `npm install` & `bower install` to install the related dependencies:
Just follow the notification and run both the commands seperately.
```html
<pre><code>npm install</code></pre>
```
```html
<pre><code>bower install</code></pre>
```
</section>
<section data-markdown>
While complete all the steps above, you might get these files and folders under your root directory (the directory you run 'yo webapp' command.)
Where we are going to edit the files are all located in the __app__ directory.
</section>
</section>
<section>
<section data-markdown>
## Architecture of app folder
The image below display the architecture of the app directory while you first create it.
</section>
</section>
<section>
<section data-markdown>
## Files & Folders
* 404.html : Returned HTML to users when 'File not Found'
* index.html : The entry page of the website
* robots.txt : Avoid the search engine to index sensitive page for your site
* images : Put all your images here
* scripts : JavaScripts located here
* styles : CSS (Cascading Style Sheet) files located here
* favicon.ico : Icon displayed for bookmark
</section>
<section data-markdown>
## Traditional 404 page
The traditonal HTTP 404 response will lead you to a page looks like:
### It sucks!
</section>
<section data-markdown>
## Modern 404 page
You can make a better UI/UX for users by design your 404 page like:
### Better!
</section>
<section data-markdown>
## robots.txt
A __robots.txt__ restricts access to your site by search engine robots that crawl the web. These bots are automated, and before they access pages of a site, they check to see if a robots.txt file exists that prevents them from accessing certain pages. Check [this page](http://support.google.com/webmasters/bin/answer.py?hl=zh-Hant&answer=156449) for more detail information.
</section>
<section data-markdown>
## Images in one place
Put all your images in one place for easy management and later image optimization step.
</section>
</section>
<section data-markdown>
## 3rd-party library installation
For you guys who want to use other libraries which yeoman did not include them by default, you could install them through _bower_.
For example, we use a parallax scrolling library called [Skrollr](https://github.com/Prinzhorn/skrollr) for our official website. We could install it through bower by following steps:
```html
<pre><code>bower search skrollr</code></pre>
```
Once bower found this package, you can easily installed it by:
```html
<pre><code>bower install skrollr</code></pre>
```
</section>
<section>
<section data-markdown>
## Build production version of your site
Before uploading & releasing you site, there are some optimization steps that makes your website get better performance so better UX.
* Optimize images by removing useless headers.
* Minify the CSS, javaScript, HTML files by removing useless spaces, replacing long variable names.
* Concatenate CSS, javaScript files into single one file to minimize the HTTP request number.
* ...etc
</section>
<section data-markdown>
## Grunt do these tasks for you
Grunt do the repeatitive tasks for you automatically, so that will save lots of time for you to do the real code work. To create the final, optimized website, just use the following grunt command:
```html
<pre><code>grunt build</code></pre>
```
Yeoman defined a __build__ task of Grunt for you by default. Sweet!
</section>
</section>
<section data-markdown>
## Detail of Libraries
1. Grunt : [http://gruntjs.com](http://gruntjs.com)
2. bower : [https://github.com/twitter/bower/](https://github.com/twitter/bower/)
4. Skrollr : [https://github.com/Prinzhorn/skrollr](https://github.com/Prinzhorn/skrollr)
3. solid intro to _bower_ : [http://goo.gl/bOuwi](http://goo.gl/bOuwi)
</section>
<section>
<h1>THE END</h1>
<h3>BY Cloud (Shih-Chnag) Chen</h3>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
width: 1024,
height: 768,
// width: 1366,
// height: 768,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-3263672-5'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>