Episode 31: HTML Progress Element and JavaScript Sliders

[Nick Pettit] I'm Nick Pettit. >>[Jason Seifer] I'm Jason Seifer. 0:01 [Nick Pettit] And you're watching the Treehouse Show; your weekly dose 0:03 of Internets where we talk about all things web design, 0:05 web development, and more. 0:07 [Jason Seifer] In this episode of the Treehouse Show, we'll be talking about 0:09 the HTML5 progress element, a cool JavaScript slider, and learning jQuery. 0:12 [Nick Pettit] Let's check it out. 0:18 [The Treehouse Show] 0:20 [Jason Seifer] So first up, we'll be talking about the HTML5 progress element. 0:26 And this is over on the HTML5 Doctor blog, and let's just say the HTML Doctor is in. 0:30 Always wanted to say that. 0:36 So the progress element is something that you're probably 0:38 used to seeing in a desktop application where you'll see a 0:41 progress bar as something is being loaded. 0:43 Now the progress element is actually something that is part of the HTML5 specification. 0:46 And this blog post over on the HTML5 Doctor blog 0:51 walks you through how you're going to use this in your sites. 0:55 Now what would you use this for? 0:58 Well, one example that they give is an HTML5 video that is playing. 1:00 Using the progress element you can actually load up the amount 1:05 of the video that's played so far, or if you have different assets 1:09 that are downloading--you know--for example the video 1:13 while that's downloading you can actually increase the progress bar as it goes along. 1:15 Now there's some nuances to how this is going to work, 1:19 so make sure that you check out this blog post. 1:22 And if I haven't already mentioned the site, it's at the HTML5Doctor.com. 1:24 [Nick Pettit] I feel like we're making real progress here, Jason. 1:29 [Jason Seifer] Me too. >>[Nick Pettit] Cool. >>[Jason Seifer] Twitter therapist said too. 1:32 [Nick Pettit] Next up is the interactive guide to blog typography. 1:34 This is an amazing Web site. 1:39 So on the left side here you have lists of contents, 1:42 and they teach things like layout, line height, visual hierarchy, etcetera. 1:46 So when you click on one of these, the right side will actually 1:52 turn into a demonstration of the concept that's being taught. 1:58 So on the left they talk about visual hierarchy here and how that 2:02 can help you design a better blog. And on the right, you have an example. 2:06 So they also talk about line height, and they focus on--you know-- 2:11 particular aspects of that, but very cool--definitely worth checking 2:15 out if you're designing a brand new blog, and you want it to have really cool typography. 2:20 [Jason Seifer] And don't we all? >>[Nick Pettit] Definitely. 2:24 [Jason Seifer] Next up, we have a project called, the Threesixty-Slider. 2:27 Now this is an interesting take on the usual slider plug-in. 2:30 This is built for jQuery, and I'll just go ahead and show you the example first. 2:33 What this does is this lets you take an image, and then you can see 2:38 on the right side of the screen here there are a couple arrows. 2:41 Now the image they have right here is a car, and if I hold down 2:45 my mouse button and move it to the right, the car spins. 2:48 How amazing is that? 2:51 Do you have any idea how strong you would have to be in real life to 2:54 accomplish the same thing? >>[Nick Pettit] Pretty strong. >>[Jason Seifer] Yeah. 2:56 Luckily we are just using a jQuery plug-in that has a lot of different options. 2:58 So--yeah-- >>[Nick Pettit] That's called leverage. >>[Jason Seifer] Yeah. 3:01 So the way this is accomplished is actually with a series of images 3:04 that go through all the different parts of the spinning animation. 3:07 Now the plug-in lets you configure the different images. 3:11 You can say, "Okay, there's 50 different images that make up the 3:14 full 360 degree spin of the car," or--you know--whatever you want to be spinning on your site. 3:16 And then you put all of those in a directory, 3:22 and the plug-in just magically works 3:25 as you spin through them and scroll through. 3:27 It also can play automatically, so pretty interesting plug-in. 3:29 This would be really useful as you might expect on maybe 3:33 a car dealership site or a lot of e-commerce sites. 3:35 [Nick Pettit] Or just--yeah--e-commerce sites where you are trying 3:38 to sell physical products, and it is helpful to see all different angles of it. 3:40 [Jason Seifer] Dating sites. >>[Nick Pettit] Yeah. >>[Jason Seifer] Whatever. >>[Nick Pettit] You know. 3:44 Just a lot of examples. 3:46 Next up is this really amazing blog post about landing pages. 3:48 So it's called, Step-By-Step Landing Page Copywriting. 3:53 And at the start, they warn you that this is a really long blog post, 3:58 and that's almost an understatement in itself. This is-- >>[Jason Seifer] Now Nick, what is a landing page? 4:03 [Nick Pettit] This is an incredibly long blog post about landing pages, 4:08 which are basically these pages that you use to market your application 4:12 or--you know--market whatever you are trying to market basically. 4:18 It could be for an e-commerce site; it could be for events, etcetera. 4:22 So this is the URL that you might post on Twitter, or you might 4:26 post on whatever advertising channels you're using. 4:31 And it would be the Web site that people type in or click through and go to. 4:34 And it's kind of like a--in a lot of cases--it's a summary of your Web site 4:40 or your product or service or event that just kind of ties all the loose ends together 4:45 and gives people a quick 360 view. 4:52 [Jason Seifer] So basically--you know--if you are trying to sell your app 4:55 this is sort of like a sales funnel to say, "Okay, here--you know--" >>[Nick Pettit] Exactly. 4:57 [Jason Seifer] "--let me get your name, email address; I'll send you a brochure." 5:00 [Nick Pettit] Or--you know--you can have a call to action right on the page. 5:03 So say for example you are trying to market to different 5:06 verticals or different demographics, you might create multiple 5:09 landing pages that you can use to kind of segment your market. 5:13 Then--on those landing pages--you have a call to action to go ahead 5:16 and sign up for your service or buy your product. 5:20 So, this is obviously really important to sales and marketing. 5:23 And, so it's great that there's such an incredibly comprehensive post 5:27 about exactly how to do this. 5:33 And--like I said--this is a very, very long blog post. 5:35 It's still going. >>[Jason Seifer] But it has a lot of really great information. 5:39 [Nick Pettit] Yeah. Lots of great stuff there, so definitely check it out. 5:42 [Jason Seifer] And what a great opportunity for a segue because 5:45 next up we have the jQuery learning center. >>[Nick Pettit] Look at that. >>[Jason Seifer] Yeah. 5:47 So the jQuery learning center is currently a beta site, but as you 5:51 might expect this goes through and teaches you jQuery. 5:56 A lot of different resources for both users of jQuery and authors of jQuery plug-ins. 5:59 Just talking about jQuery--you know--talking about Java Script 101, 6:05 what jQuery is, how to use the different effects and events--even--you know-- 6:10 working with jQuery AJAX. 6:15 So you can actually contribute to this site if you want to--you know-- 6:17 if you see any glaring omissions or some typos; it's hosted on GitHub, 6:21 and so you can submit poll requests or--you know--fix it yourself. 6:26 But so far great site--pretty in-depth posts. Definitely check it out. 6:30 [Nick Pettit] Very cool. Next up is the Web Font Combinator. 6:34 And this is a tool to allow you to test different fonts, 6:40 different font sizes, different colors, etcetera before you actually 6:43 implement them in your Web site. 6:47 So here I can go ahead and select--say--the header, and 6:50 I can choose a font here. 6:56 So I'll pick another font--that actually looks pretty terrible, but you get the idea. 6:59 And then we can go ahead and change the size of it. 7:05 I can change the line height; I can change the color. 7:08 And it looks like we're getting into some '90s web design here. 7:12 [Jason Seifer] Where is '90s web design guy when you need him? 7:16 [Nick Pettit] Basically you can go ahead and click on the first level headline, 7:19 second level headline, and paragraph text, and go ahead and 7:23 combine them to just quickly prototype and see what that's actually 7:27 going to look like before you spend a lot of time 7:32 digging into your CSS and actually--you know--grabbing different fonts. 7:34 I mean--you can spend a lot of time just trying to figure out 7:39 what fonts and colors you want to use on your Web site. 7:42 So this isn't quite as good as doing it in context, but it's at least 7:44 a good tool to get started and just quickly prototype stuff. 7:49 [Jason Seifer] Yeah--get an idea for what kind of fonts you like. >>[Nick Pettit] Yep. 7:52 [Jason Seifer] Next up we have a project called, Icons DB. 7:55 This is a huge collection of free icons that you can use in your application. 7:58 And it's nice because it supports search, and there's also different groups of icons. 8:03 So you can even--you know--search for different colors and 8:09 check out all the different icons they have. 8:13 They are grouped over on the right here, so if you want an acorn icon 8:16 there's a bunch of different acorn icons that you could have. 8:20 [Nick Pettit] So that might be useful if you're making say Facebook for squirrels. 8:24 [Jason Seifer] Yeah. >>[Nick Pettit] Cool. >>[Jason Seifer] Yeah. Acorn book. 8:28 [Nick Pettit] Awesome. >>[Jason Seifer] Yeah. So that's over at IconsDB.com. 8:30 And unfortunately for everyone I think that we are just about out of time here. 8:34 Nick, who are you on Twitter? >>[Nick Pettit] I'm @NickRP. 8:38 [Jason Seifer] And I am @JSeifer. Thanks so much for watching this episode of the Treehouse Show. 8:40 For show notes and more check out our YouTube channel at YouTube.com/GoTreehouse. 8:45 [Nick Pettit] And--of course--if you'd like to watch more videos like this one 8:50 about web design, web development, mobile development, 8:53 business, and more be sure to check us out at TeamTreehouse.com. 8:57 Thanks so much for watching, and we'll see you next week. 9:01 [The Treehouse Show] 9:04

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

Sign up