Del

FirstMagic Publishing with FirstClass

Publish new pages by navigating to the container you want the page to appear in, and select a publishing template from the Toolbar. You can also use FirstClass Documents and Messages - either will work, but note that Messages have expiry dates.


CREATING CONTENT

Example: how to publish a webpage in the FirstClass Client
  • Open the container were you want to create a page
  • Click an icon in the toolbar for a new webpage or template
  • Fill in the envelope [the meta fields]
  • Write or paste something in
  • Close and save
Quickstart

Publish Web Pages

  • Writing: You can use all formatting options in the FirstClass text editor, but font family and text size will usually be overridden by your website´s current design theme - its FirstMagic Skin.
  • Images: paste or insert images directly into the content body, just like you would in any other FirstClass document.
  • Slideshows: To create slideshows in a page, simply upload your images as file attachments to the Document itself. Make sure to prefix each image with slide_ (slide_mypicture.jpg).
  • Page Titles: The Subject Field of your Document always becomes the web page title. If you leave it blank, the filename will be the title - which, if you use a Message, would be your own name. It is good practice to always fill in the Subject field.
  • Keywords: For Web Pages, the Keywords field can be used to publish keywords for Search Engines. What you put there will be picked up and indexed by Google, for example (separate your keywords with commas). For Sidebar and Footer Objects, the Keywords field are not treated this way - such objects aren´t considered separate pages. For these, a keyword will simply associate your Sidebar or Footer document with a particular page elsewhere on the system - it makes it context sensitive.
  • Widgets and Custom Forms: Select them from the Toolbar, and they will be created directly into the container. Note that Widgets only works in the Root containers [Menu, Sidebar and SiteFooter]. Custom Forms can exist anywhere.

A note on visibility
FirstClass containers are split in two: the upper and the lower pane.

FirstMagic uses panes to show and hide objects from navigation features on the web: upper pane objects are hidden from view, lower are visible. This is not the same thing as published and unpublished; a hidden object is still published, and can be accessed if the visitor knows its URL.

  • To hide an object , move it to the Upper pane. To show it, move it to the Lower.
  • To unpublish it, make it unapproved. To publish it, approve it. You can do this by clicking to the left of it´s filename, in any container. An Unpublished object will be displayed in italic text.


TEMPLATES AND LAYOUTS
FirstMagic Layouts are specialized containers that will render Blogs, PodCast Channels, Multimedia collections and so on. Templates are Document Types - Web Pages, PodCasts, YouTube movies, etc. Create these from the Toolbar Pickers. If a picker does not exist in the current container, just create it in a Root container and move it.

You can build a FirstMagic website entirely without using either - publishing with regular FirstClass documents and containers will work fine, and allows you to plug all your pre-existing FirstClass content right into a new FirstMagic site: a FirstClass document is a web page, and a FirstClass container is a list of pages. This is how FirstMagic 1 works, and FirstMagic 2 works the same way.

However, FirstMagic 2 Templates and Layouts allows you to do a great deal more - and things that earlier was dependent on custom coding is now just a few mouseclicks away.


Template types


25527.png

Webpage
This is the normal Web Page template: it works exactly like a regular FirstClass document - you can use both FirstClass documents and FirstClass conference messages interchangeably with this template.

The Webpage template supports rich text, tables, images, slideshows and literal html.

25531.png


Lightbox Webpage
Will make images [on a regular web page document] behave in lightbox mode instead of opening as separate items when clicked. This mode makes it possible to use images as regular links.


25454.png


Sitelist Page
Makes a special web page that generates a directory of all Projects [all sub-sites in PRO].


25218.png

Freestyle
Works like the normal Webpage template exept that it ignores styling instructions from the active FirstMagic Skin. This means one can override the Skin definitions for font sizes, font faces and colors.

Note: do not use this template if you need your website to have a consistent look-and-feel throughout...


25518.png

Stand-alone
Like the Webpage template, but renders a Stand-alone page separate from the rest of the site: it will have no navigation - no Sidebar, Menu or Footer.


25512.png

PodCast
This is an Audio Recorder: record PodCasts directly or upload MP3 and Quicktime movies from your computer [by dropping them onto the open form]. It can hold more than one PodCast, and will generate a playlist that consists of all its recordings, uploads and siblings automatically.

Siblings = all PodCasts that is stored in the same container.


25513.png

YouTube
Displays video in your web pages if you input a YouTube Share Tag into the form. It will retrieve metadata about the current video from YouTube, and - like the PodCast form - generates its own playlists. It is also capable of playing lists from YouTube.


25219.png

PopUp
Works like the normal Webpage template, but will produce modal popups instead of opening a new page when clicked [it opens as part of the current page instead of navigating away from it].


25521.png

Standard Contact Form
A form that will also work like the Webpage template - it has room for text and images. If left blank it will display only form fields; if filled with content, it will behave like a normal web page with the contact form attached to the bottom.  


25522.png

Build-a-Form
Build a custom form by simply point-clicking through various options: you can have up to 20 configurable fields plus an optional Contact Form field group.


25523.png

Build-a-Multiple-Choice-Form
Build a custom form with up to 20 multiple choice questions. The form can be timed [auto-submits after X minutes], and will be self-grading if you configure it to [delivering a report to the visitor after the form has been submitted].

The FirstMagic templates picker
The Picker:
This picker is only available in navigation layout toolbars - the Menu, Sidebar and Footer containers in your Website Root. Other Layout toolbars has particular templates that fits with their purposes.

If you need a template somewhere else, just create it in a Root container and move it where you want it to be.



Layout types


25217.png

Document Layout Header
A special webpage template that goes in the upper pane of the FirstMagic Layout container: it becomes the page header - the Layout title and any content that should precede a listing.


25216.png

Calendar Layout Header
Works like the Document Layout Header, but displays a calendar instead of text content. Drop it into the upper pane of your chosen Layout.


25202.png

Listing Container Layout
Will produce a simple, flat list of the files and containers within it.

In the Top Menu, this becomes a drop-down sub-menu. In the Sidebar, it becomes a flat list menu.


25207.png

Tabs Layout
Will sort all it´s content into tabs, with Documents, Containers, Bookmarks and Uploaded Files listed in separate tabs.

The Tabs Layout display is similar to how FirstMagic Pro sub-sites and Project Layouts work, exept that it will work anywhere on your site.


25201.png

Tiles Layout
Renders everything inside in a grid, listing each object as a tile with a preview of what´s inside it. Some object types [like uploaded files] will be represented by a default image you can customize - it is located in your /Library/Images/ folder. Simply replace it with a graphic of your choice.


25204.png

PodCasts Layout
Creates a list of all Podcasts, displaying the Cover Art for each one together with descriptions, titles and navigation. If Sharing is turned on in Setup, it will also have an iTunes Subscribe button, a RSS button and an embed tag button [embeds your PodCasts in third-party websites, similar to YouTube Share tags].

Note: this layout will only display PodCasts - other object types will be hidden [though direct URLs to them will work].
        

25206.png

Blog Layout
Will display FirstClass documents and conference messages, the Webpage/Blog Post template, PodCasts and YouTube videos, in a Blog format. It will not display other object types.


25205.png

Condensed Blog Layout
Works just like the Blog Layout exept that it will only render the first paragraph of each Post, together with a "Read More"-link.



25203.png

Gallery Layout
Displays uploaded images in a grid layout. Images are clickable, and expands in inline windows. If Sharing is turned on in Setup, it will also have Embed and RSS buttons [just like the PodCasts Layout], and image titles becomes links that will output Exif data [JPG only].

Note: The Gallery Layout will only display uploaded images - other object types will be hidden.


25211.png

Calendar Layout
Just like regular FirstClass calendars, and can be used interchangeably with them. Will render daily and monthly views, with popup event previews. Will also render Digital Signs [click the ~tilde [squiggly] button in day or month view to open it as a Sign]. If Sharing is active, will also offer an iCal export option.

If you drop this Layout into the Sidebar or into a Tile Layout, it will render a condensed version of itself there.


25208.png

Project Layout [Portal Root container only]
If the website is in Tile Mode, this Layout will display an avatar on its tile. The avatar must be a png file named "avatar.png", and must exist inside the Layout.

The Project Layout will sort all its content into tabs, with Documents, Containers, Bookmarks and Uploaded Files listed in separate tabs.

You cannot use this Layout anywhere else but in the Portal container - instead, use the Tabs Layout if you want tabbed functionality anywhere else.

If the Website is in Homepage -> Login Mode, you can subscribe FirstClass Users to Project Layouts, and they will be rendered directly on the Website Homepage after login - giving each user a personalized Homepage.

Sub-Website [FirstMagic Pro]
If the site is Pro licensed, the Project Layout can be used to build wholly independent sub-websites. These can have their own Logos/Headers, Sidebars, Footers and FirstMagic Skins. Combine this with the Personal Homepage functions of the Project Page template, or with the Personalized Login Website Mode, to  easily build complex large-scale solutions for your organization.

Personal Homepage [FirstMagic Pro]
If the site is Pro licensed, a Project can publish entire FirstClass Personal Publishing websites inside itself: simply write the Personal Site Name [example: ~myfirstname.mylastname] in its Category field. The site will be rendered in the active FirstMagic Skin.

If the Project has no Header Document, it will grab the first page it finds in the Personal Site and use for an Index Page. Otherwise, the content you add to it will be the index.

Read more in the FirstMagic Pro chapter in this guide.

The FirstMagic layout picker

The picker:
This picker is only available in Website Root containers. Some will have more than one layout picker - or a different one suited for the container in question.

If you need a Layout somewhere else, create it in a Root container and move it.


In FirstClass, a Layout behaves just like any other container, with three notable exeptions:

  • It has a templates toolbar [see above for a list of available templates]
  • Only the lower pane is rendered to the web
  • It has no title on the web.

Exept for the Layout Header, content in the upper pane of a FirstMagic Layout is invisible: URLs to such objects will work, but the content will not be listed [regular FirstClass containers will list both the upper and lower pane, and do have titles].

To give a FirstMagic Layout a title, drop a Page Layout Header template into the upper pane: it´s subject becomes the title. If it has no subject, the object name becomes the title instead. Layout Headers can be found in the Layout picker too - a Document Header and a Calendar Header is available there. Using Layout Headers is always optional.

  • A Document Layout Header behaves like a normal webpage template - you can fill it with content, and it will be rendered before the Layout listing.
  • A Calendar Layout Header will display a calendar before the Layout listing.