HTML5-Tutorium: JavaScript: Hello World 02

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6

Musterlösung: index.html, index2.html (Git-Repository)

Anwendungsfälle (Use Cases)

Die Anwendungsfälle ändern sich gegenüber dem ersten Teil des Tutoriums nicht: Der einzige Anwendungsfall der Anwendung ist weiterhin die Begrüßung der ganzen Welt, sobald die Anwendung ausgeführt wird.

Allerdings soll die Begrüßung gefälliger gestaltet werden, indem das Layout der Begrüßungsseite verbessert wird. Zeichensatz, Schriftgröße, Zeilenabstand etc. werden geändert.

Erstellen eines neuen Projektes

Erstellen Sie im selben Ordner, in dem sich das Projekt HelloWorld01 befindet, ein neues Projekt HelloWorld02:

cd ..                                # Eltern-Ordner von HelloWorld01
mkdir HelloWorld02                   # Einen neuen Ordner erstellen.
cp -r ./HelloWorld01/* HelloWorld02  # Die Dateien von HelloWorld01 kopieren
                                     # (mit Ausnahme von .git)
ls -al HelloWorld02

Diese Befehle hätten Sie natürlich auch mit einem File-Browser ausführen können.

Öffnen Sie das neue Projekt in VSC und passen Sie den Wert des title-Elements im HTML-Header an (Hello World 02 anstelle von Hello World 01).

Überprüfen Sie, ob die Anwendung korrekt gestartet werden kann.

Falls dies der Fall ist, fügen Sie nun das neue Projekt in Ihr Git-Repository ein (analog zu Teil 1 des Tutoriums) und committen Sie (Commit Message „Files of HelloWorld01 copied and adapted“). Anschließend sollten Sie das Projekt mittels eines Git-push-Befehls auf den Git-Server kopieren.

Festlegen des Designs der Anwendung

Nun wird das Design der Anwendung verbessert. Die Überschrift soll in einem serifenlosen Font dargestellt werden, der Text des nachfolgenden Absatzes in einem serifenhaltigen.

Die ist kein CSS-Tutorium, daher wird nicht darauf eingegangen, wie ein geeigneter Font gewählt werden sollte. Wir überlassen das einfach dem jeweiligen Browser-Hersteller, indem wir die Pseudofonts „sans-serif“ und „serif“ angeben. Für Mac-User wird die Überschrift vermutlich in Helvetica gesetzt und für Windows-Benutzer in Arial.

Erstellen Sie eine CSS-Datei:

1. Klick auf das Dokument-Plus-Icon neben „HELLOWORD02“ des Dateibaums
2. Angabe des Namens „main.css“

Es wird eine neue leere Datei namens „main.css“ angelegt.

Fügen Sie in diese Datei folgenden CSS-Code ein:

h1 
{ 
  font-family: sans-serif;
}

p
{ 
  font-family: serif;
}

Achten Sie darauf, dass öffnende und zugehörige schließende Klammern stets übereinander oder in derselben Zeile stehen (Allman- oder BSD-Stil).

Wenn Sie andere Tutorien bearbeiten, Fachbücher lesen oder Voreinstellungen von Web-IDEs begutachten, werden Sie meist folgende Art der Formatierung entdecken („OTBS“, „One True Brace Style“, „Einzig wahrer Klammerstil“). Dieser Klammerstil ist sehr weit verbreitet, verstößt aber gegen die Regel, dass öffnende und zugehörige schließende Klammern stets übereinander oder in derselben Zeile stehen.

h1 { 
  font-family: sans-serif;
}

p { 
  font-family: serif;
}

Die Begründung lautet dann oft, dass dieser Code weniger Zeilen habe, als der obige Code. Das stimmt, lässt sich aber auch ohne Verletzung der Regel „Zusammengehörige Klammern befinden sich in derselben Spalte“ erreichen (Horstmann-Stil):

h1 
{ font-family: sans-serif;
}

p 
{ font-family: serif;
}

Anmerkung: Ein schöner Artikel von Cay Horstmann selbst zu diesem Thema: The Horstmann Brace Style

Im Falle von CSS-Code macht es keinen wirklichen Unterschied, welcher Konvention sie folgen. Im Falle von JavaScript rate ich jedoch davon ab, öffnende und schließende Klammern nicht in derselben Spalte zu notieren. Glauben Sie einem erfahrenen LISP-Programmierer (LISP ist die Sprache, bei der jeder nicht-atomare Programmcode durch Klammern umschlossen wird): Code ist wesentlich besser zu lesen, wenn öffnende und schließende Klammern übereinander stehen. Insbesondere Strukturfehler sind bei dieser Konvention wesentlich einfacher zu finden. Ob Sie die öffnende Klammer jeweils in einer eigenen Zeile schreiben oder nicht, ist dabei weniger wichtig.

Unabhängig davon, welche Klammernotation Sie bevorzugen, einigen Sie sich im Team bitte auf EINE Variante. Halten Sie diese Konvention strikt ein.

Glücklicherweise highlighten die meisten Editoren (wie beispielsweise der VSC-Editor) die zugehörige schließende oder öffnende Klammer, wenn man den Cursor auf (bzw. vor oder nach) eine öffnende oder schließende setzt. So erkennt man Strukturfehler auch dann, wenn man bei der Einrückung Fehler gemacht hat. Derartige Fehler sollte man allerdings möglichst schnell beheben, wenn man sie einmal entdeckt hat. Sonst entsteht unlesbarer Code.

Wenn Sie Ihre CSS-Datei fertiggestellt haben und die Anwendung erneut testen (d. h. die Datei „index.html“ im Browser vom VSC-Server laden), werden Sie feststellen, dass sich nichts geändert hat (auch wenn Sie den Reload-Button des Browsers drücken).

Sie können die CSS-Datei direkt im Browser laden (ersetzen sie in dem Browser-URI einfach „index.html“ durch „main.css“ und drücken Sie den Reload-Button), aber das hilft auch nichts. Ihnen wird daraufhin einfach der Inhalt des CSS-Datei vom Browser angezeigt.

Der Grund ist, dass der Browser beim Laden der HTML-Datei nicht weiß, dass er den Inhalt mit Hilfe der CSS-Datei layouten soll. Damit er dies weiß, muss folgende Zeile in den head-Bereich der HTML-Datei eingefügt werden:

<link rel="stylesheet" href="main.css"/>

Wenn Sie jetzt noch einmal Ihre Web-Anwendung testen, wird die Überschrift (evtl. nach einem Klick auf den Reload-Button des Browsers) tatsächlich in einer serifenlosen Schriftart dargestellt.

Sie können jetzt noch weitere Verbesserungen vornehmen: Anpassung der Schriftgröße, Anpassung des Abstandes zwischen Überschrift und Absatz, Anpassung der Schriftfarbe, des Seitenhintergrundes etc. pp.

Zum Beispiel:

html, body
{ height: 100%;
}

html
{ display: table;
  width:   100%;
}

body
{ display:          table-cell;
  text-align:       center;
  vertical-align:   middle;
  background-color: #C5EFFC; /* zartes Blau */
}

h1
{ font-family:    sans-serif;
  font-size:      160%;
  padding-bottom: 0;
  margin-bottom:  0;
}

p
{ font-family:    serif;
  font-size:      100%;
}

Spielen Sie mit den CSS-Attributen und testen Sie Ihre Anwendung.

Tipp: Mit der CSS-Regel

* { border: solid 1px red; }

können Sie sehr einfach den Effekt von Padding-Attribut-Werten überprüfen. Falls Sie Ränder um einige Ihrer Elemente zeichnen, sollten Sie

* { outline: solid 1px red; }

verwenden. Wenn Sie mit der Überprüfung fertig sind, sollten Sie diese Befehle allerdings wieder aus der CSS-Datei entfernen oder sie zumindest auskommentieren (/* .... */).

Wenn Sie schließlich mit dem Layout Ihrer Anwendung zufrieden sind, committen Sie sie (Commit Message: „Styling has been added.“) . Sorgen Sie mittels eines Git-push-Befehls dafür, dass die aktuelle Version Ihrer Anwendung vorsorglich auf den Git-Server kopiert wird.

Optimierung des Designs für mobile Endgeräte

Öffnen Sie die Web-Anwendung mit einem Smartphone. Leider geht das derzeit noch nicht. Da der Zugriff auf den VSC-Servers auf Ihrem Entwicklungsrechner eingeschränkt ist, müssen Sie Ihre Anwendung auf eine echten Web-Server legen, um mit einem anderen Device darauf zugreifen zu können. Als Mitglied der Hochschule Augsburg können Sie dazu Ihre HSA-Homepage verwenden.

Damit nicht alle Projektdaten auf den öffentlichen Web-Server übertragen werden, ist es sinnvoll in VSC einen Ordner web anzulegen und in diesem alle Dateien des Web-Auftritts zu verschieben, die öffentlich zugänglich sein sollen:

• Einen neuen Ordner web anlegen
• index.html und main.css selektieren und in diesen Ordner verschieben.

Nun können Sie den Web-Ordner in Ihr HSA-WWW-Homeverzeichnis kopieren (Achtung: Im Folgenden müssen Sie jeweils ACCOUNT durch Ihren RZ-Account ersetzen).

• Öffnen Sie das Terminal in WebStorm.
• scp -r web ACCOUNT@login.rz.hs-augsburg.de://www/ACCOUNT/hello_world_02 (Der Befehl scp hat dieselbe Aufgabe wie ftp, überträgt die Daten aber verschlüsselt: https://www.computerhope.com/unix/scp.htm)

Mit diesem Befehl haben Sie die Dateien index.html und main.css in den Ordner HelloWorld02 Ihres Web-Verzeichnisses kopiert.

Loggen Sie sich auf dem HSA-Server ein, und sehen Sie sich das Ergebnis an:

ssh -lACCOUNT login.rz.hs-augsburg.de
cd /www/ACCOUNT
ls -al
ls -al *
exit   # Oder CRTL+D

Öffnen Sie nun eine der folgenden URLs in einem Browser Ihrer Wahl:

• https://www.hs-augsburg.de/homes/ACCOUNT/hello_world_02/
• https://www.hs-augsburg.de/homes/ACCOUNT/hello_world_02/index.html

Dann sollten Ihnen Ihre zuvor erstelle HTML-Seite präsentiert werden.

Wenn Sie nun eine dieser URLs im Smartphone öffnen, werden Sie feststellen, dass die Schrift viel zu klein ist und der Begrüßungstext daher nur schwer gelesen werden kann. Der Grund ist, dass die mobilen Browser in der Regel genauso rendern wie stationäre Browser. Da der Bildschirm aber viel kleiner ist, erkennt man nicht mehr viel.

Unter Responsive Webdesign versteht man ein gestalterisches Paradigma, welches zum Ziel hat, eine Web-Site auf jedem möglichen Endgerät möglichst optimal les- und benutzbar darzustellen. Technische Basis ist hier vor allem CSS, aber natürlich auch HTML5 und JavaScript.

In unserem Fall reicht es, ein weiteres Meta-Tag in den HTML-Header einzufügen, das den Browser anweist, für die Darstellung der HTML-Body-Elemente eine Bühne zu verwenden, die genauso breit ist, wie das Fenster des Devices (PC, Tablet im Querformat, Smartphone im Hochformat etc.) .

<meta name    = "viewport"
      content = "width=device-width, initial-scale=1.0, user-scalable=yes"
>

Darüber hinaus wird dem Browser mitgeteilt, das der Benutzer die Größe ändern kann (per Touchgeste). Initial beträgt die Größe 100% (= 1,0).

Testen Sie die Anwendung erneut:

• scp -r web/* ACCOUNT@login.rz.hs-augsburg.de://www/ACCOUNT/hello_world_02

Achtung: Da auf dem HSA-Server der Ordner /www/ACCOUNT/hello_world_02 bereits existiert, müssen Sie diesmal (und auch zukünftig) beim SCP-Befehl web/* an Stelle von web schreiben. Damit kopieren Sie den Inhalt des Ordners web in den Ordner /www/ACCOUNT/hello_world_02. Beim ersten Mal hatten Sie den gesamten Ordner web (samt Inhalt) auf den HSA-Server kopiert und dort unter dem neuen Namen /www/ACCOUNT/hello_world_02 abgelegt. Die Option -r steht für <emph>rekursive Kopie</emph>. Das heißt, nicht nur web, sondern auch alle seinen Kind-, Enkel-, Urenkel-, ... Dateien und Ordner werden kopiert.

Wenn alles funktioniert, committen und pushen Sie sie (Commit Message: „Support for mobile devices added.“) .

Aufräumen des öffentlichen Web-Servers

Wenn Sie mit der Optimierung des Designs für mobile Endgeräte fertig sind, sollten Sie die Testdaten auf dem öffentlichen Web-Server löschen (Vergessen Sie nicht ACCOUNT jeweils durch Ihren RZ-Account zu ersetzen):

• Öffnen Sie das WebStorm-Terminal.
• ssh ACCOUNT@login.rz.hs-augsburg.de

Mit diesem Befehl loggen Sie sich auf dem Benutzerserver der Hochschule Augsburg ein. Ab sofort werden alle Befehle, die Sie ins WebStorm-Terminal tippen, direkt von der Unix-Bash des Hoschulrechners ausgeführt.

• cd /www/ACCOUNT (Wechseln Sie ins Root-Verzeichnis Ihres Web-Auftritts)
• ls -al (Listen Sie alle Dateien auf, die dort liegen.)
• rm -rf HelloWorld02 (Löschen den Ordner, den Sie zuvor mittels scp hierher kopiert haben.)
• rm EINE_DATEI (Löschen Sie Dateien, die Sie nicht mehr benötigen.)
• rm -rf EIN_ORDNER (Löschen Sie weitere Ordner, die Sie nicht mehr benötigen.)
• exit (Verlassen Sie den Hochschulserver)

Ab sofort werden alle Befehle, die Sie ins WebStorm-Terminal tippen, wieder von der lokalen shell Ihres Rechners ausgeführt.

Fortsetzung des Tutoriums

Sie sollten nun Teil 3 des Tutoriums bearbeiten.

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)