Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Visual editing of semi-structured documents on the web

378 Aufrufe

Veröffentlicht am

Treating editing interfaces the same as all the other information designs we already do.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Visual editing of semi-structured documents on the web

  1. 1. 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
  2. 2. Course/moduledescriptions
  3. 3. 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
  4. 4. 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
  5. 5. S E M I S T R U C T U R E D Highlystructured Unstructured Catalogs Forms Word Comics Journal articleManuals Course descriptions Adressbook entries Legal texts Ads Infographics Photoshop/InDesign © Vertical Inc.
  6. 6. L AY E R S O F A D O C U M E N T content model presentation 2 boat length [ @unit ] <boat> <length unit=“m“> 2 </length> </boat> 321 l e n g t h B o a t m2 boat m length m 0 1 2
  7. 7. 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> <length unit=“m“> 2 </length> </boat> 321 l e n g t h B o a t m2m 0 1 2
  8. 8. P O LY P U B L I S H I N G content model presentation meaning Print Website Mobile
  9. 9. E D I T I N G I N T E R FA C E ?? Editing Print Website Mobile content model meaning
  10. 10. T W O WAY S : I N T E R A C T I V I T Y Editing content model meaning
  11. 11. 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
  12. 12. F R A M E W O R K Ensuring model Novice friendly «The Unicorn»
  13. 13. 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 +
  14. 14. D O C U M E N T C E N T E R E D Ges Co n Conception 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
  15. 15. F R A M E W O R K Ensuring model Novice friendly Webform Word-Document «The Unicorn»
  16. 16. H O W T O M O V E F O R WA R D Webform Word-Document add guidance add visual cues Ensuring model Novice friendly «The Unicorn»
  17. 17. 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 XForms AXEL Doctored XOpus FontoXML oXygen XEditor Inkling Habitat «The Unicorn» proprietary open sourceNovice friendly
  18. 18. 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 XForms AXEL Doctored XOpus FontoXML oXygen XEditor Inkling Habitat «The Unicorn» proprietary open sourceNovice friendly
  19. 19. ?? 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
  20. 20. E D I T I N G P R E S E N TAT I O N ( A X E L )
  21. 21. C O N T E N T <?xml version="1.0" encoding="UTF-8"?> <Unite UUID="fce2127f-e72d-4b6e-8179-4da864fbfd55" version="1" periodes="48" variante="M" annee="2015"> <Abreviation>CGDdoc</Abreviation> <Titre>Conception, gestion, diffusion de documents structurés</Titre> <Professeur> <Prenom>Luc</Prenom> <Nom>Fontolliet</Nom> <Email>luc.fontolliet@heig-vd.ch</Email> <Login>fonto</Login> </Professeur> <Objectifs> <Objectif>Approfondir les notions de transformations (XSLT).</Objectif> <Objectif>Comprendre et concevoir des modèles de documents (Schémas XML).</Objectif> <Objectif>Installer et utiliser une base de données XML native.</Objectif> <Objectif>Développer une application cliente (HTML, JavaScript, AJAX(JSON)-serveur (XQuery, DB XML native)).</Objectif> <Objectif>Produire du PDF en utilisant XSL-FO dans le contexte de l'application ci-dessus.</Objectif> </Objectifs> <Contenus> <Contenu>Bases de donnés XML</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>
  22. 22. S T R U C T U R E Unite @UUID @version @periodes @variante @annee Abreviation Titre Professeur+ Nom Prenom Email Login Objectifs Objectif+ Contenus Contenu+ Commentaires? Links? Link+ Text Url Prerequisites? Prerequisite+
  23. 23. <xt:use types="content" label="Objectif"> [Un objectif…] </xt:use> <xt:menu-marker/> <Objectifs> … </Objectifs> <Objectif> Another objective just for CalPoly </Objectif>
  24. 24. <xt:repeat minOccurs="0" maxOccurs="*" label="Links"> <li> <xt:use types="link" label="Link"> [Nouvelle référence] </xt:use><xt:menu-marker/> </li> </xt:repeat> <Links> … </Links> <Link> <Text>HEIG-VD</Text> <Url>http://heig-vd.ch</Url> </Link>
  25. 25. X T I G E R + H T M L <header class="intro"> <div id="xml-uuid"> <xt:attribute types="text" name="UUID" id="xml-uuid">00</xt:attribute> </div> <div id="xml-version"> <xt:attribute types="text" name="version" default="1">1</xt:attribute> </div> <h1 class="intro-title" id="xml-abbr"> <xt:use types="text" label="Abreviation" param="type=input;shape=self;layout=placed;class=inline">Abbr</xt:use> </h1> <h2 class="intro-subtitle"> <xt:use types="text" label="Titre">The complete title</xt:use> </h2> <p class="intro-text"> <strong id="xml-periodes"> <xt:attribute types="text" name="periodes" param='type=input;shape=self;layout=placed;class=inline' default="0">128</ xt:attribute> </strong> périodes dans l‘orientation <strong> <xt:attribute types="text" name="variante" param="type=input;shape=self;layout=placed;class=inline" default="M" values="M MM MIT E">[M|MM|MIT|E]</xt:attribute> </strong> </p> </header>
  26. 26. 5 . O P E N Q U E S T I O N S
  27. 27. 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 Widgeti i=0 n ∑ Eggs Ham Chunky bacon✓ Checkboxes
  28. 28. 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?
  29. 29. M I X E D C O N T E N T E X A M P L E
  30. 30. 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
  31. 31. D I S C U S S I O N

×