Introduction to HiFi

Breadcrumb Navigation

An important priority as we developed HiFi was making sure that it was easy to navigate.  This is why we developed a handy breadcrumb navigation bar at the top of the admin panel.

This shows you exactly where you are in the site tree and allows you to navigate and create content very quickly.  This will become one of every editor's favorite features as they learn to move around in HiFi.

Custom Fields

Should the types that are built in to HiFi be insufficient, it is also possible to modify them with Custom Fields.  Custom fields allow you to customize areas of your site with fields that would be helpful.

For example, if you are using HiFi to host a porfolio, it might be nice to create a Fieldset of "Project Type", "URL" and "Project Date" and apply it to your Portfolio section.  These field would then be added to the Admin interface in that section and be available in the templates.

This is a great feature that makes it easy to customize HiFi for individual sites while keeping the interface as user-friendly as possible.

Custom Fields Linked

As mentioned in the last slide, once the custom fields have been created and applied to certain areas of your site, they show up in the admin interface.  HiFi makes this as user-friendly as possible by encouraging developers to both name fields appropriately and include instructions for Content Editors.

Custom Forms

One of the handiest types in HiFi is the form.  HiFi makes it easy for novice users to create custom forms with any number of fields. There are all the field types you would expect, from simple text box to a drop-down, and there are also convenience fields like Name and Address that make adding common field types easy.

Once a form has been built, it can begin collecting data right away.  The data is stored safely in the HiFi API and submissions can be viewed or exported as a CSV.

Like everything else in HiFi, the markup that forms use is completely customizable so there will never be ugly or unmatching forms on your site.

Data Explorer

The HiFi Data Explorer is a window into the HiFi API.  This is a web frontend to the API which makes it really easy to quickly access the advanced features that the API allows.

There are two tabs at the top. The Query tab allows you to type a HiFi API query and display the results below.  The script tab allows you to directly manipulate the data using the JS API.  This can be really handy when, for example, chaning the email notifications of every form on a site.

This is also a helpful tool when working with HiFi Theming.  It lets you live-test queries that you might use in the templates.  If you have your Data Explorer open now, I would encourage trying a few queries to see how easy it is.

Editing Content

The content editor in HiFi makes it easy to manage the content of your site.  Each HiFi type has its own editor, but they all share a similar look and feel.  The editor shown here is for a basic page.

By default, many non essential fields are hidden.  This makes it easy to get up and running without much confusion.  When you enter a title, HiFi will automatically generate a pretty url for you.

The text editor for content is a highly customized version of TinyMCE.  In non-nerdtalk, that means that it is super easy to use and is well integrated into HiFi.  For developers, it encourages the use of semantic elements, cleans up MS Word formatting and has a handy HTML view.

For content editors, the interface will be familiar if you've used Word and common tasks have been made easy.  When adding links, you can browse your HiFi content to find the page you are looking for.  A handy popup helps with images and uploads.  Perhaps the coolest feature is the orange embed.ly button.  This allows you to embed content from hundreds of sites like youtube, twitter, slideshare and vimeo simply by pasting in a link.

We've tried to make the content editing as easy and user-friendly as possible!

Global Redirects

In addition to HiFi being smart about creating automatic redirects when the URL of a page changes, it is also possible to create redirects manually.  HiFi allows, 301 Permanent, 302 Temporary and URL Rewrites.

This makes it super easy to have complete control over your site's structure and SEO presence.

SEO and Metadata

By clicking the 'Show Metadata' link under the page title, it is also possible to take advanced control of a pages SEO and metadata information.

When it comes to SEO, HiFi is very smart.  By default it will generate a pretty url for you -- one that uses you site's organization as well.  Should you want to manually change that, it is super easy.  HiFi automatically remembers all of the URLs that page has ever had, and makes sure to 301 redirect them to the latest version of the page.  This way, you never lose SEO credit by making a URL look better.

You also have direct control over your page's title tag and meta description.  The title tag helps search engines know what your page is about.  Both the title tag and meta description are often used by search engines when deciding how to display a page in their results.

We have opted not to include meta keywords because no search engines use them anymore.

Site Settings

In the developer tab, you're able to set some global site settings.  This includes a site title, admin email address, and the format of your generated title tags.

You're also able to control the domains that point to your HiFi account.  Keeping with the theme of wise SEO practices, this makes it easy to have multiple domains intelligently 301 redirect to a primary domain.  It also makes taking a site live very easy.

Thank You!

Thank you for taking the time to read through this welcome tutorial.  If you have any questions feel free to shoot us an email at info@gethifi.com or leave a comment somewhere in the documentation.

The Home Screen

Once you log in to HiFi, you are presented with the home screen.  This shows your content tree, latest comments and latest form submissions.  It is a great place to see what is going on with your site at a glance.

The site tree shows all of the content in your site.  Content can be reordered and nested indefinitely.  There are several different types of content that can be added anywhere.  To add content, you just need to mouseover some existing content.  To reorder content, just drag-and-drop.  In addition to your site content, there are also tabs at the top where you can control your Categories and Authors.  All content for your site shows up here.

Below the site tree to the left is the comments pane.  This shows the latest comments from across your entire site. This is a great place to quickly get up to speed on the activity that is happening on your site. If you want to see the comments from a particular page, you can do so by visiting that page's editor.

In the bottom right is the submissions pane.  This shows the latest submissions from all forms on your site.  You can also view the submissions for individual forms by visiting that specific form.  You can also export your submissions to CSV there.

Theme Editor

The HiFi theme editor is probably of most interest to developers. All of the templates, styles, scripts, images and fonts that are associated with a site can be bundled into a theme.  These can be edited directly from the browser!

The tabbed text editor is based on Mozilla Skywriter, an open-source project based on HTML5 that shows great promise and is a pleasure to use.  To the left of the editor is a listing of your theme's files.  To the right is an embedded version of the HiFi documentation.  This makes it really easy to find what you're looking for when working on a site.

The HiFi Theming system is discussed at length in this documentation.  We believe it is a true step forward in both simplicity and power and are very proud of it. 

Welcome to HiFi

This walkthrough is going to quickly cover the high-level features of HiFi.  Should you have any questions, don't hesitate to email us at info@gethifi.com.

So flip through this walkthrough and start playing around!