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]