1
00:00:09,856 --> 00:00:10,996
>> Good evening everyone.

2
00:00:11,296 --> 00:00:15,416
Tonight I will be briefly
discussing responsive design --

3
00:00:16,106 --> 00:00:19,286
responsive HTML design -- and
I will run through an example

4
00:00:19,286 --> 00:00:24,706
with a plugin -- a JQuery plugin
-- that is called Masonry.

5
00:00:25,056 --> 00:00:26,456
It is a plugin that I know now,

6
00:00:26,456 --> 00:00:27,956
but I'm sure there
are other plugins

7
00:00:28,706 --> 00:00:31,006
with other libraries
and so forth.

8
00:00:31,756 --> 00:00:35,876
So what I intend to do with
this example is to start

9
00:00:35,876 --> 00:00:38,976
with a blank file and start
writing the code from scratch

10
00:00:38,976 --> 00:00:42,256
so you can see how I
can accomplish this

11
00:00:42,256 --> 00:00:43,426
responsive design.

12
00:00:44,096 --> 00:00:45,396
But before I do so, I would

13
00:00:45,396 --> 00:00:48,976
like to define what
responsive design is.

14
00:00:49,296 --> 00:00:51,896
Responsive HTML design
is basically

15
00:00:52,686 --> 00:00:55,856
that which entails designing
your elements in such a way

16
00:00:55,856 --> 00:00:59,806
that once the viewport
or the screen --

17
00:01:00,216 --> 00:01:04,146
the viewport of your
screen, of the device view --

18
00:01:04,526 --> 00:01:08,416
is changed, then the elements
will reorder themselves

19
00:01:08,416 --> 00:01:11,686
in a fashion that suits that
device or that viewport.

20
00:01:13,456 --> 00:01:16,156
And you will see,
through this example,

21
00:01:16,156 --> 00:01:18,436
how this appears visually.

22
00:01:19,846 --> 00:01:24,476
So I will begin by
writing some code.

23
00:01:24,476 --> 00:01:25,826
I will start with a blank file.

24
00:01:29,196 --> 00:01:32,206
Before I do this, though,
here is the website

25
00:01:32,306 --> 00:01:35,036
for the Masonry plugin.

26
00:01:35,546 --> 00:01:43,606
You can find this at
masonry.desandro.com/index.html.

27
00:01:44,576 --> 00:01:47,706
As you can see, you
can click on this link,

28
00:01:48,456 --> 00:01:51,706
which will download the
library -- the Masonry library.

29
00:01:52,066 --> 00:01:53,496
In addition to this,
you will need

30
00:01:53,496 --> 00:01:56,756
to all ready have loaded
the main JQuery library.

31
00:01:56,756 --> 00:02:00,556
You can do this from a local
installation or a local copy

32
00:02:00,556 --> 00:02:04,826
that you might have, or
through the reference to a CDN,

33
00:02:06,006 --> 00:02:06,966
content delivery network.

34
00:02:07,086 --> 00:02:09,846
A very popular one is Google.

35
00:02:10,156 --> 00:02:14,036
Google hosts JQuery on
one of their servers.

36
00:02:14,586 --> 00:02:19,896
And on the left side you can see
that there are plenty of demos

37
00:02:19,896 --> 00:02:24,346
and there is documentation on
the options for this as well

38
00:02:24,346 --> 00:02:25,466
as the methods involved.

39
00:02:25,986 --> 00:02:29,346
Okay, I have all ready
gone through some of this

40
00:02:29,346 --> 00:02:31,506
so I know a little bit more
than you do at this point.

41
00:02:31,506 --> 00:02:34,566
I will start by writing
some code

42
00:02:35,306 --> 00:02:37,856
and then we'll see
what that does.

43
00:02:38,396 --> 00:02:43,746
Okay, I will start with a
blank file called index.php.

44
00:02:44,116 --> 00:02:47,226
And I want this to
be an HTML 5 file.

45
00:02:50,576 --> 00:02:51,976
Oops -- sorry.

46
00:03:01,276 --> 00:03:01,446
Okay.

47
00:03:02,136 --> 00:03:06,786
And then, next, I'll
define the head and title.

48
00:03:12,546 --> 00:03:18,106
Now, this is not indented, but
in your projects, you will need

49
00:03:18,106 --> 00:03:19,336
to indent your markup.

50
00:03:19,376 --> 00:03:22,766
I can go ahead and
do this anyway.

51
00:03:34,306 --> 00:03:38,286
Okay, so I have a
basic HTML file now.

52
00:03:39,226 --> 00:03:43,666
Can someone recommend or
suggest what I should do next?

53
00:03:47,556 --> 00:03:50,946
Think about including libraries
and where would I include them?

54
00:03:55,086 --> 00:03:59,896
Okay, let's go back to the
JQuery Masonry page and look

55
00:03:59,896 --> 00:04:02,056
at the -- click on
the introduction link.

56
00:04:03,256 --> 00:04:08,296
And they make it pretty easy
for us to do this ourselves.

57
00:04:09,216 --> 00:04:12,736
And the way it works is
that you define a container,

58
00:04:12,736 --> 00:04:18,136
a div container, whereby
you insert other sub divs

59
00:04:18,956 --> 00:04:23,216
and those divs will
host your content.

60
00:04:24,556 --> 00:04:25,756
And in order to make
this work --

61
00:04:25,756 --> 00:04:28,256
in order to actually have
the library available,

62
00:04:28,716 --> 00:04:32,486
we need to reference the --

63
00:04:33,076 --> 00:04:34,126
First of all, we need

64
00:04:34,126 --> 00:04:37,296
to reference the JQuery
library from a CDN.

65
00:04:38,056 --> 00:04:40,616
If I can copy this.

66
00:04:41,076 --> 00:04:43,916
Okay. I'll copy this
and paste it

67
00:04:43,916 --> 00:04:46,546
in my head script
-- in my head text.

68
00:04:51,726 --> 00:04:54,316
Okay. So this first --

69
00:04:55,026 --> 00:04:58,716
this first script is
the main JQuery script

70
00:04:58,716 --> 00:04:59,516
that will be loaded here.

71
00:04:59,936 --> 00:05:02,846
And the second script is
the actual Masonry library.

72
00:05:03,386 --> 00:05:06,126
I have, conveniently, all
ready downloaded this library.

73
00:05:06,126 --> 00:05:06,936
It's just a file.

74
00:05:06,936 --> 00:05:10,416
And I have renamed
it to masonry.js.

75
00:05:10,536 --> 00:05:15,056
So the way I would refer to it
here is just simply delete all

76
00:05:15,056 --> 00:05:20,076
of this text and
call this masonry --

77
00:05:20,896 --> 00:05:22,486
lower case masonry -- .js.

78
00:05:22,976 --> 00:05:27,856
So at this point, if I
were to load this page,

79
00:05:28,416 --> 00:05:30,196
I really should have nothing,

80
00:05:30,196 --> 00:05:32,386
but the libraries
should be loaded.

81
00:05:37,256 --> 00:05:41,656
Okay, the next step here is
to -- per the documentation --

82
00:05:41,776 --> 00:05:50,176
is to create a div container
with a bunch of divs inside it.

83
00:05:50,796 --> 00:05:51,886
And this is what I will do next.

84
00:05:56,546 --> 00:05:58,466
And I will give it
an ID of container,

85
00:05:58,956 --> 00:05:59,886
and this is arbitrary.

86
00:05:59,886 --> 00:06:01,846
It's just -- you can call
it whatever you like.

87
00:06:03,756 --> 00:06:06,906
And let's suppose that
I want to display --

88
00:06:07,996 --> 00:06:10,376
well, before I put
in any content,

89
00:06:10,696 --> 00:06:11,906
let's see what else we need

90
00:06:11,906 --> 00:06:14,816
to do here based on
the documentation.

91
00:06:15,326 --> 00:06:17,706
So it seems like there
are some CSS rules

92
00:06:17,836 --> 00:06:18,936
that I need to apply as well.

93
00:06:22,146 --> 00:06:25,776
Making the width of the item
220 px, which is roughly a fifth

94
00:06:25,776 --> 00:06:31,336
of a common desktop viewport
and width, and margin is

95
00:06:31,336 --> 00:06:34,456
to have 10 px, to have
some space on the left

96
00:06:34,456 --> 00:06:36,316
and on the right and on
top and bottom, of course.

97
00:06:36,936 --> 00:06:38,536
And float is to have
the item floated.

98
00:06:39,416 --> 00:06:44,386
I'm going to copy this
and paste it under --

99
00:06:44,386 --> 00:06:48,236
well, I don't have any style
tags here, so let's go ahead

100
00:06:48,496 --> 00:06:55,186
and start off with a style tag.

101
00:06:55,696 --> 00:06:55,866
Sorry.

102
00:07:01,376 --> 00:07:02,486
Text. CSS.

103
00:07:02,906 --> 00:07:09,536
And this is where
I put my rules.

104
00:07:16,216 --> 00:07:19,816
Now, notice that the actual
class that this is referring

105
00:07:19,816 --> 00:07:25,356
to is called item and this
is what I will need to label

106
00:07:25,466 --> 00:07:27,646
or stamp my sub divs with.

107
00:07:29,166 --> 00:07:34,526
So, suppose I create
an item here.

108
00:07:36,426 --> 00:07:38,796
It will need to have
a class of item.

109
00:07:44,116 --> 00:07:46,506
Okay, let's see what else
the documentation calls for.

110
00:07:49,586 --> 00:07:54,026
Okay, it calls for
a function to be run

111
00:07:55,426 --> 00:07:58,746
and a built-in masonry
method to be called.

112
00:07:59,266 --> 00:08:03,576
>> Is it possible for you
to zoom in on that page?

113
00:08:03,576 --> 00:08:06,566
>> I'm not sure I
know how to do, ma'am.

114
00:08:06,566 --> 00:08:06,633
>> Oh. [Inaudible]

115
00:08:07,396 --> 00:08:08,696
>> But I am going
to copy this code

116
00:08:08,696 --> 00:08:12,516
so you will be able to see it.

117
00:08:12,516 --> 00:08:15,936
Okay, so I've done -- so
the first script tag calls

118
00:08:15,936 --> 00:08:17,916
for the main JQuery
library to be loaded.

119
00:08:18,066 --> 00:08:20,436
The second one calls for the
masonry library to be loaded.

120
00:08:20,916 --> 00:08:25,066
And the third script tag will
have our own custom codes --

121
00:08:26,426 --> 00:08:27,436
everything we need to put here.

122
00:08:31,246 --> 00:08:33,616
I'm going to make this law
visually more appealing.

123
00:08:40,246 --> 00:08:40,356
Oops.

124
00:08:54,736 --> 00:08:58,536
Okay, so we are basically
ready to go with this page,

125
00:08:58,536 --> 00:09:04,586
except that we don't have
any items here to show.

126
00:09:04,886 --> 00:09:07,146
And I would like to
show some images.

127
00:09:07,146 --> 00:09:08,646
I grabbed some earlier on.

128
00:09:08,686 --> 00:09:12,156
Before class I grabbed some
image URLs off the internet.

129
00:09:13,366 --> 00:09:16,486
And I plan on displaying
those images here.

130
00:09:17,466 --> 00:09:19,326
So I will open an image tag.

131
00:09:19,606 --> 00:09:24,756
Image and SRC equals to

132
00:09:29,426 --> 00:09:34,216
And this should -- so the image
URL should be contained here

133
00:09:34,216 --> 00:09:35,926
between those two,
between these two quotes.

134
00:09:36,226 --> 00:09:41,236
And I have pasted some image
URLs in a separate file.

135
00:09:45,556 --> 00:09:46,916
I'm going to copy this one.

136
00:09:48,306 --> 00:09:48,986
Paste it here.

137
00:09:49,636 --> 00:09:54,976
And then I will do the same

138
00:10:07,056 --> 00:10:08,516
Let me grab the other image URL.

139
00:10:11,806 --> 00:10:13,006
Copy. Oops.

140
00:10:14,506 --> 00:10:18,476
And we will paste it in here.

141
00:10:18,756 --> 00:10:23,496
So now I should have,
if I paste it here,

142
00:10:23,496 --> 00:10:27,626
I should have two images
appearing on this page

143
00:10:27,626 --> 00:10:29,136
if all works correctly.

144
00:10:29,626 --> 00:10:32,166
And I do have two images.

145
00:10:33,106 --> 00:10:36,446
Now, I need to resize these
images to fit the grid layout

146
00:10:36,446 --> 00:10:38,876
that will be applied
by the masonry plugin.

147
00:10:39,886 --> 00:10:44,246
And I think the best way to do
this is to just resize the image

148
00:10:44,246 --> 00:10:47,556
to fit the column, because this
will be divided essentially

149
00:10:47,556 --> 00:10:50,996
into five 220 pixel
pieces or columns.

150
00:10:53,416 --> 00:10:58,636
Now, I can do this simply
by going to the style rules

151
00:10:58,636 --> 00:11:02,786
and adding a new style
rule for the images.

152
00:11:03,776 --> 00:11:09,236
And I will make sure that
my images are with 220 px.

153
00:11:15,516 --> 00:11:17,366
Okay, now I have two
images next to one another.

154
00:11:18,806 --> 00:11:23,866
Let's see if we can replicate
this code to have more images

155
00:11:24,656 --> 00:11:28,336
and then maybe you can
appreciate the usefulness

156
00:11:28,336 --> 00:11:30,206
of responsive layouts.

157
00:11:30,506 --> 00:11:36,196
I'm going to copy these same
two images over and over --

158
00:11:37,426 --> 00:11:41,636
just enough to span across the
page and down a little bit.

159
00:11:48,496 --> 00:11:49,816
Perhaps one more
time should do it.

160
00:11:56,046 --> 00:11:56,976
Okay, let's see what
happens now.

161
00:12:01,506 --> 00:12:02,976
Okay, so I have a
bunch of images.

162
00:12:44,516 --> 00:12:46,516
Okay, I'm trying not to
show you the prefab code

163
00:12:46,696 --> 00:12:51,966
because then it will be maybe
harder to see what I'm doing.

164
00:13:10,466 --> 00:13:13,196
Okay, what should happen here
if I did this correctly is

165
00:13:13,196 --> 00:13:16,906
that when I squeeze this
over, the images will align

166
00:13:18,116 --> 00:13:20,926
with respective to
the new viewport.

167
00:13:21,866 --> 00:13:26,406
So, as you can see, the
closer I squeeze this in,

168
00:13:28,356 --> 00:13:34,056
the more the divs
align correctly

169
00:13:35,156 --> 00:13:35,896
or they squeeze together.

170
00:13:46,286 --> 00:13:49,016
There is an option that
I can include in this

171
00:13:49,166 --> 00:13:53,116
in the Masonry call, which
is called "is animated"

172
00:13:53,246 --> 00:13:54,736
and which makes it
much more appealing.

173
00:13:55,596 --> 00:13:57,216
And I can set that to true.

174
00:14:00,266 --> 00:14:03,506
And let's see what
this does on our end.

175
00:14:03,966 --> 00:14:06,126
I'm going to refresh.

176
00:14:06,756 --> 00:14:08,196
I'm not sure why
these are overlapping.

177
00:14:12,046 --> 00:14:12,976
So let's see if this works.

178
00:14:15,646 --> 00:14:17,216
As you can see, there
is a little --

179
00:14:18,446 --> 00:14:19,186
they are animating now.

180
00:14:35,356 --> 00:14:38,926
Okay, now I can copy and paste
some existing code I created

181
00:14:39,016 --> 00:14:42,186
for this, which is
essentially the same code,

182
00:14:42,186 --> 00:14:43,556
but I have added
some new features --

183
00:14:45,286 --> 00:14:51,176
one very simple feature, which
is -- let me refresh this.

184
00:14:51,496 --> 00:14:54,126
So, I have added here two links.

185
00:14:54,896 --> 00:14:59,156
Each one will call a separate
method that will create,

186
00:14:59,376 --> 00:15:02,696
grab a random image and
append it or prepend it

187
00:15:03,016 --> 00:15:06,976
to this document
-- to this thumb.

188
00:15:08,206 --> 00:15:13,146
And then it will call the
Masonry reload function,

189
00:15:13,336 --> 00:15:16,986
which rearranges the items
based on their new viewport.

190
00:15:17,626 --> 00:15:21,606
Let me just quickly show
you what I'm doing here.

191
00:15:22,546 --> 00:15:24,766
So there is a function
called get random image,

192
00:15:24,766 --> 00:15:27,466
and what it does is it
creates a new image array.

193
00:15:28,696 --> 00:15:31,166
And here, I am storing
three different images

194
00:15:31,446 --> 00:15:34,796
and then I am generating
a random image each time.

195
00:15:35,346 --> 00:15:40,956
I first generate a number
from zero to two randomly,

196
00:15:41,896 --> 00:15:43,926
and then I assign that.

197
00:15:44,716 --> 00:15:51,326
I pull out that image based
on its position in the array.

198
00:15:51,456 --> 00:15:54,536
And there is another function
I created called append image,

199
00:15:55,016 --> 00:15:57,826
and what this does is first
calls the get random image,

200
00:15:57,826 --> 00:16:00,546
which shuffles the --
which pulls a new image --

201
00:16:01,796 --> 00:16:06,286
and then it appends this
following HTML markup

202
00:16:07,446 --> 00:16:09,076
to the container div.

203
00:16:10,376 --> 00:16:13,256
And, lastly, it applies
the calls the Masonry --

204
00:16:13,656 --> 00:16:14,746
dot Masonry reload --

205
00:16:16,016 --> 00:16:18,296
dot Masonry method with
the parameter reload,

206
00:16:19,166 --> 00:16:23,326
which makes the page
reload -- not really reload,

207
00:16:23,376 --> 00:16:29,596
but it just adjusts the
elements to the new viewport.

208
00:16:30,846 --> 00:16:32,916
Prepend does the
same thing except

209
00:16:32,916 --> 00:16:35,246
that it inserts the
object or the div,

210
00:16:35,246 --> 00:16:39,946
the image div, first
into the dump.

211
00:16:41,016 --> 00:16:42,586
So let me show you what
this looks like in action.

212
00:16:44,436 --> 00:16:48,896
If I click on append
image over and over,

213
00:16:48,896 --> 00:16:50,426
it's getting a random image.

214
00:16:50,636 --> 00:16:53,756
It so happened that the first
three times were the same one.

215
00:16:58,396 --> 00:17:03,396
And if I click on prepend image,
it will start inserting it

216
00:17:03,506 --> 00:17:04,296
at the very beginning.

217
00:17:14,736 --> 00:17:17,396
And this, the resizing of
the window, still applies.

218
00:17:17,506 --> 00:17:22,536
Each time I squeeze
it, it adjusts.

219
00:17:24,186 --> 00:17:26,646
So, basically, this
is what I wanted

220
00:17:26,646 --> 00:17:28,846
to demonstrate tonight
in today's section.

221
00:17:29,866 --> 00:17:31,136
This is a shorter section,

222
00:17:31,376 --> 00:17:36,736
but it's been slated
for TA's choice.

223
00:17:38,606 --> 00:17:41,186
And this is just
a small part of --

224
00:17:41,186 --> 00:17:43,576
I'm sure there is lots you
can do with responsive design.

225
00:17:44,066 --> 00:17:46,476
This is just a small
example of it.

226
00:17:46,476 --> 00:17:48,396
Feel free to Google around
the internet and search

227
00:17:48,446 --> 00:17:53,336
for other libraries and other
things that you can do with it.

228
00:17:53,666 --> 00:17:59,086
And this concludes
our semester as well.

229
00:18:00,366 --> 00:18:04,356
And, Chris, would
you like to say a bit

230
00:18:04,416 --> 00:18:05,176
for a while as well with me?

231
00:18:10,496 --> 00:18:14,396
So, Chris Gerber will be holding
on-campus office hours now.

232
00:18:15,386 --> 00:18:17,956
And since he is here, I'm
taking this opportunity to --

233
00:18:19,136 --> 00:18:20,546
would you like to say something?

234
00:18:20,546 --> 00:18:20,726
>> Thank you.

235
00:18:20,976 --> 00:18:22,816
Well, I would just
like to thank everyone

236
00:18:22,816 --> 00:18:25,816
for their attention this
year and for coming out.

237
00:18:25,816 --> 00:18:27,626
It has been a lot of fun
working with all of you,

238
00:18:28,046 --> 00:18:30,506
especially for those of you
we haven't met in person,

239
00:18:30,506 --> 00:18:32,816
just the discussions on
the discussion board --

240
00:18:33,286 --> 00:18:34,076
it's really been great.

241
00:18:34,076 --> 00:18:36,016
I hope that you have all taken
away a lot from the class

242
00:18:36,016 --> 00:18:37,706
and that you have enjoyed
it as much as we have.

243
00:18:38,396 --> 00:18:38,716
Thank you.

244
00:18:39,316 --> 00:18:39,946
>> Yeah. Thank you.

245
00:18:41,516 --> 00:18:45,500
[ Applause ]