nächste
Seite|
Programmfenster für
Web-Seiten (Teil 1) Die Ausführungen der
vorherigen Seiten über Programmfenster werden hier weitergeführt. Zunächst erstellt man einen Ordner ~/Bla/Web in dem das Projekt abgelegt wird mit Unterordnern seiten (in denen Einzelseiten abgelegt werden) bilder (in denen Bild-Dateien abgelegt werden) |
| mkdir -p ~/Bla/Web/{seiten,bilder} |
| In der Regel wird in ~/Bla/Web eine Datei index.htm abgelegt, die als Startseite für das ganze Projekt dient (später). Jetzt wird eine erste Seite erzeugt. |
|
echo "<html> <head> <meta charset="windows-1252"> <title> Projekt </title> </head> <body> Über mögliche Änderungen nachdenken. <br>Dieser Text ist im Browser-Fenster zu sehen. </body> </html>" > ~/Bla/Web/seiten/page001.htm |
|
Nun kann man diese erste
Seite im firefox-Browser (oder einem anderen Browser) öffnen, entweder
mit firefox ~/Bla/Web/seiten/page001.htm oder durch Doppelklick auf die Datei |
|
Einfach ausgedrückt ist eine Web-Seite nur
eine Text-Datei, die dem Browser Anweisungen gibt. Diese Anweisungen
werden durch die Klammern-Objekte <...> erteilt, die man Tags nennt.
In der Regel gibt es ein Anfangs-Tag <...> und ein End-Tag
</...> und alles was dazwischen steht ist von der Anweisung dieses
Tags betroffen. Die Tatsache, daß es sich um eine Web-Seite handelt ist eine Anweisung, die durch die Tags <html> und </html> erteilt wird. Deshalb muß am Anfang der Textdatei <html> und am Ende der Textdatei </html> stehen. Die Tags <head> und </head> schließen einen Bereich ein, der im Browser-Fenster nicht zu sehen ist. Die Anweisung <title> und </title> umschließt den Text der in der Titelzeile des Browsers zu sehen ist und der in der Liste der bereits besuchten Web-Seiten angezeigt wird. Die Tags <body> und </body> schließen den Bereich ein, der im Browser-Fenster sichtbar ist. Der Tag <br> erzeugt einen Zeilenumbruch und benötigt kein End-Tag. Man sieht daß die Umlaute nicht so dargestellt werden wie man sich das wünscht. Umlaute (und ß) sollten auf Webseiten in folgender Form geschrieben werden Ü Ü Ä Ä Ö Ö ü ü ä ä ö ö ß ß Also muß man ein wenig über Zeichenänderungen im Terminal wissen. Hier einige wenige Infos zum Programm sed Zeichenfolge bearbeiten Es gibt das Programm sed das oft in der Form aufgerufen wird |
|
Dabei steht das s für
substitute und das g bewirkt daß jede Stelle mit 'alter Text' bearbeitet
wird - ohne g wird nur das erste Auftreten von 'alter Text' in jeder
Zeile bearbeitet. Man definiert die Variable sA=123456789AbC987654321 Möchte man ein spezielles Zeichen löschen, hier b |
| echo $sA | sed 's/b//g' |
|
123456789AC987654321 Jedes vorkommende b wird damit gelöscht. Möchte man ein spezielles Zeichen durch ein anderes ersetzen, hier b durch Z |
| echo $sA | sed 's/b/Z/g' |
|
123456789AZC987654321 anderes Beispiel |
| echo $sA | sed 's/AbC/XYX/g' |
|
123456789XYX987654321 Löschen aller Zahlen von 4 bis 9 |
| echo $sA | sed 's/[4-9]//g' |
|
123AbC321 Definiert man jetzt die Variable gG=/Bla/Web/seiten/page001.htm und man möchte / durch \ ersetzen, so muß man beide Zeichen maskieren (mit dem Funktionszeichen \ in ein normales Textzeichen verwandeln), also \/ durch \\ ersetzen, was zu folgendem Ausdruck führt echo $gG | sed 's/\//\\/g' \Bla\Web\seiten\page001.htm Der Ausdruck bei sed ist sehr unübersichtlich. Man kann die Trennzeichen bei sed anders wählen um eine bessere Lesbarkeit zu erreichen echo $gG | sed 's:\/:\\:g' echo $gG | sed 's|\/|\\|g' echo $gG | sed 's#\/#\\#g' führt zum gleichen Ergebnis Die Tatsache daß bei den End-Tag-Elementen der html-Notation auch / als Zeichen auftritt (und es auch noch in den Pfadangaben vorkommt) legt es dringend nahe das Trennzeichen bei sed zu ändern - es wurde | gewählt, denn : kann im body-Text vorkommen und # erscheint bei Farb-Codes. Auch der Punkt hat eine Sonderbedeutung. Man muß ihn entweder maskieren oder als Zeichenklasse definieren sed 's|\.||g' sed 's|[.]||g' Nach dem Buchstaben A einen Zeilenumbruch machen |
| echo $sA | sed 's|A|&\n|g' |
|
123456789A bC987654321 Damit kann man nun Umlaute ersetzen. Das letzte Beispiel mit dem Zeilenumbruch hat gezeigt daß das Zeichen & eine Funktion hat. Daher muß man alle vorkommenden & im Terminal maskieren die Umlaute-Bezeichnungen für die Web-Seite betreffen. Es wird zum Verdeutlichen eine Variable definiert szUMLAUTE=äüöÄÜÖß echo $szUMLAUTE äüöÄÜÖß Nun führt man eine Ersetzung durch |
| echo $szUMLAUTE | sed 's|ü|\ü|g' | sed 's|ä|\ä|g' | sed 's|ö|\ö|g' | sed 's|Ü|\Ü|g' | sed 's|Ä|\Ä|g' | sed 's|Ö|\Ö|g' | sed 's|ß|\ß|g' |
|
äüöÄÜÖß Diese ''eigenartigen'' Zeichenfolgen werden durch den Browser dann wieder in die Umlaute übersetzt. Im Terminal kann man den Text von page001.htm wieder aufrufen durch |
| cat ~/Bla/Web/seiten/page001.htm |
|
<html> <head> <title> Projekt </title> </head> <body> Über mögliche Änderungen nachdenken. <br>Dieser Text ist im Browser-Fenster zu sehen. </body> </html> Nun definiert man eine Variable mit den Änderungen |
| nN=$(cat ~/Bla/Web/seiten/page001.htm | sed 's|ü|\ü|g' | sed 's|ä|\ä|g' | sed 's|ö|\ö|g' | sed 's|Ü|\Ü|g' | sed 's|Ä|\Ä|g' | sed 's|Ö|\Ö|g' | sed 's|ß|\ß|g') |
| und überschreibt die page001 |
| echo $nN > ~/Bla/Web/seiten/page001.htm |
| Wählt man jetzt im Browser
bei der page001.htm Aktuelle Seite neu laden so ist alles so wie es sein sollte. |
|
Mit " statt ' bei sed
kann man auch Variablen verwenden. Weitere Variable N="<br>" echo $sA | sed "s|AbC|$N|g" 123456789<br>987654321 Eine weitere besondere Funktion hat das Zeichen & noch in der Ersetzungszeichenkette. Die Zeichenkette alter Text wird nicht ersetzt, sondern ergänzt: nach & stehende Zeichen werden hinten angefügt, vor & stehende Zeichen werden davor gesetzt. |
| echo $gG | sed "s|seiten|$N&$sA|g" |
|
/Bla/Web/<br>seiten123456789AbC987654321/page001.htm Die Tags werden auf der Web-Seite nicht angezeigt, sie dienen nur als Anweisungen für den Browser. Möchte man diese auf der Web-Seite sichtbar machen (etwa für Erläuterungen) so muß man verwenden < < > > & & Will man den <body>-Bereich mit weiterem Text ergänzen so schreibt man diesen Text in eine Variable (allerdings darf der eingefügte Text das Zeichen | nicht enthalten, da es sonst mit dem gewählten Trennzeichen von sed in Konflikt geraten würde und im Text vorkommendes & muß maskiert werden). |
| nT=$(echo "<br>üÄö<br>Man erreicht mit<br>\<br\><br>einen Zeilenumbruch") |
| Dann bildet man eine weitere Variable die den alten Text aufnimmt und mit der Ergänzung kombiniert (Umlaut-Änderungen nicht vergessen) |
| nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g" | sed 's|ü|\ü|g' | sed 's|ä|\ä|g' | sed 's|ö|\ö|g' | sed 's|Ü|\Ü|g' | sed 's|Ä|\Ä|g' | sed 's|Ö|\Ö|g' | sed 's|ß|\ß|g') |
| Dann wird page001.htm überschrieben |
| echo $nTT > ~/Bla/Web/seiten/page001.htm |
|
Wählt man jetzt im Browser
bei der page001.htm Aktuelle Seite neu laden so sieht man den ergänzten Text. |
| Nun soll ein Bild auf page001 eingefügt werden. Da für Web-Seiten die Bildformate .gif und .jpg dringend zu empfehlen sind wurden nur diese beiden Formate zur Auswahl zugelassen. Rückgabewert für folgendes Fenster |
| szB=$(zenity --file-selection --file-filter='*.gif *.jpg' ); echo $szB |
|
/home/abc/Bla/Nur/BlaBla/Oder/bsp55r.gif Hier wurde ein Bild ausgewählt das auf der Seite Debian Gnome ImageMagick GIF erzeugt wurde. Sie haben wahrscheinlich ein anderes Bild gewählt. Nun soll dieses Bild in den Ordner ~/Bla/Web/bilder kopiert werden. |
| cp "$szB" ~/Bla/Web/bilder |
| Die Verlinkung des Bildes auf der Seite page001.htm muß aber mit relativen Pfaden erfolgen, denn nach Übertragung des kompletten Inhaltes des Ordners ~/Bla/Web auf einen Server gibt es keine Ordner Bla oder Web mehr und schon gar keinen Persönlicher Ordner. Also braucht man zunächst den Namen der Bild-Datei. Dazu wird der Name vom Pfad getrennt |
| szBN=$(echo ${szB##*/}); echo $szBN |
|
bsp55r.gif und man braucht die Bildgröße. Dazu verwendet man ImageMagick szBREIT=$(convert "$szB" -flatten -format '%w' info: ); echo $szBREIT 30 szHOCH=$(convert "$szB" -flatten -format '%h' info: ); echo $szHOCH 30 Dann schreibt man den html-code für ein Bild |
| nT=$(echo "<p style="text-align:left"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p>") |
| Dann bildet man eine weitere Variable die den alten Text aufnimmt und mit der Ergänzung kombiniert (Umlaut-Änderungen braucht man an dieser Stelle nicht) |
| nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g") |
| Dann wird page001.htm überschrieben |
| echo $nTT > ~/Bla/Web/seiten/page001.htm |
|
Wählt man jetzt im Browser
bei der page001.htm Aktuelle Seite neu laden so sieht man das eingefügte Bild. |
 |
| Nun kann man schon ein kleines Script schreiben: |
| nano ~/Bla/scWEB.sh |
| Eingabe in den Editor: |
|
#!/bin/bash szR=101 while [ $szR -ne 105 ] do xmessage -fn '-*-*-*-r-*--25-0-0-0-p-*-iso8859-1' -title "Web-Seiten-Projekt" -center -buttons "Text links,Text mittig,Bild links,Bild mittig,Fertig" "Text oder Bild in page001.htm einfuegen" szR=$? if [ $szR -eq 101 ]; then szTR=$(zenity --entry --ok-label "Einfügen" --title "Texteingabe" --text " Das Zeichen | \n darf nicht vorkommen" --entry-text "gewünschter Text" ) nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|<p style="text-align:left">$szTR</p>&|g" | sed 's|ü|\ü|g' | sed 's|ä|\ä|g' | sed 's|ö|\ö|g' | sed 's|Ü|\Ü|g' | sed 's|Ä|\Ä|g' | sed 's|Ö|\Ö|g' | sed 's|ß|\ß|g') echo $nTT > ~/Bla/Web/seiten/page001.htm elif [ $szR -eq 102 ]; then szTR=$(zenity --entry --ok-label "Einfügen" --title "Texteingabe" --text " Das Zeichen | \n darf nicht vorkommen" --entry-text "gewünschter Text" ) nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|<p style="text-align:center">$szTR</p>&|g" | sed 's|ü|\ü|g' | sed 's|ä|\ä|g' | sed 's|ö|\ö|g' | sed 's|Ü|\Ü|g' | sed 's|Ä|\Ä|g' | sed 's|Ö|\Ö|g' | sed 's|ß|\ß|g') echo $nTT > ~/Bla/Web/seiten/page001.htm elif [ $szR -eq 103 ]; then szB=$(zenity --file-selection --file-filter='*.gif *.jpg' ) cp "$szB" ~/Bla/Web/bilder szBN=$(echo ${szB##*/}) szBREIT=$(convert "$szB" -flatten -format '%w' info: ) szHOCH=$(convert "$szB" -flatten -format '%h' info: ) nT=$(echo "<p style="text-align:left"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p>") nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g") echo $nTT > ~/Bla/Web/seiten/page001.htm elif [ $szR -eq 104 ]; then szB=$(zenity --file-selection --file-filter='*.gif *.jpg' ) cp "$szB" ~/Bla/Web/bilder szBN=$(echo ${szB##*/}) szBREIT=$(convert "$szB" -flatten -format '%w' info: ) szHOCH=$(convert "$szB" -flatten -format '%h' info: ) nT=$(echo "<p style="text-align:center"><img border="0" src="../bilder/$szBN" width="$szBREIT" height="$szHOCH"></p>") nTT=$(cat ~/Bla/Web/seiten/page001.htm | sed "s|</body>|$nT&|g") echo $nTT > ~/Bla/Web/seiten/page001.htm else exit fi done |
|
Alle oben beschriebenen
Kommandos wurden hier den Schaltflächen von xmessage zugeordnet und
schließlich alles in eine while-Schleife gepackt, damit xmessage gleich
wieder seine Schaltflächenauswahl präsentiert. -ne 105 bedeuted, daß
die Schaltfläche Fertig NICHT gedrückt wurde (ungleich 105).
Und damit die while-Schleife starten kann wurde irgendein Anfangswert ungleich
105 an den Anfang gesetzt. Nun muß man das Programm ausführbar machen |
| chmod +x ~/Bla/scWEB.sh |
| Aufruf des Programmes |
| ~/Bla/scWEB.sh |
|
Die Zeichen | und &
dürfen bei der Text-Einfügung nicht verwendet werden da es sonst zu
einem Konflikt mit sed kommt. Man könnte nachträglich die Webseite mit
einem Texteditor, z.B. gedit, öffnen und diese Zeichen einfügen. Auf der nächsten Seite wird das Projekt zum Erstellen von Webseiten weitergeführt. |
