www.plusplanet.de
Schulinfos von F. Töns

20.06.2023

Link zum Formular für diese Stunde
http://www.plusplanet.de/formular_pjk/index.php

Und hier der Direktlink zur Ergebnis-Text-Datei
http://www.plusplanet.de/formular_pjk/formular_pjk.txt

09.05.2023

Hinweise zum Endprojekt: 20230509_pjk_abschlussprojekt.zip

Erinnerung: Abgabetermin des Projekts ist der 2. Juni! $/!\$

02.05.2023

21.03.2023

Fahrplan für heute:
1. Festlegung von Kriterien zur Bewertung von Websites aus Design-Perspektive
2. Abgabe der Mini-Projekte
2b. Währenddessen beurteilt ihr die Websites Düsseldorfer Schulen aus Design/Kunst-Perspektive nach den vorher festgelegten Kriterien
3. Mini-Einführung in JavaScript

Dein Name:
Deine Rückmeldung:

GBG: www.gbg-duesseldorf.de
GBG: Logodesign_________________Punkte (Gewichtung:10%)
GBG: Auswahl (Stock)fotos_______Punkte (Gewichtung:10%)
GBG: Übersichtlichkeit__________Punkte (Gewichtung:10%)
GBG: Originalität/Kreativität___Punkte (Gewichtung:10%)
GBG: User-Experience____________Punkte (Gewichtung:10%)
GBG: Guter Content______________Punkte (Gewichtung:10%)
GBG: Farbwahl___________________Punkte (Gewichtung:10%)
GBG: Gesamteindruck_____________Punkte (Gewichtung:30%)
GBG:-----------------------------------------------------
GBG: Gesamtnote_________________Punkte

MPG: https://max-planck.com/
MPG: Logodesign_________________Punkte (Gewichtung:10%)
MPG: Auswahl (Stock)fotos_______Punkte (Gewichtung:10%)
MPG: Übersichtlichkeit__________Punkte (Gewichtung:10%)
MPG: Originalität/Kreativität___Punkte (Gewichtung:10%)
MPG: User-Experience____________Punkte (Gewichtung:10%)
MPG: Guter Content______________Punkte (Gewichtung:10%)
MPG: Farbwahl___________________Punkte (Gewichtung:10%)
MPG: Gesamteindruck_____________Punkte (Gewichtung:30%)
MPG:-----------------------------------------------------
MPG: Gesamtnote_________________Punkte

LMG: https://www.leibniz-montessori.de/
LMG: Logodesign_________________Punkte (Gewichtung:10%)
LMG: Auswahl (Stock)fotos_______Punkte (Gewichtung:10%)
LMG: Übersichtlichkeit__________Punkte (Gewichtung:10%)
LMG: Originalität/Kreativität___Punkte (Gewichtung:10%)
LMG: User-Experience____________Punkte (Gewichtung:10%)
LMG: Guter Content______________Punkte (Gewichtung:10%)
LMG: Farbwahl___________________Punkte (Gewichtung:10%)
LMG: Gesamteindruck_____________Punkte (Gewichtung:30%)
LMG:-----------------------------------------------------
LMG: Gesamtnote_________________Punkte

CCG: https://homepage.ceci.de/
CCG: Logodesign_________________Punkte (Gewichtung:10%)
CCG: Auswahl (Stock)fotos_______Punkte (Gewichtung:10%)
CCG: Übersichtlichkeit__________Punkte (Gewichtung:10%)
CCG: Originalität/Kreativität___Punkte (Gewichtung:10%)
CCG: User-Experience____________Punkte (Gewichtung:10%)
CCG: Guter Content______________Punkte (Gewichtung:10%)
CCG: Farbwahl___________________Punkte (Gewichtung:10%)
CCG: Gesamteindruck_____________Punkte (Gewichtung:30%)
CCG:-----------------------------------------------------
CCG: Gesamtnote_________________Punkte

FRG: https://www.rueckert-gymnasium.de/
FRG: Logodesign_________________Punkte (Gewichtung:10%)
FRG: Auswahl (Stock)fotos_______Punkte (Gewichtung:10%)
FRG: Übersichtlichkeit__________Punkte (Gewichtung:10%)
FRG: Originalität/Kreativität___Punkte (Gewichtung:10%)
FRG: User-Experience____________Punkte (Gewichtung:10%)
FRG: Guter Content______________Punkte (Gewichtung:10%)
FRG: Farbwahl___________________Punkte (Gewichtung:10%)
FRG: Gesamteindruck_____________Punkte (Gewichtung:30%)
FRG:-----------------------------------------------------
FRG: Gesamtnote_________________Punkte



GBG: www.gbg-duesseldorf.de

GBG: Logodesign           :  7 Punkte (Gewichtung:20%)

GBG: Auswahl (Stock)fotos :  7 Punkte (Gewichtung:10%)

GBG: Übersichtlichkeit    :  8 Punkte (Gewichtung:20%)

GBG: Farbwahl             :  8 Punkte (Gewichtung:20%)

GBG: Gesamteindruck       : 12 Punkte (Gewichtung:30%)

GBG: Gesamtnote           : 9.1 Punkte



MPG: https://max-planck.com/

LMG: https://www.leibniz-montessori.de/

CCG: https://homepage.ceci.de/

FRG: https://www.rueckert-gymnasium.de/

07.03.2023

Auto-Layout für den Body-Teil eines HTML-Dokuments: https://htmltidy.net/
Prüfprogramm für HTML-Dokumente: https://validator.w3.org/

Bewertungskriterien für eine Webseite:
a) Der HTML-Validator https://validator.w3.org/ muss vollständig und möglichst fehlerfrei durchlaufen.
b) Der HTML-Code muss lesbar sein (ggf. mit https://htmltidy.net/ aufhübschen)
c) Bilder müssen aussagekräftige alt-Texte haben
d) Es muss klar gekennzeichnet werden, falls fremder Code benutzt wird.

07.02.2023

Eine Visuelle Referenz für Flexbox-Layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

29.11.2022

Kleine Computer-Grundlagen-Tour

• Erstelle auf dem Desktop ein Verzeichnis mit dem Namen "pjk_training"
• Erstelle ein Dokument (ein einfacher Kurztext wie "Hallo Informatik" genügt) in der Textverarbeitungssoftware "Libre-Office" mit dem Namen gruss.odt und speichere es ab in dem Ordner "pjk_training"
• Erstelle ein Dokument in dem Programm "Notepad" oder "Notepad++" (beides auf dem Desktop zu finden) mit dem gleichen Text wie in der vorigen Aufgabe und dem Namen gruss.txt. Auch Dieses Dokument soll wieder in dem Verzeichnis "pjk_training" abgespeichert werden.
• Schaue Dir den Inhalt des Ordners "pjk_training" mit dem Datei-Explorer an und erkläre, welche Unterschiede die beiden abgespeicherten Dateien besitzen.
• Tastaturtraining: Erstelle in Notepad++ eine Kopie von folgendem kleinen Bärchen und speichere Dein Ergebnis unter tier.txt im Ordner "pjk_training":

• Kopiere dieses Bärchen in ein neues Libre-Office-Dokument mit Namen tier.odt hinein und erkläre, warum die Grafik nicht mehr schön aussieht.
• Es gibt nun zwei odt-Dateien im "pjk_training"-Ordner. Erstelle jeweils ein PDF aus diesen Dateien.
• Erstelle eine Grafik - kein Text! - mit dem Inhalt "PJK bei TOE" und speichere die Datei in den drei unterschiedlichen Formaten jpg, png und bmp unter den Namen grafik.png (bzw. grafik.jpg und grafik.bmp). Die Dateien sollen in dem Unterordner "bilder" innerhalb des Ordners "pjk_training" gespeichert werden.
• Erstelle einen Screenshot und speichere diesen ebenfalls im Unterordner "bilder".
• Fotografiere mit deinem Handy deine Schuhe und transferiere das Bild (wie auch immer!) auf deinen Rechner und speichere das Bild ebenfalls im Unterordner "bilder".
• Bei den Kindern aus der 6. Klasse habe ich Ordnerstrukturen mit folgendem Bild erklärt:
Bild "Informatik Klasse 6 (SJ 22/23):20220926_if6_ordnerstruktur_mit_dateien.jpg.output2_tn.jpg"

Bild "Informatik Klasse 6 (SJ 22/23):20220926_if6_ordnerstruktur_mit_dateien.jpg.output2_tn.jpg"

Erstelle eine Textdatei mit Namen pfade.txt im Ordner "pjk_training", in denen alle Dateipfade aufgelistet sind. Dabei gehen wir davon aus, dass die Ordnerstruktur auf einem USB-Stick auf Laufwerk D: liegt.
• Erstelle eine zip-Datei aus deinem Ordner, ändere den Namen in "pjk_training_fritzi" (oder wie auch immer dein Name lautet) und lade sie hoch auf den Abgabeordner.

Falls Du mit der Aufgabe fertig bist, so hilf anderen!
Falls es nichts mehr zu helfen gibt, beschäftige Dich bitte mit folgenden beiden Links, baue den Effekt nach und erkläre ihn:
https://codepen.io/sdthornton/pen/wBZdXq
https://codepen.io/vavik96/pen/yNoBYK

Projektkurs "Webdesign"

15.11.2022

Bitte benutzt folgendes Rückmeldeformular:

25.10.2022

Fahrplan für heute:

a) fremde Seiten sichten / "surfen" und bestimmte Design-Elemente heraussuchen, die ihr besonders cool oder besonders hässlich findet.
b) Erstellt ein Bewertungsraster für ein Design: Wonach sollte sich TOE richten?
c) Designe eine schöne Antwortseite für die Antwortseite des Rückmeldeformulars (siehe unten)

Bitte benutzt folgendes Rückmeldeformular:

Referatsthemenzuordnung:



M.B: Cybersecurity am Beispiel Session Hijacking: erst HTTP-Cookies erklären, dann Session Cookies, dann https://en.wikipedia.org/wiki/HTTP_cookie#Cookie_theft_and_session_hijacking

S.W.: Rechtliche Rahmenbedingungen

E.E.: -Farben (RGB etc.) BEISPIELPFLICHT

A.O.: 1.Grundlagen (Vorschlag: Übersicht über wichtige HTML-Tags und was sie bewirken ) BEISPIELPFLICHT

M.M.: Javascript (Nutung von JS für Webdesign: z.B. Programmierung eines "onMouseOver"-Effekts) BEISPIELPFLICHT

J.C: Templatesysteme (z.B. Wordpress, mozilo, Typo3, Joomla, Flatpress): Analyse eines bestehenden Templates BEISPIELPFLICHT

D.HP.: Bildformate fürs Web (png jpg gif webp) BEISPIELPFLICHT

M.T.: CSS-selektoren BEISPIELPFLICHT

M.K.: Neue HTML Tags, die mit HTML5 dazugekommen sind. Ausgewählte Beispiele und warum war die Situation vorher unbefriedigend? BEISPIELPFLICHT

A.K.: 1. Barrierefreiheit: Blindenschrift, Screenreader BEISPIELPFLICHT

F.A.: CSS-Animation BEISPIELPFLICHT

R.G.: 1. Flexblox  oder 3.svg BEISPIELPFLICHT

D.EJ.: Video Einbinden und Videoformate fürs Web  BEISPIELPFLICHT

A.E.: Spezielle Designelemente (hier darfst Du dich austoben) BEISPIELPFLICHT

18.10.2022

Referatsthemen:
• Grundlagen: CSS-Selektoren (classes ids Pseudoklassen)
• Grundlagen: HTML-Tags <i>blalbal</i>
• Flexbox
• Farbe auf dem Computer: RGB, HSV Farbräume
• Einheiten (em,px,ex,pc ... Druckausgabe, Bildschirmausgabe)
• CSS-Animationen
• svg
• Videos einbinden
• Text-Enconding (UTF-8, Ansi)
• JavaScript
• HTML HTTP FTP SMPT usw: Webtechnologien
• Serverseitiges Scripting: PHP JSP CGI PERL ...
• Barrierefreiheit: Blindenschrift, Screenreader ...
• SEO
• Templatesysteme (z.B. Wordpress)
• Bildformate fürs Web (png jpg gif webp)
• Videoformate fürs Web
• Tondokumente fürs Web
• Rechtliche Rahmenbedingungen
• Spezielle Designelemente: Scrollbares Ribbon, DropDown-Menus, Animierte Icons, CSS-Animationen, Halbtransparente Elemente über Hintergrundbild
• Minimalistischer Nachbau einer bekannten Seite

Ich bin für weitere Themen offen.

18.10.2022

Bitte benutzt folgendes Rückmeldeformular:

27.09.2022

Basisdaten für das Flexboxtutorial: https://www.youtube.com/watch?v=dD8kgEOw1To
Eine Visuelle Referenz für Flexbox-Layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/



<!DOCTYPE html>

<html lang="de">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Titel</title>

    <style>

	body { 

		height: 100%;

		background-color: #333;

	}

	.parent {

		height: 800px;

		background-color: #444;

		padding: 1px;

	}

	.child{

		width: 50px;

		height: 50px;

		background-color: #3FA9F5;

		color: white;

		text-align: center;

		padding: 30px;

		margin: 10px;

		font-size: 40px;

		font-family: Arial, Helvetica, sans-serif;

		font-weight: bold;

	}

	</style>

  </head>

  <body>

	<div class="parent">

	<div class="child container1">1</div>

	<div class="child container2">2</div>

	<div class="child container3">3</div>

	<div class="child container4">4</div>

	</div>

	<div style="background-color: #999; padding: 10px;">

		<a href="https://www.youtube.com/watch?v=dD8kgEOw1To">Siehe das verlinkte Video!</a>

	</div>

  </body>

</html>

Ein Projekt, um die Flexbox-kenntnisse zu testen:



<!DOCTYPE html>

<html>

<head>

<title>TODO</title>

<meta charset="UTF-8">



<script>

'use strict';





// Berechnet alle Teiler der Zahl a

// Beispiel: Teilemenge(24) ist 1,2,3,4,6,8,12,24

//           Teilemenge(25) ist 1,5,25

// Ergebnis: eine Zeichenkette der Art "1,2,3,4,6,8,12,24"

function teilermenge(a) {

    return "Todo!";

}



// Berechnet die Fakultät der Zahl a

// Beispiel: faku(5) ist 1*2*3*4*5 = 120

// Ergebnis: eine ganze Zahl.

function faku(a) {

	return "Todo!";

}



// Berechnet die Summe aller Zahlen von 1 bis a

// Beispiel: summeBis(5) ist 1+2+3+4+5 = 15

// Ergebnis: eine ganze Zahl.

function summeBis(a) {

	return "Todo!";

}



// Berechnet das kleinste gemeinsame Vielfache der beiden Zahlen a und b.

// Beispiel: kgV(12,8) ist 24, denn sowohl 12*2=24 und 8*3=24

//           und es gibt keine kleinere Zahl mit dieser Eigenschaft.

// Ergebnis: eine ganze Zahl.

function kgV(a,b) {

	return "Todo!";

}

// Berechnet den größten gemeinsamen Teiler der beiden Zahlen a und b.

// Beispiel: ggT(12,8) ist 4, denn sowohl 12 und 8 sind durch 4 teilbar

//           und es gibt keine größere Zahl mit dieser Eigenschaft.

// Ergebnis: eine ganze Zahl.

function ggT(a,b) {

	var ergebnis = 1;

	for(var i = a; i >= 1; i--) {

		if((istPTeilbarDurchQ(a,i)=="ja") && (istPTeilbarDurchQ(b,i) == "ja")) {

			ergebnis = i;

			break;

		}

	}

	return ergebnis;

}



// Überprüft, ob die testzahl eine Primzahl ist.

// Die 1 ist keine Primzahl, 2 ist eine Primzahl (Spezialfälle)

// 3 ist eine Primzahl, 4 ist keine Primzahl, da 2*2 = 4 ist. usw.

// Ergebnis: "ja" oder "nein"

function istPrimzahl(testzahl) {

	var ergebnis = "ja";

	if(testzahl == 1) {

		return "nein";

	}

	for(var i = 2; i < testzahl; i++) {

		if(istPTeilbarDurchQ(testzahl,i)=="ja") {

			ergebnis = "nein";

		}

	}

	return ergebnis;

}



// Überprüft, ob die Zahl p durch die Zahl q (ohne Rest) teilbar ist.

// Beispiel: 16 ist durch 8 teilbar, denn  16 durch 8 = 2

//           16 ist aber nicht durch 12 teilbar, denn 16 durch 12 = 1 Rest 4

// Ergebnis: "ja" oder "nein"

function istPTeilbarDurchQ(p,q) {

	if((p%q) == 0) {

		return "ja";

	} else {

		return "nein";

	}

}



function reaktion() {

    document.getElementById('dummy').innerHTML = ""; // Dummytext entfernen

	

    var za = document.getElementById('myInputZahlA').value;

    var zb = document.getElementById('myInputZahlB').value;



    var ergebnis = "";

	ergebnis = ergebnis + "Ist Zahl A durch B teilbar? " + istPTeilbarDurchQ(za,zb) + "<br>";

	ergebnis = ergebnis + "Ist Zahl B durch A teilbar? " + istPTeilbarDurchQ(zb,za) + "<br><br>";

    document.getElementById('teilbarkeit').innerHTML = ergebnis;



	ergebnis = "";

	ergebnis = ergebnis + "Ist Zahl A eine Primzahl? " + istPrimzahl(za) + "<br>";

	ergebnis = ergebnis + "Ist Zahl B eine Primzahl? " + istPrimzahl(zb) + "<br><br>";

    document.getElementById('primzahl').innerHTML = ergebnis;

	

	ergebnis = "";

	ergebnis = ergebnis + "Der ggT von A und B ist: " + ggT(za,zb) + "<br><br>";

	ergebnis = ergebnis + "Das kgV von A und B ist: " + kgV(za,zb) + "<br><br>";

    document.getElementById('ggt').innerHTML = ergebnis;

	

	ergebnis = "";

	ergebnis = ergebnis + "Die Teilermenge von Zahl A ist: " + teilermenge(za) + "<br>";

	ergebnis = ergebnis + "Die Teilermenge von Zahl B ist: " + teilermenge(zb) + "<br><br>";

    document.getElementById('teilermenge').innerHTML = ergebnis;

	

	ergebnis = "";

	ergebnis = ergebnis + "Die Fakultät von Zahl A ist: " + faku(za) + "<br>";

	ergebnis = ergebnis + "Die Fakultät von Zahl B ist: " + faku(za) + "<br><br>";

    document.getElementById('fakultaet').innerHTML = ergebnis;

	

	ergebnis = "";

	ergebnis = ergebnis + "Die Summe 1+2+3+ ... + Zahl A ist: " + summeBis(za) + "<br>";

	ergebnis = ergebnis + "Die Summe 1+2+3+ ... + Zahl B ist: " + summeBis(zb) + "<br><br>";

    document.getElementById('summe').innerHTML = ergebnis;

	



}





</script>

<style>

div {

	border: 1px solid black;

	border-radius: 5px;

}

</style>



</head>



<body>



	<h1>Mathematische Untersuchungen</h1>

	

	<div>

		<div id="teilbarkeit">

		</div>

		<div id="primzahl">

		</div>

		<div id="ggt">

		</div>

		<div id="teilermenge">

		</div>

		<div id="fakultaet">

		</div>

		<div id="summe">

		</div>

		<div id="dummy">

		(Es wurde noch nichts generiert!)

		</div>

	</div>

	<br><br><br>

	<div>

		Zahl A<input type="text" id="myInputZahlA"> <br>

		Zahl B<input type="text" id="myInputZahlB"> <br>

		<input type="button" onClick="reaktion();" value="Klick"><br>

	</div>

	<br><br>

	<div>

		<b>Aufgaben:</b><br>

		1) Optimiere den Primzahltest: Man muss nicht alle Elemente bis zur Testzahl durchprobieren.<br>

		2) Optimiere die ggT-Berechnung: Man muss höchstens bis zur kleineren der beiden Zahlen durchprobieren.<br>

		3) Schreibe die noch fehlenden Funktionen.<br>

	</div>

</body>

</html>

20.09.2022

Fahrplan für heute:
• CSS zentral in einer Datei definieren/ extern definieren (siehe: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden )
• CSS Selektoren, Einheiten und Eigenschaften
• Miniprojekt "Uhrzeitrechner" gestalten

Einbinden externer css-Stile mit folgendem Befehl:
<link rel="stylesheet" href="dateinamevonmeinemstil.css">

Die wichtigsten CSS-Selektoren:

Der Klassenselektor spricht alle Elemente einer bestimmten Klasse im Elementbaum an
.warnung { background: red; } /* Alle Elemente der Klasse warnung erhalten einen roten Hintergrund. */
Beachte: Um Elemente zu selektieren, die mehreren Klassen angehören, muss man .klassenname1.klassenname2 ohne Leerzeichen notieren.

Der Typselektor spricht alle Elemente eines bestimmten Typs im Elementbaum an.
p { font-size: 1.5em; } /* Jeder Textabsatz der Seite erhält eine Schriftgröße von 1.5em. */

Der ID-Selektor spricht das Element einer bestimmten ID im Elementbaum an.
#autor { font-weight: bold; } /* Die Schrift des Elements mit der ID autor wird fett dargestellt. */

Der Universalselektor spricht jedes Element im Elementbaum an
* { margin: 1em } /* Jedes Element der Seite erhält einen Außenabstand von 1em. */

Details: https://wiki.selfhtml.org/wiki/CSS/Selektoren

Die wichtigsten CSS-Eigenschaften:

Property	Beschreibung	Details
color	Element Farbe	blue, black, lightgreen ...
background-color	Hintergrundfarbe
background-image	Hintergrundbild
display	Darstellungsregel	block, inline-block, inline, none
width	Elementbreite
height	Elementhöhe
margin	Äußerer Abstand
padding	Innerer Abstand
border	Rahmen	z.B. "border: 5px solid red;
border-color	Border Farbe
border-width	Border Dicke
border-style	Border Stil	none, solid, dotted, inset, dashed solid ...
border-radius	Border Eckenradius
font	Schriftart Eigenschaften	z.B "font: 15px Arial, sans-serif;"
font-family	Schriftart Eigenschaften	z.B. "font-family: Arial, Helvetica, sans-serif;"
font-style	Font style	z.B. "normal, italic, oblique"

Die wichtigsten CSS-Einheiten:

1px "Pixel": Die Einheit px wurde definiert um klein, aber noch sichtbar zu sein. Eine horizontale, 1px breite Linie wird vom Bildschirm mit scharfen Kanten (ohne Anti-Aliasing) dargestellt werden. Daher eignet sie sich z.B. für die Angabe von border-Dicken.

1em "Breite eines großen M": Wird oft benutzt, um Abstände oder Schriftgrößen anzugeben

100% "relativer, prozentualer Wert": Wenn man angeben will, dass ein Abstand oder Schriftgröße doppelt so groß sein soll wie die aktuell benutzte, so verwendet man die Angabe 200%.

05.09.2022

Lade folgendes Projekt als Grundlage herunter:
20220830_galerie_3.zip

30.08.2022

Ein Minimal-Template für kleine Projekte:



<!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>

Bei Fragen:
https://wiki.selfhtml.org/ anschauen hilft weiter!

Konkret ist folgendes Tutorial für die Grundlagen total hilfreich:
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg

Hausaufgabe: 1. Kapitel des Tutorials!

16.08.2022

1. Sitzung
• Begrüßung, Kursinhalt, Bewertung
• Alles erlaubt, aber keine Gewalt/Sex (Bilder/Namen), für die ich mich rechtfertigen müsste, wenn die Schulleitung mal reinkommt
• Essen und Trinken, eigenen USB-Stick mitbringen
• Fragen an die SuS: Wer hat Erfahrungen/Kontakt gemacht? Eltern etc. im Web-Job?
• Einordnung des Themenumfangs: Webdesign ist ein Mix aus Kunst und mindestens 50% IT (so werde ich das hier im PJK jedenfalls unterbringen). Dort, wo ich - im künstlerischen Bereich - weniger Expertise habe, werden wir selbst Kriterien festlegen.

Zitate:

„Design ist Kunst in der zweiten Potenz. Man muss die Ästhetik mit Zweckerfüllung multiplizieren. Damit ist es der Dimension der Kunst enthoben. Kunst betreibt Ästhetik um der Ästhetik willen. Sie ist eindimensional.“
Otl Aicher, Gestalter, aus „Die Welt als Entwurf“, Ernst & Sohn, 1991

„It took me a few seconds to draw it, but it took me 34 years to learn how to draw it in a few seconds.“
Paula Scher, Designerin

„Design setzt Inhalt voraus. Design ohne Inhalt ist Dekoration.“
Jeffrey Zeldman, Webdesigner, 2008

„Design is a relationship between form and content.“
Paul Rand, Grafikdesigner (Quelle: designersreviewofbooks.com)

„Design should never say ‚Look at me.‘ It should always say ‚Look at this.“
David Craib, Designer

Design ist ursprünglich die äußerliche Form- und Farbgestaltung eines Objekts, beinhaltet aber heute eine Vielzahl von weiteren Aspekten [...]. Insbesondere umfasst es auch die Auseinandersetzung des Designers mit der technischen Funktion eines Objekts sowie mit dessen Interaktion mit einem Benutzer.
Wikipedia

Übung: Text gemeinsam formulieren: Aufgabe von Webdesign (Unterschiede zum Printmedium, responsives Webdesign)

Technische Grundlagen
MC-Test: (Ohne Einsammeln, direkte Auswertung!)

Kurzdemonstration:

Frage 0: Paris ist ....
A) Eine Stadt in Europa
B) Die Hauptstadt Frankreichs
C) Eine Stadt in Deutschland

Es sind 0,1 oder mehrere oder alle Antworten korrekt. Ich frage später bei jeder einzelnen Antwort, wer die angekreuzt hat, und wer nicht

Frage 1: Folgende Programme sind Webbrowser:
A) Google
B) Firefox
C) Microsoft Edge
D) Microsoft Windows
E) Linux
F) Apple Safari

Frage 2: Ein typisches Handyfoto hat heutzutage grob etwa folgende Dateigröße
A) 3 MB/s
B) 3 MB
C) 3 KB
D) 3 GB
E) 3 TB
F) 3000 KB

Frage 3: Welche der folgende Dateitypen sind für Bilddateien gedacht und auch direkt innerhalb von Webseiten darstellbar?
A) PDF
B) DOC
C) JPG
D) HTML
E) PNG
F) PIC

Frage 4: Welche der folgenden Erklärungen sind korrekt:
A) HTML ist eine Markup-Sprache, mit der man Texte für's Web sinnvoll formatieren kann
B) HTTP ist ein Protokoll, also ein Ablaufregelwerk dafür, wie Webseiten (aber auch andere Daten) über das Internet übertragen werden
C) CSS ist eine Stylesheet-Sprache, mit der man Webseiten gestalten und layouten kann
D) JavaScript ist eine Programmiersprache, die im Browser ausgeführt werden kann, um Webseiteninhalte dynamischer zu gestalten
E) Während Fotos oft in einem Rasterformat abgespeichert werden, liegen einzelne Buchstaben in der Regel in einem Vektorformat vor.

Erster Arbeitsauftrag:
• Trash-Webseite aus Word heraus und Untersuchung des Quelltextes
Gemeinsam: Text formulieren: Unterschied "Word-Datei" und "Textdatei". Einheit Byte.

• Untersuchung des Quelltextes von Google oder Plusplanet, Copy Quelltext von Plusplanet in eine eigene HTML-Datei (CSS fehlt, kann aber eingebunden werden)

• Modifizierung einer ersten Webseite mit Bootstrap (columns ändern)
bootstrapTest.zip

Erste Hausaufgabe
https://wiki.selfhtml.org/ anschauen: Grundlagen/Geschichte lesen lassen

00.00.2022

Ein Minimal-Template für kleine Projekte:



<!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>