Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:cv_project [2023-11-02 06:10] – [Bewertung] gra
+++ gf_informatik:web:cv_project [2025-04-02 06:32] (aktuell) – [Ziele] gra
@@ Zeile 16: / Zeile 16: @@
 . Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik:web:uebungen#auftrag1|Auftrag 1]]).
 . Erstelle darin eine Datei `index.html`. Gebe diesem die Grundstruktur, die jede HTML-Datei benötigt.
+. Optional: Überlege erst, wie du deine Webseite mit folgendem Inhalt gestalten willst und erstelle ein Skizze auf Papier. Vorteil: Du weisst jetzt schon, welche html-Elemente für deine Darstellung sinnvoll sind.
 . Verfasse nun den **Inhalt** der Website. Die Website muss enthalten:
 . Dein Name als Hauptüberschrift
@@ Zeile 28: / Zeile 29: @@
 . Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, ... Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.
 . Formatiere die Seite mit einer eingebundenen CSS-Datei.
-. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende `id` und `class`, um einzelne resp. ausgewählte Elemente zu stylen.
+. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende `class` oder `id`, um einzelne resp. ausgewählte Elemente zu stylen.
 . *Optional:* Informiere dich über [[gf_informatik:web:gridlayout]]. Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.
 . **Abgabe:**
-. Erstelle ein ZIP-File mit *allen* für die Website benötigten Dateien: `index.html`, `style.css`, alle Bilder, ... (Brauchst du Hilfe dazu? [[https://www.youtube.com/watch?v=Kw9gB4iqUAQ|Zip-Tutorial für Windows]], [[https://www.youtube.com/watch?v=SUlI3-3mkU0|Zip-Tutorial Mac]])
+. Erstelle ein ZIP-Archiv mit *allen* für die Website benötigten Dateien: `index.html`, `style.css`, alle Bilder, ... (Brauchst du Hilfe dazu? [[https://www.youtube.com/watch?v=Kw9gB4iqUAQ|Zip-Tutorial für Windows]], [[https://www.youtube.com/watch?v=SUlI3-3mkU0|Zip-Tutorial Mac]])
-. Benenne das ZIP-File nach dem Muster "klasse\_vorname\_nachname.zip", z.B. "2mgz\_dagobert\_duck.zip" und gebe es über die **Teams-Abgabe** ab.
+. Benenne das ZIP-Archiv nach dem Muster "klasse\_vorname\_nachname.zip", z.B. "2mgz\_dagobert\_duck.zip" und gebe es über die **Teams-Abgabe** ab.
+. Wenn du das ZIP-Archiv an einem anderen Ort entpackst, sollte die Webseite nach dem Öffnen korrekt dargestellt werden. Achtung: es ist normal, dass die Webseite nicht korrekt dargestellt wird, wenn `index.html` direkt aus dem Archiv geöffnet wird - dann kann die CSS-Datei nicht gefunden werden.
 ===Bewertung===
@@ Zeile 45: / Zeile 47: @@
       * Korrekte Abgabe mit Zip-Archiv.
     * Wer mehr möchte als das Minimum, bietet:
-      * Aufwendigere Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation...)
+      * Gutes Design (professioneller Gesamteindruck, durchgehendes Farb- und Schriftkonzept, einheitliche Abstände...)
+      * Aufwändige Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation, Transitions...)
       * Ansprechendes Layout mit CSS
+        * [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|SelfHTML CSS Tutorials]]
         * z.B. mit [[gf_informatik:web:gridlayout]]
-        * Layout passt sich an Fenstergrösse an
+        * Layout passt sich an Fenstergrösse an (ausprobieren!)
-        * Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus)
+        * Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus, [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Viewportangabe|Viewportangabe]] verwenden)
       * ev. [[gf_informatik:web:js]]
     * **Achtung**: Du musst jede Zeile deiner HTML- und CSS-Datei verstehen und erklären können.