HTML5-Tutorium: JavaScript: Hello World 02

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Wechseln zu:Navigation, Suche

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 MMProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4

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

1 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.

2 Erstellen eines neuen Projektes

Erstellen Sie im selben Ordner wie das Projekt HelloWorld01 ein neues Projekt HelloWorld02:

  1. Öffnen Sie das Projekt HelloWorld01 in WebStorm.
  2. FileNewProject...Empty Project
  3. Tragen Sie den korrekten Projektpfad (mit dem Namen HelloWorld02 anstelle von untitled am Pfadende) im Feld Location ein.
  4. CreateNew Window
  5. Kopieren Sie die Datei https://glossar.hs-augsburg.de/beispiel/tutorium/2018/.gitignore in das Wurzelverzeichnis Ihres Web-Projektes und speichern Sie sie unter dem Namen .gitignore (mit einem Punkt als erstes Zeichen).

Fügen Sie nun das neue Projekt in Ihr Git-Repository ein (analog zu Teil 1 des Tutoriums) und committen Sie (vergessen Sie nicht die Commit Message „Project HelloWorld02 created.“). Anschließend sollten Sie das Projekt mittels eines Git-push-Befehls auf den Git-Server kopieren.

Kopieren Sie die Datei index.html (und, falls Sie das möchten, auch die Lizenzdatei) aus dem WebStorm01-Projekt in das WebStorm02-Projekt. Das können Sie entweder mit dem Dateibrowser Ihrer Wahl machen oder Sie legen die WebStorm-Fenster der Projekte HelloWorld01 und HelloWorld02 nebeneinander, markieren und kopieren index.html im ersten Projekt und fügen es in den Dateibaum des zweiten Projektes ein.

Passen Sie den Wert des title-Elements im HTML-Header an (HelloWorld02 anstelle von HelloWorld01).

Überprüfen Sie, ob die Anwendung korrekt gestartet werden kann (Test). Falls dies der Fall ist, committen Sie die neue Anwendung (Commit Message: „Files of HelloWorld01 copied.“)

3 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. Rechtsklick auf die Wurzel „HelloWorld02“ des Dateibaums → NewStylesheet
  2. Name: main.cssOK

Es wird eine neue (diesmal 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. Wenn Sie andere Tutorien bearbeiten, Fachbücher lesen oder Voreinstellungen von Web-IDEs begutachten, werden Sie meist folgende Art der Formatierung entdecken, die gegen diese Regel verstößt:

/* *** DON'T DO IT THAT WAY!!!! *** */

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:

h1 
{ font-family: sans-serif;
}

p 
{ font-family: serif;
}

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.

Glücklicherweise highlighten die meisten Editoren (wie beispielsweise die WebStrom-Editoren) 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.)

Wenn Sie Ihre CSS-Datei fertiggestellt haben und die Anwendung erneut testen (d. h. die Datei „index.html“ im Browser vom WebStorm-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 for web app was added.“) . Sorgen Sie mittels eines Git-push-Befehls dafür, dass die aktuelle Version Ihrer Anwendung vorsorglich auf den Git-Server kopiert wird.

4 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 WebStorm-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 WebStorm einen Ordner web anzulegen und in diesem alle Dateien des Web-Auftritts zu verschieben, die öffentlich zugänglich sein sollen:

  • Rechtsklick auf HelloWorld02 im Dateibaum von WebStorm → NewDirectory
  • web eintragen → OK
  • 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/HelloWorld02 (Antworten Sie auf die eventuell erscheinende Frage, ob Sie fortfahren wollen, mit yes. 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-Verzeichnises kopiert. Öffnen Sie nun eine der folgenden URLs in einem Browser Ihrer Wahl:

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 nicht vergessen!). Wenn alles funktioniert, committen und pushen Sie sie (Commit Message: „Support for mobile devices added.“) .

5 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.

6 Fortsetzung des Tutoriums

Sie sollten nun Teil 3 des Tutoriums bearbeiten.

7 Quellen

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