1 00:00:01,240 --> 00:00:03,240 [Nick Pettit] I'm Nick Pettit. >>[Jason Seifer] I'm Jason Seifer. 2 00:00:03,240 --> 00:00:05,540 [Nick Pettit] And you're watching the Treehouse Show; your weekly dose 3 00:00:05,540 --> 00:00:07,820 of Internets where we talk about all things web design, 4 00:00:07,820 --> 00:00:09,980 web development, and more. 5 00:00:09,980 --> 00:00:12,160 [Jason Seifer] In this episode of the Treehouse Show, we'll be talking about 6 00:00:12,160 --> 00:00:18,630 the HTML5 progress element, a cool JavaScript slider, and learning jQuery. 7 00:00:18,630 --> 00:00:20,810 [Nick Pettit] Let's check it out. 8 00:00:20,810 --> 00:00:26,540 [The Treehouse Show] 9 00:00:26,540 --> 00:00:30,610 [Jason Seifer] So first up, we'll be talking about the HTML5 progress element. 10 00:00:30,610 --> 00:00:36,630 And this is over on the HTML5 Doctor blog, and let's just say the HTML Doctor is in. 11 00:00:36,630 --> 00:00:38,850 Always wanted to say that. 12 00:00:38,850 --> 00:00:41,210 So the progress element is something that you're probably 13 00:00:41,210 --> 00:00:43,580 used to seeing in a desktop application where you'll see a 14 00:00:43,580 --> 00:00:46,350 progress bar as something is being loaded. 15 00:00:46,350 --> 00:00:51,630 Now the progress element is actually something that is part of the HTML5 specification. 16 00:00:51,630 --> 00:00:55,340 And this blog post over on the HTML5 Doctor blog 17 00:00:55,340 --> 00:00:58,590 walks you through how you're going to use this in your sites. 18 00:00:58,590 --> 00:01:00,740 Now what would you use this for? 19 00:01:00,740 --> 00:01:05,570 Well, one example that they give is an HTML5 video that is playing. 20 00:01:05,570 --> 00:01:09,860 Using the progress element you can actually load up the amount 21 00:01:09,860 --> 00:01:13,310 of the video that's played so far, or if you have different assets 22 00:01:13,310 --> 00:01:15,580 that are downloading--you know--for example the video 23 00:01:15,580 --> 00:01:19,630 while that's downloading you can actually increase the progress bar as it goes along. 24 00:01:19,630 --> 00:01:22,240 Now there's some nuances to how this is going to work, 25 00:01:22,240 --> 00:01:24,760 so make sure that you check out this blog post. 26 00:01:24,760 --> 00:01:29,700 And if I haven't already mentioned the site, it's at the HTML5Doctor.com. 27 00:01:29,700 --> 00:01:32,060 [Nick Pettit] I feel like we're making real progress here, Jason. 28 00:01:32,060 --> 00:01:34,820 [Jason Seifer] Me too. >>[Nick Pettit] Cool. >>[Jason Seifer] Twitter therapist said too. 29 00:01:34,820 --> 00:01:39,390 [Nick Pettit] Next up is the interactive guide to blog typography. 30 00:01:39,390 --> 00:01:42,090 This is an amazing Web site. 31 00:01:42,090 --> 00:01:46,280 So on the left side here you have lists of contents, 32 00:01:46,280 --> 00:01:52,350 and they teach things like layout, line height, visual hierarchy, etcetera. 33 00:01:52,350 --> 00:01:58,210 So when you click on one of these, the right side will actually 34 00:01:58,210 --> 00:02:02,160 turn into a demonstration of the concept that's being taught. 35 00:02:02,160 --> 00:02:06,690 So on the left they talk about visual hierarchy here and how that 36 00:02:06,690 --> 00:02:11,420 can help you design a better blog. And on the right, you have an example. 37 00:02:11,420 --> 00:02:15,630 So they also talk about line height, and they focus on--you know-- 38 00:02:15,630 --> 00:02:20,090 particular aspects of that, but very cool--definitely worth checking 39 00:02:20,090 --> 00:02:24,560 out if you're designing a brand new blog, and you want it to have really cool typography. 40 00:02:24,560 --> 00:02:27,220 [Jason Seifer] And don't we all? >>[Nick Pettit] Definitely. 41 00:02:27,220 --> 00:02:30,240 [Jason Seifer] Next up, we have a project called, the Threesixty-Slider. 42 00:02:30,240 --> 00:02:33,870 Now this is an interesting take on the usual slider plug-in. 43 00:02:33,870 --> 00:02:38,560 This is built for jQuery, and I'll just go ahead and show you the example first. 44 00:02:38,560 --> 00:02:41,560 What this does is this lets you take an image, and then you can see 45 00:02:41,560 --> 00:02:45,340 on the right side of the screen here there are a couple arrows. 46 00:02:45,340 --> 00:02:48,230 Now the image they have right here is a car, and if I hold down 47 00:02:48,230 --> 00:02:51,910 my mouse button and move it to the right, the car spins. 48 00:02:51,910 --> 00:02:54,080 How amazing is that? 49 00:02:54,080 --> 00:02:56,250 Do you have any idea how strong you would have to be in real life to 50 00:02:56,250 --> 00:02:58,450 accomplish the same thing? >>[Nick Pettit] Pretty strong. >>[Jason Seifer] Yeah. 51 00:02:58,450 --> 00:03:01,850 Luckily we are just using a jQuery plug-in that has a lot of different options. 52 00:03:01,850 --> 00:03:04,290 So--yeah-- >>[Nick Pettit] That's called leverage. >>[Jason Seifer] Yeah. 53 00:03:04,290 --> 00:03:07,630 So the way this is accomplished is actually with a series of images 54 00:03:07,630 --> 00:03:11,490 that go through all the different parts of the spinning animation. 55 00:03:11,490 --> 00:03:14,120 Now the plug-in lets you configure the different images. 56 00:03:14,120 --> 00:03:16,900 You can say, "Okay, there's 50 different images that make up the 57 00:03:16,900 --> 00:03:22,840 full 360 degree spin of the car," or--you know--whatever you want to be spinning on your site. 58 00:03:22,840 --> 00:03:25,240 And then you put all of those in a directory, 59 00:03:25,240 --> 00:03:27,560 and the plug-in just magically works 60 00:03:27,560 --> 00:03:29,990 as you spin through them and scroll through. 61 00:03:29,990 --> 00:03:33,300 It also can play automatically, so pretty interesting plug-in. 62 00:03:33,300 --> 00:03:35,800 This would be really useful as you might expect on maybe 63 00:03:35,800 --> 00:03:38,370 a car dealership site or a lot of e-commerce sites. 64 00:03:38,370 --> 00:03:40,740 [Nick Pettit] Or just--yeah--e-commerce sites where you are trying 65 00:03:40,740 --> 00:03:44,180 to sell physical products, and it is helpful to see all different angles of it. 66 00:03:44,180 --> 00:03:46,860 [Jason Seifer] Dating sites. >>[Nick Pettit] Yeah. >>[Jason Seifer] Whatever. >>[Nick Pettit] You know. 67 00:03:46,860 --> 00:03:48,860 Just a lot of examples. 68 00:03:48,860 --> 00:03:53,870 Next up is this really amazing blog post about landing pages. 69 00:03:53,870 --> 00:03:58,080 So it's called, Step-By-Step Landing Page Copywriting. 70 00:03:58,080 --> 00:04:03,380 And at the start, they warn you that this is a really long blog post, 71 00:04:03,380 --> 00:04:08,740 and that's almost an understatement in itself. This is-- >>[Jason Seifer] Now Nick, what is a landing page? 72 00:04:08,740 --> 00:04:12,720 [Nick Pettit] This is an incredibly long blog post about landing pages, 73 00:04:12,720 --> 00:04:18,680 which are basically these pages that you use to market your application 74 00:04:18,680 --> 00:04:22,550 or--you know--market whatever you are trying to market basically. 75 00:04:22,550 --> 00:04:26,560 It could be for an e-commerce site; it could be for events, etcetera. 76 00:04:26,560 --> 00:04:31,640 So this is the URL that you might post on Twitter, or you might 77 00:04:31,640 --> 00:04:34,700 post on whatever advertising channels you're using. 78 00:04:34,700 --> 00:04:40,720 And it would be the Web site that people type in or click through and go to. 79 00:04:40,720 --> 00:04:45,760 And it's kind of like a--in a lot of cases--it's a summary of your Web site 80 00:04:45,760 --> 00:04:52,540 or your product or service or event that just kind of ties all the loose ends together 81 00:04:52,540 --> 00:04:55,220 and gives people a quick 360 view. 82 00:04:55,220 --> 00:04:57,440 [Jason Seifer] So basically--you know--if you are trying to sell your app 83 00:04:57,440 --> 00:05:00,540 this is sort of like a sales funnel to say, "Okay, here--you know--" >>[Nick Pettit] Exactly. 84 00:05:00,540 --> 00:05:03,010 [Jason Seifer] "--let me get your name, email address; I'll send you a brochure." 85 00:05:03,010 --> 00:05:06,900 [Nick Pettit] Or--you know--you can have a call to action right on the page. 86 00:05:06,900 --> 00:05:09,830 So say for example you are trying to market to different 87 00:05:09,830 --> 00:05:13,250 verticals or different demographics, you might create multiple 88 00:05:13,250 --> 00:05:16,630 landing pages that you can use to kind of segment your market. 89 00:05:16,630 --> 00:05:20,250 Then--on those landing pages--you have a call to action to go ahead 90 00:05:20,250 --> 00:05:23,660 and sign up for your service or buy your product. 91 00:05:23,660 --> 00:05:27,780 So, this is obviously really important to sales and marketing. 92 00:05:27,780 --> 00:05:33,000 And, so it's great that there's such an incredibly comprehensive post 93 00:05:33,000 --> 00:05:35,330 about exactly how to do this. 94 00:05:35,330 --> 00:05:39,640 And--like I said--this is a very, very long blog post. 95 00:05:39,640 --> 00:05:42,930 It's still going. >>[Jason Seifer] But it has a lot of really great information. 96 00:05:42,930 --> 00:05:45,910 [Nick Pettit] Yeah. Lots of great stuff there, so definitely check it out. 97 00:05:45,910 --> 00:05:47,870 [Jason Seifer] And what a great opportunity for a segue because 98 00:05:47,870 --> 00:05:51,570 next up we have the jQuery learning center. >>[Nick Pettit] Look at that. >>[Jason Seifer] Yeah. 99 00:05:51,570 --> 00:05:56,090 So the jQuery learning center is currently a beta site, but as you 100 00:05:56,090 --> 00:05:59,550 might expect this goes through and teaches you jQuery. 101 00:05:59,550 --> 00:06:05,730 A lot of different resources for both users of jQuery and authors of jQuery plug-ins. 102 00:06:05,730 --> 00:06:10,880 Just talking about jQuery--you know--talking about Java Script 101, 103 00:06:10,880 --> 00:06:15,930 what jQuery is, how to use the different effects and events--even--you know-- 104 00:06:15,930 --> 00:06:17,950 working with jQuery AJAX. 105 00:06:17,950 --> 00:06:21,950 So you can actually contribute to this site if you want to--you know-- 106 00:06:21,950 --> 00:06:26,210 if you see any glaring omissions or some typos; it's hosted on GitHub, 107 00:06:26,210 --> 00:06:30,440 and so you can submit poll requests or--you know--fix it yourself. 108 00:06:30,440 --> 00:06:34,790 But so far great site--pretty in-depth posts. Definitely check it out. 109 00:06:34,790 --> 00:06:40,120 [Nick Pettit] Very cool. Next up is the Web Font Combinator. 110 00:06:40,120 --> 00:06:43,760 And this is a tool to allow you to test different fonts, 111 00:06:43,760 --> 00:06:47,800 different font sizes, different colors, etcetera before you actually 112 00:06:47,800 --> 00:06:50,280 implement them in your Web site. 113 00:06:50,280 --> 00:06:56,090 So here I can go ahead and select--say--the header, and 114 00:06:56,090 --> 00:06:59,170 I can choose a font here. 115 00:06:59,170 --> 00:07:05,160 So I'll pick another font--that actually looks pretty terrible, but you get the idea. 116 00:07:05,160 --> 00:07:08,230 And then we can go ahead and change the size of it. 117 00:07:08,230 --> 00:07:12,980 I can change the line height; I can change the color. 118 00:07:12,980 --> 00:07:16,530 And it looks like we're getting into some '90s web design here. 119 00:07:16,530 --> 00:07:19,130 [Jason Seifer] Where is '90s web design guy when you need him? 120 00:07:19,130 --> 00:07:23,990 [Nick Pettit] Basically you can go ahead and click on the first level headline, 121 00:07:23,990 --> 00:07:27,710 second level headline, and paragraph text, and go ahead and 122 00:07:27,710 --> 00:07:32,090 combine them to just quickly prototype and see what that's actually 123 00:07:32,090 --> 00:07:34,550 going to look like before you spend a lot of time 124 00:07:34,550 --> 00:07:39,190 digging into your CSS and actually--you know--grabbing different fonts. 125 00:07:39,190 --> 00:07:42,290 I mean--you can spend a lot of time just trying to figure out 126 00:07:42,290 --> 00:07:44,550 what fonts and colors you want to use on your Web site. 127 00:07:44,550 --> 00:07:49,290 So this isn't quite as good as doing it in context, but it's at least 128 00:07:49,290 --> 00:07:52,690 a good tool to get started and just quickly prototype stuff. 129 00:07:52,690 --> 00:07:55,600 [Jason Seifer] Yeah--get an idea for what kind of fonts you like. >>[Nick Pettit] Yep. 130 00:07:55,600 --> 00:07:58,980 [Jason Seifer] Next up we have a project called, Icons DB. 131 00:07:58,980 --> 00:08:03,650 This is a huge collection of free icons that you can use in your application. 132 00:08:03,650 --> 00:08:09,210 And it's nice because it supports search, and there's also different groups of icons. 133 00:08:09,210 --> 00:08:13,450 So you can even--you know--search for different colors and 134 00:08:13,450 --> 00:08:16,010 check out all the different icons they have. 135 00:08:16,010 --> 00:08:20,980 They are grouped over on the right here, so if you want an acorn icon 136 00:08:20,980 --> 00:08:24,990 there's a bunch of different acorn icons that you could have. 137 00:08:24,990 --> 00:08:28,610 [Nick Pettit] So that might be useful if you're making say Facebook for squirrels. 138 00:08:28,610 --> 00:08:30,780 [Jason Seifer] Yeah. >>[Nick Pettit] Cool. >>[Jason Seifer] Yeah. Acorn book. 139 00:08:30,780 --> 00:08:34,320 [Nick Pettit] Awesome. >>[Jason Seifer] Yeah. So that's over at IconsDB.com. 140 00:08:34,320 --> 00:08:38,240 And unfortunately for everyone I think that we are just about out of time here. 141 00:08:38,240 --> 00:08:40,870 Nick, who are you on Twitter? >>[Nick Pettit] I'm @NickRP. 142 00:08:40,870 --> 00:08:45,150 [Jason Seifer] And I am @JSeifer. Thanks so much for watching this episode of the Treehouse Show. 143 00:08:45,150 --> 00:08:50,340 For show notes and more check out our YouTube channel at YouTube.com/GoTreehouse. 144 00:08:50,340 --> 00:08:53,510 [Nick Pettit] And--of course--if you'd like to watch more videos like this one 145 00:08:53,510 --> 00:08:57,020 about web design, web development, mobile development, 146 00:08:57,020 --> 00:09:01,890 business, and more be sure to check us out at TeamTreehouse.com. 147 00:09:01,890 --> 00:09:04,780 Thanks so much for watching, and we'll see you next week. 148 00:09:04,780 --> 00:09:09,510 [The Treehouse Show]