1 of 15

Toying�with Techs

Around the Globe�in Eight Technologies

VeDPH Summer School 2022

Daniele Fusi

XML - TEI - XSLT - HTML - CSS - JS - RDF - SPARQL

2 of 15

Presentational Device: Text on Support

named entities (stars, places, persons, etc.)
mapping on spherical surface
longer text descriptions (cartigli)

abc

data (content)

presentation

transformation

3 of 15

annotating text to define the structure of a textual record
structure allows computation and transformation

lemma

morph. class

meaning

4 of 15

XML�extensible markup language

<lemma>sam-ple </lemma> <nr>1</nr> ... <morph>noun (countable)</morph> ... <sense>1 a small part or amount of a product that people can try in order to find out what it is like</sense>

closing tag

opening tag

text in <> represents tags

tags can be forged at will

each set of tags is a dialect

lemma

The most common way we add structure to a text is using XML. This is a markup language, i.e. simply put a text, where some characters are reserved to annotate portions of it, using so-called tags.

A tag is just a text delimited by reserved characters like less-than or greater-than, and is mostly used to mark the start and end of the text snippet we want to annotate. ● For instance, here the couple of opening and closing tags delimit the text representing the lemma.

XML is a generic language, so we are free to create all the tags we want to annotate everything: poetry, prose, music, geometrical shapes, news feeds, fiscal invoices... There are a lot of such standard XML "dialects", i.e. essentially set of tags with their usage rules, so we can exchange data and do not reivent the wheel each time. Among these dialects, TEI is the de-facto standard in DH.

So we are going to jot down our text from the cartigli, and annotate it by adding some tags from the TEI dialect.

That's ok, but then what we do with it? Sure we can't expect non-IT users make sense of it, once it's been polluted by all these tags.

That's because XML is a technology focused on content, which was what we wanted. It just says that a portion of text is something; but then, if we want to present it in some fancy and readable way, like in a web page, we need to transform it into something else, rather made for presentation. That's HTML, which together with other sister technologies (CSS and JS) is behind web pages.

5 of 15

One Content, Many Presentations

data exports

long-term archival

databases

documents

services

web sites

for humans

for machines

transform

content

sam-ple

XML

HTML

presentations...

6 of 15

<lemma>sam-ple </lemma> <nr>1</nr> ... <morph>noun (countable)</morph> ... <sense>2 a small amount of a product that people can try in order to find out what it is like</sense>

transformation

content (XML)

presentation (HTML)

7 of 15

Sister Technologies At Work

<div>sam-ple

<xsl:template match=“lemma”>

<xsl:value-of select=“.”/>

<xsl:template>

XML

XSLT

HTML

whenever you find a “lemma” tag:

emit a span tag with red color and content = lemma’s content

text annotated for content (XML)

text annotated�for presentation (HTML)

text representing a transformation from XML to HTML

8 of 15

A Better User Experience

Physical Object

Digital (Re)Presentation

we have:

annotated text (XML, TEI dialect)
XSLT transformation
HTML presentation (hypertext)

we want:

encyclopedic data about cited entities
places on a map
places on a spinning 3D globe

abc

Until now, we have just text and some annotations. But a digital edition can't be just printed paper ported to another medium, with some fancier style, and easier connections across texts. A digital edition is a sort of open-ended, ever-changing hub, where a lot of heterogeneous and interconnected material is brought into unity as a highly interactive tool; the only limit is our imagination.

Now, here we have a text belonging to a physical object, the globe, representing a sort of summa of the geographical or astronomical knowledge of its time. The globe's user can spin it, and locate each named entity on a spherical surface. Where has this user experience gone in our HTML page? We really need more.

For instance, ● we would like an interaction allowing users to:

- see the text side by side with a list of all the relevant things we annotated in it: places, persons, etc.

- get some encyclopedic information (text, media, links to other sites) about each annotated thing, just like that we can find on Wikipedia.

- see the places on a rich and interactive map, just like we can do on Google maps.

- see the places on a 3D interactive spinning globe.

All these features should be integrated into a single presentation, which happens to be a web application.

A web application is a true application, except that it is distributed via HTML page(s), and thus requires no installation: you just open the page and use it. Nowadays, most web pages are in fact web applications rather than simple hypertexts.

9 of 15

Data Flow

transcribed

plain text

annotated text�(XML TEI)

XSLT transfor-mation

HTML text presentation

web application

?

reference data?

So, we want to integrate our XML document, transformed into HTML, in this web application; adding a program which merges it with such fancy stuff. But then, ● where will we get our encyclopedic data from?

In our XML annotation, we have nothing but a sort of link. It's like having an index of place names; not even their geographic location is present. We are curating the text, and have no resources nor expertise to do all the rest.

Of course, nobody is supposed to build an encyclopedic resource alone. We rather work in a team. That's somehow the concept of Wikipedia, too; it's a community work.

In our web, we can instantly get information about everything by simply walking across a giant, world-wide network of HTML pages.

Yet, as humans we read text on these pages, click on a link, read another text, and so forth.

Here instead we would like our web app to do it by itself, providing us with data about every place or person we click on.

As we have no data on our own, we want to fetch it from Wikipedia. But unfortunately, machines are not (yet) so smart to understand natural language.

Our web is a network of texts for human readers. What we'd like here is a network of pure data, for consumption by a machine program.

10 of 15

Web Generations

1.0

2.0

3.0

web of hypertexts

web of applications

web of data

Now, that's in essence what's offering the new semantic web you may have heard about. And that's what our app does: it uses the web as a sort of giant, world-wide database, and directly fetches data from it on behalf of users.

In short, ● web 1 was just a network of hypertexts. Data was available only under the form of a textual presentation. That’s ok for humans, but very difficult to use for machines. Think for instance of Wikipedia pages.

Then came ● web 2, a network of applications, rather than just hypertexts. Each application has its own logic and database, and provides great user experiences. Think for instance of Google maps.

The only problem with this approach is fragmentation and isolation, because every application and every database stands on its own.

● Web 3 addresses right this problem, by providing a sort of worldwide, global database, with a uniform structure and standard technologies. This is a network of pure data, separated from their presentations, and targeting machines before humans.

In it, a single model provides a sort of universal language for publishing data in this way.

11 of 15

Web 3 “words”: Global Entities

each entity gets its globally unique ID, just like each webpage has its address
the web being open, IDs are not assigned by a central authority; everyone can create them, as the infrastructure grants their uniqueness
many entity “vocabularies” (ontologies) are available for use�or extension

lov.linkeddata.es/dataset/lov/

For this language we must first define the words, and how to connect them.

● Our "words" are basic concepts, named "entities", each having its own globally unique ID; just like each webpage has its globally unique address.

This ensures that we will never ● get the Simpsons while searching for Homer. This happens now, right because a search engine is a sort of giant words index, built from millions of hypertexts. Yet, human languages are many, and ambiguous. Once everything gets its globally unique ID, no ambiguity will occur. We will have an ID for Homer the poet; and another, different ID for Homer Simpson.

We will thus be free from the cage of the hypertext, which merged together data (content) with a textual presentation, targeting humans only.

● Please note that all this happens without disrupting the current web infrastructure. This ID is assigned just like now an address is assigned to a web page: there is no central authority for this, because the web is open. And all the technologies used in this giant network of entities, also known as LOD (linked open data), are the pillars of the web since its beginnings.

So, in LOD we have our entities, which are like the "words" of this universal language.

● But of course, we can't build a lexicon from scratch whenever we want to publish something. In fact, there are thousands of available entity vocabularies, known as ontologies, we can use at will.

12 of 15

Web 3 “Sentences”: Triples

triple

predicates ontology

E

is-a

F

has-name

G

is-subclass-of

I

Sokrates

E

is-a

A

man

E

is-a

G

is-subclass-of

C

animal

J

Plato

zoologic ontology

D

man

C

mammal

A

animal

B

reptile

B

reptile

B

mammal

Greek philosopher ontologies

I

Sokrates

J

Plato

H

philosopher

H

philosopher

mammal

is-subclass-of

animal

reptile

is-subclass-of

animal

man

is-a

mammal

philosopher

is-a

man

Sokrates

is-a

philosopher

Plato

is-a

philosopher

Sokrates

is-a

animal

deducton

subject

predicate

object

E

is-a

letters on nodes represent their IDs

Sokrates

subject

is-a

predicate

man

object

Once defined our "words", let us build the "sentences".

These are the so-called "triples" of semantic web. Think of them as an Aristotelic statement, connecting a ● subject and an ● object via a ● predicate.

For instance, say we have 3 ontologies, i.e. 3 of those vocabularies of entities: ● one provides essential predicates, like "is-a", "is-subclass-of", etc.

Then, a zoology institute ● publishes an ontology about living beings. This will have entities like "animal", "mammal", etc.

Somewhere else in the world, a ● project about Greek philosophers publishes an ontology with entities like Sokrates, Plato, etc.

Now, in semantic web we can build our "sentences" by drawing entities from any ontologies.

So we can say that ● mammal ● is subclass of ● animal; ● as for reptile. ● And that man is a mammal.

We then add that ● a philosopher is a man.

Going on, we can say that ● Sokrates is a philosopher, ● as Plato. And so forth, linking entities into this worldwide network, which is our global database.

In a traditional environment, we'd have the zoological database and site on one hand; and the philosophy ones on the other; without connections. Here instead everything gets linked together, so that we can get answers to questions that neither site could provide. For instance, if Sokrates is an animal: ● the machine can get to the answer by itself, by deduction.

13 of 15

The Power�of the Network

Marco Polo

person

explorer of Asia

Marco Polo�@it

Поло, Марко @ru

rdfs:label

Venice

Venezia�@it

1254

rdf:type

foaf:Person

dbr:Marco_Polo

dbr:Venice

dbc:Explorers_of_Asia

Venedig�@de

rdfs:label

Venetian lagoon

dbr:Venetian_Lagoon

dbr:Ferdinand_Magellan

Magellan

rdf:type

Giulia Lama

dbr:Giulia_Lama

Alpi Eagles

dbr:Alpi_Eagles

dbo:hubAirport

Anthony Quinn

dbr:Anthony_Quinn

rdf:type

rdfs:label

dbo:birthDate

dbo:birthPlace

dbo:nearestCity

dbo:deathPlace

14 of 15

Toy Globe App

web application

transcribed

plain text

annotated text�(XML: TEI)

transformation (XML: XSLT)

HTML text presentation

semantic web�(DBPedia, LOD RDF)

mapping web service�(MapBox)

spinning 3D globe�web service�(Cesium)

globe.fusi-soft.com

So, let’s recap.

● We start by transcribing a text.

● Then, this text gets annotated using an XML dialect. In our sample, the dialect is TEI, very popular in DH.

This has the effect of producing a gap between the end user and the text itself, because now it is full of strange tags, and has no style; XML has no presentation in its own, it's just content.

● So, we need to transform XML into something else. This happens via another XML dialect, named XSLT.

● The target of the transformation is HTML, the markup language of web pages. This is a presentational markup for hypertexts.

● This HTML text will thus be integrated in our toy app.

Then, the app will get the logic to merge our text with ● reference data, coming from the semantic-web version of Wikipedia. This is an independent, global resource, available for everyone, built for machine rather than for user consumption, and modeled with triples.

Also, it will provide a ● fully interactive map for places, and ● an interactive, spinning 3D globe.

Thus, by leveraging the power provided by TEI, semantic web, and web 2.0 services, we get a tiny, yet powerful web application with little effort; making many different tools work together, in the context of the modern web infrastructure.

15 of 15

3D globe

(spin and zoom)

2D map (pan and zoom)

HTML produced from XML via XSLT

to provide more samples, the text here refers to a passage from Marco Polo, with places and persons

realia: places and persons, extracted from text with data from DBPedia

DBPedia provides all the available languages

see & play with the web 3.0 query language (SPARQL)

github.com/vedph/summer-globe-22

globe.fusi-soft.com

web service

XML

XSLT

HTML

CSS

JS

Cesium

Mapbox

semantic�markup

transform XML

hypertext�markup

hypertext�styles

web app�interactive�behavior

RDF

model for web 3.0 data

SPARQL

query language�for RDF

web services are the backbone of web 2.0 software-based infrastructure, providing data and logic to frontends

TEI

XML dialect for�text documents