1
00:00:00,430 --> 00:00:02,340
I'm Nick Pettit.
>> I'm Jason Seifer.

2
00:00:02,340 --> 00:00:04,600
>> And you're watching the Tree House
Show, your weekly dose of

3
00:00:04,600 --> 00:00:08,200
internets, where we talk about all things
web design, web development, and more.

4
00:00:08,200 --> 00:00:09,910
>> In this episode, we'll be talking
about

5
00:00:09,910 --> 00:00:14,690
Origami, HTML5 game development, form
labels, and more.

6
00:00:14,690 --> 00:00:15,689
>> Let's check it out.

7
00:00:15,689 --> 00:00:21,050
[MUSIC]

8
00:00:21,050 --> 00:00:22,990
>> First up is Origami.

9
00:00:22,990 --> 00:00:25,980
This is a project from Facebook that works
with

10
00:00:25,980 --> 00:00:29,690
Quartz Composer on the Mac, and it can
help you

11
00:00:29,690 --> 00:00:32,710
prototype your apps before you actually
get into a

12
00:00:32,710 --> 00:00:35,740
whole bunch of coding and waste a lot of
time.

13
00:00:35,740 --> 00:00:37,740
So, here's the website for it.

14
00:00:37,740 --> 00:00:41,730
A free design pro, prototyping toolkit for

15
00:00:41,730 --> 00:00:45,960
Quartz Composer, made by the Facebook
design team.

16
00:00:45,960 --> 00:00:49,660
And basically it allows you to drag a

17
00:00:49,660 --> 00:00:52,520
bunch of nodes together in this node
editor.

18
00:00:52,520 --> 00:00:55,700
And you can add various properties to each
one.

19
00:00:55,700 --> 00:00:57,410
And then boom, look at that.

20
00:00:57,410 --> 00:01:03,970
You can prototype behavior in your app
before you have to write a ton of code.

21
00:01:03,970 --> 00:01:10,590
So it details everything that's included.
You can do all sorts of cool transitions.

22
00:01:10,590 --> 00:01:10,975
And to

23
00:01:10,975 --> 00:01:15,980
get started, you need an Apple, you need
to register as an Apple developer,

24
00:01:15,980 --> 00:01:18,983
download and install Quartz Composer and
then

25
00:01:18,983 --> 00:01:22,400
you need to download and install Origami.

26
00:01:22,400 --> 00:01:24,880
So if you want to try a new way

27
00:01:24,880 --> 00:01:27,980
of prototyping apps, I highly recommend
you check it out.

28
00:01:27,980 --> 00:01:29,550
>> That is, that is so nice and save,
you

29
00:01:29,550 --> 00:01:32,360
know, just saves so much time before
actually coding all that.

30
00:01:32,360 --> 00:01:35,130
Having a meeting about it.
Okay, back to the drawing board.

31
00:01:35,130 --> 00:01:36,450
No, just pop in Origami.

32
00:01:36,450 --> 00:01:38,040
Ready to go.
>> Bam.

33
00:01:38,040 --> 00:01:40,560
>> Next up we have a project called
Molecule and

34
00:01:40,560 --> 00:01:45,180
this is pretty interesting, is an HTML 5
game development framework.

35
00:01:45,180 --> 00:01:46,800
Now this framework gives you a lot of
different

36
00:01:46,800 --> 00:01:50,000
components that you would need to use when
creating your

37
00:01:50,000 --> 00:01:53,125
own game and it uses HTML 5 as you might

38
00:01:53,125 --> 00:01:57,530
expect; from the part that says HTML 5
game framework.

39
00:01:57,530 --> 00:01:59,040
So what does it have?

40
00:01:59,040 --> 00:02:01,530
Well it's fast, lightweight, easy to learn
and

41
00:02:01,530 --> 00:02:02,490
cross platform.

42
00:02:02,490 --> 00:02:06,420
I know that because it says it all across
the type of the top of the screen.

43
00:02:06,420 --> 00:02:08,180
No, but what's really nice about it is, it
gives you a

44
00:02:08,180 --> 00:02:12,830
physics library which you really don't
need to spend time writing yourself.

45
00:02:12,830 --> 00:02:15,860
As well as animation and tile support.

46
00:02:15,860 --> 00:02:17,590
So let's check out some examples of things

47
00:02:17,590 --> 00:02:21,020
that you can do with the molecule
framework.

48
00:02:21,020 --> 00:02:22,940
So it, they, it's really nice, this site.

49
00:02:22,940 --> 00:02:24,950
They break it down into three different
sections.

50
00:02:24,950 --> 00:02:27,840
Beginner, intermediate and advanced.

51
00:02:27,840 --> 00:02:30,760
Let's check out the beginner section right
here.

52
00:02:30,760 --> 00:02:34,860
One of the basic things that you can do is
move a sprite.

53
00:02:34,860 --> 00:02:35,530
So, see that?

54
00:02:35,530 --> 00:02:38,820
We got our little character moving across
the screen right there.

55
00:02:38,820 --> 00:02:41,620
Now, what's nice about the examples on
this page is that it shows

56
00:02:41,620 --> 00:02:44,870
you all of the code you need to use to get
this working.

57
00:02:44,870 --> 00:02:46,320
Now, look at how little code that is.

58
00:02:46,320 --> 00:02:50,590
In 25 lines there, They've done a whole
animation

59
00:02:50,590 --> 00:02:52,020
of a sprite.

60
00:02:52,020 --> 00:02:53,070
Now, if you want to know what you can

61
00:02:53,070 --> 00:02:56,570
really get going here, let's check out the
advanced section.

62
00:02:57,610 --> 00:03:01,840
And look at that, it's almost like a small
Pac Man clone that they called Maze.

63
00:03:01,840 --> 00:03:04,070
And if you ask me, it's amazing.

64
00:03:06,800 --> 00:03:09,910
So anyway not so much code involved there.

65
00:03:09,910 --> 00:03:13,190
You can see they break it down into a game
function,

66
00:03:13,190 --> 00:03:16,300
player function and just have a ton of
sprites moving around here.

67
00:03:16,300 --> 00:03:18,430
Now we're not not going to go into
everything here

68
00:03:18,430 --> 00:03:21,800
but this does also work on mobile devices
as well.

69
00:03:21,800 --> 00:03:24,980
So you can check that out at
moleculejs.net, we'll

70
00:03:24,980 --> 00:03:26,110
also have a link to it in our show

71
00:03:26,110 --> 00:03:28,887
notes which you can get to at
youtube.com/gotreehouse/ or

72
00:03:28,887 --> 00:03:31,930
search for us on Itunes at the Treehouse
Show.

73
00:03:31,930 --> 00:03:32,980
You know, that's very impressive.

74
00:03:32,980 --> 00:03:35,040
It looks like they include pretty much
everything that

75
00:03:35,040 --> 00:03:39,010
you would need to create a basic HTML5
game.

76
00:03:39,010 --> 00:03:42,660
I think the thing that impresses me the
most is the tile map

77
00:03:42,660 --> 00:03:44,980
because that's actually something that
isn't

78
00:03:44,980 --> 00:03:47,975
even included with Sprite kit in iOS.

79
00:03:47,975 --> 00:03:48,183
>> Wow.

80
00:03:48,183 --> 00:03:52,733
>> And that's a very important piece
when you're trying to build like a, a side

81
00:03:52,733 --> 00:03:57,213
scroller game or a top down RPG game, so
it's nice to have that tile map there

82
00:03:57,213 --> 00:04:02,280
already prebuilt for you.
Next up is a new light box.

83
00:04:02,280 --> 00:04:04,970
I know there's a ton of light boxes out
there.

84
00:04:04,970 --> 00:04:06,730
>> Yeah, why would we cover it here?

85
00:04:06,730 --> 00:04:09,580
>> Well, this person didn't like any of
them

86
00:04:09,580 --> 00:04:13,360
and I can see why when they explain their
needs.

87
00:04:13,360 --> 00:04:16,530
They just wanted to show an image, so you
click on the image.

88
00:04:16,530 --> 00:04:20,560
The image comes up very minimal and that's
pretty much it.

89
00:04:20,560 --> 00:04:23,210
In fact they have a demo further

90
00:04:23,210 --> 00:04:27,770
down here, let's take a look at that.
So here they have this nice image gallery.

91
00:04:27,770 --> 00:04:30,100
You click and an image comes up.

92
00:04:30,100 --> 00:04:32,380
And if you click on the left or right side
of

93
00:04:32,380 --> 00:04:37,250
the image, it will actually scroll through
to the next image.

94
00:04:37,250 --> 00:04:41,440
And you can click off to the side to make
the lightbox go away.

95
00:04:41,440 --> 00:04:45,320
Now the problem with other lightboxes That
this person

96
00:04:45,320 --> 00:04:48,340
encountered was that they had a lot of
really bad

97
00:04:48,340 --> 00:04:52,930
markup or they included tons of features
that they just didn't need.

98
00:04:52,930 --> 00:04:57,970
Everybody seems to be turning to make the
ultimate light box solution that

99
00:04:57,970 --> 00:05:02,580
has absolutely everything you possibly
need, but this is a pretty lightweight,

100
00:05:02,580 --> 00:05:07,800
minimalistic jQuery plugin and it even
worked, works with jQuery1 or 2, so if

101
00:05:07,800 --> 00:05:13,780
you're still on jQuery1 it will totally
work for your app.

102
00:05:13,780 --> 00:05:15,830
Pretty cool stuff.
>> Very nice.

103
00:05:15,830 --> 00:05:18,700
Next up we have a project called iCheck.

104
00:05:18,700 --> 00:05:21,760
This lets you create customized check
boxes,

105
00:05:21,760 --> 00:05:24,190
radio buttons and a couple more things.

106
00:05:24,190 --> 00:05:27,330
Now why would you want to customize your
check boxes?

107
00:05:27,330 --> 00:05:31,250
Well let's go ahead and take a look at a
little demo and example here.

108
00:05:31,250 --> 00:05:34,590
If you want to have these different
graphical

109
00:05:34,590 --> 00:05:38,820
checkboxes, and radio buttons and
scrolling buttons, this is

110
00:05:38,820 --> 00:05:43,480
actually pretty difficult to do with
straight-up styling.

111
00:05:43,480 --> 00:05:46,730
So this plug-in will allow you to do all
that.

112
00:05:46,730 --> 00:05:49,220
And, it, even includes a couple different
skins, they've

113
00:05:49,220 --> 00:05:52,530
got a Minimal skin that you can, see right
here.

114
00:05:52,530 --> 00:05:57,760
Square skin, Flat, Line, Polaris,
Futurico.

115
00:05:57,760 --> 00:05:58,760
And more.

116
00:05:58,760 --> 00:06:03,010
Now, there are a ton of different options
that you can use with this.

117
00:06:03,010 --> 00:06:03,900
Some of the features

118
00:06:03,900 --> 00:06:04,410
are right here.

119
00:06:04,410 --> 00:06:07,810
It's identical inputs across different
browsers and devices.

120
00:06:07,810 --> 00:06:09,190
This is gonna, this is gonna be super

121
00:06:09,190 --> 00:06:12,000
important when you're creating your app
and skinning

122
00:06:12,000 --> 00:06:13,640
it and wanted it to have a consistent

123
00:06:13,640 --> 00:06:17,020
user experience across all of your
different devices.

124
00:06:17,020 --> 00:06:21,750
Now the super important thing here is
screen reader accessible inputs.

125
00:06:21,750 --> 00:06:25,580
This is actually quite difficult to do if
you're just writing something yourself.

126
00:06:25,580 --> 00:06:29,040
Now its version 1.0.1 right now, but
version 2.0 is in

127
00:06:29,040 --> 00:06:32,970
the works which has a performance boost
and a few more options.

128
00:06:32,970 --> 00:06:34,480
So this is definitely one to check out.

129
00:06:34,480 --> 00:06:36,850
Stay tuned.
>> Yeah, that's very cool.

130
00:06:36,850 --> 00:06:38,790
It is notoriously difficult to style

131
00:06:38,790 --> 00:06:41,560
form elements like that especially
checkboxes so.

132
00:06:41,560 --> 00:06:41,990
>> Yeah.

133
00:06:41,990 --> 00:06:42,740
>> Very nice stuff.

134
00:06:42,740 --> 00:06:44,770
>> Some CSS frameworks don't even
bother.

135
00:06:44,770 --> 00:06:45,140
>> Yeah?
>> Yeah.

136
00:06:45,140 --> 00:06:48,160
And it's like, no, not me.
Do something else.

137
00:06:48,160 --> 00:06:49,330
>> Shame.
>> Yeah.

138
00:06:49,330 --> 00:06:51,740
>> Next up is form label design.

139
00:06:51,740 --> 00:06:54,230
So, speaking of forms, we have a little
bit more

140
00:06:54,230 --> 00:06:59,910
for you here.
There is an attribute called placeholder

141
00:06:59,910 --> 00:07:05,230
and very commonly it's used in place of a
form label,

142
00:07:05,230 --> 00:07:10,440
but that's actually not appropriate for
semantic and accessibility reasons.

143
00:07:10,440 --> 00:07:13,360
We really do need to have a label there.

144
00:07:13,360 --> 00:07:19,910
So the label element will as the name
implies label the, the form elements.

145
00:07:19,910 --> 00:07:24,344
So you have the label and then you have
the actual input area whereas the

146
00:07:24,344 --> 00:07:29,830
placeholder attribute on an input will
have this sort

147
00:07:29,830 --> 00:07:35,510
of gray text that you commonly see.
And when you click, the text goes away.

148
00:07:35,510 --> 00:07:39,050
It just gives you a placeholder or an idea
of

149
00:07:39,050 --> 00:07:41,620
what type of data you should be putting in
there.

150
00:07:41,620 --> 00:07:44,560
But, they're not interchangeable, they're
not the same thing.

151
00:07:44,560 --> 00:07:49,070
And, you can create a form field without a

152
00:07:49,070 --> 00:07:51,970
placeholder, but you do need to have a
label.

153
00:07:51,970 --> 00:07:55,360
But, the place holders are pretty nice, so
what do you do?

154
00:07:55,360 --> 00:07:59,350
Well, there's this pretty wonderful
solution in

155
00:07:59,350 --> 00:08:03,090
this iOS app, where you can start typing

156
00:08:03,090 --> 00:08:09,780
something in and then the label will just
float right above the input area as

157
00:08:09,780 --> 00:08:15,750
soon as input begins.
Well, here we have a version for the web.

158
00:08:15,750 --> 00:08:19,400
And there's a little example here done
through code pen.

159
00:08:19,400 --> 00:08:22,690
So as you can see there is a placeholder
right here.

160
00:08:22,690 --> 00:08:26,330
And when I click and start typing my name.

161
00:08:26,330 --> 00:08:30,590
You can see that the label appears right
above the text.

162
00:08:30,590 --> 00:08:34,880
And they give an example of what that
markup looks like.

163
00:08:34,880 --> 00:08:38,951
Pretty cool stuff definitely be sure to
check out this blog post to

164
00:08:38,951 --> 00:08:40,952
read more, but I think it's a

165
00:08:40,952 --> 00:08:44,690
pretty wonderful solution to this
particular problem.

166
00:08:44,690 --> 00:08:46,500
>> Yeah, I really like that.

167
00:08:46,500 --> 00:08:50,130
Next up, Nick, you might not need jQuery.
>> Really, are you sure?

168
00:08:50,130 --> 00:08:52,070
>> Yeah, I'm pretty sure.
>> That's crazy.

169
00:08:52,070 --> 00:08:54,300
>> Well I think it depends on your
specific situation.

170
00:08:54,300 --> 00:08:56,470
But there is a new website Called You

171
00:08:56,470 --> 00:09:00,420
Might Not Need jQuery that addresses
different instances where,

172
00:09:00,420 --> 00:09:03,410
you guessed it, you might not need jQuery.

173
00:09:03,410 --> 00:09:05,925
>> Can you guess the address of this
website?

174
00:09:05,925 --> 00:09:11,170
>> Youmightnotneedjquery.com?
>> Wow dude, you are good!

175
00:09:11,170 --> 00:09:11,630
>> Wow!

176
00:09:11,630 --> 00:09:16,040
>> So anyway, this is actually pretty
great, It goes through

177
00:09:16,040 --> 00:09:20,370
and shows you, hey you only need to
support IE9 and up.

178
00:09:20,370 --> 00:09:22,370
Well, hey buddy this is your code.

179
00:09:22,370 --> 00:09:25,550
This is what the jQuery looks like and
this is the absolutely

180
00:09:25,550 --> 00:09:32,270
equivalent JavaScript code that will work
great in IE or another modern browser.

181
00:09:32,270 --> 00:09:34,420
>> But Jason, in a lot of these
examples,

182
00:09:34,420 --> 00:09:38,200
it looks like there's far more code for
plain JavaScript.

183
00:09:38,200 --> 00:09:40,660
>> Yes.
That is quite correct, Nick.

184
00:09:40,660 --> 00:09:44,290
And actually, it's something we kind of
beat to death on this show here.

185
00:09:44,290 --> 00:09:46,470
As the web evolves, mobile device

186
00:09:46,470 --> 00:09:49,590
connections don't necessarily evolve along
with it.

187
00:09:49,590 --> 00:09:50,890
So any opportunity

188
00:09:50,890 --> 00:09:55,490
you have to save some space.
Be it, via a Javascript library.

189
00:09:55,490 --> 00:09:58,400
Or a lack of one, is a great thing to
check out.

190
00:09:58,400 --> 00:10:00,010
So that's what this website is hoping to

191
00:10:00,010 --> 00:10:02,660
address, finding common use cases and
presenting you the

192
00:10:02,660 --> 00:10:05,220
different code that goes along with these
use cases

193
00:10:05,220 --> 00:10:07,810
that you can then implement on your own
site.

194
00:10:07,810 --> 00:10:11,480
>> So even though this looks like more
code, its also

195
00:10:11,480 --> 00:10:16,210
in exchange for not including jQuery,
which is actually much less code.

196
00:10:16,210 --> 00:10:21,190
>> Yes, so more is less.
>> Got it.

197
00:10:21,190 --> 00:10:21,548
>> Get it.

198
00:10:21,548 --> 00:10:25,510
>> [CROSSTALK] Conversely less can be
more.

199
00:10:26,630 --> 00:10:27,800
>> It, it works both ways.

200
00:10:27,800 --> 00:10:28,153
>> Right.

201
00:10:28,153 --> 00:10:31,672
[BLANK_AUDIO]

202
00:10:31,672 --> 00:10:34,000
>> Alright.
Very cool stuff.

203
00:10:34,000 --> 00:10:39,500
Next up, we're gonna take a look at the
origins of common UI symbols.

204
00:10:39,500 --> 00:10:43,290
So we have this wonderful little animation
here and it

205
00:10:43,290 --> 00:10:46,690
goes through a couple of different common
UI symbols, so

206
00:10:46,690 --> 00:10:51,000
there's like power off, bluetooth,
firewire, that sort of stuff,

207
00:10:51,000 --> 00:10:54,210
And, this is almost like a nice little
story book.

208
00:10:54,210 --> 00:10:56,770
So if I click this arrow over here, boom,
look at that.

209
00:10:56,770 --> 00:10:57,380
>> Boom.

210
00:10:57,380 --> 00:11:01,470
>> There is power, there's what the
symbol looks like, and it tells

211
00:11:01,470 --> 00:11:06,380
you exactly where this particular symbol
came from, and there's eleven of these.

212
00:11:06,380 --> 00:11:10,360
So there's Command as you might find on a
Mac.

213
00:11:10,360 --> 00:11:14,170
There's the bluetooth symbol, USB and so
on.

214
00:11:14,170 --> 00:11:18,850
It's not particularly useful, but it's
very fascinating, and

215
00:11:18,850 --> 00:11:21,630
I feel like these are symbols that we see,

216
00:11:21,630 --> 00:11:25,200
all the time, and it's kinda interesting
to know where they came from.

217
00:11:25,200 --> 00:11:27,240
They weren't just made up arbitrarily.

218
00:11:27,240 --> 00:11:31,445
A lot of them have very specific, specific
reasoning behind them.

219
00:11:31,445 --> 00:11:35,920
>> Yeah, it's possible that the at
symbol dates back to the 6th century.

220
00:11:35,920 --> 00:11:38,480
Where monks had it mean toward.

221
00:11:38,480 --> 00:11:40,730
>> And now it's used on Twitter.

222
00:11:40,730 --> 00:11:43,550
>> And coincidentally, we are toward
the end of

223
00:11:43,550 --> 00:11:45,680
the show where we usually give our Twitter
names.

224
00:11:45,680 --> 00:11:46,660
Who are you on Twitter?
>> I

225
00:11:46,660 --> 00:11:49,360
am @nickrp.
>> And I am @jseifer.

226
00:11:49,360 --> 00:11:51,110
For more information on anything we talked

227
00:11:51,110 --> 00:11:54,410
about, check out the show notes at
YouTube.com/gotreehouse.

228
00:11:54,410 --> 00:11:57,060
You can also subscribe to this podcast in
iTunes.

229
00:11:57,060 --> 00:12:00,120
Search for the Treehouse Show, and then
subscribe and rate.

230
00:12:00,120 --> 00:12:03,490
>> Of course, if you'd like to see more
videos like this one about web design,

231
00:12:03,490 --> 00:12:06,600
web development, mobile business, and so
much more,

232
00:12:06,600 --> 00:12:10,150
be sure to check us out at
teamtreehouse.com.

233
00:12:10,150 --> 00:12:11,650
Thanks so much for watching,

234
00:12:11,650 --> 00:12:13,187
and we'll see you next week.

235
00:12:13,187 --> 00:12:19,840
[MUSIC]