Del

Tips and Tricks

For working with FirstClass in general, refer to FirstClass Help; this document only concerns itself with a few practices that may prove useful when creating web pages for the FirstMagic platform.


HOW TO...
Add metadata to individual pages
The better metadata you provide for any single page, the more visibility it will gain in Search Engines. Custom metadata for a particular page can be added in its envelope.

To access the envelope from inside a document, pull down the horizontal line at the top of its document window in FirstClass. To access it from the outside - from a container list - control-click its filename and select Properties [Windows[ or Get Info [OSX] from the contextual menu that pops up.

The subject field becomes the page title and visible link if filled in: otherwise, the filename is used. But a subject can be much more descriptive, and adds more searchable data about your page.

MetadataThere is also a keywords field that will override general website keywords from Setup and so enhance page visibility. The Category field is not in use.




Avoid losing content
A network outage while editing something online can mess up document formatting and lose what apparently was saved after connection is lost.

Best practice that will save the day:
  • Save often.
  • Before closing a document, copy its content to your clipboard [CTRL-A+CTRL-C]
  • Re-open the document right away to check.
If something has happened you will discover it while everything is still on the clipboard, and can simply delete-and-paste to fix it.

Note: if your connection is lost and you cannot get back online right away, save your clipboard as an RTF document. RTF will not retain table styles, but it will save structure and formatting.


Back up your content
A Versioning Rule will back up your documents, and allows you to roll back to any previous version at any time. It happens entirely in the background, and kicks in automatically whenever you do an edit to any page.

Versioning is easy to set up, but it must be set up for every container you want it to work in.

  • Create a FirstClass conference on your Desktop. Give it a single-word, unique name.
  • Set its permissions to: yourself = controller + All Users = disallowed. This is essential, since it will prohibit search engines from spidering your backups [if they did, your site would pollute its own search results in a massive way, and you would get SEO problems].
  • Drop an Alias of the Backup conference into the upper pane of every Website container you want to back up.
  • Create and distribute the Versioning Rule
You must create the versioning rule with the FirstClass Client. It will work in FCWS, too, but FCWS does not have tools to build it. Here´s how:

1:
Open the first Website container [any one that have the Backup Alias in its upper pane], and select Collaborate -> Rules from the FirstClass menu.
2:
Click the button for New Application Rule.
3:
Build the Versioning Rule, like so:

Conditions:
When: |Item Modified]
If: [the object type] is a [document]

Actions:
Then: [copy to folder] --> the name of your Backup Alias
4:
Now you need to clone this rule into Rules for each container you gave a Backup Alias:

On Windows, CONTROL-drag your Versioning Rule onto your FirstClass Desktop [on OSX, ALT-drag instead]. This makes a copy of it.

Open Collaborate -> Rules for each of your other Website containers, and Control/Alt-drag the desktop copy into the Rules window of each.
5:
Test the Rule: try to edit something, and check that a backup is generated in your Backup conference.
Note: Rules will only work in conferences: they do not work in folders. All FirstMagic Layouts are conferences. Also note that Rules will only work if you do the above steps in order: the Backup Alias must exist BEFORE the Rule does.


Change the publishing order
Layouts can publish its content by date, filename, subject [web page title], or by a number of other properties.

To change the sort order of a Layout, simply sort the container by your chosen criteria - Sort By in FCWS, or Change View Properties in FirstClass.

Note: there is some latency in how the server treats this setting: if it does not take hold on your website immediately, close the container window and re-open it: this will force the server to notice your changes.


Use Widgets
Widgets are tiny, self-contained web applications - Apps for your website. They are one-click ways to install third-party functionality on to your pages: Facebook and Twitter buttons, DisQus commenting functions, Google Maps, Google Translate, etc: browse the Widgets picker in your Site Root containers to see what is available.

FirstMagic Widgets can be published in four different locations:
  • The Header [Menu in the Website Root]
  • The  Sidebar [in the Website Root]
  • The  Footer [in the Website Root]
  • The Digital Signs Sidebar [drop Widgets onto the Calendar Icon]. Note that not all Widgets are usable in a Sign - for example, it makes little sense putting a Facebook Like button on a Digital Sign since there will be no way to click on it.

The Widget Picker
Click the Toolbar Widget Picker in FirstClass to install Widgets. Double-clicking in the list that pops out will install them right into your open window, ready for use.

FCWS do not have a Toolbar to install from, but your site can still use Widgets once they exist. Use the FC Client to install them, or ask the FirstClass Administrator.


Some Widgets are fully automatic, while some requires configuration, or have optional extras. To configure one, or to get more information about one, just open it [double-click it in the container list].

You can turn each Widget On/Off just like any other FirstMagic object. They can also be context-sensitive. One can have multiple instances of the same Widget running on the same page - for example, two different Weather reports.

Widgets will not be displayed in the Mobile Interface.


Disable Widgets on a specific page
You can use the Context-Sensitive trick to place widgets on certain pages only, but the opposite can also be useful: remove Widgets from one specific page.

  • Open the Properties Window [Windows] or Get Info [OSX] for the page you want to remove Widgets from
  • Check the ReadOnly Checkbox
This will remove all Widgets exept for Assistive Tools, Google Translate and Search from the page in question.


Expire web pages automatically
Any page can delete itself automatically after X number of days. There are two methods available to set this up:

- Set it up for all pages in a container, or
- Set it up for individual pages.

... You can also combine: set a default behaviour for all pages in a container, then override it for individual pages.

  • Set expiry for all pages: Open the container Permissions form and define your preferred behaviour with the options there.
  • Set expiry for a single page: Bring up its Properties window - here, you can set your preference for this document only.
Note: messages already have expiry dates [FirstClass documents and FirstMagic templates do not]. Message behaviour is defined by the FirstClass Administrator. You can override it for individual pages with the single-page method described above.


Use Bookmarks [FirstClass Client only]
  • Create quick links to any object on your site in the Top Menu, Sidebar or Footer simply by dragging the URL from your web browser into the Menu, Sidebar  or Footer container (you can also drag browser URLs into documents instead of using the method above). Remember to give the generated Bookmark a subject [in its Properties window].
  • You can make any Bookmark open in a new browser window by changing its FirstClass Icon from the @ symbol to the Globe Icon to the left of it in the FirstClass Icon picker:
70.pngThis is the default bookmark icon. It will open pages in the same window as itself.
69.pngThis is the New Window bookmark icon.


Make a Button [FirstClass Client only]
Create a link in your content, either by writing it out normally, or by formatting a FirstClass Link. Give your link the quoted style [in FirstClass: go to the Format -> Message -> Style menu, and select Quoted].

The quoted style makes your link appear as a button on the web page.


Make a Project Directory
In FirstClass, make a Project Directory page from the Templates picker. In FCWS, simply make a normal FirstClass Document, and fill it´s Category field with the word sitelist. You can place the document anywhere, and it can be authored like a regular web page, but it will also automatically list all Project Containers that exists on your system, below any regular content you put in. The Directory will be sorted the same way your Portal Container is sorted.

You can display the Directory page in two different ways:

  • Full View, which is the default - it includes avatars, and gives each entry more space
  • List View, which is a condensed list without graphics - suited for a large directory
To change to List View, write the @ symbol [the at symbol] into the Directory Document´s Keywords field.

If your Directory are very large it can be split up into several pages by writing a [from]-[to] value in the Keywords field [after the @].

Examples:
  • 1-100 Will list the first 100 projects
  • @43-45 will display only projects no. 43, 44 and 45, in List View.

Make mobile-friendly web pages
The best way of making mobile-friendly pages is to offer two versions of each page. FirstMagic can do this for your entire site automatically, you can create custom mobile pages manually, or you can simply ignore it and give mobile devices the regular website.

  • Ignore: handhelds will get the normal web interface.
  • Detect: handhelds will get the normal web interface, with an option to switch to an automatically created, simplified, small-screen / finger-friendly version of the site.
  • Forward to... [FirstClass Client only]: handhelds will be redirected to a container of your choice, and you can fill this container with customized content for small screens.
Configure the Mobile InterfaceIf you choose the Forward option, fill the URL field with a relative link as seen in the example on the left.

You can put the container anywhere in the website, but the lower pane of the Website Root is ideal.



Best practice for making mobile-friendly web pages
  • Do not use tables with more than one column: on a small screen, content with more than one column will be squeezed together.
  • If you use tables, do not use fixed column widths: use percentages.
  • Keep navigation simple: make the hierarchy shallow [as few containers to burrow through as possible].
  • Optimize images for low bandwidth: make them as small - and as few - as is practical.
How the Mobile UI works
The FirstMagic mobile UI will display a custom Menu with a Home Link, a Search box, and a "Browse"-button that opens an index of available pages. The index is either the Top Menu Root folder [Detect], or the folder you specify [Forward To...].

The Mobile UI will not display Sidebars, Footers or Widgets: only the web page itself, a Menu, and basic Footer navigation will be rendered.

FirstMagic will automatically detect if a device is a Handheld or not, according to a set of rules determined by the FirstClass Administrator. You can turn detection OFF for your site by setting the Handheld preference to "ignore".


Make your Sidebar and SiteFooter context-sensitive
By default, FirstMagic will publish the same Sidebar and Footer to all pages on your website. Context-sensitive objects means you can give each page [or group of pages] unique Sidebar and Footer items. Here´s how:

  • Open the Sidebar/Footer object [webpage template, FirstClass document or Widget] you want to be context-sensitive. If the object is a container or calendar, open its Properties Window instead.
  • In its Keywords field, write in the filename of the web page you want it to attach itself to.
  • If you want to attach it to more than one web page, write in more names, separated by a comma.
The object will now only display on the web pages you listed. If the Keywords field is empty, it will display everywhere.

Use this feature to attach specific Widget configurations, or specific Listing Layouts, to specific web pages, and you can give each web page it´s own, unique Sidebar menu or Footer links.


Password-protect something
  • You can password-protect any container by opening it´s Permissions form [in FirstClass: Collaborate -> Permissions], and setting All Users to Disallowed. You will be presented with a Login prompt when visiting it, and will have to login with your FirstClass credentials.
  • If you want to protect a Listing Container Layout, set the permissions to All Users = Summary instead of Disallowed: this will let visitors see a list of your content, but they cannot open it without logging in: clicking on any item in the list will cause the Login prompt. [Summary allows Top Menu items to drop down].
  • Refine the permissions by adding particular users or groups of users to the Permissions form, as needed.

Post to your Blog without logging in
Give your blog an e-mail Address, and you will be able to post to the blog from any device without logging in to FirstClass, simply by messaging it. Here´s how to set it up:

  • Open the Permissions form for your Blog, and uncheck the Do not publish in Directory checkbox, then set All Users to Contributor.
  • Open Collaborate -> Directory, locate your Blog, and double-click it. In the Alias field, write in your desired e-mail address.
  • You will now be able to post, but so will everybody else in the world, which is undesirable. So, you need to secure your Blog. This is done with a FirstClass Rule:
In the blog, open Collaborate >> Rules.

Click New Application Rule, and make the following Rule:

        When: Message Received

        Conditions: If [all]
        The Internet header From: [is not equal to] -->> the address you want to use

        Actions:  Delete silently

This is an example of a very basic rule, and as is, it could easily be spoofed.  Add more conditions that suits you to further increase security [for example, you could set it up to only accept posts that contains your IP address].

Also, customize the Permissions form itself to be strict with what will be accepted [for example, reject messages larger than X kilobytes, or set all incoming messages automatically to unapproved].

Note: it it is possible that your FirstClass Account may not have the privileges to enable an email address. If so, ask the FirstClass Administrator to do it for you.


Remove the Read More-link
Add an asterisk * to the end of the filename of each of the Blog Posts you want to remove it from.


Mix literal HTML and Rich Text
FirstClass allows for mixing HTML into Rich Text content, but it only works well if the two methods are separated from each other.

Before mixing in literal HTML, add some "normal" whitespace - a line break for example - before and after where the literal HTML will go. Else, your code may be jumbled together with regular content. This is expecially true inside FirstClass tables.


Work with FirstClass tables
If a FirstClass table becomes very complex - tables inside tables, for example - it has a tendency to become corrupted.

Best practice for working with tables:
  • When you make tables, keep them simple
  • When they need to be complex, make many small ones instead of one big one.
  • Don´t nest tables unless absolutely necessary
  • Don´t use literal HTML inside tables if you can avoid it
If a table blows up:
The following sequence will often repair it:
  • Place the cursor in the first cell, and go to Edit > Tables > Select table
  • Copy to clipboard,then do Select All [Control-A]
  • Delete everything in the document
  • Paste what´s on the clipboard back in
If this does not help, you will have to try to locate the broken cell. It will usually be in the last row [or the last row you edited].


Work with inline links
URLs in FirstClass Documents can be inserted in two different ways:
  • Write them out in full, and FirstClass will automatically make them into clickable links.
  • Embed them in text, by formatting them in the Make Link dialog.
Best practice
  • Always write the link in full if possible.
  • If you need to embed it in text, use absolute URLs.
Why?
  • Embedding relative links will only work if you never copy and paste the result; if you copy a relative http:// link, the FirstClass Client will convert it to a fcp:// link when you paste it back in. To avoid this, use absolute URLs: FirstClass leaves any link starting with http:// alone.