Leitfaden für das Website-Projekt

Umfang: Entwickle eine Webseite – bestehend aus vier HTML-Seiten. Eine dieser vier Seiten ist das Impressum, eine “Anbieterkennung”, aus der hervorgeht, dass Du der Urheber der Webseite sind (siehe Datei impressum.doc im Arbeitsmaterial) - auf eine extra Seite Impressum.

Elemente: Verwende dafür die im Unterricht kennengelerneten Elemente wie Überschriften, Unterüberschriften, Listen, CSS, Links, Bilder und Tabellen.

Welche Software verwenden? Es wird empfohlen, für das Projekt den Editor Sublime und einen Browser Deiner Wahl (Microsoft Edge, Mozilla Firefox, Google Chrome) zu verwenden.

Die benötigte Software kannst Du hier downloaden.

Du erhälst ein Starter-Projekt, mit dem Du Dein Projekt umsetzen kannst.
(Nach dem Download und Entpacken kannst Du beginnen, die Stil-Dateien und Verzeichnisse im Projekt anzulegen, die Metadaten zu erfassen Die Verzeichnisse js/ und css/ sind für Bootstrap notwendig.)

• Basis leer ist das Projekt, mit dem Du von Beginn an ein Projekt ohne Bootstrap aufsetzt. Es zeigt eine leere weiße Seite und Du kannst gleich beginnen. Download basis-leer.zip
• Basis Rahmen ist das Projekt, mit dem Du mit einer Seite beginnst, die ohne Bootstrap ein Rahmenprojekt aufsetzt und an dem Du arbeiten kannst. Es ist zu empfehlen, wenn Du Dich gegen Bootstrap entscheidest und aber von Grund auf beginnen möchtest. Download basis-rahmen.zip
• Bootstrap leer ist das Basisprojekt, das eine komplett leere Seite zeigt. Mit diesem Starter-Projekt kannst Du von Anfang an frei gestalten und dabei das Framework Bootstrap einsetzen. Download bootstrap-leer.zip
  
• Bootstrap Rahmen ist das Basisprojekt, das aber keine leere Seite zeigt, sondern schon einen Rahmen vorgibt. Dieser kann natürlich angepasst werden nach eigenen Wünschen. Wem ein Rahmen hilft, der schon einige Vorgaben macht, der dann dieses Basisprojekt verwenden. Download bootstrap-rahmen.zip

Wichtig für die Bewertung ist neben der technischen korrekten Umsetzung das Engagement. Es handelt sich um eine Projektarbeit und da sollst Du zeigen, was Du gelernt hast und ggfs. auch über den Tellerrand schauen kannst. Für eine sehr gute (!) Bewertung ist das Nutzen von Responsive WebDesign erforderlich. Engagement kann zudem gezeigt werden, indem Du nicht “nur” die bestehende Fahrschul-Webseite abänderst auf Deine Bedürfnisse, sondern eigene kreative Ideen einbringst - und dabei darfst und sollst Du alle Ressourcen nutzen, die Dir im Web zur Verfügung stehen.

Sichere Deine Daten nicht nur auf Deinem USB-Stick, sondern auch im H-Laufwerk und zu Hause auf dem PC ab. Verlorener, defekter USB-Stick oder zerstörte Festplatte können dazu führen, dass viel Arbeit verloren geht.

Den Abgabezeitpunkt der Projektarbeit findest Du in der Projektübersicht. Gib dazu eine ZIP-Datei mit allen Projektdaten (HTML-Webseite und das Abgabedokument ausgefüllt) ab. Für spätere Abgaben gibt es einen Abzug von 0,5 Noten pro Tag auf die Projektarbeit. Hinweis: der Sublime Editor muss und soll natürlich nicht mit abgegeben werden.

Bewertet wird die Vollständigkeit der Anforderung (fünf HTML-Seiten mit den kennengelernten Elementen), technische Korrektheit (Einrückung, Links), inhaltlich (Strukturierung), Originalität / Engagement und Rechzeitigkeit der Abgabe.

Haben Sie Fragen? Versuchen diese mit den Mitschülern zu klären, ansonsten darfst Du Deine Fragen auch gerne per Messenger oder Email an matthias.hirt@dws-vs.de klären.

Verwende …

• die HTML-Lernplattform
• das Web für Recherchen
• (Sprach-, Bild-) KIs

Verwende einen geteilten Bildschirm: auf der einen Seite die Lernplattform und Webseite, auf der anderen Seite den Editor Sublime. So kannst Sie gut parallel arbeiten, abspeichern und Dir gleich die Ergebnisse ansehen.

Öffne das Projekt, indem Sie über File > Open Folder den gewünschten Ordner öffnen.

Benenne die Dateinamen stets klein, ohne Umlaute, ohne Leerzeichen – so werden dumme Fehler schnell beseitigt.
Verwende als Startseite den Dateinamen Startseite.html → index.html
Verwende nur Kleinbuchstaben: Autos.html → autos.html
Verwende keine Leerzeichen: Informationen Autos.html → informationen-autos.html
Verwende keine Umlaute: getränke.html → getraenke.html

Empfehlung: übe ein, Shortcuts zu verwenden, damit kannst Du langfristig einfach schneller arbeiten.
STRG + X → Ausschneiden, STRG + C → Kopieren, STRG + V → Einfügen und STRG + S zum Speichern

Prüfe, ob Sie korrekten HTML-Code geschrieben haben, indem Sie auf Tools > W3C Validators > HTML5 gehen. Alternativ können Sie den Shortcut Windows-Taste + STRG + V drücken. Aktueller Hinweis: funktioniert zur Zeit nicht.