Die grundsätzlichen HTML und CSS Komponenten
für ein Formular im Google "Material Design"
nach dem "Mobile First" Prinzip.

Aufgabenstellung

Für spätere Aufträge soll die HTML und CSS Komponente eines neutralen Kontakt-Formulars vorbereitet werden. Die Gestaltung des Formulars soll am Konzept "Material-Design" von Google orientiert sein. Es ist freigestellt mit welchen Input-Elementen gearbeitet wird. Das Formular soll in HTML und CSS umgesetzt werden. Dynamische Funktionen wie eine Anbindung an eine Datenbank oder Versenden einer E-Mail werden später hinzugefügt.


Anforderungen

  • Das Formular soll für ein Smartphone im Hochformat (Portrait) entworfen werden. Die Breite des Geräte-Viewport ist 400 Pixel.
  • Anrede (z.B. Frau, Herr) und Titel (leer, Dr., Prof.)
  • Vorname und Nachname (Erlaubte Zeichen sind Buchstaben und Bindestrich)
  • Geburtsdatum
  • E-Mail (valide E-Mail)
  • Straße und Hausnummer
  • Postleitzahl (5 Zahlen)
  • Stadt (30 Buchstaben)


Zusatzaufgabe Formular Video-Tutorial

Erstellen Sie in Teamarbeit eine schriftliche Erklärung zu der Funktion zu einem der Formular-Eingabe-Elementen. Setzen Sie ihren Text anschließend als Screencast um.



Zusatzaufgabe § 13 Telemediengesetz (TMG)

Das Oberlandesgericht Köln hat am 11.03.2016 die Berufung gegen ein vom Landgericht Köln verkündetes Urteil zurückgewiesen. Somit wird einer Abmahnung bezüglich unterlassener Angaben bei einem Formular statt gegeben. Analysieren Sie Urteil und dazugehörige Berichte. Ergänzen Sie dann ihr Formular um für den Kunden Rechtssicherheit im Sinne von § 13 Telemediengesetz (TMG) zu gewährleisten.

Urteil vom Oberlandesgericht Köln.

Bericht zu dem Urteil auf Ratgeberrecht.eu.



Bonus Technologie Analyse

Sebastian Lyserena aus Dänemark hat mit Hilfe von Formular-Inputs einen interessanten Domino-Effekt erzeugt. Analysieren Sie seine Vorgehensweise bei der Umsetzung.

http://sebastianlyserena.dk



Bewertung

  • Funktionstüchtige Eingabe-Elemente in HTML (15 Punkte)
  • Eigenständige und ausführliche Kommentare im Quellcode (5 Punkte)
  • Optimiert für Smartphone und orientiert sich am "Material Design" (15 Punkte)
  • Zusatzaufgabe Formular Video-Tutorial (10 Punkte)
  • Zusatzaufgabe § 13 Telemediengesetz (TMG) (5 Punkte)
  • Konstruktive, beständige Mitarbeit und Logbuch Einträge (50 Punkte)
  • Zusätzliche Leistungen können individuell gewertet werden


Abgabetermin

  • 22. Kalenderwoche, 27. Mai 2016

Ressourcen

CODEBeschreibung
Skript

Im kostenlosen CODE Skript sind umfangreiche ergänzende Informationen und die gesamten Tabellen der Übersichten zu den HTML Elementen und CSS Eigenschaften, Scripts, Layout und andere Aspekte des Webdesigns wie z.B. praktische Beispiele für Javascript, PHP und MySQL.

CODE-Skript 1617 (7.7 MiB)



Empfohlene Software

Diese kostenlose Open Source Software hat sich vielfach bewährt.

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
XamppKostenloser Server für alle Betriebssysteme um PHP und Datenbaken zu nutzen und lokal auf dem eigenen Computer zu entwickeln.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
FileZillaWenn eine Webseite auf einen Webserver hochgeladen werden muss, wird meist das File-Transfer-Protokoll (FTP) benutzt. Um z.B. Daten auf einen Server im Internet zu spielen benötigst Du eine FTP Software. Filezilla ist eine sehr gute und kostenlose Lösung für alle Betriebssysteme. Mit dem FTP Programm lassen sich auch Lese- und Schreibrechte festlegen. Ebenso andere Sicherheitsaspekte wie .htaccess insofern dies nicht über den Dienst des Webserver gesteuert wird.
material

Material Design bei Google ist eine Empfehlungen für das Design von Web-Anwendungen hinsichtlich Form, Icons, Text, Layout, Farbe und Animation.

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit