· web viewthe wysiwyg has similar icons to a ms word toolbar e.g. bold, dot points, headings,...

35
SAPOL PORTAL Corporate – https:www.police.sa.gov.au – Awards Marketing and Events Section > Digital Services Office News – https://www.police.sa.gov.au/sa-police-news-assets – Media and Public Engagement Section Media (journalist login) – https://www.police.sa.gov.au/police- news/media-restricted-area/media-centre – Media and Public Engagement Section Neighbourhood Watch – https://www.police.sa.gov.au/nhw – State Community Engagement Section Recruiting (Achievemore) – https://www.police.sa.gov.au/join-us – Recruiting Cadet induction (separate login) Health and wellbeing (in development) Governance and management General Order, Web Governance https://police.connect.sapol.sa.gov.au/Apps/GeneralOrders/Documents/ Web%20governance%20and%20management.pdf List of SAPOL websites and online services https://police.connect.sapol.sa.gov.au/Business/DigitalServices/ Documents/List%20SAPOL%20websites.docx Web content guide https://police.connect.sapol.sa.gov.au/Business/DigitalServices/ Documents/web_content_guide_v10%20(1).pdf SA.GOV.AU website online manuals – style and content guides https://www.sa.gov.au/editors/website (NOT FOR FURTHER DISTRIBUTION ) Online Accessibility Toolkit https://accessibility.sa.gov.au/ 1

Upload: others

Post on 05-Apr-2020

3 views

Category:

Documents


1 download

TRANSCRIPT

Page 1:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

SAPOL PORTALCorporate – https:www.police.sa.gov.au – Awards Marketing and Events Section > Digital Services Office

News – https://www.police.sa.gov.au/sa-police-news-assets – Media and Public Engagement Section

Media (journalist login) – https://www.police.sa.gov.au/police-news/media-restricted-area/media-centre – Media and Public Engagement Section

Neighbourhood Watch – https://www.police.sa.gov.au/nhw – State Community Engagement Section

Recruiting (Achievemore) – https://www.police.sa.gov.au/join-us – Recruiting

Cadet induction (separate login)

Health and wellbeing (in development)

Governance and managementGeneral Order, Web Governance https://police.connect.sapol.sa.gov.au/Apps/GeneralOrders/Documents/Web%20governance%20and%20management.pdf

List of SAPOL websites and online services

https://police.connect.sapol.sa.gov.au/Business/DigitalServices/Documents/List%20SAPOL%20websites.docx

Web content guide

https://police.connect.sapol.sa.gov.au/Business/DigitalServices/Documents/web_content_guide_v10%20(1).pdf

SA.GOV.AU website online manuals – style and content guides

https://www.sa.gov.au/editors/website (NOT FOR FURTHER DISTRIBUTION )

Online Accessibility Toolkit

https://accessibility.sa.gov.au/

SAPOL supportContact Digital Services Office not IS&T Helpdesk

Business hours:

https://police.connect.sapol.sa.gov.au/Business/DigitalServices/Pages/default.aspx

1

Page 2:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

After hours:

Miriam Saunders – 0437 290 939

Karina Loxton – 0458 184 710

Squiz support

Only contact Squiz if you can’t get hold of Miriam or Karina and only under exceptional circumstances.

Helpdesk support:

Phone 13000 SQUIZ (77849) Email [email protected]

24 hour support – Monday to Friday business hours Australia, after hours follow the sun offices overseas.

Service Delivery Manager – Adam Piro:

Office 7231 7001 Mobile 0402 967 703

Contract with Squiz expires 15 January 2019.

2

Page 3:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Squiz Matrix

Squiz Matrix interfacesSquiz Matrix has two interfaces:

Administration Simple edit known as Edit+ or Easy Edit.

The Administration interface provides full functionality. Access this interface by adding /_admin to the end of the URL of the SAPOL website or page

https://www.police.sa.gov.au/_admin

The Edit+ interface provides restricted functionality. Access this interface by adding /_edit to the end of the URL of the SAPOL website or page

https://www.police.sa.gov.au/_edit

Squiz manualsSquiz manuals - https://matrix.squiz.net

No cacheNo cache https://www.police.sa.gov.au/_nocache (use to make sure that you are viewing the most recent site content).

Access to Squiz MatrixNo remote access to Squiz Matrix (only MPES can access the CMS externally).

3

Page 4:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Edit+ Edit+ is the user-friendly interface within Squiz Matrix, allowing users with little or no training to update the content of a Site.

By default, these are some of the common tasks can be performed in the Edit+ interface:

Create a variety of page and file assets. View and navigate your Site, either by using the Asset Finder or within the Preview

Mode interface. Edit the general settings and contents of assets Edit the metadata of assets. Manage location links (add, delete, & move) and select which links appear in the navigation

menu. Edit the web paths of assets, (change their URLs).

Not used at SAPOL:

Control Workflow, approving or rejecting changes made to assets, and viewing the Workflow status and logs.

View analytics data and information about a current page or the whole site.

Groups:

You only have access to certain assets within the website If you can’t open an asset you don’t have access to it either in Edit+ or Admin If you get the Admin login screen this means that you can only edit the asset in Admin.

4

Page 5:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Accessing Edit+Go to the website homepage and add /_edit to the URL or Go to the page you want to edit and add /_edit to the end of the URL

Enter your Username and Password and click on Login

On the third attempt you will be locked out. Contact the DSO to get your password re-set.

5

Page 6:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

AssetsEverything in Squiz Matrix is an asset.

Assets can be re-used in multiple locations e.g.

Copyright notice on the bottom of every page Link to Find a police station on the Contact us and Report dangerous driving page.

Examples of assets are:

Standard pages Folders Users Designs Word documents PDF files Images.

Knowing an asset’s statusYou can see an asset’s status:

via through the Asset Finder:

displayed on the Asset’s Details screen:

6

Page 7:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

displayed on the Asset icon:

There are several Statuses but the most common are:

Under construction - Blue colour. The asset is being built.

Live – Green colour. The asset is able to be seen by the public.

Safe Edit – Pink colur. The live asset is being safely edited.

This is the full list of Statuses. SAPOL doesn’t currently use ‘Pendings’.

7

Page 8:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Edit+ toolbars

Top tool bar

New - Create a new asset

Everything in Squiz is an asset including a page, a folder, a Word document or PDF files, images and users.

The Asset Creation Wizard allows you to create new assets. By default, the following asset types can be created:

Pages:o Standard Pageo News Itemo Custom Form

Events:o Single Calendar Evento Recurring Calendar Event

Files:o Bulk Upload Fileso Imageo PDFo Word Doco Excel Doco PowerPoint Doco Rich Text Format Fileo MP3 Fileo FLV Movieo Generic Movieo Generic File

Other:o Foldero Redirect Page

8

Page 9:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

o Linko Data Record

To open the Asset Creation Wizard, click on the Create New Asset button, located on the left side of the toolbar.

Preview and Edit – Mode Switcher

The Mode Switcher allows you to switch between the Preview and Edit modes in Edit+.

By default, when you first access Edit+, you will be viewing your Site in Edit Mode. The default mode can be customised per user group.

Preview Mode allows you to view the current asset and navigate around the Site, as you would normally. Once you are viewing the asset you wish to edit, selecting Edit in the Mode Switcher will switch you to Edit Mode for that particular asset.

Asset Information

9

Page 10:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

The Asset Information section of the tool bar allows you to quickly view the information on the asset that is currently being viewed.

This pop-up provides a summary of the asset currently being viewed.

The pop-up also allows you to mark an asset for trashing by clicking the Move to Trash button. Clicking this button will load the Linking screen for the asset, with the location links of the asset marked for trashing. Saving this change will send the asset to the trash.

User Details / Exit Edit+ / Save Toolbar

The User button displays information on the currently logged-in user and allows you to exit the Edit+ interface.

The Exit Edit Mode option will exit the Edit+ interface and reload the current page (removing /_edit on the current URL), however, you will still be logged into the system.

The Logout option will exit Edit+ and log you out of the system before reloading the current page.

When you exit or log out of Edit+, all locks on the current asset are released automatically.

Asset Finder

10

Page 11:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

The Asset Finder button loads the Asset Finder tool which lets you navigate the assets within your Site.

Search

The Search tool allows you to find assets within your system by either keyword, asset ID or URL, returning a list of matching results.

You can use various filters to refine the results of your search. Clicking on a filter will only display search results of that specified asset type.

Clicking an asset in the search results will redirect you to the editing screen for that asset. You can also choose to show an asset's location within the Asset Finder by clicking the Show in Asset Finder button for an asset.

Save – Saving Your Content

The Save button allows you to save any changes made on the current screen.

11

Page 12:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

When an asset is modified, the Save button will turn green, indicating that there are changes to be saved.

Preview Mode Toolbar

When using the Mode Switcher to switch to Preview Mode, the toolbar will show you a few more buttons.

These buttons allows to you change the way that Preview Mode displays the current front-end page.

Compare to Live

When an asset has a Status of Safe Edit, an additional Compare to Live button will appear in Preview Mode. This option allows you to compare the current Safe Edit version of an asset against its Live version (or last published version).

Clicking this button will refresh and display any content that has been deleted (highlighted in red) and/or any new content added to the asset (highlighted in green).

Clicking the button again will reload the preview again with the comparison tool turned off.

Accessibility Auditor

The Show Accessibility Auditor button opens the Accessibility Auditor, a tool that runs an audit against the contents of the currently viewed asset, reporting any found accessibility issues.

Screen Size

12

Page 13:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

The Screen Size button allows you to preview the asset in a specific screen size from a list of pre-configured options.

This tool is useful when creating sites with responsive designs, allowing you to author and preview your assets in a variety of different device screen sizes.

To switch screen size, click on this button, select the screen size you want to preview, and then click the Update Preview button.

You can also use the drag handles on the right, left, and bottom-right corner to manually drag the preview to a particular size.

13

Page 14:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Creating a standard page

Select New asset > Asset Creation Wizard

Select Standard Page

Add page Title

Use the default Yes – Show in Menu? unless you don’t want the page to show in the menu e.g.

Show hidden page Health provider

Select New Location

14

Page 15:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Click on the Asset under where the new page is to be created.

Click on Select

Click on Create

15

Page 16:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Once the creation process has completed, the Wizard will give you some options for what to do next including:

Restart the Wizard to create more assets. Edit the newly created asset, which will redirect you to the editing URL of that asset. Close the Wizard.

16

Page 17:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Creating files - MS Word, PDF and Image AssetsFiles need to be added as assets in the Asset Finder before you can use them on a page.

Files will need to be made live before the public will be able to see it in on the website.

Once a file has been added it can be reused as many times as you like.

There are two ways to create files:

New asset > Asset Creation Wizard Folder in the Asset Finder

New asset

Instructins for image and PDF

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Folder method

17

Page 18:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Editing the new page

Details screen

The page defaults to the Details screen.

The page will be under construction.

Change the page name and page short name if required.

Page Name – will appear as the title on page

Page Short Name – will appear in the breadcrumb and the menu

Click Save

Content screen

Select Content to add text, images etc to the page

18

Page 19:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

A WYSIWYG (What you see is what you get) editor is used to add standard content.

This will be greyed out until content is added to the Content Container.

The WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones:

Insert image

Insert link

Add anchor

To add text:

Type text directly in the Content Container, or Paste content from a Word document

o Select the text, and

o Remove the formatting

19

Page 20:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Show example including an accordion, note

The content of pages within a site is maintained through Content Containers.

To add a new Content Container, click on the Insert New Container icon.

In the Insert New Container pop-up, define the Identifier, Style Information and Content Type settings. Once you have configured these fields, click the Insert button; a new Content Container will appear on the Content screen.

To reorder the Content Containers click on the reorder the Content Containers icon and the change in the order on the Reorder Content Containers pop-up.

20

Page 21:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

To delete a Content Container click on the Cog icon, Select the Trash icon and Confirm.

21

Page 22:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Applying a format

The Formats tool allows you to control the formats of your content, whether they be paragraphs, divisions, quotes or preformatted content.

To specify the formats of your content, make a content selection and click the Formats button; the Formats pop-up will be displayed, as shown in the figure to the right. The current format type of your content will be selected. In this case, the P option is selected, indicating that this content is using paragraph tags.

Adding a note

Highlight the text and select the tear drop icon. In Custom class add the note type e.g. blue_note_large or blue_note (for a small note) then click on Choose style and select the style as per Custom class.

22

Page 23:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Adding a header

The Headings pop-up

The Headings tool allows you to add a header tag to selected content.

To add a header tag, click the Headings button; the Headings pop-up will appear, as shown in the figure to the right.

Select either H1, H2, H3, H4, to apply the corresponding header tags. Don’t go any lower than H4.

Creating, editing and maintaining tables

The Insert Table tool allows you to insert a table into the content of your asset.

To insert a table, click on the Insert Table button; the Insert Table pop-up will be displayed, as shown in the figure to the right.

In the Insert Table pop-up, specify the Size of the table to insert and indicate the position of the table Headers.

Once you have done this, click the Insert Table button; the table will be inserted into the content of the Content Container, as shown in the figure below.

23

Page 24:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

A table inserted in the Content Container

Once a table has been inserted, you can modify it's settings by selecting the table within the Content Container and clicking the Insert Table button; you will be able to select to modify either the entire table, or the selected row, column or cell.

The Table, Row, Column and Cell Tools pop-ups

The settings in these tools allow you to define the width of the table; specify a table summary; insert a caption for the table; insert and move rows and columns; merge and split cells; add CSS classes; add headers; and delete rows, columns, cells or the entire table.

24

Page 25:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Inserting an image

The Insert Image pop-up

The Insert Image tool allows you to insert an image into the content of your asset, either as an Image asset within your Site or via the URL of the image. Click on the Toggle Image Options button to insert an image; the Insert Image pop-up will be displayed, as shown in the figure to the right.

In the Insert Image pop-up, enter a URL to the image that you want to insert. Alternatively, you can specify to insert an Image asset from within your Site, or upload an image from your computer.

To insert an Image asset, click the Pick Asset button; the Asset Finder will be displayed, where you can navigate to and select the Image asset to add.

If you want to upload an image, click the Upload button and select the image you want to insert; an additional Location field will be displayed, allowing you to specify where in your system you want to upload your image. By default, the Use current asset as upload location option will be selected.

You can select whether or not to display this new image asset within the navigation menus of your site using the Show in Menu option. By default, this field will be disabled and will not be displayed in the menus of your site.

Once you have specified an image to insert, the Insert Image pop-up will display the image that is to be inserted.

The Insert Image pop-up also allows you to indicate whether the image that is being inserted is decorative or not, and provide a title for the image and any require alternative text.

Once you have selected and configured the image to insert, click the Update Changes button; the image will be inserted into the content of your Content Container, as shown in the figure below.

25

Page 26:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

An image inserted in the Content Container

You can resize your image by selecting the image within the Content Container; resize 'handles' will appear in the bottom corners of your image, allowing you to drag your image to the desired size.

Adding an accordion

To add an accordion feature to a page, use the following steps. Two Content Containers are required - one for the heading, and the other for content.

Add a Content Container by click on the + icon

Select the Cog icon.

In CCS Class type accordion

Make sure Content Type is set to Raw HTML

Click on Set Properties

26

Page 27:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

.

In the Raw HTML Content Container enter a heading title name, followed by <span></span>. The span tag is used for the plus/minus state. Click on Save.

For the content div, click on the + icon. This will bring up the Container Properties. Under CSS class type container and leave Content type to WYSIWYG, then click Insert.

In the WYSIWYG Content Container enter your content and click Save to save changes.

You can repeat the above steps to achieve multiple accordion features.

Adding and removing links

27

Page 28:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

The Insert Link and Remove Link tools in allow you to manage links to external sites and/or internal assets within your content.

To add a link, make a content selection and click the Insert Link button; the Insert Link pop-up will appear, as shown in the figure to the right.

In the URL field, enter the URL address you want to link to. Alternatively, you can click the Pick Asset button to select an internal asset to link to, using the Asset Finder. Enter a title for the URL in the Title field - this value will be assigned to the HTML title attribute on the <a> tag. Finally, select whether the link should open in a new window, via the Open a New Window field.

Once you have configured the settings in the Insert Link pop-up, click the Update Changes button.

To remove a link, select the link in the content and click the Remove Link button; the link will be removed.

The Accessibility Auditor

The Accessibility Auditor tool evaluates and reports on the accessibility of the content of your asset, highlighting any known or potential issues for review and resolution.

The Accessibility Auditor is accessed via the icon; the Accessibility Auditor pop-up will appear, as shown in the figure below.

The Accessibility Auditor

28

Page 29:  · Web viewThe WYSIWYG has similar icons to a MS Word toolbar e.g. Bold, Dot Points, Headings, Italics, Justification, Redo, Tables plus some more unfamiliar ones: Insert image Insert

Making the page live

Preview the changes

Return to the Details Screen

Schedule or Approve and make live

29