Episode 78: Origami, HTML 5 Game Development, Form Labels

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching the Tree House Show, your weekly dose of 0:02 internets, where we talk about all things web design, web development, and more. 0:04 >> In this episode, we'll be talking about 0:08 Origami, HTML5 game development, form labels, and more. 0:09 >> Let's check it out. 0:14 [MUSIC] 0:15 >> First up is Origami. 0:21 This is a project from Facebook that works with 0:22 Quartz Composer on the Mac, and it can help you 0:25 prototype your apps before you actually get into a 0:29 whole bunch of coding and waste a lot of time. 0:32 So, here's the website for it. 0:35 A free design pro, prototyping toolkit for 0:37 Quartz Composer, made by the Facebook design team. 0:41 And basically it allows you to drag a 0:45 bunch of nodes together in this node editor. 0:49 And you can add various properties to each one. 0:52 And then boom, look at that. 0:55 You can prototype behavior in your app before you have to write a ton of code. 0:57 So it details everything that's included. You can do all sorts of cool transitions. 1:03 And to 1:10 get started, you need an Apple, you need to register as an Apple developer, 1:10 download and install Quartz Composer and then 1:15 you need to download and install Origami. 1:18 So if you want to try a new way 1:22 of prototyping apps, I highly recommend you check it out. 1:24 >> That is, that is so nice and save, you 1:27 know, just saves so much time before actually coding all that. 1:29 Having a meeting about it. Okay, back to the drawing board. 1:32 No, just pop in Origami. 1:35 Ready to go. >> Bam. 1:36 >> Next up we have a project called Molecule and 1:38 this is pretty interesting, is an HTML 5 game development framework. 1:40 Now this framework gives you a lot of different 1:45 components that you would need to use when creating your 1:46 own game and it uses HTML 5 as you might 1:50 expect; from the part that says HTML 5 game framework. 1:53 So what does it have? 1:57 Well it's fast, lightweight, easy to learn and 1:59 cross platform. 2:01 I know that because it says it all across the type of the top of the screen. 2:02 No, but what's really nice about it is, it gives you a 2:06 physics library which you really don't need to spend time writing yourself. 2:08 As well as animation and tile support. 2:12 So let's check out some examples of things 2:15 that you can do with the molecule framework. 2:17 So it, they, it's really nice, this site. 2:21 They break it down into three different sections. 2:22 Beginner, intermediate and advanced. 2:24 Let's check out the beginner section right here. 2:27 One of the basic things that you can do is move a sprite. 2:30 So, see that? 2:34 We got our little character moving across the screen right there. 2:35 Now, what's nice about the examples on this page is that it shows 2:38 you all of the code you need to use to get this working. 2:41 Now, look at how little code that is. 2:44 In 25 lines there, They've done a whole animation 2:46 of a sprite. 2:50 Now, if you want to know what you can 2:52 really get going here, let's check out the advanced section. 2:53 And look at that, it's almost like a small Pac Man clone that they called Maze. 2:57 And if you ask me, it's amazing. 3:01 So anyway not so much code involved there. 3:06 You can see they break it down into a game function, 3:09 player function and just have a ton of sprites moving around here. 3:13 Now we're not not going to go into everything here 3:16 but this does also work on mobile devices as well. 3:18 So you can check that out at moleculejs.net, we'll 3:21 also have a link to it in our show 3:24 notes which you can get to at youtube.com/gotreehouse/ or 3:26 search for us on Itunes at the Treehouse Show. 3:28 You know, that's very impressive. 3:31 It looks like they include pretty much everything that 3:32 you would need to create a basic HTML5 game. 3:35 I think the thing that impresses me the most is the tile map 3:39 because that's actually something that isn't 3:42 even included with Sprite kit in iOS. 3:44 >> Wow. 3:47 >> And that's a very important piece when you're trying to build like a, a side 3:48 scroller game or a top down RPG game, so it's nice to have that tile map there 3:52 already prebuilt for you. Next up is a new light box. 3:57 I know there's a ton of light boxes out there. 4:02 >> Yeah, why would we cover it here? 4:04 >> Well, this person didn't like any of them 4:06 and I can see why when they explain their needs. 4:09 They just wanted to show an image, so you click on the image. 4:13 The image comes up very minimal and that's pretty much it. 4:16 In fact they have a demo further 4:20 down here, let's take a look at that. So here they have this nice image gallery. 4:23 You click and an image comes up. 4:27 And if you click on the left or right side of 4:30 the image, it will actually scroll through to the next image. 4:32 And you can click off to the side to make the lightbox go away. 4:37 Now the problem with other lightboxes That this person 4:41 encountered was that they had a lot of really bad 4:45 markup or they included tons of features that they just didn't need. 4:48 Everybody seems to be turning to make the ultimate light box solution that 4:52 has absolutely everything you possibly need, but this is a pretty lightweight, 4:57 minimalistic jQuery plugin and it even worked, works with jQuery1 or 2, so if 5:02 you're still on jQuery1 it will totally work for your app. 5:07 Pretty cool stuff. >> Very nice. 5:13 Next up we have a project called iCheck. 5:15 This lets you create customized check boxes, 5:18 radio buttons and a couple more things. 5:21 Now why would you want to customize your check boxes? 5:24 Well let's go ahead and take a look at a little demo and example here. 5:27 If you want to have these different graphical 5:31 checkboxes, and radio buttons and scrolling buttons, this is 5:34 actually pretty difficult to do with straight-up styling. 5:38 So this plug-in will allow you to do all that. 5:43 And, it, even includes a couple different skins, they've 5:46 got a Minimal skin that you can, see right here. 5:49 Square skin, Flat, Line, Polaris, Futurico. 5:52 And more. 5:57 Now, there are a ton of different options that you can use with this. 5:58 Some of the features 6:03 are right here. 6:03 It's identical inputs across different browsers and devices. 6:04 This is gonna, this is gonna be super 6:07 important when you're creating your app and skinning 6:09 it and wanted it to have a consistent 6:12 user experience across all of your different devices. 6:13 Now the super important thing here is screen reader accessible inputs. 6:17 This is actually quite difficult to do if you're just writing something yourself. 6:21 Now its version 1.0.1 right now, but version 2.0 is in 6:25 the works which has a performance boost and a few more options. 6:29 So this is definitely one to check out. 6:32 Stay tuned. >> Yeah, that's very cool. 6:34 It is notoriously difficult to style 6:36 form elements like that especially checkboxes so. 6:38 >> Yeah. 6:41 >> Very nice stuff. 6:41 >> Some CSS frameworks don't even bother. 6:42 >> Yeah? >> Yeah. 6:44 And it's like, no, not me. Do something else. 6:45 >> Shame. >> Yeah. 6:48 >> Next up is form label design. 6:49 So, speaking of forms, we have a little bit more 6:51 for you here. There is an attribute called placeholder 6:54 and very commonly it's used in place of a form label, 6:59 but that's actually not appropriate for semantic and accessibility reasons. 7:05 We really do need to have a label there. 7:10 So the label element will as the name implies label the, the form elements. 7:13 So you have the label and then you have the actual input area whereas the 7:19 placeholder attribute on an input will have this sort 7:24 of gray text that you commonly see. And when you click, the text goes away. 7:29 It just gives you a placeholder or an idea of 7:35 what type of data you should be putting in there. 7:39 But, they're not interchangeable, they're not the same thing. 7:41 And, you can create a form field without a 7:44 placeholder, but you do need to have a label. 7:49 But, the place holders are pretty nice, so what do you do? 7:51 Well, there's this pretty wonderful solution in 7:55 this iOS app, where you can start typing 7:59 something in and then the label will just float right above the input area as 8:03 soon as input begins. Well, here we have a version for the web. 8:09 And there's a little example here done through code pen. 8:15 So as you can see there is a placeholder right here. 8:19 And when I click and start typing my name. 8:22 You can see that the label appears right above the text. 8:26 And they give an example of what that markup looks like. 8:30 Pretty cool stuff definitely be sure to check out this blog post to 8:34 read more, but I think it's a 8:38 pretty wonderful solution to this particular problem. 8:40 >> Yeah, I really like that. 8:44 Next up, Nick, you might not need jQuery. >> Really, are you sure? 8:46 >> Yeah, I'm pretty sure. >> That's crazy. 8:50 >> Well I think it depends on your specific situation. 8:52 But there is a new website Called You 8:54 Might Not Need jQuery that addresses different instances where, 8:56 you guessed it, you might not need jQuery. 9:00 >> Can you guess the address of this website? 9:03 >> Youmightnotneedjquery.com? >> Wow dude, you are good! 9:05 >> Wow! 9:11 >> So anyway, this is actually pretty great, It goes through 9:11 and shows you, hey you only need to support IE9 and up. 9:16 Well, hey buddy this is your code. 9:20 This is what the jQuery looks like and this is the absolutely 9:22 equivalent JavaScript code that will work great in IE or another modern browser. 9:25 >> But Jason, in a lot of these examples, 9:32 it looks like there's far more code for plain JavaScript. 9:34 >> Yes. That is quite correct, Nick. 9:38 And actually, it's something we kind of beat to death on this show here. 9:40 As the web evolves, mobile device 9:44 connections don't necessarily evolve along with it. 9:46 So any opportunity 9:49 you have to save some space. Be it, via a Javascript library. 9:50 Or a lack of one, is a great thing to check out. 9:55 So that's what this website is hoping to 9:58 address, finding common use cases and presenting you the 10:00 different code that goes along with these use cases 10:02 that you can then implement on your own site. 10:05 >> So even though this looks like more code, its also 10:07 in exchange for not including jQuery, which is actually much less code. 10:11 >> Yes, so more is less. >> Got it. 10:16 >> Get it. 10:21 >> [CROSSTALK] Conversely less can be more. 10:21 >> It, it works both ways. 10:26 >> Right. 10:27 [BLANK_AUDIO] 10:28 >> Alright. Very cool stuff. 10:31 Next up, we're gonna take a look at the origins of common UI symbols. 10:34 So we have this wonderful little animation here and it 10:39 goes through a couple of different common UI symbols, so 10:43 there's like power off, bluetooth, firewire, that sort of stuff, 10:46 And, this is almost like a nice little story book. 10:51 So if I click this arrow over here, boom, look at that. 10:54 >> Boom. 10:56 >> There is power, there's what the symbol looks like, and it tells 10:57 you exactly where this particular symbol came from, and there's eleven of these. 11:01 So there's Command as you might find on a Mac. 11:06 There's the bluetooth symbol, USB and so on. 11:10 It's not particularly useful, but it's very fascinating, and 11:14 I feel like these are symbols that we see, 11:18 all the time, and it's kinda interesting to know where they came from. 11:21 They weren't just made up arbitrarily. 11:25 A lot of them have very specific, specific reasoning behind them. 11:27 >> Yeah, it's possible that the at symbol dates back to the 6th century. 11:31 Where monks had it mean toward. 11:35 >> And now it's used on Twitter. 11:38 >> And coincidentally, we are toward the end of 11:40 the show where we usually give our Twitter names. 11:43 Who are you on Twitter? >> I 11:45 am @nickrp. >> And I am @jseifer. 11:46 For more information on anything we talked 11:49 about, check out the show notes at YouTube.com/gotreehouse. 11:51 You can also subscribe to this podcast in iTunes. 11:54 Search for the Treehouse Show, and then subscribe and rate. 11:57 >> Of course, if you'd like to see more videos like this one about web design, 12:00 web development, mobile business, and so much more, 12:03 be sure to check us out at teamtreehouse.com. 12:06 Thanks so much for watching, 12:10 and we'll see you next week. 12:11 [MUSIC] 12:13

You need to sign up for Treehouse in order to set up Workspace

Sign up