Trennung von Inhalt und Design

Ein extrem großer Vorteil von CSS ist die Trennung des Designs vom eigentlichen Inhalt, der in HTML-Dateien steckt. Das Design wird dazu in eine eigene Datei ausgelagert und kann dann für alle Seiten eines Internetauftritts verwendet werden. Werden dann Änderungen am Design gemacht, sind durch diese gemeinsame CSS-Datei sofort alle Einzelseiten auf dem neuesten Stand.

Beispiel

CSS Zen Garden: The Beauty of CSS Design

Testbeitrag

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut

Grundlagen Gaming mit Godot

Godot ist eine freie Spiel-Engine. Sie besteht aus einem grafischen Editor, in dem Spielelemente in einer Baumstruktur organisiert und auf einer 2D- oder 3D-Leinwand angeordnet werden. Die Spiellogik wird üblicherweise in GDScript implementiert, einer eigenen integrierten Skriptsprache, deren Syntax an Python angelehnt ist und speziell an die Bedürfnisse von Spiel-Engines angepasst wurde. [Quelle: Wikipedia]

Allgemeine Links

Tutorials

Grundlagen Webentwicklung

Was du eigentlich lernen musst, ist HTML, CSS und evtl. JavaScript (je nachdem wir tief du in das Thema einsteigen willst.

Ich persönlich mag den Youtube-Kanal The Morpheus Tutorials, hier findest du sehr viele fachlich gute Tutorials zum vielen IT-Themen.

Ich nutze und schätze folgende Online-Doku zum Webentwicklungsthemen:

Hier im Unterricht benutzen wir notepad++. Ich bevorzuge Visual Studio Code.

Zusatzaufgabe: Snake in Scratch

Hier findest du ein Tutorial für ein Snake-Spiel, programmiere es nach und beschäftige dich mit Scratch. Schick mir bis zum 23.5.2024 den Link zu deinem Ergebnis per Mail an markus.hacker@ezsh.de. Wenn du Probleme hast, kannst du auch am 23.5. noch in meine BdF-Station (Raum 2.29) kommen. Vergiss nicht, dich bei deiner normalen Station abzumelden.

Hier die Blockseite von Silicon Valley Kids mit dem nötigen Material und das ganze Tutorial nochmal als Text.

assets.zip

Übung: Flagge Zentralafrikanischen Republik

Information zur Flagge findet ihr auf Wikipedia

<!DOCTYPE html>
<html>
<body>

<h1>Zentral Afrikanische Rebublik</h1>

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
   <!-- Dies ist ein HTML-Kommentar -->
   <!-- Und das ist der Stern den ihr braucht, die Stelle passt auch schon so ungefähr -->
   <polygon points="40,25  45,50   65,50  50,65 60,85  40,70  20,85  30,65   15,50   35,50" fill="yellow" />
   
 </svg>
</body>
</html>

Erarbeitung ERD/ERM

Liebe 10-2,

um größere Datenmengen in eine Datenbank zu überführen, gibt es ein Modell, das sich bewährt hat: das Entity-Relationship-Modell. „Entitäten“ sind dabei Objekte der Wirklichkeit und „Relationen“ sind die Beziehungen zwischen ihnen. Den Prozess, einen Ausschnitt aus der Wirklichkeit in ein Modell zu überführen, nennt man „Modellierung“.

  1. Erarbeitet euch die Darstellung per Entity-Relationship-Diagramm (ERD). Ein gutes Video findet ihr z.B. hier: https://youtu.be/fVbYB_34v-E?feature=shared
  2. Übertragt unser Shop-Beispiel aus der letzten Übung in ein ERD.
  3. Ich empfehle https://app.diagrams.net/ für die Erarbeitung.

Lösung bis 2.5. per Mail oder dBildungscloud an mich!

Viel Erfolg!