|
|
| Zeile 1: |
Zeile 1: |
| {{HTML5-Tutorium:Canvas:HelloWorld:Menü}} | | {{HTML5-Tutorium:Canvas:HelloWorld:Menü}} |
| '''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>] | | '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/index.html <code>index.html</code>] |
| ([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository]) | | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/ SVN-Repository]) |
| ==Ziel: Ausgabe von „Hallo Welt!“ auf einem HTML5-Canvas== | | ==Ziel: Ausgabe von „Hallo Welt!“ auf einem HTML5-Canvas== |
|
| |
|
| Es soll eine einfache HTML5/JavaScript-Anwendung erstellt werden, die „Hallo Welt!“ auf einer HTML5-Bühne (Canvas) als Pixelgrafik ausgibt. | | Es soll eine einfache HTML5/JavaScript-Anwendung erstellt werden, die „Hallo Welt!“ auf einer HTML5-Bühne (Canvas) als Pixelgrafik ausgibt. |
|
| |
| ==Eclipse vorbereiten==
| |
|
| |
| Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
| |
|
| |
| '''Beim ersten Start von Eclipse werden Sie nach einem Workspace gefragt. Wählen Sie einen geeigneten Ordner aus:'''
| |
| * Privater Rechner: z.B. <code>C:\web\mmprog</code>
| |
| * HSA-Rechner: z.B. <code>Z:\mmprog\workspace</code> (Wichtig ist, dass Sie das Laufwerk Z, das ist Ihr persönliches Benutzerverzeichnis, benutzen.)
| |
|
| |
| Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.
| |
|
| |
| Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:
| |
|
| |
| * <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>
| |
|
| |
| Zunächst sollte man die „richtige“ Oberfläche auswählen:
| |
|
| |
| * <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;
| |
|
| |
| '''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''
| |
|
| |
| Außerdem muss der Character Code korrekt eingestellt werden:
| |
|
| |
| * <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren
| |
| * <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren
| |
| * <code>OK</code>
| |
|
| |
| ==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>
| |
|
| |
| ==Anwendung „<code>HelloWorldCanvas01</code>“==
| |
| ===Neues Projekt anlegen===
| |
|
| |
| * <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
| |
| * Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>
| |
| * Eventuell: <code>Web</code>-Perspektive wählen
| |
|
| |
| Speichern Sie nun Ihr Projekt in Ihrem Repository:
| |
|
| |
| * <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
| |
| * <code>SVN</code> → <code>Weiter</code>
| |
| * <code>Create a new repository location</code> selektieren
| |
| * 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===
| |
|
| |
| Das neu angelegte Projekt wird gleich mal im Repository gesichert:
| |
|
| |
| * Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
| |
| * Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
| |
| * <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>
| |
|
| |
| =====Anmerkung 1=====
| |
| 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=====
| |
| Die Meta-Anweisung
| |
| <source lang="html4strict">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
| |
| </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====
| |
|
| |
| Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.
| |
|
| |
| Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
| |
| Diese Einstellung verhindert den Zugriff auf localhost.
| |
|
| |
| Lösung des Problems:
| |
| * Firefox starten
| |
| * Einstellungen → Erweitert → Netzwerk → Einstellungen
| |
| * 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.
| |
|
| |
| ====Anmerkungen zum Test-Sever====
| |
|
| |
| '''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''
| |
|
| |
| Sie können allerdings auch andere Web-Server verwenden:
| |
|
| |
| * Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
| |
| * Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
| |
| * 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
| |
| <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:
| |
|
| |
| *<code>HTTP Preview</code> → <code>Fertigstellen</code>
| |
|
| |
| 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.
| |
| 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
| |
| mit Eclipse verknüpfen.
| |
|
| |
| Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
| |
| neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:
| |
|
| |
| * Reiter <code>Server</code> im unteren Fenster selektieren
| |
| * Klick auf Icon „rotes Recheck“ (Server stoppen)
| |
| * Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)
| |
|
| |
| ===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>
| |
|
| |
| ===JavaScript-Code auslagern===
| |
|
| |
| Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
| |
| 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:
| |
|
| |
| * Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
| |
| * Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>
| |
|
| |
| ====Inhalt der Datei <code>main.js</code>====
| |
|
| |
| Wie bei HTML-Dateien können Sie auch für JavaScript eine alternativen Editor verwenden:
| |
| <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 -->
| |
| <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">
| |
|
| |
| <!-- Laden aller JavaScript-Dateien -->
| |
| <script type="text/javascript" src="js/main.js"></script>
| |
|
| |
| </head>
| |
|
| |
| <body onload="init()">
| |
|
| |
| <!-- Die Bühne (Canvas) -->
| |
| <canvas id="d_canvas">
| |
| Ihr Browser unterstützt HTML5 leider nicht!
| |
| </canvas>
| |
|
| |
| </body>
| |
| </html>
| |
| </source>
| |
|
| |
| =====Tipp=====
| |
| Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Ctrl-Space</code>).
| |
| 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== | | ==Quellen== |
| * {{Quelle|Kowarschick, W.: Multimedia-Programmierung}} | | * {{Quelle|Kowarschick, W.: Multimedia-Programmierung}} |
| * [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse] | | * http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial] |
| * [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]
| |
|
| |
|
| ==Siehe auch== | | ==Siehe auch== |
| * {{SieheAuch|Pilgrim (2011)}} | | * {{SieheAuch|Pilgrim (2011)}} |
| * [http://www.w3schools.com/html/html5_intro.asp w3schools.com: HTML5] | | * [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] | | * [https://html.spec.whatwg.org/ HTML Living Standard] |
|
| |
|
| ==Fortsetzung des Tutoriums== | | ==Fortsetzung des Tutoriums== |
