2. Arbeitshinweise

 empfohlene Arbeitsmittel:

• • als Editor ein textbasierter Editor mit Code-Komplettierung, z.B.

    • Brackets 

    • Microsoft Visual Studio Code

    • Notepad++

    • Geany

  • eine super Online-Variante wäre jdoodle: https://www.jdoodle.com/html-css-javascript-online-editor/ , hier kann man sich ein Konto anlegen und seine Projekte in der Cloud ablegen und sogar kollaborativ arbeiten.

  • zum Nachschlagen:

    •  self-HTML 

    • Webkompetenz - das HTML-Handbuch

    • sehr gutes Tutorial: http://www.w3schools.com/

  • HTML-Seminar, auch mit Videos

    • oder die Anleitung von Nicole Wellinger

  • diverse Browser zum Testen

Organisation und Speicherung:

• • Lege einen neuen Ordner in deinen eigenen Dateien (Laufwerk H:) an und nenne diesen „htmlprojekt_" gefolgt von der Klasse und vom Nachnamen und den ersten 2 Buchstaben des Vornamens, also z.B. „htmlprojekt_10-x_piontekjo“. Bei mehrfachen Nachnamen erhöht sich die Zahl.

  • Für Ordner- und Dateinamen sind nur erlaubt: Kleinbuchstaben, Ziffern, jedoch keine Umlaute, Leerzeichen oder Sonderzeichen außer dem Bindestrich (-) oder dem Unterstrich (_).

  • Benenne die Startdatei mit „index.html“. In dieser HTML-Datei muss auch der vollständige Name und die Klasse enthalten und lesbar sein.

  • Speichere alle von dir verwendeten Bilder und Dateien in dem gleichen Ordner, oder besser in einem Bilder-Unterordner.

  • Wenn das Projekt beendet ist, kopierst du den Ordner mit dem kompletten Inhalt, je nachdem  wie vom Lehrer angegeben,  in die Dateiablage bei Lernsax bzw. in den angegebenen Ordner im Netzwerk. (Das machen wir auch nochmal zusammen.)

Kontrolle und Bewertung:

Es werden 2 verpflichtende Zensuren für das Projekt vergeben.

• • Zensur 1 (Pflicht): Korrekte und vollständige Anwendung der HTML-Elemente, Anspruch, Effizienz und Vielseitigkeit.

  • Zensur 2 (Pflicht): Korrekte und umfassende Gestaltung mit CSS, allg. Gestaltungsmerkmale, auch Gesamteindruck

  • Zensierungskriterien Zensur 1 und 2:

    1. Mindestens 4 miteinander verlinkte einzelne Seiten mit sinnvollem Inhalt.
       Die einzelnen Seiten sollen thematisch die Struktur des Inhaltes abbilden oder verstärken.
       Sinnvolle Gliederung. 6 P

    2. Auf jeder Seite müssen mindestens 2 verschiedene Gestaltungselemente vorkommen. Das können per CSS gestaltete Überschriften, Animationen, Aufzählungen, Tabellen, Galerien usw. sein.
       Es müssen mindestens 4 verschiedene Gestaltungselemente im gesamten Projekt mindestens einmal vorkommen.
       Mindestens 3 Bilder (z.B. Fotos, Karten oder Diagramme), die vorher entsprechend bearbeitet werden (Bildbearbeitung, Web-gerechte Anpassung), müssen im Projekt enthalten sein. Dazu siehe auch den Abschnitt "Grafiken in HTML" 6 P

    3. Die Navigation zwischen den einzelnen Seiten des Projektes muss sinnvoll und bequem sein, man muss mindestens immer wieder zur Startseite zurückkehren können.
       Die Einbindung von externen Websites per Links muss in mindestens einem Fall erfolgen. 6 P

    4. Die Gestaltung der Seiten muss mittels einer externen CSS-Datei für das komplette Projekt erfolgen.
       Einzelne Elemente können auch separat gestaltet werden (CSS im Tag des Elements). Das CSS muss die komplette Seitengestaltung übernehmen. 6 P

    5. Gestalterische, inhaltliche und optische Aspekte, Rechtschreibung. 6 P

    6. Allgemeine Fehlerfreiheit und Konsistenz, Coolness-Bonus 4 P

Gesamt 34 P

• • Zensur 3 (optional): Programmierung mit Java Script 

  • Zensierungskriterien Zensur 3:

• Note 1: Super Anwendung, komplex, mit eigenen Ideen und außergewöhnlich 

• Note 2: voll funktionsfähig, sinnvolle Funktionen, eigenes Design

• Note 3: im Wesentlichen funktionsfähig, weitgehend übernommenes Design

• Note 4: kleine Mängel in der Funktion oder im Design

• Note 5: größere Mängel in der Funktion

• Note 6: funktionsunfähig und sinnlos

An den unten genannten Tagen ist der letztmögliche Abgabetermin. Alle Projekte werden mit Stand an diesem Tag auf die jeweiligen Bereiche hin bewertet.

Abgabe der Website (HTML+CSS): 26.05.2024

empfohlene Vorgehensweise:

• 1. Entwickeln einer Sitemap, also eines Planes, welchen Inhalt die im Projekt enthaltenen Seiten beinhalten sollen, z.B. als Mindmap.

  2. Vorüberlegungen zur Navigation innerhalb des Projektes (Position der Nav., welche Links).

  3. Grundüberlegungen zum Design, also Farben, Schriftarten und Schriftgrößen, Hintergrund.

  4. Entwicklung der Startseite (index.html).

  5. Dabei zuerst nur den Inhalt eintragen (kopieren und einfügen), eventuelle Bilder platzieren und die Navigation einrichten.

  6. Dazu ist es sinnvoll, alle weiteren Seiten bereits als leere Seiten mit Dummy-Text oder nur Überschriften anzulegen, um die Navigation zu testen.

  7. Erstellung des Stylesheets als eigenständige Datei (externes Stylesheet).

  8. Abschließend Erarbeitung der Grundlagen der Java Skript Programmierung und Entwicklung eines Multiple-Choice-Quiz.

Weiter