Demo sessionThe proposed demonstration requests DBPedia.org, gets the results and uses them to populate wiki pages with semantic annotations using RDFaLite. These annotations are persisted in a RDF store and we will show how this data can be reused by other applications, e.g. for a semantic mashup that displays all collected metadata about cities on a single map page. It has been developed using WikiNEXT, a mix between a semantic wiki and a web-based IDE. The tool is online 1 , open source 2 ; screencasts are available on YouTube (look for "WikiNext")

Arapov, Pavel

Ben Othmane, Amel

Buffa, Michel

Pavel Arapov

Michel Buffa

Amel Ben Othmane

Crossref

Semantic mashup with the online IDE WikiNEXT

INRIA a CCSD electronic archive server

HAL Id: hal-01083331https://hal.inria.fr/hal-01083331Submitted on 18 Nov 2014HAL is a multi-disciplinary open accessarchive for the deposit and dissemination of sci-entific research documents, whether they are pub-lished or not. The documents may come fromteaching and research institutions in France orabroad, or from public or private research centers.L’archive ouverte pluridisciplinaire HAL, estdestinée au dépôt et à la diffusion de documentsscientifiques de niveau recherche, publiés ou non,émanant des établissements d’enseignement et derecherche français ou étrangers, des laboratoirespublics ou privés.Semantic Mashup with the Online IDE WikiNEXTPavel Arapov, Michel Buffa, Amel Ben OthmaneTo cite this version:Pavel Arapov, Michel Buffa, Amel Ben Othmane. Semantic Mashup with the Online IDE WikiNEXT.2014, pp.4. ￿10.1145/2567948.2577010￿. ￿hal-01083331￿Semantic Mashup with the Online IDE WikiNEXTPavel Arapov, Michel Buffa, Amel Ben Othmane Wimmics research group INRIA and I3S Laboratories Sophia Antipolis, France arapov@i3s.unice.fr, buffa@i3s.unice.fr, amel.ben-othmane@inria.fr  ABSTRACT The proposed demonstration requests DBPedia.org, gets the results and uses them to populate wiki pages with semantic annotations using RDFaLite. These annotations are persisted in a RDF store and we will show how this data can be reused by other applications, e.g. for a semantic mashup that displays all collected metadata about cities on a single map page. It has been developed using WikiNEXT, a mix between a semantic wiki and a web-based IDE. The tool is online1, open source2; screencasts are available on YouTube (look for “WikiNext”). Categories and Subject Descriptors K.4.3 [Organizational Impacts]: Computer-supported collaborative work. Keywords Semantic Web, Web2.0, Wikis, Semantic Wikis, Knowledge Management, Web Applications 1. Introduction / motivation Wikis appeared in 1995 with Ward Cunningham’s wiki, changing radically the way people could produce documents on the web. It was the beginning of the web 2.0. Soon many different wiki engines (this is how we call the software that powers wiki web sites) appeared, specialized for writing online encyclopedias (MediaWiki, that powers Wikipedia), or targeted to private organizations [5]. We call these ones “application wikis”, they propose features, such as:  database integration, access control, versioning, possibility to embed HTML forms in pages, templates for formatting documents, and the possibility to write small applications using the page editor. Wiki engines such as TWiki, FOSWiki, TikiWiki, Confluence, XWiki, Mindtouch, belong to that category of wikis.  In 2005, researchers from the Semantic Web domain introduced the “semantic wikis”: wikis for creating/maintaining ontologies (data models) collaboratively and/or for annotating wiki content with semantic metadata, and enable requesting/reasoning on the embedded data. Overviews of such wikis can be found in [5]. Our group has a strong experience in that field as we developed two semantic wikis over the last seven years. We also wrote for the W3C3 an HTML5 course4 that includes lots examples that involve HTML/JavaScript/CSS. This course is powered by the                                                                  1 http://wikinext.gexsoft.com 2 https://github.com/pavel-arapov/wikinext 3 See http://www.w3devcampus.com 4 http://w3devcampus.com  Copyright is held by the International World Wide Web Conference Committee (IW3C2). IW3C2 reserves the right to provide a hyperlink to the author's site if the Material is used in electronic media. WWW’14 Companion, April 7–11, 2014, Seoul, Korea. ACM 978-1-4503-2745-9/14/04. http://dx.doi.org/10.1145/2567948.2577010 moodle5 e-learning platform; a CMS specialized for managing online courses of any kind. Integrating interactive programming examples in moodle turned to be so painful and limited (using, iframes) that we hosted externally the examples on jsbin.com, a popular web-based IDE. Our research group also developed the French version of DBPedia.org6, a semantic database that holds the data from Wikipedia and accepts SPARQL7. This project needed a front end for developing examples programs that consume and exploit its data. Here, too, we imagined a wiki engine that could act as a front-end: one could write applications from within the wiki, which can talk to DBPedia.fr, could write tutorials made both of text and application code that can be modified collaboratively. These ideas led to WikiNext, a wiki engine that integrates HTML5/JavaScript, proposes some APIs for exploiting the web of data (request and process data from different sources, cache them, aggregate them, write code that manipulate them for visualization, mashups, annotating text content, etc.).  WikiNEXT mixes the editing of “documents” and the editing of “source code of applications within the documents”, provides a templating system, comes with examples, tutorials, has features for adding external JavaScript libraries, etc.  2. State of the art Semantic Wikis: The first wave of semantic wikis started in 2005, with wiki engines such as Semantic Media Wiki [1], IkeWiki [2] OntoWiki [4] or SweetWiki [3]. They all proposed to add semantic metadata to documents, and used internally some formal language to store them, such as RDF (Resource Description Framework), OWL (Web Ontology Language), or Conceptual Graphs [7]. These metadata can be exploited to add new functionalities to the wiki: augmented navigation, visualization of metadata, search and retrieval or reasoning. The SPARQL language8 is often used internally for querying RDF data. Wiki engines like Semantic MediaWiki based on the MediaWiki engine, or SemperWiki[8] used wiki markup syntax for adding semantic annotations to wiki pages. OntoWiki is more of an ontology editor, and proposes user-friendly interface that offers different views and browsing and editing interfaces over existing data.  Today, semantic wikis, which are still active [15] either (1) kept adding new functionalities using plugins or extensions or (2) relied on external tools or web services. The Halo9 extension of Semantic Media Wiki proposes forms, auto-completion, a WYSIWYG editor, the integration of audios and videos files, and the integration of a SPARQL endpoint, or more complex                                                                  5  https://moodle.org/ 6  http://DBPedia.fr 7  http://www.w3.org/TR/rdf-sparql-query/, the W3C standard for querying the web of data. 8 http://www.w3.org/TR/sparql11-query/ 9 http://www.projecthalo.com/ eaaTIkSpWCamjstiinhscththfac3AtowpthwwcthteaptolasTeDetoinin3TewpwisWthCh  10112xtensions such nd OWiki [12]lso based on Semhe KiWi projeeWiki, or SwweetWiki[3], aroject  [11], beleb-Based IDEode Mirror10, As syntax highligany online IDbin.com, jsfiddme editing of stant preview wowever, are sanmall examples ourse we wrotee last generatioe browser, etc.or exploiting Linn RDF data stoode editors pres. WikiNEXpplication wiki mix them all web application,rovided severale JavaScript soith the wiki eniki page as datode) can collecem for annotatxt for suggestin cache, etc. Wrocess of writin use any extrayer that enabletandards, an APhe online proto.g. for writing BPedia.org, fonhancing wiki dol for teaching stall any softwtegrating them .1 Architehe WikiNEXTvents and methithin the wiki. Iage will be the ill be done in t composed of RikiNEXT articat describe theontributor, Datold metadata cr                          http://codemirror1 http://ace.c9.io/  http://ternjs.net/ as MoKi [13] (f(ontology-driveantic Media Wct (KnowledgeeetDeki [11] nd has been iong to the secons: JavaScript bCE Cloud911 ohting, auto-comEs, well knownle.net or tinkerbHTML/CSS/Jahen files are udboxes for teslike the ones w. WikiNext sharn of these tool) and mixes themked Data and are and a NOSQent in the WikiNT s, semantic wikiith WikiNEXT composed of H editors in the burce code, andgine internals”.a: the applicatit semantic dataing the documeg tags, add graikiNEXT has bg such applicati tool. It proposes richer data mI for caching antype comes witapplications thar processing thocuments, etc. semantic web teare. It is also a gin documents. cture overv JavaScript APods that can be n an MVC parabusiness layer ahe HTML/CSS DF metadata.  les/pages are asir basic charace, etc. But articleated manually                         .net/ ocuses on entern generation oiki, belong to th in Wiki [10]the wiki thatntegrated in thd category.  ased source cor ternjs12 propopletion, and hav by web devein.com. These IvaScript code pdated, etc. Moting code online developed fes lots of the fes (instant previ with a wiki apn original backeL database. FigEXT user inters, modern onlin; we consideredTML/CSS/Javarowser, for edit provided an A Consider the ton part of the p from an externt, extract informphic visualizatioeen designed on easier, and ws a real client anipulation usind updating data,h many examplt exploit the see semantic datThis makes Wichnologies, witood tool for coliew I provides numused by applicadigm, the JavaSnd the Controlleof the page, andsociated with a teristics: Title, es are also cont or added auto            prise modeling)f wiki content)e first category), successor of succeeded toe ISICIL ANRde editors likese features suche been used bylopers, such asDEs enable realin the browserst of these toolse or for writingor the HTML5atures found inew, run code inproach, an APInd that includesure 1 shows theface. e IDEs: we tried each page as aScript code. Weing the text andPI for “talkingext content of aage (JavaScriptnal source, useation from thens, save data infor making theithout the needside applicationg semantic web and more. es and tutorialsmantic databasea collected andkiNEXT a goodhout the need tolecting data anderous objectstions developedcript part of ther, the View part the Model partset of metadataArticle, Authorainers: they canmatically by an , .         ,                       ,      ,      ,   applicdescriarticleRDFa(UnifKnowGlobaFiguthe HThe page/web page annotjs [14conteindex3.2WikiNreliesdatabGoogside iNo Salso accesthrougto miformaprocepersis4. DAppThis athem RDFaand w        13 httpmainrepr14 httphttp15 http16 httpation. WikiNEbe the default s is represented/RDFalite annoorm Resource ledge Base. Thl Knowledge Bare 1: WikiNEXTML editor, tthe metadata genearticle, e.g. a lisservices call to as RDFa/RDFaLations and save], which suppnt is stored ases for the textuaImplementEXT has been on the Nodease. Node.js16 (Nle Chrome's Jamplementation QL document-opersisted in Msible through RDh MongoDB. Wnimize the numts used in WikiNss of developtence, both on temonstratlication pplication requto populate wiLite. These anne will show                          ://schema.org/ and search engine veesenting persons, ://www.w3.org/T://www.w3.org/TR://mongodb.org ://nodejs.org XT uses schetructure of artic semantically atations, whose Identifiers). Wee full stack ofse, the union ofT page editorshe JavaScript library managerated by applit of countries reDBPedia.org, ite14 annotations them in a modorts SPARQL  objects in a l page content aation  written from .js HTTP servode) is an I/O vaScript runtimof a JavaScript riented databaongoDB, thenFstore-js usingith these techber of languagEXT: JavaScrment both fohe client side anion proposeests DBPedia.oki pages with otations are perhow this data                         http://schema-rdndors and proposarticles, etc. R/xhtml-rdfa-prim/rdfa-lite/ ma.org13 vocales, users’ detais a named grapname is based  call this graph wiki articles  all the named g, the different editor (currentment tab. cations embedsulting from a are also represes. WikiNEXT pified version of1.1. The tradiMongoDB15 dare generated thiscratch in Javer and on the environment bue — essentiallyinterpreter. Mose. RDFstore-js, RDF triple SPARQL, but anological choices and the numipt can be used ir programmind on the server d: the Cityrg, gets the resusemantic annotasisted in the wik can be reuse     fs.org have been ce several RDF/S ser/ and  bularies to ls, etc. Each h made of on its URI  the Local give us the raphs.   tabs show  view) and ded in the request or a nted in the arses these  RDFStore-tional page tabase, and s way.  aScript and MongoDB ilt on top of , a server-ngoDB is a  triples are s are both lso directly es, we tried ber of data n the whole g and for side.  lts and uses tions using i RDF store d by other reated by the chemas for acSfTb4TdessTUtoWInvTWWdeW  171pplications, e.gollected metadcreencasts of thor “WikiNext”).Fighis application e run, edited or 1. A View formfor informatifound informcity already e2. An applicatioquerying DB3. A template template that4. Some code information, pages that semantic ann.1 Retrievhe WikiNEXTisplaying RDF xample of Figuome “template ptructured view ohe principle is I (User Interfac define the UI ielcome to {{ the JavaScriptar data = {che result will beelcome to NiikiNEXT propata collected frotc. Figure 2 shikiNEXT archi                          http://wikinext.g8 http://dbpedia.or. for a semanata about citiis application a ure 2: WikiNEis online on thecloned by any u: as shown in Fon about a city ation or makesxists in the wikn code that finPedia.org18’s SPfor displaying  gives a nice layfor creating a WikiNEXT ofcontain both otations.  ing data  API proposes data, we call thire 4. On the othages” in order f the informatiosimple to use ane) definition fron the HTML pacity}}.  part data will taity: ‘Nice’}:  ce. oses an API wim external dataows the comptecture.                          exsoft.com/wiki/5g/ tic mashup thes on a singre available on XT Architectur WikiNEXT weser. It is composigure 3, it allowand creates a ne an update if thi. ds information ARQL endpointhe data colleout. new page: in fers the possiinformation absome “defaults mode “sparql er hand, it is poto have a more n, as shown in Fd permits the dm the data. Thert as the examplke this form: ; th various featu sources, refreslete functional             19e04c580194c41at displays allle map pageYouTube (looke.  b site17 and caned of: s users to lookw page with thee page for thisabout a city byt. cted, we use aorder to reusebility to createout cities and” rendering forOn Fly”, see thessible to createmeaningful andigure 5. ecoupling of the user needs firste below: res to cache theh existing onesdiagram of the78000001  .                   ,  FigrequeFiguu4.2The tDBPedefine<span<h1 p… </spaIn th“{{_ihttp://propesyntaxThe Jvar ppagedarticure 3: City appst DBPedia.orre 4: Results frsing a templateProcessingemplate both hadia, and the RDd by:  about={{_iroperty=”nan> e code above d}}” and that haschema.org/Citrty “name”, and comes from thavaScript code bagedata = {ata.city = le = wikinelication, here wg and display thor in a new pom DBPedia, d. We call this m data ndles the displaFa Lite annotatd}} typeof=”me”>{{city}}we defined an s an RDF type y. This vocabul we will give ite templating enelow fills the te}; city; // dbpxtHelper.cite see the forme results in theage. efault renderinode “sparql Oy of the data retions. For exampCity”> </h1> object with id“City”, from theary states that a the value “{{cgine we use (mumplate with reaedia resulty(pagedata);  that will  local page  g without n Fly”. rieved from le, a city is entification  vocabulary  City has a ity}}”. This stache.js). l values:   Figure 5: Results using a template. 4.3 Reusing data To demonstrate data reuse, we try to recombine data sources on the wiki, creating what is typically known as mash-up by developing a web application that combines all the created cities on WikiNEXT. The Error! Reference source not found. displays the output map of the wiki application that retrieves the location of all cities available in our knowledge base and shows all cities on a map and in a table. WikiNEXT uses SPARQL to query its knowledge base. Hence, queries can be written without having to deal with semantic heterogeneity problems since we use predefined ontologies.  Figure 6: Map view of all cities in WikiNEXT 5. Discussion and Conclusions WikiNEXT is a “programmable wiki for the Linked Data”: a wiki in which we can write documents with an application layer that exploits the web of Data. Applications are written using standard HTML/CSS/JavaScript, and can be shared, cloned, improved collaboratively. We also designed an API and protocols for keeping a tight, synchronous link between the data embedded in the pages and the databases on the server side. The demonstration we propose consists in presenting live the WikiNEXT principles for writing documents and linked data applications directly in the browser. We propose to reproduce live, the City scenario described in the paper, showing how WikiNEXT simplifies the programming of such applications, compared to classical solutions that involve Desktop Based tools.  WikiNEXT is used now at the University of Nice/France and by the w3devcampus, the online platform that hosts the HTML5 W3C course.  6. REFERENCES [1] Krötzsch, M., Vrandečić, D., & Völkel, M. (2006). Semantic mediawiki. In The Semantic Web-ISWC 2006 (pp. 935-942). Springer Berlin Heidelberg. [2] Schaffert, S. (2006, June). IkeWiki: A semantic wiki for collaborative knowledge management. In Enabling Technologies: Infrastructure for Collaborative Enterprises, 2006. WETICE'06. 15th IEEE International Workshops on (pp. 388-396). IEEE. [3] Buffa, M. Gandon, F., Ereteo, G. Sander, P. & Faron, C., SweetWiki: A semantic wiki, Special Issue of the Journal of Web Semantics on Semantic Web and Web 2.0, Volume 6, Issue 1, February 2008 , Edited by Mark Greaves and Peter Mika, Elsevier, Pages 84-97 [4] Auer, S., Dietzold, S., & Riechert, T. (2006). OntoWiki–A tool for social, semantic collaboration. In The Semantic Web-ISWC 2006 (pp. 736-749). Springer Berlin Heidelberg. [5] Buffa, M. “Intranet Wikis”, workshop “intrawebs” of WWW 2006, Edinburgh, Scotland [6] Krotzsch, M., SCHAFFERT, S, & Vrandecic, D. Reasoning in semantic wikis. In: Reasoning Web. Springer Berlin Heidelberg, 2007. p. 310-329. [7] Oren, E., Breslin, J. G., & Decker, S. (2006, May). How semantics make better wikis. In Proceedings of the 15th international conference on World Wide Web (pp. 1071-1072). ACM [8] Oren, E., SemperWiki: a semantic personal Wiki. In SemDesk. 2005. [9] Kobilarov, G., Scott, T., Raimond, Y., Oliver, S., Sizemore, C., Smethurst, M., ... & Lee, R. (2009). Media meets semantic web–how the bbc uses dbpedia and linked data to make connections. In The semantic web: research and applications (pp. 723-737). Springer Berlin Heidelberg. [10] Schaffert, S., Eder, J. Samwald, M., & Blumauer. A., Kiwi - knowledge in a wiki. In European Semantic Web Conference 2008, 2008 [11] Buffa, M., Delaforge, N., Erétéo, G., Gandon, F., Giboin, A., & Limpens, F. (2013). ISICIL: Semantics and Social Networks for Business Intelligence. In SOFSEM 2013: Theory and Practice of Computer Science (pp. 67-85). Springer Berlin Heidelberg. [12] Di Iorio, A., Musetti, A., Peroni, S., Vitali, F.: Ontology-driven generation of wiki content and interfaces. The New Review of Hypermedia and Multimedia 16(1&2): 9-31 (2010) [13] Rospocher, M., Ghidini, C., Pammer, V., Serafini, L.,  Lindstaedt, S.: MoKi: the Modelling wiKi. SemWiki 2009 [14] Hernández A.G and García. M. N. M., A JavaScript RDF store and application library for linked data client applications. In Proceedings of the 21st International World Wide Web Conference, WWW2012, 2012.  [15] Meilendera, T., Jayb, N., Lieberb, J., & Palomaresa, F. Semantic wiki engines: a state of the art. Semantic-web-journal.net. IOS Press, 2010. 

Semantic Mashup with the Online IDE WikiNEXT

HAL-UNICE

https://hal.inria.fr/hal-01083331/document/

Semantic Mashup with the Online IDE WikiNEXT

Abstract

Similar works

Full text

Available Versions

Crossref

INRIA a CCSD electronic archive server

HAL-UNICE