HTML5-Tutorium: JavaScript: Hello World 01

2016-10-07T10:14:28Z

Raphaelb: /* Speichern der Web-Anwendung in einem Subversion-Repository */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/index.html <code>index.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
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
erstellt.

Das HTML-Dokument enthält als einzigen Inhalt eine Begrüßung der gesamten Welt.

==WebStorm vorbereiten==

Zur Erstellung der Anwendung wird [[Installation von WebStorm|WebStorm]] eingesetzt.
Zunächst müssen Sie diese IDE [[Installation von WebStorm|installieren und konfigurieren]]. Es handelt sich um eine kommerzielle
Software, aber als Student erhalten Sie eine kostenlose Lizenz.

==WebStorm starten==

Nach dem Starten der IDE sehen Sie ein Menü mit drei Alternativen, ein Projekt zu bearbeiten: Sie können
eine neues Projekt erstellen, ein bestehendes Projekt öffnen oder ein bestehendes Projekt aus einem
Versionsverwaltungstool laden (<code>check out</code>) und öffnen.

Sie werden zunächst die erste Möglichkeit nutzen und ein neues Projekt erstellen.
Anschließend werden Sie die Musterlösung für dieses Projekt aus einem [[Subversion|SVN-Repository]] herunterladen.

==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/hello_world/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>“. (Wenn Sie dieses Menü nicht sehen, müssen Sie
auf das Icon unten links in der Leiste klicken. Damit wird das Menü eingeblendet.)

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-Down-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 WebStorm folgender Code automatisch eingefügt:

<source lang="html5">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

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

Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen dies 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.
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält („<code>strict</code>“)
würde eine wesentlich komplexere Doctype-Angabe erfordern:

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

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>“)
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
soll, müssen Sie den Wert „<code>en</code>“ (Englisch) in „<code>de</code>“ (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-[[Tag]]s müssen die beiden wesentlichen Bereiche
eines HTML-Dokuments mit Inhalt gefüllt werden.

Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich
des Browsers angezeigt werden sollen. Da WebStorm keine Ahnung hat, was für Inhalte
präsentiert werden sollen, ist dieser Bereich noch leer.

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.<ref>[http://www.iso.org/iso/catalogue_detail?csnumber=28245 ISO/IEC 8859-1:1998]</ref>
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.<ref>[https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8,
a transformation format of ISO 10646]</ref>.

==Die HTML-Datei mit Inhalten füllen==

Im nächsten Schritt wird die von WebStorm erzeugte HTML-Datei mit Inhalten gefüllt.
Es wird ein Titel in Head-Bereich eingetragen. Im Body-Bereich fügen Sie bitte
eine Hauptüberschrift (heading, „<code><h1></code>...<code></h1></code>“) sowie
anschließend einen Absatz (paragraph, „<code><p></code>...<code></p></code>“)
mit sinnvollem Text ein.

<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.'''
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
Elterntags. 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 ({{zB}} 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.

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

BTW (By the way): Auch die Einrückungen des HTML5-Templates von WebStorm sind
nicht ganz korrekt. Eigentlich sollte der Code folgendermaßen aussehen:

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

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

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 auszuliefern.
Ein derartiger Server ist in WebStorm bereits enthalten. Daher ist das Testen der Web-Anwendung ganz einfach.

Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auf „<code>index.html</code>“
und klicken Sie dann auf „<code>Run 'index.html'</code>“. Wenn man diesen Befehl erstmals ausgeführt hat,
erscheint in der Hauptmenüleiste von WebStorm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts
daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei direkt gestartet werden kann.

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 WebStorm folgendermaßen festgelegt werden.

# Im Dateibaum „<code>index.html</code>“ selektieren.
# „<code>Run</code>“ → „<code>Edit Configurations...</code>“ → Klick auf „<code>...</code>“ hinter dem Label „<code>Browser</code>“ → Defaultbrowser festlegen
#Menü mit Klick auf „<code>OK</code>“ verlassen.

Wenn man anschließend in WebStorm Änderungen an der im Browser geöffneten Datei vornimmt, muss man nicht jedes mal die
Datei neu starten. Es reicht, im Browser den Reloadbutton zu drücken.

Der von WebStorm gestartete Web-Server bedient diverse Browser, die sich auf dem Entwicklungsrechner befinden.
Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, kann man dazu den URI im ersten Browser kopieren und in die URI-Leiste
des zweiten Browsers einfügen. WebStorm bemerkt, dass der URI in einem anderen Browser geöffnet werden soll und stellt dazu eine Sicherheitsanfrage:

<div class="formula"><code>Copy authorization URL to clipboard</code></div>

Wenn man dies bestätigt enthält das Clipboard anschließend einen
URI, die man mit „<code>Strg-v</code>“ als Ersatz für den zuerst eingefügte URI in den neuen Browser kopieren kann.
Dieser URI wird dann angezeigt und kann ebenfalls per Reload aktualisiert werden.

Man könnte die Seite sogar von einem anderen Device, wie {{zB}} einen Smartphone aus aufrufen.
Dies ist jedoch im WebStorm-Server standardmäßig aus Sicherheitsgründen
unterbunden.

Schneller geht der Test mit einem anderen Browser, indem man die zu testende Datei im WebStorm-Editor-Fenster öffnet und mit der Maus in die
rechte obere Ecke dieses Fensters fährt. Irgendwann poppt in dieser Ecke in Menü mit fünf Browser-Icons auf. Durch einen Klick auf ein
Icon kann man die geöffnete Datei im gewünschten Browser testen.

==Speichern der Web-Anwendung in einem Subversion-Repository==

Nun ist es an der Zeit, die erste Version unserer Web-Anwendung in einem [[Repository]] (= digitales Archiv) eines
[[Versionsverwaltungssystem]]s (''version control system'', VCS) zu speichern. Hier wird
[[Subversion]] verwendet.

'''Anmerkung''': <i>Ich weiß, dass [[Git]] viel „cooler“ und „mächtiger“ ist als [[Subversion]]. Wenn Sie nicht
an der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|Multimedia-Programmierung]] (MMProg)
teilnehmen, können Sie an Stelle von Subversion selbstverständlich auch [https://github.com/ GitHub] oder ein anderes Versionsverwaltungssystem verwenden,
um Ihre Projekte zu verwalten. Sie können aber auch Ihren eigenen Subversion-Server installieren, um die Tutorien „in voller Schönheit“ bearbeiten zu können: https://subversion.apache.org/packages.html. (Sie könnten sogar ganz darauf verzichten und Ihre Tutoriumslösungen nicht in einem
Versionsverwaltungssystem sichern. Davon rate ich aber ab.)</i>

<i>Im Praktikum zur Lehrveranstaltung wird jedoch Subversion verwendet, da die Administration von Dutzenden
von Subversion-Accounts für den Dozenten wesentlich einfacher ist als die Verwaltung von entsprechenden Git-Accounts.
</i>

Um Ihr Projekt in einem Subversion-Repository zu speichern, müssen Sie folgende Schritte ausführen:

# „<code>Subversion</code>“ auswählen
# Klick auf „<code>VCS</code>“ → „<code>Import into Version Control</code>“ → „<code>Share Project (Subversion)</code>“
# Klick auf das Plus-Zeichen neben „<code>Point to repository location</code>“
# Tragen Sie den URI Ihres Subversion-Repositories ein. Für MMProg-Teilnehmer lautet der URI „<code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT/</code>“, wobei die Zeichenkette „<code>ACCOUNT</code>“ durch den eigenen RZ-Account ersetzt werden muss.
# Im darunterliegenden Fester erscheint ein neuer Eintrag mit dem URI des Repositories. Öffnen Sie diesen (Klick auf das Dreieckssymbol).
# Wenn Sie nach einer Kennung und einem Passwort gefragt werden, geben Sie die Daten Ihres Rechzentrumsaccounts an. Aktivieren Sie „<code>Save credentials</code>“, ansonsten werden Sei bei jedem Zugriff auf das Repository erneut nach den Zugangsdaten gefragt. → „<code>OK</code>“
##Falls es bei MAC OS Probleme gibt, befolgen Sie folgende Schritte:
##*Klicken Sie links oben auf "Webstorm" dann "Preferences" dann "Version Control" dann "Subversion"
##*unter Reiter "Network" wählen Sie "TLSv1"
##*unter Reiter "General" klicken Sie auf Button "Clear Auth Cache"
##*danach starten Sie Webstorm neu
# Fügen Sie ins Repository einen neuen Ordner namens „<code>mmprog</code>“ ein:
## Rechtsklick auf den URI
## Klick auf „<code>New</code>“ → „<code>Remote Folder...</code>“
## Geben Sie „<code>mmprog</code>“ als Namen ein („<code>Remote folder name</code>“)
## Klicken Sie auf „<code>OK</code>“.
# Fügen sie auf dieselbe Weise den Unterordner „<code>praktikum</code>“ in den Ordner „<code>mmprog</code>“ ein.
# Selektieren Sie im Dateibaum des Repositories den neu angelegten Ordner „<code>praktikum</code>“ durch Linksklick.
# Wählen Sie unter „<code>Define share target</code>“ den zweiten Eintrag ({{dh}} denjenigen URI, der auf „<code>HelloWorld01</code>“ endet (sofern Sie Ihr Projekt wie vorgeschlagen benannt haben).
# Klicken Sie auf „<code>Share</code>“, um Ihr neu erstelltes Projekt im Repository anzulegen.
# Sie werden evtl. gefragt, welches Subversion-Working-Copy-Format verwendet werden soll. Wählen Sie 1.8 (außer, Sie haben einen Uralt-Subversion-Server am Laufen).
# Klicken Sie auf „<code>OK</code>“.

Wenn daraufhin die Frage aufpoppt, ob Sie die Datei „<code>vcs.xml</code>“ ebenfalls unter Versionskontrolle stellen wollen,
markieren Sie „<code>Remember, don't ask again</code>“ und beantworten die Frage mit „<code>Yes</code>“.

Das Projekt ist nun im gewählten Ordner des Subversion-Repositories angelegt worden, aber es wurden noch keine Daten auf den Server übertragen.
Die WebStorm-Ansicht hat sich ebenfalls geändert: Im Dateibaum des WebStorm-Projektes wurde die Datei „<code>index.html</code>“ grün eingefärbt
und in die Hauptmenü-Leiste von WebStorm sind zwei neue VCS-Icons eingetragen worden. Die beiden Icons ermöglichen eine schnellen Zugriff
auf die beiden wichtigsten Subversion-Befehle:

* VCS, grüner Pfeil nach unten: ''Update Project''
* VCS, grüner Pfeil nach oben: ''Commit Project''

Mittels ''Commit Project'' werden Änderungen, die auf dem Entwicklungsrechner lokal vorgenommen wurden, ins Subversion-Repository übertragen.
Mittels ''Update Project'' werden Änderungen, die im Repository ({{iAllg}} auf einem anderen Rechner und/oder von einem anderen Entwickler) vorgenommen wurden, ins lokale Verzeichnis des Entwicklungsrechners übernommen. Es gibt noch diverse weitere Subversion-Befehle. Diese sind über den Dateibaum zugänglich:

* Rechtsklick auf den Projektnamen im Dateibaum → Klick auf „<code>Subversion</code>“

Alle Dateien, die noch nicht im Repository enthalten sind (zurzeit sind noch überhaupt keine Daten darin enthalten), werden aufgelistet.
Neben der von Ihnen erstellten Datei „<code>index.html</code>“ gibt es noch einen Ordner namens „<code>.idea</code>“, der WebStrom-spezifische Projekt-Dateien enthält.
Sie könnten theoretisch bestimmte Dateien deselektieren, um sie nicht ins Repository zu übertragen. Das wäre hier aber kontraproduktiv.

Tragen Sie in das Feld „<code>Commit Message</code>“ einen sinnvollen Änderungstext ein, wie
{{zB}} „<code>HelloWorld01 created.</code>“ ein.
Klicken Sie dann auf „<code>Commit</code>“ (dt.: ''übergeben'').

Üblicherweise werden in Projekten englische Dateinamen, Variablenbezeichner, Kommentare (einschließlich Subversion-Kommentaren)
verwendet, um internationale Programmierer um Rat fragen (Diskussionsforen) oder sogar als Teammitglieder einstellen zu können.

Die Farbe der Datei „<code>index.html</code>“ ändert sich bei einem erfolgreichen Commit abermals. Sie wird wieder schwarz.
Das bedeutet: Der Inhalt dieser Datei stimmt mit dem Inhalt der im Repository gespeicherten Version überein.
Sobald der Inhalt der lokalen Version der Datei geändert wird, wird der Dateiname blau eingefärbt.
Neue Dateien werden – wie bereits gesehen – grün eingefärbt.
Bei einem erneuten Commit werden alle geänderten Dateien abermals ins Subversion-Repository eingetragen.
Allerdings werden die Vorgängerversionen nicht gelöscht. Das heißt, im Repository sind alle Versionen
einer jeden Datei dauerhaft zugänglich. Auf diese können Sie {{zB}} mittels

* Rechtsklick auf eine Datei im Dateibaum → Klick auf „<code>Subversion</code>“ → Klick auf „<code>Show History</code>“

zugreifen. Das heißt, es ist unnötig und sogar kontraproduktiv, lokale Versionen einer Datei anzulegen: „<code>index.html</code>“, „<code>index.html.v01</code>“, „<code>index.html.v02</code>“, ...

Um verschiedene Versionen im Versionskontrollsystem unterscheiden zu können, sind die Kommentare, die Sie beim
Commit angeben, von fundamentaler Bedeutung. Vergessen Sie diese daher nicht und versuchen Sie jeweils die wesentlichen
Änderungen, die Sie an einer Datei vorgenommen haben, möglichst kurz und prägnant zu beschreiben (mittels eines Einzeilers).

==Projekte aus einem Subversion-Repository laden==

Projekte, die in einem Subversion-Repository gespeichert sind, können mit einem beliebigen [[Subversion/HowTo|Subversion-Client]] auf Ihren Rechner laden.
Sofern Sie Schreibrechte für das Repository haben, können Sie danach Ihre Änderungen auch wieder per Commit ins Repository einspielen.

Damit ist Subversion (wie die meisten anderen Versionsverwaltungssysteme auch) sehr gut für Teamprojekte geeignet:
Zunächst muss ein Versionsverwaltungssysteme ({{dh}} Subversion-Repository) verfügbar sein,
auf das alle Teammitglieder lesend und schreibend zugreifen können. Ein Teammitglied fügt ein neues Projekt in dieses System ein.
Alle anderen Teammitglieder laden dieses Projekt auf ihren jeweiligen Entwicklungsrechner. Jedes Mal, wenn ein Teammitglied eine
signifikante Änderung am Projekt vorgenommen hat, testet er diese ausgiebig, bereinigt evtl. noch vorhandene Fehler
und committet diese Änderungen dann (nicht früher). Wenn sich jeder Entwickler mit seiner eigenen Kennung mit dem Versionsverwaltungssystem
verbindet, kann in der Änderungshistorie jederzeit nachgesehen werden, wer für welche Änderung verantwortlich ist.
Das ist insbesondere dann wichtig, wenn zwei Entwickler ohne Absprache denselben Code gleichzeitig ändern und committen
wollen. Dann kann es nämlich zu einem sogenannten Mergekonflikt kommen: Der Entwickler, der seine Änderungen
als Zweiter committen will, würde damit die Änderungen, die der erste Entwickler bereits committet hat, einfach überschreiben.
Das wird vom Versionsverwaltungssystem verhindert. Der zweite Entwickler muss den Mergekonflikt von Hand – aber mit Unterstützung des
Versionsverwaltungssystems – beheben.

Um Mergekonflikte nach Möglichkeit zu vermeiden, ist die Modularisierung von Softwareprojekten, die im Teamarbeit erstellt werden,
von zentraler Bedeutung. Aber auch für Einzelentwickler ist der Einsatz eines Versionsverwaltungssystems vorteilhaft,
da er für alle wesentlichen Projektversionen stets einen Backup zur Verfügung hat. Da ein Versionsverwaltungstool
üblicherweise auf einem externen Server läuft, ist dieses Backup sogar räumlich vom Entwicklungsrechner getrennt.
'''Allerdings nützt das beste Versionsverwaltungstool nichts, wenn Sie nicht regelmäßig (getestete) Zwischenstände committen und damit dauerhaft abspeichern.'''

<strong>In der Lehrveranstaltung [[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|MMProg]],
für die dieses Tutorium entwickelt wurde, müssen sowohl Einzel- als auch Teamprojekte auf die zuvor beschriebene Weise realisiert werden.</strong>
Daher soll das Laden eines bereits vorhandenen Projektes geübt werden.

Für jedes Tutorium in diesem Wiki gibt es eine Musterlösung im Subversion-Repository „<code>https://glossar.hs-augsburg.de/beispiel</code>“ des Wikis.
Die Musterlösung für das aktuelle Tutorium kopieren Sie folgendermaßen auf Ihren Rechner.
(Beachten Sie, dass Sie nur lesend auf das GlossWiki-Subversion-Repository zugreifen können. Das heißt, Sie können die Musterlösungen
nur lokal, aber nicht im GlossarWiki-Repository ändern.)

Starten Sie WebStorm. Wenn der Startbildschirm mit den drei Möglichkeiten ein Projekt zu öffnen erschient, klicken Sie auf „<code>Check out from Version Control</code>“.
Es öffnet sich ein Drop-Down-Menü mit diversen Versionsverwaltungssystemen ([[GitHub]], [[CVS]], [[Git]], [[Mercurial]] und [[Subversion]]) .
Sie wählen „<code>Subversion</code>“ aus.

Anderenfalls klicken Sie auf „<code>VCS</code>“ → „<code>Check out from Version Control</code>“ → „<code>Subversion</code>“.

In beiden Fällen öffnet sich das schon bekannte Fenster mit einer Liste von verfügbaren Repositories.
Tragen Sie – sofern es nicht bereits vorhanden ist – mittels eines Klicks auf das Plus-Symbol
das Repository „<code>https://glossar.hs-augsburg.de/beispiel/</code>“ in diese Liste ein.

Öffnen Sie durch Klicks auf die Dreiecke vor dem jeweiligen Verzeichnis den Dateipfad
<div class="formula">
<code>https://glossar.hs-augsburg.de/beispiel</code> → <code>tutorium</code> → <code>es5</code> → <code>hello_world</code> → <code>WK_HelloWorld01</code>
</div>

Zum Schluss sollte der Ordner „<code>WK_HelloWorld01</code>“ selektiert sein.
Klicken Sie auf „<code>Checkout</code>“, wählen Sie in dem Dateibrowser, der sich daraufhin öffnet,
einen geeignet Speicherort ({{zB}} neben aber nicht in(!) Ihrem eigenen Projekt „<code>HelloWorld01</code>“)
und klicken Sie auf „<code>OK</code>“.

Daraufhin öffnet sich ein Fenster, in dem Sie festlegen sollen, in welchem Unterverzeichnis des zuvor gewählten Verzeichnisses
das Projekt lokal gespeichert soll („<code>Destination</code>“). Wenn Sie zuvor das Elternverzeichnis gewählt haben, in dem auch Ihr Projekt
„<code>HelloWorld01</code>“ liegt, sollten Sie den zweiten der angebotenen Pfade selektieren.
Anschließend klicken Sie abermals auf „<code>OK</code>“, wählen das Format 1.8 und klicken zum dritten Mal „<code>OK</code>“.
Danach stellt Ihnen WebStorm noch zwei Fragen. Sie sollten das Projekt öffnen (erste Frage). Ob Sie im Gegenzug das zuvor geöffnete
Projekt schließen wollen oder nicht (zweite Frage), müssen Sie selbst entscheiden.

Nun ist die Musterlösung lokal verfügbar. Sie können sie auf dieselbe Art wie ihr eigenes Projekt ansehen, ausführen und '''lokal''' ändern.
Ein Commit ist allerdings – wie bereits gesagt – nicht möglich. Versuchen Sie es ruhig.

==Fortsetzung des Tutoriums==

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

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

GlossarWiki - Benutzerbeiträge [de-formal]

HTML5-Tutorium: JavaScript: Hello World 01