Multimed Tools ApplDOI 10.1007/s11042-013-1734-z

EDITEC - a graphical editor for hypermediacomposite templates

Jean Ribeiro Damasceno · Joel André Ferreira dos Santos ·Débora Christina Muchaluat-Saade

© Springer Science+Business Media New York 2013

Abstract Hypermedia composite templates define generic structures of nodes andlinks to be added to a document composition, providing spatio-temporal synchro-nization semantics. This paper presents EDITEC, a graphical editor for hypermediacomposite templates. EDITEC templates are based on the XTemplate 3.0 language.The editor was designed for offering a user-friendly visual approach. It presentsa new method that provides several options for representing iteration structuresgraphically, in order to specify a certain behavior to be applied to a set of genericdocument components. The editor provides a multi-view environment, giving theuser a complete control of the composite template during the authoring process.Composite templates can be used in NCL documents for embedding spatio-temporalsemantics into NCL contexts. NCL is the standard declarative language used for theproduction of interactive applications in the Brazilian digital TV system and ITUH.761 IPTV services. Hypermedia composite templates could also be used in otherhypermedia authoring languages offering new types of compositions with predefinedsemantics.

Keywords NCL · XTemplate · Graphical editor · Hypermedia composite templates ·Authoring tool

J. R. DamascenoMídiaCom Lab, Telecommunications Engineering Department,Universidade Federal Fluminense, R. Passo da Pátria, 156,Bloco E, Sala 408, Niterói, Rio de Janeiro, Brazile-mail: damascon@midiacom.uff.br

J. A. F. dos Santos (B) · D. C. Muchaluat-SaadeMídiaCom Lab, Computer Science Department,Universidade Federal Fluminense, Rio de Janeiro, Brazile-mail: joel@midiacom.uff.br

D. C. Muchaluat-Saadee-mail: debora@midiacom.uff.br

Multimed Tools Appl

1 Introduction

Ginga-NCL is the declarative middleware of the Brazilian digital TV system andITU international standard for IPTV services [18]. It uses NCL (Nested ContextLanguage) [1] for the development of declarative applications. With Ginga-NCL,digital TV users can have access to interactive programs. Some examples areelectronic government programs (t-Government), health systems (t-Health), besidesother non-linear programs, such as quizes or interactive narratives, whose parts canbe chosen by TV users.

As the use of NCL becomes widespread, the number of applications tends togrow, so it is important to provide tools for facilitating application development.The authoring of more elaborated digital TV declarative applications producesbigger hypermedia documents. The need for defining a great number of relationships(represented as links in NCL) among document parts (nodes), as well as presentationspecifications (regions and descriptors in NCL), introduces more difficulty in theauthoring process. Also, bigger hypermedia documents increase the probability ofspecification errors. In this scenario, reuse of generic program specifications and useof graphical editors make the authoring process easier.

XTemplate 3.0 [11] is an XML-based language [26] that provides the definitionof generic document structures through the concept of composite templates [23].Hypermedia composite templates allow reuse of document structural specificationsin distinct documents with common structural characteristics. The template user onlyhas to define specific media nodes to be used in the final document. Spatial layoutand temporal relations, as well as user interaction specifications are automaticallygenerated by template use. Therefore, final document authors do not need to worryabout those definitions, which makes the authoring of NCL documents easier.

A remaining issue about composite template creation, using the XTemplate XML-based textual approach, is that it is not an easy task for non-expert authors. Thetemplate author needs to know XTemplate syntax and semantics very well andshould have a good abstraction capacity. In addition, the understanding of the docu-ment structure becomes more difficult as the quantity of information grows. Textualedition has great flexibility and expressiveness, on the other hand, it consumes muchtime. For some users, the time spent defining documents in a textual approach makesthe authoring process very tiring. In order to solve this issue a template authoringgraphical tool is desirable.

For application development, graphical tools are extensively used, such as Flash[13], Blender 3D [3] , AutoCAD [2], etc. In a graphical editor, the use of iconsfor indicating authoring actions allows the author to associate visual components ofthe graphical interface with editing events, instead of remembering element namesand language commands. However, the development of an easy-to-use and flexiblegraphical editor for template manipulation, allowing the creation of several differenttemplates, is a challenging task.

Considering XTemplate characteristics and some related works found in the liter-ature, a set of desirable requirements for a composite template graphical authoringtool can be highlighted:

– presentation of a hypermedia document in different views, such as structural,textual and temporal views, providing the author a greater intuition of theapplication behavior;

Multimed Tools Appl

– definition of generic template components, which are used for representing a setof document elements;

– definition of iteration structures (repetition structures), which are used to specifya certain behavior for a generic template component;

– template semantic descriptions, facilitating the use of a template in differentNCL documents and authoring tools;

– cross-platform portability.

Aiming at fulfilling those requirements, this work proposes EDITEC [8], acomposite template graphical editor based on the XTemplate 3.0 language. Theeditor allows the creation of templates in an interactive way. Its main goal is tohelp creating composite templates, especially by XTemplate non-expert users. Theeditor offers a friendly graphical environment with multiple views/windows that helpthe user creating templates efficiently. EDITEC’s graphical notation is based onthe notation used by both NCL and XTemplate documentation to represent theirlanguage elements. Notice that, it is important to take into account issues related tothe notation used by the editor. A discussion about those issues will be presentedtogether with the proposed tool graphical notation.

EDITEC also provides several options for graphically representing iterationstructures, specifying a certain behavior to be applied to a set of document elements.Templates can be created and stored in a template base [11] allowing their furtherreuse inside different hypermedia documents. As EDITEC is developed in Java, italso provides platform portability.

This paper is an extended version of [8]. In this text, EDITEC’s iteration structuresand the template building process are deeply analyzed, presenting some functional-ities of EDITEC in more details, as the interface for editing bind and port mappingelements.

The remaining parts of the paper are organized in the following way. Section 2discusses related work. Section 3 briefly comments NCL and XTemplate 3.0 mainconcepts. Section 4 presents EDITEC’s graphical representation of XTemplateiteration structures. Section 5 presents EDITEC, its main views and functionalities,and the Bind and Port Mapping Editor, which avoids the need for defining textualXPath [24] expressions. Section 6 shows a template example built with EDITEC.Section 7 presents EDITEC’s usability tests. Section 8 presents final remarks andfuture work.

2 Related work

Multimedia authoring tools facilitate the authoring process because they offer graph-ical interfaces through which users can easily create and interactively manipulatehypermedia presentations. Many of those tools offer the possibility of editing thedocument in different views, giving users a better overview of the document and agreater control of the application during the authoring process. There are severalproposals for hypermedia authoring tools found in the literature [5, 9, 10, 14, 16, 19–21]. Those tools provide many important features for creating hypermedia applica-tions. A comparison is made among them highlighting their main features.

LimSee2 [9, 19] is a SMIL [27] document authoring tool. It offers several in-tegrated views (temporal, spatial, textual, etc). Two of its views are more refined

Multimed Tools Appl

(layout and temporal views) and two are simpler (XML tree and code views). Userscan define media synchronization by moving media nodes in the temporal view.Media nodes are represented graphically as boxes whose position on the time axisdefines the starting and ending times of the object and whose length represents theobject duration. The layout view produces images, moving pictures and text styles.It also simulates the document presentation, including animations and some effects,like transparency.

LimSee3 [20] is a hypermedia authoring tool based on document templates.Deltour and Roisin [10] propose the LimSee3 model. That model uses templates forhelping the authoring of hypermedia documents. Although the names may suggestdifferent versions of the same editor, LimSee3 is not a newer version of LimSee2.LimSee2 is a SMIL editor, and is dependent on the base language. LimSee3 aimsat language independent authoring, based on the logical structure of hypermediadocuments. It can produce SMIL-based documents, but its model is not SMILdependent.

In LimSee3, the user creates a document by instantiating a template, in a kindof guided application. A template may be seen as a “document with holes”, calledzones. The instantiation process consists of filling those “holes” with hypermediacontent. LimSee3 organizes media objects in media libraries. After a template ischosen, the user may move those media nodes to template defined zones, by clickingand dragging the mouse.

SMIL Builder [5] is an incremental authoring tool for SMIL documents. Theauthoring system includes a temporal validation mechanism, based on the H-SMIL-Net model [4]. The authoring tool provides four views: hierarchical, textual,attribute and temporal view. The hierarchical view allows the author to visualizethe temporal elements of the document like a tree, providing a neat representationof the hierarchical structure of the SMIL document. The hierarchical view is themaster view, it allows the modification of the SMIL specification and the resultis automatically displayed on the textual and temporal views. When an element isselected in the hierarchical view, the values of its temporal attributes are displayedin the attribute view. The textual view is a read-only view displaying the SMILdocument code. The temporal view displays the H-SMIL-Net representation of theSMIL document. Through that view, the user can visualize the synchronizationrelations between document objects. Other SMIL dimensions like spatial layout andhypermedia linking were not included in the authoring tool.

Composer [16] is an authoring tool that supports multiple integrated views forcreating NCL documents. It allows the user to work with structural, temporal,textual and layout views. The structural view abstracts NCL main entities [1].In that view, the author may edit media nodes, contexts (set of nodes and itsrelationships) and links (relationships among nodes). In the layout view, the au-thor may edit spatial regions associated with node exhibition. The temporal viewabstracts the temporal relationships among nodes, presenting a graphical visual-ization of those relationships. Composer does not offer the use of templates forauthoring.

Lamp [14] is an authoring environment that contains a visual editor for presen-tation authoring, an execution simulator to test the presentation behavior and aplayer, to exhibit and execute the complete presentation. It allows the definition ofpresentation templates that can be instantiated with different data. The Lamp model

Multimed Tools Appl

defines five basic synchronization relations and two media control types, called timerand user interaction object.

The main component of the authoring environment is the visual editor. Thateditor is based on a graphical notation in which nodes are media objects and edgesare synchronization relationships between them. The visual editor also providestools to represent the screen layout. It has two views: one for defining channelsand the presentation layout and another for defining the temporal behavior. Thepresentation result is saved as an XML document.

SCO Creator Tool [21] is used for creating learning self-adaptive content throughdigital TV systems. It is used for creating t-learning self-adaptive objects, called SCO(Sharable Content Object). The main characteristic of those objects is to be ableto change their behavior according to the characteristics of the student (viewer),making the learning process through iTV more enjoyable. An SCO contains threemain components: a Java template, several configuration files and an adaptation file.Each configuration file is an XML file, which specifies the behavior of the SCOto a particular option. That file lists the objects placed in template spaces as wellas their properties. The adaptation file is also an XML file containing adaptationrules. Those rules indicate the SCO, according to the characteristics of each user,and what behavior it should display to the user. The tool provides an editor foradaptation rules. Using that editor, content creators are able to indicate target usercharacteristics for each option, using a logical expression.

Similar to most of the tools mentioned in this section, EDITEC, the editorproposed in this paper, also has different views that facilitate the understanding ofthe composite template during the authoring process. EDITEC provides an area thatdisplays the properties of selected elements, similar to the attribute view of LimSee2,and a layout view, as LimSee2 does. The difference between EDITEC and LimSee2is that EDITEC provides a structural view, not present in LimSee2, and its currentversion does not present a temporal view, as LimSee2 does.

The LimSee3 model uses XSLT standard elements [25]. In EDITEC, XSLTelements are used for building iteration structures. Both LimSee3 and EDITECalso use XPath expressions to create references to objects. LimSee3 main focusis to fill the “holes” of already-made templates with media content in order tocreate applications. On the other hand, EDITEC main focus is the constructionof templates, which can be stored in a template database for later use possibly bydifferent authoring tools.

The SMIL Builder textual view is very similar to EDITEC textual view, both areread-only views that present the application code being generated. SMIL Builderuses its temporal view as the main view for application development. EDITEC,however, uses its structural view, since the application development is done byspecifying links and connectors, which are done in the structural view.

Composer is used for building NCL programs. In an NCL program, there areno generic components, so it is not necessary to define iteration structures. On theother hand, in a composite template construction, those structures are often used,which makes EDITEC design more complex, because it is necessary to graphicallyrepresent those iteration structures and generic components. Similar to Lamp thatuses operators for synchronization of media objects, EDITEC also uses specialoperators for the creation of generalizations. Those generalizations are translatedto XTemplate repetition structures (for-each elements) in the composite template

Multimed Tools Appl

XML code, in order to specify a certain behavior to be applied to a set of genericdocument elements. Finally, SCO Creator Tool provides an interface for creatingadaptation rules. That tool has some characteristics similar to EDITEC graphicalinterface for building basic XPath expressions. In both of them, the user createsexpressions, interactively, which are converted into XML code. However, notice thatthe expressions created for SCO and XTemplate have different purposes. In SCO,an expression is an adaptation rule, while in XTemplate, it defines how to select a setof document components.

3 Hypermedia composite templates

A hypermedia document may use compositions to improve its structure and or-ganization as needed or desired. For example, a book can be represented by acomposition that contains other compositions representing its chapters and so on.Some hypermedia authoring languages also embed semantics to compositions, thuscomponents of a composition receive certain predefined behavior without detailingspecific relationships within the composition. That way the creation of a hypermediadocument becomes a much simpler task. However, those languages offer only alimited set of compositions with embedded semantics. SMIL, for example, providesonly three temporal container types, which are parallel, sequential and exclusive. Inthose languages, complex relationships must be built through a hierarchical nestingof basic containers. In this case, the authoring process is not so easy and reusefacilities are not provided.

In the case of the NCL language, compositions, called contexts, do not haveembedded semantics, so the specification of relationships among components, rep-resented by links, becomes necessary. One way of embedding semantics into ahypermedia composition is to make use of composite templates [11, 23]. A compositetemplate specifies generic components and relationships among those componentsthat a composition may have. The document whose composition uses a template be-comes responsible for identifying those components as media or composite elements.

With composite templates, compositions with different semantics can be createdand authors do not need to be limited to a predefined set of compositions provided byan authoring language. When new compositions with different semantics are needed,they can be created as composite templates and stored in libraries for being used andreused whenever an author wants.

Figure 1 shows an example of two compositions with and without embeddedsemantics. The composition with embedded semantics is a SMIL sequential com-position and the one without is an NCL composition. We can notice that in the

Fig. 1 Sequential compositions in SMIL and NCL

Multimed Tools Appl

Fig. 2 Example of template use

composition with embedded semantics the number of items to be described is lessthan without embedded semantics. Basically, the user has to select the compositionwith the semantics that he wants and define the media objects that will be used inthe application. In the composition without embedded semantics, the user has todefine all synchronization relationships among media objects. Those relationshipsare defined using links and connectors [23] in NCL.

Predefined types of composition with embedded semantics can be seen as tem-plates. Figure 2 shows an example of a template with sequential semantics being usedby a composition without embedded semantics where only media nodes are defined.This template uses links to specify synchronization behavior between its components.The final document generated after the template processing will contain the medianodes of the document that referenced the template and also the synchronizationlinks defined in the template, giving the sequential semantics.

3.1 NCL language

NCL [18], like other hypermedia authoring languages, focuses on media (text,image, video, audio, etc) synchronization, and not on media content definition. NCLprovides nodes (media and context nodes) and links that represent relationshipsamong those nodes. An NCL link uses a hypermedia connector [23], which definesa generic relation among participants. Connectors do not specify the nodes that willeffectively participate in a relationship, as links do.

Since NCL is a declarative language, its focus is not on traditional programminglanguage functions, like math calculations or iteration structures. When this kindof task is required, NCL documents may use Lua [1] scripts, represented as medianodes. NCL is an XML-based language [26], whose root element represents ahypermedia document and contains a head and a body element.

The NCL head element defines or imports region, descriptor and connectorbases, among others. The document body uses those definitions for specifying mediaobjects and synchronization relationships among them. The region base definesscreen regions where media nodes will be presented. The descriptor base definespresentation characteristics of media nodes, for example, duration, volume, a regionwhere a media object using this descriptor will be presented, etc. The connector base

Multimed Tools Appl

defines connectors that will be used in links defined in the document body. With thatseparation, a same connector can be reused in several links.

The NCL body element defines document media nodes and links. Besides, it mayalso define context nodes (compositions), which are sets of nodes and links, used forspecifying the document logical structure. Context nodes may define interface points,called ports, in order to provide access to their internal nodes.

The body element may also define content control elements (switches), usedfor presenting alternative content, and node interface points (ports, anchors orproperties), among others.

Relations in NCL are first-class entities. They are specified by connectors, whichdefine generic relations that can be used across the document. It specifies thesemantics of a relationship without defining the participants of that relationship. Thatway, the same relation can be reused for defining different relationships, representedby links. Suppose, for example the sentence “the professor role teaches the studentrole”. It defines a connector with roles “teacher” and “student”, so someone has therole of teaching and someone has the role of learning.

A link is defined by referencing a connector and defining a set of binds, associatingeach connector role to a node interface point. This way, several relationships (links)can reuse the same connector defining only the participant nodes. Suppose a linkdefined by the sentence “The father teaches the son”. This link uses the “teaches”connector defined before, but in this relationship, the “professor” role is played by“father” and the “student” role by “son”. If an NCL document has a video and anaudio nodes and a hypermedia causal connector of the type “onBeginStart”, oneNCL link that can be created is “When the video node begins, start the audio node”.

3.2 XTemplate 3.0 language

The XTemplate 3.0 language [11] provides the definition of hypermedia compos-ite templates. Composite templates describe, in a generic way, the content of acomposition, represented as a context node in NCL, defining generic componentsand relationships among them. A document whose composition uses a templateis responsible for indicating specific nodes to be used, but all synchronizationspecification can already be defined in the template. Thus, hypermedia documentauthoring becomes simpler, if composite templates are used.

In order to enable the presentation of a hypermedia document using templates ina standard implementation of the target language presentation engine (in this work,an NCL formatter), it is necessary to process that document transforming it into acompletely specified document (without templates). That processing is done by thetemplate processor, which generates a final document with the elements defined inthe original document and all the information generated by the template use. Inthis approach, there is no need to modify the authoring language standard or itspresentation engine for composite template use. Figure 3 presents that idea. Withthe use of composite templates, it is possible to reuse structural and spatio-temporalspecifications in different NCL contexts. Besides, it facilitates the work of the finalapplication author, since there is no need for defining synchronization specifications

Multimed Tools Appl

Fig. 3 Use of templates for hypermedia document authoring

among document elements, as they are already specified in the composite templatesused. Notice that a document that uses a template can also define other specific nodesand relationships, which are not considered by the template processor.

XTemplate is also an XML-based language. The definition of a compositetemplate is done in four main parts: head, vocabulary, body and constraints. Thetemplate head imports connector and descriptor bases. The vocabulary elementdefines template generic components, each one identified by an xlabel attribute.A component node in an NCL context that uses the template must define anxlabel attribute with the same value of the correspondent template componentxlabel. The template body defines specific components (media or context nodes) andgeneric relationships (links) among them. Finally, the constraints element allows thedefinition of additional restrictions to be applied to body elements (nodes and links)using the XPath language [24]. The definition of a constraint allows the specificationof an error message that can be indicated by the template processor if the constraintis not satisfied when a document composition using that template is processed. Thoserestrictions help guaranteeing the consistency of the final generated document,avoiding errors in the created program. Notice that additional components andrelationships added by the document author and not considered by the templatecould make the final document inconsistent, though. For this kind of broaderverification, it would be necessary to use an analysis tool, as the one presentedin [12].

4 EDITEC iteration options

XTemplate provides XML iteration structures to indicate the creation of multipleelements and relationships by the template processor. In order to graphically rep-resent those structures, EDITEC provides iteration options. EDITEC analyzes thetemplate graphical iteration options, and translates them into the correspondentXTemplate code. Iteration options can be specified in link bind and port mappingelements when those entities are attached to generic components that represent a setof nodes/ports. Table 1 presents EDITEC iteration structure options. The followingsections discuss those options in more details.

Multimed Tools Appl

Table 1 Iteration structure options

Option Definition

Each Associates a connector role or creates a port mapping to each element of a set.It iterates over the element set creating a mapping to the i-th element ofthat set. Where ‘i’ is incremented at each iteration until it refers to all thepositions of the set.

All Associates a connector role or creates port mappings to all elements of a set.

AllExceptOne Associates a connector role to all elements of a set, excluding one of them.The element to be excluded is indicated by its position in the set.

Prev/Next Associates a connector role, at each iteration, to the previous/followingelement of an element set, regarding the current position.

4.1 The “Each” option

Figure 4 presents an example of XTemplate link, created in the EDITEC structuralview, that illustrates the use of the “Each” option in the creation of a spatio-temporalrelationship. That XTemplate link uses connector “onBeginStart” and has relatescomponents that represent two distinct node sets. In this example, the “Each” optionis used in both binds associated to components “x” and “y”. Listing 1 shows theXTemplate code representing that link.

An NCL context that uses a template containing that link, after processed, willhave a set of links. For each media node in that context with xlabel equal to “x”, theprocessor will apply the same logic defined for the template generic component “x”,that is, for each node it creates a link. The first link created has as source the firstnode with xlabel equal to “x”, which is attached to the onBegin condition role. It alsohas, as destination, the first node with xlabel equal to “y”, which is attached to thestart action role. This iteration goes on until the node set ends. Figure 5 graphicallyrepresents the resulting NCL links after the template processing.

In some situations, EDITEC automatically inserts constraints, containing XPathexpressions, in the template code. This is done in order to facilitate its use. More elab-orated constraints must be edited directly in the generated XTemplate document. Aninterface for interactively specifying constraints is currently under development. In

Fig. 4 “Each to Each”example

Multimed Tools Appl

Fig. 5 Graphical representation of the final NCL links for “Each to Each” example

the “Each” option example, the editor automatically inserts a constraint specifyingthat, in the NCL document that uses that template, the number of nodes withxlabel equal to “x” must be the same number of nodes with xlabel equal to “y”.That constraint, which is presented in Listing 2, guarantees the correct documentprocessing.

4.2 The “All” option

In order to illustrate the use of the “All” option, suppose an XTemplate linkconnecting two node sets, one as the source and another as the destination. Thatlink uses the “Each” option for the bind referring to the component representingthe source node set and the “All” option for the bind referring to the componentrepresenting the destination node set. Figure 6 illustrates this example. Listing 3shows the XTemplate code representing that link.

An NCL context that uses a template containing that link, after processed, willhave a set of links. For each media node in that context with xlabel equal to “x”,the processor will apply the same logic defined for the template generic component

Fig. 6 “Each to All” example

Multimed Tools Appl

Fig. 7 Graphical representation of the final NCL links for “Each to All” example

“x”, that is, for each node it creates a link. The first link created has as source thefirst node with xlabel equal to “x”, which is attached to the onBegin condition role. Italso has, as destination, all the nodes with xlabel equal to “y”, defining several bindsattaching them to the start action role. This iteration goes on until the node set ends.Figure 7 graphically represents the resulting NCL links after the template processing.

In the example presented in Fig. 6, one possibility is to use the “All” option alsoin the bind referring to the onBegin role, which would generate only one link. Thatlink would have several binds associated to the onBegin role, one for each node withxlabel equal to “x” and several binds associated to the start role, one for each nodewith xlabel equal to “y”. Figure 8 graphically represents the resulting NCL link afterthe template processing.

The “All” option may also be used for creating composition ports. In this case, oneport is created for each node with xlabel equal to the port mapping target component.Figure 9 represents an example of port creation.

The “AllExceptOne” option is a particular case of the “All” primitive. For exam-ple, this option can be used in an application where ‘N’ buttons (or images) appearon the screen and, after selecting one of them, the others stop their presentation,except the selected one.

4.3 The “Next” option

A relationship using the “Next” option usually has the same type of component assource and destination, as presented in Fig. 10. This type of component representsa node set where each node, except the first and the last ones, will be attached to acondition role in a link and to an action role in another link. However, the first node

Fig. 8 Graphical representation of the final NCL link for “All to All” example

Multimed Tools Appl

Fig. 9 Example of port creation

will be attached only to a condition role and the last node only to an action role.Listing 4 shows the XTemplate code representing that link.

An NCL context that uses a template containing this link, after processed, willhave a set of links with two binds. As shown in Fig. 11, the first link created hasas source the first node with xlabel equal to “x”, which is attached to the onEndcondition role, and as destination the second one, which is attached to the start action

Fig. 10 “Next” example

Multimed Tools Appl

Fig. 11 Graphical representation of the final NCL links for “Next” example

role. The second link creates a relationship among the second and the third nodesand so on, until the node set ends. However, the last node will be attached only tothe (start) action role and not to a condition role. This example illustrates a genericsequential presentation for all nodes of a specific node set (identified by xlabel “x”)and corresponds to the same behavior of a SMIL seq container.

The “Prev” (previous) option is similar to the “Next” option. The difference is thatthere is an inversion among the link source and destination. Usually, the use of the“AllExceptOne”, “Prev” and “Next” options is when a component type representinga node set is the source and the destination of the link. Those options could alsobe used when the source and destination components are different, but only inspecific cases. Therefore, the use of those options requires author’s extra attentionwhen creating a template. During the processing of those iteration graphical options,EDITEC takes into account some special cases, for example, where it is possible todefine, in a single link, options “All” and “Next” in different binds.

5 EDITEC: graphical editor

EDITEC is presented in Fig. 12. It provides several integrated views. Those views -structural, layout and textual - are intended to facilitate document understanding,giving the author a complete control during authoring.

In order to facilitate authoring, EDITEC presents a miniature overview of theworkspace in both structural and layout views. The overview presents the entireworkspace, visible or not, highlighting the visible workspace. So, elements outsideof the visible area remain visible in the overview.

EDITEC’s main view is the structural view. Graphical elements represent mainlanguage entities, indicating media nodes, links, connectors, ports and components.The graphical elements can be seen in Fig. 12.

NCL ports are represented by a door picture. Anchors and properties by ananchor picture or a black rectangle once they are defined inside a media or com-ponent. A connector is represented by a rectangle and squares for its roles. Links arerepresented with the use of connectors and lines binding a media or component to aconnector role. Specific media nodes are represented by two concentric circles andgeneric components are represented by a single circle. If the component cardinality isbigger than one, two juxtaposed circles are used. Notice that the cardinality of medianodes and components are presented on top of their graphical representation.

Multimed Tools Appl

Fig. 12 EDITEC graphical environment

Components and ports created in the structural view area are automaticallypresented in the vocabulary area. On the other hand, connectors are created in thevocabulary area through a “new connector” button. In the structural view, spatio-temporal relationships among template components are defined through links. Whencreating a link, the author chooses one of the connectors available in the vocabularyarea to be used.

In order to create a new element (port, component node or link), the user selectsthe icon that represents the desired element and drags it into the workspace in thedesired position. When the mouse button is released, the editor presents a popupwindow where the user inserts complementary information about the created object,such as the component xlabel, cardinality, etc.

Specific NCL media nodes can be defined selecting the media icon and dragging itover an already created component. Thus, that media node will receive the samecomponent behavior, after processing the template. That media node is alreadyincluded in the template, and the document that uses this template does not needto define additional information about it.

Graphical objects may be moved and resized, in order to obtain a spatial dispo-sition that helps the template visualization and creation. The user may graphicallycreate, edit or delete ports, components and links. When an element is selected, itsproperties are presented in the window lower left corner.

Usually, graphical editors for hypermedia documents face a scalability problem.Once each language element is represented by a graphical element, when thenumber of elements in a document grows, the graphical representation of suchdocument tends to be dense, turning it difficult to read. EDITEC graphical elementswere created to represent XTemplate elements, which by itself already representabstract structures inside an NCL document. Therefore, the number of elements inXTemplate templates does not grow as much as in an NCL document.

Multimed Tools Appl

Another issue to be considered is the notation viscosity [15]. EDITEC tries toprevent document inconsistencies by guiding the author while creating a reference toanother element, for example, links referring to connectors. Thus, when the authorwants to remove a referenced element, the ones making reference to it have to beremoved first. This solution increases the viscosity of the notation, but decreases itserror-proneness [15].

The layout view presents screen regions where document media nodes will bepresented, as shown in Fig. 13. In this view the author may graphically create, edit anddelete regions. Whenever a region is created, it is inserted in the visible region tree.Regions may be hidden by clicking in the region tree, allowing a better visualizationof the workspace. Region sizes and positions may be defined interactively by movingand resizing the correspondent rectangles. A child region has its position definedaccording to the position of its parent region. When a parent region is moved, all itschild regions are moved as well, maintaining their relative positions. The layout viewalso provides options for aligning a group of regions and creating NCL descriptors,with the option to refer to an existing region. Descriptors are listed in the lower leftcorner of the layout view.

The textual view is divided in two parts. One presents the XML code of the tem-plate and another, related to the layout view, presents the XML code of the templatedescriptor, region and rule bases. Any changes made in EDITEC’s structural andlayout views are automatically made in the XML code exhibited in the textual view. Itis a read-only view since it was designed to enable the author visualizing the templatecode he is creating.

EDITEC views were developed in separate modules in order to facilitate thesystem maintenance and development. It was developed in Java, in order to provideportability, allowing its use in different platforms. The editor has a package that isused by several views. It reflects the structure of the XTemplate language, where alllanguage elements are mapped into Java classes.

Fig. 13 EDITEC layout view

Multimed Tools Appl

This editor is intended to be used by authors with great knowledge about NCL[18], since the author needs to identify the application parts that can be generalized,and an intermediate knowledge of XTemplate [11], since he should understandXTemplate concepts in order to create a template using EDITEC. An author,however, does not need to know the details about the XTemplate language syntax.Authors can specify composite templates and store them in template bases. Templatebases store previously created templates and allow their reuse inside differenthypermedia documents.

Although the temporal view was presented as a desirable view in Section 1 andis available in several related work presented in Section 2, the current version ofEDITEC does not implement it. A template has components representing sets ofnodes and links iterating over those sets. Depending on how the links iterate overthe node sets, it would be necessary to explicit the elements of a node set or evenrepresent the component as a whole in the temporal view.

Suppose we create a temporal view for the example presented in Fig. 4. Thecomplete temporal view for such example would require the specific set of elementsrepresented by components “X” and “Y”. Once that information is not availableduring template authoring, one choice could be to represent in the temporal viewcomponents “X” and “Y” where both are presented at the same time. Notice,however, that with just the relationship presented in the example, it is not possible toknow their duration, if they end their presentation together or which one ends first.

Suppose now we create a temporal view for the example presented in Fig. 10. Asdiscussed in the previous paragraph, we have to represent the generic component inthe temporal view. However, in this example, we have a relationship iterating overjust one component, where one element of set “X” starts its presentation when theprevious element in the same set ends. In this example, the temporal view wouldneed the representation of specific component instances, different from the formerexample.

The creation of a graphical notation capable of expressing both cases is not aneasy task. Since the temporal view is not mandatory for template authoring, it wasleft as future work.

5.1 Bind and port mapping editor

One of the main goals in the development of a graphical editing tool for compositetemplates was to help the construction of a great variety of templates. This shouldbe done even when the author does not know how to define XPath expressions ina textual form, which is necessary to build a composite template in XTemplate. Forthis purpose a friendly interface was developed. This interface avoids the necessityof defining basic XPath expressions in a textual form, by providing interactive andintuitive constructions of the XPath expression logic. Different from works like [7],where the XML structure of a document is presented, EDITEC provides the authoriteration options and fields for defining an XPath expression. If a more complexexpression is needed, the author can specify it in a textual form. In this case, knowingXPath is mandatory.

Figure 14 presents the Bind Editor interface that could be used to avoid thenecessity of defining XPath expressions in a textual form. It frees the user toconstruct several types of basic XPath expressions, as seen in the window option1 in Fig. 14 and exemplified later in this section.

Multimed Tools Appl

Fig. 14 Basic XPathexpression definition example

When the user double-clicks a bind or a port mapping in the structural view,EDITEC opens this window. It is divided in two parts: the first one allows theinteractive creation of an XPath expression and the second one may be used forthe definition of an XPath expression in a textual form.

The first part has two options where the user may choose an iteration structure,presented in Section 4, or define a position related XPath expression, for example,select just the first (position()=1) or the second last (last()-1) element with a specificxlabel. EDITEC automatically fills the fields “Component” and “Parent”. The“Component” field receives the name of the target component attached to the bind(or port mapping) responsible for opening the window. The “Parent” field receivesthe name of this component parent element. However, when this component is nota port element, the parent field is disabled and the component presents all iterationstructure options. When that bind (or port mapping) is selected, the window presentsonly the “All” option.

The second part, used for textual definition, should be carefully used in orderto avoid creating inconsistencies in the template definition, since the user is free tobuild an XPath expression with the logic he wants. In case the user creates an XPathexpression without using the iteration structure options, the bind (or port mapping),in the structural view, receives an “XE” indication. This indication shows that there isa specific XPath expression related to the bind (or port mapping) target component.That expression is displayed in the properties view.

Figure 14 shows an example of an XPath expression built in an interactive way. Itselects the first child element with xlabel equals to “port” of the third element withxlabel equals to “context”. Listing 5 presents the XML code of a link using the logicpresented in Fig. 14 in its second bind.

Multimed Tools Appl

The Bind Editor window is not used when the bind (or port mapping) targetcomponent represents only one media node instead of a node set. If the bind attachesa component to a condition role, the XPath window enables only the “All” and“Each” options, because the use of the other options does not make sense forcondition roles.

6 EDITEC use example

This section presents a template example in order to demonstrate the use of theiteration structures presented in Section 4. The defined template is used for creatingTV commercials about products sold by a supermarket. The commercial consists ofan audio telling about available products and images and prices of products. Theimage of a specific product and its price are displayed on the screen as the audioplays. Figure 15 shows the structure of nodes and links of that example. The templatespecifies the synchronization among an audio object, a background image and severalimages that specify different products.

We can notice that the relationships between the audio track and the products arerepeated for every product. Thus, it is necessary to define two links for each audiotrack, a link of type “starts” and another of type “finishes”. As the relationships

Fig. 15 Structural and Temporal views of the template example

Multimed Tools Appl

relating each audio track to its corresponding product image and price are similar,changing only the participants of the relationships, we can create a template thatspecifies a generic relationship of the type “starts” and another of type “finishes”between a set of audio tracks and a set of products. So, those relationships canbe reused in another commercial with different audio content and products. Thus,the entire set of synchronization relationships is specified in the template and thedocument that uses it only needs to define the specific audio node, its tracks andimages and prices of the products. Besides generic structures, a template may alsodefine specific nodes. The background image does not need to be specified insidethe final document, because it is already inserted by the template. Notice that thistemplate could be used for several TV commercials of different supermarkets ordifferent sets of products, since the specific content (audio and product images) isdefined in the document that uses the template. Other items could also have beenincluded in this template, such as a company logo, a contact phone number, address,etc.

In this example, besides the synchronization of the audio with the objects thatrepresent the products, presentation settings are also defined by the template, suchas screen regions for presenting product images and prices.

Figure 16 illustrates the template built in the EDITEC for the example shown inFig. 15. This template specifies the synchronization among the audio tracks and theproducts being described.

The template creation in EDITEC is done in the following steps: (1) in the vo-cabulary area (presented in the upper left corner of the structural view) through the“new connector” button, the author defines connectors that can be used by templatelinks. In this example, connectors “onBeginStartN” and “onEndStopN” are defined

Fig. 16 Template structural view in EDITEC

Multimed Tools Appl

for representing “starts” and “finishes” relations respectively; (2) on the desktop ofthe structural view, the author defines the template components. When a componentis created, it is automatically inserted in the vocabulary tree; (3) still on the desktopof the structural view, the author defines links for representing relationships amongnodes, ports that specify the components initialized when the composition (finaldocument) is initialized, and media nodes contained in the template.

The number of media nodes that can receive the same logic defined by a com-ponent of the template is defined by maximum and minimum numbers displayedon top of the component. For example, in Fig. 16, for “audio” and “background”,the minimum and maximum are equal to one and in “track”, “product” and “price”the minimum is zero and the maximum is unbounded. When the maximum is biggerthan one, the component is represented by two juxtaposed circles (as the product andprice components in the example).

When the template defines specific nodes, the user does not have to define themin the document using the template. Specific media nodes are represented by twoconcentric circles (as the background node in the example). The definition of aspecific media node is done in EDITEC by pressing the mouse on the image “media”in the toolbar of the structural view and releasing the “media” on top of the desiredcomponent (in Fig. 16, the background component). A popup window appearsallowing the author to indicate the URI of the media object content. Therefore, thismedia node receives the same logic, after processing the template, defined for thecomponent to which it was related.

In Fig. 16, the program entry port “pBegin” maps to the “audio” component,which will be the first component to be presented when the application starts. Also inthat figure, the “background” component is connected to the “audio” component bytwo links, a link (A) that uses a connector “onBeginStartN” and another (B) that usesa connector “onEndStopN”. Thus, when the audio starts, the “background” imagestarts. When the audio finishes, the background image also finishes. A third link (C),that uses a connector “onBeginStartN”, connects the audio tracks to the “product”and “price” components. A fourth link (D), that uses a connector “onEndStopN”,also connects the audio tracks to the “product” and “price” components. Link bindsrelating audio tracks to products and prices use the “Each” iteration option. Todefine those options in EDITEC, the author should click twice in the desired bind,and when the window “Bind Editor” opens, choose option “Each”. So when thefirst audio track starts, the first product and price start, and when the first trackfinishes, the first product and price also finish. When the second track starts, thesecond product and price start, and when the second track finishes, the secondproduct and price also finish, and so on, until the last “track”, “product” and“price”.

Once the template is built with EDITEC, it is ready to be used for creating NCLdocuments. The creation of NCL documents using composite templates can be donedirectly editing the NCL file or graphically using another editor called NEXT (NCLEditor Supporting XTemplate) [22]. NEXT generates template graphical views fromXTemplate XML specifications. Authors can use NEXT for filling a template withspecific multimedia content, in our example, creating an NCL document usingthe template for supermarket products and defining media nodes to be used forrepresenting each template component. The author creates a final document usinga template by dragging media objects to the visual representation of each template

Multimed Tools Appl

Fig. 17 Using the “tProduct” template with NEXT

component. Figure 17 illustrates how an NCL document is created using a templatewith NEXT. In the example, one product image (headset) was defined.

Once the author finishes creating an NCL document using the template, NEXTprocesses this document transforming it into a standard NCL document, as explainedpreviously (see Fig. 3). After processing, the final document has the additionalcontent defined by the template, besides the original one. In our example, the finaldocument will contain media nodes, synchronization links defined among audiotracks and their respective products, and links between the beginning and the endof the audio node with the background image. It is important to notice that thebackground image, defined as a specific component in the template, also becomespart of the final document, after processing the template.

7 EDITEC usability study

This section presents an EDITEC usability study conducted with a group of twentysubjects. Selected users have a varied knowledge about NCL and XTemplate.Although the focus of the test is the EDITEC tool, since XTemplate and NCLshare some concepts, the level of NCL knowledge is also important. Each userindicated his/her level of knowledge in both languages through a scale ranging from 1(beginners) to 5 (advanced authors). The study objective was to evaluate the facility

Multimed Tools Appl

or difficulty of using the EDITEC tool for creating an XTemplate template. Noticethat the facility of using predefined templates for creating NCL documents is not thefocus of this test. That facility is provided by NEXT and it was evaluated in anotherwork [22].

For this study, we selected the global usability measures: effectiveness, efficiencyand satisfaction [17] and the cognitive dimensions of closeness of mapping and roleexpressiveness [15]. Two questionnaires were used: (i) the SUS (System UsabilityScale) questionnaire [6] for measuring EDITEC’s effectiveness, efficiency and sat-isfaction, giving us a final score that can be used for comparing EDITEC to otheravailable tools; and (ii) a specific questionnaire, designed for measuring the cogni-tive dimensions of closeness of mapping and role expressiveness, besides the useropinion about the iteration options and the window for creating XPath expressions.Additionally, user suggestions were collected as a free text for improving the editoras a whole. The following sections describe the study and each questionnaire in moredetails.

7.1 Methodology

The objective of the usability study was to determine how difficult it is for a subject tocreate an XTemplate template using EDITEC. Therefore, it is necessary to separatethe difficulty the author faces when thinking about how the template can be builtusing XTemplate concepts from the difficulty the author faces when using EDITECto represent the solution designed in his mind.

Initially, XTemplate was presented to the subject group. This presentation startedgiving some examples of NCL documents and focusing on identifying, in the exam-ples, common structures that are good candidates for generalization. It was followedby the presentation of XTemplate’s purpose and the language structure. Once thesubjects have understood basic concepts, XTemplate was applied to generalize thegiven examples defining composite templates. Notice that all the process of creating atemplate was covered in that presentation. The iteration options were also presented,so subjects could understand how to use them.

After the presentation, the following task was assigned to the subjects: creatinga template for TV commercials about products sold by a supermarket, similar tothe example presented in Section 6. Subjects were guided on thinking how to createthat template. Once again, starting by thinking on how an NCL application for asupermarket commercial would be specified and identifying common parts of thatapplication, considering different sets of products. Subjects were also guided onrelating those common parts to XTemplate generic components and relations. Noticethat, after that discussion, the subjects should already have in mind the whole (or atleast great part) of the template design.

After both presentations, subjects were asked to create the template usingEDITEC. Notice that, until that moment, they have not seen EDITEC’s interface,but they should already know what should be done to create a template, i.e. theXTemplate concepts to be used. Therefore, it is expected that all difficulties facedwhile creating the template be related to EDITEC’s interface and how it representsXTemplate concepts.

Subjects were observed during the creation of the template and, although notprohibited, were recommended not to ask for help. At the end of the usability study,

Multimed Tools Appl

the subjects filled two questionnaires about EDITEC usability. The first one wasa SUS (System Usability Scale) [6] questionnaire, a well-known standard usabilitytest widely used in the literature. The second one was a questionnaire composed oftwelve specific questions concerning EDITEC’s use and interface. Suggestions andcomments could be provided in free text, providing additional information aboutsome points that could be improved in the editor.

The EDITEC target user is an advanced NCL author who will build templatesto be used by NCL beginners. The usability study was done with a group of twentyusers with a varied knowledge of XTemplate and NCL. Among them, group “A” wascomposed of five experts in NCL and XTemplate, group “B” was composed of threeexperts only in NCL and group “C” included twelve NCL beginners. As the subjectgroup has different skills, usability test results show that EDITEC has potential forbeing used by different kinds of authors.

7.2 SUS - System Usability Scale

SUS [6] is used for measuring the effectiveness, efficiency and user satisfactiondegree for a particular system and has been used in different areas. It is widely usedsince it is free of charge and has only ten items. Subjects answer SUS questions usinga scale ranging from one (strongly disagree) to five (strongly agree). SUS final scorescan range from 0 to 100. The higher the value, the more favorable the usabilityperceived by the user is. Since SUS is very general, its questions were adjusted toEDITEC and XTemplate, as presented below.

1. I think that I would like to use EDITEC frequently;2. I found EDITEC unnecessarily complex;3. I thought EDITEC was easy to use;4. I think that I would need the support of a person with XTemplate knowledge

to be able to use EDITEC;5. I found the various functions in EDITEC were well integrated;6. I thought there was too much inconsistency in EDITEC;7. I would imagine that most people would learn to use EDITEC very quickly;8. I found EDITEC very cumbersome to use;9. I felt very confident using EDITEC;

10. I needed to learn a lot of things about EDITEC before I could get going with it.

Since SUS is general and widely used, its score can be used for comparingEDITEC to other tools. SUS final score showed that editor has an average scoreof 70 and standard deviation of 15.2. In a satisfaction scale from 0 (little satisfied) to100 (very satisfied), this result shows that the editor has a good level of effectivenessand efficiency, and had a good acceptance by users.

Considering different subject groups, SUS results were slightly different. For userswith great knowledge of NCL and XTemplate (group “A”), the final SUS averagescore was 84. For users with great knowledge of NCL (group “B”), the final SUSaverage score was 71.7. And for users with few knowledge of NCL (group “C”), thefinal SUS average score was 63.8. Those results are shown in Fig. 18, using a 90 %confidence interval. As expected, EDITEC is well evaluated by users with a goodknowledge of NCL and with at least some knowledge of XTemplate, the ones towhom the tool was designed for.

Multimed Tools Appl

Fig. 18 SUS average score pergroup

7.3 EDITEC specific questionnaire

Besides the SUS test, a second questionnaire was prepared with a set of twelvespecific questions to obtain information about EDITEC’s use and interface. Thissecond questionnaire aimed at examining three main points of the tool usability:

– Analyze if the symbols used in the editor were understood by users;– Analyze how easy it is to use EDITEC;– Analyze the average time spent by the authors in the usability test.

In the questionnaire, the users were invited to answer the questions, choosinga value on a scale of one (strongly disagree) to five (strongly agree). The specificquestions are presented as follows.

1. Indicate your level of knowledge about NCL;2. Indicate your level of knowledge about XTemplate;3. I found the graphical representation of the port element intuitive;4. I found the graphical representation of the component element intuitive;5. I found the graphical representation of the anchor element intuitive;6. I found the graphical representation of the media element intuitive;7. I found the graphical representation of the link element intuitive;8. I found difficult to understand the iteration options;9. I think the iteration options make the creation of XPath expressions easier;

10. I think that the iteration options are sufficient;11. I found the window for creating XPath expressions confusing;12. I was capable of identifying the XPath expression I desired in the window for

creating XPath expressions;13. I needed help for creating a template with EDITEC;14. I completed the creation of the template using EDITEC.

Questions 3 to 7 were designed to identify if the symbols used in the editor wereunderstood by users. Questions 8 to 10 were designed to identify if the iterationoptions were easy to use. Questions 11 and 12 are related to the window for creating

Multimed Tools Appl

Fig. 19 Specific questionnaireaverage score per group

XPath expressions. At last, question 13 measures how much help the user would needto create a template and question 14 indicates if the user finished the task.

In order to facilitate the analysis of this questionnaire, a SUS like final score wasalso computed. As happens with SUS the final score ranges from 0 to 100. It showedthat editor has an average score of 75.3 and standard deviation of 15.7, indicating thatthe editor was easy to use and its graphical notation was intuitive to users.

Considering different subject groups, the specific questionnaire results were alsoslightly different. For users with great knowledge of NCL and XTemplate (group“A”), the final average score was 91.7. For users with great knowledge of NCL (group“B”), the final average score was 83.3. And for users with few knowledge of NCL(group “C”), the final average score was 66.5. Those results are shown in Fig. 19,using a 90 % confidence interval.

7.4 Detailed results

Table 2 summarizes the scores and standard deviation for each question in bothquestionnaires. The score is computed the same way done with questions in the SUSquestionnaire, i.e. affirmative questions have its value subtracted by one and negativequestions have its value subtracted from five. In the end, every score ranges from 0 to4. The results for each question are presented for each group of subjects (“A”, “B”and “C”) and also for the subject group as a whole (All). We analyze those resultstaking into account the goals presented in Section 7.3.

Tests subjects in average have an NCL knowledge of 3.7 and 2.2 for XTemplate.That means that users know very little about XTemplate (a great part learnedXTemplate for the study) and have enough knowledge about NCL to create theapplication described in the test task. Figure 20 depicts the users average knowledgein NCL and XTemplate for each group and for the subject group as a whole, using a90 % confidence interval.

The average time to complete the task was 30.4 min with standard deviationof 13.3 min. Figure 21 depicts the average time for completing the task by eachgroup and for the subject group as a whole, using a 90 % confidence interval. Thebigger time spent by users in group “C” was related (by observation) to their littleknowledge of both XTemplate and NCL and also a few bugs found in the tool. Thesame users required help for creating the template described in the task.

Multimed Tools Appl

Table 2 EDITEC usability study detailed results

Group A B C ALL

Avg. Sdt. Avg. Sdt. Avg. Sdt. Avg. Sdt.score dev. score dev. score dev. score dev.

NCL 4.6 0.5 4.3 0.6 3.2 0.6 3.7 0.9XTemplate 4.2 1.1 1.7 0.6 1.4 0.9 2.2 1.5Time 12.3 5.6 21.7 2.9 38.7 7.9 30.4 13.3

SUS-1 3.4 0.9 3.3 0.6 2.9 1.0 3.1 0.9SUS-2 3.4 0.5 2.0 1.7 2.5 0.9 2.7 1.0SUS-3 3.2 0.4 3.3 0.6 2.5 0.9 2.8 0.8SUS-4 3.0 1.7 1.7 0.6 2.3 1.4 2.4 1.4SUS-5 3.4 0.5 2.7 0.6 2.8 0.7 3.0 0.7SUS-6 3.6 0.5 3.0 1.0 2.6 1.1 2.9 1.0SUS-7 2.8 0.8 3.0 0.0 2.7 1.0 2.8 0.9SUS-8 3.4 0.5 3.0 0.0 2.4 1.1 2.8 1.0SUS-9 3.6 0.5 3.7 0.6 2.1 0.8 2.7 1.0SUS-10 3.8 0.4 3.0 1.0 2.8 1.0 3.1 0.9

Specific-3 4.0 0.0 3.7 0.6 3.2 0.7 3.5 0.7Specific-4 4.0 0.0 3.0 1.0 3.0 0.7 3.3 0.8Specific-5 3.6 0.9 3.7 0.6 2.9 1.0 3.2 1.0Specific-6 3.8 0.4 2.7 1.2 2.8 1.0 3.0 1.0Specific-7 3.6 0.5 3.7 0.6 3.3 0.9 3.4 0.8Specific-8 3.0 0.7 3.0 0.0 1.9 1.1 2.4 1.0Specific-9 3.8 0.4 3.7 0.6 3.4 0.8 3.6 0.7Specific-10 4.0 0.0 3.3 1.2 3.0 0.7 3.3 0.8Specific-11 3.4 0.5 3.3 0.6 2.3 1.4 2.7 1.3Specific-12 3.0 1.7 3.7 0.6 2.3 1.6 2.7 1.5Specific-13 0.0 0.0 1.7 0.6 2.6 1.1 1.8 1.4Specific-14 3.8 0.4 4.0 0.0 2.5 1.6 3.1 1.4

Fig. 20 Users average knowledge in NCL and XTemplate

Multimed Tools Appl

Fig. 21 Users average time for completing the task

Figure 22 summarizes the test results of the specific questionnaire for each group.It presents the score for each group of questions as explained in Section 7.3.

Independently of the level of knowledge, users found the graphical notation forthe template elements intuitive (questions 3 to 7 of the specific questionnaire) witha SUS-like average score of 3.3 (“Notation” in Fig. 22). Besides, users found theiteration options easy to use and a good alternative for XPath expressions (questions8 to 10 of the specific questionnaire) with a SUS-like average score of 3.1 (“Options”in Fig. 22). Taking into consideration the questions related to the XPath window(questions 11 and 12 of the specific questionnaire), users from group “C” foundthe window for creating XPath expressions difficult to understand with a SUS-likeaverage score of 2.3 (“XPath” in Fig. 22). This result was already expected sinceusers from this group have a low knowledge about NCL and XTemplate. It is worthto notice that the higher averages in those groups of questions were achieved withthe users of group “A” and “B”, which are EDITEC’s target users.

From the subject group, 80 % of the users gave a score at least 4 for havingconcluded the task, i.e. creating the template. Only some users of group “C” gave

Fig. 22 Specific questionnaire score per group of question

Multimed Tools Appl

a score smaller than 4. Given the user skills of that group, it was expected that mostof them would have difficulty for finishing the template creation.

Together with the questionnaires, users were invited to present their opinionabout the tool and also report bugs or problems found while performing the task.From the users’ opinions and by observing them during the tests, it was possible toidentify four main points that could be improved in EDITEC:

– Determining what to do during the template creation: users (especially the onesin group “C” could not determine what to do next at some points in the templatecreation. To improve this, EDITEC could give to users step by step comments,therefore guiding them during the template creation;

– Finding different template views and actions in the interface: some users took along time to find, for example, the template vocabulary view (presented togetherwith the structural view) and actions like creating descriptors and connectors. Analternative to improve this would be to highlight those actions together with thevocabulary view;

– Changing element properties: the property view in EDITEC is not editable, sochanges made by users were not considered. Since that view is always shown,it would be useful to make it editable, facilitating the update of componentproperties. Another related comment is that EDITEC uses the right click foropening the component property window. Great part of the users found itcounterintuitive. Changing it for a double click, for example, would improve thatpoint;

– Identifying the correct element to use: users (especially from group “C”) gotconfused by elements component and media. The first one represents a templategeneric component and the second one is a specific media node included in thetemplate. To improve this, the creation of specific components could be doneby changing generic component properties. In addition, users got confused byelements port and anchor/port. The first represents a port for the template andthe second is an interface point for a template component or media. To improvethis, their names could be changed in EDITEC’s interface, using for exampletemplate port and component port in order to distinguish them.

The results here presented for the usability study, show that users with a goodknowledge of NCL (and specially XTemplate) have evaluated well EDITEC.Besides, EDITEC’s evaluation by users with little knowledge in both NCL andXTemplate shows that it has potential for being used by different kinds of authors.

During the study, either by observation or by user comments, we were able toidentify some points in the editor that could be improved. Every point is beingaddressed to enhance EDITEC’s usability.

8 Conclusion

This paper presented EDITEC, a graphical editor for creating composite templatesbased on the XTemplate 3.0 language. It also presented EDITEC’s model to repre-sent iteration structures providing an interactive way for creating templates with agreat variety of spatio-temporal semantics. The model can be used in other domainswhere it is necessary to provide a graphical representation of iteration structures.

Multimed Tools Appl

The templates created can be stored in a template base, allowing their further reuseinside different hypermedia documents.

EDITEC was developed aiming at satisfying several desirable requirements for acomposite template editor, such as different document views, definition of genericcomponents, definition of iteration structures, template semantic description, cross-platform portability and a flexible interface that provides the authoring of moreelaborated document structure. The editor has been improved as it is used. Newfacilities were identified and are being added to the editor. Besides, new optionsfor representing iteration structures may be created as needed. There may be a fewsituations where the graphical authoring tool may not be capable of providing all thefunctionalities desired by the author. In those cases, the use of a textual approach isrecommended.

A future work is the implementation of the editor temporal view. The devel-opment of another interface for the interactive creation of constraints is understudy, since the creation of constraints demands more elaborated XPath expressions.Another ongoing work is to address the suggestions received in the usability study.

EDITEC was developed as part of an integrated editing environment. In such anenvironment, it will be possible to create documents from a template created withEDITEC and, consequently, verify the behavior of an application created using thattemplate. The creation of an integrated environment, however, is an ongoing workand its discussion is out of the scope of this article.

Acknowledgements This work was partially supported by CNPq, FAPERJ and CAPES. We wouldlike to thank Glauco Amorim for helping with EDITEC usability tests.

References

1. ABNT NBR (2007) Digital Terrestrial Television - Data Coding and Transmission Specificationfor Digital Broadcasting - Part 2: Ginga-NCL for Fixed and Mobile Receivers - XML ApplicationLanguage for Application Coding

2. AutoCAD http://www.autodesk.com/products/autodesk-autocad/overview. Accessed 11 Oct 20133. Blender http://www.blender.org/. Accessed 11 Oct 20134. Bouyakoub S, Belkhir A (2008) H-SMIL-Net: a hierarchical Petri net model for SMIL docu-

ments. In: Proceedings of the 10th international conference on computer modeling and simula-tion (UKSIMí08), pp 106–111

5. Bouyakoub S, Belkhir A (2011) SMIL builder: an incremental authoring tool for SMIL docu-ments. ACM Trans Multimedia Comput Commun Appl 7(1):30

6. Brooke J (1996) SUS: a quick and dirty usability scale. In: Jordan P, Thomas B, WeerdmeesterB, McClelland I (eds) Usability evaluation in industry. Taylor & Francis, London, pp 189–194

7. Consens MP et al, Liu JWS, Rizzolo F (2007) XPlainer: visual explanations of XPath queries. In:IEEE 23rd international conference on data engineering

8. Damasceno JR, dos Santos JAF, Muchaluat-Saade DC (2011) EDITEC: hypermedia compositetemplate graphical editor for interactive tv authoring. In: Proceedings of the 11th ACM sympo-sium on document engineering (DocEng ’11). Pentech, Mountain View, pp 77–80

9. Deltour R, Layaida N, Weck D (2005) LimSee2: a cross-platform SMIL authoring tool, theEuropean research consortium for informatics and mathematics - ERCIM News, p 61

10. Deltour R, Roisin C (2006) The limsee3 multimedia authoring model. In: Proceedings of the 2006ACM SDE, pp 173–175

11. dos Santos JAF, Muchaluat-Saade DC (2012) XTemplate 3.0: spatio-temporal semantics andstructure reuse for hypermedia compositions. Multimed Tools Appl 3(61):645–673

12. dos Santos JAF, Braga CO, Muchaluat-Saade DC (2012) A model-driven approach for theanalysis of multimedia documents. In: Proceedings of the international conference on softwarelanguage engineering doctoral symposium

Multimed Tools Appl

13. Flash http://www.adobe.com/products/flash.html. Accessed 11 Oct 201314. Gaggi O, Celentano A (2006) A laboratory for prototyping and testing multimedia presentations.

Int J Softw Eng Knowl Eng 4:1615. Green TRG, Petre M (1996) Usability analysis of visual programming environments: a ‘cognitive

dimensions’ framework. J Vis Lang Comput 2(7):131–17416. Guimarães RL, Costa RMR, Soares LFG (2008) Composer: authoring tool for iTV programs.

In: Proceedings of the 6th EITV17. ISO (1998) Ergonomic requirements for office work with visual display terminals (VDTs)

Part 11:Guidance on usability. ISO Standard 9241-11:199818. ITU (2009) Nested Context Language (NCL) and Ginga-NCL for IPTV services, ITU-T Recom-

mendation H.761, http://www.itu.int/rec/T-REC-H.761-200904-P19. LimSee2 http://limsee2.gforge.inria.fr/. Accessed 11 Oct 201320. LimSee3 http://limsee3.gforge.inria.fr/. Accessed 11 Oct 201321. López MR et al (2008) T-MAESTRO and its authoring tool: using adaptation to integrate

entertainment into personalized t-learning. Multimed Tools Appl 3(40):409–45122. Mattos DP, Silva JV, Muchaluat-Saade DC (2013) NEXT - graphical editor for authoring NCL

documents supporting composite templates. In: Proceedings of the 11th European InteractiveTV Conference (EuroITV)

23. Muchaluat-Saade DC, Soares LFG (2002) XConnector & XTemplate: improving the expressive-ness and reuse in web authoring languages. NRHM 8(1):139–169

24. W3C World-Wide Web Consortium (1999) XML Path Language (XPath) Version 1.0, W3CRecommendation. http://www.w3.org/TR/xpath

25. W3C World-Wide Web Consortium (1999) XSL Transformations (XSLT) Version 1.0, W3CRecommendation. http://www.w3.org/TR/xslt

26. W3C World-Wide Web Consortium (2008) Extensible Markup Language (XML) 1.0 (FifthEdition). W3C Recommendation. http://www.w3.org/TR/REC-xml/

27. W3C World-Wide Web Consortium (2008) Synchronized Multimedia Integration Language -SMIL 3.0 Specification. W3C Recommendation. http://www.w3c.org/TR/SMIL3

Jean Ribeiro Damasceno received his B.Sc. and M.Sc. degrees in Telecommunications Engineeringfrom Universidade Federal Fluminense, Brazil, in 2008 and 2010, respectively. In 2010, he was aprofessor at the Computer Science Department of the Universidade Plínio Leite, Brazil. Currentlyhe works as telecommunications engineer at Petrobras (Petróleo Brasileiro S.A.). His major researchinterests are digital TV, multimedia communications and computer networks.

Multimed Tools Appl

Joel André Ferreira dos Santos is a researcher at MídiaCom Lab, in the area of digital TV andhypermedia document authoring. He received his telecommunications engineering degree and M.Sc.degree in computer science from Universidade Federal Fluminense in Niterói, Brazil, in 2009 and2012, respectively. Currently he is a D.Sc. student in computer science also at Universidade FederalFluminense. His major research interests are multimedia authoring languages and digital TV.

Débora Christina Muchaluat-Saade received a computer engineering degree, and M.Sc. and D.Sc.degrees in computer science from PUC-Rio, Brazil, in 1992, 1996 and 2003, respectively. Since 2002,she has been an associate professor at Universidade Federal Fluminense. From 2002 until 2009, shewas a professor at the Telecommunications Engineering Department, and since then, she has been aprofessor at the Computer Science Department. She has worked in the development of the NestedContext Language (NCL), which is a standard language for developing declarative applications fordigital TV and IPTV systems. Her major research interests are multimedia authoring languages,digital TV, multimedia communications, computer networks and telemedicine applications.