Home · Info · Kontakt ·
Chemie »	Übersicht  | Sitemap

Autorin: Dr. Annemarie Honegger

• Schritt 1: Integration des Moleküls in eine Webseite
• Schritt 2: Kontrolle der Moleküldarstellung über Druckknöpfe (Buttons)
• Schritt 3 und 4: Begleittext und Kontrollelemente neben statt unter dem Chime-Fenster
• Schritt 4: Mehrere Chime-Fenster auf einer Webseite
• Schritt 5: Mehrere Chime-Fenster auf einer Webseite.
• Schritt 6: Spezielle Darstellungs-Optionen für Makromoleküle
• Schritt 7: Komplexere Darstellungen als externe Skript-Files aufrufen

   

• Keine Lust, im HTML-Kode herumzuwühlen? Kein Problem!

Zur bequemeren Erstellung von Internetseiten kann ein beliebiger HTML-Editor verwendet werden, zB können die Seiten im Composer-Modul des Netscape-Navigators editiert werden. Um die Chime-Aufrufe einzufügen, müssen die entsprechenden Angaben jedoch direkt im Quellencode der HTML-Seite eingefügt werden. Manche HTML-Editoren haben neben dem "What you see is what you get" - Modus (WYSIWYG) auch einen "Source-Editng" - Modus, sonst muss das HTML-File mit einem Text-Editor geöffnet werden. Im folgenden werde ich Schritt für Schritt anhand vom Beispiel-Seiten zeigen, wie man Chime-Moleküldarstellungen in eine Webseite integrieren kann.

Schritt 1: Integration der Moleküldarstellung in eine Webseite

Um eine eigene Chime-Seite zu erstellen, braucht man natürlich zuerst die 3D-Strukturen der Moleküle, die man zeigen will. Chime unterstützt verschiedene Formate:

Die am häufigsten verwendeten werden wohl das Brookhaven Protein Databank Format (.pdb), vor allem für Makromoleküle, und das MDL Molfile Format (.mol) für kleine Moleküle. Am einfachsten ist es, die Strukturen von den entsprechenden Datenbanken in Internet herunterzuladen.

Experimentelle Strukturen von Proteine und Nukleinsäuren findet man in der Brookhaven Protein Databank. Sie können als .pdb-Files heruntergeladen werden.

Sowohl .pdb wie .mol-Files liegen als ASCII-Text vor. Sie enthalten neben den Atomkoordinaten auch Kommentare. Es kann daher nützlich sein, sich diese Dateien auch einmal mit einem Text-Editor anzusehen. Mit Rasmol kann man sich die Strukturen anschauen und verschiedene Ansichten ausprobieren, bevor man sie in die Webseite einbaut. Einige der mit den RasMol Tutorials auf dieser CD verteilten Struktur-Datein sind komprimiert und deshalb nicht direkt lesbar. Wenn man sie jedoch mit RasMol öffnet und daraus wieder abspeichert, werden sie lesbar.

Aus der Webseite wird Chime mit dem <EMBED>-Tag aufgerufen.

Eine einfache Webseite, die ein einzelnes Molekül zeigt, sieht also so aus:

step01.html

Der Quellenkode dieser Seite kann mit "View Page Source" im Webbrowser angeschaut werden. Im File:

step01a.html

habe ich den Quellencode dargestellt, im File

step01b.html

kommentiert und zum besseren Verständnis den Text wie folgt angefärbt:

Blau sind HTML-Tags (HyperText Markup Language) angegeben. Sie steuern die Darstellung der Seite im Webbrowser.

Schwarz ist Text, der auf der Webseite erscheint

Rot sind die Kommandos, die die Moleküldarstellung mit Chime steuern

Grün sind Kommentare, die ich zur Erklärung beigefügt haben. Sie stehen nicht im Quellentext des Files step01.html

Schritt 2: Kontrolle der Moleküldarstellung über Druckknöpfe (Buttons)

In den erklärenden Text der HTML-Seite können Druckknöpfe () eingebettet werden, die , wenn sie angeklickt werden, Befehle an das Chime-Fenster übermitteln. Damit können einzelne Stellen des Moleküls hervorgehoben werden.

Unsere Webseite sieht nun so aus - klicken sie die Druckknöpfe mit der Maus an, und sehen sie, was geschieht.

step02.html

Das steht wirklich darin:

step02a.html

Quellentext mit Kommentar: (Nur Kommandos, die in step01b.html noch nicht kommentiert worden sind, sind in diesem File annotiert)

step02b.html

Schritt 3 und 4: Begleittext und Kontrollelemente neben statt unter dem Chime-Fenster

Da die meisten Bildschirme Querformat haben ist es besser, die Kommentare und Kontrollelemente seitlich neben dem Chime-Fenster anzuordnen. Dies kann auf unterschiedliche Weise realisiert werden:

• In einem einzigen HTML-Dokument, indem man das Chime-Fenster in eine Spalte einer Tabelle platziert, und die Kontrollelemente in eine andere Spalte

Beispiel:

step03a.html, step03b.html

 

• Indem man Chime-Fenster und Begleittext/Kontrollelemente auf separaten HTML-Dokumenten plaziert und diese mit einem "Frame"-Dokument zu einer Seite zusammenfasst. Das hat den Vorteil, dass man durch einen längeren Kommentartext hindurchscrollen kann, ohne die Moleküldarstellung aus dem Browser-Fenster hinauszuscrollen.

step04Frame.html, step04aFrame.html, step04bFrame.html

step04Controls.html, step04aControls.html

step04Chime.html, step04aChime.html

Schritt 5: Mehrere Chime-Fenster auf einer Webseite

Auf einer Webseite können mehrere Chimefenster plaziert werden. Da jedoch Chime für jedes dieser Fenster separat aufgerufen wird, erhöht dies den Arbeitsspeicher-Bedarf des Netzbrowsers. Da jedem Fenster ein eigener Name zugeordnet wird, können auch die Kontrolleelemente so definiert werden, das sie gezielt auf ein bestimmtes Fenster einwirken

step05.html, step05a.html, step05b.html

Schritt 6: Spezielle Darstellungs-Optionen für Makromoleküle

In kleinen Molekülen werden die Atome in der Regel mit ihrem Atomtyp oder ihrer AtomNr. individuell angesprochen, die Darstellungsoptionen beschränken sich entsprechend auf die Darstellung der Atome (cpk, spacefill on/off/radius) und der Bindungen (wireframe on/off/thickness)

Der grösseren Komplexität der Makromolküle wird durch die Abstraktionsmöglichkeiten in der Darstellung Rechnung getragen. So kann zB die Faltung einer Peptidkette oder einer Nukleinsäure dadurch hervorgehoben werden, dass man nur die Ca-Atome zeigt oder den Verlauf und die Geometrie der Kette als "ribbon"(Band) oder "cartoon" abstrahiert. Auch in der Selektion der Komponente eines makromolekularen Komplexes wird dem Rechnung getragen.

Im File step06.html , step06a.html, step06b.html wurden einige dieser Kontrollen in einer Tabelle zusammengefasst. Die gleichen Effekte können ebensogut über die Maus erreicht werden, aber für ungeübte Chime Benutzer kann die Kontrolle über Kontrollknöpfe einfacher sein. Die Befehle in dieser Tabelle sind, abgesehen von der Stoffklasse (Protein/Nukleinsäure/Hetero-Gruppen) nicht vom dargestellten Molekül abhängig. Natürlich können auch Molekül-abhängige Kontrollelemente eingeführt werden, zB Hervorhebung spezifischer Reste (active Site, Substrat, Koenzym)

Schritt 7: Komplexere Darstellungen als externe Skript-Files aufrufen

Für komplexere Darstellungen werden die im script="..."-Parameter des <EMBED>-Tags aufgeführten Befehle schnell unübersichtlich. Es ist daher einfacher, diese in einer Text-Datei übersichtlich darzustellen, und erst wenn sie gebraucht werden im script="..."-Parameter mit script="script Filename.spt" aufzurufen. .

step07.html demonstriert den Aufruf von Skripten. script0.spt zeigt ein solches Skript, das manuell erzeugt wurde. Es ist auch möglich, eine Darstellung interaktiv in Rasmol zu erzeugen und mit "write script Filename" als Chime-kompatibles Skript zu exportieren. Allerdings werden dabei die Auswahlbefehle in eine Liste von Atomnummern übersetzt, das so erzeugte Skript nur für die Strukturdatei gültig, mit der es erzeugt wurde und nicht übertragbar.

Keine Lust, im HTML-Kode herumzuwühlen? Kein Problem!

Laden Sie den Ordner "molmod_bsp" auf Ihre Festplatte: Download "molmod_bsp"

 

Ersetzen Sie die Molecule0.pdb, Molecule1.pdb, Molecule2.pdb ... etc. durch eine eigenen Koordinaten-Dateien.

 

Generieren Sie die entsprechenden Ansichten der Moleküle in Rasmol und speichern Sie diese mit "write script script0.spt", "write script script1.spt" bis "write script script9.spt" ab.

 

Öffnen Sie die Dateien "Structure.html" und "Controls.html" mit einem HTML-Editierprogramm (zB mit "Open Page in Composer" im Netscape Communicator und ändern Sie die Texte entsprechend den von Ihnen eingefügten Molekülen und Skripten. Nicht benützte Druckknöpfe können Sie einfach löschen.

 

Molekule0.pdb wird beim Öffnen der Datei "index.html" mit "Open Page in Navigator" im Netscape Communicator in das Chime-Fenster geladen und script0.spt darauf angewendet.

 

Ordner "dna-bind_proteine/index.html" und "proteasen/index.html"enthalten Beispiele für so abgeänderte Webseiten.

Beispiele:

Aminosäuren und Proteinstruktur

Antikörper-Struktur

Vitamine

Glukose (Traubenzucker)

Anomerie/ Mutarotation

Gal4-DNA

tRNA-Synthase

Strukturelle Vielfalt der Proteasen

DNS-Bindende Proteine

Weitere Tutorials werden auf der " Virtual Seminars"-Seite unserer Homepage zugänglich gemacht werden, sobald sie verfügbar sind.

Handbücher:

Netscape HTML Tag Reference

Netscape -Javascript Reference

Letzte Änderung: 29.04.2005 · © SwissEduc-Team

Hosted by Metanet