Fife Social Work Service - Adult Services Resources

1. All pages, blog or forum posts should contain some text that all end users can read directly in their browser without needing additional software. Articles should be edited in the online text editor so they can be previewed in the browser before submission.
2. If the content of an article has been prepared off-line in another format such as Word you can import your document in two ways.
   1. For shorter documents: open the document and copy the text into the online text editor. If necessary, touch up your article using the simple formatting controls in the text editor’s toolbar. Formatting such as fancy fonts, colours, drawings etc. will not come across.
   2. For longer documents. enter a title and then attach your document in the file upload section below, it will be converted and appended to the main text, however, you will probbaly need to post-edit it. The system supports Word 97-2004 (.doc), Word 2007-10 (.docx) and OpenDocument (.odt), but will not import embedded images.
3. Images must be uploaded separately and then inserted into the text editor via the image picker utility below the text editor.
4. Avoid ALL CAPS for emphasis. The title of an article will be automatically marked up as a top-level heading, subheadings thereafter should be set to heading 2, heading 3 etc. In descending order of importance. To emphasise special words within a normal paragraph used italics or bold.
5. Do not use italics or bold for subheadings. Select the appropriate heading level from the heading dropdown instead.
6. Balance images, audio and video with plenty of descriptive text. Not only should images have captions, but they should accompany news items, not just be uploaded out of context.

Menus

New blogs will be listed under the blogs submenu of your section and new blogs will appear in the expandable blogs submenu. By default new pages will be your section submenu with your introductory page as the parent page, but if your section has more than 5 or pages we recommend organising content into sections. To do this add a container or introductory page for each section, then when adding new pages choose one of the existing subsection pages as a parent page.

When to Use PDFs and other File Formats

HTML, the Web language, is great for textual information with a few photographs. However, some files with sophisticated graphic design such as brochures, newsletters, diagrams etc. or very long documents with special formatting and layout or custom fonts (e.g. For non-Latin alphabets) are hard to translate into HTML and would clash with the site’s style guidelines. Whether the source files are Word documents, spreadsheets, newsletters or posters designed in desktop publishing applications (e.g. Illustrator or Publisher) or even PowerPoint presentations, these can usually be easily converted to PDF.

Converting Files for the Web

While text can be easily imported or copied and pasted from your word processor into the site’s rich text editor, please be aware of the following issues to avoid unexpected results:

• The online text-editor will remove any special hidden formatting artifacts from Word. As a result it will default to the standard font family and apply relative sizes according to the type and importance of a paragraph as well as remove custom colours and underlines. This post-formatting is essential to meet accessibility standards, e.g. Inline font styling imported from your document will interfere with the accessibility toolbar, disabling text resizing, text-only and high contrast.
• Remove all images and diagrams before copying and pasting. These need to be attached separately. You may save a separate version of your document without images.
• Do not repeat the title in the main body and remove any repetitions of the title or page numbering that may result from copying and pasting a whole document.
• Do not use manual spacing (spacebar or tab) to arrange text. Let text flow naturally.
• Do use headings 2 to 6 for subheadings within the main body.
• Use bullet points and numbered lists to organise the key points in your articles rather than manually typing asterisks and numerals.
• If copying and pasting from other Web resources such as Fife Council’s Fish service, be sure not to bring across internal links and other navigation elements that only make sense in the source site.

Copying and pasting

1. Open the source document.
2. Remove images and drawings. If this document is important, save the text-only version with different file name. (File > Save As).
3. Select and copy the main heading and paste it into the title field.
4. Select and copy the remaining text including subheadings. You can select all with Control (Command) + A, but remember to remove the main heading from the body text.
5. Paste the text into the Rich Text Editor.
6. Copying and pasting from Word will bring across a load of hidden formatting data that will be later discarded, but any images or drawings will not come across. To ensure a clean result, press the copy plain text button and copy into the resulting pop-up text field.
7. Copying from other Web pages will yield different results, bringing across the source HTML, links and images. However, be aware you are not copying the actual images, but merely references to resources hosted on another site.
8. Links to other resources on the source site may need to be converted to absolute Web address rather than local links, which only work in the source site. If in doubt, remove any navigation when copying HTML from other sites.
9. Upload and attach images separately using the Image Picker below.

File Upload Routine

When uploading an attachment, either to an article or a forum post, please follow this routine:

• First choose a file from your local computer (see notes on valid file types below), by pressing Browse... or Choose… (depending on your browser).
• If you choose a file with an invalid extension, you will be prompted accordingly.
• Then press attach to upload each file to the Web server.
• Only one audio, video or Flash file may be attached to each article. Subsequent files will not be made available.
• Word (.doc and .docx), HTML and OpenDocument files will be converted and appended. While all text will come through, images will be stripped and formatting will be simplified. You may be prefer to copy, paste and post-edit from your word processor to the online text editor instead or if formatting, image and layout are important convert your document to a PDF.
• Any number of PDFs may attached to an article and in the staff forum only any number of PDF, Word, Excel or Power Point files.

When done, save the article or forum post and thus associate your files with it.

If you manage to bypass this check, invalid file types may be temporarily uploaded, but will never be made available for download.

Notes on Attachments, Accessibility and Search Engine Optimisation

1. While it’s great to add video, audio and full-colour PDF brochures to your site, all these media will take longer to download and require plug-ins that may not be detected by assistive technology applications. Attachments should be viewed as complementary resources and not a substitute for the core content of a Web page. E.g. If you are publicising an event, you would want all the essential details to appear in the main body of the Web page, but a full-colour brochure may be available for download.
2. Many mobile phones have integrated browsers, but will not necessarily be able to display Flash, PDF or Word documents. E.g. an iPhone will display PDFs and play mp3 and mp4 media files, but will not embed Flash objects.

Exporting to PDF

PDF Export is now a common feature in many software applications (All Adobe applications, OpenOffice.org - now available on some council machines etc..). However, versions of Microsoft Office prior to 2007 did not offer PDF export without installing third-party plug-ins such as Adobe Acrobat Professional and thus may not be available on your computer. The quickest solution is to download and install PDF Creator which adds a “Save as PDF” option to the print dialogue box. This is a free download for all Windows users (Macs have the feature built in), but requires administrator rights to install. If you are unable to install PDF export software, you can always send the file to a colleague who can. However, MS Word, Excel and Power Point files may be attached to Staff forum posts.

1. Open the source document.
2. Check if your application has a PDF Export wizard. This will appear as an icon in the toolbar, under File > Export or Share or in Office 2007 by clicking on the top left application button.
3. If using a PDF printer driver (e.g. PDF Creator or Adobe Distiller in Windows or with any file on the Mac), bring up the print dialogue box (Control/Command + P) and then select PDF rather than your usual physical printer.
4. You will then be prompted to select a name and location for the new file.

Staff Forum Attachments and Images

The Staff forum is only accessible to staff and accepts a wider range of common file formats, so you can share documents online more easily. In addition to PDFs these formats include:

• MS Word and ODT will be automatically converted to HTML and embedded in your post as well as being attached.
• Excel (Office 97-2004)
• Power Point (Office 97 - 2004). Please avoid attaching files larger than 3MB!!

• Mp3 audio files.

JPEG Photographs may also be attached in a separate file upload field. If your image is larger than the default thumbnail size of 120x120 pixels then it will be available in three different sizes, thumbnail, preview and full size. Thumbnails are displayed alongside forum entries. Videos may not here as they tend to be rather large, even if compressed to mp4.

Adding Flash Animations or Presentations

The Adobe Flash plug-in, while not an official standard, is preinstalled in most (read 98%+) desktop and laptop computers, is available for practically all modern desktop operating systems and can be embedded in a normal Web page (See complaints procedure). However, Flash has not been ported to the new generation of mobile devices such as the iPhone, G1, PalmPre or Windows Mobile and may not be available on some older machines used by the council with a basic Windows installation.

If you have means to create a Flash file, ending with a .swf extension, it can be attached to articles in the same way as audio, video and PDF files (see below) and will appear full width (720 x 420 pixels) between the main heading and the body. This is great for presentations and animations. At some stage we can integrate a third party service called slide share which converts a variety of formats, including PowerPoint and KeyNote, to Flash for online use.

Audio and Video

These standards are in a constant state of flux, but at the moment of writing most Web audio and video are most commonly presented via a Flash player. Fortunately this is available on most desktop computers, but not on most smart phones. This situation may change when browser vendors (Google, Apple, Microsoft and Mozilla) agree on a new codec that can be embedded directly without additional plugins. We thus allow two formats:

• .mp3 for audio: Although sound recording software may save files in different formats such as .wav, most applications let you export to .mp3 . On desktop computers these will play in the embedded Flash-based JW Player, but may also be made available as downloadable mp3s for Flash-free devices such as iPhones. Mp3s will also play in media players such as QuickTime, Winamp, Windows Media Player, RealPlayer etc…
  • Useful software: Audacity. Freely available, it lets you record and export to mp3 with numerous options for compression.
• H.264 .m4v for video: Also known as .mp4 this is currently the most universally compatible compressed video format. Most video cameras will save data to .avi or .mov and most video editing applications will export to MPEG 2, .mov (Quicktime) or even directly to .m4v. However, please make sure you use H.262 as video codec and the picture size is no larger than 352 x 240 pixels. Useful software: Handbrake: Converts avi, mpeg, wmv, ogg and mkv videos to m4v, mkv or ogg. Use the m4v export option.

Linking to Other Web Resources

Web addresses such as www.example.com (no need to use the http:// prefix) will automatically be converted to clickable hyperlinks. You may also sdd hyperlinks by highlighting text and selecting the hyperlink icon, bringing up a dialogue box.

However, please observe the following guidelines:

• While the Council is not directly responsible for remote sites, any links to inappropriate content may have severe legal ramifications. In general these include e-commerce, pornography or politically contentious sites likely to cause offense.
• Avoid long URLs ending in query strings such as:
  e.g. www.example.org/index.aspx?id=123489020&loc=sweden&page=fbwbowfbow
• If possible always point to human readable links such as:
  www.bbc.co.uk/news/scotland

Photographs and Other Images

Images appearing alongside the body text of articles (pages or blogs) are managed by Image Picker. You can upload new photographs or browse and select existing images that have been added to your section. However, before an image appears next the text you need to first upload the image and then insert it, by pressing insert or clicking on its thumbnail preview. It will appear at your cursor's last point of insertion.

• Source images should be in the JPEG format. While PNG files are also supported, these should only be used for icons and drawings. If the image file has been created or post-edited in another format, please export to JPEG first.
• As long as the source image file is a JPEG ending in .jpg or jpeg and the source file size is smaller than 5MB, the server should resize it. The new server can easily handle the output of most digital cameras. However, larger files take longer to upload and will never be displayed larger than 1024 pxiels wide, so you might consider resizing and/or cropping on your local machine. Most good image editing applications will let you do this including: Adobe Photoshop Elements, Mac Preview (standard on Mac OS X) and Microsoft ImageResizer (free download for XP users).
• Small images with a width less than 240 pixel will not be resized or made available in larger sizes.
• After uploading an image (i.e. After pressing attach), you need to embed it your page or blog. You will see some additional options.
  • Float right is the default. Text will wrap around to the left.
  • Float left will let text wrap around to the right.
  • None: the image will appear in its own paragraph leaving blank space unless you select a larger image size.
  • Full size: is the largest size available, by default with a max width of 1024. Use this option only if you have manually resized an image to a smaller size locally, to fit in the main body area images should be no wider than 710 pixels.
  • Thumbnail: Default option max 240 pixels wide. However, if lightbox is enabled larger images will be shown by clicking on the embedded thumbnail.
  • Title: Only the title linking to the image will be shown.

Slideshows

Once you have saved an article with two or more similarly sized embedded photographs, you may group them into a slideshow.

1. Open the Create Slide show pane under Image Picker.
2. Select the images who wish to group into a slideshow or deselect photos that do not belong. If photos are not the same size (give or take a few pixels), text will jump around the image placeholder as it changes shape.

They will still appear separately in the text editor or in browsers with limited javascript support.

Logos, Diagrams and Other Custom Images

While JPEG is the best practical choice for photographs, professionally designed graphics may appear pixelated if they are dynamically resized. For best results we recommend saving graphics as PNG or as JPEG with minimal compression, supported by all modern browsers and available as an export option in all modern image processing applications.

Please note the background in the body area is white, but any logos added elsewhere should either have straight edges or fade in into a shade of light blue defined as #D3F6F2 or red 211, green 246, blue 242. The main header graphic measures 1008x127 pixels. Bear this in mind if require a custom header for your section. PNGs may act as semitransparent overlays.