HTML5-Tutorium: JavaScript: Hello World 01: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenz
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
 
(153 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{In Bearbeitung}}
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/html5_javascript_hello_world_01/index.html <code>index.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/html5_javascript_hello_world_01/ SVN-Repository])
==Ziel==
Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment, Integrierte Entwicklungsumgebung)
[[WebStorm]] eine Web-Anwendung bestehend aus einem [[HTML]]-Dokument samt zugegörigem [[CSS]]-Dokument
erstellt.


Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt.
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2024/wk_hello_world/wk_hello_world_01/index.html <code>index.html</code>] ([{{Git-Server}}/kowa/wk_hello_world_01.git Git-Repository], [https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2024%2Fwk_hello_world%2Fwk_hello_world_01%2Findex.html HTML validate])


==WebStorm vorbereiten==
==Ein neues Projekt erstellen==


Zur Erstellung der Anwendung wird [[Installation von WebStorm|WebStorm]] eingesetzt.
* Erstellen Sie unter einem sinnvollen Pfad auf Ihrem Rechner einen neuen Ordner ({{zB}} <code>.../webprog/hello_world/hello_world_01</code>
Zunächst müssen Sie diese IDE  [[Installation von WebStorm|installieren und konfigurieren]]. Es handelt sich um eine kommerzielle
* Visual Studio Code (VSC) starten
Software, aber als Student erhalten Sie eine kostenlose Lizenz.
* Öffnen Sie den neu erstelltenOrdner in VSC: <code>File</code> → <code>Open Folder</code>


==WebStorm starten==
Links in VSC sehen Sie ein Icon bestehend aus zwei übereinander liegenden Papierblättern. Wenn Sie darauf klicken, sehen einen Dateibaum mit dem soeben geöffneten Ordner. Er enthält noch noch keine Dateien.


Nach dem Starten der IDE sehen Sie ein Menü mit drei Alternativen, ein Projekt zu bearbeiten: Sie können
Der Ordnernamen wird mit Großbuchstaben dargestellt. Wenn Sie die Maus über diesen Ordnernamen bewegen, erscheinen Icons zum Erzeugen von Dateien und Ordnern (sowie zwei weitere Icons). Erstellen Sie eine HTML-Datei <code>index.html</code>.
eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem
Versionsverwaltungstool laden (check out) und öffnen.  


Sie werden zunächst die dritte Möglichkeit nutzen, um die Musterlösung zu dieser Tutoriumsaufgabe herunterzuladen.
==Die HTML-Datei mit Inhalten füllen==
Anschließend erstellen Sie ein neues Projekt, das dieselbe Aufgabe erfüllt, wie die Musterlösung.
 
==Die Musterlösung herunterladen==


Starten Sie WebStorm und klicken Sie auf <code>Check out from Version Control</code>.
Im nächsten Schritt wird die HTML-Datei mit Inhalten gefüllt:
Es öffnet sich ein Drop-Down-Menü mit diversen Versionsverwaltungssystemen ([[GitHub]], [[CVS]], [[Git]], [[Mercurial]] und [[Subversion]]) .
Sie wählen <code>Subversion</code> aus.
 
'''Anmerkung''': <i>Ich weiß, dass [[Git]] viel „cooler“ und „mächtiger“ ist als [[Subversion]]. Wenn Sie kein
Teilnehmer der an der Lehrveranstaltung [[https://glossar.hs-augsburg.de/Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|Multimedia-Programmierung]]
sind, können Sie an Stelle von Subversion gerne [https://github.com/ GitHub] oder ein anderes Versionsverwaltungssystemen, auf das Sie Zugriff haben, verwenden,
um Ihre Projekte zu verwalten. (Sie können sogar ganz darauf verzichten und Ihre Tutoriumslösungen nicht in einem
Versionsverwaltungssystem sichern. Davon rate ich aber ab.)
Im Praktikum zur Lehrveranstaltung wird jedoch Subversion verwendet, da die Administration von Dutzenden
von Subversion-Accounts für den Dozenten wesentlich einfacher ist.</i>
 
==Ein neues Projekt erstellen==
 
Starten Sie WebStorm und klicken Sie auf <code>Create New Project</code>.
Wählen Sie im linken Frame der Seite, die sich geöffnet hat, <code>Empty Project</code>,
wählen Sie im Feld <code>Location</code> einen sinnvollen Pfad aus, wo auf Ihrem
Rechner Sie das Projekt speichern wollen ({{zB}} <code>.../mmprog/HelloWorld/HelloWorld01</code>)
und klicken Sie anschließend auf <code>Create</code>.
 
Links sehen Sie nun ein senkrechtes Menü mit zwei Menüpunkten <code>Structure</code>
und <code>Project</code>. Klicken Sie auf <code>Project</code>. Es erscheint ein Dateibaum,
der alle Dateien Ihres Projektes enthält. Bislang gibt es nur das Wurzelverzeichnis mit dem Projektnamen
(<code>HelloWorld01</code>) sowie eine Systemdatei <code>External Libraries</code>, die uns
derzeit nicht weiter interessiert.
 
Klicken Sie mit der rechten Maus auf das Wurzelverzeichnis des Baumes und anschließend auf <code>New</code>.
Es öffnet sich ein Drop-Daown-Menü mit einer Auswahl an Dateien, die Sie erstellen können.
 
Erstellen Sie eine HTML-Datei <code>index.html</code> vom Typ <code>HTML 5 file</code>.
In die HTML-Datei wurde von WebStrom folgender Code automatisch eingefügt:


<source lang="html5">
<source lang="html5">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<head>
   <meta charset="UTF-8">
   <meta charset="UTF-8">
   <title>Title</title>
   <title>Hello World 01</title>
</head>
</head>
<body>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to Full-Stack Web Development!</p>
</body>


</body>
</html>
</html>
</source>
</source>


Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen dies Browser, damit  
Speichern Sie die Datei (<code>STRG/CTRL/CMD-s</code>). Im Reiter <code>OPEN EDITORS</code> wird angezeigt, ob es nicht gespeicherte Dateien gibt. Dort befindet sich auch ein Icon, um alle nicht gespeicherten Dateien auf die Festplatte zu schreiben. Man vergisst leider häufig, eine Datei zu speichern, bevor man sie in einem Browser öffnet und wundert sich dann, warum man keine Änderungen sieht. (In dieser Hinsicht ist WebStorm besser. Hier werden Dateien automatisch gespeichert, wenn sie für eine Browser-Darstellung benötigt werden.)
sie den nach-volgenden HTML-Code richtig interpretieren und [[Renderer|rendern]] können.
 
Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit  
sie den nachfolgenden HTML-Code richtig interpretieren und [[Renderer|rendern]] können.
Mit <code><!DOCTYPE html></code> wird festgelegt, dass es sich um eine HTML5-Datei handelt.  
Mit <code><!DOCTYPE html></code> wird festgelegt, dass es sich um eine HTML5-Datei handelt.  
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (<code>strict</code>)
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (<code>strict</code>)
Zeile 79: Zeile 43:


<source lang="html4strict">
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<!DOCTYPE HTML PUBLIC
          "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd"
>  
</source>
</source>


Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.
Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.


Die zweite und die letzte Zeile des Dokuments (<code><html lang="en"></code> und <code></html></code>)
Die zweite und die letzte Zeile des Dokuments (<code>&lt;html lang="en"&gt;</code> und <code>&lt;/html&gt;</code>)
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] <code>lang</code> zeigt dem Browser an,
begrenzen den eigentlichen HTML-Code. Das [[Attribut]] <code>lang</code> zeigt dem Browser an,
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
Zeile 90: Zeile 57:
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.


Innerhalb des öffnenden und des schließenden HTML-[[Tag]]s müssen die beiden wesentlichen Bereiche
Innerhalb des öffnenden und des schließenden HTML-[[Tag]]s stehen die beiden wesentlichen Bereiche
eines HTML-Dokuments mit Inhalt gefüllt werden.
eines HTML-Dokuments, der Head- und der Body-Bereich.


Im <code>head</code>-Bereich stehen Informationen, die für den Browser zwar interessat sind, die  
Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Content-Bereich
aber nicht gerendert und im Content-Bereich des Browsers dargestellt werden müssen. Typische
des Browsers angezeigt werden sollen.
Vertreter sind der Titel des Dokuments, der im Browsertab angezeigt wird, die Zeichencodierung
(UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in [[UTF-8]] codiert.
In HTML 4 war noch [[ISO 8859-1]] die Standardkodierung. Mit UTF-8 können theoretisch über 4 Billionen
Zeichen kodiert werden, praktisch werden aber (derzeit) nur etwas mehr als eine Million Kodierungen
als korrekt angesehen.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8, a transformation format of ISO 10646]</ref>.
In ISO 8859-1 (ISO Latin 1) gibt es dagegen maximal 256 Zeichen. Davon sind 191 spezifiziert.<ref>[http://www.iso.org/iso/catalogue_detail?csnumber=28245 ISO/IEC 8859-1:1998]</ref>


Im <code>body</code>-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich
Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die  
des Browsers angezeigt werden sollen. Da WebStrom keine Ahnung hat, was für Inhalte
aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische
präsentiert werden sollen, iist dieser Bereich noch leer.
Vertreter sind der Titel des Dokuments, der im Browser-Tab angezeigt wird, sowie die Zeichenkodierung
 
(UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in [[UTF-8]] kodiert.
==Die HTML-Datei mit Inhalten füllen==
In HTML 4 war noch [[ISO 8859-1]] Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen.  
 
Davon sind 191 spezifiziert.<ref>[http://www.iso.org/iso/catalogue_detail?csnumber=28245 ISO/IEC 8859-1:1998]</ref>
Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt.
Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit)
Es wird ein Titel in <code>head</code>-Bereich eingetragen sowie eine
nur etwas mehr als eine Million Kodierungen als korrekt angesehen.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8,
Hauptüberschrift (heading, <code>&lt;h1&gt;</code>...<code>&lt;/h1&gt;</code>)  sowie
a transformation format of ISO 10646]</ref>.
anschließend ein Absatz (paragraph, <code>&lt;p&gt;</code>...<code>&lt;/p&gt;</code>)
mit sinnvollem Text.
 
<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld01</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to Multimedia Programming!</p>
</body>
</html>
</source>


'''Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken.'''
'''Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken.'''
Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt.
Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt.
Tag-Blöcke, die '''innerhalb von anderen Tags''' plaziert werden, werden um '''zwei Leerzeichen''' weiter '''eingerückt''', als ihre
Tag-Blöcke, die '''innerhalb von anderen Tags''' platziert werden, werden um '''zwei Leerzeichen''' weiter '''eingerückt''', als ihre
Elterntags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind zuviel, wenn sie größe Dateien erstellen. Eine Datei
Eltern-Tags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist
mit Programmcode sollte in der Regel nicht mehr als 80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.
aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.)
Eine Datei mit Programmcode sollte in der Regel nicht mehr als  
80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.


'''Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen.''' Für wieviele Leerzeichen ein
'''Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen.''' Für wie viele Leerzeichen ein
Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem
Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem
Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser ({{zB}} bei einem Web-Zugriff
Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser ({{zB}} bei einem Web-Zugriff
auf ein Repository eines Versionverwaltungssystems) fehlerhaft sein.
auf ein Repository eines Versionsverwaltungssystems) fehlerhaft sein.


'''Fügen Sie nicht willkürlich Leerzeilen in den Code ein.''' Leeerzeilen dienen ebenso wie Leerzeichen der Strukturierung
'''Fügen Sie nicht willkürlich Leerzeilen in den Code ein.''' Leerzeilen dienen ebenso wie Leerzeichen der Strukturierung
und können – geschickt eingesetzt – die [[Lesbarkeit]]des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.
und können – geschickt eingesetzt – die [[Lesbarkeit]] des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.


Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich.
Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich.
Dies Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen
Diese Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen
wichtig, die den Code lesen müssen (Programmierer, Studenten etc.). Menschen können schlecht strukturierten Code
wichtig, die den Code lesen müssen (Programmierer, Mitarbeiter der Qualitätssicherung, Studenten, '''Prüfer''' etc.).  
viel schlechter lesen, als gut strukturierten Code.
Menschen können schlecht strukturierten Code viel schlechter lesen, als gut strukturierten Code.


Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser  
Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser  
in derselben Weise dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt.
in derselben Weise interpretiert und dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt.


<source lang="html5">
<source lang="html5">
Zeile 159: Zeile 106:


   charset=                              "UTF-8"><title
   charset=                              "UTF-8"><title
>HelloWorld01</title>
>Hello World 01</title>
</head
</head


Zeile 174: Zeile 121:
</source>
</source>


BTW (By the way): Auch die Einrückungen des HTML5-Templates von WebStorm sind  
BTW (By the way): Auch die Einrückungen des zuerst präsentieren HTML5-Codes sind  
nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen eingerückt werden.
nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen:


<source lang="html5">
<source lang="html5">
Zeile 182: Zeile 129:
   <head>
   <head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <title>HelloWorld01</title>
     <title>Hello World 01</title>
   </head>
   </head>
   <body>
   <body>
Zeile 191: Zeile 138:
</source>
</source>


Allerdings ist es durchaus sinnvoll, sowohl das <code>html</code>-Tag, als auch das <code>head</code>-Tag, als auch das<code>body</code>-Tag
Allerdings ist es durchaus sinnvoll, nicht nur das <code>html</code>-Element sondern auch das <code>head</code>-Element und das <code>body</code>-Element
am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und
am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und
jedesmal auch an derselben Stelle (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen.
jedes mal auch an derselben Stellen (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen.
Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der LEsbarkeit zugute kommt.
Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der Lesbarkeit zugute kommt.


Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.
Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.


{{TBD}}
==Start der Web-Anwendung==


==Musterlösung herunterladen==
Um die zuvor erzeugte HTML-Datei in einem [[Browser]] ansehen zu können,
muss sie in das Dokument-Verzeichnis eines [[Web-Server]]s gelegt werden.
Dies ist normalerweise etwas umständlich, wenn der Web-Server nicht auf dem
Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner,
also auf Ihrem Laptop oder PC, einen Server wie [[Apache]] oder [[Tomcat]] zu installieren.
Das ist aber für einfache HTML-Seiten nicht notwendig, {{dh}} für HTML-Seiten, die keinen [[Python]]-, [[PHP]]-, [[Java]]-, [[JavaScript]]- oder sonstigen Code enthalten, der ausgeführt werden muss, '''bevor''' die Seite an den [[Client]] (Browser)
ausgeliefert wird.


Laden Sie die [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/ Musterlösung]
In diesem Tutorium werden nur HTML-Seiten erstellt, die [[JavaScript]]-Code enthalten.
in Eclipse:
Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden,
'''nachdem''' die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde.
Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten und JavaScript-Dateien auszuliefern.  
Ein derartiger Server ist in VSC enthalten (wenn Sie die Erweiterung <code>Life Server</code> installiert haben).
Daher ist das Testen der Web-Anwendung ganz einfach.


* Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
Klicken Sie im Dateibaum von VSC mit der rechten Maustaste auf <code>index.html</code>
* <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
und klicken Sie dann auf <code>Open with Life Server</code>. Nach kurzer Zeit öffnet
* Entweder
sich im Standardbrowser die HTML-Seite, die man gerade erstellt hat.
** <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
** <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → URL: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
* <code>Weiter</code>
* Nachden der Dateibaum aufgegangen ist:  <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_world_01</code> selektieren
* <code>Fertigstellen</code>


===Anmerkung===
Ersetzen Sie in der Datei <code>index.html</code> den veralteten Titel <code>Multimedia Programming</code> durch den neuen Titel
der Veranstaltung <code>Web Programming</code>. Sobald Sie die Datei speichern, sollte sich im Browser der Inhalt automatisch aktualisieren.
Der Life Server von VSC fügt der HTML-Datei eine JavaScript-Code hinzu, der dafür sorgt, dass die Seite im Browser jedes Mal neu geladen wird, sobald sich der Inhalt in VSC ändert.


Auf dieselbe Weise können Sie auch Ihre eigenen Projekte aus Ihrem eigenen Repository auf beliebige Rechner laden.
Diesen Code können Sie sehen, wenn Sie im Browser den HTML-Code untersuchen (Firefox uns Safari: Rechtsklick → <code>Element untersuchen</code>, Chrome: Rechtsklick → <code>Untersuchen</code>). Wenn Sie im Inspektor das <code>html</code>-
und dann das <code>body</code>-Element öffnen, sehen Sie den zusätzlich JavaScript-Code den der VSC-Server ans Ende vom Body eingefügt hat.


Wenn Sie mit der Bearbeitung Ihres Projektes auf einem Rechner aufhören, sollten Sie stets den
Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser
aktuellen Stand in Ihrem Repository sichern:
geöffnet wird. Welcher Browser dies ist, kann in VSC folgendermaßen festgelegt werden:


* Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf <code>Team</code> → Click auf <code>Commit</code>
* Fahren Sie mit der Maus in die rechte obere Ecke des Editor-Fensters von <code>index.html</code>, bis dort ein kleines Fenster mit diversen Browser-Icons erscheint.
* Klicken Sie auf das Icon eines Browsers, den Sie auf Ihrem Rechner auch installiert haben, dann wird die Datei in diesem Browser geöffnet..


Wenn Sie danach auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen, müssen sie beim ersten MAl das Projekt in der
Sie können den Default-Browser in VSC jederzeit ändern, indem sie den gewünschten Browser in die <code>settings.json</code> eintragen: [https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md  vscode-live-server/docs/settings.md ]
oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden. Wenn Sie dies einmal gemacht haben, reicht es wen Sie künftig die
lokale Version auf dem Rechner aktualisieren, bevor Sie mit der Arbeit beginnen:


*Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf <code>Team</code> → Click auf <code>Update to HEAD</code>
==Vermeidung von Sonderzeichen in Dateinamen==
Da eine Web-Anwendung üblicherweise irgendwann einmal auf einen
öffentlich zugänglichen Web-Server gelegt werden soll, sollten
Sie bei der Bezeichnung von Ordner- und Dateinamen ein paar Namenskonventionen konsequent einhalten:


==Anwendung „<code>HelloWorldCanvas01</code>“==
* keine Leerzeichen in Datei- und Ordnernamen
===Neues Projekt anlegen===
* keine Nicht-ASCII-Zeichen (wie ä, ö, ü, ß) in Datei- und Ordnernamen
* strikte Unterscheidung von Groß- und Kleinschreibung bei Datei- und Ordnernamen


* <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
Der Grund ist, dass Leer- und Sonderzeichen in Pfadnamen häufig Probleme
* Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>
bereiten, wenn sie auf reguläre Web-Server gestellt werden. Noch schlimmer
* Eventuell: <code>Web</code>-Perspektive wählen
ist die Groß- und Kleinschreibung. Wenn Sie eine Datei <code>main.js</code>
erzeugen und diese in einer Datei <code>index.html</code> unter dem Namen
<code>Main.js</code> einbinden, funktioniert Ihre Anwendung auf Ihrem
Windows-Rechner üblicherweise einwandfrei, da unter Windows bei Dateinamen zwischen
Groß- und Kleinschreibung nicht unterschieden wird. Sollten Sie die Anwendung später
auf einen Mac-Rechner (einer Teamkollegin) oder einen Unix-Web-Server kopieren,
funktioniert die Anwendung dagegen nicht mehr, da Mac OS X und Unix zwischen
Groß- und Kleinschreibung bei Datei- und Ordnernamen unterscheiden.
<!--
Es sollten also keine
Ordner mit Namen wie „<code>3. Semester</code>“, „<code>Praktikum 01</code>“, „<code>Müller</code>“ etc.
im Dateipfad enthalten sein.-->


Speichern Sie nun Ihr Projekt in Ihrem Repository:
==Speichern der Web-Anwendung in einem Git-Repository==


* <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
Nun ist es an der Zeit, die erste Version Ihrer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines
* <code>SVN</code> → <code>Weiter</code>
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird
* <code>Create a new repository location</code> selektieren
[[Git]] verwendet.
* URL: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
* Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
* Beim ersten Mal: Klick auf <code>Accept permanently</code>
* Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
* Öffnen der Perspektive bestätigen: Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)


===Projekt im Repository sichern===
Sehen Sie zunächst nach, ob Git bei Ihnen funktioniert. Öffnen Sie das Terminal in VSC und
geben Sie dort <code>git --version</code> ein. Wenn sich Git mit einer Versionsnummer meldet,
haben Sie das Tool korrekt installiert.


Das neu angelegte Projekt wird gleich mal im Repository gesichert:
Überprüfen Sie nun, ob Sie sich im Terminal im Wurzelverzeichnis Ihres Projekts befinden.
Nun können sie im Terminal Git für Ihr Projekt aktivieren:


* Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
<source lang="bash">
* Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
git init
* <code>OK</code>
 
===Neue HTML-Datei anlegen===
 
* Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
* Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
* Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>
 
===HTML-Datei bearbeiten===
 
Erfassen Sie nun folgenden Code in der HTML-Seite:
 
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
 
    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: Canvas: Hello World 01</title>
 
    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
    <meta charset="UTF-8">
 
    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <!-- Zeichnen von "Hallo Welt!" auf der Bühne
        (nachdem die Seite geladen wurde). -->
    <script type="text/javascript">
      function init()
      { var l_canvas = document.getElementById("d_canvas");
        l_canvas.width  = 300;
        l_canvas.height =  27;
        var l_context = l_canvas.getContext("2d");
       
        l_context.font = "bold 20px 'Times New Roman', Times, serif";
        l_context.fillText("Hallo Welt!", 5, 20);
      }
    </script>
 
  </head>
 
  <body onload="init()">
 
    <!-- Die Bühne (Canvas) -->
    <canvas id="d_canvas">
      Ihr Browser unterstützt HTML5 leider nicht!
    </canvas>
 
  </body>
</html>
</source>
</source>


=====Anmerkung 1=====
Daraufhin wir im Wurzelordner des Projekts ein Ordner namens <code>.git</code> angelegt. Dieser wird im Dateibaum üblicherweise nicht angezeigt, da der Name mit einem Punkt beginnt. Sie können ihn aber trotzdem anzeigen:
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.


=====Anmerkung 2=====
<source lang="bash">
Die Meta-Anweisung
ls -al
<source lang="html4strict">
ls -al .git
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.
=====Anmerkung 3=====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
* Rechtklick in das Editor-Fenster oder auf den Dateinamen im Projektexplorer → <code>Öffnen mit</code> → <code>Web Page Editor</code>
Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.
===HTML-Seite testen===
* <code>hallo.html</code> speichern: <code>Strg-s</code>
* Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
* In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ →  Serverziel auswählen: <code>JavaScript Web Application</code>
* <code>OK</code>


====Anmerkungen zum Firefox auf den Rechnern des MM-Labors====
In diesem Ordner sind alle Versionen Ihres Projekts gespeichert. Diese werden jedes Mal gespeichert, wenn Sie <code>git commit</code> ausführen. Allerdings werden nur Dateien gesichert, die zuvor mit <code>git add</code> hinzugefügt wurden.


Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.  
VSC nimmt Ihnen diese Arbeit ab. Klicken Sie im linken Menü auf das Icon mit den drei Kreisen, die durch zwei Linien verbunden sind.
Damit öffnet sich der Git-Dateibrowser (<code>Source Control</code>). Eventuell müssen Sie das Reload-Icon hinter <code>SOURCE CONTROL</code>
anklicken, um die zuletzt geänderten Dateien zu sehen.


Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.  
Schreiben Sie in das Feld <code>Message</code> den Text <code>Initial Commit</code> (wenn Sie sich an die Konvention halten möchten, alle Kommentare in Englisch zu schreiben). Klicken Sie dann auf das Haken-Icon hinter dem Text <code>SOURCE CONTROL</code>. Daraufhin erscheint eine Alert-Box, dass keine „staged changes“ vorhanden seien. Man wird gefragt, ob mal alle Änderungen „stagen“ und dann direkt committen wolle. Auf gut Deutsch wird man gefragt, ob man alle Dateien, die in der Dateiliste mit einen <code>U</code> markiert sind, ins Git-Repository einfügen wolle. Da Sie das wollen, klicken Sie auf <code>Ja</code>. (Irgendwann werden Sie auf <code>Immer</code> klicken, sobald Sie die ständigen Nachfragen nerven.)
Diese Einstellung verhindert den Zugriff auf localhost.  


Lösung des Problems:
<!--
* Firefox starten
Als nächstes sollten Sie in Ihrem Projekt eine Datei namens <code>.gitignore</code> einfügen,
* Einstellungen → Erweitert → Netzwerk → Einstellungen 
die beschreibt, welche Dateien '''nicht''' im Git-Repository gesichert werden sollen.
* Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.  
Das sind vor allem Dateien mit sensiblen Informationen (wie {{zB}} Passwörtern) sowie
Dateien, die automatisch generiert werden können.  


====Anmerkungen zum Test-Sever====
Kopieren Sie die Datei <code>https://glossar.hs-augsburg.de/beispiel/tutorium/2021/.gitignore</code>
in das Wurzelverzeichnis Ihres Web-Projekts. Speichern Sie sie unbedingt unter dem Namen
<code>.gitignore</code> (mit einem Punkt als erstes Zeichen). Diese Datei enthält die Namen und
Endungen zahlreicher Dateien und Ordner, die üblicherweise nicht auf einem Git-Server gespeichert
werden sollten. Sie können sie in Ihrer Studienarbeit natürlich an Ihre Bedürfnisse anpassen. 
-->


'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''
Wenn Sie jetzt eine Änderung an der Datei <code>index.html</code> vornehmen ({{zB}} indem Sie Sie den Titel in <code>Hello World 01</code> ändern), listet VSC die geänderte Datei im Git-Dateibaum auf und markiert sie mit einen <code>M</code>, sobald sie die Änderungen speichern. Damit sehen Sie, dass es eine neuere Version der Datei gibt, die noch nicht mittels <code>Commit</code> gesichert wurde.
Wenn Sie auf den Dateinamen klicken, sehen Sie, was sich geändert hat.


Sie können allerdings auch andere Web-Server verwenden:
Sichern Sie auch diese Version der Datei mittels eines Commits. Vergessen Sie nicht, eine neue <code>Commit Message</code> einzugeben.


* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
Selektieren Sie im linken Bereich das Git-Icon und öffnen Sie den Reiter <code>Commit</code>.
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
Dort sehen Sie eine Liste mit allen Commits. Wenn Sie einen Commitbereich öffnen, sehen Sie, welche Dateien dabei verändert wurden. Die Veränderungen können Sie betrachten, wenn Sie auf die einzelnen Dateien klicken.
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.


In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
Es gibt viele weitere Befehle zur Arbeit mit einem Git-Repository: Wiederherstellung von alten Versionen, Anlegen von Entwicklungszweigen (Branches), Zusammenführen von Entwicklungszweigen etc. Lesen Sie dazu bitte die oben genannte Git-Dokumentation.
<code>JavaScript Web Application</code> auswählen:
* In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ →  Serverziel auswählen: <code>Run on Server</code>
* <code>OK</code>


Den HTTP-Preview-Server wählen Sie folgendermaßen:
==Speichern eines Git-Repositories auf einem Git-Server==


*<code>HTTP Preview</code> → <code>Fertigstellen</code>
Für die Lehrveranstaltung steht Ihnen ein Git-Server zur Verfügung, den Sie auch benutzen müssen, wenn Sie an der Prüfung teilnehmen möchten:
*{{Git-Server}}


Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse bzw. im Firefox geöffnet wird.
Sie können sich dort mit Ihrem RZ-Account einloggen. (Wenn Sie '''kein Mitglied der Hochschule Augsburg''' sind, können alternativ einen beliebigen anderen öffentlichen Git-Server verwenden, wie {{zB}}  https://gitlab.com/public oder https://github.com/. Sie müssen sich dort nur registrieren.)
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreisförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.


Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
Loggen Sie sich auf dem GitLab-Server ein. Bislang befindet sich dort keinerlei Projekte von Ihnen.
mit Eclipse verknüpfen.


Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
Öffnen Sie im WebStorm das Terminal und geben Sie dort folgende Befehle ein:
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:
* <code>git remote add origin {{Git-Server}}/ACCOUNT/hello_world_01.git</code> ('''Ersetzen Sie <code>ACCOUNT</code> durch Ihren RZ-Account.''')
*  <code>git remote -v</code>


* Reiter <code>Server</code> im unteren Fenster selektieren
Der letzte Befehl zeigt an, mit welchen externen Repositories Ihr Repository unter welchem Namen verbunden ist.
* Klick auf Icon „rotes Recheck“ (Server stoppen)
(Ein Git-Repository kann durchaus mit mehreren Repositories zur selben Zeit verbunden sein.) Der Standardname eines externen Repositories ist <code>origin</code>. Sie können aber theoretisch auch jeden anderen Namen wählen.
* Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)


===Projekt im Repository sichern===
Falls Ihnen der letzte Befehl zeigt, dass Sie die falsche URL eingetragen haben (weil Sie {{zB}} vergessen haben <code>ACCOUNT</code> durch Ihren RZ-Account zu ersetzen),
können Sie die Verbindung auch wieder löschen und das Repository mit einer anderen URL verbinden_


Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:
*  <code>git remote remove origin</code>
*  <code>git remote -v</code>
*  <code>git remote add origin {{Git-Server}}/ACCOUNT/hello_world_01.git</code> ('''Ersetzen Sie auch diesmal <code>ACCOUNT</code> durch Ihren RZ-Account.''')</code>
* <code>git remote -v</code>


* Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
Sollte die URL korrekt sein, können Sie Ihr Repository auf den Git-Server kopieren:
* Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
* <code>OK</code>


===JavaScript-Code auslagern===
* <code>git push</code>


Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Beim ersten Mal müssen Sie allerdings <code>git push -u origin master</code> eingeben, um Git mitzuteilen, dass das Repository in den Master-Zweig des Repositories <code>origin</code> eingefügt werden soll. Sie werden nach einem Benutzernamen und einem Passwort gefragt. Geben Sie Ihren RZ-Account an.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.


Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:
Sehen Sie jetzt noch einmal im Browser in Ihrem GitLab-Account nach. Dort sollte jetzt das Projekt <code>hello_world_01</code> zu sehen sein.
Achtung: Dort ist nicht nur die aktuelle Version des Projekts gespeichert, sondern auch der Versionsbaum. Sie können die Geschichte einer Datei auch im Browser untersuchen.


* Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
Anmerkung: Am linken unteren Rand des VSC-Fensters finden Sie wichtige Git-Informationen:  
* Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>
Den aktuellen Git-Zweig (<code>master</code>) und die Anzahl der Dateien, die von Gitlab herunter bzw. dorthin hochgeladen werden können. Wenn Sie die entsprechenden Icons klicken. wird <code>git pull</code> bzw. <code>git push</code> ausgeführt.


====Inhalt der Datei <code>main.js</code>====
==Lizenz hinzufügen==


Wie bei HTML-Dateien können Sie auch für JavaScript eine alternativen Editor verwenden:
In GitLab fügen Sie jetzt testhalber eine Lizenzdatei ein:
<code>JavaScript Source Editor</code>
 
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */
 
function init()
{ // Erzeugung und Initialisierung der Bühne (Canvas)
  var l_canvas = document.getElementById("d_canvas");
 
  l_canvas.width  = 300;
  l_canvas.height =  27;
 
  // Textausgabe (auf der Bühne)
  var l_context = l_canvas.getContext("2d");
 
  l_context.font = "bold 20px 'Times New Roman', Times, serif";
  l_context.fillText("Hallo Welt!", 5, 20);
}
</source>
 
====Geänderter Inhalt der Datei <code>hallo.html</code>====
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>


    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
* Öffen Sie das Projekt im Browser.
    <title>HTML5-Tutorium: Canvas: Hello World 01</title>
* Klicken Sie auf <code>Add LICENSE</code>
* Es öffnet sich ein Texteditor, in dem Sie Ihre Lizenzbedingungen eintragen sollen (Autor, Copyright, Lizenzbezeichner, Link zur Lizenzbeschreibung; Beispiel: [https://de.wikipedia.org/wiki/MIT-Lizenz MIT-Lizenz])
* <code>Commit changes</code>


    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
Wenn Sie nun in VSC <code>git fetch</code> ins Terminal eingeben, wird die neue LIZENZ-Datei in ihre lokale Kopie des Projekts übertragen.
    <meta charset="UTF-8">


    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
==Projekte aus einem Git-Repository laden==
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


    <!-- Laden aller JavaScript-Dateien -->
Unter {{Git-Server}}/kowa/wk_hello_world_01.git finden Sie eine Musterlösung dieser Aufgabe.
    <script type="text/javascript" src="js/main.js"></script>
Öffnen sie diese URL in einem Browser. Auf der Web-Seite sehen Sie
ein Drop-Down-Menü mit den beiden Labeln <code>SSH</code> und <code>HTTPS</code>.
In den zugehörigen Textboxen steht jeweils ein Link, den Sie zum Kopieren des Projekts
auf Ihren Rechner verwenden können. Der SSH-Link wird {{iAllg}} verwendet, wenn
Sie die Git-Befehle von der Konsole absetzen.  Dazu müssten Sie allerdings ein
Schlüsselpaar erzeugen und den öffentlichen Schlüssel in GitLab hinterlegen.


  </head>
In VSC ist es daher einfacher, den HTTPS-Link zu verwenden. Dieser lautet für die Musterlösung:
<div class="formula"><code>{{Git-Server}}/kowa/wk_hello_world_01.git</code></div>


  <body onload="init()">
Wenn Sie diesen Link im Browser öffnen, werden Sie einfach zu der schon bekannten Repository-Seite weitergeleitet.


    <!-- Die Bühne (Canvas) -->
Sie wollen aber den Inhalt des Repositories auf Ihrem Rechner speichern.
    <canvas id="d_canvas">
Wechseln Sie dazu im Terminal mittels <code>cd</code> in ein Verzeichnis Ihrer Wahl.
      Ihr Browser unterstützt HTML5 leider nicht!
Wenn Sie beispielsweise <code>cd ..</code> eingeben, landen Sie in dem Ordner,
    </canvas>
in dem sich ihr Hello-World-01-Projekt befindet. Hier können Sie mein Projekt einfügen:


   </body>
<source lang="bash">
</html>
cd ..   # cd <beliebigen Ordner Ihrer Wahl>
        # Der Ordner sollte aber nicht unter
        # der Kontrolle von Git stehen!!
ls -al
git clone https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_01.git
ls -al
</source>
</source>


=====Tipp=====
Nun können Sie die lokale Kopie mittels <code>File</code> → <code>Open Folder</code> in VSC öffnen.<br/>
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Ctrl-Space</code>).
Oder Sie fügen den neuen Ordner mittels <code>File</code> → <code>Add Folder to Workspace</code> zu Ihrem aktuellen Workspace hinzu. Dann stehen Ihnen in VSC beide Projekte zur Bearbeitung zur Verfügung. Allerdings sollten Sie dann zwei Terminals mit den jeweiligen Wurzel-Verzeichnissen der beiden Projekte öffnen. Oder Sie wechseln im Terminal mittels <code>cd</code> zwischen den Wurzelverzeichnissen hin und her.  
Dazu müssen Sie aber zunächst einen geeigneten JavaScript-Editor wählen:
 
* Klick mit der rechten Maustaste im Editor der Datei <code>main.js</code> oder im Projektexplorer auf den Dateinamen <code>main.js</code> → <code>Öffnen mit</code> → <code>JavaScript Source Editor</code>
 
Beispiel:
* Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 7 der Funktion <code>init</code>.
* Tippen Sie <code>l_</code>, drücken Sie gegebenenfalls gegebenenfalls <code>Strg-Leertaste</code> und wählen Sie z.B. <code>l_canvas</code>.
* Geben Sie einen Punkt (<code>.</code>) ein und wählen Sie irgendeine Property aus dem erscheinenden Menü.
* Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)
 
Bevorzugten Editor als Standardeditor definieren:
* <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Editoren</code> aufklappen → <code>Dateizuordnungen</code> selektieren
* Dateitypen: Gewünschte Dateiart wählen (z.B.: <code>.js</code>)
* Zugeordnete Editoren: Gewünschten Editor wählen (z.B.: <code>JavaScript Source Editor</code>)
* <code>Standardwert</code>
* <code>OK</code>
 
===Projekt testen===
 
Testen Sie Ihr Projekt wieder, indem Sie im Firefox  neu laden (Reload oder F5).
 
Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.
 
Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:
 
<source lang="javascript">
  console.log( "Canvas wurde erstellt: ",
              l_canvas.width + "*" + l_canvas.height + " Pixel."
            );
</source>
 
Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.
 
Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).
 
Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).
 
Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.
 
Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code>  oder <code>/* ... */</code> auszukommentieren.
 
Anmerkung: In älteren Internet-Explorer-Browsern laufen JavsScript-Programme mit  
Konsolen-Ausgaben nur ab, wenn die Konsole geöffnet ist. Daher sind Konsolen-Ausgaben
für freigegebene HTML-Seiten ein absolutes No-Go.
 
===Projekt im Repository sichern===
 
Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:
 
* Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
* Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
* <code>OK</code>
 
===Repostitory begutachten===
 
Nun können Sie den Inhalt in Ihrem Repository betrachten.
 
* <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
* <code>SVN Repository Exploring</code> → <code>OK</code>
* Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen
 
Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:
 
* Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code>
 
Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren
gleichzeitig benutzt werden) sowie die von Ihnen eingegebenen Kommentare.
 
Als Letztes sollten Sie sich die Entwicklung der Datei <code>hallo.html</code> einmal näher ansehen:
 
* Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Revision Graph</code>
 
Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:
 
* Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code>
 
In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.
 
Kehren Sie nun in die normale Arbeitsumgebung zurück:
 
* In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.
 
Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.
 
==Quellen==
* {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
* [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
* [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]


==Siehe auch==
Allerdings können Sie Ihre Änderungen nicht mittels <code>git push</code> in mein Server-Repository zurückspielen, da Ihnen dazu das Recht fehlt. Sie könnten allerdings das Projekt mit Ihrem GitLab-Account verknüpfen und Ihre Änderungen dort sichern.
* {{SieheAuch|Pilgrim (2011)}}
Diesen Vorgang nennt man „forken“ oder „einen Fork erstellen“ (Fork = Gabel, Verzweigung).
* [http://www.w3schools.com/html/html5_intro.asp w3schools.com: HTML5]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]


==Fortsetzung des Tutoriums==
==Fortsetzung des Tutoriums==


Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.
Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.


==Quellen==
==Quellen==
<references/>
<references/>
[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

Aktuelle Version vom 25. März 2025, 10:58 Uhr

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 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

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

Ein neues Projekt erstellen

  • Erstellen Sie unter einem sinnvollen Pfad auf Ihrem Rechner einen neuen Ordner (z. B. .../webprog/hello_world/hello_world_01
  • Visual Studio Code (VSC) starten
  • Öffnen Sie den neu erstelltenOrdner in VSC: File → Open Folder

Links in VSC sehen Sie ein Icon bestehend aus zwei übereinander liegenden Papierblättern. Wenn Sie darauf klicken, sehen einen Dateibaum mit dem soeben geöffneten Ordner. Er enthält noch noch keine Dateien.

Der Ordnernamen wird mit Großbuchstaben dargestellt. Wenn Sie die Maus über diesen Ordnernamen bewegen, erscheinen Icons zum Erzeugen von Dateien und Ordnern (sowie zwei weitere Icons). Erstellen Sie eine HTML-Datei index.html.

Die HTML-Datei mit Inhalten füllen

Im nächsten Schritt wird die HTML-Datei mit Inhalten gefüllt: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hello World 01</title>
</head>

<body>
  <h1>Hello, World!</h1>
  <p>Welcome to Full-Stack Web Development!</p>
</body>

</html>

Speichern Sie die Datei (STRG/CTRL/CMD-s). Im Reiter OPEN EDITORS wird angezeigt, ob es nicht gespeicherte Dateien gibt. Dort befindet sich auch ein Icon, um alle nicht gespeicherten Dateien auf die Festplatte zu schreiben. Man vergisst leider häufig, eine Datei zu speichern, bevor man sie in einem Browser öffnet und wundert sich dann, warum man keine Änderungen sieht. (In dieser Hinsicht ist WebStorm besser. Hier werden Dateien automatisch gespeichert, wenn sie für eine Browser-Darstellung benötigt werden.)

Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit sie den nachfolgenden HTML-Code richtig interpretieren und rendern können. Mit <!DOCTYPE html> wird festgelegt, dass es sich um eine HTML5-Datei handelt. Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (strict) würde eine wesentlich komplexere Doctype-Angabe erfordern: 

<!DOCTYPE HTML PUBLIC
          "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd"
>

Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.

Die zweite und die letzte Zeile des Dokuments (<html lang="en"> und </html>) begrenzen den eigentlichen HTML-Code. Das Attribut lang zeigt dem Browser an, in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden soll, müssen Sie den Wert en (Englisch) in de (Deutsch) ändern. Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.

Innerhalb des öffnenden und des schließenden HTML-Tags stehen die beiden wesentlichen Bereiche eines HTML-Dokuments, der Head- und der Body-Bereich.

Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Content-Bereich des Browsers angezeigt werden sollen.

Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische Vertreter sind der Titel des Dokuments, der im Browser-Tab angezeigt wird, sowie die Zeichenkodierung (UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in UTF-8 kodiert. In HTML 4 war noch ISO 8859-1 Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen. Davon sind 191 spezifiziert.[1] Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit) nur etwas mehr als eine Million Kodierungen als korrekt angesehen.[2].

Gewöhnen Sie sich an, ineinander verschachtelte Elemente der HTML-Datei ganz akribisch einzurücken. Ein schließendes Tag steht entweder in derselben Zeile wie das öffnende Tag oder beide sind exakt gleich weit eingerückt. Tag-Blöcke, die innerhalb von anderen Tags platziert werden, werden um zwei Leerzeichen weiter eingerückt, als ihre Eltern-Tags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zu viel. (Eventuell ist aber auch die Datei zu groß und daher zu tief verschachtelt. So etwas vermeiden Sie, wenn Sie strukturiert arbeiten.) Eine Datei mit Programmcode sollte in der Regel nicht mehr als 80 Zeichen breit sein. Sonst leidet die Lesbarkeit zu sehr.

Verwenden Sie im Programmcode niemals Tabulatorzeichen, sondern immer Leerzeichen. Für wie viele Leerzeichen ein Tabulatorzeichen steht, ist nicht genormt. Das heißt, wenn eine Programmcode-Datei mit Tabulatorzeichen in einem Text-Editor korrekt strukturiert wird, kann die Struktur derselben Datei in einem anderen Editor oder im Browser (z. B. bei einem Web-Zugriff auf ein Repository eines Versionsverwaltungssystems) fehlerhaft sein.

Fügen Sie nicht willkürlich Leerzeilen in den Code ein. Leerzeilen dienen ebenso wie Leerzeichen der Strukturierung und können – geschickt eingesetzt – die Lesbarkeit des Codes verbessern oder – unstrukturiert eingestreut – verschlechtern.

Alle drei der obigen Tipps sind für den Compiler oder den Interpreter eines Programmcodes vollkommen unerheblich. Diese Werkzeuge kommen mit jedem syntaktisch korrektem Code zurecht. Die Tipps sind ausschließlich für Personen wichtig, die den Code lesen müssen (Programmierer, Mitarbeiter der Qualitätssicherung, Studenten, Prüfer etc.). Menschen können schlecht strukturierten Code viel schlechter lesen, als gut strukturierten Code.

Folgende Variante des obigen Codes ist ebenfalls syntaktisch korrekt und wird vom Browser in derselben Weise interpretiert und dargestellt. Aber lesbar ist diese Variante nur noch sehr eingeschränkt. 

<!DOCTYPE html>  <html lang
                         ="en">
<head

>
<meta

  charset=                               "UTF-8"><title
>Hello World 01</title>
</head

           ><body>


<h1   >Hello,


  World!</h1>   <p>Welcome to Multimedia Programming!
</p>
  </body>
                                                  </html>

BTW (By the way): Auch die Einrückungen des zuerst präsentieren HTML5-Codes sind nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World 01</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to Multimedia Programming!</p>
  </body>
</html>

Allerdings ist es durchaus sinnvoll, nicht nur das html-Element sondern auch das head-Element und das body-Element am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und jedes mal auch an derselben Stellen (am Datei-Anfang, am Datei-Ende sowie einmal in der Datei-„Mitte“) vorkommen. Dadurch wird die Datei um zwei Zeichen schmäler, was ebenfalls der Lesbarkeit zugute kommt.

Fazit: Keine Regel ohne Ausnahme, aber Ausnahmen sollten begründet sein.

Start der Web-Anwendung

Um die zuvor erzeugte HTML-Datei in einem Browser ansehen zu können, muss sie in das Dokument-Verzeichnis eines Web-Servers gelegt werden. Dies ist normalerweise etwas umständlich, wenn der Web-Server nicht auf dem Entwicklungsrechner läuft. Eine Möglichkeit wäre nun, auf dem Entwicklungsrechner, also auf Ihrem Laptop oder PC, einen Server wie Apache oder Tomcat zu installieren. Das ist aber für einfache HTML-Seiten nicht notwendig, d. h. für HTML-Seiten, die keinen Python-, PHP-, Java-, JavaScript- oder sonstigen Code enthalten, der ausgeführt werden muss, bevor die Seite an den Client (Browser) ausgeliefert wird.

In diesem Tutorium werden nur HTML-Seiten erstellt, die JavaScript-Code enthalten. Dieser Code soll nicht vom Server sondern vom Client ausgeführt werden, nachdem die HTML-Seite (samt JavaScript-Code) an den Client übermittelt wurde. Daher reicht uns ein ganz einfacher Server, der nichts weiter macht, als HTML-Seiten und JavaScript-Dateien auszuliefern. Ein derartiger Server ist in VSC enthalten (wenn Sie die Erweiterung Life Server installiert haben). Daher ist das Testen der Web-Anwendung ganz einfach.

Klicken Sie im Dateibaum von VSC mit der rechten Maustaste auf index.html und klicken Sie dann auf Open with Life Server. Nach kurzer Zeit öffnet sich im Standardbrowser die HTML-Seite, die man gerade erstellt hat.

Ersetzen Sie in der Datei index.html den veralteten Titel Multimedia Programming durch den neuen Titel der Veranstaltung Web Programming. Sobald Sie die Datei speichern, sollte sich im Browser der Inhalt automatisch aktualisieren. Der Life Server von VSC fügt der HTML-Datei eine JavaScript-Code hinzu, der dafür sorgt, dass die Seite im Browser jedes Mal neu geladen wird, sobald sich der Inhalt in VSC ändert.

Diesen Code können Sie sehen, wenn Sie im Browser den HTML-Code untersuchen (Firefox uns Safari: Rechtsklick → Element untersuchen, Chrome: Rechtsklick → Untersuchen). Wenn Sie im Inspektor das html- und dann das body-Element öffnen, sehen Sie den zusätzlich JavaScript-Code den der VSC-Server ans Ende vom Body eingefügt hat.

Der Startbefehl hat zur Folge, dass ein lokaler Web-Server gestartet und die selektierte HTML-Datei in einem Browser geöffnet wird. Welcher Browser dies ist, kann in VSC folgendermaßen festgelegt werden:

  • Fahren Sie mit der Maus in die rechte obere Ecke des Editor-Fensters von index.html, bis dort ein kleines Fenster mit diversen Browser-Icons erscheint.
  • Klicken Sie auf das Icon eines Browsers, den Sie auf Ihrem Rechner auch installiert haben, dann wird die Datei in diesem Browser geöffnet..

Sie können den Default-Browser in VSC jederzeit ändern, indem sie den gewünschten Browser in die settings.json eintragen: vscode-live-server/docs/settings.md

Vermeidung von Sonderzeichen in Dateinamen

Da eine Web-Anwendung üblicherweise irgendwann einmal auf einen öffentlich zugänglichen Web-Server gelegt werden soll, sollten Sie bei der Bezeichnung von Ordner- und Dateinamen ein paar Namenskonventionen konsequent einhalten:

  • keine Leerzeichen in Datei- und Ordnernamen
  • keine Nicht-ASCII-Zeichen (wie ä, ö, ü, ß) in Datei- und Ordnernamen
  • strikte Unterscheidung von Groß- und Kleinschreibung bei Datei- und Ordnernamen

Der Grund ist, dass Leer- und Sonderzeichen in Pfadnamen häufig Probleme bereiten, wenn sie auf reguläre Web-Server gestellt werden. Noch schlimmer ist die Groß- und Kleinschreibung. Wenn Sie eine Datei main.js erzeugen und diese in einer Datei index.html unter dem Namen Main.js einbinden, funktioniert Ihre Anwendung auf Ihrem Windows-Rechner üblicherweise einwandfrei, da unter Windows bei Dateinamen zwischen Groß- und Kleinschreibung nicht unterschieden wird. Sollten Sie die Anwendung später auf einen Mac-Rechner (einer Teamkollegin) oder einen Unix-Web-Server kopieren, funktioniert die Anwendung dagegen nicht mehr, da Mac OS X und Unix zwischen Groß- und Kleinschreibung bei Datei- und Ordnernamen unterscheiden.

Speichern der Web-Anwendung in einem Git-Repository

Nun ist es an der Zeit, die erste Version Ihrer Web-Anwendung in einem Repository (= digitales Archiv) eines Versionsverwaltungssystems (version control system, VCS) zu speichern. Hier wird Git verwendet.

Sehen Sie zunächst nach, ob Git bei Ihnen funktioniert. Öffnen Sie das Terminal in VSC und geben Sie dort git --version ein. Wenn sich Git mit einer Versionsnummer meldet, haben Sie das Tool korrekt installiert.

Überprüfen Sie nun, ob Sie sich im Terminal im Wurzelverzeichnis Ihres Projekts befinden. Nun können sie im Terminal Git für Ihr Projekt aktivieren: 

git init

Daraufhin wir im Wurzelordner des Projekts ein Ordner namens .git angelegt. Dieser wird im Dateibaum üblicherweise nicht angezeigt, da der Name mit einem Punkt beginnt. Sie können ihn aber trotzdem anzeigen: 

ls -al
ls -al .git

In diesem Ordner sind alle Versionen Ihres Projekts gespeichert. Diese werden jedes Mal gespeichert, wenn Sie git commit ausführen. Allerdings werden nur Dateien gesichert, die zuvor mit git add hinzugefügt wurden.

VSC nimmt Ihnen diese Arbeit ab. Klicken Sie im linken Menü auf das Icon mit den drei Kreisen, die durch zwei Linien verbunden sind. Damit öffnet sich der Git-Dateibrowser (Source Control). Eventuell müssen Sie das Reload-Icon hinter SOURCE CONTROL anklicken, um die zuletzt geänderten Dateien zu sehen.

Schreiben Sie in das Feld Message den Text Initial Commit (wenn Sie sich an die Konvention halten möchten, alle Kommentare in Englisch zu schreiben). Klicken Sie dann auf das Haken-Icon hinter dem Text SOURCE CONTROL. Daraufhin erscheint eine Alert-Box, dass keine „staged changes“ vorhanden seien. Man wird gefragt, ob mal alle Änderungen „stagen“ und dann direkt committen wolle. Auf gut Deutsch wird man gefragt, ob man alle Dateien, die in der Dateiliste mit einen U markiert sind, ins Git-Repository einfügen wolle. Da Sie das wollen, klicken Sie auf Ja. (Irgendwann werden Sie auf Immer klicken, sobald Sie die ständigen Nachfragen nerven.)


Wenn Sie jetzt eine Änderung an der Datei index.html vornehmen (z. B. indem Sie Sie den Titel in Hello World 01 ändern), listet VSC die geänderte Datei im Git-Dateibaum auf und markiert sie mit einen M, sobald sie die Änderungen speichern. Damit sehen Sie, dass es eine neuere Version der Datei gibt, die noch nicht mittels Commit gesichert wurde. Wenn Sie auf den Dateinamen klicken, sehen Sie, was sich geändert hat.

Sichern Sie auch diese Version der Datei mittels eines Commits. Vergessen Sie nicht, eine neue Commit Message einzugeben.

Selektieren Sie im linken Bereich das Git-Icon und öffnen Sie den Reiter Commit. Dort sehen Sie eine Liste mit allen Commits. Wenn Sie einen Commitbereich öffnen, sehen Sie, welche Dateien dabei verändert wurden. Die Veränderungen können Sie betrachten, wenn Sie auf die einzelnen Dateien klicken.

Es gibt viele weitere Befehle zur Arbeit mit einem Git-Repository: Wiederherstellung von alten Versionen, Anlegen von Entwicklungszweigen (Branches), Zusammenführen von Entwicklungszweigen etc. Lesen Sie dazu bitte die oben genannte Git-Dokumentation.

Speichern eines Git-Repositories auf einem Git-Server

Für die Lehrveranstaltung steht Ihnen ein Git-Server zur Verfügung, den Sie auch benutzen müssen, wenn Sie an der Prüfung teilnehmen möchten:

Sie können sich dort mit Ihrem RZ-Account einloggen. (Wenn Sie kein Mitglied der Hochschule Augsburg sind, können alternativ einen beliebigen anderen öffentlichen Git-Server verwenden, wie z. B. https://gitlab.com/public oder https://github.com/. Sie müssen sich dort nur registrieren.)

Loggen Sie sich auf dem GitLab-Server ein. Bislang befindet sich dort keinerlei Projekte von Ihnen.

Öffnen Sie im WebStorm das Terminal und geben Sie dort folgende Befehle ein:

Der letzte Befehl zeigt an, mit welchen externen Repositories Ihr Repository unter welchem Namen verbunden ist. (Ein Git-Repository kann durchaus mit mehreren Repositories zur selben Zeit verbunden sein.) Der Standardname eines externen Repositories ist origin. Sie können aber theoretisch auch jeden anderen Namen wählen.

Falls Ihnen der letzte Befehl zeigt, dass Sie die falsche URL eingetragen haben (weil Sie z. B. vergessen haben ACCOUNT durch Ihren RZ-Account zu ersetzen), können Sie die Verbindung auch wieder löschen und das Repository mit einer anderen URL verbinden_

Sollte die URL korrekt sein, können Sie Ihr Repository auf den Git-Server kopieren:

  • git push

Beim ersten Mal müssen Sie allerdings git push -u origin master eingeben, um Git mitzuteilen, dass das Repository in den Master-Zweig des Repositories origin eingefügt werden soll. Sie werden nach einem Benutzernamen und einem Passwort gefragt. Geben Sie Ihren RZ-Account an.

Sehen Sie jetzt noch einmal im Browser in Ihrem GitLab-Account nach. Dort sollte jetzt das Projekt hello_world_01 zu sehen sein. Achtung: Dort ist nicht nur die aktuelle Version des Projekts gespeichert, sondern auch der Versionsbaum. Sie können die Geschichte einer Datei auch im Browser untersuchen.

Anmerkung: Am linken unteren Rand des VSC-Fensters finden Sie wichtige Git-Informationen: Den aktuellen Git-Zweig (master) und die Anzahl der Dateien, die von Gitlab herunter bzw. dorthin hochgeladen werden können. Wenn Sie die entsprechenden Icons klicken. wird git pull bzw. git push ausgeführt.

Lizenz hinzufügen

In GitLab fügen Sie jetzt testhalber eine Lizenzdatei ein:

  • Öffen Sie das Projekt im Browser.
  • Klicken Sie auf Add LICENSE
  • Es öffnet sich ein Texteditor, in dem Sie Ihre Lizenzbedingungen eintragen sollen (Autor, Copyright, Lizenzbezeichner, Link zur Lizenzbeschreibung; Beispiel: MIT-Lizenz)
  • Commit changes

Wenn Sie nun in VSC git fetch ins Terminal eingeben, wird die neue LIZENZ-Datei in ihre lokale Kopie des Projekts übertragen.

Projekte aus einem Git-Repository laden

Unter https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_01.git finden Sie eine Musterlösung dieser Aufgabe. Öffnen sie diese URL in einem Browser. Auf der Web-Seite sehen Sie ein Drop-Down-Menü mit den beiden Labeln SSH und HTTPS. In den zugehörigen Textboxen steht jeweils ein Link, den Sie zum Kopieren des Projekts auf Ihren Rechner verwenden können. Der SSH-Link wird i. Allg. verwendet, wenn Sie die Git-Befehle von der Konsole absetzen. Dazu müssten Sie allerdings ein Schlüsselpaar erzeugen und den öffentlichen Schlüssel in GitLab hinterlegen.

In VSC ist es daher einfacher, den HTTPS-Link zu verwenden. Dieser lautet für die Musterlösung:

https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_01.git

Wenn Sie diesen Link im Browser öffnen, werden Sie einfach zu der schon bekannten Repository-Seite weitergeleitet.

Sie wollen aber den Inhalt des Repositories auf Ihrem Rechner speichern. Wechseln Sie dazu im Terminal mittels cd in ein Verzeichnis Ihrer Wahl. Wenn Sie beispielsweise cd .. eingeben, landen Sie in dem Ordner, in dem sich ihr Hello-World-01-Projekt befindet. Hier können Sie mein Projekt einfügen: 

cd ..   # cd <beliebigen Ordner Ihrer Wahl>
        # Der Ordner sollte aber nicht unter 
        # der Kontrolle von Git stehen!!
ls -al
git clone https://gitlab.multimedia.hs-augsburg.de/kowa/wk_hello_world_01.git
ls -al

Nun können Sie die lokale Kopie mittels File → Open Folder in VSC öffnen.
Oder Sie fügen den neuen Ordner mittels File → Add Folder to Workspace zu Ihrem aktuellen Workspace hinzu. Dann stehen Ihnen in VSC beide Projekte zur Bearbeitung zur Verfügung. Allerdings sollten Sie dann zwei Terminals mit den jeweiligen Wurzel-Verzeichnissen der beiden Projekte öffnen. Oder Sie wechseln im Terminal mittels cd zwischen den Wurzelverzeichnissen hin und her.

Allerdings können Sie Ihre Änderungen nicht mittels git push in mein Server-Repository zurückspielen, da Ihnen dazu das Recht fehlt. Sie könnten allerdings das Projekt mit Ihrem GitLab-Account verknüpfen und Ihre Änderungen dort sichern. Diesen Vorgang nennt man „forken“ oder „einen Fork erstellen“ (Fork = Gabel, Verzweigung).

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

Quellen

  1. ↑ ISO/IEC 8859-1:1998
  2. ↑ [https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8, a transformation format of ISO 10646]
  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_01&oldid=52810“