Subtitles of the Movie

In this tutorial we begin our examination of the four projects that we are going to build. Before we actually take a look at those projects, I want to mention something that I'd like you to keep in mind while you're examining these projects. Now, almost all of the features that were used in building these projects could be used with any of the other toolkits so keep that in mind because some of these projects are built with functionality as a focus rather than appearance and others are built more with appearance in mind due to the type of project. So don't take the appearance of a given project as a pure reflection of the capabilities of the associated toolkit. Rather, keep in mind that they look that way because I decided to build them that way. So they are really more a reflection of my personal decisions of implementation rather than any limitations of the actual toolkits. So in short, if you don't like the appearance of a project, you can blame me, not the library. So keep your mind open until you actually get to try the library before you judge it based on what the projects look like. OK? So with that in mind, let's go ahead here and take a look at our art gallery which was built in Prototype. So what we have here is we've got kind of this art gallery and whenever we select a category up here at the top, we initialize an AJAX call and populate our data in here. So if I were to select say digital paintings. I see some nice little animation effects going on. I see data loaded up. Whenever I click on one of the images, I see another animation set. I see the image get a little bit larger there and I now have some information about the image down below and over to the right-hand side. I also have a slider so whenever I click, it zooms in here and that uses another animation effect called Scale and I can now click and drag the picture around to mov it around to see more of the details. OK? So that's the project we're going to be building with Prototype and of course whenever you click on different links up here at the top, other animations occur. OK. So that's Prototype. And let's go ahead here and let's take a look at Dojo. So I'm going to go ahead and change the address here. Now, the Dojo project here is the front-end tool blog and again, here in the middle we have some AJAX-returned information and it's giving us the first ten records here that's in our blog. And of course, as you can see, it's kind of difficult to read that information but if I click on that, it scales up allowing me to read the information. So we're doing some animation there. We're also doing some selection and event handling. Whenever I click on a topic inside of the blog here, it ends up returning just the records that match up to music. So over to the left I have a navigation as well. This is a fish-eye list and whenever I hover, it ends up popping out. It's a little bit of fun. But whenever I click it loads in that data as well. And so that's the fisheye. Over to the right-hand side we have a slideshow that we can interact with. Underneath that we have a See Larger Image and whenever I click on that, what's going to happen is I get a light box where the image shows up and everything else kind of grays out. Whenever I close the light box, I see that the slideshow starts up again. We also have a survey here so if I click on the survey, it's going to bring up the little dialog box here which we can then move around and type in information and we also have some other things going on with the text fields themselves, including form validation and other elements. So, alright? So that's the Dojo project. Let me go ahead and move on to the YUI project. The YUI project is a blog post maker and it's a, more or less just kind of a simple form here. We have a place where we can type in the title and, of course, this panel here, this is given to us by the YUI. We have the category and if I click in Category here and I start typing something in, I get an auto complete so I can select the category there and the date, I can click on this Pick the Date Button and it's going to give me a date picker. If you notice there's also a little bit of animation on that. So whenever I click away, it, well, whenever I select rather it fades out. We also have this Text Editing Tool section where I can click in there and type in various things but the key feature here is that it's going to allow me to HTML formatting that would be appropriate for putting into a blog. And then of course there's the Submit or Clear Entry down at the bottom. We do use AJAX there to get the category information. So that's a project that's focused more on functionality than necessarily about appearance. And the last project we're going to take a look at here is the jQuery project and this is a request form where we can select a person's name. We can get information about that person returned to us through AJAX. We have an auto-generating date. Then we also have where we can click to select the date, type in comments, type in contact info and down here we end up using our jQuery quite a bit to select and manipulate our different elements here and by clicking on the checkbox or clicking in the text box, we end up toggling the other item. So if I type in, I also end up seeing that it does a calculation for me automatically and then if I click on one of these, I end up seeing a slide effect happen. If I move away from that, it disappears. So if I don't have any hours put in there. And then lastly we have the Send Request which would send the information for us. So again, this project was focused more on the functionality behind the scenes with an actual form that you might encounter in a business. So those are the four different projects that we build throughout the video tutorial series later on after examining the libraries a little bit more in depth.