|
|
| Zeile 4: |
Zeile 4: |
| ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld03/ SVN-Repository]) | | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld03/ SVN-Repository]) |
| ==Anwendungsfälle (Use Cases)== | | ==Anwendungsfälle (Use Cases)== |
| Im zweite Teil dieses Tutoriums wird die Hello-World-Web-Anwendung (bestehend aus einer einzigen [[HTML]]-Datei namens „<code>index.html</code>“)
| | Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|zweiten Teil des Tutoriums]] |
| erweitert. Aufgabe der neuen Anwendung ist es, den Benutzer nach seinem Namen zu fragen und ihn
| | ändern sich die die Anwendungsfälle deutlich. Es soll nun nicht mehr die ganze |
| anschließend mit seinem Namen zu begrüßen. Das Begrüßung soll natürlich designerisch „vom Feinsten“ sein.
| | Welt begrüßt werden, sondern der Benutzer, der die Web-Anwendung gestartet hat. |
| | | Dazu muss er zunächst nach seinem Namen gefragt werden. |
| '''Anmerkung''': In fast allen Web-Anwendungen werden Benutzereingaben zum Web-Server übertragen und dort verarbeitet.
| | Anschließend wird das HTML-Dokument mit Hilfe von [[JavaScript]] umgestaltet: Das Eingabeformular wird ausgeblendet |
| In diesem Fall muss der Web-Server immer davon ausgehen, dass ihm ein Hacker potentiell schädliche Daten schickt.
| | und stattdessen wird die Begrüßungsformel angezeigt. |
| Er muss die Daten also genau inspizieren, um die Übermittlung von Schadcode, Spam, illegalem Inhalt etc. möglichst zu verhindern.
| |
| | |
| In diesem Teil des Tutoriums werden die Daten '''nicht''' zum Server geschickt, sondern direkt vom Client (Browser) verarbeitet.
| |
| Daher sind die Sicherheitsanforderungen an den Code deutlich geringer. Nichtsdestotrotz sollte der vom Benutzer übermittelte
| |
| Name auf Plausiblität überprüft werden.
| |
|
| |
|
| ==Erstellen eines neuen Projektes== | | ==Erstellen eines neuen Projektes== |
|
| |
|
| Erstellen Sie im selben Ordner wie das Projekt „<code>HellowWorld01</code>“ ein neues Projekt „<code>HelloWorld02</code>“: | | Erstellen Sie ein neues Projekt „<code>HelloWorld03</code>“ un legen Sie dieses in Ihrem Repository ab. |
| | | Kopieren Sie anschließend die Dateien „<code>HelloWorld02</code>“ und „<code>HelloWorld02</code>“ |
| # Öffen Sie das Projekt „<code>HellowWorld01</code>“ in WebStorm.
| | aus dem zweiten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und comitten Sie abermals. |
| # <code>File</code> → <code>New</code> → <code>Project...</code> → <code>Empty Project</code>
| |
| # Tragen Sie den korrekten Projektpfad (mit dem Namen „<code>HelloWorld02</code>“ anstelle von „<code>untitled</code>“ am Pfadende) in dem Feld „<code>Location</code>“ ein.
| |
| # <code>Create</code> → <code>New Window</code>
| |
| | |
| Fügen Sie nun das neue Projekt in Ihr Subversion-Repository ein (analog zu [[HTML5-Tutorium:_JavaScript:_Hello_World_01|Teil 1]] des Tutoriums)
| |
| und committen Sie (vergessen Sie nicht die Commit Message „<code>Project HelloWorld02 created.</code>“). | |
| | |
| Kopieren Sie die Datei „<code>index.html</code>“ aus dem WebStorm01-Projekt in das WebStorm02-Projekt.
| |
| Das können Sie entweder mit dem Dateibrowser Ihrer Wahl machen oder Sie legen die WebStrom-Fester der Projekte
| |
| „<code>HelloWorld01</code>“ und „<code>HelloWorld02</code>“, markieren und kopieren „<code>index.html</code>“
| |
| im ersten Projekt und fügen es in den Dateibaum des zweiten Projektes ein.
| |
| | |
| Überprüfen Sie, ob die Anwendung korrekt gestartet werden kann (Test). Falls dies der Fall ist,
| |
| comitten Sie die neue Anwendung (Commit Message: „<code>Files of HelloWorld01 copied.</code>“)
| |
| | |
| ==Festlegen des Designs der Anwendung==
| |
| | |
| Nun wird das Design der Anwendung verbessert. Die Überschrift soll in einem
| |
| serifenlosen Font dargestellt werden, der Text des nachfolgenden Absatzes
| |
| in einem serifenhaltigen.
| |
|
| |
| Die ist kein [[CSS]]-Tutorium, daher wird nicht darauf eingegangen, wie ein geeigneter Font gewählt werden sollte.
| |
| Wir überlassen das einfach dem jeweiligen Browser-Hersteller, indem wir die Pseudefonts
| |
| „<code>sans-serif</code>“ und „<code>serif</code>“ angeben. Für [[Mac]]-User wird die Überschrift vermutlich in [[Helvetica]]
| |
| gesetzt und für [[Windows]]-Benutzer in [[Arial]].
| |
| | |
| Erstellen Sie eine [[CSS]]-Datei:
| |
| | |
| # Rechtsklick auf die Wurzel „<code>HelloWorld02</code>“ des Dateibaums → <code>New</code> → <code>Stylesheet</code>
| |
| # Name: <code>main.css</code> → <code>OK</code>
| |
| | |
| Es wird eine neue (diesmal leere!) Datei namens „<code>main.css</code>“ angelegt.
| |
| | |
| Fügen Sie in diese Datei folgenden CSS-Code ein:
| |
| | |
| <source lang="css">
| |
| h1
| |
| { font-family: sans-serif;
| |
| }
| |
| | |
| p
| |
| { font-family: serif;
| |
| }
| |
| </source>
| |
| | |
| Beachten Sie, dass die schließenden Klammern wieder unter den öffnenden Klammern notiert werden.
| |
| Sie könnten den Code aber auch folgendermaßen formatieren.
| |
| | |
| <source lang="css">
| |
| h1
| |
| {
| |
| font-family: sans-serif;
| |
| }
| |
| | |
| p
| |
| {
| |
| font-family: serif;
| |
| }
| |
| </source>
| |
| | |
| Der Nachteil dieser Konvention ist, dass der Programmcode länger wird.
| |
| Daher werden Sie meist folgende Konvention in Programmbeispielen sehen
| |
| (die allerdings auch nicht weniger Codezeilen umfasst als die von mir eingangs empfohlene Konvention):
| |
| | |
| <source lang="css">
| |
| /* *** DON'T DO IT THAT WAY!!!! *** */
| |
| | |
| h1 {
| |
| font-family: sans-serif;
| |
| }
| |
| | |
| p {
| |
| font-family: serif;
| |
| }
| |
| </source>
| |
| | |
| Im Falle von CSS-Code macht es keinen wirklichen Unterschied, welcher Konvention sie folgen.
| |
| '''Im Falle von JavaScript rate ich jedoch davon ab.''' Glauben Sie einem erfahrenen [[LISP]]-Porgammierer
| |
| (LISP ist die Sprache, bei der ''jeder'' nicht-atomare Programmcode durch Klammern umschlossen wird):
| |
| Code ist wesentlich besser zu lesen, wenn öffnende und schließende Klammern übereinander stehen.
| |
| Insbesondere Strukturfehler sind bei dieser Konvention wesentlich einfacher zu finden.
| |
| Ob Sie die öffnende Klammer jeweils in einer eigenen Zeile schreiben oder nicht, ist dabei weniger wichtig.
| |
| (Ich bevorzuge die kürzere Variante, weil man dann nicht so weit im Code zurückgehen muss, um
| |
| die öffnede Klammer zu finden.)
| |
| | |
| Glücklicherweise highlighten die meisten Editoren (wie beispielsweise die WebStrom-Editoren)
| |
| die zugehörige schließende oder öffnende Klammer, wenn man den Cursor auf (bzw. vor oder nach)
| |
| eine öffnende oder schließende setzt.
| |
| | |
| Wenn Sie Ihre CSS-Datei fertiggestellt haben und die Anwenung erneut testen
| |
| ({{dh}} die Datei „<code>index.html</code>“ im Browser vom WebStorm-Server laden), werden Sie feststellen,
| |
| dass sich nichts geändert hat (auch wenn Sie den Reload-Button des Browsers drücken).
| |
| | |
| Sie können die CSS-Datei direkt im Browser laden (ersetzen sie in dem Browser-URI einfach „<code>index.html</code>“ durch „<code>main.css</code>“
| |
| und drücken Sie den Reload-Button), aber das hilft auch nichts. Ihnen daraufhin einfach der Inhalt des CSS-Datei vom Browser angezeigt.
| |
| | |
| Der Grund ist, dass der Browser beim Laden der HTML-Datei nicht weiß, dass er den Inhalt mit Hilfe
| |
| der CSS-Datei layouten soll. Damit er dies weiß, muss folgende Zeile in den „<code>head</code>“-Bereich
| |
| der HTML-Datei eingefügt werden:
| |
| | |
| <source lang="html5">
| |
| <link rel="stylesheet" type="text/css" href="main.css">
| |
| </source>
| |
|
| |
| Wenn Sie jetzt noch einmal Ihre Web-Anwendung testen, wird ie
| |
| Überschrift (evtl. nach einem Klick auf den Reaload-Button des Browsers)
| |
| tatsächlich in einer serifenlosen Schriftart dargestellt.
| |
| | |
| Sie können jetzt noch weitere Verbesserungen vornehmen: Anpassung der Schriftgröße, | |
| Anpassung des Abstandes zwischen Überschrift und Absatz, Anpassung der Schriftfarbe,
| |
| des Seitenhintergrundes etc. pp.
| |
| | |
| Zum Beispiel:
| |
| | |
| <source lang="css">
| |
| h1
| |
| { font-family: sans-serif;
| |
| font-size: 140%;
| |
| padding-bottom: 0;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
|
| p
| | ==Definition eines HTML5-Formulars== |
| { font-family: serif;
| |
| font-size: 100%;
| |
| }
| |
| </source>
| |
|
| |
|
| {{TBD }} | | {{TBD }} |
Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.
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
(SVN-Repository)
Anwendungsfälle (Use Cases)
Gegenüber dem zweiten Teil des Tutoriums
ändern sich die die Anwendungsfälle deutlich. Es soll nun nicht mehr die ganze
Welt begrüßt werden, sondern der Benutzer, der die Web-Anwendung gestartet hat.
Dazu muss er zunächst nach seinem Namen gefragt werden.
Anschließend wird das HTML-Dokument mit Hilfe von JavaScript umgestaltet: Das Eingabeformular wird ausgeblendet
und stattdessen wird die Begrüßungsformel angezeigt.
Erstellen eines neuen Projektes
Erstellen Sie ein neues Projekt „HelloWorld03“ un legen Sie dieses in Ihrem Repository ab.
Kopieren Sie anschließend die Dateien „HelloWorld02“ und „HelloWorld02“
aus dem zweiten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei an und comitten Sie abermals.
Definition eines HTML5-Formulars
Fortsetzung des Tutoriums
Sie sollten nun Teil 4 des Tutoriums bearbeiten.
Quellen
