HTML-Tutorium: SVG: MiniPong 03: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| (7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{HTML-Tutorium:SVG:MiniPong:Menü}} | {{HTML-Tutorium:SVG:MiniPong:Menü}} | ||
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/ | '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_03/WebContent/index.html Minipong 3]</code> | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/ | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_03 SVN-Repository]) | ||
=Voraussetzung= | ==Voraussetzung== | ||
Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: MiniPong 02]] und [[HTML5-Tutorium: Canvas: MiniPong 03]] kennen. | Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: MiniPong 02]] und [[HTML5-Tutorium: Canvas: MiniPong 03]] kennen. | ||
=Ziel: Implementierung von MiniPong mit Schläger, Ball und Punktanzeige= | ==Ziel: Implementierung von MiniPong mit Schläger, Ball und Punktanzeige== | ||
Im dritten Teil des Tutoriums wird das Spiel „MiniPpong“ realisiert, indem „Ball“ und „Schläger“ zusamengeführt werden. | Im dritten Teil des Tutoriums wird das Spiel „MiniPpong“ realisiert, indem „Ball“ und „Schläger“ zusamengeführt werden. | ||
Wie in den ersten beiden Teilen des Tutoriums wird die [[HTML5-Tutorium: Canvas: MiniPong 03|Canvas-Version]] in eine SVG-Version umgeschrieben. | Wie in den ersten beiden Teilen des Tutoriums wird die [[HTML5-Tutorium: Canvas: MiniPong 03|Canvas-Version]] in eine SVG-Version umgeschrieben. | ||
[[ | [[Datei:MiniPong03SVG.png|miniatur|links|575px|Das Objektmodell der '''Raphaël-Version''' von MiniPong 03]]<div class="tleft" style="clear:none">[[Datei:MiniPong03Canvas.png|miniatur|ohne|582px|Das Objektmodell der '''Canvas-Version''' von MiniPong 03]]</div><div style="clear:both"></div> | ||
=Anwendung „<code>MiniPongSVG03</code>“= | ==Anwendung „<code>MiniPongSVG03</code>“== | ||
==Neues Projekt anlegen== | ===Neues Projekt anlegen=== | ||
Legen Sie ein neues | Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>MiniPongSVG03</code> an. | ||
Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | ||
==Dateien erstellen== | ===Dateien erstellen=== | ||
Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in | Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in | ||
[[HTML-Tutorium: SVG: MiniPong 01|Teil 1]] und [[HTML-Tutorium: SVG: MiniPong 02|Teil 2 des Tutoriums]]. | [[HTML-Tutorium: SVG: MiniPong 01|Teil 1]] und [[HTML-Tutorium: SVG: MiniPong 02|Teil 2 des Tutoriums]]. | ||
==Anwendung testen und sichern== | ==Validierung== | ||
Sie sollten sich auch wieder versichern, dass Sie validen HTML-Code erstellt haben. | |||
Die Musterlösungen dieses Tutoriums sind valide: | |||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fminipong%2Fhtml_svg_minipong_01%2FWebContent%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des MiniPong-SVG-Beispiels, Teil 1] | |||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fminipong%2Fhtml_svg_minipong_02%2FWebContent%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des MiniPong-SVG-Beispiels, Teil 2] | |||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fminipong%2Fhtml_svg_minipong_03%2FWebContent%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des MiniPong-SVG_-Beispiels, Teil 3] | |||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fminipong%2Fhtml5_canvas_minipong_01%2FWebContent%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des MiniPong-Canvas-Beispiels, Teil 1] | |||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fminipong%2Fhtml5_canvas_minipong_02%2FWebContent%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des MiniPong-Canvas-Beispiels, Teil 2] | |||
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fminipong%2Fhtml5_canvas_minipong_03%2FWebContent%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des MiniPong-Canvas-Beispiels, Teil 3] | |||
===Anwendung testen und sichern=== | |||
Testen Sie Ihre Anwendung in gewohnter Weise. | Testen Sie Ihre Anwendung in gewohnter Weise. | ||
Vergessen Sie nicht, sie im SVN-Repository zu sichern. | Vergessen Sie nicht, sie im SVN-Repository zu sichern. | ||
=Quellen= | ==Quellen== | ||
<references/> | <references/> | ||
<ol start="2"> | <ol start="2"> | ||
| Zeile 38: | Zeile 52: | ||
[[Kategorie: HTML-Tutorium: SVG: MiniPong]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | [[Kategorie: HTML-Tutorium: SVG: MiniPong]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | ||
Aktuelle Version vom 1. März 2023, 15:13 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: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
HTML-Tutorium: Canvas | SVG
SVG: | Teil 1 | Teil 2 | Teil 3
Musterlösung: Minipong 3
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: MiniPong 02 und HTML5-Tutorium: Canvas: MiniPong 03 kennen.
Ziel: Implementierung von MiniPong mit Schläger, Ball und Punktanzeige
Im dritten Teil des Tutoriums wird das Spiel „MiniPpong“ realisiert, indem „Ball“ und „Schläger“ zusamengeführt werden. Wie in den ersten beiden Teilen des Tutoriums wird die Canvas-Version in eine SVG-Version umgeschrieben.
Anwendung „MiniPongSVG03“
Neues Projekt anlegen
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen MiniPongSVG03 an.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Dateien erstellen
Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in Teil 1 und Teil 2 des Tutoriums.
Validierung
Sie sollten sich auch wieder versichern, dass Sie validen HTML-Code erstellt haben.
Die Musterlösungen dieses Tutoriums sind valide:
- Validierung des MiniPong-SVG-Beispiels, Teil 1
- Validierung des MiniPong-SVG-Beispiels, Teil 2
- Validierung des MiniPong-SVG_-Beispiels, Teil 3
- Validierung des MiniPong-Canvas-Beispiels, Teil 1
- Validierung des MiniPong-Canvas-Beispiels, Teil 2
- Validierung des MiniPong-Canvas-Beispiels, Teil 3
Anwendung testen und sichern
Testen Sie Ihre Anwendung in gewohnter Weise.
Vergessen Sie nicht, sie im SVN-Repository zu sichern.
Quellen
- Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
