Diograph.org is a Javascript library for the Personal Web developers. For the Personal Web itself, go to personal-web.org.
Getting started
- Create or get a Diograph document.
- Save document to a folder in a device, service or server.
- Open document with a Personal Browser.
Conceptual Model
Personal Web is a personal information system that sits between the WWW (global information system) and Files and Folders (local information system). Its purpose is to give people a better way to think and a neutral way to have digital information.
The core of the Personal Web is the Diograph -data model that is used in the Personal Web applications and that is stored in any file system. The Diograph -data model is based on the Digital Habitat -conceptual model, the new way of thinking digital information.
The design principle of the Personal Web is that our digital environment should be similar to our physical environment. The same principle is used also before in the desktop metaphor and paper/document metaphor
Personal Web, respectively, consists of places like our physical environment. A place has owners, which are represented by avatars. A place again consists of rooms.
A room is the main functional unit of the Personal Web. A room has walls, floor and sky as a ceiling. Each of these contain diories (digital memories), the basic information units of the Personal Web. Diories can be organized into a graph (semantic memory), a timeline (temporal memory), a map (spatial memory), a flowchart (procedural memory) or as a landscape of doors to other rooms.
Diory
Diory is the basic information unit and element in the Personal Web. A diory consists of name, text, image and address elements. Personal Web tools can attach buttons to diories.
diory.json:
{
"ID": "21EC2020-3AEA-4069-A2DD-08002B30309D4", // GUID (mandatory)
"version": "0.1.9",
"IRI": "http://dbpedia.org/example", // For linked data
"name": "This is the name of the diory",
"text": "This is text in the diory",
"background": "http://example.com/image.jpg",
"address": "http://example.com/webpage/",
"data": {...},
"class": { // CSS class for sub-elements (see list of available classes)
"name": {...},
"text": {...},
"image": {...},
"address": {...},
},
"style": { // Specific CSS style for sub-elements
"name": {...},
"text": {...},
"image": {...},
"address": {...},
},
"location": { // GeoJSON-LD
"type": "point",
"coordinates": [61.49623408242434, 23.73213060316381, 16z],
},
"date": ["2014-05-05T13:28:30Z","2014-05-05T13:28:30Z",4],
"created": "2015-01-29T07:06:00Z",
"modified": "2015-01-29T07:06:00Z",
"connections": {
{dioryID}: {
"roomID": "54AA020-3AEA-4069-A2DD-08002B30309D4",
"position": {},
"status": {}
}
}
}
Diory element using AngularJS dg-diory directive based on diory.json:
Template in dg-diory directive:
/"
Elements can be modified with CSS Style attributes and Semantic UI classes (header -> name, icon -> image, icon -> address).
Room
Room is the container in the Personal Web. A room consists of walls, floor and sky as a ceiling. A room contains diories and tools.
room.json:
{
"ID": "03a0ddc5-9427-44b5-a066-67b61ca44cbc",
"avatars": {
"oopee@iki.fi": {
"roomID": "03a0ddc5-9427-44b5-a066-67b61ca44cbc",
"position": {},
"status": {}
}
},
"diorys": {
"21EC2020-3AEA-4069-A2DD-08002B30309D4": {...}
}
}
Diory element using AngularJS dg-diory directive based on diory.json:
Template in dg-diory directive:
Elements can be modified with CSS Style attributes and Semantic UI classes (header -> name, icon -> image, icon -> address).
Format
Diory Format
Diory (digital memory) is the unit of information in the Personal Web. A diory relates to a room or a thing (agent, door, object, moment and place).