V I S U A L E D I T I N G O F S E M I - S T R U C T U R E D D O C U M E N T S O N T H E W E B

E X P L O R I N G PA T T E R N S A N D A P P R O A C H E S

Jonas Oesch Prof. Jean-Marc Seydoux

Co

urs

e/m

od

ule

de

scri

pti

on

s

N O V I C E U S E R

• Does only occasional editing

• Competent in the domain of the content

• Does not know the content model used

• Is not trained for a particular editing software

D O C U M E N T S

• Complies to some rules of structure = Semistructured

• Meaning is lost when the relationship between elements is broken = Hierarchical

• Atomic

S E M I S T R U C T U R E DH

ighl

y st

ruct

ured

Uns

truc

ture

d

Catalogs

Forms Word

Comics

Journal articleManuals

Course descriptions

Adressbook entriesLegal texts

AdsInfographics

Photoshop/InDesign

© Vertical Inc.

L AY E R S O F A D O C U M E N T

content

model

presentation

2

boat

length[@unit]

<boat><lengthunit=“m“>2</length></boat>

321

l e ng t h

Boa t

m2

boat m length

m0 1 2

C O N V E Y I N G M E A N I N G

meaning

presentation

«The boat has a length of two meters.»

<boat><lengthunit=“m“>2</length></boat>

321

l e ng t h

Boa t

m2m0 1 2

P O LY P U B L I S H I N G

contentmodel

presentation

meaning

Print Website Mobile

E D I T I N G I N T E R FA C E

??EditingPrint Website Mobile

contentmodel

meaning

T W O W AY S : I N T E R A C T I V I T Y

Editing

contentmodel

meaning

R E Q U I R E M E N T S

• Ensuring the adherence to a given model

• Allow a novice user to create and edit documents

F R A M E W O R K

Ensuring model

Novice friendly

«The Unicorn»

D ATA C E N T E R E D

CGDocAbbr

Conception et gestion de documentsTitre

LucPrenom FontollietNom

luc.fontolliet@heig-vdEmail

Professeur

+

Approfondir les notions de transformations (XSLT).

Objectif

–

Comprendre et concevoir des modèles de documents (Schémas XML).

Objectif

+

D O C U M E N T C E N T E R E D

G e s C o nConception et gestion de documents

LUC FONTOLLIET

luc.fontolliet@heig-vd.ch

• Approfondir les notions de transformations (XSLT). • Comprendre et concevoir des modèles de documents

(Schémas XML). • Installer et utiliser une base de données XML native. • Développer une application cliente (HTML, JavaScript,

AJAX(JSON)-serveur (XQuery, DB XML native)). • Produire du PDF en utilisant XSL-FO dans le contexte de

Objectifs

F R A M E W O R K

Ensuring model

Novice friendly

Webform

Word-Document

«The Unicorn»

H O W T O M O V E F O R W A R D

Webform

Word-Document

add guidance

add visual cues

Ensuring model

Novice friendly

«The Unicorn»

I N V E S T I G AT E D S O L U T I O N S

Webform

Word-Document

Ensuring model

XFormsAXEL

Doctored

XOpus

FontoXML

oXygen

XEditor

Inkling Habitat

«The Unicorn»

proprietaryopen sourceNovice friendly

I N V E S T I G AT E D S O L U T I O N S

Webform

Word-Document

Ensuring model

XFormsAXEL

Doctored

XOpus

FontoXML

oXygen

XEditor

Inkling Habitat

«The Unicorn»

proprietaryopen sourceNovice friendly

??Editor XTiger XML + XHTML Template

interpretet by

AXEL JavaScript Library=

E P F L A N D I N R I A U N I V E R S I T I E S

Stéphane Sire Christine Vanoirbeek Vincent Quint Cécile Roisin

E D I T I N G P R E S E N TAT I O N ( A X E L )

C O N T E N T<?xmlversion="1.0"encoding="UTF-8"?><UniteUUID="fce2127f-e72d-4b6e-8179-4da864fbfd55"version="1"periodes="48"variante="M"annee="2015"><Abreviation>CGDdoc</Abreviation><Titre>Conception,gestion,diffusiondedocumentsstructurés</Titre><Professeur><Prenom>Luc</Prenom><Nom>Fontolliet</Nom><Email>luc.fontolliet@heig-vd.ch</Email><Login>fonto</Login></Professeur><Objectifs><Objectif>Approfondirlesnotionsdetransformations(XSLT).</Objectif><Objectif>Comprendreetconcevoirdesmodèlesdedocuments(SchémasXML).</Objectif><Objectif>InstalleretutiliserunebasededonnéesXMLnative.</Objectif><Objectif>Développeruneapplicationcliente(HTML,JavaScript,AJAX(JSON)-serveur(XQuery,DBXMLnative)).</Objectif><Objectif>ProduireduPDFenutilisantXSL-FOdanslecontextedel'applicationci-dessus.</Objectif></Objectifs><Contenus><Contenu>BasesdedonnésXML</Contenu></Contenus><Links><Link><Text>Fonto</Text><Url>http://www.fonto.ch</Url></Link></Links><Prerequisites><Prerequisite>e2c6dbc0-d863-11e0-9572-0800200c9a66</Prerequisite></Prerequisites></Unite>

S T R U C T U R E

Unite@UUID@version@periodes@variante@anneeAbreviationTitreProfesseur+

NomPrenomEmailLogin

Objectifs

Objectif+Contenus

Contenu+

Commentaires?

Links?Link+

TextUrl

Prerequisites?Prerequisite+

<xt:usetypes="content"label="Objectif">[Unobjectif…]</xt:use><xt:menu-marker/>

<Objectifs>…

</Objectifs>

<Objectif>AnotherobjectivejustforCalPoly</Objectif>

<xt:repeatminOccurs="0"maxOccurs="*"label="Links"><li><xt:usetypes="link"label="Link">[Nouvelleréférence]</xt:use><xt:menu-marker/></li></xt:repeat>

<Links>…

</Links>

<Link><Text>HEIG-VD</Text>

<Url>http://heig-vd.ch</Url></Link>

X T I G E R + H T M L<headerclass="intro"><divid="xml-uuid"><xt:attributetypes="text"name="UUID"id="xml-uuid">00</xt:attribute></div><divid="xml-version"><xt:attributetypes="text"name="version"default="1">1</xt:attribute></div><h1class="intro-title"id="xml-abbr"><xt:usetypes="text"label="Abreviation"param="type=input;shape=self;layout=placed;class=inline">Abbr</xt:use></h1><h2class="intro-subtitle"><xt:usetypes="text"label="Titre">Thecompletetitle</xt:use></h2><pclass="intro-text"><strongid="xml-periodes"><xt:attributetypes="text"name="periodes"param='type=input;shape=self;layout=placed;class=inline'default="0">128</xt:attribute></strong>périodesdansl‘orientation<strong><xt:attributetypes="text"name="variante"param="type=input;shape=self;layout=placed;class=inline"default="M"values="MMMMITE">[M|MM|MIT|E]</xt:attribute></strong></p></header>

5 . O P E N Q U E S T I O N S

W I D G E T S : W H AT I S N E E D E D ?

X T Q

Z Y X

G 9 ?

cmyktastic.ch

This is wheat

Tables

Images

Links

Section

Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.

Content boxes

Formulas

Widgetii=0

n

∑

Eggs

Ham

Chunky bacon✓

Checkboxes

M I X E D C O N T E N T

• How to markup inline elements?

• How to suggest the use of inline elements?

• How to validate the use of inline elements?

M I X E D C O N T E N T E X A M P L E

S O U R C E S

• S. Sire, C. Vanoirbeek, V. Quint, C. Roisin: Authoring XML all the Time, Everywhere and by Everyone

• Krug S.: Don’t make me think

• Norman D. : The Design of Everyday Things

• Rockley A. und Cooper C. : Managing Entreprise Content

• http://www.fontoxml.com

• http://www.xeditor.com/

• http://holloway.co.nz/doctored/

• http://xopus.com/demo/rich-text

• http://www.oxygenxml.com/webapp/

• http://habitat.inkling.com

• https://ssire.github.com/xtiger-xml-spec/

• http://www.w3.org/TR/xforms20

D I S C U S S I O N