forked from hakimel/reveal.js
/
index.html
361 lines (326 loc) · 14.6 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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>I want a Site - Web Design with Xenia</title>
<meta name="description" content="WaterlUX Web Design Talk in Spring 2014">
<meta name="author" content="Xenia Tay">
<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', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</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>I want a site</h1>
<aside class="notes">
Hi!!! Welcome to the first meeting of WaterlUX.<br>
I'm Xenia, and today, I'll be talking about how to set up your own basic site from start to end.<br>
I will be exploring options you have - based on:<br>
- How much you want to pay<br>
- How much dev freedom you want to have
</aside>
</section>
<section>
<p>(づ。◕‿‿◕。)づ</p>
<aside class="notes">
A little bit about me for context:<br>
I'm in 4th year CS, with a minor in Fine Arts.<br>
I've previously done 5 co-op terms in web development, and built countless side-project websites, including Velocity, Math Orientation, CUSEC 2014.<br>
</aside>
</section>
<section>
<h2>Disclaimer</h2>
<blockquote class="fragment">"I don't know what I don't know."</blockquote>
<aside class="notes">
The information I'm about to present is from pure personal experience<br>
Through side projects, word of mouth, co-ops (startups - closer to the deployment process).<br>
This is all googleable, but oftentimes people don't know where to start.<br>
"I don't know what I don't know" - now you will know :)<br>
</aside>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h1>A Basic Site</h1>
<aside class="notes">
So - what makes up a basic site?
</aside>
</section>
<section>
<h1>1. Domain</h1>
<aside class="notes">
You have your domain: web URl.<br>
- Most people have firstname-lastname.com<br>
- xeniatay.com, xtay.me<br>
</aside>
</section>
<section>
<h1>2. Hosting</h1>
<aside class="notes">
Hosting: where all of your data is stored<br>
</aside>
</section>
<section>
<h1>3. Look and Feel</h1>
<aside class="notes">
Look and Feel: most exciting part for most people, but also the most time consuming.<br>
So these three things make up a basic site. <br>
And now, we will drill down on the domain. One of the biggest concerns with buying a domain:<br>
</aside>
</section>
</section>
<section>
<section>
<h1>$_$</h1>
<aside class="notes">
- Money<br>
So how much does a domain actually cost?
</section>
<section>
<img src="img/godaddy_domain.png">
<aside class="notes">
Well, I bought my first domain name for a hefty price of one dollar and forty-two cents.
</aside>
</section>
<section>
<img src="img/fbdotcom.png">
<aside class="notes">
However, Facebook paid a cool 8.5million dollars for Fb.com.
</aside>
</section>
<section>
<p>An average domain costs $10 - $15 a year</p>
<aside class="notes">
The truth is, an average domain costs $10 - $15 a year.
</aside>
</section>
<section>
<h1>GoDaddy?</h1>
<img class="fragment" src="img/godaddy_spam.png">
<aside class="notes">
I had gotten my first domain from GoDaddy at a steal - it was a crazy one-year deal, and was worth every cent.<br>
However, my experience with GoDaddy was less than ideal. <br>
It was messy, difficult to navigate, and they sent CRAZY amounts of spam. <br>
At one point, they called to ask about my experience.
</aside>
</section>
<section>
<h1>GoDaddy?</h1>
<img class="fragment" src="img/grumpycat.png">
<aside class="notes">
Eventually, when my one-year deal ran out, I switched to a different domain provider, also spurred by the huge SOPA scandal that GoDaddy had.
</aside>
</section>
<section>
<h1>Hover.com</h1>
<p class="fragment">10/10 highly recommend <br>ᕦ(ò_óˇ)ᕤ</p>
<aside class="notes">
And I am MUCH happier with life.<br>
Hover.com is AMAZING.<br>
Clean, sleek, they do not bombard you with aggressive emails every other day and are a dream to work with.<br>
They have really good documentation on how to link their domains up with other hosting providers, which is awesome!
</aside>
</section>
<section>
<h2>Acquiring a Domain</h2>
<ul>
<li>Sign up with a domain provider (Hover.com)</li>
<li>Pick a name</li>
<li>Check out and pay $$$</li>
</ul>
<aside class="notes">
So just to reiterate: here are the steps of getting your own domain:<br>
[read slides]
</aside>
</section>
<section>
<h1>Alternatives</h1>
<p class="fragment">(Free)</p>
<aside class="notes">
But here are some free options - they require even less effort and are customizable at the same time.
</section>
<section>
<ul>
<li><code>xeniatay.wordpress.com</code></li>
<li><code>xeniatay.tumblr.com</code></li>
<li>Github Pages:</li>
<code>xeniatay.github.io</code>
<code>xeniatay.github.io/WaterlUX-Web-Design-Talk</code>
<li class="fragment">
<strike>xanga, livejournal, myspace</strike>
</li>
</ul>
<aside class="notes">
These are pretty self explanatory - you always have the option of hosting your sites on Wordpress on Tumblr for free. GitHub Pages is a really good option if your site is versioned on Github anyway.
</aside>
</section>
</section>
<section>
<section>
<h2>Hosting</h2>
<aside class="notes">
There are a lot of different options for site hosting
Here are some of the more common services and some comparisons within each of them
</aside>
</section>
<section>
<h2>Shared Hosting</h2>
<aside class="notes">
Shared Hosting refers to a partition on a master web server. This means that you own a little slice of some company's server, but you do not have complete permissions and control over it.<br>
Many shared hosting services vary in features. Some of them may only allow basic file transfer through an FTP client, so you have to copy and paste from your local computer to the remote server.<br>
Other services might allow SSH access (pay extra?), or they might have Git pre-installed. This all depends on the individual service, and is rarely listed anywhere - you really have to start paying and using the server to figure out what you can and cannot do.<br>
The biggest problem with shared hosting is that you are never allowed sudo access. This makes it very difficult to install services or frameworks through the ssh terminal, so if you're looking to do that kind of stuff, shared hosting isn't for you.<br>
One thing shared hosting is really good for is installing basic CMS like Wordpress. Shared hosting may be restrictive, but they also provide pre-installed tools like CPanel, PHPMyAdmin, which are all services you can use to manage your database through their web application. This is good for people who don't want to fiddle with the command line.<br>
</aside>
</section>
<section>
<h2>Shared Hosting Examples</h2>
<ul>
<li>GoDaddy: <strike>$7.99</strike> $3.99/month <em>(sale right now!)</em></li>
<li>Lunarpages: $9/month + <em>extra for SSH and other features</em></li>
<li>Media Temple: $20/month, includes email forwarding etc.</li>
<li>Site5: $5 - $12/month</li>
</ul>
<aside class="notes">
So here are some examples of shared hosting services and their pricing plans. Again, it's pretty difficult to differentiate between them, but some important things are email aliases, SSH, price and web user interface.
</aside>
</section>
<section>
<h2>Dedicated Hosting</h2>
<aside class="notes">
Dedicated hosting is the level up from shared hosting. Dedicated hosting gives you complete freedom over your own server. This is suitable for people who are building richer web apps, with custom frameworks, databases, etc.<br>
It requires a lot of fiddling around with the command line and permissions, so is definitely not for people who aren't familiar with that. However, if you are, I highly recommend it, because it's about the same price and offers that much more flexibility.<br>
Here's an example to illustrate the difference between Shared and Dedicated hosting:
</aside>
</section>
<section>
<h3>Installing Wordpress on Shared Hosting</h3>
<ol>
<li>Download and upload Wordpress onto server (FTP)</li>
<li>Create a database and MySQL User through CPanel/PHPMyAdmin</li>
<li>Run Wordpress install by accessing site URL</li>
</ol>
</section>
<section>
<h3>Installing Wordpress on Dedicated Hosting</h3>
<p><em>Note: this is for a fresh server</em></p>
<ol>
<li>Configure Root Login</li>
<li>Configure SSH Access</li>
<li>Install LAMP (Linux, Apache, MySQL, PHP)</li>
<li>Set up phpMyAdmin</li>
<li>Download Wordpress onto server (wget)</li>
<li>Create a database and MySQL User</li>
<li>Run Wordpress install by accessing site URL</li>
</ol>
</section>
<section>
<h2>Dedicated Hosting examples</h2>
<ul>
<li>Digital Ocean: $5/month or $0.007/hour</li>
<li>Heroku: "scales with you", $0.05/dyno-hour</li>
<li>AWS: 1 year free!</li>
<li>Linode: $20/month</li>
<aside class="notes">
So if the previous example didn't scare you away, dedicated hosting is for you!<br>
Again, each different service has its own features and quirks, it's up to you to research and find the one that suits you best.<br>
I personally use Digital Ocean, and have used Heroku at work - both are pretty sweet to work with, after you get past the hassle of the initial setup.
</aside>
</section>
<section>
<h2>Alternatives</h2>
<ul class="fragment">
<li>Wordpress: $8/year</li>
<li>Tumblr: ~free~</li>
<li>Github Pages: ~free~</li>
</ul>
<p class="fragment"><em>For use with a custom domain</em></p>
<aside class="notes">
Of course, just like domains, hosting has free options too! These are for use with a custom domain, but are lot more restricted (no database, or stuck to WP).
</aside>
</section>
</section>
<section>
<section>
<h1>Look and Feel</h1>
<aside class="notes">
And finally, we're on to look and feel.<br>
The most important thing about look and feel is that a lot of people, including myself, always have grand visions of their dream site and end up falling short.<br>
I always envision a blog, a portfolio, fancy online resume, slideshows and carousels and stff, custom animations.<br>
But the truth is a lot of this stuff is already built and available out there, and there's no point in inventing the wheel.<br>
I often find that it is a lot easier to design with content in mind, instead of laying out an amazing theme skeleton with nothing to fill it in.<br>
So that was just general advice regarding designing a site.
</aside>
</section>
<section>
<h2>Resources</h2>
<ul class="fragment">
<li>creativemarket.com</li>
<li>themeforest.net</li>
<li>Bootstrap, PureCSS, Skeleton, Foundation</li>
<li>SquareSpace: $8/month</li>
</ul>
<aside class="notes">
Because design is so subjective, I don't have any concrete examples for you. Instead, I have some resources that I think would be helpful, whether you are a novice developer or a super experienced frontend developer.<br>
creativemarket: example<br>
themeforest.net: example<br>
bootstrap etc: CUSTOMIZE IT<br>
squarespace: example<br>
</aside>
</section>
</section>
<section>
<p>ヽ(´ー`)ノ</p>
<h1>End</h1>
<p>@xeniatay</p>
</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,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.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; } }
]
});
</script>
</body>
</html>