Webvanta Team Blog

Working with Dates

Wed, 11 Nov 2009 04:57:59 GMT

You can use dates that are associated with an item in various ways.

You can, of course, display dates. Unlike text fields, dates are stored in an internal format that understands that it is a date, so you can choose the format when you display a date. (See Formatting Dates for details.)

You can also use dates as conditions, and there is a special value "now", which is just what you'd expect. The following example shows all events with a start_date after today:

<w:kb:item:each type='event' condition='start_date > now' sort='start_date'>
  <h2><w:name /></h2>
</w:kb:item:each>

You can also use dates in stand-alone conditionals. This code displays all events but adds "(Past)" after an event whose date is past:

<w:kb:item:each type='event' sort='start_date'>
  <h2><w:name /><w:if condition='start_date < now' > (Past)</w:if></h2>
</w:kb:item:each>

There's also a date setting that automatically affects visibility of items. If you set the Published At date after the current date, then the item will not appear until that date arrives. (The Published At field is included on all standard item types, and you can choose to include it or not on custom item types.)

Selecting Items Based on Date

You can use any of the usual comparison operators: <, >, !=, =, >=, and <= .

The value that you compare against can be, as in the example above, "now", which is the current date and time. You can also compare to a date, formatted as YYYY-MM-DD, or a date and time, formatted as YYYY-MM-DD HH:MM. For example,

condition = "start_date >= 2010-01-01"

selects items that start after the first of January 2010.

If you want to get fancy, you can also write simple date equations, and Webvanta understands days, hours, and minutes. So you can write:

condition = "start_date >= now + 3.days

which specifies that the start date is greater than or equal to three days from now. Note the use of the period, with no spaces, to separate the number from the time unit (days, hours, or minutes).

Simple Date-Based Conditionals

The w:if and w:unless statements accept only a few simple conditions. You can use any of the comparison operators, but you can only compare against "now". For example,

<w:if condition = "start_date > now">
   (use this code only if the start date is in future)
</w:if>

Working with Categories

Tue, 10 Nov 2009 22:27:41 GMT

Categories are one of the most powerful features of the Webvanta database system. Using the built-in category support, you can organize your information in all kinds of ways.

First, it's important to be clear about the difference between categories and item types. Each item type can have a different set of fields that defines the item's information. There are standard item types for such things as articles, blog posts, and links to various kinds of external items, and you can create custom item types with whatever fields you want. Example custom item types are products, companies, press releases, and FAQ items.

Categories, on the other hand, divide items of the same type (or across multiple types) into groups, typically by their topic or subtype. For example:

In a product catalog, you might have a single item type "product", and categories to specify the type of product (chairs, tables, accessories, etc.).

In an information portal site, you would typically use the categories to define the topics being covered, and then assign every article, blog post, book, or link to the appropriate category. The category (topic) page then shows all the items related to that topic, regardless of type.

Selecting a Category Directly

To work with a category you must, of course, specify the category in some way.

The simplest approach is to specify it directly:

<w:kb:category name='Cats'>
   (category context is set to 'Cats' for code placed here)
</w:kb:category>

You can also use a category ID, instead of the name, which makes for less readable but more robust code; it has the advantage of continuing to work even if the name of the category is changed.

Once you've set the category context, you can access the category's name and description easily:

<w:kb:category name='Cats'>
   <h2><w:name /></h2>
   <p><w:description /></p>
</w:kb:category>

Iterating Through Categories

While there are times when selecting a category manually in this way is desirable, more often you'll want to specify the category automatically in one way or another.

For example, this code displays a list of all of the top-level categories:

Accessing Subcategories

You can nest categories to any depth, though usually it is counterproductive to have more than two or three levels.

This code shows a list of categories and their subcategories.

<ul>
  <w:kb:category:each>
    <li><w:name />
    <ul>
      <w:each relative='children'>
        <li><w:name /></li>
      </w:each>
    </ul>
    </li>
  </w:kb:category:each>
</ul>

The w:kb:category:each iterator repeats the entire block of code following it once for each top level category. Inside of that code, we have another loop; the w:each relative='children' iterator repeats the code in the block that it creates for each subcategory of the current category.

Displaying the Items in a Category

You can use a category setting on the w:kb:item:each iterator to display all the items in a category. For example:

<ul>
  <w:kb:item:each category='Cats'>
    <li><w:name /></li>
  </w:kb:item:each>
</ul>

in this w:kb:item:each statement, you cound provide a comma-separated list of category names (e.g., Cats, Dogs, Birds) and it will display all items in any of those categories.

In an iterator loop, or in a page context that sets the category, you can access the current category as "current". For example, this code lists all of the items in each top-level category:

<w:kb:category:each>
  <h2>Category: <w:name /></h2>
  <ul>
    <w:kb:item:each category='current'>
      <li><w:name /></li>
    </w:kb:item:each>
  </ul>
</w:kb:category:each>

Using Categories in Navigation

If you include a category page in the main menu, it has a magic behavior: it expands into one menu item for each top-level category. So if you put a category page into the menu and just create categories, each category will have its own menu item.

For an information portal site, in which the top-level categories are the primary navigation, put the category page as a top-level menu item. Each category will have its own menu item, with a drop-down menu for its subcategories.

On a business site, often you want to condense all the categories under one main menu item, using a drop-dowm menu to list the categories. To do this, create a menu item "Resources" (or whatever), and then drag the category page under it as a submenu item. This will magically expand to make a submenu entry for each top-level category.

Sometimes you may have categories that you don't want to include in the automatic menu creation. For any such categories, mark them as "Special" in the category editor and they will be excluded.

Using the "Current" Category

We gave an example above of using category="current" to set the category inside of a loop that is repeating for each category.

Threre's another common situation in which "current' is an important way to set the category. If you are on one of the special knoweldgebase page types -- category, list, or item -- then the category may be passed to the page via the URL, and then made available as "current".

For example, here's a simple category page:

<w:kb:category>
  <h1>Category: <w:name /></h1>
  <w:kb:item:each category='current'>
     <p>Item: <w:name /></p>
    </w:kb:item:each>
</w:kb:category>

Here, it is w:kb:category that does the magic of capturing the category from the URL and making it available as "current".

Manually Creating Paths to Category Pages

If you want to create the URL for a specific category page, you can construct it by adding the category name as follows:

/category/category-name-here

Assuming that the slug for your category page is "category". Note that this simplified URL, including only the name of the category and not its ID, will not work if there are multiple categories with the same name, or a page with a slug that matches the category name. Also, the category name must be transformed into a "url-friendly" format, changing spaces to hyphens, for example.

It is more reliable to include the category ID in URL. You can find the category ID by going to Database Setup > Categories, and then hover over the edit button for the category and note the ID in the URL. You can use the ID number alone, or append the title to it for SEO value.

Automatically Creating Paths to Category Pages

If you're using an iterator, or if the category has been set by the page context, you can use w:path to generate a path to the category page.

For example, the code below modifies our earlier example, which generates a list of categories, linking the category name to the category page.

<ul>
  <w:kb:category:each>
    <li><a href="<w:path url='/category' />"><w:name /></a></li>
  </w:kb:category:each>
</ul>

The url attribute in the path statement sets the particular category page to use, so you can use different category pages in different parts of your site.

The path statement will create a URL like:

/category/12345-category-name

Using Site Search

Tue, 10 Nov 2009 19:54:08 GMT

Webvanta includes a built-in search engine that indexes all of your site's database content to provide high-quality search results.

You can configure which item types are included in the search, and to which pages the search results link. You can also modify the search results page just like any other page.

The search index is updated about once per hour, so there is a small delay between when you change content or settings and when the results reflect those changes.

What Is Searched

By default, all Knowledgebase content (articles, blog posts, events, books, and so forth) is searched, as are all custom item types. If you want to exclude a custom item type from the search, check the box labeled "Private" in the custom item type definition. (Note: currently, only the 'standard' fields in custom item types are searched, so if you add custom fields they are not searched.)

This search function searches your database, not your site's pages. Site content that is placed directly in editable regions of pages or in templates is not searched.

Displaying the Search box

Your starter site includes a snippet named "kb_inline_search_box" that you can include anywhere you want to display a search box. The code is as follows:

<form action="/search" id="searchbox" method="post">
<div>
  <input class="fieldSkybox" id="search_text" name="search_text" type="text" />
  <input class="searchButton" src="/webvanta/img/template/1.0/button-search.gif" type="image" value="search" alt="Search" />
</div>
</form>

You can change the search button to a different graphic or make changes to the corresponding CSS to change the visual appearance of the search box.

Displaying Search Results

The search results are displayed on a special page that has the slug of "search_results" and is set to the page type "Search".

At its most basic, the search results can all be displayed on a single page:

<w:kb:item search="true">
<h1>Search Results for "<w:search_query />" (<w:search_total_found />)</h1>
<ul>
  <w:each search="true">
    <li>
      <a href='<w:path url="default"/>'><w:name /></a><br />
      <p><w:description /></p>
    </li>
  </w:each>
</ul>
</w:kb:item>

This code uses the standard item iterator, with the search option that causes it to display the search results. (We show the unpaginated version here to start with the simplest example, but you should generally use the paginated version described below.)

Note that this code uses two special bits of WebvantaScript that provide access to information about the results:

<w:search_query />	Displays the search text entered
<w:search_total_found />)	Displays the number of results

Pagination

The example above is acceptable if your site's database is small (a few dozen items) and you don't expect it to grow. But if you have, or expect to have, 50 or more items, you should include pagination for the search results. (The unpaginated list will be slow to generate if you have more than a few dozen results, and it will be truncated at 200 results.)

Here's an example of a search results page with pagination:

<w:kb:item:paginate search="true" page="auto" limit="25" sort="updated_at DESC">
  <h1>Search Results for "<w:search_query />" (<w:search_total_found />)</h1>
  <w:pagination_widget search="true" />
  <ul>
  <w:each>
    <li>
      (<w:type_label />, <w:updated_at format="%b %e, %Y" />) <a href='<w:path url="default"/>' target='_blank'><w:name /></a><br />
      <p><w:description format="strip_tags" truncate='120' /></p>
    </li>
  </w:each>
  </ul>
  <w:pagination_widget search="true" />
</w:kb:item:paginate>

A few notes on the code here:

The limit parameter on the w:kb:item:paginate statement sets the number of items displayed per page
<w:type:label /> shows the item type for each result
The "strip_tags" option on the w:description statement removes any HTML markup, which is necessary when truncating the length to ensure that there is no broken markup

Item Pages

The search results page links each item in the results to an item page that is appropriate for that item. For example, articles may be displayed on one item page, while project profiles are displayed on another.

You determine which pages are used for each type through the following settings:

For standard item types, such as articles, blog posts, links, books, and events, enter the slug for the appropriate item page in the View Path field of the item type (Database Setup > Item Types, then click the pencil next to an item type)
For custom item types, enter the slug for the appropriate item page in the View Path field of the custom item type definition form.

Advanced Search

Currently, advanced search, in which there are multiple fields for more precisely specifying the search, is not available as part of the standard Webvanta platform. Because of the uniqueness of each site's needs, we provide advanced search as a custom feature, which has a $500 setup fee. Contact us if you need this.

Using the Rich Text Editor

Tue, 14 Jul 2009 02:24:20 GMT

Using the Rich Text Editor

The Rich Text Editor (RTE) allows you and your client to edit HTML content without seeing any code: it is a wysiwyg environment much like a stripped down version of Word.

The RTE mode is enabled automatically when editing the site via the in-place editor, as long as there is no script in the code being edited. It is best to keep script in a separate region of the page, so the HTML code that represents the content can be edited with the RTE without worrying about affecting the script.

Wysiwyg text editing in an HTML environment has many challenges. You're counting on the editor to insert sensible HTML markup with a minimum of information, other than the raw text itself. The visual appearance of any given HTML markup depends, of course, on the stylesheets applied to it, and it may also depend on surrounding HTML markup to trigger certain rules in those stylesheets.

Because of this complexity, all wysiwyg editing that creates HMTL is an approximation, both in creating the optimal code for the content, and in creating a preview that represents how the text will look on the page, while it is being edited.

You can control both the stylesheet that is applied to the editor region, and the styles that are shown in the Style picker on the editor toolbar. See Customizing the Rich Text Editor for details.

Editor Toolbar

The RTE toolbar has many options, which are largely self-explanatory with a little exploration. For "excerpt" fields, which are small but sometimes need HTML content, a stripped down version of the toolbar is provided.

For details on what each icon does, refer to the editor documentation.

Cut, Copy, and Paste

In addition to the usual cut, copy, and paste commands, available via the toolbar or keyboard, you can paste text in two special ways by choosing the appropriate button:

Paste as plain text: all HTML markup is stripped out.
Paste word document: retains most styling from Word while cleaning up the markup.

Styling Text

To style text, first select it, and then click a button in the toolbar or choose an item from one of the toolbar's pop-up menus.

To preserve CSS formatting, it is best to avoid using the editor controls, when possible, except for choosing the Format and optionally a Style.

The Format is really the tag: p, h1, h2, etc.

The Style is chosen from a set of styles that you can define by customizing the editor settings. This lets you create a set of predefined styles from which your client can choose.

Inserting Images

To insert an image, position the cursor where you want to insert it, and click the image button. In the dialog that is displayed, enter the path to the image.

If you uploaded the image directly to your Webvanta site, and did not use a zip file to create a folder, then the path should be in the format /filename.jpg. If you are loading an image from an external site, include the full URL, starting with http://.

Enter the alt text to describe the image.

You can enter the dimensions of the image, but keep in mind that this is providing a size instruction to the browser, not resizing the image on the server.

If you want a link on the image, you can specify that on the Link tab.

You can also specify alignment and padding options, apply classes, and so forth.

Adding Links

To attach a link to a piece of text, select the text and click the Link button. Enter the URL for the link. If you want to force it to open in a new window, click the Target tab and choose New Window (_blank).

Using Cut and Paste

There are icons in the editor's toolbar that you can use for cut and paste, but your browser's security settings will probably block them from working. This is because access to your system clipboard is prohibited by default, and you don't want to enable it broadly because you wouldn't want arbitrary web sites being able to access your clipboard.

You can always use ctrl-X for cut, ctrl-C for copy, and ctrl-V for paste, so just ignoring the icons is the easiest fix.

If you do want to change your browser's security settings, here's where to look. To configure Firefox for this, enter about:config in the address bar; see this article for more details. You should only enable clipboard access on the specific site(s) you trust.

For IE7 and IE8, the default behavior is to prompt the user (on all sites) asking for clipboard permission; to suppress the prompt, click Tools, Internet Options, Security tab, Internet, Custom Level. Under Scripting, click Enable for Allow Programmatic clipboard access. See this article for details.

Using Full-Screen Mode

When you are editing a large body of text, click the Full Screen icon (the first icon in the top row) or press Ctrl-Alt-Enter (Ctrl-Option-Enter on a Mac). The editor region now fills the browser window. (It may then be too wide for easy editing, in which case you can simply resize the browser.)

To return to the normal view, click the Full Screen icon (or press the shortcut key) again.

Cheat Sheet

Ctrl-C	Copy selected text
Ctrl-X	Cut selected text
Ctrl-V	Paste text

Ctrl-Z	Undo
Ctrl-Y	Redo

Ctrl-B	Bold
Ctrl-I	Italic
Ctrl-U	Underline

Ctrl-L	Open Link window
Ctrl-Shift-S	Save
Ctrl-Alt-Enter (Windows) Ctrl-Option-Enter (Mac)	Resize to fill browser

Credits

The RTE is based on the open-source FCKeditor.

Working With Related Assets

Sun, 25 Oct 2009 04:11:16 GMT

When you create a custom item type, you can define a field as being a Related Asset. Typical uses of this capability include:

Associate a number of images with a project
Associate a logo image with a company
Associate a PDF document with an item

Defining a Related Assets Field

When creating a custom item type, add a field and set the field type to Related Asset.

If you want the pop-up list for this field to show all assets, leave the Type Options field blank. To limit the pop-up to assets with a certain tag (or tags), put the tag name (or a comma-delimited list of tag names) in the Type Options field.

By default, only a single asset can be selected. If you want to be able to select multiple assets, put an asterisk in the Type Options field (after the tag names, if any).

Accessing Related Assets

When you are in an item context (such as on an item page inside a <w:kb:item> block, or in a <w:kb:item:each> loop), you can access the related assets (assuming they are images) as follows:

<w:assets:each>
  <img src="<w:path />" alt="<w:caption>" />
</w:assets:each>

As always, you can include a rendition name in the w:path statement if you want to access a size other than the original (see Creating and Accessing Image Renditions for details.

Another Approach: Start With the Assets

Note that you can also define associations as part of the asset's metadata. For example, when you upload (or update) an asset (uploaded file of any type), you can assign it to one or more categories or tags. So you could, for example:

Make a category "chairs"
Assign the "chairs" category to all photos of chairs
Assign the "chair" tag to each product that is a chair

You can then access all of the chair photos whenever you are displaying a chair product page.

For more details on this approach, see Accessing Images and Other Files.

Working with Related Items

Sun, 25 Oct 2009 00:32:55 GMT

When you create a custom item type, you can define fields as being of the type "related item". This provides a connection to one or more database items of any type.

Defining a Related Item Field

To add a related item to a custom item type definition, create a new field and choose Related Item as the item type. Enter any name and label, and then enter the type of the item to which you want to connect in the Type Options field.

As an example, suppose you have a custom item type named Company, which has fields for Name and URL. You have another custom item type called Product, and you want to associate a company with each product.

Add a field to the Product item type, which for the purposes of our example we'll name "manufacturer". Set the field type to Related Item, and enter "company" in the type options field.

The form for a product will then include a pop-up list of all of the companies.

Normally, only a single item can be selected. If you want to enable multiple selection, add an asterisk after the item type name (e.g., company*).

Accessing Related Items

When you want to display the company information, use the <w:get ... /> statement. To display the company name and URL, as in the example above, the code would be:

<p>Company name: <w:get name="manufacturer[0].name" /></p>
<p>Company URL: <w:get name="manufacturer[0].url" /></p>

The "[0]" is necessary when accessing a single item, because there can be multiple items. If you had multiple items, you could access them individually using [0], [1], [2], etc., but more likely you wouldn't know how many there were and would want to repeat some markup for each of them.

Suppose, for example, you have a course catalog. In the item type "class" you have a related item field called "instructor", which connects to the item type "person". Person, in turn, has a field for the person's name.

To display the list of the instructors, you'd use the following code:

<w:for_each in="instructor">
  <w:get name="in.name" />
</w:for_each>

This construct says to repeat the inner statement for each related item in the instructor field. The syntax "in.name" in the inner statement says to get the name field for whichever person record is being accessed in the loop.

Don't Forget the Item Context

To use any of the code above, there must be an item context set, since that's what determines which item is accessed. If you're on an Item Page (a special page type), then the item ID is automatically captured from the page's URL, and you just have to wrap the page's markup in:

<w:kb:item>
  (page contents)
</w:kb:item>

If you're displaying multiple items, typically you'd be on a regular page, and you'd use code something like:

<w:kb:item:each type='book' category='cat'>
  (markup to repeat for each item)
</w:kb:item:each>

which would repeat the code between these two statements for every item of type book that is assigned to the category cat.

Using Related Items with Standard Item Types

You can also define a related item for a standard item type, such as an article. This is typically used if you have created a Person item type and want to connect people to articles as authors, instead of just entering a name in the author field. This makes it possible to show all the items from a particular author, for example.

To define a related item for a standard DB item, you set config settings as described in Using Configuration Settings.

Working With User-Generated Content

Sun, 28 Dec 2008 19:58:13 GMT

Visitors to your site can add their comments to any database item. This includes your own articles and blog posts, as well as links to other web sites, books, and anything else you put in the database. You can, of course, omit commenting if you choose.

Anti-Spam Measures

Every comment submitted is double-checked for spam, first with a robot-blocking technique and then using a third-party service called Akismet. If the comment gets a low “spaminess” score, then it is posted automatically. If it gets a high score, it is stored but is not published unless you review and approve it.

Messages sent via the contact form are checked in the same way. In addition, both the contact form and the comment form use other anti-bot coding measures to minimize the number of automated submissions you’ll have to deal with.

Reviewing Comments and Messages

To review all all of the pending comments, click Site Admin > User Comments. For each comment, you'll see whether or not it is currently considered to be spam. To accept a comment that has been blocked, click the thumbs-up; to mark a comment as spam, click the thumbs-down. Click the red x to delete a comment entirely, and the pencil to edit it.

You can also view comments related to a particular item in the database by click on the comment icon at the right side of the list page.

Contact Message Delivery

When a message is submitted on your site’s contact form, it is emailed to the address you used for the initial user account, assuming it passes the spam test.

You can change the email address, or even provide a list of email addresses (comma-separated) by editing the admin_contact_mail configuration setting (accessed via Design > Config Settings).

Setting Up Your Design

Mon, 24 Nov 2008 03:48:21 GMT

There’s a variety of approaches you can to take for converting an existing site to Webvanta. In this article, we’ll start with the simplest method, and then gradually show how to make additional changes to take more advantage of Webvanta’s unique capabilities.

The basic steps are as follows:

Upload your files
Create template(s)
Create pages

Then come the optional refinements, which enable you to realize the full value of the Webvanta platform:

Create a page template by extracting from your sample page just those parts that are the same for every page (header, navigation, footer)
Move page-specific content into editable regions so it is managed by the content management system (CMS)
Revise the navigation code so it uses dynamic menus created by the CMS
Put any content used in multiple places into snippets
Move structured content into the database
Make the CSS and JavaScript files editable in your browser

Other enhancements that are available to you for free as part of the Webvanta platform include:

Change your contact page to use our contact form, and gain spam protection and database logging.
Incorporate our privacy policy if you don’t already have one.
Set up accounts for others who you want to be able to edit the site.
Add RSS feeds.
Add site search.
Add other built-in features such as an integrated blog, photo gallery, resources page, or even a complete information portal.

Super-Quick Site Import

Note: if you want to set up your site the right way to begin with, skip this section and continue with Basic Site Conversion. This section explains a quick-and-dirty way to get an existing site moved over quickly.

There’s a super-quick way to get started, if you have a complete static web site to begin with: zip up all the files that make up the site and upload the zip file to your Webvanta site (Content > Image & Files > Upload File). Webvanta will automatically generate a matching directory structure, unpack all the files in the zip into it, and register the files in the content management system.

In most cases, this will yield an immediately working site on the Webvanta platform. You’re running your site entirely outside of our CMS and database, so you’re gaining little benefit, but at least all your files are moved over, and you can operate in this mode while you work your way through a more complete conversion.

Note that Webvanta does not support PHP or other server-side scripting in your pages. To maintain security and performance for everyone, we only allow our own back-end code to run on our servers.

One caution: all files you’ve uploaded in this way are always publicly visible. In your Site Admin control panel, you can enable or disable viewing of your site, but this affects only pages produced by the Webvanta CMS and database, not .htm or .html pages that you upload. As you convert your site, you’ll eliminate all of these .htm or .html pages.

See Uploading Files for details.

Basic Site Conversion

Upload images, PDFs, Flash files (SWFs), and video files

Assuming you skipped the super-quick import as described in the preceding section, zip up all of the non-HTML files that make up your site, and upload the zip file via Content > Images & Files > Upload File.

If you did the super-quick site import, you’ve already uploaded all your files, including the HTML files. As you convert the site, some of those files will cease to be needed.

If you uploaded your CSS and JS files as part of the zip file, then they should be ok for now. To make them editable in the Webvanta interface, you may want to convert them as described later in this article.

Create template(s)

Now you need to create the HTML content for your site. In the Webvanta system, every page has a template. Typically, the head section of the HTML is entirely in the template file (or in a snippet referenced there), as are the site’s visual header, footer, and navigation.

To make the most out of Webvanta, you’ll want to move all page-specific content out of the templates and into pods, reducing the number of templates to a minimum (which keeps your page designs consistent and simplifies maintenance). But to get started, you can go to the other extreme: create a template for each page. You can use the entire HTML for a page as a template file.

Note that you cannot upload any PHP or other server-side code. If your site includes such code, you may want to start by capturing the HTML for your fully rendered site, using the browser’s “Show Source” feature, to provide the initial code for the template.

All CSS and JS files are at the root of your site, so if you have these stored in folders in your existing design, you’ll need to edit the file paths in the template HTML to eliminate everything except the filename.

Pages in the Webvanta system don’t require any filename extension (e.g., you can use /services instead of /services.html). You can include these extensions when you name your pages, but it is cleaner to eliminate them. If you don’t use the extensions, then be sure to fix any links in your template files to remove the extensions.

If you use HTML pages uploaded as assets, the extension is required. Remember that such pages are outside of the view of the content management system and should be used only temporarily during the process of converting a site.

See Using Templates to Define Page Structure for more information on using templates.

Create pages

With traditional web site design, you create a file for each page. In Webvanta, you create your pages with the content management system.

Click Pages, and then click New Top-Level Page. Enter the page title (which appears in the browser title bar) and the slug (the final part of the URL, after the last slash). You can enter the keywords and description (for SEO) now, or defer that task until later.

If you created a separate template for each page, taking the minimal conversion approach, then all the content is in the templates and all you need to do to create the page is to choose the corresponding template from the pop-up list.

In general, though, you'll want to use a template that has non page-specific content, so you can use the same template for many pages, and then set the page-specific content either through the page admin screen or using in-place editing on the site itself.

Note that page slugs cannot have slashes in them. If you have pages that have a folder name in their path (e.g., /products/chair), then you’ll need to first create a page for the first level (products), and then create a “chair” page as a subpage of “products” (click the green circle with the plus sign next to the products page in the page list).

See Creating and Managing Pages for more information.

Fix Up File Paths

If conventional site designs, you may have relative paths to files, such as 'scr="img/picture.jpg" '. With Webvanta, you should start all file paths with a slash, so this changes to "/img/picture.jpg". And if you uploaded files without creating a matching directory structure, you'll need to update the path to match.

Give It a Test Drive

At this point, you should be able to access all the pages you have converted. If you encounter problems, here’s some things to check:

If you’re getting “page not found” for any pages, make sure you created a page with the proper URL.
If images are missing, make sure you uploaded them, and that the folder structure you uploaded matches the references in your code. If you uploaded images individually, they are at the root of the site.
If JavaScript behaviors are missing, make sure your template references any required JS files, and that the JS files have been created or uploaded. If you’ve created the JS files through the CMS, be sure any references to the file names have no path in front of the name.
If styling is missing, make sure your template loads any required CSS files, that the CSS files have been uploaded or created, and that the paths are correct.

Refinements to Gain the Full Benefit of Webvanta

At this point, you should have a functional site running on the Webvanta system. To gain the full benefit of the Webvanta system, however, you’ll need to separate out your editable content and your navigation from the templates.

Move page-specific content into editable regions so it is managed by the content management system (CMS)

The first step is to create as many templates as you need to define the different types of pages on your site. Each template should have no page-specific content but everything that repeats for all pages of a type.

See Using Editable Regions for Page-Specific Content for details.

Revise the navigation code to use dynamic menus

You can create navigation however you'd like. If you use Webvanta's dynamic menu features, you can build menus with any visual design and html structure you'd like, while your (or the content owner) sets up the menu independently of the code, via the Page admin screen.

See Creating Navigation for more information.

Put any content used in multiple places into snippets

Snippets are just named chunks of content, either code or text, that you can use anywhere by name. So the analytics code that you need in every template, you can put in a snippet of that name, and then reference it in each template. Now you have a single place to maintain that code.

See Using Snippets for details.

Move links and any other structured content into the database

The real power of Webvanta comes into play when you build your site around structured content stored in the database. It could be news items, events, resources, project profiles, FAQ items, whatever.

See Setting Up Your Database Structure to get started with the database.

Add redirects

If your site’s URLs have changed and you want to redirect them, you can enter a list of translations from old to new. Note that this capability is limited to processing the string after the base URL; for example, in www.webvanta.com/help, only the string “help” is processed.

Convert CSS files

There are two different ways to set up your CSS files on Webvanta; each has its pros and cons:

Upload CSS files via Images & Files. This is the best approach for CSS library files or others that you don't need to modify. For CSS files that you will be editing, it is better to set them up through the CSS control panel.

To use the second method, which enables you to edit your CSS online, click Design > CSS > New, copy the contents from your first CSS file, paste it into the form, enter the name of the file in the Name field, and click Create. Repeat for each of your CSS files.

Note that all CSS files created in this way reside at the root of your site (not in folders).

You may need to edit image file references if the folder in which images are stored is different on the Webvanta site.

See Styling Pages with CSS for details.

Convert JavaScript files

JavaScript files, like CSS files, can be edited through a form in the web browser, if they are entered via the JS control panel. Click Design > JS > New File, copy the contents from your first JS file, paste it into the form, enter the name of the file in the Name field, and click Create. Repeat for each of your JS files.

Note that all JS files created in this way reside at the root of your site (not in folders).

See Using Javascript for details.

And there's more...

At this point, you should have something close to your original site, built with Webvanta. Now it will be much easier to maintain.

And now you can explore the additional features Webvanta makes it easy to add, including:

Blog
Article library
Bookstore
Photo gallery and slideshow
Video player
Information portal
Contact form
Custom forms

Where Are My Files?

Fri, 23 Oct 2009 03:41:23 GMT

With the Webvanta system, much of your content is stored in the database, so there's not the same sort of literal mapping to the file system that you're probably accustomed to for each piece of your site. For example, a template, or a page, is a structure in the database, and not a file on disk (other than when it is cached to improve performance).

Your uploaded documents, such as images, pdf files, and standard JavaScript or CSS files, are regular files and are stored at the root of your site if you don't specify otherwise. If you simply upload a file "picture.jpg", you would access it your code as:

<img src="/picture.jpg">

In the Images & Files control panel, you can easily create folders (directories) and upload files into those folders. If you had picture.jpg in a folder called images, for example, you'd reference it as:

<img src="/images/picture.jpg">

Note that it is important to put a slash at the start of the name. This applies for all references to any kind of file: image, pdf, css, JS, whatever.

If you do not include the leading slash, then the path is relative to the location of the current page, so your images will work fine when you're on a top-level page but not if you're on a page that is in a subdirectory.

Other File Paths

There's two ways to work with CSS and JS files in Webvanta. You can use the editor in the control panel, via Design > CSS and Design > JavaScript, or you can upload CSS or JS files as assets. In either case, the files appear at the root of the site, unless you explicitly upload files to a folder that you create.

For example, a CSS file that you edit through the control panel would be accessed as /stylesheet.css, as it would be if you uploaded it as a file without specifying a folder. BBut if you created a folder in the asset uploader called "styles", and then uploaded stylesheet.css to that folder, then the path would be /styles/stylesheet.css.

It is equally important that all other file references use the leading slash, including:

References to background images in CSS files
References to CSS and JS files in your page templates (or snippets)
References to PDF files or other uploaded assets

Shared Webvanta Files

Some standard library files are made available to all sites through the "magic" /webvanta directory. These files include the jQuery library and a number of its plugins, the Blueprint CSS library, and some basic icons. You cannot modify these files directly; if you want to change one, access it via your browser, save it, and upload it to your site. Then change the path that references the file so that it does not include /webvanta but accesses your own private version of the file that you just uploaded.

Sidebar: Caching Your Site

There is a transient set of files that you don't work with explicitly, but that dramatically improve the performance of your site, which we mention here for completeness. This is the server cache.

When a page is generated from the database, the request passes through the front-end web server to the application server, which in turn makes requests from the database server. The application server then processes the information from the database to create the page.

We work hard to make this process as quick as we can, but the reality is that many database-driven pages take longer to create than we'd like. So Webvanta has a comprehensive caching system that stores copies of every page delivered. The second time the same page is requested, Webvanta's front-end server recognizes that it already has a snapshot of that page on disk, and it delivers the cached page without making any request to the application server or the database. These cached accesses are just as fast as an equivalent static page.

When you're working on a site, you'll frequently see slower accesses because Webvanta must purge the cache when you change the database. But once you stop modifying it, and the caches get filled up, most visitors will see fast performance.

Displaying Paginated Database Results

Wed, 21 Oct 2009 01:34:55 GMT

When you have lots of items to list, sometimes there's more than you want to show on one page. The universal solution to this is pagination: break the list up into some number of pages, with a maximum number of items per page. Of course, you then need some sort of control to navigate between the pages.

With and Without Pagination

Webvanta provides a very easy-to-use pagination feature that you can apply to any database content. Suppose, for example, that you have dozens or hundreds of articles. You could list all of them, like this:

<w:kb:item:each>
    <h2><a href="<w:path url='article' />"><w:name /></a></h2>
    <p><w:description /></p>
</w:kb:item:each>

But that page could get awfully long, and take a long time to generate (if it is not cached). Here's the same code, modified to paginate in pages of 10 items each:

<w:kb:item>
  <w:paginate by='name desc' limit='10' start='1' page='auto' type='article'>
    <p><w:pagination_widget /></p>
    <w:each>
      <h2><a href="<w:path url='article' />"><w:name /></a></h2>
      <p><w:description /></p>
    </w:each>
  </w:paginate>
</w:kb:item>

Note that the paginate element needs to fit in between "w:kb:item" and "each", which are combined onto one line in the first example. In the second example, we split that statement into two lines, and insert the pagination statement and the pagination widget between them:

<w:kb:item>
  <w:paginate by='name desc' limit='10' start='1' page='auto' type='article'>
    <p><w:pagination_widget /></p>
    <w:each>

Setting Pagination Options

The paginate statement (second line above) tells Webvanta to break the database contents into page-sized sections, and display only the current page. You can set a variety of parameters, as defined in the table below. These are mostly the same as those for kb:item:each.

Parameter	Value
by	Determines how the results are sorted; field name followed by sort direction ('asc' or 'desc')
limit	Maximum number of items to display per page
start	First item to include. If you are paginating all content, this should be "1". If there is a "main" page that lists, for example, the first 5 articles, and then you wanted a paginated "more articles" page that started with article 6, you would use start="6"
page	Normally should be "auto", which causes the particular page displayed to be determined by a parameter in the URL.
type	Item type(s) to be included (omit for all)
category	Category(ies) to be included (omit for all)

Pagination Widget

To display the pagination widget wherever you want, simply insert the code <w:pagination_widget />. This returns the HTML code for the set of page numbers and previous and next controls, such as this:

Each page number displayed in the widget is linked to the same URL as the current page, but with the value of the page parameter set.

You can start with the default settings for the pagination widget, and you can add styling via CSS; you only need to make changes to the widget's parameters if you want to customize its HTML.

The table below summarizes the pagination widget options:

Parameter	Default Value	Function
previous_label	"« Previous"	"Go to previous page" link
next_label	"Next »"	"Go to next page" link
page_links	true	Set to false to show only previous/next links (no list of page numbers)
inner_window	4	How many links are shown around the current page
outer_window	1	How many links are around the first and the last page
separator	single space	String separator for page HTML elements
class	pagination	CSS class name for the generated DIV
container	true	Toggles rendering of the DIV container for pagination links. Set to false only when you are rendering your own pagination markup

Lesson 7: Accesing Database Content

Tue, 11 Aug 2009 00:26:20 GMT

Welcome to lesson 7. If you've been following along with our lessons up to this point, you already know all the basics of creating sites with Webvanta.

In this lesson, we dive into WebvantaScript, which makes it easy for you to integrate the power of Webvanta's database into your web pages. With a few WebvantaScript instructions, you can access content stored in the content management system or in the database.

You've seen some simple WebvantaScript examples in previous lessons. In this lesson, we show a series of gradually more complex examples.

Note that you don't need to write any WebvantaScript at all to create a resources page or an information portal site with our standard Knowledgebase system. You'll need to write WebvantaScript if you create custom item types, or want to change the way the Knowledgebase content is presented.

This is the longest of our lessons, and the most technical. You can do a lot with Webvanta without understanding any of this lesson. Over time, you can build up your WebvantaScript capability. And remember, we're always available to help when you have questions.

WebvantaScript Structure

Each WebvantaScript statement (sometimes called a Webvanta tag) has the following structure:

<w:tagname parameter=value parameter=value ... >

All statements begin with <w: followed by the name of the tag. You can optionally include one or more parameters.

Webvanta tags must be correct XML, which means that they must all be closed. Some can be self-closing:

<w:tagname parameter=value />

Note the slash before the close bracket. It is required for a self-closing tag (just as in XHTML).

Some tags are designed to surround a block of text or other code. In this case, the opening tag is of the form:

<w:tagname parameter=value>

And then, after some amount of other content or code, a closing tag is required, which looks like this:

</w:tagname>

Again, this is just like XHTML.

How WebvantaScript is Processed

All WebvantaScript statements are interpreted by the Webvanta server; they never reach the browser, which wouldn't know what to do with them. The "w:" prefix tells our server that it should read the statement and take the appropriate action, which in many cases includes inserting some text or HTML content into the data that is sent to the browser.

Snippets provide a simple example. The WebvantaScript statement

<w:snippet name="snippet_name" />

tells our server to go find the contents of the snippet named "snippet_name" and substitute its contents for the WebvantaScript statement when sending the page to the browser.

WebvantaScript makes it easy to retrieve information from the database, and to combine the information with your HTML markup to present it exactly how you want.

Typically, you'll want to find all the database items that fit your particular purpose on a given page, put them in some order, and then display them with surrounding HTML markup of your design.

Choosing Items to Display

To select items from the database, use the following WebvantaScript:

  <w:kb:item:each [search criteria go here]>
    [HTML for each item goes here]
  </w:kb:item:each>

The HTML that you provide will be automatically repeated for every item that meets your search criteria.

Accessing Item Fields

Each of the item's fields is accessed with <w:fieldname />. You use this markup to access the information from the database, and surround it with whatever HTML you desire. For example:

  <h1><w:name /></h1>
  <h2>By <w:author /></h2>
  <p><w:body /></p>

Selecting Items

Usually, you don't want all the items in the database, which is what <w:kb:item:each> by itself will give you. By adding conditions, you choose which items are selected.

Suppose, for example, that you want to display all the articles about Cats. You'd use:

<w:kb:items:each type="Articles" category="Cats" by="name">

The type field specifies the item type. Webvanta has a number of built-in item types (e.g., article, blog post, link, event, book), and you can easily create your own custom item types by simply filling in a form (Control Panel > Database > Custom Item Types > New).

You can leave out any of the parameters; for example, omit the type setting in the markup above to get all items related to cats, regardless of type.

You can include multiple types, separated by commas, and the selection will match any of those types. Add a hyphen before a type name to exclude it from the results. For example:

  <w:kb:item:each type="Articles, Books"> (all articles, and all books)
  <w:kb:item:each type="-Articles"> (all items except articles)

The category is typically used to organize your information by topic. You can use either the exact name of the category, or the category ID (which continues to work even if you later edit the category name)

The by field lets you choose the order of the items. Options are:

name: alphabetical by name
date (or created_at): by creation date
modified_at: by last modified date
published_at: by publication date
rating: by editorial rating

Limiting the Results

If you don't specify a limit, you'll get all the results that match your search criteria. Optionally, just specify the maximum number of items:

    <w:kb:item:each type="Articles" category="Cats" by="Rating" limit="5">

Conditional Code

Sometimes you need to change what is displayed based on what's in a particular field. WebvantaScript provides if and unless statements. Let's look at how to use them by example.

    <w:unless condition='author.blank?'>
      <h2>By <w:author /></h2>
    </w:unless>

This code displays "By [author name]" if there is an author, but doesn't generate any code at all if the author field is blank.

Nested Contexts and the Magic of "Current"

In the examples above, we've seen various ways to specify which database item you want to access. This selection sets the context, which determines what information is accessed by a statement such as <w:name />.

You can also nest contexts, and the keyword "current" lets you access information from the outer context. For example, consider the following code:

<w:kb:category:each>
  <h1><w:name></h1>
  <w:kb:item:each category="current" type="Books" by="name">
    <h2><w:name /></h2>
    <p>By <w:author /></p>
    <p>Published on <w:published_at /></p>
    <p><w:description /></p>
  </w:kb:item>
</w:kb:category:each>

This example iterates through each of the categories, and for each it shows the name of the category, and then lists all of the books in that category. Note that the first w:name gives us the name of the category, because that's the current context at that point; inside the item context, w:name gives us the name of the item. (If you needed the name of the category when inside the item context, you could use w:kb:category:name.)

To restrict the item iterator to those books in the current category, we use the keyword "current", which takes the category from the outer context.

Special Page Contexts

On any page, there is a page context set, which enables you to access information from the page's information stored in the CMS (such as the meta title, meta description, etc.). In addition, there are three special page types that provide additional context: the Category, List, and Item page types. You set the page type using the pop-up list at the bottom of the page edit screen.

These special pages extract information from the page's URL, and use that information to set the context. For example, an item page my have a URL such as:

www.domainname.com/item/1234-this-is-the-title-of-the-item

The number 1234 is the ID of the item that is being displayed. The text after the number is ignored by the server but is provided to enhance the SEO value of the link.

Using the Special Page Context

On the item page, you can then simply begin the page with:

<w:kb:item>

and end it with

</w:kb:item>

and now the context is set to that item throughout the page. You don't need to specify the ID, because Webvanta knows that if this is an item page, it can get the ID from the URL.

List and Category pages extract the ID from the URL in a similar way.

Wrapping Up

In this lesson, we've explored some of Webvanta's more advanced capabilities. We've endeavored to minimize the complexity of building database-driven sites. If you don't have any database experience, there will be a little bit of a learning curve, but it's far simpler than any other approach to building a site with similar capabilities.

You'll find lots of tutorials at the Webvanta Support site, including a quick-reference Cheat Sheet and a detailed Users' Manual. The snippets and Knowledgebase pages that are preinstalled on your site also provide good examples.

You'll no doubt have questions as you start to build sophisticated sites with Webvanta. We're here to help. You can click the Live Chat link on your site's control panel, and we'll try to help you in real time. You can also email support@webvanta.com with the details of your needs, and we'll steer you in the right direction and send you some sample code.

Making Your Site Public

Sun, 28 Dec 2008 19:57:35 GMT

When you first set up a Webvanta site, it is viewable only by you and others for whom you set up administrative accounts. While you’re building your site, visitors will see only a page asking them to log in. There's no charge for hosting your site as long as it is in development.

When you’re ready to make your site publicly viewable, you need to sign up for a paid account. Soon, you'll be able to do this automatically by going through our not-quite-ready payment process; for now, please send us a message specifying your subdomain (the temporary URL you set up when you created the site), as well as the domain name(s) you want to set up, and we'll send you an invoice.

Setting Your DNS

Once you've converted to a paid account, you'll need to modify your DNS (Domain Name System) settings so that requests for your site are sent to the Webvanta servers. Your DNS may be provided by your domain name registrar (such as GoDaddy or Network Solutions) or by your current web host.

If your DNS is provided by your domain name registrar, then you can log in to your control panel there and change it directly.

If your DNS is provided by your web host, and you won't be using that web host any longer (once your site is on Webvanta), then things are a little more complicated. You can either see if your domain registrar can provide DNS, set up DNS with a service such as DNSmadeeasy (an excellent service), or we can provide it for you. Send us a message and we'll help.

The DNS setting you need to change is for your A record. Set the value of the a record to the Webvanta IP address:

74.201.255.203

Assuming you want your site to respond to sitename.com and www.sitename.com, you should create one A record for the base domain, and another for the www subdomain, both pointing to the same IP address. (You can also do this with a CNAME for the www subdomain, if you're familiar with that setup.)

Note that if you make this change before you have set up your paid Webvanta account and we have complete the setup at our end, then visitors to your domain will see the main Webvanta site.

Once you make the change, it will take anywhere from a few minutes to a few days for everyone to see the new site, since DNS information is cached at many locations throughout the web infrastructure, and also by each computer and browser. Usually the changes show up within an hour or two.

Using Regions for Page-Specific Content

Mon, 22 Dec 2008 18:30:01 GMT

Defining Regions

To take full advantage of the content management system, all content that may be edited in the future should be placed in editable regions. Content in editable regions can be edited “in place” on the site, so any content that a non-technical user may need to modify should go in an editable region.

In a typical design, the Template provides the “skeleton” of the page and defines editable regions for page-specific content. Any content that varies from page to page should not go in the the template, but instead should be entered in a region on the specific page.

To define a region, simply insert the following code in the tempate at the spot where you want the region contents to be placed:


<w:content region="region_name" />

Note that by default there is always one region called "body," and we suggest that you use that name for your main content region.

Adding Content to Regions

Regions are shown on the page edit interface as tabbed sections. You can edit the content of each region there, or you can edit it in-place on the page by clicking Enable Editing in the top bar, hovering over the region you want to edit, and clicking the Edit button in the upper left corner.

Using Content Regions for Code

You can also use content regions for code. This is particularly useful in the head section, in which you can define content regions for page-specific CSS and JavaScript. For example, when we're building sites we often add a content region called page-css right after the CSS links in the head section, and another called page-js right after the JavaScript in the head.

When you use content regions for code, you need to disable the inplace editing so they don't get wrapped in markup. You do this by specifying editable="false":

<w:content region="page-js" editable="false" />

You can also use the editable="false" option when you want to prevent a regular content region from being editable in-place; when this option is specified, the region can only be edited via the page admin screen.

Using Templates to Define Page Structure

Sun, 23 Nov 2008 20:28:51 GMT

A template is an HTML file with a little bit of special Webvanta code embedded in it to access the database and provide other special functions. You can have as many templates as you want, but you only need a single template if all of the pages of the site follow the same design.

Templates generally do not have any page-specific information, but instead provide the framework that is common to all pages of a type. Page-specific content is stored in regions that are defined by the template.

In some cases, your site may have only a single template. That's all you'll need if all of the pages follow the same overall structure. Most commonly, you'll have a handful of templates — perhaps one for the home page, a few different kinds of content pages.

At the other extreme, you could have a separate template for every page. This is rarely necessary, but it is sometimes the easiest approach for porting an existing site to the Webvanta platform.

Note: the template named "default" is used, by default, for all of the system pages, such as log-in, change password, page not found, etc. You can see on the template list (Design > Templates) which pages use which templates. You should either update the default template to match the styling of your other pages, or reassign all of the system pages to another template.

Creating Your Own Templates

Your template can consist of any HTML you'd like. We've provided some examples templates that you are free to use, modify, or ignore. You can create as many templates as you'd like.

A good way to create your own template is to start from the complete HTML for the page. To make it into a Webvanta template, the first step is to remove all the page-specific content. This leaves you with a page that has all of the content that is constant from page to page, with holes for the page-specific content. Then, for each separate area of page-specific content, put in a WebvantaScript content tag (<w:content region="region_name" />). That's the essence of the conversion.

You may want to simplify your template but taking reusable pieces of it and creating snippets to hold those pieces, which enables you to reuse them in other templates.

Finally, if you want to use the dynamic menu creation provided by Webvanta's page system, you'll need to replace your menu code with the appropriate WebvantaScript; see Creating Navigation for details.

Putting It All Together

Let's look at a concrete example: the basic two-column template provided as part of your initial site. Here's what it looks like:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <w:snippet name='html_head' />
</head>
<body>
 <div id="outer_wrapper">
  <div id='wrapper'>
    <div class='container'>
      <w:snippet name='header' />   <!-- header snippet provides visual header and top navigation -->
      <div id='content_area' class='clearfix'>
        <div class="span-16 append-1 prepend-1">
             <w:content region='body' />   <!-- content for main column goes here -->        
        </div>
        <div class="span-5 append-1 last">
          <w:content region='right' />     <!-- content for right column goes here -->
        </div>
      </div>
    </div>
  </div>
  <w:snippet name='footer' />  <!-- footer snippet provides visual footer -->
 </div>
 <w:snippet name='analytics' />
</body>
</html>

We've put the entire HTML head section into a snippet, so we can reuse it in multiple templates:


<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><w:meta:title /></title>    <!-- title tag pulled from CMS -->
<w:meta />                         <!-- keyword and description from CMS -->

<!-- autodiscovery link for the default feed, which includes all database content -->
<link rel="alternate" type="application/atom+xml" title="RSS Feed" href="/feed.xml" />

<link rel="stylesheet" href="/blueprint-screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/blueprint-print.css" type="text/css" media="print" />  
<!--[if lt IE 8]><link rel="stylesheet" href="/blueprint-ie.css" type="text/css" media="screen, projection" /><![endif]-->

<link rel='stylesheet' type='text/css' href='/webvanta.css' media='all' />
<link rel='stylesheet' type='text/css' href='/dropdown_menu.css' media='all' />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery/1.3/plugins/jquery.form.js" type="text/javascript"></script>   <!-- required for ajax form submission script -->
<script src="/form.js" type="text/javascript"></script>   <!-- enables ajax form submission for comments -->
<script src="/menu.js" type="text/javascript"></script>   <!-- required for drop-down menu to work in IE6 -->

For the most part, this is the usual header stuff, with a couple of bits that are unique to Webvanta. The page metadata (title, description, and keywords) should be unique for every page, so those are no included in the template but are instead drawn from the database; you specify them for each page when you create the page.

Now, back to to the body of the template, we begin with another snippet that holds the Google Analytics code. The visual header, which includes the banner image and the menu bar, is created by the snippet "header".

The page structure is then defined using the Blueprint CSS framework to create the columns (which is the source of the odd class names). There's one content tag for the main column, and another for the right-hand sidebar.

Finally, another snippet provides the content for the footer.

Using Content Regions for Code

When you use content regions for code, you need to disable the inplace editing so they don't get wrapped in markup. You do this by specifying editable="false":

<w:content region="page-js" editable="false" />

Lesson 10: Images and Slideshows

Thu, 17 Sep 2009 03:50:29 GMT

Webvanta provides a variety of tools that make it easy to add images to your site and to display them, either individually or as part of a photo gallery or slideshow.

In this lesson, we'll provide a quick tour of the related features and pointers to articles that go into depth.

Uploading Images

You are probably accustomed to uploading images via FTP. With Webvanta, you upload files via the browser. Although this may take a little getting used to, it has a number of advantages:

You can choose to have image renditions (copies at various sizes) automatically created.
You can enter a caption and other metadata for each image.
You can assign tags or categories to each image.
It is a much easier interface for your clients to use, so they will be able to add their own images.

In the future, we plan to also add FTP upload as an option.

To upload images, choose Content > Images & Files. You'll then see a listing of all the files and folders on the left, and a preview of the currently selected image on the right.

To upload a file, first click on the folder into which you want to upload the file (if any), and then click Upload File. Browse to the file on your computer, and click Save. (You may also want to choose options for processing and metadata, as we'll describe shortly.)

To upload multiple files, just compress them into a zip file and upload that file. Webvanta will extract all the files (and any folder structure) from the zip. You can choose (via the Processing Options section of the upload dialog) whether to put the contents of the zip directly into the current folder, or to create a new folder with the name of the zip file and put the contents there.

Assigning Metadata

You can have any number of metadata fields associated with each image. By default, there is only one field: the caption. To enter metadata, click on the Custom Metadata title in the upload dialog.

Note that if you are uploading a zip file, the metadata will be applied to all files in the zip.

If you want to add more metadata fields, specify them in the Config Setting named asset.metadata.settings.

See Using Image Metadata Fields for details on how to specify custom metadata fields, and how to access them in WebvantaScript when creating pages.

Using Tags and Categories

You can assign tags to images when uploading them. Tags are useful for associating a set of images together so you can find them later. If you have a variety of projects listed on your site, for example, you might want to have a tag for each project, so you can then associate any number of images with that project. See Accessing Images and Other Files to learn how to access images by tag. (See ARScode.com for an example of a site that uses this approach.)

You can also assign a category to images. This is useful when you are using dynamically generated category pages and want to have images associated with each category. (See www.alfredtpalmer.com for an example of a site that uses this technique.)

Adding Images from the Content Editor

In addition to uploading images via the Images & Files page, as we've been discussing, you can also upload images from the rich text (wysiwyg) editor. You can do this anywhere the editor appears, either on public site pages for editable regions, or in admin pages, such as for articles and blog posts, that use the rich text editor.

To add an image via the rich text editor, click the picture icon in the editor's toolbar. To use an already-uploaded image, if you know the URL of the image, you can then enter it directly. More likely, you'll want to browse for it; click the Browse Server button, and another window will open with an image browser, giving you visual access to all of the previously uploaded images.

You can also upload an image from within the rich text editor, either using the fields at the bottom of the image browser, or by clicking on the Upload tab of the initial image dialog.

Specifying and Accessing Renditions

When you upload images through the admin interface, you have the option of having Webvanta create any number of image renditions, which are resized versions of the image. This is very handy for creating thumbnails, for example.

Renditions are also useful when you want clients to be able to upload images without worrying about their size; if you use a rendition for the "full size" display, they'll get a rendition of the exact size you designed for.

For details on setting up and accessing renditions, see Creating and Accessing Image Renditions.

Displaying Images

To display a single image, use a standard HTML img tag. Images appear at the root of the site, unless you put them in a folder, so you can access them with simple code such as:

<img src="/filename.jpg" alt="description of image" />

To access images according to their tags or categories, you first use a w:assets WebvantaScript statement to choose the desired images, and then you use the w:path statement to insert the file path into the img tag. For details, see Accessing Images and Other Files.

You can also associate an image with an article, blog post, or knowledgebase item, which you can use as the visual icon for that item. To learn how this works, see Associating an Image with an Article.

Creating Photo Galleries and Slideshows

Your Webvanta site comes with an elegant slideshow and gallery all set up. By default, it shows all the images that have the tag "gallery" applied to them. So all you need to do is upload images and select that tag, and they'll appear in the gallery.

The pre-installed gallery/slideshow page is a hybrid of those two functions; it shows both thumbnails and a slideshow. If you click any thumbnail, it advances the slideshow to that image and pauses it.

The presentation is highly customizable. You can change the timing of the advance, whether or not it starts automatically, and the transition effects by modifying the JavaScript initialization code. And all of the visual styling is done in CSS, so it can be easily tuned to match the exact presentation you're looking for. You can remove the thumbnails and show only the slideshow, or change the size of the images, or adjust the number of thubmnails shown at a time.

To learn how to use the photo gallery, see Using the Photo Gallery.

You've Graduated!

This completes the 10-lesson basic course in building sites with Webvanta. If you haven't yet built a site, we suggest you build one as a learning exercise, and run through the lessons again to reinforce the material. Remember, there's no charge for your Webvanta site until you make it public.

We'll be sending some bonus lessons in a little while, including case studies of existing sites and how they have taken advantage of Webvanta's features.

We welcome your feedback and questions at any time, which you can email to support@webvanta.com or submit a Support Ticket. You can also click the Live Chat link in the upper right corner of your control panel for quick answers to brief questions.

We have one final request: we'd really appreciate it if you would complete the brief survey to tell us about your experience with this course and with Webvanta. Click Here to complete the survey.

Thanks!

Using Image Metadata Fields

Thu, 17 Sep 2009 01:40:32 GMT

When you upload images, you can choose to provide information about those images (often called metadata). Your initial Webvanta site is configured for a single metadata field: the caption.

If this is the only metadata field you need, you don't need to do any configuration; just enter the caption when you upload the image, by clicking on the Custom Metadata header in the upload form.

You can also edit the caption or other metadata at any time by selecting the image file in the Images & Files admin page, and then clicking Update File.

Adding Custom Fields

If you want additional fields, edit the Config Setting named asset.metadata.settings. This setting has a string, in JSON format, that defines the custom metadata fields:

[{"mime": "*/*", "fields": [{"name": "caption"}]}]

This looks rather technical, we realize, and we plan to replace the editing of this string with a nice widget before too long, but for now, you need to modify this string to add metadata fields. You just add as many items as you want, separated by commas, in the same format as the "caption" item. For example, this setting will provide metadata fields for caption, author, and date:

[{"mime": "*/*", "fields": [{"name": "caption"}, {"name": "author"}, {"name": "date"}]}]

There's more power here as well; you could specify different metadata fields for different types of files, such as for video; that why there's a mime type parameter at the beginning. If you follow this example, all uploaded files will have the same metadata fields available to them.

Using Metadata Fields in Your Pages

To access the metadata fields, you must be in an asset context, which is typically set via the w:assets tag. For example:

<w:assets tag="cats">
  <img src="<w:path rendition='medium' />" />
  <p><w:caption /></p>
</w:assets>

This code repeats the two inner lines for every image that has the tag "cats". The first line displays the "medium" rendition of the image, and the second line displays the caption.

If you add custom metadata fields, each is accessed by a corresponding w:fieldname tag.

Working with Article Icons

A slightly different technique is needed when you need to access the metadata for an article's icon image. In this case, the WebvantaScript context is set for the article, typically by being on an item page:

<w:kb:item>
  <w:name />
  <img src="<w:icon />" />
  <w:body />
</w:kb:item>

With this code, however, there is no asset context available to enable you to access the caption for the icon image. So you must use the two-part form of the w:icon tag, changing the code above to something like the following:

<w:kb:item>
  <w:name />
  <w:icon>
    <img src="<w:path />" />
    <p><w:caption /></p>
  </w:icon>
</w:kb:item>

This sets up a context for the icon image, so you can then access it's file path using w:path, and the caption and any other metadata using the usual WebvantaScript.

Using the Photo Gallery

Sat, 08 Aug 2009 05:12:42 GMT

Your Webvanta site includes a photo gallery and slideshow that is easy to use, both for the designer and the visitor. It uses a highly configurable jQuery plug-in called galleriffic, and it is styled entirely with CSS so it is easy to make it look and behave exactly how you want.

You can easily adapt any other HTML, JavaScript, or Flash photo gallery to work with Webvanta. You can start with our photo gallery and modify it to meet your needs, or you can follow the general approach and substitute any gallery code that you'd like.

Uploading Images

The gallery is preconfigured on new Webvanta sites, on the page /photo-gallery. (If you have an older Webvanta site that does not have it installed, just let us know and we'll set it up for you.)

Initially, there won't be any photos in the gallery. To add photos:

Choose Content > Images & Files from the admin menu
Click Upload File to display the upload dialog
Click the Browse button and locate the file on your computer
Click on the Tagging header in the upload dialog
Select the "gallery" tag to identify the image(s) as ones that should be included in the photo gallery
Click the Processing Options heading and make sure the "Create Thumbnails" box is checked
Click Save to upload the image (or a zip file with multiple images)

Then return to the /photo-gallery page, refresh the browser, and you should see the photos you uploaded.

When you upload the photos, Webvanta automatically creates versions (called renditions) at whatever sizes you want. These sizes are specified in the Config Setting image.thumbnail.settings (see Creating and Accessing Image Renditions for details).

Choosing Photos with Tags

In the preinstalled gallery, we use the tag "gallery" to identify photos to include. You can add other tags and use them to identify photos for other galleries.

The WebvantaScript and HTML to create the gallery is simple:

<ul class="thumbs">           
  <w:assets:each tag='gallery'>                                                                <!-- find the assets you want -->
    <li><a class="thumb" href="<w:path rendition='medium' />"> <!-- choose rendition for large image -->
      <img src='<w:path rendition="square_thumb" />' />                        <!-- choose rendition for thumbnail -->            
    </a></li>       
  </w:assets:each>   
</ul>

The WebvantaScript line <w:assets:each tag='gallery'> causes the code that follows it to be repeated for every uploaded file that has the tag "gallery" assigned to it. To use a different tag, just substitute the name.

The <w:path rendition="square_thumb" /> statement provides the file path for the image, at the appropriate size. Our default gallery is set up for square thumbnails.

The galleriffic JavaScript library gets the file names for the large images from the links in the list of thumbnails. We've set it up to use the medium rendition so it doesn't matter at what size the original photos were uploaded. If you want to change the size of the large images, you'll need to change the CSS for the gallery and the config setting that determines the size of the renditions.

Customizing the Gallery Options

By default, the photo gallery is configured to show two rows of square thumbnails on the left side of the page, with a large image (up to 640 x 480) on the right. The large image area functions as a slideshow, and starts playing automatically.

There are controls for pausing and restarting the slideshow, and for moving backward or forward one image. You can also click on any thumbnail, and the gallery switches to that image and pauses the slideshow, if it was playing. In addition, clicking on the large image pauses the slideshow and advances to the next image.

You can change everything about the way the photo gallery works. Depending on what you're changing, there are several places you may need to make changes:

Options for the behavior of the gallery, including the number of thumbnails displayed per page, whether it starts the slideshow automatically, and the transitions between photos, are set in the JavaScript initialization code, in gallery-init.js.
The visual appearance of the gallery is controlled by the CSS file, photo-gallery.css.
To rearrange the components, modify the HTML on the page /photo-gallery (or wherever you put the gallery).
To change the size of thumbnails or the large images, change the Config Setting image.thumbnail.settings. You may also need to change the CSS correspondingly.

For details on customization options, see the gallerific documentation.

If you want to eliminate the thumbnails entirely and show only the slideshow, you can set the CSS for the div that includes the thumbs to an offscreen location. You cannot eliminate that div, because it is where the JavaScript code looks to find the images to include in the slideshow.

Creating and Accessing Image Renditions

Wed, 17 Jun 2009 07:27:07 GMT

Often, when you have a photo gallery or other uses of a number of images, you need those images in more than one size. Typically, you'll want a thumbnail, and you may want other sizes as well. Each size is called a rendition.

Webvanta can automatically create multiple sizes for you when you upload images. Just check the box labeled "Create Thumbnails" in the upload form (Content > Images and Files > New File). By default, this will create a thumbnail image with a maximum dimension of 120 pixels. The aspect ratio is preserved, and it is not cropped.

You can change the size of the thumbnail, choose cropping options, and create multiple sizes, by setting the appropriate values in the Config Setting named "image.thumbnail.settings". The syntax for this is JSON, which you don't need to understand; just follow the examples below.

Specifying the Renditions to be Created

This is the default setting:


  [{"geometry": "c80x80", "alias": "square_thumb"}, {"geometry": "80x80", "alias": "thumb"}, {"geometry": "640x480>", "alias": "medium"}]

This setting creates two thumbnails, one cropped to be 80 pixels square, and the other scaled (but not cropped) to have a maximum dimension of 80 pixels. It also creates a 640 x 480 pixel "medium" rendition, if the original is larger than this; if the original is smaller, the medium rendition will be the same size as the original.

You can add as many sizes as you want, each within curly brackets, separated by commas.

For each size that you want to have created, you specify a name (the alias, e.g., "thumb") and the geometry specification. The names can be anything you want, and you can create as many renditions as you want.

Geometry Specifications

These are the options for the geometry specification:

Description	Syntax	Example
Set maximum dimensions. This is the most common case. The resulting image will fit within the specified rectangle while preserving its aspect ratio.	widthxheight	120x120 This is the default thumbnail setting. A portrait image will be sized so it is 120 pixels high; a landscape image will be 120 pixels wide.
Set maximum dimensions but never scale up. This is the same as the previous example but images smaller than the specified dimensions will be unmodified.	widthxheight>	120x120> An image that is less than 120 pixels in both dimensions will not be modified. Otherwise the same as above.
Scale and crop image to produce exact dimensions. The crop uses the center part of the image.	cwidthxheight	c120x120 Create a 120 pixel square thumbnail. A portrait image will use the full width but crop out equal portions from the top and bottom. A landscape image will use the full height but crop out equal portions from the left and right.
Set width. The height will be whatever it needs to be to retain the aspect ratio.	width	120 Image will be 120 pixels wide, whether portrait or landscape. A portrait image will be more than 120 pixels high.
Set height. The width will be whatever it needs to be to retain the aspect ratio.	xheight	x120 Image will be 120 pixels high, whether portrait or landscape. A landscape image will be more than 120 pixels wide.

General notes on geometry specifications:

There must not be any spaces in the string.
The image is never distorted. Unless using the crop option, the resulting image will have the same aspect ratio as the original.

Generating Renditions

The renditions are generated when you upload an image, unless you uncheck the box in the Processing Options section of the upload dialog labeled "Generate Thumbnails".

If you want to regenerate the renditions for an image you have already uploaded (if you have changed the Config Setting that determines what renditions are generated, or didn't check "Generate Thumbnails" when you first uploaded the image), select the file in the asset list (Content > Images and Files), click Update File, make sure Create Thumbnails is checked in the Processing Options section of the dialog, and click Save. Note that you do not need to specify a file to upload, if you want to work with the already-uploaded file as the master.

Accessing Renditions

When accessing the "master" image (the one you uploaded), you can use the filename directly:

  <img src="/filename.jpg" />

To access the renditions, you must use a WebvantaScript asset tag to create the filename:

  <img src="<w:asset name='filename.jpg' rendition='thumb' />" />

Notes on asset tag usage:

Since there are nested quotes, you must use single and double quotes appropriately.
For the name, you can use the filename with or without the extension, as long as it is unique.
The rendition name must match the name of one of the renditions that was listed in the Config Setting when the renditions were generated.

Using Asset Iterators

You can also access all the assets with a given tag, which is often useful for generating slideshows and image galleries. The following example displays all of the thumbnails with the tag "cats", with each thumbnail linked to the full-size image:

  <w:assets tag='cats'>
    <w:each>
      <w:if_rendition name='thumb'>
        <a href="<w:path />"><img src="<w:path rendition='thumb' />"></a><br />
      </w:if_rendition>
    </w:each>
  </w:assets>

Note that this code also checks for the existence of the rendition via "if_rendition".

The "path" statement retrieves the relative URL for the requested image rendition.

Uploading Files: Images, Documents & More

Sun, 23 Nov 2008 20:30:32 GMT

Uploading Files

You can upload any kind of file to your Webvanta site’s files area. You can upload either an individual file, or a .zip file that includes many files. The contents of zip files is extracted automatically after uploading, and any folder structure is preserved.

To upload a file, choose Content > Images & Files. You'll then see a listing of all the files and folders on the left, and a preview of the currently selected image on the right.

Most commonly, the files you upload will be images (jpg, gif, or png). But you can also upload other files in the same way. For example, if you have pdf files you want to link to, you can upload them here.

You can also upload code files. If you are using a JavaScript library, for example, that you don't expect to edit, you can simply upload the JS file here. You can also upload Flash files (swf or flv), audio files (mp3 or other), QuickTime files (.mov), or just about anything else. Just keep in mind that Webvanta doesn't do anything to interpret these files; it is up to you to ensure that the way you present these files on your site is understood by the browser.

You can even upload complete HTML files, and Webvanta will serve them as static page. Just keep in mind that when you do so, none of Webvanta's content management or database capabilities is available to you.

Uploading Multiple Files with Zip Archives

To upload multiple files, compress them into a zip file and upload that file. Webvanta will extract all the files (and any folder structure) from the zip.

You can choose (via the Processing Options section of the upload dialog) whether to put the contents of the zip directly into the current folder, or to create a new folder with the name of the zip file and put the contents there.

Browser-Based Uploading vs. FTP

You are probably accustomed to uploading images via FTP. With Webvanta, you upload files via the browser. Although this may take a little getting used to, it has a number of advantages:

You can choose to have image renditions (copies at various sizes) automatically created.
You can enter a caption and other metadata for each image.
You can assign tags or categories to each image.
It is a much easier interface for your clients to use, so they will be able to add their own images.

In the future, we plan to also add FTP upload as an option.

Accessing Uploaded Files

Files appear at the root of your site, unless you place them in a folder. You can do so in two ways:

Choose the folder on the left side of the Images & Files page (or create a folder and then select it) before clicking Upload File.
Implicitly create folders by uploading a zip file that includes folders (see section below on using zip files).

Note that, unless you create a folder call "img" or "images", when you access the files you must not include such a prefix in the file path.

Also, you should begin every file path with a slash (/). This makes the path relative to the root of your site. If you omit the slash, then the path is relative to the page from which it is being accessed, so the file access will fail if you move a page to be a subpage of another page.

You can also access files according to the tags or categories that have been assigned to them, as described below.

Assigning Metadata

You can have any number of metadata files associated with each image. By default, there is only one field: the caption. To enter metadata, click on the Custom Metadata title in the upload dialog.

Note that if you are uploading a zip file, the metadata will be applied to all files in the zip.

If you want to add more metadata fields, specify them in the Config Setting named asset.metadata.settings.

See Creating Custom Metadata Fields for Images for details on how to specify custom metadata fields, and how to access them in WebvantaScript when creating pages.

Using Tags and Categories

You can also assign a category to images. This is useful when you are using dynamically generated category pages and want to have images associated with each category.

Adding Images from the Content Editor

You can also upload an image from within the rich text editor, either using the fields at the bottom of the image browser, or by clicking on the Upload tab of the initial image dialog.

Creating Articles

Sun, 23 Nov 2008 20:34:42 GMT

To create an article, choose Articles from the Content menu, and then click the New Article link at the top of the page.

Articles are content that exists primarily on your site, rather than being a link to something elsewhere on the web (or in the physical world). (Note that we use the item type Web Article to store links to articles on other sites; here, we’re talking about your own articles.)

Articles have two primary content fields: the Excerpt and the Body. The Excerpt is shown on Category pages and is used in RSS feeds (by default; you can set up an RSS feed with the full content if you prefer). The Body is the full text of the article, and is shown on the Item page (that is, the article page).

You can, of course, create your own pages to display articles. The fields are accessed as <w:name /> for the title, and <w:author />, <w:published_at>, <w:excerpt> and <w:body />.

You can set a publication date for each article. By default, this is set to the date you create it, but you can set it in the past or in the future. If you set it in the future, the article will not appear on the public site until that date arrives.

You can associate an icon image with the article, which you can then access easily in the HTML that displays the article using WebvantaScript (using the <icon /> tag).

You can assign any number of categories to an article, and it will appear on all corresponding category pages.

As with other database item types, articles have a full set of metadata fields (page title, keywords, and description), which you can tune for search engine optimization.

Using JavaScript

Sun, 28 Dec 2008 19:55:42 GMT

JavaScript is an essential tool for making your web pages interactive. In most cases, it is the primary language for client-side scripting — that is, all the site-specific code that runs in the browser.

There are two ways you can use JavaScript:

Put the JavaScript in a separate “.js” file and include it by reference.
Include JS code, surrounded by a <script> tag, directly in your page template or page body.

To create a new JS file, choose Javascript from the Design menu, and then click New JavaScript File. Enter the name for the JS file (including the .js extension) and your JS code and click Save.

You can also upload JS files as assets, by choosing Images and Files from the Content menu, clicking New File, and selecting the file on your computer (just as you would to upload an image). If you do so, however, you will not be able to edit the JS code from within the browser. Uploading the JS as a file is usually the best approach for library code that you don't plan to modify, whereas using the JS Files admin interface is best for files that you want to be able to edit easily.

To include the JS from the file in a template, a snippet, or pod contents, use the following code:

<script src="/my_javascript_file.js" type="text/javascript"></script>

Note that all files referenced by Webvanta sites should begin with a leading slash.

If you are using the standard Webvanta starter site, you'll find that the templates already include the jQuery JavaScript library. We highly recommend using jQuery to make your JavaScript programming easier and to avoid browser compatibility issues.

If you are inserting JS code directly into a template, a snippet, or pod contents, just wrap it in script tags as in any HTML file:

<script type="text/javascript">
   Your JS code here
</script>

Lesson 3: Styling Your Site

Sat, 18 Jul 2009 18:42:04 GMT

In Lesson 2, you learned how to create pages. In this lesson, we focus on styling pages to implement your design.

All the topics in this lesson are covered in the screencast: Styling Your Site.

We suggest that you skim through the text below, then watch the screencast, try making some styling changes on your own, and finally read through the text again to reinforce what you've learned.

The First Fork in the Road

Before you get started on styling your pages, you need to make a key decision: start from our code, or replace ours with your own.

The templates, CSS files, and JavaScript files we provide will set you up with a basic site that you can customize. If you haven't yet coded your design, this is a good starting place.

Our starter site includes:

Templates using the Blueprint CSS framework
Drop-down menu using CSS (a modified "Suckerfish" menu)
JavaScript utilities using jQuery

By starting with our site template, you'll have something immediately functional into which you can add content and gradually modify or replace the styling.

On the other hand, if you have already coded your site, or want to start from a previous site, you can ignore our templates, CSS files, and JS files and install your own. Of course, once you do this, the amount of support we can provide is limited, since we aren't going to be familiar with your code.

Modifying the Supplied Templates

The templates we provide use the Blueprint CSS framework, which provides a clean, cross-browser mechanism for creating arbitrary, column-based layouts. The templates are set up, by default for a 950-pixel-wide page that has a grid of 24 columns of 30 pixels each, plus a 10-pixel space between columns. You'll almost always use those columns in groups, or as margins; you might, for example, divide the page into three sections: two sidebars of 5 columns (200 px) each and a main section that is 12 columns (480 px) wide, with an empty column at the left and right edges.

You can, of course, ignore Blueprint CSS entirely if you provide your own templates (or modify ours to use a different way of creating columns).

To learn more about using Blueprint CSS to lay out your pages, see www.blueprintcss.org. If you want to change the 950-pixel-wide/24 columns setup, use one of the code generators or layout editors listed on Blueprint's Tools and Resources page.

For details about templates, see Using Templates to Define Page Structure.

Customizing Colors Using Config Settings

If you use our CSS files, you can take advantage of a shortcut we've provided for changing the color scheme. In the Config Settings control panel (on the Design menu), you'll see color settings for each of the major tags (p, h1, h2, etc.), as well as for the drop-down menu and the header area. If you change colors through the Config Settings to customize your site, you don't need to modify the provided CSS at all.

If you look at our CSS files, you can see the code that inserts the Config Settings. You can use this technique for your own purposes as well -- just create a new Config Setting, and then use the w:data tag to access it (e.g., ).

Working with CSS files

You can edit any of the CSS files that we supply. It is usually better, however, to add your owrn CSS file, and in that file override whatever styles you want to change and add your own styles.

Be sure to modify the HTML head section of the template to invoke the desired CSS files. In the templates we provide, all of the HTML head section is in a snippet named, curiously enough, html_head.

You may want to copy the code from the site, paste it into your CSS editor of choice, and edit it locally. Then you can copy-and-paste it back into the site. For smaller changes, editing directly on the site works well.

Snippets

A snippet is just a chunk of text or code that you can invoke by name, sort of like an include in PHP. Your site comes with a variety of snippets, and you can easily create your own.

To view the snippets, choose Snippets from the Design menu, and then click the Edit icon to the right of the snippet you want to edit.

Coming Up

Now that you know how to create and style pages, we'll move on to working with static site content in the next lesson, and then we'll get into the database.

Database System

Sun, 23 Nov 2008 18:24:03 GMT

Using the Webvanta Database

The database stores all of the content for your site. Even your templates, CSS, and editable regions are stored in the database. That happens for you automatically, so you may think of these items as static content.

Blog posts, articles, and content regions are also stored in the database and require no setup on your part.

To realize the full power of the Webvanta system, however, you'll usually want to create other kinds of database items. There's two kinds of items:

Knowledgebase items, which include links to other sites, books, and events
Custom database items, which you define to include exactly the fields you need for your site's information

The Knowledgebase

Your Webvanta site comes with a pre-configured set of database features we call the Knowledgebase. The Knowledgebase is designed for storing the kind of information that goes in a typical "Resources" page or information portal site: links to other sites, books, events, and so forth.

The Knowledgebase setup includes a set of predefined pages that provide a complete, automated presentation system for you to start with and customize as you need. There's two versions:

The Resources page, which is linked from the menu of a new site by default, provides a single-page summary of all the information in the database and is designed for use with smaller resource lists.
For information portal sites, or business sites that want rich resources sections, the Category, List, and Item pages provide a powerful, turn-key solution.

These are just two of many possible ways to present the information from the Knowledgebase. You can use them as-is, customize as you'd like, or create your own pages to present information however you'd like. You have complete control: all of the code in the standard pages is fully exposed so you can edit it, and there's no restrictions on what you can create on your own.

Item Types

When you add an item to the database, you must first specify what type of item it is, since different information is required for different item types. The item type determines what information is stored, and how it is displayed.

Your site comes with a variety of standard item types already defined. Some item types have different fields and behavior. For example, an article (that is, one that is part of the site’s content) has an author name, an excerpt, a body, and a publication date, and the body can be arbitrarily long, while a book includes an ISBN number and its cover image, price, and other information are automatically fetched from Amazon.

There's two ways you can create item types with customized names or fields:

You can add a new Knowledgebase item type, which is really just a new name for the "link" type. This is useful if you want to organize your links in a more detailed way than the standard item types provide.
You can create fully custom types with any desired fields.

If you need to define the fields in your database items, then you create custom database items. Custom items are presented on the standard Knowledgebase pages, but those pages know nothing about whatever custom fields you have created. To display those fields, you must create custom pages to display them, using WebvantaScript, or modify the standard Knowledgebase pages.

See Building AllAboutPets: Part 4, A Custom Database for an example of setting up a custom database item type and its associated pages, and Creating Custom Item Types for details about custom item type options.

Standard Knowledgebase Pages

Category Pages

For each category, a Category Page is automatically created. (Technically, there is only one Category page; but it is accessed with a URL that includes the ID of the category, which tells it which category's content to use.) The standard Category Page includes the topic description at the top; a center section that highlights articles on that topic; and a list of other database items on that topic below that.

The contents of a Category Page includes items that are associated with the current category and all its sub-categories.

List Pages

List pages show all the items of a chosen category and Item Type. Either of those can also be null. If both are null, then the entire database contents is listed. If the category is null, but the Item Type is set, then all items of that Item Type are listed, regardless of category, and vice versa.

The standard set of Knowledgebase pages includes a List page for each combination of Item Type and category. (As with all Knowledgebase pages, there is really just one List page, whose URL can include both category and item type parameters that determine what information is displayd.) These lists are accessed via the “More…” links on the Category Page; since the Topic page shows only the top items of each type, the List pages are needed to provide access to the entire set of contents for that category.

Item Pages

The Knowledgebase provides an Item page for every item. The Item page includes:

All the information about the item in the database, including the title, link, and description.
A place for visitors to add comments on each item, and view the existing comments.
Links to related items in the database.

Customizing the Knowledgebase Pages

You can modify these pages to provide whatever HTML markup you want, and to filter, sort, and display the information to meet your needs. You can also modify all the CSS styles that control the appearance.

See Styling Knowledgebase Pages for more information on customizing these pages.

Lesson 2: Creating Pages

Thu, 16 Jul 2009 19:40:21 GMT

Welcome to Lesson Two of Learning Webvanta. We assume you've now watched the intro and getting started videos and set up your free account. If not, please review Lesson One.

In this lesson, you'll learn about creating and editing pages.

Your new Webvanta site starts out with a few pages styled in our basic template. As you create your site, you'll no doubt want to create more pages, and either modify or delete the starter pages that we've provided. You'll also want to style your site to look how you want, which we'll cover in the next lesson.

Creating Pages

To create a page, click the Pages menu item on the Control Panel. This shows the Page List, and at the top, you'll find a link for "Create a New Top-Level Page". Click that link to create a page.

For each page, you specify its metadata fields (page title, keywords, and description), and choose a template for the page. If you don't choose a template, it will inherit the template choice for the parent page (the home page, for new top-level pages).

Page Templates

Each page gets its overall HTML structure from the template you choose. We provide several standard templates, which you can modify to meet your needs, or you can build your own from scratch or by converting an existing HTML page.

A template is a complete HTML file that defines the entire page, including the head section, the visual header, the navigation, and the footer. Each template defines one or more editable regions (typically one for each column) into which page-specific content is placed. So each template should include only content that is constant across all pages of the same style.

For a typical site, you may have two or three different templates. You may then have dozens or hundreds of pages sharing those templates.

You can use snippets to hold reusable blocks of code or content. We typically use a snippet for the html head section, the visible header and navigation, and the footer.

Adding Page Content

You can modify the contents of the editable regions either through the Control Panel (via the Edit Page screen, accessed from the Page Index) or using in-place editing while viewing the site.

Once you have set up templates and pages, your clients can then maintain content by using the Rich Text Editor to modify specific regions. It's also simple for them to add pages, since the page acquires all of its structure from the template. They can also duplicate an existing page as a starting point, which copies the content from that page.

Watch the Screencast

To see all this in action, watch the Creating and Editing Pages screencast.

If you want to dive into more details, here's the key articles that cover these topics:

Content Management System: an overview of how pages, templates, and snippets work together
Creating and Managing Pages
Using Templates to Define Page Structure

Go ahead and make some new pages, and experiment with making changes to the template or creating a new template.

Next lesson, we'll looking into styling your pages.

Lesson 1: Getting Started with Webvanta

Mon, 13 Jul 2009 15:20:57 GMT

Welcome to "Learning Webvanta," a free online course in building database-driven web sites with the Webvanta hosted CMS.

This is the first of a series of lessons. If you aren't already on the mailing list to receive them, please complete the form on the right.

In this first lesson, we'll briefly explore what you can create with Webvanta and how to get started.

What You Can Build with Webvanta

You can benefit from Webvanta's capabilities on any site for which you:

Want the client to be able to easily edit the site, while preserving the design integrity
Have more than a few pages of content, and content that has some repeating structure
Need an integrated blog, commenting on articles, or an RSS feed

Here's a few examples:

www.osmosis.com is a business site with lots of static CMS pages and integrated blog. It uses the database for lodging and restaurant directories and for press clippings.
www.commercialspacegateway.com is an information portal for the space industry. It shows how you can build a large and complex site with just a little styling of the Webvanta starter site and lots of content.
www.alfredtpalmer.com shows an important historical photo collection.

And the entire Webvanta site, include the support site, is entirely built with the standard Webvanta system.

There's many more examples at www.webvanta.com/sites if you're curious.

Rather than explaining how it works...

... we'd like to start by showing you.

This 5-minute screencast gives you a quick tour of how Webvanta works:

www.webvanta.com/intro

Once you've seen this screencast, set up your free site at:

www.webvanta.com/trial

And then watch the Getting Started video. There's a link to that video on the home page of your site; you can also find it here:

www.webvanta.com/getting-started

Finally, skim the help materials at:

www.webvanta.com/help

So you know what's available there.

Check out the User's Guide section, so you know what reference materials are available, as well as the WebvantaScript Cheat Sheet.

This will give you a solid introduction to Webvanta and prepare you to dive in with setting up your site in our next lesson.

If you have any questions or comments, you can post them below