Dateiverwaltung für die WebBox
ulrich
2021-01-24 644d91d296d1c55faac1e0aa47acf2142837647f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 2.0.10">
<meta name="author" content="Ulrich Hilger">
<title>WebBox Bedienung</title>
<link rel="stylesheet" href="asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="article toc2 toc-left">
<div id="header">
<h1>WebBox Bedienung</h1>
<div class="details">
<span id="author" class="author">Ulrich Hilger</span><br>
<span id="email" class="email"><a href="mailto:ulrich.hilger@web.de">ulrich.hilger@web.de</a></span><br>
<span id="revnumber">version 3.1,</span>
<span id="revdate">24. Januar 2021</span>
</div>
<div id="toc" class="toc2">
<div id="toctitle">Inhalt</div>
<ul class="sectlevel1">
<li><a href="#wbx-ueber">1. Über die WebBox</a>
<ul class="sectlevel2">
<li><a href="#wbx-abgrenzung">1.1. Zielgruppe</a></li>
<li><a href="#wbx-lizenz">1.2. Lizenz</a></li>
</ul>
</li>
<li><a href="#wbx-bedienung">2. Bedienung</a>
<ul class="sectlevel2">
<li><a href="#wbx-aufrufen">2.1. WebBox aufrufen</a></li>
<li><a href="#wbx-file-cms">2.2. Dateien bearbeiten</a></li>
<li><a href="#_texteditor">2.3. Texteditor</a></li>
<li><a href="#_speichern">2.4. Speichern</a></li>
<li><a href="#wbx-dok-edit">2.5. Textdokumente bearbeiten</a></li>
<li><a href="#wbx-ordner-verwalten">2.6. Ordner</a></li>
<li><a href="#wbx-neuer-reiter">2.7. Neuer Reiter</a></li>
<li><a href="#wbx-packen">2.8. Ordner packen</a></li>
<li><a href="#wbx-entpacken">2.9. Archiv entpacken</a></li>
<li><a href="#_sichtbarkeit_von_inhalten">2.10. Sichtbarkeit von Inhalten</a></li>
<li><a href="#wbx-inhalte-ansehen">2.11. Inhalte ansehen</a></li>
<li><a href="#_inhalte_hochladen">2.12. Inhalte hochladen</a></li>
<li><a href="#_bilder">2.13. Bilder</a></li>
<li><a href="#wbx-webdav">2.14. WebDAV verwenden</a></li>
<li><a href="#wbx-prod">2.15. Produktive Nutzung</a></li>
</ul>
</li>
<li><a href="#_dokumenthistorie">3. Dokumenthistorie</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="preamble">
<div class="sectionbody">
<div class="imageblock">
<div class="content">
<img src="bilder/File-Server-icon.png" alt="WebBox">
</div>
</div>
<div class="paragraph">
<p>Das Internet ist als Verbindung von Netzknoten konzipiert, die Inhalte bereit stellen. Die WebBox etabliert einen solchen Netzknoten als persönliche Instanz eines Nutzers und ermöglicht es, eigene Inhalte über das Netz zu verwalten und zu teilen.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="wbx-ueber"><a class="anchor" href="#wbx-ueber"></a>1. Über die WebBox</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Mit der WebBox können Inhalte so verwaltet werden, wie es Nutzer vom Desktop handelsüblicher Betriebssyteme her kennen. Zur Bedienung wird nicht mehr als ein Browser benötigt. Von überallher können Texte und Dokumente bearbeitet, Bilder, Musik oder Videos organisiert, kopiert, verschoben oder herauf- und heruntergeladen werden.</p>
</div>
<div class="paragraph">
<p>Die Kopie in einen öffentlichen Ordner genügt und Inhalte erscheinen für jedermann sichtbar im Netz. Der Rest bleibt im privaten Bereich nur für den Nutzer zugänglich, dem sie gehören. Rollen und Berechtigungen können über die Nutzerverwaltung verwaltet werden.</p>
</div>
<div class="paragraph">
<p>Die WebBox etabliert zudem ein relationales Datenbankmanagementsystem und lässt sich mit Java-Webanwendungen beliebig erweitern.</p>
</div>
<div class="sect2">
<h3 id="wbx-abgrenzung"><a class="anchor" href="#wbx-abgrenzung"></a>1.1. Zielgruppe</h3>
<div class="paragraph">
<p>Die Beschreibung in diesem Dokument beschränkt sich auf eine Nutzung mit Linux. Eine WebBox läuft darüber hinaus auch auf anderen Betriebssystemen wie Mac OS oder Windows.</p>
</div>
<div class="paragraph">
<p>Die WebBox ist mit dem Einsatz für einzelne Personen, Familien, oder kleine Arbeitsgruppen im Sinn entstanden. Sie funktioniert unverändert auch für eine größere Anzahl an Benutzern, allerdings ist ein großer Nutzerkreis eher etwas für das Zusammenspiel vieler WebBoxen.</p>
</div>
<div class="paragraph">
<p>Ein Betrieb vieler WebBoxen aus einer Hand erfordert zusätzliche Konfiguration für Cluster, weitere Infrastruktur und deren Orchestrierung. Der Betrieb in einem solchen Szenario ist möglich, aber in diesem Dokument nicht abgedeckt.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-lizenz"><a class="anchor" href="#wbx-lizenz"></a>1.2. Lizenz</h3>
<div class="paragraph">
<p>Die WebBox wird unter den Bedingungen der <a href="https://www.gnu.org/licenses/agpl-3.0.de.html">GNU Affero General Public License</a> bereitgestellt.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="wbx-bedienung"><a class="anchor" href="#wbx-bedienung"></a>2. Bedienung</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In diesem Dokument ist die Bedienung einer WebBox beschrieben. Das Dokument <a href="einrichtung.html">Einrichtung</a> enthält darüber hinaus Informationen zu <a href="einrichtung.html#wbx-inst">Installation</a> und <a href="einrichtung.html#wbx-eigenbau">eigener Konfiguration</a>.</p>
</div>
<div class="sect2">
<h3 id="wbx-aufrufen"><a class="anchor" href="#wbx-aufrufen"></a>2.1. WebBox aufrufen</h3>
<div class="paragraph">
<p>Wird nach dem <a href="einrichtung.html#wbx-start-stopp">Start der WebBox</a> im Webbrowser der URL <a href="http://localhost:8089/" class="bare">http://localhost:8089/</a> aufgerufen, erscheint die Startseite der WebBox.</p>
</div>
<div id="wbx-startseite" class="imageblock">
<div class="content">
<img src="bilder/wbx-firefox.png" alt="wbx-browser">
</div>
<div class="title">Abb. 1. die Startseite der WebBox</div>
</div>
<div class="paragraph">
<p>Für die WebBox ist der Port <code>8089</code> voreingestellt, er kann geändert werden wie in der <a href="einrichtung.html#wbx-port">Konfigurationsanleitung</a> beschrieben. Die Standard-Begrüßungsseite kann durch eigene Inhalte ersetzt werden, indem diese Inhalte im Verzeichnis der <a href="einrichtung.html#wbx-root-app">WebBox Root App</a> abgelegt werden.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-file-cms"><a class="anchor" href="#wbx-file-cms"></a>2.2. Dateien bearbeiten</h3>
<div class="paragraph">
<p>Die WebBox ist mit einer Dateiverwaltung ausgestattet, mit der <a href="https://de.wikipedia.org/wiki/Datei">Dateien</a> erstellt und deren Inhalte bearbeitet werden können. Die Dateiverwaltung der WebBox wird über den Punkt <code>Dateiverwaltung</code> des Menüs oben rechts auf der <a href="#wbx-startseite">Startseite der WebBox</a> aufgerufen.</p>
</div>
<div class="paragraph">
<p>Beim Aufruf erscheint zunächst die Anmeldeseite. Nutzer benötigen die <a href="#wbx-admin-aendern">Rolle</a> <code>ownFileAdmin</code>, um die Dateiverwaltung benutzen zu können. Mit erfolgreicher Anmeldung erscheint die Dateiverwaltung.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="bilder/dateiverwaltung.png" alt="img-wbx-file-cms">
</div>
<div class="title">Abb. 2. Die Dateiverwaltung der WebBox</div>
</div>
<div class="paragraph">
<p>Klick auf das Symbol mit den drei waagerechten Linien oben links öffnet das Menü ("Hamburger-Menü"). Erneutes Anklicken des Symbols schließt das Menü.</p>
</div>
<div class="sect3">
<h4 id="_auswählen_und_öffnen"><a class="anchor" href="#_auswählen_und_öffnen"></a>2.2.1. Auswählen und öffnen</h4>
<div class="paragraph">
<p>Das Anklicken eines Elements in der Dateiverwaltung wählt dieses aus. Das Anklicken eines gewählten Elements öffnet es.</p>
</div>
<div class="paragraph">
<p>Beim Öffnen verwendet die Dateiverwaltung die Dateiendungen, um zu bestimmen, wie eine Datei geöffnet wird. Dateien mit der Endung <code>.txt</code> werden beispielsweise im Texteditor geöffnet.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_texteditor"><a class="anchor" href="#_texteditor"></a>2.3. Texteditor</h3>
<div class="paragraph">
<p>Mit Doppelklick auf den Ordner <code>Persoenlich</code> wird dessen Inhalt angezeigt, anfangs ist dieser leer. Auswahl des Punkts <code>Neuer Text&#8230;&#8203;</code> im Menü oder Klick auf die Schaltfläche mit dem Dokumentsymbol oben rechts öffnet eine neue, leere Textdatei im Texteditor.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="bilder/texteditor.png" alt="img-wbx-txt-editor">
</div>
<div class="title">Abb. 3. der Texteditor der WebBox</div>
</div>
<div class="paragraph">
<p>Hier kann nun beliebiger Textinhalt eingetragen werden. Auswahl des Punkts <code>Speichern</code> oder <code>Speichern unter..</code> im Menü fragt einen Namen für die neue Datei ab.</p>
</div>
</div>
<div class="sect2">
<h3 id="_speichern"><a class="anchor" href="#_speichern"></a>2.4. Speichern</h3>
<div class="imageblock">
<div class="content">
<img src="bilder/speichern-unter.png" alt="img-wbx-file-save-as">
</div>
<div class="title">Abb. 4. der Dialog <em>Datei speichern unter</em></div>
</div>
<div class="paragraph">
<p>Mit Betätigen der Schaltfläche <code>Speichern</code> wird die neue Textdatei unter dem eingetragenen Namen in dem Ordner gespeichert, von dem aus der Texteditor gestartet wurde, in diesem Fall also im Ordner <code>Persoenlich</code>. Die Auswahl <code>Schließen</code> aus dem Menü oder Klick auf die Schaltfläche mit dem "X" oben rechts schließt den Texteditor und es wird wieder der Inhalt des Ordners <code>Persoenlich</code> angezeigt. Dort ist jetzt die neu angelegte Datei dargestellt.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-dok-edit"><a class="anchor" href="#wbx-dok-edit"></a>2.5. Textdokumente bearbeiten</h3>
<div class="paragraph">
<p>Mit der Dateiverwaltung lassen sich auch Textdokumente schreiben und bearbeiten. Die Vorgehensweise ist genauso wie im vorigen Abschnitt für Textdateien beschrieben. Für Textdokumente wird <code>Neues Dokument</code> aus dem Menü gewählt, woraufhin sich der Dokumenteditor der Dateiverwaltung öffnet.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="bilder/dokeditor.png" alt="img-wbx-dok-editor">
</div>
<div class="title">Abb. 5. Der Dokumenteditor der WebBox</div>
</div>
<div class="paragraph">
<p>Hier kann ein Textdokument mit Formatierungen direkt im Browser erstellt und bearbeitet werden, wie man es von üblichen Textverarbeitungen gewohnt ist. Das Speichern oder Bearbeiten erfolgt wie im vorigen Abschnitt beschrieben. Textdokumente werden dabei als reines HTML gespeichert, der Autor benötigt keine HTML-Kenntnisse für das Schreiben oder Bearbeiten. Die Dokumente sind so bestens für die Verwendung im Netz geeignet.</p>
</div>
<div class="paragraph">
<p><strong>Wichtig:</strong> Textdokumente müssen mit der Endung <code>.htmi</code> gespeichert werden, damit die WebBox sie als solche erkennen kann.</p>
</div>
<div class="sect3">
<h4 id="_textdokumente_und_html_seiten"><a class="anchor" href="#_textdokumente_und_html_seiten"></a>2.5.1. Textdokumente und HTML-Seiten</h4>
<div class="paragraph">
<p>Ein Textdokument, wie es mit der WebBox erstellt werden kann, ist einer HTML-Seite ähnlich. Es beinhaltet aber nur den Teil einer HTML-Seite, der im Element <code>body</code> untergebracht ist. Zu vollwertigen HTML-Seiten fehlt den Textdokumenten der WebBox die Gesamtstruktur mit dem Kopf-Teil, dem HTML-Element <code>head</code>.</p>
</div>
<div class="paragraph">
<p>Werden Textdokumente der WebBox mit der Funktion <a href="#wbx-inhalte-ansehen">Inhalte ansehen</a> dargestellt, also über ihren URL aufgerufen, gibt die WebBox das Textdokument wie eine HTML-Seite aus. Mangels Angaben im Kopf der Seite verwendet der Webbrowser Standardeinstellungen für die Gestaltung des Dokuments. Die Darstellung kann deshalb von Browser zu Browser unterschiedlich ausfallen.</p>
</div>
<div class="paragraph">
<p>Wird beim Speichern des Textdokuments die Endung <code>.htmi</code> im Namen angegeben, bettet die WebBox den Inhalt des Textdokuments in eine komplette HTML-Struktur bestehend aus <code>head</code>- und <code>body</code>-Element ein und fügt Verweise auf Gestaltungsvorlagen hinzu (CSS-Stylesheets). Als Gestaltungsvorlage wird das der WebBox beiliegende Stylesheet von Bootstrap <code>$WBX-INST/apps/jslib/bootstrap/css/bootstrap.min.css</code> sowie die Datei <code>stile.css</code> eingebettet. Ist im Ordner, in dem das betreffende Textdokument abgelegt ist, eine Datei <code>stile.css</code> abgelegt, können dem Textdokumente auf diese Weise eigene Gestaltungsvorgaben mitgegeben werden.</p>
</div>
</div>
<div class="sect3">
<h4 id="_textdokumente_als_html_exportieren"><a class="anchor" href="#_textdokumente_als_html_exportieren"></a>2.5.2. Textdokumente als HTML exportieren</h4>
<div class="paragraph">
<p>Um ein Textdokument, das mit der WebBox erstellt wurde, auch ohne eine WebBox einfach im Browser ansehen zu können, muss es als HTML-Seite vorliegen. Mit dem Punkt <code>Export HTML</code> im Menü können alle Textdokumente mit Endung <code>.htmi</code> des aktuell geöffneten Ordners als HTML-Seiten erzeugt werden.</p>
</div>
<div class="paragraph">
<p>Die so erzeugten HTML-Seiten werden in einen Ordner gelegt, der so heißt wie der aktuell geöffnete Ordner nebst Zusatz <code>_html</code>. Der neue Ordner liegt nach dem HTML-Export in dem Ordner, in dem der aktuell geöffnete Ordner liegt.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="wbx-ordner-verwalten"><a class="anchor" href="#wbx-ordner-verwalten"></a>2.6. Ordner</h3>
<div class="paragraph">
<p>Mit dem Punkt <code>Neuer Ordner</code> des Menüs oder Klick auf die Schaltfläche mit dem Ordnersymbol oben rechts wird im gerade angezeigten Ordner ein neuer Ordner erstellt. Nach Eingabe eines Ordner-Namens wird der neue Ordner im aktuell geöffneten Ordner angelegt. Ordner und deren Inhalte können mit den Optionen im Menü <code>Bearbeiten</code> verschoben, kopiert oder gelöscht werden. Hierzu werden folgende Schritte ausgeführt</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Inhalt (Ordner oder Datei) durch Anklicken auswählen,</p>
</li>
<li>
<p>Menü <code>Bearbeiten</code> - <code>Kopieren</code> oder <code>Ausschneiden</code> wählen,</p>
</li>
<li>
<p>in den Ordner navigieren, in den der ausgewählte Inhalt verschoben oder kopiert werden soll und</p>
</li>
<li>
<p>Menü <code>Bearbeiten</code> - <code>Einfügen</code> wählen.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Die gewählten Inhalte werden kopiert bzw. verschoben und befinden sich anschließend am gewählten Ort. Zur Auswahl mehrerer Dateien oder Ordner muss beim Anklicken jedes Elements einer Mehrfachauswahl die <code>Strg</code>-Taste festgehalten werden.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-neuer-reiter"><a class="anchor" href="#wbx-neuer-reiter"></a>2.7. Neuer Reiter</h3>
<div class="paragraph">
<p>Mit dem Punkt <code>Neuer Reiter</code> des Menüs wird der gerade geöffnete <a href="#wbx-ordner-verwalten">Ordner</a> in einem neuen Aktenreiter (Tab) des Browsers geöffnet. Browser ohne Unterstützung der Darstellung mehrerer Tabs öffnen den Ordner in einem neuen Fenster.</p>
</div>
<div class="paragraph">
<p>Gegebenenfalls muss in der Konfiguration des Browsers das Öffnen neuer Tabs oder Fenster für die WebBox erlaubt werden. In diesem Fall wird vom Browser beim Aufruf des Punkts <code>Neuer Reiter</code> die Erlaubnis vom Benutzer abgefragt.</p>
</div>
<div class="paragraph">
<p>Der Uniform Resource Locator (URL) eines so geöffneten Ordners der WebBox erscheint in der Adresszeile des Browsers. Er kann als Lesezeichen zum direkten Aufruf des Ordners genutzt werden.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-packen"><a class="anchor" href="#wbx-packen"></a>2.8. Ordner packen</h3>
<div class="paragraph">
<p>Der Inhalt des gerade geöffneten Ordners kann mit dem Punkt <code>Sonstiges</code> &#8594; <code>Ordner packen</code> in ein ZIP-Archiv überführt werden. Das ZIP-Archiv heißt so wie der Ordner und liegt anschließend in dem Ordner, der den gepackten Ordner enthält, also eine Ordnerebene höher.</p>
</div>
<div class="paragraph">
<p>Wird beispielsweise der Ordner namens <code>Testordner</code> im Pfad <code>Persoenlich/meine-Daten/Texte</code> geöffnet und auf diese Weise gepackt, liegt anschließend eine ZIP-Datei namens <code>Testordner.zip</code> im Ordner <code>Persoenlich/meine-Daten/Texte</code>.</p>
</div>
<div class="paragraph">
<p>Wird die ZIP-Datei ausgewählt (angeklickt) und der Punkt <code>Ansehen</code> im Menü gewählt, wird die ZIP-Datei heruntergeladen.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-entpacken"><a class="anchor" href="#wbx-entpacken"></a>2.9. Archiv entpacken</h3>
<div class="paragraph">
<p>Ein ZIP-Archiv wird mit dem Punkt <code>Entpacken</code> im Menü <code>Sonstiges</code> entpackt. Der Inhalt wird direkt in den Ordner entpackt, in dem die ZIP-Datei liegt. Es muss vor dem Entpacken ein neuer Ordner angelegt und die ZIP-Datei dorthin verschoben werden, wenn der Inhalt des ZIP-Archivs nicht mit anderen Inhalten vermischt werden soll.</p>
</div>
</div>
<div class="sect2">
<h3 id="_sichtbarkeit_von_inhalten"><a class="anchor" href="#_sichtbarkeit_von_inhalten"></a>2.10. Sichtbarkeit von Inhalten</h3>
<div class="paragraph">
<p>Die WebBox unterscheidet für jeden Benutzer einen öffentlichen und einen nicht öffentlichen, persönlichen Bereich. Im öffentlichen Bereich befindliche Inhalte sind ohne Einschränkung sichtbar. Inhalte im persönlichen Bereich sind nur für den angemeldeten Benutzer sichtbar. Jeder angemeldete Benutzer sieht dabei im persönlichen Bereich nur seine eigenen Inhalte. Beide Bereiche sind mit einem eigenen Uniform Resource Locator (URL) zugänglich:</p>
</div>
<div class="paragraph">
<p><code>http://localhost:8089/<strong>home</strong>/[benutzername]/</code> (persönliche Inhalte)</p>
</div>
<div class="paragraph">
<p><code>http://localhost:8089/<strong>data</strong>/[benutzername]/</code> (öffentliche Inhalte)</p>
</div>
<div class="paragraph">
<p>Die URLs für persönliche und öffentliche Inhalte, wie sie oben beschrieben sind, geben dabei Inhalte aus den Ordnern <code>Persoenlich</code> und <code>Oeffentlich</code> der WebBox wieder. Deren Inhalt wird erstellt und verwaltet wie in den folgenden Kapiteln beschrieben.</p>
</div>
</div>
<div class="sect2">
<h3 id="wbx-inhalte-ansehen"><a class="anchor" href="#wbx-inhalte-ansehen"></a>2.11. Inhalte ansehen</h3>
<div class="paragraph">
<p>Über den Menüpunkt <code>Ansehen</code> wird der Inhalt einer gerade gewählten Datei im Browser angezeigt. Auf diese Weise lässt sich auch der Uniform Resource Locator (URL) bestimmen, mit dem die Datei im Browser direkt aufgerufen werden kann. Es werden so nur Inhalte dargestellt, die im Browser angesehen werden können, z.B. Texte, HTML-Dateien, PDF, Bilder, Videos, usw.</p>
</div>
<div class="paragraph">
<p>Dateien mit nicht darstellbaren Formaten wie z.B. ZIP-Dateien oder Office-Dateien (Microsoft, OpenOffice, LibreOffice) werden heruntergeladen.</p>
</div>
</div>
<div class="sect2">
<h3 id="_inhalte_hochladen"><a class="anchor" href="#_inhalte_hochladen"></a>2.12. Inhalte hochladen</h3>
<div class="paragraph">
<p>Lokale Inhalte werden zur WebBox übertragen und im aktuell geöffneten <a href="#wbx-ordner-verwalten">Ordner</a> abgelegt, wenn sie per Ziehen und Ablegen (Drag and Drop) im gerade geöffneten Ordner der <a href="#wbx-file-cms">Dateiverwaltung</a> 'fallengelassen' werden.</p>
</div>
<div class="paragraph">
<p>Einzelne und mehrere gleichzeitig ausgewählte Dateien können so direkt an die WebBox übertragen werden. Sollen ganze Ordner übertragen werden, müssen diese zuvor als ZIP-Datei gepackt und können nach dem Hochladen mit der WebBox <a href="#wbx-entpacken">entpackt</a> werden.</p>
</div>
</div>
<div class="sect2">
<h3 id="_bilder"><a class="anchor" href="#_bilder"></a>2.13. Bilder</h3>
<div class="paragraph">
<p>Werden Bilder des Typs <code>JPEG</code>, <code>PNG</code> oder <code>GIF</code> auf die WebBox übertragen, übernimmt die WebBox automatisch das Verkleinern des Originals zu gebräuchlichen anderen Formaten.</p>
</div>
<div class="paragraph">
<p>Auf diese Weise müssen nicht die unter Umständen großen Datenmengen des Originalbildes für eine Miniatur-Vorschau übertragen werden. Die so erzeugte Miniaturansicht erscheint für Bilder auch anstelle eines Dateisymbols. Neben der Miniaturansicht lassen sich die folgenden weiteren Bildgrößen erzeugen:</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">Tabelle 1. Bildgrößen und -endungen</caption>
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-center valign-top">Größe (px)</th>
<th class="tableblock halign-center valign-top">Endung</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-center valign-top"><p class="tableblock">120</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">_tn</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-top"><p class="tableblock">240</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">_kl</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-top"><p class="tableblock">500</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">_dd</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-top"><p class="tableblock">700</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">_mt</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-top"><p class="tableblock">1200</p></td>
<td class="tableblock halign-center valign-top"><p class="tableblock">_gr</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>Dem Namen der Originaldatei eines Bildes wird einfach die Endung der gewünschten Größe angehängt um anstelle des Bildes in Originalgröße die gewünschte Größe aufzurufen. Ohne Endung wird das Bild in Originalgröße ausgegeben.</p>
</div>
<div class="paragraph">
<p>Ist beispielsweise eine Bilddatei <code>MeinBild.png</code> im Ordner <code>Persoenlich/Bilder</code> des Nutzers <code>fred</code> abgelegt, kann ihre Minituransicht mit folgendem URL angesehen werden:</p>
</div>
<div class="paragraph">
<p><code>http://localhost:8098/home/fred/Bilder/MeinBild_tn.png</code></p>
</div>
<div class="paragraph">
<p>Bilder können mit Hilfe des <a href="#wbx-dok-edit">Dokumenteditors</a> in Dokumente eingebunden werden. Vom Ablageort des betreffenden Dokuments ausgehend genügt eine relative Pfadangabe. Zum Beispiel könnte ein Dokument im Ordner <code>Persoenlich</code> des Nutzers <code>fred</code> das oben erwähnte Bild mit der relativen Angabe <code>Bilder/MeinBild.png</code> einbinden.</p>
</div>
<div class="sect3">
<h4 id="_bilder_betrachten"><a class="anchor" href="#_bilder_betrachten"></a>2.13.1. Bilder betrachten</h4>
<div class="paragraph">
<p>Ein Bild kann angesehen werden wie in Kapitel <a href="#wbx-inhalte-ansehen">Inhalte ansehen</a> beschrieben. Zudem kann im Menü <code>Sonstiges</code> die Funktion <code>Diashow</code> aufgerufen werden. Damit öffnet sich ein neuer Aktenreiter (Tab) im Browser, der die im aktuellen Ordner befindlichen Bilder als Diashow anzeigt.</p>
</div>
<div class="paragraph">
<p>Die zuvor erwähnte Diashow-Funktion kann auch direkt auf Ordner der Dateiverwaltung der WebBox angewendet werden. Dazu wird die Diashow-Funktion zunächst eingeschaltet, indem der Punkt <code>Diashow einschalten</code> im Menü <code>Sonstiges</code> gewählt wird. Damit wird die standardmäßig ausgeschaltete Diashow-Funktion aktiviert. Anschließend wird ein Ordner geöffnet, der Bilder enthält. Mit Klick auf eines der Bilder wird die Diashow direkt aus dem Ordner heraus gestartet.</p>
</div>
<div class="paragraph">
<p>Sollen Bilder wieder als Dateien in der <a href="#wbx-file-cms">Dateiverwaltung</a> behandelt werden, beispielweise zum Markieren oder Kopieren einzelner Bilddateien, wird die Funktion <code>Diashow ausschalten</code> im Menü gewählt. Damit wird die Diashow-Funktion ausgeschaltet.</p>
</div>
</div>
<div class="sect3">
<h4 id="_bilder_öffentlich_zugänglich_machen"><a class="anchor" href="#_bilder_öffentlich_zugänglich_machen"></a>2.13.2. Bilder öffentlich zugänglich machen</h4>
<div class="paragraph">
<p>Die Diashow-Funktion der WebBox läßt sich auch aus der öffentlichen Ablage heraus verwenden. Es genügt, einen Ordner mit Bilddateien in den Ordner <code>Oeffentlich</code> zu legen um die betreffenden Bilder mit allen zu teilen, die den Namen des Ordners kennen. Der URL zur Diashow ergibt sich aus der Adressleiste des Browsers mit Aufruf der Funktion <code>Diashow</code> aus dem Menü <code>Sonstiges</code>.</p>
</div>
<div class="sect4">
<h5 id="_beispiel"><a class="anchor" href="#_beispiel"></a>Beispiel</h5>
<div class="paragraph">
<p>Ein Ordner mit Bilddateien namens <code>1234567</code> liegt im Ordner <code>Oeffentlich/bilder</code> des Benutzers <code>fred</code>. Diese Bilder können dann über den folgenden URL als Diashow betrachtet werden</p>
</div>
<div class="paragraph">
<p><code>http://localhost:8089/file-cms/fotos/?o=fred/bilder/1234567</code></p>
</div>
<div class="paragraph">
<p>Kombiniert mit der <a href="#wbx-webdav">WebDAV-Funktion</a> können z.B. Fotos vom Mobilgerät in wenigen Schritten zentral zugänglich gemacht werden.</p>
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="wbx-webdav"><a class="anchor" href="#wbx-webdav"></a>2.14. WebDAV verwenden</h3>
<div class="paragraph">
<p><a href="https://de.wikipedia.org/wiki/WebDAV">WebDAV</a> ist ein Standardprotokoll für die Verwaltung von Dateien über HTTP oder HTTPS. Es gibt viele Dateiverwaltungs-Apps, die WebDAV unterstützen, beispielsweise auch für iOS oder Android. Mit solchen Programmen ist es sehr einfach, z.B. Fotos vom Mobilgerät auf die WebBox zu übertragen.</p>
</div>
<div class="paragraph">
<p>Über folgende URLs kann per WebDAV auf die WebBox zugegriffen werden.</p>
</div>
<div class="paragraph">
<p><code>http://localhost:8089/dav</code></p>
</div>
<div class="paragraph">
<p><code>dav://localhost:8089/dav</code></p>
</div>
<div class="paragraph">
<p>Ist die WebBox für den produktiven Betrieb <a href="einrichtung.html#wbx-sichern">abgesichert</a>, beginnen die URLs mit <code>https</code> und <code>davs</code>. Die URLs verweisen auf den Ordner <code>$WBX-INST/data/dav</code> der WebBox. Inhalte dieses Ordners erscheinen im Ordner <code>Austausch</code> der <a href="#wbx-file-cms">Dateiverwaltung</a>, der auf der obersten Ebene der Ablagestruktur zusammen mit den Ordnern <code>Persönlich</code> und <code>Öffentlich</code> zu sehen ist.</p>
</div>
<div class="paragraph">
<p>Wird mit einem WebDAV-fähigen Programm einer der obigen URLs aufgerufen, wird eine Authentifizierung abgefragt. Nur Benutzer der WebBox mit der <a href="einrichtung.html#wbx-admin-aendern">Rolle</a> <code>davNutzer</code> können sich dort anmelden.</p>
</div>
<div class="sect3">
<h4 id="_austausch"><a class="anchor" href="#_austausch"></a>2.14.1. Austausch</h4>
<div class="paragraph">
<p>Per WebDAV zugängliche Inhalte, wie sie im vorigen Abschnitt beschrieben sind, erscheinen im Ordner <code>Austausch</code> auf der obersten Ordnerebene. Sie können dort von jedem Benutzer der WebBox eingesehen werden.</p>
</div>
<div class="paragraph">
<p>Die Inhalte können von dort mit den Punkten <code>Ausschneiden</code> und <code>Einfügen</code> des Menüs <code>Bearbeiten</code> zu einem Ablageort, der dem gerade angemeldeten Benutzers gehört, verschoben, also in die Ordner <code>Oeffentlich</code> oder <code>Persoenlich</code> des jeweiligen Benutzers abgelegt werden.</p>
</div>
</div>
</div>
<div class="sect2">
<h3 id="wbx-prod"><a class="anchor" href="#wbx-prod"></a>2.15. Produktive Nutzung</h3>
<div class="paragraph">
<p>Ist eine WebBox abgesichert, wie in der <a href="einrichtung.html#wbx-sichern">Installationsanleitung</a> beschrieben, kann sie von überallher verwendet werden. Wir gehen für die weitere Beschreibung hier einmal von der Betriebsart hinter einem Proxy aus.</p>
</div>
<div class="paragraph">
<p>Zur Erreichbarkeit 'von außen' ist mindestens die Kenntnis der <a href="https://de.wikipedia.org/wiki/IP-Adresse">IP-Adresse</a> des <a href="https://de.wikipedia.org/wiki/Router">Routers</a> zum Internt erforderlich, hinter dem die WebBox läuft. Besser ist es aber, bei einem entsprechenden Anbieter eine <a href="https://de.wikipedia.org/wiki/Domain_(Internet)">Domain</a> wie etwa <code>example.com</code> zu <a href="https://de.wikipedia.org/wiki/Domain-Registrierung">registrieren</a> und diese auf die IP-Adresse des Routers verweisen zu lassen. Für wechselnde IP-Adressen, wie sie bei heimischen Internet-Anschlüssen vorkommen, kann ein Anbieter für <a href="https://de.wikipedia.org/wiki/Dynamisches_DNS">dynamisches DNS</a> eingeschaltet werden.</p>
</div>
<div class="paragraph">
<p>Sind Domain und dynamisches DNS geschaltet, muss im Router der Port 443 für die Kommunikation über <a href="https://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol_Secure">HTTPS</a> geöffnet und eine Weiterleitung dieser Anfragen an den Proxy geschaltet werden.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_dokumenthistorie"><a class="anchor" href="#_dokumenthistorie"></a>3. Dokumenthistorie</h2>
<div class="sectionbody">
<table class="tableblock frame-all grid-all stretch">
<caption class="title">Tabelle 2. Änderungen</caption>
<colgroup>
<col style="width: 11.1111%;">
<col style="width: 22.2222%;">
<col style="width: 22.2222%;">
<col style="width: 44.4445%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-center valign-bottom">Nr</th>
<th class="tableblock halign-left valign-bottom">Datum</th>
<th class="tableblock halign-left valign-bottom">Autor</th>
<th class="tableblock halign-left valign-bottom">Beschreibung</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-center valign-bottom"><p class="tableblock">1</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">9. Mai 2020</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Erste Anlage der Version 3 der WebBox</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-bottom"><p class="tableblock">2</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">10. Januar 2021</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Neue Dokumentation Version 3</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-bottom"><p class="tableblock">3</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">16. Januar 2021</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Installation, Sicherung</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-bottom"><p class="tableblock">4</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">22. Januar 2021</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Aufteilung der Dokumentation</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-bottom"><p class="tableblock">5</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">24. Januar 2021</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">Ulrich</p></td>
<td class="tableblock halign-left valign-bottom"><p class="tableblock">V3.1: Neue Bedienoberfläche beschrieben</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Version 3.1<br>
Letzte Änderung 2021-01-24 13:53:00 +0100
</div>
</div>
<link rel="stylesheet" href="/jslib/highlight-adoc/styles/github.min.css">
<script src="/jslib/highlight-adoc/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
</body>
</html>