A large version of this screencast (1234 x 684, 66 Megabytes) can be found here. (Option-click to download.)
Transcript:
Hi, this is Dan from Karelia Software. We create a Macintosh application called Sandvox that makes website creation easy and elegant. A number of people have told us that they didn't realize that our own website is built with Sandvox. Well, it is.. This is our website ..... and here is Sandvox, editing our website. This is a screencast to take you for a little tour of the site to show you how we put it together with Sandvox, Pro Edition. I'm going to assume that you have some familiarity with Sandvox already; if you don't, please check out our introductory screencast at www.karelia.com/screencast.html.
Let's start by taking a look at our home page. The design of our website is "Earth & Sky." We've replaced the standard banner with our own custom image, by dragging an image into the inspector. We checked the box "Do not show the site title" since the title is already reflected in the banner image.
As you can see in the site outline on the left, there are a LOT of pages on our site. We've put only the most important ones on our site menu; most designs only provide enough room for half a dozen or so items up there. You can control whether a page shows up in the site menu by checking "Include in Site Menu" in the page inspector, so you will want to turn that option off for any pages that shouldn't appear in the site menu. We decided to have an explicit link to the home page here in the site menu, so this is checked for the home page.
The title of the home page is "Sandvox: Easy, Elegant Website Creation". Below this, there is some introductory text ... which I can edit right here, updating the version number in preparation for our upcoming 1.2.7 release.
Below this text, we've done something a bit unusual by putting a grid of thumbnails, like photo album, right on the home page. We've actually made the home page into a photo album page. Here's how we did it: If you have a collection selected, and you look at the page inspector, you will notice popup at the bottom for the type of collection. This determines the index of the collection. An index is a list of the pages in a collection, and Sandvox provides several different ways to index that content. Setting a Photo Album index causes Sandvox to show thumbnails of the pages in the collection - which, in this case, is the home page. We don't want all the pages in the site to be seen here, just a few photo pages. If I select one of these photo pages, you'll see we have checked "include in collection index" for this page. For the rest of the pages that we didn't want to show up in the photo album index, we had to turn that setting off.
Now let's turn our attention to the sidebar, which is composed of a number of pagelets. The Apple Design Award badge is an Photo pagelet that we added from the Pagelets drop-down menu in the toolbar. We wanted to have this act as a button and link to Apple's website, so over in the inspector, we set the pagelet to link this image to the Apple Design Award web page. We've also given the image a description. You should do this for all the images on your website to help the search engines and any of your visitors who can't actually see the image. I want to also point out the checkbox here that is not checked, "show on child pages". This means that this pagelet will only be seen on this page, not on every other page of the site.
The pagelet below, on the other hand, has this checked on, so that it will propagate to other pages on our website, since we want this to be available on more than just the home page. This pagelet which is titled "Try it ... buy it" is a Raw HTML pagelet, with bit of custom HTML code that we inserted. Editing HTML directly is a feature that's available in the Pro edition of Sandvox. I'll double-click the pagelet, you can see the HTML that is backing it. This is a very powerful capability, to add your own HTML to your own website, but of course this needs to be created by somebody with the appropriate skills. You could create a similar button graphically instead of using HTML, if you wanted, following the example of the Apple Design Award badge I just mentioned.
Below this is a pagelet linking to our main introductory screencast of Sandvox. This is a movie pagelet, which we added from the pagelet drop-down menu in the toolbar. It shows a very tiny little movie that we made, with an excerpt of the actual screencast, to act as a thumbnail. You can see from the inspector that the quicktime file we chose is called preview.mp4. We've set the movie to automatically play, hide the controller, and always loop. You could do something like this on your website, or you could accomplish the same thing with an animated GIF image.
There are several text pagelets below this that are pretty straightforward. I should point out the pagelet near the bottom with the universal binary logo. We wanted to have some text side-by-side with the graphics, so instead of making a photo pagelet, we created a text pagelet and dragged the image into it. We used the inspector and set the image to be shown alongside the text.
The last pagelet is the Sandvox badge that is inserted automatically for you when you create a new website with Sandvox. Of course you could remove this, but who would want to do that? :-)
Something I should mention about the home page that you can't see here is the code injection, another feature you get from the Pro edition of Sandvox. If I choose Code Injection from the Site menu, you will see that we have some PHP code that deals with setting cookies so we at Karelia Software can keep track of how people found out about Sandvox. If your web host supports PHP or other server-side scripting technologies that you are familiar with, you can do something like this yourself; you can usually configure your web server to pass all your HTML files through a the scripting processor. We also have some customization to the CSS styles defined here as well, that slightly tweaks the look of the Earth & Sky design, because we wanted the font colors to match our banner image, and also some styles used by our custom HTML, such as our download button.
OK, now let's take a look at our blog page. We created the blog by choosing "Weblog" from the Collections drop-down menu in the toolbar. There's an RSS badge in the sidebar, which gets automatically inserted for you when you create a weblog. Below that are a couple of other text pagelets. Each time we want to add a blog entry, we just create a new page within this collection. Usually it would be a text page, but in this case, I'm going to add a movie to the blog. I want to make a new page showing this screencast. First, I make sure that the weblog is selected in the site outline, and then I choose a new movie page. I'll call it "New Screencast: How the Karelia Website is Built with Sandvox". I'll set the movie file using the inspector later, since I'm busy recording the screencast right now. :-)
Now let's check out the FAQ page. The title of the page is Frequently Asked Questions but the Site menu shows it as FAQ. You can give a page a shorter name for the site menu using the inspector here. As you can see here in the site outline, our FAQ is really a collection, even though we don't explicitly link to the individual entries. We did this because we wanted to have some structure to the page, where each question was a new sub-heading. So we are showing an index of the contents, without actually linking to each page. How did we do that? We went into the inspector to customize the index. Notice the options below the disclosure triangle; here we un-checked the options to link to the pages. By using the inspector like this, you can customize the indexes on your own website to go way beyond the set of preset collections that we provide. What's nice is that if I need to add another FAQ entry later, I can just create a new page in this collection.
Let's look at few more aspects of the Karelia website, then we'll be done.
The "Pro Users" page is, yes, another collection. Collections are a really important aspect of Sandvox, as you can see. I've shown you a blog-style collection which just duplicates the text in an enclosed page, and a photo album collection which shows you a grid of thumbnails -- but in this case, we are just showing the title of each page, so that the visitor of the site can click on the link to find out more. Notice the inspector, with another customized index. We wanted to be able to arbitrarily arrange the items, so we turned off sorting.
Our page for the Karelia iMedia Browser is a collection, but it doesn't have any sub-pages, at least not currently. We did that so that we could get a URL that didn't end in .html, which makes for a simpler URL, and it gives us the ability to add sub-pages later. To build the content of the page, we dragged a screenshot image in and put it alongside the text. Over on the sidebar, we put in a few pagelets; there is a raw HTML pagelet for the download button, similar to the code we used on the Home Page for Sandvox, and then some text pagelets.
The "Buy Now" page is all custom HTML with some JavaScript and PHP, some of which is brought in with code injection. This works with some back-end code we wrote on the Karelia server that deals with payment processing. Sandvox allows you to put PHP or other scripting languages into a raw HTML page, but it doesn't actually know how to use it, so you don't see the real page contents here, as you would see on our live website.
Lastly, I want to mention The Sandvox Site gallery, which the visitor can get to from a link on the home page. We made this a photo album so the visitor would see thumbnails of the websites as a grid. So its index page is a photo album. You'll see that we have turned off the sidebar entirely for this page, using the inspector, which allows us to see more thumbnails across. If I go visit a page in the collection, notice that the individual pages in this collection are actually text pages, not photo pages. We did it this way because we wanted a lot of descriptive text and a smaller image of each website. So even though these are text pages, that doesn't stop us from indexing them as a photo album! What we did to make this work was to give each of these pages a custom thumbnail image here in the inspector, and this image shows up in the photo album entry for each page.
There are a number of other pages on our website, but this should give you a sense of what it took to put our own site together. If you use Sandvox Pro Edition, you can make a sophisticated website that looks good and is easy to maintain. Be sure to check out our Sandvox documentation at docs.karelia.com or from the Help menu in Sandvox. Thanks for watching.