|
|
| Zeile 1: |
Zeile 1: |
| {{In Bearbeitung}} | | {{In Bearbeitung}} |
| {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} | | {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} |
| {{TBD|Dieser Teil des Tutoriums ist bislang nur durhc Cop &am; Paste erstellt, aber noch nicht bearbeitet worden}}
| | '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld02/index.html <code>index.html</code>] |
| '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/html5_javascript_hello_world_02/index.html <code>index.html</code>] | | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld02/ SVN-Repository]) |
| ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/html5_javascript_hello_world_02/ SVN-Repository]) | |
| ==Ziel== | | ==Ziel== |
| Im ersten Teil dieses Tutoriums wird zunächst mit Hilfe der [[IDE]] (integrated development environment, Integrierte Entwicklungsumgebung) | | Im ersten Teil dieses Tutoriums die Hello-World-Web-Anwendung (bestehend aus einer einzigen [[HTML]]-Datei namens „<code>index.html</code>“) |
| [[WebStorm]] eine Web-Anwendung bestehend aus einem [[HTML]]-Dokument samt zugegörigem [[CSS]]-Dokument
| | um eine CSS-Layout und um Interaktion (mittels [[JavaScript]]) erweitet. |
| 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 (check out) und öffnen.
| |
| | |
| Sie werden zunächst die dritte Möglichkeit nutzen, um die Musterlösung zu dieser Tutoriumsaufgabe herunterzuladen.
| |
| 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>.
| |
| 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 Versionsverwaltungssystem 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>
| |
|
| |
|
| {{TBD}} | | {{TBD}} |
|
| |
| ==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-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 WebStrom 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 nach-volgenden 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 <code>body</code>-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich
| |
| des Browsers angezeigt werden sollen. Da WebStrom keine Ahnung hat, was für Inhalte
| |
| präsentiert werden sollen, ist dieser Bereich noch leer.
| |
|
| |
| Im <code>head</code>-Bereich stehen dagegen Informationen, die für den Browser zwar interessat sind, die
| |
| aber nicht gerendert und im Content-Bereich des Browsers dargestellt werden müssen. Typische
| |
| Vertreter sind der Titel des Dokuments, der im Browsertab 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 <code>head</code>-Bereich eingetragen sowie eine
| |
| Hauptüberschrift (heading, <code><h1></code>...<code></h1></code>) sowie
| |
| anschließend ein Absatz (paragraph, <code><p></code>...<code></p></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.'''
| |
| 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
| |
| Elterntags. Vier Leerzeichen, wie oft von der IDE vorgegeben, sind für größere, tief verschachtelte Dateien zuviel. (Eventuell ist
| |
| aber auch die Datei zu groß und zu tief verschachtelt.) 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
| |
| 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 Versionverwaltungssystems) 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>-Tag, sondern auch das <code>head</code>-Tag und das <code>body</code>-Tag
| |
| am Zeilenanfang beginnen zu lassen, da diese Elemente in jeder HTML-Datei mit Sicherheit jeweils genau einmal und
| |
| jedesmal 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, die keinen [[Python]]-, [[PHP]]-, [[Java]]- oder sonstigen Code
| |
| enthalten, der ausgeführt werden muss, '''bevor''' die Seite an den [[Client]] (Browser)
| |
| ausgeliefert wird, nicht notwendig.
| |
|
| |
| In diesem werden Tutorium nur HTML-Seiten erstellt, die höchstens [[JavaScript]]-Code enthalten.
| |
| Der JavaScript-Code soll nicht vom Server sondern vom Client ausgeführt werden,
| |
| '''nachdem''' die HTML-Seite (samt JavaScript-Code) an den Client übermittel 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-Anwendunge ganz einfach.
| |
|
| |
| Klicken Sie im Dateibaum von WebStorm mit der rechten Maustaste auch <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 Web-Storm ein Drop-Down-Menü mit ausführbaren Dateien sowie rechts
| |
| daneben ein grünes Dreieck als Icon, mit dem die im Menü selektierte Datei dierekt 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 jedesmal die
| |
| Datei neu starten. Es reicht, im Browser den Reloadbutton zu drücken.
| |
|
| |
| Der von WebStorm gestartete Web-Server bedient diverse Brwoser, die sich auf dem Entwicklungsrechner befinden.
| |
| Wenn man dieselbe HTML-Datei in einem anderen Browser testen will, muss man dazu die URI im ersten Browser kopieren und in die URI-Leiste
| |
| des zweiten Browsers einfügen. WebStorm bemerkt, dass die 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 eine
| |
| URL, die man mit <code>Strg-v</code> als Ersatz für die zuerst eingefügte URL in den neuen Browser kopieren kann.
| |
| Diese URL 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.
| |
|
| |
| ==Überprüfen der Web-Anwendung==
| |
|
| |
| Die populären Browser bieten alle die Möglichkeit,
| |
| HTML-, CSS- und JavaScript-Dateien mit Hilfr von im Browser integrierten Entwicklerwerkzeugen zu
| |
| analysieren und zu [[Bug|debuggen]].
| |
|
| |
|
| |
| {{TBD}}
| |
|
| |
| ==Musterlösung herunterladen==
| |
|
| |
| Laden Sie die [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/ Musterlösung]
| |
| in Eclipse:
| |
|
| |
| * Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
| |
| * <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
| |
| * Entweder
| |
| ** <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===
| |
|
| |
| Auf dieselbe Weise können Sie auch Ihre eigenen Projekte aus Ihrem eigenen Repository auf beliebige Rechner laden.
| |
|
| |
| Wenn Sie mit der Bearbeitung Ihres Projektes auf einem Rechner aufhören, sollten Sie stets den
| |
| aktuellen Stand in Ihrem Repository sichern:
| |
|
| |
| * Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf <code>Team</code> → Click auf <code>Commit</code>
| |
|
| |
| Wenn Sie danach auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen, müssen sie beim ersten MAl das Projekt in der
| |
| 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>
| |
|
| |
| ===Projekt im Repository sichern===
| |
|
| |
| Jedes funktionierende Zwischenergebnis eines 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>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
| |
| * <code>OK</code>
| |
|
| |
|
| ==Fortsetzung des Tutoriums== | | ==Fortsetzung des Tutoriums== |
|
| |
|
| Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 02|Teil 2 des Tutoriums]] bearbeiten. | | Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World 03|Teil 3 des Tutoriums]] bearbeiten. |
|
| |
|
| ==Quellen== | | ==Quellen== |
| <references/> | | <references/> |
| [[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | | [[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] |
