Web uebungen: Unterschied zwischen den Versionen

Aus CCWiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen Versionsunterschied
Drlue (Diskussion | Beiträge)
Bürokraten, Oberflächenadministratoren, Administratoren
2.987 Bearbeitungen
 
(29 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 9: Zeile 9:
* HTTP (Transportprotokoll)
* HTTP (Transportprotokoll)
* JSON (Datenübertragungsformat)
* JSON (Datenübertragungsformat)
* Client- Serverarchitektur und Webservice
* HTML
* HTML
** Elemente verstehen und optimalerweise auch erstellen (html, head, body, table, div, a, form, input (text, textarea, button, checkbox),...)
** Elemente verstehen und optimalerweise auch erstellen (html, head, body, img, table, grid, div, a, p, h[1-5], br, form, input (text, textarea, button, checkbox),...)
** Die wichtigsten Attribute für oben genannte Elemente
* CSS
* CSS
** Erstellen von eigenen Klassen
** Erstellen von eigenen Klassen
Zeile 20: Zeile 22:
** Styling der wichtigsten Attribute (margin, padding, display, ''flexbox'')
** Styling der wichtigsten Attribute (margin, padding, display, ''flexbox'')
* Javascript
* Javascript
** Eigene Methoden schreiben
** Eigene Methoden schreiben und aufrufen
** Eventlistener (onClick,...)
** Eventlistener erstellen ('''onClick''',...)
** Javascript im HTML Head
** Javascript im HTML Head
** Javascript in eigener Datei (import in HTML)
** Javascript in eigener Datei (import in HTML)
** HTML Elemente mittels Javascript erstellen/ändern/löschen
** HTML Elemente mittels Javascript erstellen/ändern und löschen
* Was ist eine Client- Server Architektur?
** HTTP Requests mittels '''fetch''' erstellen und verarbeiten (Anbindung eines Webservices)
* Was ist ein Webservice?
 
* Anbinden eines Webservices
= Übungen =
 
Zum Bearbeiten der Übungen wird der Opensource Editor '''Visual Studio Code'''[https://code.visualstudio.com/] empfohlen.
 
Für die Übungen wurde im '''Repository''' der Ordner '''web/[Teilnehmername]''' eingerichtet. Bitte verwende diesen Ordner für die Übungen.
 
==== Aufgabe: Eigene Webseite ====
{{DirectoryToUse|'''web/[Name]/firstWebsite/'''}}
Im folgenden soll eine Webseite mit mehreren Seiten erstellt werden.
 
* Die Navigation erfolgt mittels Links die die andere Seite aufrufen.
 
* Weiters soll ein Navigationsmenü erstellt werden, dass die Navigation in jeder Seite ermöglicht.
 
* Das Styling soll in einer oder mehrere eigener CSS Dateien erfolgen.
 
* Folgende Seiten sollen erstellt werden
** '''Startseite'''
*** Willkommensnachricht
** '''Über mich'''
*** Ein beispiel Profilfoto einbinden
*** Hobbies
*** Aufzählung von Lieblingsspeisen
*** Tabelle für Sprachen: English - Gut; Deutsch - Muttersprache
** '''Was habe Ich bisher gelernt'''
*** Linkzusammenfassung von den verwendeten Tools (Intellij, Java, Mysql, Github)
*** Für 1-2 Tools ein Video auf Youtube suchen und das Video einbetten
*** Link zum eigenen GitHub-Account einbinden (mit GitHub Icon daneben)
** '''Impressum'''
*** Standardimpressum oder Dummytext
 
==== Aufgabe: Hässlichste Website Ever ====
{{DirectoryToUse|'''web/[Name]/ugly/'''}}
Erstelle eine beliebige Website mit tollen Animationen, und super Farben. Gerne können auch spezielle Javascript Effekte wie 3d Rotation oder ähnliches verwendet werden.
'''!!!Je Bunter desto besser!!!'''
 
==== Aufgabe: Javascript Clicker ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erstelle eine simple Website, wird auf den Button geklickt so soll in einem Text angezeigt werden wie oft der Button geklickt wurde.
[[Datei:Javascript clicker.gif|mini|ohne|Javascript Clicker Beispiel]]
 
==== Aufgabe: Javascript Clicker Persistant ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erweitere das vorhergehende Beispiel um die dauerhafte Speicherung des Counters. Dafür soll die '''Storage API'''[https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API] verwendet werden.
 
==== Aufgabe: Javascript Add Element ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erstelle eine simple Website, wird auf den Button geklickt so soll nun ein HTML Element mit dem Zeitpunkt des Klicks hinzugefügt werden.
[[Datei:Javascript add element.gif|mini|ohne|Javascript Element hinzufügen]]
 
==== Aufgabe: Javascript Remove Element ====
{{DirectoryToUse|'''web/[Name]/javascript/'''}}
Erweitere das vorhergehende Beispiel um die Möglichkeit ein Element wieder zu löschen.
[[Datei:Javascript add and remove element.gif|mini|ohne|Javascript Element löschen]]
 
==== Aufgabe: '''S'''ingle '''P'''age '''A'''pplication ====
{{DirectoryToUse|'''web/[Name]/chuckNorris/'''}}
 
Es kann auch gerne eine andere API verwendet werden, einige findet ihr hier[https://medium.com/@vicbergquist/18-fun-apis-for-your-next-project-8008841c7be9]. Es soll aber vom Umfang und den Funktionen dem unten beschriebenen Text entsprechen.
Es soll eine Webseite erstellt werden in der '''Chuck Norris''' Witze gesucht und gespeichert werden können. Hierfür gibt es eine '''API'''[https://api.chucknorris.io/].
* Zufälligen Witz anzeigen
* Witze nach Text suchen
* Gefundene Witze speichern
* Gespeicherte Witze löschen
* Witze sollen im '''Localstorage''' des Browsers gespeichert werden

Aktuelle Version vom 5. Dezember 2021, 10:59 Uhr

Im folgenden finden sich Übungen für das Thema Web. Weiters soll direkt ein Überblick über die Themen erfolgen.

Überblick

Ein grundlegendes Verständnis folgender Begriffe soll erlangt werden. Diese sind nicht chronologisch geordnet. 

Tip:
* Für weitere Informationen bzgl. Webtechnologien: Webtechnologien
* Für weitere Informationen bzgl. Webservices und Client- Serverkonzepte: Webservices und Client Server Konzepte
  • HTTP (Transportprotokoll)
  • JSON (Datenübertragungsformat)
  • Client- Serverarchitektur und Webservice
  • HTML
    • Elemente verstehen und optimalerweise auch erstellen (html, head, body, img, table, grid, div, a, p, h[1-5], br, form, input (text, textarea, button, checkbox),...)
    • Die wichtigsten Attribute für oben genannte Elemente
  • CSS
    • Erstellen von eigenen Klassen
    • Styling für HTML Elemente erstellen
    • CSS Selektoren erstellen
    • Inline CSS in HTML
    • CSS im HTML Head
    • CSS in eigener Datei (import in HTML)
    • Styling der wichtigsten Attribute (margin, padding, display, flexbox)
  • Javascript
    • Eigene Methoden schreiben und aufrufen
    • Eventlistener erstellen (onClick,...)
    • Javascript im HTML Head
    • Javascript in eigener Datei (import in HTML)
    • HTML Elemente mittels Javascript erstellen/ändern und löschen
    • HTTP Requests mittels fetch erstellen und verarbeiten (Anbindung eines Webservices)

Übungen

Zum Bearbeiten der Übungen wird der Opensource Editor Visual Studio Code[1] empfohlen.

Für die Übungen wurde im Repository der Ordner web/[Teilnehmername] eingerichtet. Bitte verwende diesen Ordner für die Übungen.

Aufgabe: Eigene Webseite

Verwende dazu den Ordner web/[Name]/firstWebsite/ im git Repository.

Im folgenden soll eine Webseite mit mehreren Seiten erstellt werden.

  • Die Navigation erfolgt mittels Links die die andere Seite aufrufen.
  • Weiters soll ein Navigationsmenü erstellt werden, dass die Navigation in jeder Seite ermöglicht.
  • Das Styling soll in einer oder mehrere eigener CSS Dateien erfolgen.
  • Folgende Seiten sollen erstellt werden
    • Startseite
      • Willkommensnachricht
    • Über mich
      • Ein beispiel Profilfoto einbinden
      • Hobbies
      • Aufzählung von Lieblingsspeisen
      • Tabelle für Sprachen: English - Gut; Deutsch - Muttersprache
    • Was habe Ich bisher gelernt
      • Linkzusammenfassung von den verwendeten Tools (Intellij, Java, Mysql, Github)
      • Für 1-2 Tools ein Video auf Youtube suchen und das Video einbetten
      • Link zum eigenen GitHub-Account einbinden (mit GitHub Icon daneben)
    • Impressum
      • Standardimpressum oder Dummytext

Aufgabe: Hässlichste Website Ever

Verwende dazu den Ordner web/[Name]/ugly/ im git Repository.

Erstelle eine beliebige Website mit tollen Animationen, und super Farben. Gerne können auch spezielle Javascript Effekte wie 3d Rotation oder ähnliches verwendet werden. 

!!!Je Bunter desto besser!!!

Aufgabe: Javascript Clicker

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erstelle eine simple Website, wird auf den Button geklickt so soll in einem Text angezeigt werden wie oft der Button geklickt wurde.

Javascript Clicker Beispiel

Aufgabe: Javascript Clicker Persistant

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erweitere das vorhergehende Beispiel um die dauerhafte Speicherung des Counters. Dafür soll die Storage API[2] verwendet werden.

Aufgabe: Javascript Add Element

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erstelle eine simple Website, wird auf den Button geklickt so soll nun ein HTML Element mit dem Zeitpunkt des Klicks hinzugefügt werden.

Javascript Element hinzufügen

Aufgabe: Javascript Remove Element

Verwende dazu den Ordner web/[Name]/javascript/ im git Repository.

Erweitere das vorhergehende Beispiel um die Möglichkeit ein Element wieder zu löschen.

Javascript Element löschen

Aufgabe: Single Page Application

Verwende dazu den Ordner web/[Name]/chuckNorris/ im git Repository.

Es kann auch gerne eine andere API verwendet werden, einige findet ihr hier[3]. Es soll aber vom Umfang und den Funktionen dem unten beschriebenen Text entsprechen.

Es soll eine Webseite erstellt werden in der Chuck Norris Witze gesucht und gespeichert werden können. Hierfür gibt es eine API[4].

  • Zufälligen Witz anzeigen
  • Witze nach Text suchen
  • Gefundene Witze speichern
  • Gespeicherte Witze löschen
  • Witze sollen im Localstorage des Browsers gespeichert werden
Abgerufen von „https://ccwiki.digitalcampusvorarlberg.at/index.php?title=Web_uebungen&oldid=2280“