Neuigkeiten: Wie können Bilder zu Beiträgen hinzugefügt werden: Das und mehr in FAQ.

  • 11. Dezember 2024, 08:01:09

Einloggen mit Benutzername, Passwort und Sitzungslänge

Autor Thema: Tutorial: HTML-Synthesevorschriften für LambdaSyn erstellen  (Gelesen 29696 mal)

Mephisto

  • Chemicus Diabolicus
  • Administrator
  • *****
  • Beiträge: 1.730
  • Karma: 0
    • Die deutschsprachige Synthesensammlung
Die folgende Anleitung zeigt, wie eine Synthesevorschrift im LambdaSyn Layout als HTML-Datei erstellt werden kann. Der Hintergrund dazu war die ins stocken geratene Aufnahme der Synthesevorschriften aus dem Forum in die statische Synthesensammlung. Nach dieser Anleitung erstellte Synthesen können binnen kurzer Zeit auf unserer Seite veröffentlicht werden.

Das Vorgehen zum Veröffentlichen eigener Synthesevorschriften umfasst die Schritte:
  • 1.   Erstellung eines Forenbeitrags mit der Synthese (im Idealfall dokumentiert durch Fotos) im Bereich Synthese-Diskussion
  • 2.   Diskussion und Begutachtung im Forum (jetzt können inhaltliche Fehler korrigiert werden)
  • 3.   Erstellung der HTML-Datei

Vorkenntnisse in HTML werden nicht benötigt. Autoren werden bei Problemstellungen unterstützt und Fehler korrigiert. Fertige HTML-Synthesevorschriften können im Thread "Aufnahme von Synthesevorschriften in den statischen Teil von Lambdasyn" eingereicht werden.



Tutorial: HTML-Synthesevorschriften für LambdaSyn erstellen

Alle Dateien aus dem Beispiel sind in folgendem ZIP-Archiv zu finden. Zur besseren Nachvollziehbarkeit kann jeder Schritt selbst durchgeführt werden. Zudem ist der folgende Text dort auch als PDF zu finden.

www.lambdasyn.org/upload/synfiles.zip

Zuerst bitte die ZIP-Datei entpacken. In diesem Ordner "synfiles" befinden sich neben ein paar "Systemdateien" für die Darstellung (CSS und JS-Galerie) die Vorlagen für Synthesen und Extraktionen.

vorlage-synthese-ohne-fotos.htm
vorlage-synthese-mit-fotos.htm
vorlage-fuer-extraktionen.html


Der Ordner muss "synfiles" heißen, sonst funktionieren einige Dinge nicht mehr. Neue Dateien bitte immer klein und ohne Umlaute benennen.

Für die Bearbeitung einer HTM(L)-Datei, die Datei mit Rechtsklick anklicken, "Öffnen mit" und das WordPad auswählen. Auch der Windows-Editor oder zusätzliche HTML-Editoren sind dafür geeignet. Mein Favorit ist allerdings das WordPad, u.a. weil es auf jedem Windows-Rechner zu finden ist.


* attachment01.png (233.96 KB . 778x659 - angeschaut 1858 Mal)
Jetzt kann der HTML-Code bearbeitet werden. Für Anfänger mag es zuerst ungewohnt aussehen, aber wenn man sich die Datei länger ansieht erkennt man die Bereiche, in die eigener Text kommt.


* attachment02.png (61.45 KB . 809x784 - angeschaut 1849 Mal)
Schritt 1: Ersetzen von "XX" gegen den Namen der Verbindung zu der die Synthesevorschrift gehört. Also Strg+H und "XX" z.B. gegen "Benzylidenaceton" ersetzen -> Alle ersetzen.


* attachment03.png (10.45 KB . 364x201 - angeschaut 1705 Mal)
Schritt 2: Das gleiche mit der CAS-Nummer. Strg+H und "CAS" z.B. gegen " 122-57-6" ersetzen -> Alle ersetzen. Eine Zeile unter der CAS-Nummer wird die Summenformel eingetragen.

Schritt 3: Dort wo "Text." steht, ist Platz für die Synthesevorschrift und die Beschreibung der Substanz. Z.B. einfach aus Word den eigenen Text dort hineinkopieren. Sollte die Schriftart anders außen, ist das egal. Ob der Text in einer Zeile oder mehreren ist, ist hier auch egal. Es hat keinen Einfluss auf das spätere Aussehen des Textes. Will man extra einen Absatz (Zeilenumbruch) im Text einbauen, bedient man sich des Codes <br>.

Schritt 4: Unten in der Datei werden Quelle, Autor, Erstellungsdatum und synonyme Bezeichnungen der Verbindung eingetragen.


* attachment04.png (12.93 KB . 447x336 - angeschaut 1765 Mal)
Schritt 5: Die Datei wird gespeichert und mit Kleinbuchstaben und ohne Umlaute so bezeichnet, wie die Verbindung heißt. Also im Beispiel "benzylidenaceton.htm". Bindestriche, Kommata und Zahlen wie in systematischen Namen sind zulässig, aber es empfiehlt sich dann oft den meistverwendeten Trivialnamen zu verwenden.

Nun wird die neue Datei mit einem Browser geöffnet (meist reicht ein Doppelklick).


* attachment05.png (30.54 KB . 679x241 - angeschaut 1774 Mal)
So sieht das Zwischenergebnis aus:


* attachment06.png (61.68 KB . 905x874 - angeschaut 1756 Mal)
Für den Anfang nicht schlecht :-). Man sieht vor allem, dass noch eine Struktur der Verbindung fehlt. Im Folgenden werden einige Textformatierungen und eine Fotoübersicht eingefügt.

Schritt 6: Was in dem oberen Beispiel mit Benzylidenacteon fehlt, sind noch eine Struktur oder ein Reaktionsmechanismus. Dazu die Datei "benzyilidenaceton.cdx" öffnen (es wird ChemDraw oder ChemBioDraw benötigt) und die Struktur oder hier den Mechanismus zeichnen. Achtung: nicht zu sehr in die Breite zeichnen. Der Style entspricht dem für wissenschaftliche Publikationen gebräuchlichem ACS-Standard mit angepassten Größeneinstellungen für LambdaSyn.


* attachment07.png (106.45 KB . 686x603 - angeschaut 1724 Mal)
Die Datei "benzyilidenaceton.cdx" enthält Informationen zum Zeichnen von Strukturen im LambdaSyn Stil. Für eigene Dateien oder zum Umwandeln bestehender Strukturen in der LambdaSyn Stil wird die Datei "- LambdaSyn Style -.cds " in den Chemdraw-Items benötigt. Dazu die Datei bei Windows XP und Chemdraw 11 nach C:\Dokumente und Einstellungen\All Users\Anwendungsdaten\CambridgeSoft\ChemOffice2008\ChemDraw\ChemDraw Items kopieren. Bei Windows 7 und Chemdraw 12 nach C:\ProgramData\CambridgeSoft\ChemOffice2010\ChemDraw\ChemDraw Items (verstecktes Verzeichnis). Alternativ kann unter Windows 7 auch das Verzeichnis Chemdraw Items nochmals erstellt werden unter C:\Program Files (x86)\CambridgeSoft\ChemOffice2010\ChemDraw. Anschließend lässt sich der LambdaSyn Stil auswählen.


* attachment08.png (138.67 KB . 886x637 - angeschaut 1686 Mal)
Schritt 7: Datei -> Speichern als -> Dateiname (im Beispiel "benzylidenaceton01"), Dateiformat "PNG Image" (Options: Resolution 110), in ../synfiles/pictures


* attachment09.png (32.61 KB . 572x469 - angeschaut 1632 Mal)
Schritt 8: Die HTML-Synthesevorschrift mit dem WordPad öffnen (benzylidenacteon.htm). Dort befindet sich bereits eine Stelle für eine Struktur oder einen Mechanismus. Es müssen Höhe, Breite und der Dateiname eingetragen werden (gelbe Markierung).


* attachment10.png (38.99 KB . 978x378 - angeschaut 1644 Mal)
Die Breite und Höhe einer Grafik findet man bei den Dateieigenschaften unter dem Reiter "Dateiinfo".

Die Beispiel-Synthesevorschrift sieht nun wie folgt aus.


* attachment11.png (71.47 KB . 794x1039 - angeschaut 1769 Mal)
Optionale Formatierungen: Im Beispiel wird ein Absatz zum Reaktionsmechanismus eingefügt. Die folgenden zwei Screenshots zeigen beispielhaft HTML-Code für die Formatierungen fett, kursiv, Alpha und Beta (Sonderzeichen) und Hyperlink.


* attachment12.png (21.31 KB . 763x290 - angeschaut 1729 Mal)
Die Farbcodierung markiert die jeweiligen Formatierungen mit ihrem dazugehörigen HTML-Code.


* attachment13.png (25.29 KB . 702x465 - angeschaut 1620 Mal)
Die meistverwendeten Befehle sind <i>Text</i> für kursiven Text, <b>Text</b> für fettgedruckten Text, <br> für einen Zeilenwechsel und <a href="http://www.lambdasyn.org">LambdaSyn</a> für einen Hyperlink.

Sonderzeichen wie Alpha, Beta, usw. müssen mit ihrem HTML-Code in den Text eingebaut werden. Eine gute Übersicht über die Sonderzeichen bietet folgende Seite:

http://de.selfhtml.org/html/referenz/zeichen.htm

Zum Thema Fotos

Fotos müssen vor dem Einbinden in eine HTML-Syntheseanleitung in der Größe angepasst werden. Standartmäßig weisen alle Fotos im LambdaSyn-Projekt eine Größe von 1024x768 Pixeln in der Vollansicht auf. Falls gewünscht kann auch mit dem Hochformat 768x1024 Pixeln oder dem 3:2-Format gearbeitet werden (1152x768 Pixel).

Die kleinen Vorschaubilder (Thumbnails) in der Syntheseanleitung müssen separat aus den Originalfotos erstellt werden. Normalerweise verwenden wir dabei 173x130 Pixel große Thumbnails.

Es gibt unzählige Bildbearbeitungsprogramme, die sich für die Größenkonvertierung eignen. Das Beispiel zeigt die Verwendung des kostenlosen und sehr simplen Programms „Der grandiose Bildverkleinerer“. Es kann unter folgender Adresse kostenfrei heruntergeladen werden.
www.chip.de/downloads/Der-grandiose-Bildverkleinerer_42536802.html

In der Tutorial-Datei "synfiles.zip" sind einige fertige HTML-Code-Bausteine für verschiedene Arten der Foto-Einbindung enthalten, die in neue Syntheseanleitungen eingefügt werden können. Lediglich die Dateinamen der Bilder und die Bildbeschreibungen müsse angepasst werden.

Schritt 9: Man öffnet das Bildbearbeitungsprogramm, wählt die eigenen Fotos aus und verkleinert sie auf 1024x768 Pixel. Für die JPEG-Kompression empfiehlt sich einige Einstellung von 65-80%, sodass keine sichtbare Verschlechterung der Bildqualität eintritt. Separat werden die Fotos für die Vorschaubilder auf 173x130 Pixel verkleinert und ebenfalls abgespeichert. Wichtig ist der Speicherort: die Thumbnails speichert man nach ../synfiles/pictures – während die Fotos in ../synfiles/pictures/highres abgespeichert werden.


* attachment14.png (55.39 KB . 553x498 - angeschaut 1714 Mal)
Schritt 10: Die eingeführte Systematik bei der Dateibenennung fortführen: Name der Syntheseanleitung + fortlaufende Nummerierung + "-big.jpg" Endung bei Vollansichten bzw. "-thumb.jpg" bei den Vorschaubildern. Da im Beispiel bereits eine Strukturformel mit der Datei "benzylidenaceton01.png" existiert, erhalten die Fotos folgende Bezeichnungen.

benzylidenaceton02-big.jpg   benzylidenaceton02-thumb.jpg
benzylidenaceton03-big.jpg   benzylidenaceton03-thumb.jpg
benzylidenaceton04-big.jpg   benzylidenaceton04-thumb.jpg
benzylidenaceton05-big.jpg   benzylidenaceton05-thumb.jpg
benzylidenaceton06-big.jpg   benzylidenaceton06-thumb.jpg


Schritt 11: In der Datei "HTML-Bausteine-Fotogalerie.txt" wird ein HTML-Baustein für die Fotogalerie ausgesucht, der der Anzahl der vorhandenen Fotos entspricht. Diesen kopiert man in die Syntheseanleitung und fügt ihn an die Stelle, wo der Text der Durchführung endet: nach dem Code </p> und vor dem Text der Beschreibung des Eigenschaften, also vor <div class="infotxt">. XX im HTML-Baustein wird durch die Dateibenennung der Fotos ersetzt. "Beschreibung der Fotos" ersetzt man entsprechend durch eine individuelle Beschreibung des Fotos.

Und so sieht das fertige Beispiel aus:


* attachment15.png (171.34 KB . 804x1208 - angeschaut 1693 Mal)
« Letzte Änderung: 30. Mai 2014, 22:15:49 von Mephisto »
"Every breath you take, Every move you make,
Every bond you break, Every step you take,
I'll be watching you" - The Police


Entschuldigung, das Thema ist geschlossen. Nur Administratoren und Moderatoren können antworten.