HTML5-Tutorium: JavaScript: Hello World 02

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 (SVN-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 wie das Projekt „HelloWorld01“ ein neues Projekt „HelloWorld02“:

1. Öffnen Sie das Projekt „HellowWorld01“ in WebStorm.
2. File → New → Project... → Empty Project
3. Tragen Sie den korrekten Projektpfad (mit dem Namen „HelloWorld02“ anstelle von „untitled“ am Pfadende) in dem Feld „Location“ ein.
4. Create → New Window

Fügen Sie nun das neue Projekt in Ihr Subversion-Repository ein (analog zu Teil 1 des Tutoriums) und committen Sie (vergessen Sie nicht die Commit Message „Project HelloWorld02 created.“).

Kopieren Sie die Datei „index.html“ 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.“)

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 → New → Stylesheet
2. Name: main.css → OK

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" type="text/css" 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.“) .

Optimierung des Designs für mobile Endgeräte

Öffnen Sie die Web-Anwendung mit einem Smartphone. 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. Falls Sie am Praktikum zur Lehrveranstaltung MMProg teilnehmen, liegt Ihre Anwendung bereits auf einem externen Server: in Ihrem Subversion-Repository. Sie brauchen also nichts weiter zu machen, als zunächst den folgenden URI in Ihrem Smartphone zu öffnen (wobei Sie „ACCOUNT“ durch Ihren RZ-Account ersetzen müssen):

https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT

Öffnen Sie dann der Reihe nach alle Unterordner, bis Sie die Datei „index.html“ des Projektes „HelloWorld02“ finden. Wenn Sie sich an die Vorgaben des Tutoriums gehalten haben, wären das zunächst der Ordner „mmprog“, dann „hello_world“ und schließlich „HelloWorld02“.

Wenn Sie nun die Datei „index.html“ ö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).

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

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)