[Workshop] "html in MyMDb-CE"

[Collo]

DIESER ERÖFFNUNGSBEITRAG WIRD IMMER AKTUELL GEHALTEN. SOLLTE SICH ETWAS VERÄNDERN ODER SICH AUS DER MÖGLICHERWEISE NACHFOLGEND AUFKOMENDEN DISKUSSION WICHTIGE UPDATES ERGEBEN, WERDEN DIE HIER EINGEFÜGT. WER ALSO SPÄTER AUF DIESEN BEITRAG STÖSST, MUSS NICHT ZWINGEND DIE NACHFOLGENDEN BEITRÄGE NACHARBEITEN. ALLERDINGS WIRD DAS AUCH NICHT SCHADEN, WEIL HIER NUR WICHTIGE UPDATES NACHGETRAGEN WERDEN.


Willkommen bei meinem kleinen Workshop "html in MyMDb-CE"

Um keine falschen Hoffnungen zu wecken, möchte ich das gleich zu Beginn etwas einschränken. Es funktionieren nur einige wenige html-Elemente und darin nur einige wenige Attribute. Ich werde in diesem Beitrag auf die wesentlichen Möglichkeiten eingehen, garantiere aber nicht, dass diese vollständig sind. Aber MyMDb-CE ist ja auch kein Webbrowser. Die vorhandenen Möglichkeiten sollen nur dabei helfen, jene Dinge grafisch umzusetzen, die MyMDb-CE selbst nicht mitbringt.

Was ich hier anbiete, ist "learning by doing". Menschen mit besseren Kenntnissen, als ich sie habe, mögen bitte darüber hinweg sehen. Hier geht es nicht um professionelles Handwerk sondern darum, wie man mit ein paar html-tags noch mehr aus MyMDb-CE herausholen kann.


Voraussetzungen und Vorab-Überlegungen

01 - MyMDb-CE ist in seinen Grundfunktionen weitgehend selbsterklärend. Dennoch haben wir ein sehr umfangreiches Handbuch, in dem alles erklärt wird. Wer MyMDb-CE mit zahlreichen Funktionen individuell für sich konfigurieren will, findet dort alles, was gebraucht wird. Wer html nutzen möchte, findet dazu im Handbuch nur wenige Hinweise. Aus gutem Grund. Denn mit der Nutzung von html verlasst ihr den gut durchdachten Aufbau des Programmierers und die selbsterklärenden Möglichkeiten, die MyMDb-CE ausmachen. Deshalb solltet ihr, um zu verstehen, worum es in diesem Workshop geht, ein wenig mit MyMDb-CE aber auch mit html vertraut sein. Gute Grundkenntnisse in html vermitteln beispielsweise die Seiten selfhtml.org und html-seminar.de. Da MyMDb aber eine Community-Edition ist, können Fragen zu html gerne auch hier in der Community gestellt werden. Hier setze ich aber auf "User helfen Usern", denn geregelter html-Support seitens des Teams sprengt unsere zeitlichen Möglichkeiten.

02 - Wichtig:
Wer seine Texte mit html-tags gestaltet oder durch Bilder ersetzt, beeinflusst dadurch einige Funktionen von MyMDb-CE. Das Sortieren nach Regisseuren z.B. wird nicht mehr funktionieren, wenn anstelle des Namens ein html-Tag steht. Auch die Suchfunktion und die Statistik sind betroffen. Man sollte sich deshalb vor dem Einsatz im klaren sein, was einem wichtiger ist. Ich verzichte deshalb bei Schauspielern, Regisseur und einigen anderen Feldern auf html. Beim Titel hingegen funktioniert das Sortieren und auch die Suchfunktion. Wo ich hingegen den Einsatz von html für sinvoll halte, zeigt dieser Workshop.

03 - Wichtig:
Was immer ihr mit html umsetzen wollt; es ist nur ein Angebot und nicht Bestandteil der MyMDb-CE Programmierung. Ihr werdet schnell auf Ideen stoßen, die nicht funktionieren oder anders, als gewünscht. Es macht keinen Sinn, diesbezügliche Fehler zu melden. Es sind keine! MyMDb-CE ist primär einfach nicht für html gemacht.

04 - Wichtig:
Mit den funktionierenden html-tags selbst könnt ihr eigentlich nichts zerstören. Außer das Erscheinungsbild, wenn ihr beispielsweise zu große Bilder einsetzt. Aber bitte seid gewarnt und macht immer erst ein Backup, bevor ihr experimentiert und austestet.

05 - Hinweis:
Es ist sinnvoll, html zunächst nur in den Bereichen einzusetzen, die über das Einstellungsmenü aufgerufen werden. Die dort gemachten Einstellungen werden auch im Quick-Info angezeigt. Im Quickinfo-Einstellungsmenü verwendete html-tags werden hingegen nur im Quick-Info angezeigt.

06 - Hinweis: 
Es kann vorkommen, dass die eingefügten Tags innerhalb der Übersichtstabelle zu einem anderen Ergebnis führen als im Quick-Info. Hier müsst ihr austesten, was geht. Bilddateien beispielsweise können in der Tabelle horizontal und vertikal zentriert werden, im Quickinfo nicht. Und animierte gif's sind in der Tabelle i.d.R. nicht animiert, im Quickinfo schon.

07 - Wie wird html eingesetzt?
Es werden nur einzelne Tags eingesetzt. Der head-Bereich kann nicht genutzt werden. Alle Tags befinden sich quasi automatisch innerhalb des Bodys.

08 - Wo kann html eingesetzt werden?
Überall da, wo man freie Texte eingeben kann. Auch in Feldern, in denen Texte vordefiniert werden können, die dann per Auswahlmenü ausgewählt werden.
Wie alle individuellen Felder wird auch html somit Film für Film angewendet. Wer beispielsweise in einem Feld immer das gleiche img-tag haben möchte, kann dies per Stapelverarbeitung auf alle Datensätze anwenden und/oder es per Default-Setting für alle neuen Filme vordefinieren. Mehr dazu im Handbuch. Ich habe auf diese Weise ein Feld mit einer schmalen Bild einer Film-Perforation gefüllt und mir so eine senkrechte Trennlinie für die Tabelle erstellt, um Bereiche voneinander optisch besser zu trennen. Wie das aussieht, seht ihr weiter unten auf Abb.2 und Abb.3

09 - Tipp:
Für die Zeit, in der ihr html in eurem Programm einrichtet, empfehle ich euch, einen fiktiven Film anzulegen und diesen auf Nr. 1 eurer Liste zu setzen. In diesem Film könnt ihr die tags, deren Funktionen und Aussehen dann testen.

10 - VERSCHOBEN


11 - Textformatierung

11.1 - Spielereien für den Anfang:
Im folgenden habe ich ein paar Beispiele zusammengestellt, die funktionieren. Die könnt ihr einfach mal in eurem Testfilm in eines der (großen) Textfelder einsetzen und schauen, wie das Ergebnis aussieht. Eine praktische Anwendung habe ich für mich aber noch nicht gefunden. Viel Spass beim spielerischen Austesten.

Code [Auswählen] Erweitern

<ol>
 [punkt]Erster Punkt[/punkt]
 [punkt]Noch ein Aspekt[/punkt]
 [punkt]Und so weiter[/punkt]
</ol>

Code [Auswählen] Erweitern

<table cellpadding='8' cellspacing='0' width='100%' height='100%'>
<tr style='background:red;'>
 <td></td></tr>
<tr style='background:red;'>
 <td>Das schweigen der Lämmer</td></tr>
<tr style='background:red;'>
 <td></td></tr></table>

Code [Auswählen] Erweitern

<table>
 <tr>
 <th style="color: red"; height="16">Kopf Spalte 1</th>
 <th>Kopf Spalte 2</th>
 <th>Kopf Spalte 3</th>
 </tr>
 <tr>
 <td>Zelle 2/1</td>
 <td>Zelle 2/2</td>
 <td>Zelle 2/3</td>
 </tr>
 <tr>
 <td>Zelle 3/1</td>
 <td>Zelle 3/2</td>
 <td>Zelle 3/3</td>
 </tr>
</table>
Diesen Text kann man sich hier selbst erstellen:

Code [Auswählen] Erweitern

<span style="color:#ff00ff">D</span><span style="color:#ff00cc">a</span><span style="color:#ff0099">s</span><span style="color:#ff0066"> </span><span style="color:#ff0033">L</span><span style="color:#ff0000">a</span><span style="color:#ff3300">c</span><span style="color:#ff6600">h</span><span style="color:#ff9900">e</span><span style="color:#ffcc00">n</span><span style="color:#ffff00"> </span><span style="color:#ccff00">i</span><span style="color:#99ff00">s</span><span style="color:#66ff00">t</span><span style="color:#33ff00"> </span><span style="color:#00ff00">w</span><span style="color:#00ff33">i</span><span style="color:#00ff66">e</span><span style="color:#00ff99"> </span><span style="color:#00ffcc">e</span><span style="color:#00ffff">i</span><span style="color:#00ccff">n</span><span style="color:#0099ff"> </span><span style="color:#0066ff">R</span><span style="color:#0033ff">e</span><span style="color:#0000ff">g</span><span style="color:#3300ff">e</span><span style="color:#6600ff">n</span><span style="color:#9900ff">b</span><span style="color:#cc00ff">o</span><span style="color:#ff00ff">g</span><span style="color:#ff00cc">e</span><span style="color:#ff0099">n</span>

Code [Auswählen] Erweitern

<p>
<meter></meter>

<meter max="4" value="1">1 / 4</meter>

<meter max="4" value="2">2 / 4</meter>

<meter max="4" value="3">3 / 4</meter>

<meter max="4" value="4">4 / 4</meter>
</p>


Code [Auswählen] Erweitern

<span style="font-size:22pt">L</span><span style="font-size:21pt">o</span><span style="font-size:20pt">r</span><span style="font-size:19pt">e</span><span style="font-size:18pt">m</span><span style="font-size:17pt">i</span><span style="font-size:16pt">p</span><span style="font-size:15pt">s</span><span style="font-size:14pt">u</span><span style="font-size:13pt">m</span><span style="font-size:12pt">d</span><span style="font-size:11pt">o</span><span style="font-size:10pt">l</span><span style="font-size:9pt">o</span><span style="font-size:8pt">r</span><span style="font-size:7pt">s</span><span style="font-size:6pt">i</span><span style="font-size:5pt">t</span><span style="font-size:4pt">a</span><span style="font-size:3pt">m</span><span style="font-size:2pt">e</span><span style="font-size:1pt">t</span><span style="font-size:2pt">S</span><span style="font-size:3pt">e</span><span style="font-size:4pt">m</span><span style="font-size:5pt">p</span><span style="font-size:6pt">e</span><span style="font-size:7pt">r</span><span style="font-size:8pt">l</span><span style="font-size:9pt">o</span><span style="font-size:10pt">b</span><span style="font-size:11pt">o</span><span style="font-size:12pt">r</span><span style="font-size:13pt">t</span><span style="font-size:14pt">i</span><span style="font-size:15pt">s</span><span style="font-size:16pt">r</span><span style="font-size:17pt">i</span><span style="font-size:18pt">s</span><span style="font-size:19pt">u</span><span style="font-size:20pt">s</span><span style="font-size:21pt">s</span><span style="font-size:22pt">e</span><span style="font-size:21pt">m</span><span style="font-size:20pt">e</span><span style="font-size:19pt">r</span><span style="font-size:18pt">o</span><span style="font-size:17pt">s</span><span style="font-size:16pt">e</span><span style="font-size:15pt">u</span><span style="font-size:14pt"></span>
All das sind, wie gesagt, eher Spielereien. In der praktischen Anwendung geht es, zumindest bei mir, einfacher zu.

11.2 - Ein Beispiel für eine praktische Anwendung:

Dieser Code ist ein Beispiel dafür, wie man den Titel gestalten kann:

Code [Auswählen] Erweitern

<b>Camelot</b><br><small>Der Fluch des goldenen Schwertes</small>
11.3 - Ein Beispiel für eine praktische Anwendung im Quick-Info:

Die Textarea nutze ich im Quickinfo. Da sie nur einen Absatz aufnimmt, passt mir das besonders gut für den Inhalt des Films. Dort nutze ich gerne mehrere Quellen, gerne auch Wikipedia. Hier aber kann es zu Spoilern kommen. Da die Textarea nur den ersten Absatz aufnimmt, ist die Spoilergefahr nicht mehr gegeben. Wenn ich trotzdem den gesamten Inhalt sehen möchte, fahre ich mit der Maus unter die Textarea und der gesamte Inhalt erscheint als Tooltipp. Dafür müsst ihr natürlich einen gewissen Raum lassen, denn innerhalb der Textarea funktioniert der Tooltipp nicht.

In das Prefix-Feld:

Code [Auswählen] Erweitern

<textarea cols="23" rows="1">In das Suffix-Feld:

Code [Auswählen] Erweitern

</textarea
Mittlerweile hat man bei MyMDb-CE so viele Möglichkeiten zur Textgestaltung, die im Programm integriert sind, dass ich mehr Formatierungen per html gar nicht mehr nutze.


12 - Vorbereitung für den Einsatz von img-tags

12.1 - Tipp:
Bevor ihr damit beginnt, img-tags zu nutzen, ist es sinnvoll, zunächst einen Ordner für die Bilder, die ihr einfügen wollt, festzulegen und zu benennen. Jeder img-tag, den ihr später einsetzt, verlinkt zu diesem Ordner. Wenn ihr alle Bilder in diesem Ordner ablegt und auf Unterordner verzichtet, könnt ihr immer den gleichen Link verwenden und müsst darin nur den Namen der jewiligen Bilddatei abändern. Es kann Vor- und Nachteile haben, diesen Ordner direkt in euer MyMDb-CE Verzeichnis abzulegen. Ich habe mich für einen Ordner außerhalb entschieden und habe nicht ausreichend getestet, welche Vor- und Nachteile es haben würde, wenn er innerhalb des Verzeichnisses wäre. Da ich Programmtester bin und deshalb ständig neue Versionen bekomme, wollte ich diesen Ordner nicht ständig verschieben müssen. Ihr dürft gerne von euren Erfahrungen berichten, um diesen Punkt zu ergänzen.

12.2 - Erstellung eines Links zum Image

Bitte lege zuerst ein Bild in den (z.B. wie in 12.1 vorgeschlagenen) Ordner. Zu diesem Bild wird jetzt verlinkt. Das geht am Besten so:
Öffne einen beliebigen Film im Bearbeitungsfenster. Navigiere zu dem Button, auf den der rote Pfeil in der folgenden Abbildung zeigt. Klicke den Button und navigiere zu der Bilddatei in deinem Ordner. Der Link zum Bild wird nun im Feld neben dem Button angezeigt. Nicht abspeichern! Markiere den Link in die Zwischenablage und schließe das Bearbeitungsfenster wieder.

Abb.1


Nun den so erstellten Link aus der Zwischenablage in der Adresszeile eines Browsers einfügen und "Enter" drücken. Getestet habe ich das in Google Chrome. Das Bild erscheint im Browser, was uns zeigt, dass alles geklappt hat. Der Browser hat Leerzeichen und Sonderzeichen ersetzt und in einen lückenlosen html-tauglichern Link umgewandelt. Den jetzt aus der Adresszeile wieder kopieren und im Code an der richtigen Stelle zwischen den Hochkommas einsetzen. Der Code sieht dann ungefähr so aus:

Code [Auswählen] Erweitern

<img src='file:///C:/Users/Username/Pictures/Image.png'>
Das ist die Basis aller Bilderlinks. Ihr müsst künftig nur noch das, was ich im code oben "Image.png" genannt habe, durch den Namen des zu verlinkenden Images im Ordner ersetzen.


13 - Der Einsatz des unter 12.2 erstellten img-tags am Beispiel von Audio- und Video-Codecs

Einmal angenommen, ihr habt in eurer Film-Übersichtstabelle die relevanten Felder zusammenhängend zueinander sortiert und das Ganze sieht nun so aus wie auf Abb.2. Ihr hättet es aber gerne wie in Abb.3:

Abb.2 und Abb.3


Dann braucht ihr zunächst mal die Images. Hier sind sie:

Datei von filehorst.de laden

Ich nutze den Darkmodus. Deshalb sind die Bilder für den Darkmodus optimiert. Als ich sie zur eigenen Nutzung hergestellt habe, kam mir nicht in den Sinn, dass ich einmal einen Workshop anbieten würde. Ich kann hier leider nur anbieten, was ich habe.

Und ich habe nicht alle Typen als Image. Was bei mir nicht vorkommt, besitze ich leider nicht. Wer sich eigene Images herstellt, sollte darauf achten, dass Images gleichen Typs in etwa die gleichen Ausmaße haben.

Die Images müssen jetzt in den Ordner.

Weiter geht's am Beispiel "Videocontainer". Zur Veranschaulichung habe ich eine komplett neue MyMDb-CE geöffnet und davon einen Screenshot gemacht. Geht nun also in die Einstellungen, Text-Listen bearbeiten und wählt dort "Videocontainer" aus. Dort lasst bitte, wie auch in allen anderen Feldern, denen ihr Images hinzufügen wollt, die Voreinstellungen im Menü. Zum Einen, weil sie für Mediainfo gebraucht werden und zum Anderen, weil sie euch als Überschriften dienen. Denn die img-Tags sind zu lang, um später in den Auswahlfenstern komplett angezeigt zu werden. Ihr braucht die Überschriften, um den darunterliegenden Tag später auswählen zu können. So sieht es da aus:

Abb.4


Fügt nun bitte euer img-tag in das Eingabefeld ein. Den Namen des gewünschten Images (z.B. avi.png) einfügen, auf "hinzufügen" klicken und unter die richtige Überschrift schieben. So macht ihr das mit jedem Image. Fertig.

Wenn ihr jetzt einen Film als Datei auf eurer Festplatte oder von DVD auslest, was ihr genau da macht, wo ihr zuvor euren Bild-Link erstellt habt (siehe Abb.1), liest Mediainfo euch die Infos in die darunterliegenden Felder. Jetzt müsst ihr nur noch in den Feldern, in denen ihr img-tags eingefügt habt, den img-tag, der unter dem ermittelten Wert liegt, anklicken und euer Image ist ausgewählt.

Alles, was ich euch in diesem Kapitel erklärt habe, müsst ihr nur ein einziges mal machen. Einmal erstellt, immer verfügbar. Nur der allerletzte Punkt, nämlich die Auswahl der zur Überschrift gehörenden img-tags, fällt für jeden Film erneut an.

14 - Das neue Quick-Info

Wer es sich noch einfacher machen möchte, kann sich im Quickinfo alle Felder mit tags übersichtlich zueinander ordnen und dann in einem Rutsch alle Tags auswählen.

Abb.5


15 - Tipp:

Um auch ohne Auswahlmenü schnell auf ein img-tag zugreifen zu können, habe ich mich für ein Kachelsystem entschieden. Das heißt, dass ich per Default-Settings in allen betreffenden Feldern ein und die selbe Datei aufrufe. Dadurch ist der allround-tag immer schon im Feld. Will ich die Kachel jetzt durch ein Image ersetzen, muss ich nur noch den Namen der Bilddatei ändern.

Anstelle einer Kachel kann man auch ein komplett transparentes Bild einsetzen.

So sieht das bei mir aus. Dabei ist aber nur das Feld "Logo" ein einfaches Textfeld. Die beiden anderen sind Auswahl-Menüs. Vieles ist möglich:

Abb.6


Die ausgewählten Images passen nicht zu den Filmen. Ich habe sie nur zu Demonstrationszwecken so zusammengestellt.

16 - Hinweis:

Es kann Sinn machen, mehrere Images in einem Feld anzeigen zu wollen. Ich nutze das beispielsweise beim Audiocodec dts. Da gibt man dann folgendes ein:

Code [Auswählen] Erweitern

<img src='file:///C:/Users/Username/Pictures/dts1.png'><br><img src='file:///C:/Users/Username/Pictures/dts.png'>

Oder man möchte Text und img kombinieren, wie z.B. beim Videocodec AVC1, hinter dem sich der h264-Codec versteck:

Code [Auswählen] Erweitern

AVC1 <br><br><img src='file:///C:/Users/Username/Pictures/h264.png'>
Soviel für den Anfang. Viel Spass beim ausprobieren und nutzen. Ich freue mich auf euer Feedback.

Collo