Recherche Aufgabe: Pixel- vs. Vektorgrafik

Beschäftigt euch mit dem Thema Computergrafik. Hier gibt es zwei wichtige Unterschiede: Pixel- und Vektorgrafik.

  • Was sind die Unterschiede?
  • Stelle die Vor- und Nachteile zusammen.
  • Stelle die wichtigsten Dateiformate (Dateiernamensweiterung, Hersteller, Produkt) zusammen.

Stelle die Informationen übersichtlich in einer Word-Datei zusammen.

Computergrafik – Einführung

Schau dir obiges Video an und beantworte folgende Fragen:

  1. Erkläre den Unterschied zwischen Pixel- und Vektorgrafik.
  2. Erkläre die zwei Hauptmerkmale einer Pixelgrafik: Bildauflösung und Farbtiefe.
  3. Nenne die wichtigsten Datentypen für Pixel- und Vektorgrafiken.

Sollte Du in dem Vortrag nicht fündig werden, muss Du wohl Google bemühen.

HTML-Grundgerüst

Das HTML-Grundgerüst wird in den meisten Fällen nur per Copy&Paste übernommen. Viele IDEs (integrierte Entwicklungsumgebung) bieten die Möglichkeit, ein Grundgerüst als Snippet (Codeschnipsel) schnell und einfach einzufügen.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>

Weitere Informationen zum HTML-Grundgerüst

Heute geht es aber darum, das Grundgerüst zu verstehen und die Struktur zu erkennen.

ElementBeschreibung
<!DOCTYPE html>Der Doctype informiert den Browser mit welcher HTML-Version das Dokument zu dekodieren ist. Die Angabe html steht für den Standard HTML5 (aktuelle HTML-Version) Doctype bei selfhtml
<html lang=“de“>…</html>Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Baum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht.
<head>…</head>Das Head-Element enthält Metainformationen zur jeweiligen HTML-Seite.
<title>…</title>Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Z. B. im Tab des Browsers. Ein Title-Element gehört zwingend zu einem validen HTML-Dokument.

Und damit sind wir schon mitten drin im HTML-Seiten erstellen. Doch damit wir unsere erste eigene Seite anlegen können, brauchen wir erst mal einen entsprechenden Editor.

Scratch-Projekt: Programmiere ein kleines Zahlenratespiel mit Scratch

  • Dein Programm soll sich eine Zahl zwischen 1 und 100 ausdenken und du musst sie erraten.
    Hierfür brauchst du einen Zufallsgenerator, der sieht so aus:

Du findest ihn bei den Operatoren. Wie kannst du die Zufallszahl einer Variablen zuweisen?

  • Bei jeder Zahl, die du eingibst, sagt dir das Programm, ob deine Zahl zu groß oder zu klein ist. Du brauchst also 2 Variablen und musst sie vergleichen, auch dazu brauchst du Operatoren wie =, > oder < und Verzweigungen, wie du sie unten siehst.
    Überlege wie du die Variablen schlau nennst, damit mal gleich versteht, wozu die jeweilige Variable da ist.
  • Du brauchst auch eine Schleife (Wiederholung) damit dein Programm dich so lange frägt, bis du die Zahl erraten hast.
  • Versuche herauszufinden, wie du deine Ein- und Ausgaben machen kannst. Das beste deutsche Nachschlagewerk zu Scratch findest du auf scratch-wiki.info
  • Natürlich dein Spiel auch verraten, wenn du die Zahl erraten hast. Hier solltest du einen Applaus einbauen.
  • Versuche erst mal die einzelnen Fragen zu lösen und die Lösungen dann in die richtige Reihensole. Was muss wann passieren?

Für funktionierende Lösungen, kann eine mündliche 1 eingetragen werden.

Aufgabe für den 12.3.2024: Karel-Aufgabe 10 – solveTheMaze


und hier könnt ihr Thonny kostenlos herunterladen:

https://thonny.org/

Für eine funktionierende Lösung gibt es eine mündliche 1

Studiere den Aufbau Labyrinths sorgfältig. Das Labyrinth enthält sowohl Kreuzungen als auch Sackgassen, aber keine Schleifen. Halte Kontakt mit der linker Wand und du sollten den Peeper finden!

Beschäftigt euch noch mal gründlich mit While-Schleifen und Verzweigungen.

Verzweigungen sind bedingte Aufführungen von Programmabschnitten.

if front_is_clear():
    move() 
    # Ich gehe nur,   
    # wenn es vor mir frei ist
elif eine_weiter_Bedignung():
    mach was_anderes()
else:
    mach_noch_was_ganz_anderes()

Du brauchst eine While-Schleife und eine etwas komplizierte Verzeigung. Bitte keine starre Programmierung!

Die Main-Funktion meiner Lösung hat 13 Zeilen. Als zusätzliche Funktionen gibt es nur turn_right() und turn_around().

Zeichne ein Schachbrett mit Turtle-Graphics

  1. Erzeuge ein Fenster mit 640 x 640 Pixel und zeichne 64 Qudrate (Seitenlänge 80 Pixel) abwechselnd in den Farben Schwarz und Weiß. Schau dir dazu die folgenden Befehle an:
    • Screen().setup()
    • begin_fill(), end_fill(), fillcolor()
    • bgcolor()
  2. Erkunde zunächst den Aufbau des Fensters. Stichwort „absolute Koordinaten“. Bisher haben wir Turtle mit forward() immer in eine vorher festgelegt Richtung gehen lassen.
    Schau dir folgende Befehle/Funktionen dazu an
  3. Für das abwechselnde Einfärben braucht ihr noch den folgenden Operator.
    Hier wird erklärt, wie der Modulo-Operator funktioniert. Versucht mal herauszufinden, wie ihr in Einsetzen könnt.

Aufgabe für den 28.11.2023 Erstelle eine HTML-Seite

Erstellt eine Internetseite mit mindestens 3 Unterseite (Also insgesamt 4 html-Dateien + 1 css-Datei) in der über ein Menü (für jede Seite ein Link) miteinander verknüpft sind zu einem Thema eurer Wahl.

Sucht euch ein Thema aus, am besten eins das euch wirklich interessiert, sonst wird es schnell langweilig.

Jede Seiten sollten mehrere Überschriften, min. 200 Zeichen Text und min. 3 Bilder enthalten.

Formatiert die Seiten mit CSS. Informiert euch auf selfhtml.org weiter zu CSS Eigenschaften, die ihr benötigt. Verwendet min. 10 Eigenschaften pro Seite. Dort könnt ihr auch nochmal nachlesen wie

Abhängig von eurem Wissensstand könnt ihr euch hier weiteren Informationen holen.

Für eurer Ergebnis gibt es nächste Stunde Feedback und eine Note. Anschließend werden wir an der Seite weiterarbeiten und weitere Feedbackschleifen werden folgen.