(Feuerstein / Möbius - WS 20/21)
|
Praktikumsaufgaben:
-
Webserver-Account
Lassen Sie sich von Ihrem Übungsgruppenleiter pro Arbeitsgruppe einen Account auf
dem Webserver www-it.math.uni-wuppertal.de
einrichten.
Loggen Sie sich per ssh auf dem Rechner www-it ein und erstellen Sie eine
(ggf. inhaltsleere) Homepage unter dem Namen index.html.
Ein Muster finden Sie unter
http://www-it.math.uni-wuppertal.de/~intech/Material/HTML/geruest.html.
-
Urheberrecht / Copyright
Lesen Sie die Seite
Urheberrecht / Copyright
im Internet+WWW-Kurs (B. Zimmermann).
Informieren Sie sich außerdem bei
heise online
über die finanziellen Risiken, die mit der Veröffentlichung
einer eigenen Homepage verbunden sind.
Weiterführende Informationen:
-
HTML
Arbeiten Sie den
HTML-Kurzlehrgang
(M. Altenhein) durch.
Informieren Sie sich desweiteren über den
die Reformulierung von HTML 4.01 in XHTML 1.0
sowie die
Unterschiede zwischen XHTML und HTML.
Hinweis: Es steht Ihnen im folgenden frei, Ihre Webseiten in HTML oder XHTML zu erstellen!
-
Web-Design
Informieren Sie sich über
die goldenen Regeln für schlechtes HTML.
-
Eigener Webauftritt
- Ende der Bearbeitungszeit: 22.11.2020, 2 Punkte
Erstellen Sie eine Website
(vgl. http://de.wikipedia.org/wiki/Website),
die (mindestens) aus einer Startseite in Ihrem public_html-Verzeichnis besteht.
Gestalten Sie Ihre Seiten so, dass als Zeichensatz-Codierung 8-Bit Unicode
(utf-8) verwendet wird und Sie deutsche Sonderzeichen
(Ä,Ö,Ü,ä,ö,ü,ß) direkt im
HTML-Quelltext verwenden können. Siehe dazu:
Erstellen Sie, d.h. jede an den praktischen Übungen teilnehmende Person,
individuelle Homepages, die über die Startseite Ihres Webauftritts per Hyperlink
erreichbar sind.
Überprüfen Sie dabei, ob die Zugriffsrechte (eXecute permission bzw. Write permission für
others) der Pfade und der Dateien korrekt eingestellt sind.
Nutzen Sie auf Ihren individuellen Seiten (mindestens) folgende HTML-Elemente:
- Verschiedene Schriftgrößen (Header)
- Graphiken
- Hyperlinks
Hinweis: Für sämtliche zu erstellenden Webseiten der folgenden Aufgaben
ist als Zeichensatz-Codierung utf-8 obligatorisch!
-
Webimpressum
- Ende der Bearbeitungszeit: 22.11.2020, 1 Punkt
Erstellen Sie (z.B. mit Hilfe eines
Webimpressum-Generators)
ein Impressum (z.B. für einen freiberuflich tätigen Menschen)
und integrieren Sie es in Ihre Website.
-
HTML-Syntaxcheck
- Ende der Bearbeitungszeit: 22.11.2020, 1 Punkt
Überprüfen Sie alle erstellten Webseiten auf syntaktische Korrektheit
durch den W3C Markup Validation Service
und korrigieren Sie etwaige Fehler.
Versehen Sie dazu Ihre Webseiten insbesondere mit dem für die Überprüfung
notwendigen DOCTYPE-Switch
(vgl. Grundgerüst).
Ergänzen Sie auf allen erstellten Webseiten Links für eine automatisierte
Syntaxüberprüfung (wie unten rechts auf dieser Seite).
Hinweis: Für sämtliche zu erstellenden Webseiten der folgenden Aufgaben
ist syntaktische Korrektheit obligatorisch, d.h. fehlerhafte Seiten werden nicht bewertet!
-
Sonderzeichen auf HTML-Seiten
Testen Sie mithilfe der
HTML Zeichenreferenz
auf Ihren Webseiten das Euro-Zeichen (€), das erzwungene Leerzeichen ( )
und das Trennzeichen (­).
Testen Sie auch spezielle Sonderzeichen durch die Verwendung kleiner
(GIF-/JPEG-)Bilder (vgl.
http://plato.stanford.edu/symbols/).
-
HTML-Tabellen
- Ende der Bearbeitungszeit: 22.11.2020, 1 Punkt
Erstellen Sie eine Webseite mit Tabellen.
Nutzen Sie auf dieser Seite (mindestens) die HTML-Tags
<table>, <th>, <tr>, <td>
und folgende Tabelleneigenschaften:
- Zelle über mehrere Spalten
- Zelle über mehrere Zeilen
- Tabelle innerhalb einer Zelle über mehrere Zeilen und Spalten.
-
Cascading Stylesheets (CSS)
Eignen Sie sich Grundlagen zu Cascading Stylesheets an. Einige Quellen:
-
Erstellung und Einbindung einer externen CSS-Datei
- Ende der Bearbeitungszeit: 29.11.2020, 1 Punkt
Erstellen Sie eine externe CSS-Datei für Ihre Website und binden Sie diese in
sämtliche Ihrer Webseiten ein.
Nutzen Sie dabei (mindestens) folgende CSS-Formatierungen:
- Hintergrundbild für Ihre Seiten
- Standard-Schriftart für die Tags: body, p
- Farben für die verschiedenen Zustände von Hyperlinks (anchor tags)
- Folgende Formatierungen für Überschriften (header tags):
- h1: beliebige Schriftgröße Ihrer Wahl
- h2: beliebige Schriftfarbe Ihrer Wahl (außer Schwarz)
- h3: unterstrichen
- h4: kursiv
- h5: eine andere Schriftart Ihrer Wahl
- h6: eine weitere sinnvolle Formatierung Ihrer Wahl
- Formatierungen in Tabellen gemäß folgender Tabellen-Tags:
- table: durchgezogene Rahmen (collapsed borders)
- th: unterstrichener Text
- tr: eine beliebige Hintergrundfarbe Ihrer Wahl für genau eine Zeile (Hinweis: Nutzen Sie einen Klassenselektor!)
- td: beliebige Rahmenstil und -farbe Ihrer Wahl
Ein Muster finden Sie unter
http://www-it.math.uni-wuppertal.de/~intech/Material/HTML/CSS/.
Überprüfen Sie Ihre CSS-Datei auf syntaktische Korrektheit
durch den W3C CSS Validation Service
und korrigieren Sie etwaige Fehler.
-
DHTML
Arbeiten Sie in der (historischen!)
Entwicklungsumgebung zur Erstellung von (D)HTML-Dokumenten
für MathePrisma-Module die Beschreibung von dynamischen
Seitenelementen (DHTML/JavaScript) durch.
-
Dynamische HTML-Seiten, Frames und Weiterleitungen im WWW
- Ende der Bearbeitungszeit: 13.12.2020, 3 Punkte
Informieren Sie sich ausgehend von
W3C Quality Web Tips
über die verschiedenen Möglichkeiten einer automatischen
Weiterleitung von einer URL auf eine andere.
- Was sind die wesentlichen Unterschiede der besprochenen Methoden?
- Was ist bei Verwendung der (META-)refresh-Technik
unbedingt zu beachten?
- Für welche Anwendungen sollte man grundsätzlich die
HTTP redirect-Methode anstelle der refresh-Technik verwenden?
Erstellen Sie außerdem mehrere (syntaktisch korrekte, utf-8-codierte) (D)HTML-Seiten, die
in einem Frameset dargestellt werden
(Methoden, Attribute und Schlüsselwörter finden sich in Klammern):
- Navigations- und Hauptbereich
Über einen Navigationsbereich (links) sollen verschiedene
Inhalte (HTML-Seiten) in den Hauptbereich (rechts) geladen
werden.
- Probleme und Gefahren
Welche Probleme ergeben sich bei solch einem Webseitenaufbau?
Berücksichtigen Sie bei Ihrer Antwort auch die Unterschiede zwischen Frames,
eingebetteten Frames (iFrames)
und CSS-basierten Techniken
(Alternativen zu Frame-basierten Layouts).
Stellen Sie diese Probleme auf einer durch einen Link im Navigationsbereich
in den Hauptbereich zu ladenden HTML-Seite übersichtlich zusammen.
- Schutz: Laden auf oberstem Level
Schützen Sie Ihren Frameset (via DHTML)
gegen das Laden innerhalb eines anderen Framesets,
sorgen Sie also dafür, dass Ihr Frameset stets auf oberster
Ebene (also nicht innerhalb eines Frames) geöffnet wird
(onLoad, window.top.location.replace).
Als Beispiel können Sie die
Internettechnologien-Homepage
verwenden.
- Test für das Laden auf oberstem Level
Erstellen Sie einen Link im Navigationsbereich, der den Frameset selbst
in den Hauptbereich lädt.
- "fremde" Inhalte
Erstellen Sie einen Link im Navigationsbereich, der eine "fremde"
Webseite in den Hauptbereich lädt.
- Bildüberblendung
Erstellen Sie eine im Navigationsbereich für den Hauptbereich
verlinkte DHTML-Seite, in der ein Bild bei Mauskontakt durch ein
anderes Bild gleicher Größe ersetzt wird.
Ohne Mauskontakt soll stets das ursprüngliche Bild sichtbar sein.
- Fenster öffnen
Erstellen Sie im Navigationsbereich einen Link, so dass sich beim
Klick auf diesen Link eine Seite hint.html in einem neuen
Fenster öffnet (open). Dieses Fenster soll weder
Werkzeugleiste (toolbar) noch Statuszeile (status)
besitzen und an der vorgegebenen Bildschirmposition (50,50) in der
vorgegebenen Größe 300x200 Pixel geöffnet werden.
Beim Verlassen des Frameset soll das Hinweis-Fenster automatisch
geschlossen werden (onUnload).
- automatische Weiterleitung
Erstellen Sie eine Weiterleitung, bei der von einer per Navigationsbereich-Link
im Hauptbereich zu öffnenden Webseite refresh.html
per (META-)refresh-Technik nach einer Verzögerung von zwei Sekunden
automatisch auf eine (ebenso im Hauptbereich anzuzeigende) Webseite weitergeleitet wird,
auf der Ihre Antworten zu den obigen drei Fragen zu
HTTP redirect und (META-)refresh zu finden sind
(vgl. noindex.html).
Binden Sie sämtliche Seiten in Ihre Website ein.
Weiterführende Informationen:
-
JavaScript und jQuery
Informieren Sie sich über die Fähigkeiten von JavaScript in Kombination mit der
Bibliothek jQuery (Methoden: click, hide und css) auf
-
jQuery
- Ende der Bearbeitungszeit: 03.01.2021, 1 Punkt
Binden Sie die lokale jQuery-Datei
als lokale Kopie oder per Link in einer Webseite ein.
- Entfernung
Benutzen Sie die jQuery Methode hide, um Ihre Bildüberblendung
aus Aufgabe 13 um eine Entfernung beim Klicken-Funktion zu erweitern.
Beim Klick auf Ihr Bild soll dieses verschwinden. Die Eigenschaften der
Bildüberblendung bei Mauskontakt sollen jedoch beibehalten werden.
- CSS-Überlagerung
Verwenden Sie die jQuery-Methode css um mindenstens zwei Attribute
(z.B. Farbe und Größe) eines HTML-Elementes (z.B. p oder table)
bei einem Klick auf einen Button (z.B. einen div-Container, ein Bild oder
eine kleine Tabelle) zu ändern.
Binden Sie die Seite(n) in Ihre Website ein.
Hinweis:
-
Alternativen zu Frames
- Ende der Bearbeitungszeit: 03.01.2021, 1 Punkt
Erstellen Sie analog zu Aufgabe 13 eine weitere Version Ihrer (D)HTML-Seiten auf Basis
einer alternativen Technik ohne Nutzung regulärer Frames:
- eingebettete Frames (iFrames)
- CSS-basierte Techniken.
-
MIME Types / Helper Applications
Lesen Sie den Artikel über
MIME Media Types.
Wie lautet der MIME Media Type der Anwendung Microsoft Word? (vgl. FILExt)
Konfigurieren Sie die Browser Firefox, Seamonkey und
Konqueror so, dass das Programm Ghostview (Kommando: gv)
als Helper-Applikation für die Darstellung von
Postscript-Dateien (Dateiendung: ps,
MIME-Type: application/postscript) verwendet wird.
Wie unterscheiden sich die Konfigurationsmethoden?
Testen Sie die Konfiguration mit Postscript-Dateien, die
z.B. zu finden sind unter
http://www2.math.uni-wuppertal.de/teach/lect/.
-
E-Mail
Informieren Sie sich über
die goldenen Regeln für schlechte E-Mails.
Über die ZIM-Seite
Mail-Konfiguration
können Sie die Einstellungen Ihres Studierenden-E-Mail-Accounts ändern.
Wie konfigurieren Sie einen eigenen sinnvollen E-Mail-Alias-Namen? Welche Einschränkungen gibt es? Warum?
Welche Form von E-Mail-Account-Namen ist international üblich?
Wie können Sie ein Forwarding auf dem E-Mail-Server mail.uni-wuppertal.de
und wie auf der Server lsrv0.studs.math.uni-wuppertal.de aktivieren?
-
LDAP-Adressbücher
Richten Sie einen E-Mail-Client Ihrer Wahl für den Zugriff auf folgende
LDAP-Adressbuch-Server ein:
- LDAP-Server des ZIM:
kontakte.uni-wuppertal.de (Basis-DN: ou=university,dc=uni-wuppertal,dc=de)
- LDAP-Server der Fachgruppe Mathematik und Informatik:
imap.math.uni-wuppertal.de (Basis-DN: dc=math,dc=uni-wuppertal,dc=de)
- LDAP-Server der Ausbildungsrechnerpools der Fachgruppe Mathematik und Informatik:
lsrv0.studs.math.uni-wuppertal.de (Basis-DN: dc=studs,dc=math,dc=uni-wuppertal,dc=de)
-
PHP / MySQL
Eignen Sie sich Grundlagen zu PHP und MySQL an. Einige Quellen:
-
.htaccess
- Ende der Bearbeitungszeit: 03.01.2021, 1 Punkt
Erstellen Sie
.htaccess-Dateien
für folgende Zwecke:
- Passwortschutz
Schützen Sie ein Unterverzeichnis in Ihrer Website durch den
Benutzernamen Marvin und das Passwort Galaxis.
Zur Erstellung der Passwortdatei können Sie u.a. das Programm
/usr/bin/htpasswd2 verwenden.
- Zugriff für spezielle IP-Adressbereiche
Lassen Sie den Zugriff auf ein Unterverzeichnis ausschließlich
für die Hosts des IT-Pools (132.195.132.129/28) und den Rechner l24 des CIP-Pools (132.195.132.88) zu.
- Individuelle Fehlermeldungen
Bei Anforderung einer nicht vorhandenen Datei (ErrorDocument 404) soll der
Webserver per local redirect-Methode automatisch eine (von Ihnen zu
erstellende) Datei err404.html öffnen,
auf der Sie auf den aufgetretenen Fehler hinweisen.
Nach nach einer Verzögerung von vier Sekunden soll dann eine automatische
Weiterleitung auf die Homepage Ihrer Website erfolgen.
Erstellen Sie analoge Weiterleitungen für Seitenanforderungen mit
fehlgeschlagener Authentifikation (ErrorDocument 401)
sowie Zugriffsverweigerungen (ErrorDocument 403).
- Indexdateien
(vgl. Apache Dokumentation)
Sorgen Sie dafür, dass in Ihrer Website neben der Datei index.html
auch Dateien index.htm und default.html als
Standardindexdateien verwendet werden können.
Konfigurieren Sie außerdem ein spezielles Verzeichnis ohne Indexdatei derart,
dass
- die Dateien nach ihrer Größe aufsteigend sortiert aufgelistet werden,
- jeweils erklärende Texte unter Description erscheinen und
- alle Dateien der Typen *.txt und *.conf ausgeblendet werden
und verlinken Sie dieses Verzeichnis in Ihrem Navigationsbereich.
-
Rotationsverschlüsselung (PHP/MySQL)
- Ende der Bearbeitungszeit: 10.01.2021, 2 Punkte
Erstellen Sie ein PHP-Script für die
Rotationsverschlüsselung
(auch: Verschiebechiffre oder Caesar-Verschlüsselung):
- Die Buchstaben des Alphabets werden zyklisch um eine festen Wert,
die Schlüsselzahl, rotiert.
- Klein- und Grossbuchstaben werden getrennt behandelt.
- Sämtliche nicht-Buchstaben (Leerzeichen, Sonderzeichen) sowie Umlaute und
"ß" werden nicht berücksichtigt, also nicht verschlüsselt.
Ist etwa die Schlüsselzahl 2, so hat man folgende Zuordnung:
Text: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Code: C D E F G H I J K L M N O P Q R S T U V W X Y Z A B c d e f g h i j k l m n o p q r s t u v w x y z a b
und man kann damit ver-/entschlüsseln:
Originaltext: Internet-Technologien sind toll!
chiffrierter Text: Kpvgtpgv-Vgejpqnqikgp ukpf vqnn!
Aufgabe:
-
Lesen Sie in einem PHP-Script die zu entschlüsselnden Geheimtexte sowie
die jeweiligen Schlüsselzahlen per MySQL-Abfrage ein:
- Datenbankserver: www-it.math.uni.wuppertal.de (bzw. localhost)
- User/Password: student/sehrgeheim
- Datenbank: Kryptotext
- Tabelle: Geheimtexte
- Felder: Text, Schluessel
-
Geben Sie anschliessend alle eingelesenen verschlüsselten Texte, die
Schlüsselzahlen sowie die entschlüsselten Texte aus.
- Integrieren Sie das PHP-Script in Ihre Website.
Hinweise:
-
Berechnung von Schaltjahren (PHP/MySQL)
- Ende der Bearbeitungszeit: 17.01.2021, 2 Punkte
Erstellen Sie ein PHP-Script für die Berechnung von Schaltjahren:
- Die Jahreszahl eines jeden Schaltjahres ist durch vier teilbar,
- ist eine Jahreszahl durch 100 teilbar und nicht durch 400, so ist das Jahr kein Schaltjahr.
Aufgabe:
-
Lesen Sie in einem PHP-Script die zu überprüfenden Jahreszahlen
per MySQL-Abfrage ein:
- Datenbankserver: www-it.math.uni-wuppertal.de (bzw. localhost)
- User/Password: student/sehrgeheim
- Datenbank: Jahreszahlen
- Tabelle: Jahre
- Feld: Jahr
-
Geben Sie anschließend alle eingelesenen Jahreszahlen aus, wobei
Schaltjahre und Gemeinjahre (Nichtschaltjahre) entsprechend markiert
oder sortiert sind.
- Integrieren Sie das Script in Ihre Website.
Hinweise:
-
ssh mit Schlüsselpaaren
- Ende der Bearbeitungszeit: 24.01.2021, 1 Punkt
Welche Vorteile bietet das Arbeiten mit ssh mit einem Schlüsselpaar?
Erzeugen sie mittels ssh-keygen ein eigenes Schlüsselpaar und
benutzen Sie es, um sich ohne Eingabe eines Passwortes von den IT-Rechnern
an Ihrem Account auf dem Webserver www-it anmelden zu können.
Welche Vorteile bietet der zusätzliche Einsatz von ssh-agent und ssh-add?
Was ist unter der Option ForwardAgent in der ssh-Konfigurationsdatei zu verstehen?
Quellen:
-
Pretty Good Privacy (pgp/gpg)
- Ende der Bearbeitungszeit: 31.01.2021, pro Person zu bearbeiten, 1 Punkt
Informieren Sie sich über
GnuPG.
Symmetrische Verschlüsselung mit Passphrase:
- Verschlüsseln Sie eine Textdatei durch das symmetrische AES-Verfahren mit 256-Bit-Schlüssellänge
unter Verwendung einer Passphrase.
- Löschen Sie anschliessend die ursprüngliche (unverschlüsselte) Datei
und entschlüsseln Sie dann die zuvor verschlüsselte Datei.
Asymmetrische Verschlüsselung von Dateien:
- Erzeugen Sie sich ein RSA-Schlüsselpaar (Länge 2048 Bit)
zum Ver-/Entschlüsseln und Signieren von Dateien.
- Extrahieren Sie Ihren öffentlichen Schlüssel in eine
ASCII-Datei, um ihn bei Bedarf weitergeben zu können.
- Lassen Sie Ihren öffentlichen Schlüssel von einer Kommilitonin
oder einem Kommilitonen signieren.
- Besorgen Sie sich die öffentlichen Schlüssel Ihres
Übungsgruppenleiters
und fügen Sie diese Schlüssel Ihrem
öffentlichen Schlüsselring zu.
- Kodieren Sie eine Textdatei mit dem öffentlichen Schlüssel
Ihres Übungsgruppenleiters und senden Sie ihm diese per E-Mail-Dateianhang.
- Konfigurieren Sie Ihren E-Mail-Client für die Benutzung von PGP/MIME, indem Sie z.B.
GnuPG und in Thunderbird das AddOn
Enigmail konfigurieren,
und senden Sie Ihrem Übungsgruppenleiter eine verschlüsselte und unterschriebene (signierte) E-Mail
mit der obigen Textdatei aus der letzten Teilaufgabe als Dateianhang.
Hinweis: Nutzen die die Manual Pages (man gpg).
-
Erwerb eines kostenlosen Class 1 Zertifikats (Beschreibung für SeaMonkey/Mozilla)
- Entscheiden Sie sich für einen Rechner/Mailserver, über den Sie sichere und
vertrauenswürdige E-Mail nutzen wollen.
- Senden Sie von diesem eine Test-E-Mail an eine(n) Bekannte(n) und lassen Sie
sich von diesem/r einen Ausdruck derselben geben.
Entnehmen Sie diesem Ausdruck Buchstabe für Buchstabe Ihre als Absender im
Internet erscheinende Mail-Adresse (FROM-Zeile).
- Beantragen Sie ein
kostenloses E-Mail-Zertifikat
ein kostenloses E-Mail-Zertifikat (der Klasse 1) für ihre E-Mail-Adresse.
- Benutzen Sie keine Umlaute! Beim Absenden des Formulars wird ein privater
und der zugehörige öffentliche S/MIME-Schlüssel erzeugt, in Ihrem Mail-Client
abgespeichert und der öffentliche Schlüssel an die CA
zur Beglaubigung der Übereinstimmung des Besitzers der E-Mail-Adresse
mit dem Beantrager des Zertifikats übersandt.
- Dazu bekommen Sie eine E-Mail mit der Beschreibung für Ihr
weiteres Vorgehen zugesandt.
- Die CA sollte bereits als vertrauenswürdige Zertifizierungsstelle
in Ihrer Zertifikatsdatenbank erfasst sein. Sollten dennoch CA-Zertifikate fehlen, so
lassen sich diese von der Website der CA nachinstallieren (Anklicken der Download-Links).
- Kurz nach der Absendung Ihrer Bestätigungantwort an die CA
bekommen Sie eine E-Mail zugesandt und können Ihr Zertifikat durch
Klicken auf die dort eingebaute URL in Ihren Browser übernehmen.
-
X.509 (S/MIME) Zertifikate
Schaffen Sie die Voraussetzungen für S/MIME-unterzeichnete und -verschlüsselte E-Mail:
- Beantragen Sie (gemäß obiger Beschreibung) ein (kostenloses) X.509 Zertifikat.
- Besorgen Sie sich mit Hilfe der Suchfunktion der entsprechenden CA oder von der
Homepage der Übungsgruppenleiter
den öffentlichen Schlüssel Ihres Übungsgruppenleiters.
- Schicken Sie Ihrem Übungsgruppenleiter (an die korrekte Adresse!)
eine verschlüsselte (encrypted) und
unterzeichnete/beglaubigte (signed) E-Mail.
- Ergänzen Sie jeweils Ihre persönliche Homepage auf Ihrer
Website um einen Link auf Ihren öffentlichen Schlüssel und
um den zugehörigen Fingerprint (MD5).
|
|
