Projektarbeit: Lebenslauf [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
===== Projektarbeit: Lebenslauf =====

===Ziele===

   * Eine einfache Website mit einem kurzen Lebenslauf zu dir erstellen.
   * Dadurch das bisher Gelernte (Grundlagen HTML & CSS) anwenden und festigen.
   * Selbständig arbeiten, Anweisungen genau lesen und befolgen können.

Die Resultate werden innerhalb der KSR aufgeschaltet und können von anderen besichtigt werden (begründete Ausnahmen möglich).

**Zeit:** Zwei Lektionen im Unterricht plus selbständige Arbeit.

===Auftrag===

   1. Erstelle einen neuen Ordner `lebenslauf`.
   1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik:web:uebungen#auftrag1|Auftrag 1]]).
   1. Erstelle darin eine Datei `index.html`. Gebe diesem die Grundstruktur, die jede HTML-Datei benötigt.
   1. 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.
   1. Verfasse nun den **Inhalt** der Website. Die Website muss enthalten:
      1. Dein Name als Hauptüberschrift
      1. Foto von dir.
      1. Folgende Unterkapitel mit entsprechendem Inhalt:
         1. "Steckbrief" als Liste (Wichtigste Daten wie Geburtsdatum, Wohnort, ...)
         1. "Hobbies"
         1. "Bisherige Schulen"
         1. "Lieblingswitz"
         1. "Traum-Ferienziel" (kurze Beschreibung mit Foto aus Internet)
         1. Optional: weitere Kapitel
    1. Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, ... Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.
    1. Formatiere die Seite mit einer eingebundenen CSS-Datei.
    1. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende `class` oder `id`, um einzelne resp. ausgewählte Elemente zu stylen.
    1. *Optional:* Informiere dich über [[gf_informatik:web:gridlayout]]. Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.
    1. **Abgabe:**
       1. 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]])
       1. 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.
       1. 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===
    * Der Lebenslauf zählt als halbe Note.
    * Verspätete Abgabe kostet einen Notenpunkt Abzug.
    * Minimal-Ziel (ca. die Note 4):
      * echter Lebenslauf für dich gemäss obigem Auftrag
      * Trennung von Inhalt (HTML) und Darstellung (CSS)
      * HTML: Verwendung von Überschriften, Bild, Liste, Hyperlink
      * CSS: Ansprechende Formatierung (Farben, Text-Stil)
      * Korrekte Syntax (Struktur HTML, Einbindung CSS, Dateiformate...)
      * Korrekte Abgabe mit Zip-Archiv.
    * Wer mehr möchte als das Minimum, bietet:
      * 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 (ausprobieren!)
        * 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.

** Beispiel**
  * {{ :gf_informatik:web:cv.zip |cv.zip}}

** Hinweise & Tipps **
      * Elemente wie Bilder links oder rechts [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/float_und_clear|positionieren]]
      * Verhindern, dass der Inhalt zu breit wird: Gib dem `<body>` eine [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grundstruktur#Maximale_Breite_festlegen|max-width]] von vielleicht `60em` und eine `margin: 0 auto;`
      * Breite von Elementen steuern über [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/width|width]]