Escenic Web Studio - NTNU · From Home page From the Home page click on the Articles link on the Menu bar. Figure 18--Home page Article link From the Home page in the Create new panel

12

Escenic Web Studio Log in, continued

Figure 6--Home page Content—Menu Bar and panels

The creating of new compositions, as well as images,

multimedia, links, persons, and topics.

This panel allows you to make a search on those items in

any one of the archives, article, image, multimedia, link,

person, user group or topic.

At a glance this region displays how many items are in

which section.

The titles of the articles you have been working with will

display here.

Editing more than one object at a time is a possibility and

you can keep track of what is open by looking in this area.

Figure 7--Panel definitions

General Information and Technology 11

Escenic Web Studio Log in, continued

What You Will See

Menu bar

Figure 4 --Home page Content—Menu Bar and panels

Menu bar and

Home

The menu bar displays links with the possibility of gleaning

more information right at your fingertips.

Articles x Open

This link takes the user into the Articles features in

Escenic’s Web Studio. Click on the number of open articles

to see what's open. Click on any article to open it.

Objects x Open

This link takes the user into the Objects features in

Escenic’s Web Studio. Click on the number of open objects

to see what's open. Click on any object to open it.

Sections x Open

This link takes the user into the Sections features in

Escenic’s Web Studio. Click on the number of open

sections to see what's open. Click on any section to open it.

AdministrationThis link takes the user into the Administration features in

Escenic’s Web Studio.

Figure 5--Menu bar information


General Information and Terminology

Workflow An article is created with text, pictures, external links and

links to other articles. The article is then published on one

or more different locations within the Front page or other

areas.

The steps to create an article.

1. journalist creates article

2. article is filled with text and attachments

3. article is assigned one or more sections

4. article is sent to editor's inbox

5. editor approves article and puts on section front page

6. editor publishes updates

The article has different article states at different times

during the workflow; draft, submitted, approved, deleted

and published but only published articles are shown on

the internet.

Article state definition

There are five article states,

Draft The author has just saved the article.

SubmittedThe author has delivered the article, perhaps to a section

page for an editor to edit.

ApprovedThe article has been accepted by the editor and is waiting to

be published.

Published Article is published and accessible on the web.

DeletedArticles are removed from the web and marked as deleted in

the system.

Figure 8--Article states and definitions

20

What Escenic Web Studio Looks Like

Articles The articles area or articles link, in the Menu bar, of

Escenic Web Studio allows you to work or perform

actions with articles in archives and/or create entirely

new compositions or articles. To the right of Articles, the

current number of articles open (x), if any, displays.

Objects In addition to text an article can consists of images,

external links, links to other articles, pictures, etc. and

these are referred to as objects.

Examples of additional objects are

• media files such as word documents, spreadsheets,

PDFs, film clips and more

• persons

• topics

Sections The sections area of Escenic Web Studio allows you to work

or perform actions with different articles/compositions by

placing them in their unique position of choice.

Administration The administration area of Escenic Web Studio allows

certain users to create all additional areas required for use

by editors/authors when creating composition.

In Administration, users are added, different publications

can be addressed and much more. For information on

User roles, please refer to Chapter 6 Extras.


What Escenic Web Studio Looks Like, continued

Home page

Figure 16--View of Escenic Web Studio Home page. The Home page is an

index to the functions, such as creating, searching and so on.

22

What Escenic Web Studio Looks Like, continued

Home page panels

General Information There are five panels on the home page.

• Create new

• Search

• Favourite sections

• Your latest articles

• Currently open

Create new The creating of new articles, images, multimedia files,

links, persons and/or authors and topics is conveniently

located at the top of the home page in this panel.

For more information refer to the chapter on Articles,

topic, Create new.

Search All items that you can perform searches on are handled

here.

Searching can be based on a specific ID.

Searching can be performed by a specific date or a range

of dates, or by keyword. If searching by keywords, you

can search for specific keywords appearing in the story,

or the images, links, etc.

More detailed searches are handled by clicking on the

articles list in the Menu bar and going into the Article

archive. For more information refer to the chapter on

Search.


Home page panels, continued

Favourite sections The list of items displayed in this panel has links to

sections a user has responsibility for. The number in

parentheses displays how many new articles are in each

section’s in box. For example,

• Hobbies (2 items)

• Sports (5 items)

A new feature here is that sections are editable. This

means for the more commonly used sections; the user can

choose to have them always on view in the Home page.

Clicking on EDIT LIST in the Favorite sections panel

brings the user to a new screen. The pre-defined sections

that exist in the client’s site are displayed. The user can

choose the sections he uses most often. Placing a check

mark in the box means this section will display as

‘favorite’ section on the Home page.

Your latest articles The five most recent articles opened and their current

article state are handled here. Clicking on the title takes

you to the editor and clicking on View takes you to a

preview of the article.

Currently open The five most recent items open are on display in this

panel.

You can click on it to display it on your screen.

24

CChhaapptteerr 22

Articles

What is an Article

Definition The article is the main composition created in Escenic

Web Studio. This helps the user write and publish articles

on the internet. Each client-specified solution of Escenic

Web Studio contains one or more article types to choose

from.

Article types Possible articles types are:

• document

• report

• letter

• handbook

• brochure

• movie guide

• picture series

Each article type has its own set of text fields or layouts.

Text fields can assist the writer in the type of information

each article requires. Changing the article type can

change the text fields that are presented to the writer. The

article functions as a holder of all the items that are to be

shown with the article, pictures, links, related articles, or

other type of media.

The author of an article will attach pictures links or other

types of media to an article. Upon completion the author

then sends the article to one or more sections where it is

offered to the editor.

The new article is instantly assigned a unique ID.

Articles 25

What is an Article, continued

Article types, cont.

Use of Article types An article type can be used in different ways. It is an area

that shows the writer where text can be written.

This includes things like text areas, drop-down boxes and

check boxes of items that are to be included in the article.

From the Home page in the Create new panel, the user

will choose their article type. Article types are editable.

This means for the more commonly used article types the

user can choose to have them always on view. Clicking

on EDIT LIST in the Create new panel brings the user to

a new screen. The pre-defined article types that exist in

the client’s site are displayed. The user can choose the

article types he uses most often. Placing a check mark in

the box means this article type will display as an offered

article type on the Home page. There is no limit to the

number of article types displayed on the Home page. It is

only to access article types in quicker, fewer steps. You

don’t need to wade through many article types if you

mainly concentrate on a few select ones.

More article types… You can also click on More article types…under the Create

new panel. The click takes you to the Articles archive.

On the right-hand side of the screen the Create new panel

has been expanded for ease of reference. Put your cursor

on the article type and you will notice that it becomes

momentarily underlined. Keep the cursor there a second

or two and the information or text balloon displays.

Click on the article type once and the new article screen

will display, ready for you to enter your composition in

the correct areas, for example, start with Title.

If your site has taken advantage of the article type

branding, those article types with an icon attached will

display.

26

What is an Article, continued

Article types, cont.

More article types, cont.…

Figure 17--Article type icon, example

Articles 27

Create new

Definition There are many avenues available in the Escenic Web

Studio system where you can begin creating new articles.

From Home page From the Home page click on the Articles link on the

Menu bar.

Figure 18--Home page Article link

From the Home page in the Create new panel choose an

article type.

A new feature here is that the article types are editable.

This means the user can choose to display the commonly

used article types first. Clicking on EDIT LIST in the

Create new panel brings the user to a new screen.

The pre-defined article types that exist in the client’s site

are displayed.

36

Create new, continued

Article layout at a glance, cont.

Article Details New after Add sections

Figure 26--How article details looks after choosing new

section.

Articles 33


Article layout at a glance, cont. The next dialogue box is Save as:

In the Save as: box Article state is first. When you are

ready to submit an article you click on the dropdown box

and choose the article state based on the your rights as the

user/author.

Listed here are the five article states, their corresponding

icon and definition.

Draft The author has just saved the article.

SubmittedThe author has delivered the article, perhaps to a section

page for an editor to edit.

ApprovedThe article has been accepted by the editor and is waiting to

be published.

Published Article is published and accessible on the web.

DeletedArticles are removed from the web and marked as deleted in

the system.

Figure 24—Article states and definitions

Below the state of the article is the button.

The Save button is the acknowledgement that all changes

are accepted into the system.

The Preview button allows you to view the article in the

preview window.

Copy allows you to make a duplicate copy of the current

article.

The Close button closes the existing article making no

accepted acknowledgement of any changes you might

have made. None of your changes will be saved.

40



Article Details Add topics

If you know the ID of the topic you want the article to be

a part of enter the ID in the ID box underneath the Topic

archive title, press the button or,

In Search Word – Type in a word or part of the name

text in the Search for: and press the button.

The asterisk may be used as a wildcard character.

For example, al* will retrieve instances of topics with

the words ALICE, ALYSON, ALBERT OR MARSHALL in the

text field.

When you go into Topic archive, Escenic Web Studio will

display the first page of search results. If you see the

name you want place a check mark in the box next to the

unique ID or unique identifier of that topic. Press

. Otherwise, you can navigate back and forth in

the Search result pages.

• << or >> - Double arrows move workflow to the

beginning and end of search result list, respectively

� < or > - Single arrows move workflow to next or

previous page of topics in the Search result

� 123… The Search result is organized into pages of

topic files in the search result

Articles 41



Meta-data summary Time control

If an article is to be visible on the web within a certain

time frame, click on the words more information in the

Meta-data summary box.

Figure 29--Edit article screen highlighting the meta-

data summary box, click on more information.

42



Meta-data summary Time control, cont.

In order to access the Meta-data summary information

you must click on more information. The information in the

summary box will be filled out by the system when you

exit the meta-data dialogue.

Figure 30--Date and time control dialogue box

Articles 43




The date and time information line consists of:

• Enabled From Date Select box-

• This must be check marked in order for the

following date and time to be active.

• Day

• Month that has a corresponding dropdown box for

you to select the correct month

• Hour

• Minute

or, if you prefer to use a calendar

• Calendar

To insert the date using the calendar uses the

arrows to go backwards and forwards in the

months and click on the date.

Enter the hours and minutes.

44




There are several more lines of meta-data information

that you can utilize or not.

Publish date Update published date to current date Published from information line will be filled out by the

system.

Hidden article the article will remain hidden and not

appear in article lists. The hidden article select box must

be deselected in order for the article to be visible in lists.

Comment… The Comment area makes it possible for

different users to leave an internal note attached to the

Article. The text is internal and, therefore, not shown for

all to see.

Article type… It is possible to change the article type here

by using the dropdown box to view and select a different

article type. In order for the change to take place you

must click on the button Set article type. You must

remember to click on Save in the Save as box.

Articles 45



Attach images There are different ways within Article editor where

images can be placed; by relating an image to a field or

by creating an inline image. Press the button

located under the last article panel. The Image archive

appears. For more information on Image archive, please

refer to the Chapter 3, Upload image.

Search through the Image archive until you find the first

image you want to attach to your article. Place a check

mark in the left-hand corner of the image. The chosen

image is highlighted.

Figure 31--Image selection.

Image details � Caption: This is a template-specific feature that

pertains to text that appears based on template.

� Alignment: This is a template-specific feature that

pertains to placement of the image.

The current options for placement are Left, Center, or

Right.

46



Image details, cont. � Related to field: This is a template-specific feature

that pertains to the locations within the article that

accept placement of an image. Click on the arrow in

the Select field box and choose a location.

The panel name is displayed in parenthesis, ex. Body

(Default) where default is the name of the panel and

Body the name of the text field

� In addition to relational fields there can be

relational types. Instead of relating an image to

Body (Default) where default is the name of the

panel and Body the name of the text field, you can

relate an image to one of the relational types it

might have associated to it by definition.

An example could be, Frontpage or Attachment

and the template then determines the actual

placement within the chosen relational type,

Frontpage.

� Move image into this field: (also known as inline

image). Clicking on this text places images inside the

chosen RReellaatteedd ttoo tteexxtt ffiieelldd.

Articles 47



Relate image to field

Figure 32--Image as it appears within the Article editor and the Body

(Default) field selected

48



Preview of selection

Figure 33--Sample Preview of image directed to Body (Default)

Relating pictures to a text field or a relational type rather

than placing them inside the text field offers better image

management. Figure 33 displays the image related to the

body text field. Since the image is not inline it is possible

to access the images other versions created via Generate

versions.

This type of automatic functionality is not possible with a

picture that is embedded inside the text, because

placement of images inline relies on a different

technology than images related to a text field.

Inline images are embedded inside the text, while the

related image is a related ‘object’ to the article.

Articles 49



Relate more than one image to field

Remembering that relating images to a field or relational

type are dependent on the template; to relate more than

one image to relate to a field, for example, Body, you

click on the down arrow in each instance and click on the

relation.

Figure 34--Relate more than one image to a field or relational type

50



Relate more than one image to field, cont.

These images will appear in the Body text in the order

shown. To change the order,

1. Click on the directional arrow to move down

one OR:

Click on the placement arrow to move a bit

farther than one place.

Figure 35--Change order of images related to one field

Articles 51



Relate more than one image to field, illustration, cont.

Figure 36--New view after Image of the dog is moved down one place

52



Move image into field (or Place inline)

The choice of relating to a field and then clicking on

Move image into field produces the image up in the text

for user to view.

Figure 37--Image moves up to selected field

.

Articles 53



Move image into field, with options

Right-clicking on the image produces an inline image edit

box.

Figure 38--Image in selected field and right-click produces an inline edit box

54



Picture properties after right-click on edit box

Of special interest might be picture properties where the

user can choose to incorporate a border and horizontal

alignment. The user can choose an image version of his

choice and whether or not to add or modify Alt. text and

Caption.

Figure 39--Picture properties of an inline image

• Edit the properties to be changed

� Border – Enter the weight of border

� Horizontal alignment - Placement of image

� Version - Choose the version used by the templates

� Alt. text – Text displayed when the mouse is placed over it in a

browser

� Caption is the description used and is normally shown under the

image, still template specific

Press OK to save the changes.

Articles 55



Attach articles To attach related articles to your current article click on

the button below the final article

type text field.

Figure 40--Attach articles, multimedia or links button

56



Attach articles, cont.

Click on Find articles and you are brought into the Article

archive. For more information on Article archive, please

refer to Chapter 5, Article Search how to.

Search the Article archive until you find the first article

you want to attach to your article. Place a checkmark in

the left-hand box of the article. To add more articles,

search through the Article archive; place a checkmark in

the left-hand box of the article. Escenic Web Studio will

keep track of the chosen articles at the bottom of the

screen under the heading Previously selected items.

When you are done choosing the articles you want to add

to your original article, click on the button

.

You return to the original article and your choices

display.

Articles 57



Relate more than one article to field

In addition to relational fields there can be relational

types. Instead of relating an article to Body (Default)

where default is the name of the panel and Body the name

of the text field, you can relate an article to one of the

relational types it might have associated to it by

definition.

A relational type example could be, Frontpage or

Attachment. The template then determines the actual

placement within the chosen relational type, Frontpage.

Remembering that relating articles to a field or type are

dependent on the template; if you have three articles that

you want to relate to a field or a relational type, click on

the down arrow in each instance and click on the relation.

Figure 41--Linking of one or more articles to an article

58



Change the order of related articles to field

These articles will appear in the Lead text in the order

shown. If you want to change the order,

1. Click on the directional arrow to move

down one

Figure 42--Change order of articles related to one field

If you want to move the first article to the bottom

Figure 43--Move a related article to bottom of list to change the way the

internet reader views the attached articles

Articles 59



Attach multimedia To attach related multimedia objects to your current

article, Click on the button

below the final article type text field, as shown in

Figure 40.

Click on Find multimedia and you are brought into the

Multimedia archive. For more information on Multimedia

archive, please refer to Chapter 5, Multimedia Search

how to.

Search the Multimedia archive until you find the first

object you want to attach to your article. Place a

checkmark in the left-hand box of the object. To add

more objects, continue searching through the Multimedia

archive; continue to place checkmarks in the left-hand

box of the object. Escenic Web Studio will keep track of

the chosen objects at the bottom of the screen under the

heading Previously selected items. When you are done

choosing the objects you want to add to your original

article, click on the button

.


display. In addition to relational fields there can be

relational types. Instead of relating a multimedia object to

Body (Default) where default is the name of the panel and

Body the name of the text field, you can relate it to one of

the relational types it might have associated to it by

definition.

A relational type example is Frontpage or Attachment.

The template then determines the actual placement within

the chosen relational type, Frontpage.

60



Attach multimedia, cont.

Figure 44--Multimedia object attached to an article

Articles 61



Attach links To attach related links to your current article. Click on

the button below the final article

type text field as shown in Figure 40.

Click on Find links and you are brought into the Link

archive. For more information on Link archive, please

refer to Chapter 5, Link Search how to.

Search the Link archive until you find the first link you

want to attach to your article. Place a checkmark in the

left-hand box of the link. To add more links, continue

searching through the Link archive; continue to place

checkmarks in the left-hand box of the link. Escenic Web

Studio will keep track of the chosen links at the bottom of

the screen under the heading Previously selected items.

When you are done choosing the objects you want to add

to your original article, click on the button

.


display. In addition to relational fields there can be

relational types. Instead of relating a link to Body

(Default) where default is the name of the panel and Body

the name of the text field, you can relate it to one of the

relational types it might have associated to it by

definition.

An example could be, Frontpage or Attachment. The

template then determines the actual placement within the

chosen relational type, Frontpage.

62



Attach link, cont.

Figure 45—Attaching link objects to an article

Articles 63

How to Edit Text

Definition The text-fields are organized into groups of area-

information fields. Each group of information-fields is

placed on a panel. Each has a label identifying it.

For example, Lead text, Body.

Choosing the Article type will determine which

information-fields are included in the article.

Note that article types are customer-specific.

XHTML Editor The XHTML-editor is an ‘MS Word-like’ editor.

This editor has been created to simplify text editing in

Escenic Web Studio. Some advantages of using the

XHTML editor:

• There is no longer any need for coding in HTML or

XML. If required, the source code is available by

right-clinking the mouse inside of the text field.

• It offers graphical shortcuts that perform common

text editing functions.

• Makes text-editing in Escenic Web Studio look and

feel more like common editors such as MS Word.

Many of the editing functions are intuitive and will

work just like MS Word and others.

When you open an article in Escenic Web Studio, you are

often presented with a list of text fields. The XHTML

editor can be applied to one or more fields in the article.

Place the cursor inside a text field. If the field has the

ability to use the XHTML editor it displays the menu in

an active mode.

Note that the text editing toolbar is both customer and

template-specific. Therefore, the example shown may not

be entirely relevant to your site.

Active and Inactive If the menu is not dimmed it is active. The current field is

capable of being edited. If the menu is dimmed it is

inactive.

Figure 46--The display difference is slight between active and

inactive

64

How to Edit Text, continued

Using XHTML Editor Insert text:

1. Place the cursor at insertion point.

2. Enter or paste CTRL +V text into the editor.

Delete text:

1. Place the cursor at deletion point.

2. Press delete for deleting the following letter or

backspace for deleting the preceding letter, or

3. Select the text you want to delete and press delete or

backspace.

Select text:

1. Using the mouse, press left mouse button at selection

start, drag the mouse to the selection end and release

left mouse button.

2. Use short key which is a combination of

CTRL +SHIFT and arrow keys.

Align text:

1. Select the text to align.

2. Click one of the following buttons to align left, center

or right short key which is a combination of CTRL

+SHIFT and arrow keys.

Align text diagram

Figure 47--Align text diagram

Articles 69


Working with Tables, continued

Table Properties Table properties can be edited at any time by placing the

mouse anywhere in the table and right-clicking.

Select how many rows and columns you want by moving

the mouse over the table that appears and click the left-

mouse button in the cell that marks the last cell.

Figure 53--Table properties box

Edit Table Properties Text within tables can be formatted as you would format

text in a document. For example, you can change the type

and alignment. The steps to editing table properties.

1. Right-click the cell to edit

2. Select the ‘table’, ‘column ‘ or ‘cell’ tab and edit the

properties that you want to change

3. Press ‘Ok’ to save the changes

Figure 54--Three tabs in table properties.

70


Working with Tables, continued

Edit Table Properties, cont.

Figure 55--Table properties tab COLUMN

highlighted

Note that the width can be altered either by percentage or

altered by pixels when clicking the downward arrow.

Figure 56--Table properties tab CELL

highlighted

In Horizontal alignment the options

none, left, center and right are presented.

In Vertical alignment options none, top, center and bottom

are presented.

In Width, you can chose altering by percentage or altering

by pixels.

Insert row before This will add an additional row before the row where the

cursor is.

Insert row after This will add an additional row after the row where the

cursor is.

Delete row This will delete the row where the cursor is.

Delete table This will delete the table in its entirety.

Articles


Pre-formatted text

Edit Pre-formatted Text

continued

formatted text

Pre-formatted text will honor multiple character

spaces and line breaks. The code editor will not verify

HTML code. This means if you have a link with

or other non-expected code it is possible to force it through.

1. Place the cursor at the point to insert

pre-formatted text.

2. Click the ‘preform’ button on the menu tabs and an

editor-window pops up.

Enter or paste pre-formatted text and click

To insert a header follow these steps:

1. Right-click just to the right of

select edit preformatted text.

2. Edit the text and click the ‘save’ button

71

formatted text will honor multiple character

spaces and line breaks. The code editor will not verify

HTML code. This means if you have a link with ‘ & ‘ in it

code it is possible to force it through.

button on the menu tabs and an

formatted text and click Save.

and

button.


Edit XHTML Source

Undo Editing

Redo Editing

Search and Replacewithin Text

continued

To edit XHTML source follow these steps:

1. Right-click in the editor and select ‘Edit Source

2. Edit the source code and click the ‘save

Note. This feature should only be used by experienced

users who know the basic rules of HTML/XHTML/XML

editing.

Some edits are performed in several operations.

For example, if you delete a part of the document in one

operation, in might be that you have to perform the undo

operation more than once to restore the content of the

editor.

• Click the button on the menu tabs

• Use short-key CTRL +Z

To redo previous editing.

• Click the button

• Use short key CTRL +Y

Search and Replace

To search and replace follow these steps:

1. Click the Search and Replace button

2. In the Search box select ‘Find’ or the ‘

3. Enter the text you want to search for and what you

want to replace it with, if applicable. Select any other

options you want. Click ‘Find next’ or

4. Click ‘Close’ when you finish searching

Figure 57--Search and replace box

72

steps:

Edit Source’.

save’ button.

Note. This feature should only be used by experienced

users who know the basic rules of HTML/XHTML/XML

Some edits are performed in several operations.

For example, if you delete a part of the document in one

operation, in might be that you have to perform the undo-

operation more than once to restore the content of the

enu tabs

Click the Search and Replace button .

‘Replace’ tab.

Enter the text you want to search for and what you

want to replace it with, if applicable. Select any other

or ‘Replace’.

searching.

Articles 73


Insert symbols To insert symbols such as ½ , symbols that are not on

your keyboard, click on the insert symbol link .

Choose the symbol to insert, click on insert and then

close.

Figure 58--Insert symbol dialog box Formatted: Font: 10 pt, Bold, English (U.S.)

Field Code Changed

Formatted: Font: 10 pt, Bold, English (U.S.)

Formatted: Font: Bold, English (U.S.)

Formatted: English (U.S.)

Links

Insert External Image

Figure 59--Insert external image dialog box

Insert Header

Place your cursor in the information or text area where

you want to insert an external image.

1. Click on the Insert external image icon

2. The dialog box appears.

3. Enter the URL of the image and click

Insert external image dialog box

To insert a header follow these steps:

1. Select the paragraph(s) you want to convert to a header

2. Place the cursor in the paragraph where

convert to a header.

3. Click and a dropdown list appear

Choose header from the dropdown list.

4. Select type of header (H1-H6) to create the header, or

select ‘p’ or ‘blank’ if you want to convert to an ordinary

paragraph.

74

ace your cursor in the information or text area where

Click on the Insert external image icon .

Enter the URL of the image and click .

Select the paragraph(s) you want to convert to a header.

where you want to

and a dropdown list appears.

Choose header from the dropdown list.

H6) to create the header, or

if you want to convert to an ordinary

Articles 75

Links, continued

Insert Links There are two ways to identify links in your articles.

A link can be created during the entry of your article.

A link can also be retrieved from the Link archive.

To insert a link or a jump to other WWW documents

during the creating or editing of an article follow these

steps:

1. Place the cursor in the text where you want to insert a

link.

2. Now, place the cursor over the link insert icon

on the text editing toolbar located with the

region of text you’re in. For example, if you are

entering text in Lead text, choose the link insert icon

associated with that region. Click on the icon.

Figure 60--Insert link dialog box

3. Enter in the link information. Note that the Link text

is the identifying text that will appear in the article.

Click .

4. You can click on Preview at any time during the

creation of your article to get an advance view of

what it will look like.

76

Links, continued

Insert Links, cont. A link can also be retrieved from the Link archive.

For a quick summary on how to retrieve a link from the

Link archive follow these steps.

Figure 61--Step 1. Click on the attach links button in

the lower region of your edit article screen.

Articles 77

Links, continued

Insert Links, cont.

Figure 62—Find options present to you.

There are several options available,

• Enter the unique ID of a link and press the

button

• In Search Word – Type in a word or part of the link

text in the Search for: and press the button.

The asterisk may be used as a wildcard character.

For example, al* , instances of links with the words

REAL ESTATE, FOOTBALL, ROYALTY OR REALITY in

the link text field or

• Set date-specific date interval

From: Date-specified searches links that have

been created from this date.

To: Date-specified searches links that have

been created up to and including this date.

You have quick access to dates using the calendar view.

The date first shown is read using the PC's local date.

Empty calendar clears the date fields

1 = today

2 = past two days

7 = past week

30 = past month

Figure 63--Calendar definition

• and press the button

Objects 80

CChhaapptteerr 33

Objects

Definition In addition to text, an article consists of images, external

links, links to other articles, pictures, etc. These are

referred to as objects. Examples of additional objects are

• media files such as word documents, spreadsheets,

PDFs, film clips and more

• persons, as in authors added to an article

• topics

Image Upload When you create an image upload you are introducing an

existing image to your database.

Figure 65--From Home page, click on the OBJECTS link in the Menu

bar.

Objects 81

Image Upload, continued

From Create New panel

Figure 66--On the right-hand Create new panel click on Image and

the following image displays, or,

Figure 67--Upload a new image editor

82


From Search archive

From Home page click on the OBJECTS link in the

Menu bar, See Figure 65.

Figure 68--Click on the downward arrow in the Search panel, select

Image and click on Search.

Figure 69-- Upload image from within Image archive.

Click on Image archive.

Objects 83


Either of these instances for uploading an image will

produce the dialog box in the next figure.

Figure 70--Upload a new image dialogue box

84


Choose file Click on the browse button. The choose file dialog box

will display. Locate the image in your database.

Highlight the object and click on Open.

Figure 71--Choose file dialog box

1. Click on the downward arrow in catalogs and choose

the catalog the image is to be placed in.

2. Press to store the picture to the

Escenic Web Studio. The image will be assigned an

ID and is ready for use in the system.

Objects 85


Image Details

Figure 72--System generated details box and definitions

Image Icon Image name and size in pixels. This name is used during search.

Catalog Images listed in order with descriptive details.

Name Image name and size in pixels. This name is used during search.

Description A statement that gives more information.

Alt. Text Text that displays when the mouse is held over the image and

used to read aloud for blind and partially sighted.

Copyright Copyright text.

State An image is either published or in create mode.

Original The original version of the image.

Generate Version

Image versions were generated and display these along with a

name and a dropdown box indicating their size and placement.

New versions will have an incrementing prefix for easy access.

Red X's mean that the version can be deleted by pressing the X.

86


Image Details, cont.

Figure 73--System data box and definitions

ID Unique ID of the image

Publish date Date of last publication

Last modified Date of last modification

Save

The SAVE button will save any new input and/or

modifications to the image. The screen remains open for

additional work, if required.

CloseThe CLOSE button only closes the opened image.

Modifications made are not saved with the CLOSE option.

The CLOSE button only closes the opened image.

Modifications made are not saved with the CLOSE

option.

Objects 87



IPTC tags

Figure 74-IPTC

IPTC is a standard of information contained in images and

Escenic is developed with this standard. Any or all of these

items can be added to and are stored in the database.

When the author is satisfied with the information concerning

the image it is ready to be saved or Published.

• Photographer

• Author

• Category

• Supplemental Category

• City

• Province/State

• Country code

• Country

• Location

• Credit

• Local Caption

88



Usage Tab The Usage Tab indicates where the image is visible.

In this example our image is visible in two articles and

has the article state icon meaning published. The ID of

the article the image is visible in and the name of the

publication are also displayed.

Click the article title to view the article in the preview

window.

Figure 75-Image Usage tab

The Usage tab shows in which article(s) the image is

used.

Objects 89

Multimedia Upload

When you create a multimedia upload you are introducing an

existing piece of multimedia to your database.

Figure 76--From Home page, click on the objects link in the

Menu bar.

90

Multimedia Upload, continued

From Create New panel

Figure 77--On the right-hand Create new panel click on Multimedia

to produce the following image.

Figure 78--Upload a new multimedia file

Objects 91


From Search archive

From Home page, click on the OBJECTS link in the Menu bar.

Figure 79--Click on the downward arrow in the Search panel, select

Multimedia and click on Search.

Figure 80--Resulting Upload a new multimedia file dialog box

In practice almost all file types can be uploaded in the

Escenic Web Studio’s Multimedia archive. A small sample

of these files are:

• .doc, .dot

• .xls

• .gif, .jpeg, .jpg

• .pdf, .txt

• .zip, .wav, .avi

92


Figure 81--Choose file dialogue box

1. Click on the Browse button.

The Choose file dialogue box displays.

2. Navigate until you find the multimedia file you are

searching for. Click on Open.

3. Note that the address for this multimedia file is now

placed in the File: locator. Our example is AVI.

4. Click on the downward arrow in catalog and choose

in which catalog the multimedia file is to be placed.

5. Press the UPLOAD button and the multimedia file is

saved on the Escenic system displaying the Edit

multimedia box for characteristics descriptions.

Figure 82--Example of an upload of an AVI multimedia file

Objects 93


6. Notice on the right-hand side of your multimedia

book, the file has been assigned a unique ID and is

now available to use.

Figure 83--System generated details box and definitions

Multimedia icon Multimedia name. This name is used during search.

Catalog Multimedia listed in order with descriptive details.

Name Multimedia name. This name is used during search.

Description A statement that gives more information.

Location Placement location

Copyright Copyright text.

Alt. Text Text that displays when the mouse is held over the image.

Author Author of merit.

State Multimedia is either published or in create mode.

Original The original version of the multimedia file.

94


Usage Tab The Usage Tab indicates where the multimedia object is

visible.

In this example our image is visible in one article and has

the article state icon published. The ID of the article the

image is visible in and the name of the publication are

also displayed.

Click the article title to view the article in the preview

window.

Figure 84--Usage information

Objects 95

Link Upload

When you create a link upload you are introducing a link to your

database.

Figure 85--From Home page, click on the Objects links in the

Menu bar


Working with Tables

Why a table

Create a table

Edit table size

Delete a Table

continued

Working with Tables

You can create tables to display information

narratives within an article.

1. Click the location in your text where you want a table

to appear.

2. Press the table icon on the toolbar

3. Select how many rows and columns you want by

holding down the left mouse button as

mouse to highlight the number of rows and columns

you want the table to contain. Click and the table

appears in your text.

The steps to inserting a new row in a table.

1. Right-click a cell in the row where you want to insert

a row.

2. Select insert before or insert after to inserting a row

before or after the row where you have placed the

cursor.

To delete a table.

• select the rows to delete and press delete

or

• right-click on a cell in the table and select delete table

or delete row

68

You can create tables to display information or enhance

Click the location in your text where you want a table

.

Select how many rows and columns you want by

holding down the left mouse button as you move the

mouse to highlight the number of rows and columns

you want the table to contain. Click and the table

The steps to inserting a new row in a table.

click a cell in the row where you want to insert

Select insert before or insert after to inserting a row

before or after the row where you have placed the

delete or backspace

ell in the table and select delete table

Sections 107

CChhaapptteerr 44

Sections

What is a Section

Definition Section pages are front and sub-pages of the front page.

Examples of sections might be sport, local news or

culture and these section pages may also have sub-pages.

The web desk and the inbox lay inside the Section-page.

Articles can be placed in one or more sections.

The purpose of Section-pages is to desk articles that will

be presented on a section-page or an internet page.

The section structure than becomes the navigational

menu structure of the site.

Sample Structure of a Section page

Figure 104--Section page sample structure

Note: The Escenic system includes access control,

allowing the editor to assign roles, such as restricting

users from editing certain sections. The Editor, as a user,

can have access to one or more Section pages.

The Editor’s role comprises of receiving, finding and

approving articles to publish on a Section page.

Section editor implies Journalist.

108

Section page Layout

Definition Section page layouts in Escenic Web Studio are presented

in the same style, that is, you will always be presented

with an Inbox and a Web desk. What they consist of and

their individual naming structures are client-specific.

Please note that when an editor opens a Section page, it is

locked and unavailable for other editors to use. When an

editor is done with the Section page it is important that

the Section page is closed.

The examples given here are based on a sample column

template entitled SIMPLE DEMO 1.

Figure 105--Sample Section page layout

Sections 109

Section page Layout, continued

Layout Details

Section detail using Figure 96

• Front page and the section icon keep you

informed where you are

• Section ID – The Section ID is the number assigned

that uniquely identifies the section

• Section Name – The name of the section in our

example is SPORT and this is the name that is used

externally on the web site

• Source – The source is the name of supplier of any

imported information or data

• Source ID – The source ID is the unique ID of the

article from the supplier’s program

Sample Inbox The Inbox is a holding cell for articles awaiting the editor’s

decisions about when and where these will go on the

internet.

• Arrowhead – The arrowhead is used as an

identifier to move articles from the Inbox to any one of

the layouts on the Web desk below

• Select box – Mark the select box and press the

arrowhead in the article group where you want the

article to be moved

• Article state – The article has different article states at

different times during the workflow; draft, submitted,

approved, deleted and published, but only published

article are shown on the internet, represented by this

icon

• Title – Click on the article title and you are taken to

the Article editor for possible further revisions. Click

and you are returned to the Section editor

• View article – Click on and you will see the

article and it looks in the Preview window

110


Layout Details, cont.

Sample Inbox, cont.

Figure 106--Top half of Sample Front page with

Column template highlighted

Remove To remove one or more articles from the Inbox mark the

select box and press the word Remove.

Find articles

Click on Find articles and you are transported to Article

archives where you can, for example, create an article

search. When you find the article(s) you want to add to the

Inbox, mark the select box and click on the button

marked as . You are returned

to the Section page where you started.

Sections 111



Column template The Column Template is responsible for the content layout,

for example, whether the page uses a 2- or 3-column

layout. The column template defines a ‘grid’ with slots

where stories can be placed. Remember that templates are

client-specific.

Our sample shows SIMPLE DEMO 1 which presents three

areas where articles are placed.

• TOPSTORY

• LEFT

• RIGHT

Figure 107--Sample column template

For example, changing the column template plays a part

in the ‘look’ of how articles are presented.

112



Column template, cont.

Figure 108--Column template pull down and highlight of

another template

Figure 109--A column template change could alter content

layout to look like this.

Sections 113



Sample web desk

Figure 110--Web desk illustration

Article group Name The Article group names are a collection of articles that

present in the same area or same fashion. Our sample

collective Article groups are:

• TOPSTORY

• LEFT

• RIGHT

Remember that templates are client-specific.

Our sample shows SIMPLE DEMO 1 which presents three

areas where articles are placed.

Section page Layout


Sample web desk, cont.

Note: It is possible to Time control the article itself by editing

the article’s

page

Layout, continued

e web desk, cont.

• Arrowhead – The arrowhead is used as an


the layouts on the Web desk below and

article on the Web desk back to the Inbox

• Select box – Mark the select box and press

arrowhead in another article group where you want the

article to be moved

• Article state – The article has different article states at



article are shown on the internet

• Title – Click on the article title and you are taken to the

Article editor for possible further revisions. Click


• Time control-- The dates and times shown control

when the article is visible on the web s

Section page only. This time control does not affect the

same article on another Section page

No icon indicates that the time control

this article and the article is active

Green arrow indicates that time control

this article and date(s) and/or time(s) have not yet

expired

One red arrow indicates that time control

and the article is waiting for the date(s) to become

active

Two red-arrows indicate that time control

and based on the date(s) and/or time(s) the article is

waiting to be shown

Red X indicates that the article has expired


the article’s time control in the Article editor. Please refer

page 41 Time control of the article.

114

arrowhead is used as an


and for returning an

article on the Web desk back to the Inbox

Mark the select box and press the

where you want the

The article has different article states at



Click on the article title and you are taken to the

Article editor for possible further revisions. Click


The dates and times shown control

when the article is visible on the web site for this

does not affect the

time control does not exist on

time control exists on


time control exists

and the article is waiting for the date(s) to become

time control exists


indicates that the article has expired


the Article editor. Please refer to

Sections 115




To place time control, cont.

From date/time, click on From and a calendar displays.

1. Using the arrows at the top, click on arrow until the

month displays.

2. Click on a date.

3. Enter a time in the time boxes.

4. Click OK to confirm.

The confirmation will display in the form of date and

time and corresponding time control indicator arrows.

To date/time, click on To and a calendar displays.

5. Using the arrows at the top, click on arrow until the

month displays.

6. Click on a date.

7. Enter a time in the time boxes.

8. Click OK to confirm.

The confirmation will display in the form of date and

time and corresponding time control indicator arrows.

Section page Layout


To place time control, cont.

Figure 111--Example of Time control

page.

Figure 112--Example of Time control indicator arrows after time

passes.

Layout, continued

cont.

Example of Time control indicator arrows on a section

Example of Time control indicator arrows after time

No icon indicates that the time control does not exist on

this article and the article is active.

Green arrow indicates that time control


expired.

One red arrow indicates that time control

and the article is waiting for the date(s) to become active

Two red-arrows indicate that time control


waiting to be shown.

Red X indicates that the article has expired.

116

arrows on a section

Example of Time control indicator arrows after time

does not exist on

time control exists on


time control exists

cle is waiting for the date(s) to become active.

time control exists


indicates that the article has expired.

Sections 117




• Element template - A Section page is comprised of

sets of articles. The presentation of the article on the

Section page is only a portion of the article usually

with a title and lead text. Changing the Element

template and previewing the article show different

ways of presenting a portion of the article on the

Section page.

• Preview – Click on View article and you will get a

view of what the article will look like on the Section

page.

Figure 113--Sample element template location on Section page

118




Changing the Element template alters the layout of the

article on the Section page. The Element templates

available may vary between Article groups and article

slots. The Element template displays a single story in the

slots from the column template. There can be several

different element templates on a single front page, at

most one for each slot in the grid. The element template

can be used on several stories on the page.

These templates can change the font size of the title,

change what the picture is linked to or which text fields

are to be shown, for example, teaser text. Remember that

templates are client-specific.

Figure 114--Element template user places article

Figure 115—Figure shows a different element template

that now permits pictures or links.

Sections 119



Sample Inbox, cont.

Publish The Publish button along side of the Inbox publishes any

changes that you make to the section. For example, re-

align an article from one area of the section page to

another or move an article from TOPSTORY to RIGHT,

you must click the button to acknowledge

and save changes.

Preview The Preview button allows you to look at changes made to

the section, for example, changes made by selecting a

different column template or the changes made in the order

of articles.

Figure 116--Sample Web desk with intent to publish an

article by selecting article

Published selected articles

The button at the bottom of the

Section page in conjunction with a selected article(s) will

amend the article state to that of Published.

120



Section lock

Please note that when an editor opens a Section page, it is

locked and unavailable for other editors to use. When an

editor is done with the Section page it is important that

the Section page is closed.

Figure 117--How others see that a section is locked

Sections 121

Steps to place articles on the Internet

Definition The steps that follow are to assist an editor in placing

articles on the internet. It is assumed that user roles are in

place and correct for the editor to accomplish this.

Articles that have not been assigned the state ‘published’

will not be shown on the web. To change the state of the

article without having to open it, select the article via the

checkbox and use the button. All

selected articles will be change to ‘published’.

Step 1

From Home page From the Home page click on the Sections link on the

Menu bar.

Figure 118--From Home page click on the Sections link

122

Steps to place articles on the Internet, continued

Step 2

Select Front page

Figure 119-- Select a Section Front page, example Sports

Choose a section from the Section Tree. Click on the

section you see, or the section list expands and collapses

by pressing the + and – symbols next to the section name.

If you are unsure where the section is search for it in the

Choose section box, either by name look up or Section ID

and press the button.

Sections 123


Step 2

Select Front page, cont.

Figure 120—Search by section name, if known or enter

an ID

Look up section by name – Type in a word or group of

words and press the button.

For example, al* will retrieve instances of section names

with the words REAL ESTATE, FOOTBALL, ROYALTY OR

REALITY in the text field. If the list of section names

presented are not what you are looking for click on

to return to the original Choose section list, or

ID The unique number of the Section, or

Use Section Tree Choose a section from the Section tree by clicking on the

section you see. The section list expands and collapses by

pressing the + and – symbols next to the section name.

124


Step 2, cont.

For this exercise we will click on Sports.

Figure 121--Click on the Section Sports

Step 3

Select articles to Move to Web Desk

Articles can be placed on the Web desk in two ways.

• Inbox – Move articles from the Inbox down to the

Web desk. An author sends articles to the Inbox or

the editor has placed them there for editing.

• Find Articles button – The article is added to the web

desk by the editor by finding the article in the Article

archive. Each Article group has a corresponding Find

articles button. You use the corresponding Find

articles button to add articles to the Article group

desired.

User tip: Search and select all articles and put them

in one Article group and then distribute the articles to

the correct Article group.

Sections 125


Step 3, cont.

Select articles to Move to Web Desk

Figure 122--Select articles to move to Article group

in Web desk. Press the arrowhead inside the

Article group where you want to place the selected

articles.

126


Step 3, cont.

Web Desk after move

Figure 123--Articles now appear on the Web desk

Sections 127


Step 3, cont.

Select second grouping of articles to Move to Web Desk

Figure 124--Move second group to Web desk

128


Step 3, cont.

Web Desk after second move

Figure 125—All Articles now appear on the Web

desk

Step 4

Preview and Publish the Section page

Preview changes to the Section page without saving by

clicking on the word Preview to see the Section page in the

preview window.

To publish the Section page click on the

button.

Close the Section by pressing the or the section

is locked to other users.

Documents

Escenic Web Studio - NTNU · From Home page From the Home page click on the Articles link on the Menu bar. Figure 18--Home page Article link From the Home page in the Create new panel